@charset "UTF-8";

html {
  height: 100%;
  /* [1] */
  min-height: 100%;
  /* [1] */
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  /* [2] */
  line-height: 1.5;
  /* [2] */
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
          text-size-adjust: 100%;
  /* [3] */ }

body {
  height: 100%;
  /* [1] */
  min-height: 100%;
  /* [1] */
  margin: 0;
  background-color: #EFF3F6;
  width:100% }

button,
input,
select {
  font-family: "Poppins", sans-serif; }

/**
 * Simple reset
 */
body,
h1, h2, h3, h4, h5, h6, p,
dl, ol, ul {
  margin: 0;
  padding: 0; }

article,
footer,
header,
nav,
section,
main {
  display: block; }

button {
  cursor: pointer; }

ul,
ol {
  margin: 0;
  padding: 0;
  list-style-type: none; }

/**
 * Remove trailing margins from nested lists.
 */
li > ol,
li > ul {
  margin-bottom: 0; }

img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  border-style: none; }

/* ==========================================================================
   #BASE TYPOGRAPHY
   ========================================================================== */
/**
 * Headings, paragraphs, links.
 */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 0.5rem;
  color: #354052;
  font-weight: 500; }

h1 {
  font-size: 2.25rem; }

h2 {
  font-size: 1.75rem; }

h3 {
  font-size: 1.5rem; }

h4 {
  font-size: 1.25rem; }

h5 {
  font-size: 1.125rem; }

h6 {
  font-size: 1rem; }

p {
  color: #354052;
  font-size: 0.875rem; }

strong {
  color: #354052; }

.weak {
  font-weight: 100;
}

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  -webkit-transition: color 0.15s ease-in-out;
  transition: color 0.15s ease-in-out;
  background-color: transparent;
  /* [1] */
  color: #2ea1f8;
  text-decoration: none;
  cursor: pointer;
  -webkit-text-decoration-skip: objects;
          text-decoration-skip: objects;
  /* [2] */ }
  a:hover {
    color: #2ea1f8;
    text-decoration: underline; }

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code {
  font-family: monospace, monospace;
  /* [1] */
  font-size: 1em;
  /* [2] */ }

small {
  font-size: 85%; }

/*!
 * Bootstrap Grid v4.0.0 (https://getbootstrap.com)
 * Copyright 2011-2018 The Bootstrap Authors
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
@-ms-viewport {
  width: device-width; }

html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -ms-overflow-style: scrollbar; }

*,
*::before,
*::after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit; }

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto; }

@media (min-width: 576px) {
  .container {
    max-width: 576px; } }

@media (min-width: 768px) {
  .container {
    max-width: 768px; } }

@media (min-width: 992px) {
  .container {
    max-width: 960px; } }

@media (min-width: 1200px) {
  .container {
    max-width: 1140px; } }

.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px; }

 .col-6, .col-12, .col-sm-12, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-10, .col-md-12, .col-lg-2, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-10, .col-lg-12, .col-xl-5, .col-xl-6 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px; }

.col-6 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%; }

.col-12 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%; }

@media (min-width: 576px) {
  .col-sm-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%; } }

@media (min-width: 768px) {
  .col-md-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%; }
  .col-md-5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%; }
  .col-md-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%; }
  .col-md-7 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%; }
  .col-md-8 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%; }
  .col-md-10 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%; }
  .col-md-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%; }
  .offset-md-1 {
    margin-left: 8.333333%; }
  .offset-md-2 {
    margin-left: 16.666667%; } }

@media (min-width: 992px) {
  .col-lg-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%; }
  .col-lg-5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%; }
  .col-lg-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%; }
  .col-lg-7 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%; }
  .col-lg-8 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%; }
  .col-lg-10 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%; }
  .col-lg-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%; }
  .offset-lg-2 {
    margin-left: 16.666667%; } }

@media (min-width: 1200px) {
  .col-xl-5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%; }
  .col-xl-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%; } }

/* makes the font 33% larger relative to the icon container */

/* Deprecated as of 4.4.0 */

@keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg); } }


/**
 * Event Color Variations
 */

/* ==========================================================================
   #SELECT 2 CUSTOM STYLES
   ========================================================================== */
/**
 * Instead of modifying `_select2.scss` directly, we add Dashboard's custom
 * styles for select2 plugin here.
 *
 * The code is a littly messy because the default select2 css styles is
 * difficult to be overriden.
 *
 * This file depends on scss variables from `settings.select` file located in:
 * [ settings/_settings.select.scss ]
 */

/**
 * Search Field
 */

/**
 * Multiple Selection
 */

/**
 * Disabled Select
 */

/*
 * The MIT License
 * Copyright (c) 2012 Matias Meno <m@tias.me>
 */

@keyframes passing-through {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px); }
  30%, 70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    transform: translateY(-40px); } }

@keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    transform: translateY(40px); }
  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px); } }

@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  10% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1); }
  20% {
    -webkit-transform: scale(1);
    transform: scale(1); } }

/* ==========================================================================
   #DROPZONE CUSTOM STYLES
   ========================================================================== */
/**
 * Instead of modifying `_dropzone.scss` directly, we add Dashboard's custom
 * styles for dropzone plugin here.
 */


/* ==========================================================================
   #PAGE OBJECT
   ========================================================================== */
/**
 * Use `o-page` to strucutre your page layout into sidebar, main content.
 */

/**
 * Used with `o-page__card` for better alignment.
 */

/**
 * 1. Control the width of sidebar.
 * 2. Sidebar always on the top.
 */

/**
 * Page content is pushed to the right to provide space for the sidebar.
 *
 * 1. Must equal the width of the `o-sidebar`.
 */

/**
 * Page Card
 *
 * A centered page card is used when you want the card to be centered and
 * provide a little space at the top & bottom e.g. login, 404 pages.
 */
.o-page__card {
  width: 450px;
  margin: 0 auto 3.125rem; }
  @media (max-width: 768px) {
    .o-page__card {
      width: 95%; } }

/**
 * Horizontal Page Card
 *
 * Used with login-2 page.
 */

/* ==========================================================================
   #MEDIA OBJECT
   ========================================================================== */

/**
 * 1. Spacing between the image and the text should be declared through
 *    the component, usually using a `spacing` utility class.
 */

/* ==========================================================================
   #LINE OBJECT
   ========================================================================== */
/**
 * The line object is used to align elemnts on one line, obviously.
 */
.o-line {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; }

/* ==========================================================================
   #RATIO OBJECT
   ========================================================================== */
/**
 * Ratio object is used to keep media (e.g. images, videos) in
 * their correct aspect ratios.
 *
 * USAGE:
 * <div class="o-ratio o-ratio--16:9">
 *     <iframe src"/"></iframe>
 * </div>
 */
/**
 * 1. Default cropping is a 1:1 ratio (i.e. a perfect square)
 */

/* ==========================================================================
   #ALERTS
   ========================================================================== */
.c-alert {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  width: 100%;
  margin: 0 0 0.9375rem 0;
  padding: 0.75rem 2rem 0.75rem 0.75rem;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  border-radius: 4px;
  color: #fff; }
  .c-alert.fade {
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
    opacity: 0; }
    .c-alert.fade.show {
      opacity: 1; }

/**
 * 1. Align icon with text properly.
 */
.c-alert__icon {
  position: relative;
  bottom: -4px;
  /* [1] */
  margin-right: 0.625rem;
  font-size: 1.125rem;
  opacity: 0.7; }

/* Style variants
   ========================================================================== */

.c-alert--warning {
  background-color: #fd9a18; }

/* ==========================================================================
   #AVATARS
   ========================================================================== */
/**
 * 1. Enable avatars to act like a dropdown toggle.
 * 2. Small arrow (icon) used in avatars with dropdowns.
 * 3. Remove default link decoration when avatar is used as a dropdown toggle.
 */
   /* .c-avatar.has-dropdown::after {
      display: block;
      padding-left: 10px;
      color: #7f8fa4;
      font-family: "icomoon";
      content: "\ebd0"; }*/

/* Size variants
   ========================================================================== */

/* ==========================================================================
   #BADGES
   ========================================================================== */

/* Style variants
   ========================================================================== */

/* ==========================================================================
   #BREADCRUMB
   ========================================================================== */

/* ==========================================================================
   #BUTTON GROUP
   ========================================================================== */
/**
 * A series of buttons grouped together on a single line.
 */

/**
 * Force button group to take full width.
 */

/* ==========================================================================
   #BUTTONS
   ========================================================================== */
/**
 * 1. Apply (c-btn--info) background if `c-btn--{style}` class isn't specified.
 * 2. Align icon (if placed inside button) with text properly.
 * 3. Add dropdown icon/arrow to button with `has-dropdown` class, it depends
 *    on (icomoon) icon font so make sure to modify it if you changed your
 *    base icon font.
 * 4. Use `disabled` property on <button> elements, and `is-disabled` class on
 *    <a> elements as they don't support `disabled` property.
 */
.c-btn {
  display: inline-block;
  position: relative;
  max-width: 100%;
  margin: 0;
  padding: 0.5rem 1.25rem;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  border: 1px solid;
  border-radius: 4px;
  border-color: #1a91eb;
  /* [1] */
  color: #fff;
  /* [1] */
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  vertical-align: middle;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background: #2ea1f8;
  background: -webkit-gradient(linear, left top, left bottom, from(#2ea1f8), to(#1990ea));
  background: linear-gradient(to bottom, #2ea1f8, #1990ea);
  /* [1] */ }
  .c-btn:hover, .c-btn:focus {
    outline: 0;
    color: #fff;
    text-decoration: none; }
  .c-btn i {
    position: relative;
    bottom: -1px;
    /* [2] */
    font-size: 16px; }
   .c-btn:disabled {
    /* [4] */
    border-color: #e6eaee;
    background: #f5f8fa;
    color: rgba(53, 64, 82, 0.5); }
     .c-btn:disabled:hover, .c-btn:disabled:focus {
      border-color: #e6eaee;
      background: #f5f8fa;
      color: rgba(53, 64, 82, 0.5);
      cursor: not-allowed; }

.c-btn--fullwidth {
  width: 100%; }

/**
 * 1. Reduce spacing between the icon and text in small buttons.
 */
.c-btn--small {
  padding: 0.25rem 1.125rem;
  font-size: 0.75rem; }
  .c-btn--small i {
    margin-right: 5px;
    /* [1] */ }

/* Style variants
   ========================================================================== */
/**
 * Buttons have a simple, nice gradient on the background, we use
 * sass's `darken()` method to generate a dark shade of the requested color,
 * then we use our `linear-gradient` mixin to generate the gradient background.
 */

.c-btn--info {
  background: #2ea1f8;
  background: -webkit-gradient(linear, left top, left bottom, from(#2ea1f8), to(#1990ea));
  background: linear-gradient(to bottom, #2ea1f8, #1990ea);
  border-color: #1a91eb; }
  .c-btn--info:hover {
    background: #1a98f7;
    background: -webkit-gradient(linear, left top, left bottom, from(#1a98f7), to(#1485db));
    background: linear-gradient(to bottom, #1a98f7, #1485db); }
  .c-btn--info:focus {
    background: #1094f7;
    background: -webkit-gradient(linear, left top, left bottom, from(#1094f7), to(#137fd1));
    background: linear-gradient(to bottom, #1094f7, #137fd1); }

.c-btn--success {
  background: #2f9a3e;
  background: -webkit-gradient(linear, left top, left bottom, from(#2f9a3e), to(#2f9a3e));
  background: linear-gradient(to bottom, #2f9a3e, #2f9a3e);
  border-color: #249533; }
  .c-btn--success:hover {
    background: #34a544;
    background: -webkit-gradient(linear, left top, left bottom, from(#34a544), to(#2f9a3e));
    background: linear-gradient(to bottom, #34a544, #2f9a3e); }
  .c-btn--success:focus {
    background: #329e40;
    background: -webkit-gradient(linear, left top, left bottom, from(#329e40), to(#2d933b));
    background: linear-gradient(to bottom, #329e40, #2d933b); }

/* ==========================================================================
   #CARD
   ========================================================================== */
/**
 * A simple component to apply card-like style, used with genearal widgets that
 * have sub-components in it.
 */
.c-card {
  position: relative;
  border: 1px solid #e6eaee;
  border-radius: 4px;
  background-color: #fff; }

/**
 * 1. Display a scrollbar if the content of the card is larger than the
 *    card's width.
 */

/**
 * 1. Align header's content vertically in the center
 */
.c-card__header {
  padding: 1.5625rem 1.875rem;
  border-bottom: 1px solid #e6eaee;
  background-color: #fafbfc; }

/**
 * Remove default background-color of card's header
 */

.c-card__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: -35px;
  right: 0;
  left: 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 70px;
  height: 70px;
  margin: 0 auto;
  border-radius: 100%;
  color: #fff;
  font-size: 1.75rem;
  background: #2ea1f8;
  background: -webkit-gradient(linear, left top, left bottom, from(#2ea1f8), to(#1990ea));
  background: linear-gradient(to bottom, #2ea1f8, #1990ea); }
  .c-card__icon:hover i {
    color: inherit;
    text-decoration: none; }

.c-card__body {
  padding: 1.875rem; }

/* ==========================================================================
   #CHOICES (Checkboxes & Radios)
   ========================================================================== */
/**
 * Checkboxes & Radios are controlled with a simple class called `c-choice`
 * because they are similar in styling, this class is used to share same
 * styles between them.
 *
 * EXAMPLE:
 *
 * <div class="c-choice c-choice--checkbox">
 *     <input class="c-choice__input" id="custom-checkbox" type="checkbox">
 *     <label class="c-choice__label" for="custom-checkbox">Checkbox 1</label>
 * </div>
 */
/**
 * 1. Get rid of white space cause by using `inline-flex`.
 *
 * Read More: https://goo.gl/ajXW52
 */

/**
 * 1. Hide default input and create a customized input.
 * 2. Align the customized input with label.
 */

/**
 * Checkboxes
 */

/**
 * Radio buttons
 */

/* ==========================================================================
   #CLOSE
   ========================================================================== */
/**
 * A small button for closing components, used with closable components
 * like alerts, modals.
 */

/* ==========================================================================
   #DROPDOWN
   ========================================================================== */
/**
 * A wrapper for the dropdown
 */

/**
 * Dropdown Menu
 *
 * 1. No matter what size is the dropdown toggle `dropdown-toggle` (a class from
 *    bootstrap), dropdown menu should be positioned properly.
 */

/**
 * A larger dropdown menu for dropdowns used in navbar.
 */

/**
 * 1. Remove border from last item to prevent it from collapsing with dropdown
 *    menu's last border.
 */

/* ==========================================================================
   #FIELD
   ========================================================================== */
/**
 * Form field `c-field` component is used as a wrapper for more complex inputs
 * that contain an icon, addon, form feedback and form message.
 *
 * 1. Take up (full width - width of field addon).
 */
.c-field {
  position: relative;
  width: 100%; }

/**
 * Inline fields don't take up whole width
 *
 * Used with search input in the navbar & toolbar.
 */

/**
 * Labels are used with inputs, always use labels with inputs for better
 * accesibility. Hide labels using `u-hidden-visually` to display it for
 * screen readers.
 *
 * USAGE: <label class="c-field__label u-hidden-visually"></label>
 */
.c-field__label {
  display: block;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  margin: 0 0 0.3125rem 0;
  color: #7f8fa4;
  font-size: 0.875rem;
  font-weight: 400; }

/**
 * Addon is an icon placed in box next to input, used as a visual indicator
 */

/**
 * Field message used as a helper note or feedback.
 */

/* ==========================================================================
   #ICONS
   ========================================================================== */
/**
 * Add rounded/circular box background to any icon.
 *
 * USAGE:
 *
 * <div class="c-icon c-icon--large c-icon--success">
 *     <i class="icon-Facebook-1"></i>
 * </div>
 */

/* Size variants
   ========================================================================== */

/* Style variants
   ========================================================================== */

/* ==========================================================================
   #INPUTS
   ========================================================================== */
.c-input {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.59375rem 0.9375rem;
  -webkit-transition: all .3s;
  transition: all .3s;
  border: 1px solid #dfe3e9;
  border-radius: 4px;
  background-color: #fff;
  color: #354052;
  font-size: 0.875rem;
  font-weight: 400;
  resize: none; }
  .c-input::-webkit-input-placeholder {
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
    color: rgba(53, 64, 82, 0.5);
    font-weight: 400;
    opacity: 0.5; }
  .c-input:-ms-input-placeholder {
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
    color: rgba(53, 64, 82, 0.5);
    font-weight: 400;
    opacity: 0.5; }
  .c-input::-ms-input-placeholder {
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
    color: rgba(53, 64, 82, 0.5);
    font-weight: 400;
    opacity: 0.5; }
  .c-input::placeholder {
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
    color: rgba(53, 64, 82, 0.5);
    font-weight: 400;
    opacity: 0.5; }
  .c-input:focus {
    border-color: #2ea1f8;
    outline: none; }
    .c-input:focus::-webkit-input-placeholder {
      opacity: 0.2; }
    .c-input:focus:-ms-input-placeholder {
      opacity: 0.2; }
    .c-input:focus::-ms-input-placeholder {
      opacity: 0.2; }
    .c-input:focus::placeholder {
      opacity: 0.2; }
   .c-input:disabled {
    border-color: #dfe3e9;
    background-color: #e6eaee;
    color: rgba(53, 64, 82, 0.5);
    cursor: not-allowed; }
         .c-input:disabled {
          border-color: #dfe3e9;
          background-color: #e6eaee;
          color: rgba(53, 64, 82, 0.5);
          cursor: not-allowed; }
    

/**
 * Textarea
 */

/* State variants
   ========================================================================== */

/* ==========================================================================
   #MODAL
   ========================================================================== */

/**
 * 1. Allow scrolling when content's height is larger than viewport's height.
 * 2. Set the default width of the modal to be medium.
 */

/**
 * Use this clas to quicklu position the close icon relative
 * to its container, `c-modal__content`.
 */

/**
 * Tab-style navigation inside modal subheader. When used, make sure to remove
 * default vertical padding from `c-modal__subheader`.
 */

/**
 * Apply max height to force the body of the modal to be scrolled. This class
 * is used with (achievements) modal.
 */

/**
 * Add a dark background to make modal dialog standout.
 */

/**
 * Modal move animation
 */
@-webkit-keyframes move {
  from {
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
    opacity: 0; } }

@keyframes move {
  from {
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
    opacity: 0; }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1; } }

/* ==========================================================================
   #NAV
   ========================================================================== */
/**
 * Nav sits within the main navbar area. It’s fully responsive as it holds
 * navigation items/links that will be collapsed, toggled in small
 * screens via `c-nav-toggle` component.
 */

/**
 * 1. Allow positioning dropdown menus inside nav items.
 */

/* Nav Toggle
   ========================================================================== */
/**
 * Nav toggle is the popular hamburger-like icon that would show/hide `c-nav`
 * via javascript through `js-nav-toggle` to toggle `is-open` class.
 *
 * 1. Remove default button styles.
 * 2. Show only on small screens, hide on large screen.
 */

/**
 * The hamburger icon itself, 3 bars stacked on top of each other.
 */

/* ==========================================================================
   #NAVBAR
   ========================================================================== */
/**
 * The site's main page header, used as a wrapper for its sub-components.
 */

/**
 * Set a fixed width for search input when placed in navbar.
 */

/**
 * 1. Custom width, height is specififed for proper alignment, adding your own
 *    brand/logo image will require custom styles for proper alignment.
 * 2. On small screens, seperate logo/brand from other navbar components as
 *    navbar links would be collapsed.
 */

/* Style variants
   ========================================================================== */
/**
 * Use `c-navbar--inverse` for dark background colors.
 *
 */

/* ==========================================================================
   #NOTIFICATIONS
   ========================================================================== */
/**
 * 1. Allow notification to have a dropdown menu.
 * 2. Fix additional space added by positioning number absolutely.
 */

/**
 * 1. Align number with notifcation icon properly.
 */

/* ==========================================================================
   #PAGINATION
   ========================================================================== */
/**
 * 1. Use flex utilitites with `c-pagination` for proper alignement of its
 *    children.
 */

/**
 * 1. Remove wierd space between list items.
 */

/**
 * 1. Line height of pagination control should equal its height for proper
 *    vertical alignment.
 */

/* ==========================================================================
   #POPOVERS
   ========================================================================== */

/* ==========================================================================
   #PROGRESS
   ========================================================================== */

/**
 * 1. Default (info) background-color would be applied, if class
 *    `c-progress--[color]` isn't specified.
 */

/* Size variants
   ========================================================================== */

/* Style variants
   ========================================================================== */

/* Multi-level progress bars
   ========================================================================== */

/* ==========================================================================
   #RANGES
   ========================================================================== */

/* ==========================================================================
   #SWITCH
   ========================================================================== */
/**
 * 1. Radius of `toggle` should be equal to radius of `c-switch`.
 * 2. The small circle that move to the right and left.
 * 3. Calculation: (width of switch bar) - (toggle's width + 2px )
 * 4. Don't allow active state on a disabled switch.

.c-switch {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer; }
  .c-switch::before {
    display: inline-block;
    position: relative;
    width: 48px;
    height: 26px;
    -webkit-transition: all .3s;
    transition: all .3s;
    border: 1px solid #e6eaee;
    border-radius: 83px;
    background-color: #dfe3e9;
    content: " "; }
  .c-switch::after {

    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    -webkit-transition: all .3s;
    transition: all .3s;
    border-radius: 83px;

    background-color: #fff;
    content: " "; }
  .c-switch.is-active::before {
    background-color: #34aa44; }
  .c-switch.is-active::after {
    left: 25px;
     }
  .c-switch.is-disabled {
    cursor: not-allowed; }
    .c-switch.is-disabled::after {
      opacity: 0.5; }
    .c-switch.is-disabled.is-active {
       }
      .c-switch.is-disabled.is-active::before {
        background-color: #dfe3e9; }
      .c-switch.is-disabled.is-active::after {
        right: 2px; } */

/**
 * 1. Hide input to replace it with switch-style input

.c-switch__input {
  display: none;
   }

.c-switch__label {
  margin: 0 0 0 0.625rem;
  color: #354052;
  font-size: 0.875rem;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }*/

/* ==========================================================================
   #SWITCH
   ========================================================================== */
/**
 * 1. Radius of `toggle` should be equal to radius of `c-switch`.
 * 2. The small circle that move to the right and left.
 * 3. Calculation: (width of switch bar) - (toggle's width + 2px )
 * 4. Don't allow active state on a disabled switch.

.c-switch {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer; }
  .c-switch::before {
    display: inline-block;
    position: relative;
    width: 48px;
    height: 26px;
    -webkit-transition: all .3s;
    transition: all .3s;
    border: 1px solid #e6eaee;
    border-radius: 83px;
    background-color: #dfe3e9;
    content: " "; }
  .c-switch::after {

    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    -webkit-transition: all .3s;
    transition: all .3s;
    border-radius: 83px;

    background-color: #fff;
    content: " "; }
  .c-switch.is-active::before {
    background-color: #34aa44; }
  .c-switch.is-active::after {
    left: 25px;
     }
  .c-switch.is-disabled {
    cursor: not-allowed; }
    .c-switch.is-disabled::after {
      opacity: 0.5; }
    .c-switch.is-disabled.is-active {
       }
      .c-switch.is-disabled.is-active::before {
        background-color: #dfe3e9; }
      .c-switch.is-disabled.is-active::after {
        right: 2px; }*/

/**
 * 1. Hide input to replace it with switch-style input

.c-switch__input {
  display: none;
   }

.c-switch__label {
  margin: 0 0 0 0.625rem;
  color: #354052;
  font-size: 0.875rem;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }*/

/* ==========================================================================
   #TABLES
   ========================================================================== */
/**
 * 1. The border-collapse CSS property specifies that the table's borders are
 *    collapsed and it means that adjacent cells share borders.
 */
.c-table {
  display: table;
  width: 100%;
  max-width: 100%;
  border: 1px solid #E6EAEE;
  border-radius: 4px;
  background-color: #fff;
  border-collapse: collapse;
  /* [1] */ }

/**
 * Responsive Tables
 *
 * Wrap any table with one of these classes to make it responsive at certain
 * breakpoint.
 *
 * 1. Wrap your table with this class `c-table-responsive` if the table's width
 * is larger than 1200px.
 */
.c-table-responsive {
  /* [1] */
  display: block;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch; }
  .c-table-responsive .c-table {
    display: table;
    overflow-y: hidden; }

/**
 * Use `c-table--zebra` to add zebra-styling to table rows inside the table.
 */

/**
 * Highlight table row on hover.
 */
.c-table--highlight tbody tr:hover {
  background-color: rgba(230, 234, 238, 0.3); }

/**
 * Table title/caption
 * <caption>
 */
.c-table__title {
  position: relative;
  padding: 25px 30px;
  border: 1px solid #e6eaee;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  background-color: #fff;
  color: #354052;
  font-size: 24px;
  text-align: left; }
  .c-table__title small {
    display: inline-block;
    margin-left: 10px;
    color: #7f8fa4;
    font-size: 14px; }
    .c-table__title small::before {
      display: inline-block;
      position: relative;
      bottom: -2px;
      width: 1px;
      height: 14px;
      margin-right: 12px;
      background-color: #DFE3E9;
      content: ""; }

/**
 * A small icon in table title used to perform general action on table like
 * downloading table content as a report.
 */

/**
 * Table Head
 *
 * Slimmer version of table's head with less sapcing and darker background
 */
.c-table__head--slim {
  padding: 0;
  background-color: #F5F8FA; }
  .c-table__head--slim .c-table__cell {
    padding: 10px 0 10px 30px; }

/**
 * Table Row
 */
.c-table__row {
  border-top: 1px solid #E6EAEE;
  /* [1] */
  border-bottom: 1px solid #E6EAEE;
  /* [1] */ }
  .c-table__row:last-child {
    border-bottom: 0; }

/**
 * Table Cell
 */
.c-table__cell {
  padding: 20px 0 20px 30px;
  color: #354052;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  vertical-align: middle; }
  .c-table__cell:last-child {
    padding-right: 1.875rem; }
  .c-table__cell:last-child {
    padding-right: 1.875rem; }

.c-table__cell--head {
  color: #7f8fa4;
  font-size: 0.875rem;
  font-weight: 600; }

/**
 * Table cell with image
 *
 * 2. Use flexbox to make sure all table-cell content is vertically centered.
 */

/* ==========================================================================
   #TABS
   ========================================================================== */
/**
 * A wrapper for tabs navigation and content.
 */
/**
 * 1. Works as a wrapper for tabs navigation links.
 */

/**
 * Splitted-style of tabs navigation list
 */

/* ==========================================================================
   #TOGGLE
   ========================================================================== */
/**
 * Toggles are a pair of buttons useful for (Yes/No)-like questions.
 *
 * 1. Remove `is-active` styles when `c-toggle` is disabled
 */

/**
 * 1. Hide default radio button
 */

/* ==========================================================================
   #TOOLBAR
   ========================================================================== */

/**
 * Toolbar (tab-like) Navigation
 */

/**
 * Toolbar stats
 *
 * Numbers & states placed in the toolbar, used in performance.html page
 */

/* ==========================================================================
   #TOOLTIPS
   ========================================================================== */
/**
 * Simple, css-only based tooltips.
 *
 * 1. Prevent other components from overrideing tooltip's line-height.
 * 2. Get tooltip text from `aria-label` and place it using `content` property.
 */

/* Direction variants
   ========================================================================== */

/* ==========================================================================
   #PROFILE
   ========================================================================== */

/**
 * Profile card main content.
 */

/**
 * Profile Card stats/numbers like: followers, following..
 */

/**
 * Use brand color utilities to set the background-color of every icon.
 *
 * Example:
 * 		<a class="c-profile__social-icon u-bg-dribbble" href="#">
 *     		<i class="fa fa-dribbble"></i>
 * 		</a>
 */

/**
 * A list of meta of information about the profile.
 */

/* ==========================================================================
   #EVENT
   ========================================================================== */

/**
 * Meta information about the event
 */

/**
 * Align event button with the event title
 */

/* ==========================================================================
   #SIDEBAR
   ========================================================================== */
/**
 * NOTE: The layout, width of the sidebar is controlled by `o-page__sidebar` in
 *       `o-page` object, found in `objects/_objects.page.scss`.
 */

/**
 * 1. Height of sidebar brand should equal the height of the navbar for perfect
 *    alignment.
 * 2. You can change the height of brand/logo image as you want, but its height
 *    shouldn't be more than navbar's height.
 */

/**
 * Sidebar naviagtion menu
 */

/**
 * Sub Menu
 */

/* Style Variation - Light Sidebar
   ========================================================================== */

/* Sidebar toggle
   ========================================================================== */
/**
 * An icon the is used to toggle (show/hide) sidebar on small screen, you will
 * find this component placed in the main navbar.
 */

/**
 * The hamburger icon itself, 3 bars stacked on top of each other.
 */

/* ==========================================================================
   #PROJECT
   ========================================================================== */
/**
 * Used in projects-board.html page.
 */

/**
 * On hover, expand project profiles.
 * Maximum number of profiles is 4, more profiles should be hidden.
 *
 * 1. Hover animation will only work on large viewports.
 */

/* ==========================================================================
   #POST
   ========================================================================== */
/**
 * Used in: news-feed.html
 */

/**
 * Customize submit button
 */

/* ==========================================================================
   #STREAM
   ========================================================================== */
/**
 * Used in news-feed.html page
 */

/**
 * Stream item header
 */

/**
 * Stream item gallery
 */

/**
 * A list of icons to perform certain actions like: (love, comment, reply).
 */

/* ==========================================================================
   #GALLERY CARD
   ========================================================================== */

/**
 * 1. Set width of gallery image to be half of its container minus (5px) as
 *    a spacing between images.
 */

/* ==========================================================================
   #STATE
   ========================================================================== */

/**
 * 1. Equals padding of `.c-state`.
 */

/* Style variants
   ========================================================================== */
/**
 * 1. If `c-state--{color}` isn't specified, (info) background color will
 *    be applied.
 */

/* ==========================================================================
   #TODO
   ========================================================================== */


/* ==========================================================================
   #MESSANGER
   ========================================================================== */
/**
 * Components used to build messanger page.
 *
 * Table of content:
 *
 * 1. Messages
 * 2. Chat
 */
/* 1. Messages
   ========================================================================== */
/**
 * A container for the messanger app.
 */

/**
 * A container for inbox messages.
 */

/**
 * Make room for messages counter
 */

/* 2. Chat
   ========================================================================== */
/**
 * A container for chat.
 */

/**
 * Chat Divider
 */

/**
  * Chat Message Composer
  *
  * a form to compose a new message.
  */

/* ==========================================================================
   #CREDIT CARD
   ========================================================================== */
/**
 * Used in account-settings.html page
 */

/* ==========================================================================
   #SEARCH RESULT
   ========================================================================== */

/* ==========================================================================
   #SEARCH FORM
   ========================================================================== */
/**
 * Used in browse.html page.
 */

/* ==========================================================================
   #GRAPH CARD
   ========================================================================== */

/* ==========================================================================
   #DIVIDER
   ========================================================================== */

/* ==========================================================================
   #PROGRESS CARD
   ========================================================================== */

/* ==========================================================================
   #PANEL
   ========================================================================== */
/**
 * Panels acts like a secondry sidebar, usually placed on the opposite side of
 * sidebar, in the case of Dashboad's design it's placed in the right.
 *
 * 1. Remove top border from panel to avoid collapsing with navbar's border.
 */

/* ==========================================================================
   #STATE CARD
   ========================================================================== */

/**
 * Icon style variations
 */

/* ==========================================================================
   #SUMMARY
   ========================================================================== */
/**
 * Used in invoices.html page
 */

/* ==========================================================================
   #CHART
   ========================================================================== */
/**
 * This works as a wrapper for charts.
 */

/* ==========================================================================
   #PROJECT CARD
   ========================================================================== */
/**
 * used in `home-overview.html`
 */

/* ==========================================================================
   #MENU
   ========================================================================== */
/**
 * A list of horizontal or vertical links, and unlike `c-menu` component, this
 * component shouldn't be used inside a sidebar or any other component.
 */

/* ==========================================================================
   #BOARDS
   ========================================================================== */
/**
 * Boards consist of 2 main components:
 *
 * 1. Board
 * 2. Task
 *
 * NOTE: We didn't seperate these components into their own files as it's
 * intended to be used togther.
 */
/* 1. Board
   ========================================================================== */

/**
 * A wrapper for board's tasks.
 */

/**
 * Add a board button
 */

/**
 * Board style variations
 *
 * Add a border with a specific color to indicate the status of the board.
 */

/* 2. Task
   ========================================================================== */

/**
 * Task style variations
 *
 * Add a border with a specific color to indicate the status of the task.
 */

/* ==========================================================================
   #PLANS
   ========================================================================== */

/* ==========================================================================
   #FILEITEM
   ========================================================================== */

/* ==========================================================================
   #OVERVIEW CARD
   ========================================================================== */
/**
 * Not really a reusable component, but it fixes responsive issues with
 * `Dashboard Overview` section in index.html page.
 */

@media (max-width: 768px) {
  .c-overview-card__section {
    margin-bottom: 30px; }
    .c-overview-card__section h3 {
      font-size: 1.25rem; } }

/* ==========================================================================
   #INVOICE
   ========================================================================== */

/**
 * Invoice Header
 *
 * Contains:
 * - compnay's name & logo
 * - invoice's title & date
 */

/**
 * Invoice Details
 *
 */

/**
 * Invoice content
 */

/**
 * Footer
 */

/* ==========================================================================
   #FEED
   ========================================================================== */
/**
 * User Activity Feed
 *
 * This component is used to show a stream of the user's activities and it's
 * used in user-profile.html page.
 */

/* Style variants
   ========================================================================== */

/* ==========================================================================
   #RATING
   ========================================================================== */
/**
 * A list of starts aligned horizontally to show the current rating of an item.
 *
 * EXAMPLE:
 *
 * <div class="c-rating">
 *      <i class="c-rating__icon is-active fa fa-star"></i>
 *      <i class="c-rating__icon is-active fa fa-star"></i>
 *      <i class="c-rating__icon is-active fa fa-star"></i>
 *      <i class="c-rating__icon is-active fa fa-star"></i>
 *      <i class="c-rating__icon fa fa-star"></i>
 *  </div>
 */

/* ==========================================================================
   #MAP
   ========================================================================== */
/**
 * Map is powered by jqvmap plugin, these labels are added manually.
 */

/* ==========================================================================
   #CANDIDATE
   ========================================================================== */
/**
 * Used in candidates.html page
 */

/**
 * 1. Remove weird extra space.
 */

/* ==========================================================================
   #STAGE
   ========================================================================== */
/**
 * Stage component is used to describe the project you are working on based on
 * multiple stages. This component is used in project-overview.html page.
 */

/* ==========================================================================
   #COUNTER NAV
   ========================================================================== */
/**
 * Counter nav is a different style of navigation, every navigation link has
 * an icon (that contains current number) before it.
 *
 * This component is used in project-overview.html page.
 */

/**
 * Inverse
 *
 * Use `.c-counter-nav--inverse` when using this component on a dark background.
 */

/* ==========================================================================
   #CHAT DIALOGUE
   ========================================================================== */
/**
 * A pop-up dialogue for different purposes like chat and customer support.
 * This component is used in chat-dialogue.html page.
 */

/* ==========================================================================
   #LOGIN HORIZONTAL
   ========================================================================== */

/* ==========================================================================
   #SIDEBAR MINIMUZED
   ========================================================================== */
/**
 * This file contains all customization for minimized-style sidebar.
 */
/**
 * This sidebar object
 */

@media (min-width: 992px) {
  /**
	 * On Hover
	 */
  /**
	 * This sidebar component
	 */
  /**
	 * On Hover
	 */ }

/* ==========================================================================
   #TYPOGRAPHY UTILITIES
   ========================================================================== */
/**
 * Headings
 *
 * Redefine all of our basic heading styles against utility classes so as to
 * allow for double stranded heading hierarchy, e.g. we semantically need an H2,
 * but we want it to be sized like an H1:
 *
 *   <h2 class="u-h1"></h2>
 *
 */

.u-h2 {
  font-size: 1.75rem; }

.u-h5 {
  font-size: 1.125rem; }

/**
 * Text Utilitites
 */
/**
 * Text Colors
 */
.u-text-mute {
  color: #7f8fa4 !important; }

/**
  * Text Sizes
  */

.u-text-small {
  font-size: 0.875rem !important; }

.u-text-large {
  font-size: 1rem !important; }

.u-text-big {
  font-size: 3.375rem;
  font-weight: 600;
  line-height: 48px; }

/**
  * Font Weights
  */
.u-text-bold {
  font-weight: 600 !important; }

/**
  * Aligning Text
  */
.u-text-right {
  text-align: right !important; }

.u-text-left {
  text-align: left !important; }

.u-text-center {
  text-align: center !important; }

/**
 * Transforming Text
 */

/* ==========================================================================
   #FLOATS UTILITIES
   ========================================================================== */

/* ==========================================================================
   #CLEARFIX UTILITIY
   ========================================================================== */
/**
 * Clear floated elements by adding `u-clearfix` to the parent element.
 */

/* ==========================================================================
   #SPACING UTILITIES
   ========================================================================== */
/**
 * Spacing utilities are used to provide spacing between components using
 * margins or inside the components using paddings. Different sizes allow you
 * to easily construct consistent layouts of components.
 */
/**
 * Margins
 *
 * m  -> all sides
 * mt -> margin-top
 * mr -> margin-right
 * mb -> margin-bottom
 * ml -> margin-left
 * mv -> margin-top & margin-bottom (vertically)
 * mh -> margin-right & margin-left (horizontaly)
 *
 */

.u-mb-zero {
  margin-bottom: 0 !important; }

.u-ml-zero {
  margin-left: 0 !important; }

.u-mt-xsmall {
  margin-top: 0.625rem !important; }

.u-mr-xsmall {
  margin-right: 0.625rem !important; }

.u-mb-xsmall {
  margin-bottom: 0.625rem !important; }

.u-ml-xsmall {
  margin-left: 0.625rem !important; }

.u-mv-xsmall {
  margin-top: 0.625rem !important;
  margin-bottom: 0.625rem !important; }

.u-mt-small {
  margin-top: 0.9375rem !important; }

.u-mr-small {
  margin-right: 0.9375rem !important; }

.u-mb-small {
  margin-bottom: 0.9375rem !important; }

.u-ml-small {
  margin-left: 0.9375rem !important; }

.u-mh-small {
  margin-right: 0.9375rem !important;
  margin-left: 0.9375rem !important; }

.u-mt-medium {
  margin-top: 1.875rem !important; }

.u-mr-medium {
  margin-right: 1.875rem !important; }

.u-mb-medium {
  margin-bottom: 1.875rem !important; }

.u-ml-medium {
  margin-left: 1.875rem !important; }

.u-mv-medium {
  margin-top: 1.875rem !important;
  margin-bottom: 1.875rem !important; }

.u-mt-large {
  margin-top: 3.125rem !important; }

.u-mb-large {
  margin-bottom: 3.125rem !important; }

.u-mv-large {
  margin-top: 3.125rem !important;
  margin-bottom: 3.125rem !important; }


 /** Large screen only margins */
@media (max-width: 520px){
/*larger screens*/
  
  /* custom mobile margins */

   /** Large screen only margins */


}
/**
 * Paddings
 *
 * p  -> all sides
 * pt -> padding-top
 * pr -> padding-right
 * pb -> padding-bottom
 * pl -> padding-left
 * pv -> padding-top & padding-bottom (vertically)
 * ph -> padding-right & padding-left (horizontaly)
 *
 */

.u-pr-xsmall {
  padding-right: 0.625rem !important; }

.u-ph-xsmall {
  padding-right: 0.625rem !important;
  padding-left: 0.625rem !important; }

.u-p-small {
  padding: 0.9375rem !important; }

.u-pt-small {
  padding-top: 0.9375rem !important; }

.u-pr-small {
  padding-right: 0.9375rem !important; }

.u-pb-small {
  padding-bottom: 0.9375rem !important; }

.u-pl-small {
  padding-left: 0.9375rem !important; }

.u-ph-small {
  padding-right: 0.9375rem !important;
  padding-left: 0.9375rem !important; }

.u-p-medium {
  padding: 1.875rem !important; }

.u-pt-medium {
  padding-top: 1.875rem !important; }

.u-pr-medium {
  padding-right: 1.875rem !important; }

.u-pb-medium {
  padding-bottom: 1.875rem !important; }

.u-pl-medium {
  padding-left: 1.875rem !important; }

.u-p-large {
  padding: 3.125rem !important; }

.u-pt-large {
  padding-top: 3.125rem !important; }

.u-pb-large {
  padding-bottom: 3.125rem !important; }

.u-ph-large {
  padding-right: 3.125rem !important;
  padding-left: 3.125rem !important; }

.u-p-xlarge {
  padding: 6.25rem !important; }

.u-pt-xlarge {
  padding-top: 6.25rem !important; }

.u-pr-xlarge {
  padding-right: 6.25rem !important; }

.u-pl-xlarge {
  padding-left: 6.25rem !important; }

/* ==========================================================================
   #COLORS UTILITIES
   ========================================================================== */
/**
 * Set the text color of elements.
 */
.u-color-success {
  color: #1bb934 !important; }

.u-color-info {
  color: #2ea1f8 !important; }

.u-color-primary {
  color: #354052 !important; }

/**
  * Set the background color of elements.
  */

/**
  * Use brand-color utilities to apply text colors and background colors to
  * brand-related components like social icons.
  */
/**
 * Brand text colors
 */

/**
 * Brand background colors
 *
 * 1. If a component has border, we change its border-color to match with
 *    the brand background-color.
 */

/* ==========================================================================
   #DISPLAY UTILITIES
   ========================================================================== */
.u-block {
  display: block !important; }

/* ==========================================================================
   #BORDER UTILITIES
   ========================================================================== */
/**
 * Use border utilities to add or remove borders from certain components
 * to prevent border collapsing.
 */
/**
 * Add borders
 */

.u-border-right {
  border-right: 1px solid #e6eaee !important; }

/**
 * Remove borders
 */

/**
 * Border radius
 */

/* ==========================================================================
   #FLEX UTILITIES
   ========================================================================== */
.u-flex {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important; }

.u-justify-start {
  -webkit-box-pack: start !important;
      -ms-flex-pack: start !important;
          justify-content: flex-start !important; }

.u-justify-center {
  -webkit-box-pack: center !important;
      -ms-flex-pack: center !important;
          justify-content: center !important; }

.u-flex-wrap {
  -ms-flex-wrap: wrap !important;
      flex-wrap: wrap !important; }

/* ==========================================================================
   #RESPONSIVE UTILITIES
   ========================================================================== */
/**
 * Hide content at all viewports.
 */

/**
 * Hide visually but make it accessible to screenreaders.
 */

/**
 * Use `u-hidden-down@{breakpoint}` to hide content from a specific breakpoint
 * and smaller viewports.
 *
 * 1. Hide on mobile.
 * 2. Hide on mobile and tablet.
 * 3. Hide on mobile, tablet and desktop.
 * 4. Hide on mobile, tablet, desktop and wide.
 *
 * NOTE: u-hidden@wide : still visible on viewports larger than wide breakpoint.
 */

/**
 * Use `u-hidden-up@{breakpoint}` to hide content from a specific breakpoint
 * and larger viewports.
 *
 * 1. Hide on viewports larger than mobile.
 * 2. Hide on viewports larger than tablet.
 * 3. Hide on viewports larger than desktop.
 * 4. Hide on viewports larger than wide.
 *
 * NOTE: u-hidden@wide : still visible on viewports larger than wide breakpoint.
 */

/* ==========================================================================
   #OPACITY UTILITIES
   ========================================================================== */
/**
 * Use opacity utilities to specify the level of transparency of an element
 */

/* ==========================================================================
   #SIZES UTILITIES
   ========================================================================== */
/**
 * Widths
 */

/**
 * Heights
 */

/* ==========================================================================
   #OVERFLOW UTILITIES
   ========================================================================== */
/**
 * Overflow
 */

/**
 * Horizontal Overflow
 */

/**
 * Vericall Overflow
 */

/* ==========================================================================
   #BOOTSTRAP UTILITIES
   ========================================================================== */
/**
 * These classes are used by bootstrap plugins.
 */
.fade {
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
  opacity: 0; }
  .fade.show {
    opacity: 1; }

/* ==========================================================================
  #STATUS TABLES CUSTOM
  ========================================================================== */

/* ==========================================================================
  #REPORT CUSTOM
  ========================================================================== */

/*  placeholder  */

.line {
  height: 12px;
  margin: 10px;
  animation: pulse 1s infinite ease-in-out;
  -webkit-animation:pulse 1s infinite ease-in-out;
}

@keyframes pulse {
  0% {
    background-color: rgba(165,165,165,.1);
  }
  50% {
    background-color: rgba(165,165,165,.3);
  }
  100% {
    background-color: rgba(165,165,165,.1);
  }
}


/* mobile */

@media (max-width: 576px) {
  .top-small-title {
    width: 100%;
    font-size: 0.8rem; } }

@media (max-width: 768px) {
.o-page__card {
    width: 100%;
} }

/* checklist */

@media only screen and (max-width: 574px) {
  .c-table__cell:last-child, .c-table__cell {
    padding-right: 0;
    padding-left: 0;
  }
}
.small {
  font-size: 1.5em;
}


@media screen and (max-width: 768px){
  .share__btn{

    margin-right: 0;
  }
}
.share__btn{
  margin-right: 1em;
}

/* Dashboard.js */


/* Use this class in order to make react select's dropdown open to the top */


/* Project.js */ 


/* ColorPicker.js */










/*
*
*
*
*  FONTS
*
*
*/

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-Brake-Link:before {
  content: "\e973";
}
.icon-Check-1:before {
  content: "\e9b1";
}
.icon-Facebook-1:before {
  content: "\ec37";
}
.icon-Left-2:before {
  content: "\ed64";
}
.icon-Twitter-1:before {
  content: "\f09d";
}



i[class^="icon-"]:before {
	display: inline-block;
	text-decoration: none;
}

@keyframes spinanim {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* TeamView V2 */

.right {
  margin-left: 36px;
}

.left {
 float: left;
 width: 36px;
 margin-left: -100%;
 line-height: 2.5rem;
}
/* .c-board::-webkit-scrollbar {
  border-radius:10px; 
}


.c-board__content::-webkit-scrollbar {
  width: 0.6em;
  border-radius: 1em;
  margin-top: 20px;
}

.c-board__content::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
  /* border-radius:800px; */
  /* padding-top: 200px; */
/* } */
@media (min-width: 1550px) { 
}
/* 
@media (min-width: 700px) {
@media (max-width: 900px) {
  .task__margin{
    margin-left: 0.5em;
    padding-right: 0px !important;
  }
  .dropdown-task{
    margin-right: 0px !important;
  }
}
} */
/*custom xxl size*/

.description{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #DAE5F5;
  font-size: 0.867rem;
}
   .c-btn:disabled {
    /* [4] */
    border-color: #e6eaee;
    background: #f5f8fa;
    color: rgba(53, 64, 82, 0.5); }

  @media (min-width: 768px) { 
    }


/* ==========================================================================
   #DROPDOWN
   ========================================================================== */
/**
 * A wrapper for the dropdown
 */

/**
 * Dropdown Menu
 *
 * 1. No matter what size is the dropdown toggle `dropdown-toggle` (a class from
 *    bootstrap), dropdown menu should be positioned properly.
 */

/**
 * A larger dropdown menu for dropdowns used in navbar.
 */

/**
 * 1. Remove border from last item to prevent it from collapsing with dropdown
 *    menu's last border.
 */
  


.blackfriday__deal{
  font-family: 'Poppins', "sans-serif"
}

.blackfriday__header{
  font-size: 15px;
  line-height: 25px;
  color: #354052;
  font-weight: none;
  padding-right: 0;
  height: auto;
  background-image: linear-gradient(242deg, #eff3f6 0%, #ffffff 100%);
  
}

.bf__logo{
  /* margin-left: 22em; */
  margin-left: -10px !important;
  padding-right: 1em;
 
}
.bf__logo > img{
  height: 50px;
  
}

.offer__logo > img{
  height: 50px;
  
}


.blackfriday__header__title{
  font-size: 3pc;
  padding-right: 1em;
  line-height: 59px;
  color: #354052;
  margin-bottom: 0.5em;
  font-weight: bold;
  /* -webkit-text-stroke: 4px #ffffff; */
}
.bfd__screenshot_container {
  margin-left: 4em;
  margin-right: none;
  padding: 0;
  /* max-width: 100%; */

}


.bfd__screenshot_container > img{

  overflow: hidden;
  max-height: 550px;
  
  max-width: none;
  padding: 0;
  margin: 0;

  border-radius: 7px;
  /* background-color: #d8d8d8; */
  border: 4px solid #ffffff;
}

.lifetime__btn{
  padding: 0.5em;
  font-size: 1.7em;
}


/* .blackfriday__header__logo{
  margin-left: 10em;
} */

.expiration__box{
  width: 72px;
  height: 70px;
  border-radius: 5px;
  background-color: #f0a374;
  text-align: center;

}


.margin__container__bfd{
  margin-left: 23em;
  width: 64%;
}

.expiration__container{
  margin-left: 10.25em;
  padding-left: 14em;
  /* margin-left: 14em; */
}



.expiration__title{
  font-size: 20px;
  font-weight: bold;
  /* margin-left: 2em; */

}
.expiration__box__txt{
  
  font-size:1.85em;
  color: #ffffff;
  padding-top: 0.5em;
  margin-bottom: -4px;
  font-weight: bold;
}

.expiration__box__time{
  
  color: #ffffff;
  font-size: 0.8em;
}

.expiration__box__container__top{
  /* margin-left: 0.5em; */
  margin-left: 4em;
}

.section__padding{
  padding: 8em 0em 6em 4em ;
  padding-right: 0px !important;
  margin-right: 0px !important;
  overflow: hidden;
  max-width: 100%;
}
.blackfriday__first-section{
  background-color: #ffffff;
}

.blackfriday__first-section__left__title{
  font-size: 37px;
  color: #486ea4;
  -webkit-text-stroke: 2px  #486ea4;
}

.feature-section__left__title{
  font-size: 24px;
  color: #486ea4;
  -webkit-text-stroke: 2px  #486ea4;
}

.blackfriday__first-section__left__body{
  font-size: 18px;

  color: #18191c;

}


.bf-price-container{
  font-size: 55px;
  line-height: 100px;

  color: #010101;
  text-align: center;
  font-weight: 600;

}

.facebook-btn{
  background: #3453a5;
}

.social-media{
  font-family: Helvetica, Arial, sans-serif;
}

.blackfriday__bottom-section{
  background-color:  #1c2842;
  color: #ffffff;
  font-size: 15px;
}
.blackfriday__bottom-section__title{

  font-size: 27px;
  -webkit-text-stroke: 2px  #ffffff;
}
.blackfriday__sidebar{
  padding-top: 10em;
  float: right;
  background-color: #ffffff;
  margin-top: 3.2em;
  width: 100%;

}


.txt__with__weight {
  font-weight: 600 ;
}
.blackfriday__sidebar__bottom{
  height: 22em;
  float: right;
  background-color: #ffffff;
  margin-left: 1em;
  background-color: #f5f9fe;
  
  width: 100%;
}
.blackfriday__sidebar__bottom  .expiration__box__container{
  margin: 0;
  padding: 0;
}

.blackfriday__sidebar__bottom  .expiration__box{

  border-radius: 5px;
  background-color: #3072c9;

}

.blackfriday__sidebar__bottom  .expiration__title{
  color: black;
  font-weight: bold;
}

.blackfriday__sidebar__bottom .expiration__box__txt{
  font-weight: 0;
  padding-top: 0.2em;
  font-size:1.85em;
  margin-bottom: -10px;
}

.bottom_section__padding{
  font-size: 19px;
  margin-left: 20em;
  width: 32em;
  padding-top: 5em;
  margin-right: 3em;
}

.row__container{
  margin-left: 1em;
}



.bottom-box__bf{
  border-radius: 4px;
  background-image: linear-gradient(139deg, #6b6afc 0%, #3873f8 100%);
  width: 100%;
}



.bottom_rectangle{
  font-size: 13px;
  width:  14em ;
  height: 14em;
  border-radius: 4px;
  background-color: #1a2e5a;
  float: left;
  padding: 2em;
}

.price__rectangle{
  font-size: 45px;

  color: #ffd352;
  -webkit-text-stroke: 2px #ffd352;
}
.bottom_box__text{
  font-size: 1rem;
  font-weight: 600;
  margin-top: 0.5em;
}
.bottom__btn{
  
  text-align: center;
  border-radius: 6px;
  background-color: #ec6248 !important;
  display: inline-block;
  width: 100%; 
  color: #ffffff;
  
  /* font-size: 16px; */
  font-weight: bold;
  padding: 0.5em;


}
.bottom__btn:hover{
  color: #ffffff !important; 
  text-decoration: none;
}

.final__txt{
  margin-top: 2em;
  font-size: 23px;
  line-height: 33px;
  color: #ffffff;
}

.blackfriday__success{
  font-size: 15px;
  line-height: 25px;
  color: #fff;
  font-weight: none;
  padding-right: 0;
 
  background: #999dbf30;
  opacity: 1;
  
  
}
.blackfriday__success__container{
  background-image: linear-gradient(242deg, #eff3f6 0%, #ffffff 100%);
  min-height: 100vh!important;
}

.blackfriday__success .c-card{
  color: black;
}

/*mobile*/

@media screen and (max-width: 768px){

  .top-img {
    display: none;
  }

  .aside--exp-boxes {
    margin-top: 10px !important;
    margin-right: 0px !important;
    margin-left: 0px !important;
    padding: 0px !important;
  }


  .lifetime__btn{
    padding: 0.5em;
    font-size: 1.5rem;
  }

  .blackfriday__sidebar__bottom .expiration__box {
    margin-right: 0.5em !important;
    margin-left: 0.6em !important;
    border-radius: 5px;
    background-color: #3072c9;
}
  
  .blackfriday__sidebar__bottom  .expiration__container{
    margin: 0px !important;
    padding-left: 1em !important;
    padding-right: 1em !important;
    padding: 0px !important;

  
  }

  .blackfriday__sidebar__bottom{
    padding: 0px !important;
    margin: 0px !important;
  }

  
  .blackfriday__success__container, .blackfriday__success__container .container{
    padding : 0 !important;
    margin : 0 !important;
  }
  .blackfriday__success{
    padding : 1em !important;
    margin : 0 !important;
    /* width: 80%; */
  }
  .bottom-box__bf{
    width:100%;
    padding: 1em;

  }
  .bottom_rectangle{
    overflow: hidden;
    margin-bottom: 1em;
  }



  .mobile--float{
    width: 100%;
    padding: 1em;
    text-align: left;
  }


  .blackfriday__header__title{
    font-size: 2em;
    line-height: normal;
    width: 100% !important;
  }

  .row__container{
    padding: 0 !important;
  }
  
  .bfd__screenshot_container > img{
    overflow: hidden;
    padding:0px;
    /* height: 300px; */
    max-width:100%;
  }



  .mobile-container{
    
    margin: 0px !important;
    padding: 0px !important;
  }



  .blackfriday__sidebar__bottom, .blackfriday__sidebar{
    height: auto;
    width: 100%;
    margin: auto;
    padding: auto;
  }



  .section__padding{
    padding: 4em 1em;
  }
  .lifetime__btn{
    padding: auto;
    font-size: 1.5rem;
    margin: 0.5em;
  }
  .bf__logo > img{
    max-height: 30px;
  }


  .expiration__header{
    max-width: 100%;
    text-align: center !important;
    
  }
  /* .expiration__subtitle, .expiration__title{
    margin: 10% ;
    padding: auto;
    */
  /* } */
  .expiration__box__container{
    margin: 0px;
    padding: 0px;
    max-width: 100%;
  }
  .expiration__container{
    margin-left: 2em;

  }

  .expiration__box{
    margin-bottom: 1em;
  }

  .blackfriday__first-section__left__title{
    font-size: 24px;
   
  }
  .bfd__screenshot_container {
    margin: 0 ;
  }

  .row__container{
    margin-left: 2em !important; 

  }
  .mobile__only__bfbtn{
    width: 100% !important;
  }

  .bottom_section__padding{
    font-size: 18px;
    margin: 0px !important;

  }
  .margin__container__bfd{
    max-width: 90%;
    margin-right: 1em;
    /* padding-right: 2em;
    margin-right: 2em; */
  }  

    .blackfriday__sidebar__bottom  .expiration__container{
    padding-left: 5em !important;
    max-width: 80% !important;
    
  }

  .blackfriday__sidebar__bottom  .expiration__box{
    margin-bottom: 1em !important;
  }
}

/**tablets**/
@media screen and (max-width: 1400px) {
  .blackfriday__sidebar__bottom  .expiration__box{

    margin-right: 1em ;
    margin-left: 1em ;
    border-radius: 5px;
    background-color: #3072c9;
    
  }


  .blackfriday__sidebar__bottom {
    padding: 1em 0px 1em 0px !important;

  }
  .margin__container__bfd{
    margin: 0px;
    padding: 0px;
  }
  .margin__container__bfd{
    /* margin-left: 41.6em; */
    width:100%;

  }
  .expiration__container{
    margin: 0px;
    padding: 0px;
    max-width: 100%;
  }
 
  .blackfriday__sidebar__bottom, .blackfriday__sidebar{
    height: auto;
    margin-top: none;
    width: 100%;
    padding-bottom: 3em;
  }
  

  .expiration__container{
    margin-top: 3em;
    margin-left: 1em;
    padding: 0px;
  }

  .bottom_section__padding{
    width: 100%;
    padding-top: 7em;
  }
  .blackfriday__success{
    padding : 2em !important;

    /* width: 80%; */
  }


}

@media screen and (min-width: 2000px) {
  .margin__container__bfd{
    margin-left: 41.6em;
    width: 48%;

  }
  
  .bfd__screenshot_container{
    padding-left: 1.7em;
  }

  /* .blackfriday__sidebar__bottom  .expiration__box{

    margin-right: 1em !important;
    margin-left: 1em !important;
    border-radius: 5px;
    background-color: #3072c9;
    
  } */

  .bfd__screenshot_container > img{
 
    overflow: hidden;
    min-height: 645px;
    margin-top: -50px !important;
    max-width: none;
    padding: 0;
    margin: 0;

    border-radius: 7px;
    /* background-color: #d8d8d8; */
    border: 4px solid #ffffff;
  }
  .expiration__container{
    margin-top: none;
    margin-left: 33em;
  }

  .bottom-box__bf {

  }
  .bottom_section__padding{
    margin-left: 36em;
    width: 34em;
    padding-top: 5em;
    margin-right: 3em;
  }

  
  .bottom_rectangle{
    width:  14.5em ;
    height: 15em;
    border-radius: 4px;
    background-color: #1a2e5a;
    float: left;

  }


}

@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
    .bottom_section__padding{
      padding: 0px;
      margin: 0px;
    }
    .blackfriday__sidebar__bottom, .blackfriday__sidebar{
      margin-top: none !important;
    }
  .blackfriday__success{
    padding : 2em !important;
    margin : 1em !important;
    /* width: 80%; */
  }
  .bottom-box__bf{
    border-radius: 4px;
    background-image: linear-gradient(139deg, #6b6afc 0%, #3873f8 100%);
    width: 100%;
  }
  

}

@media screen and (min-width: 1200px) and (max-width: 1440px) {
  .margin__container__bfd{
    margin-left: 7em;
    width: 85%;


  }

  .expiration__container{
    margin-left: 8.5em;
    padding-left: 0;
  }
  .expiration__box__container__top{
    margin-left: 3.5em;
  }
    
.blackfriday__header__title{
  font-size: 3em;
  padding-right: 0;
  line-height: 59px;
  color: #354052;
  margin-bottom: 0.5em;
  font-weight: 400;
}
.bottom_section__padding{
  margin-left: 7em;
  width: 34em;
  padding-top: 5em;
  margin-right: 3em;
}

  
}

@media screen and (min-width: 1000px) and (max-width: 1199px) {
  .margin__container__bfd{
    margin-left: 0em;
    width: 90%;


  }
  .expiration__container{
    margin-left: 2em;
    padding-left: 0;
  }

    
.blackfriday__header__title{
  font-size: 3em;
  padding-right: 0;
  line-height: 59px;
  color: #ffffff;
  margin-bottom: 0.5em;
  font-weight: 400;
}
.bottom_section__padding{
  margin-left: 2em;
  width: 28em;
  padding-top: 5em;
  margin-right: 3em;
}
.bottom-box__bf {

}

  
}

 @media screen and (width: 768px) and (height: 1024px){
  .stats{
     
      margin-left: 32% !important;
      margin-right: 30% !important;
    
    

  
  }
  

  .bfd__screenshot_container > img{
   
    overflow: hidden;
    min-width: 100%;
    /* display: none; */
    margin-top: 0px !important; 
    border-radius: 7px;
    /* background-color: #d8d8d8; */
    border: 4px solid #ffffff;
  }
  .blackfriday__sidebar__bottom  .expiration__box{
    margin: 10px !important;
    border-radius: 5px;
    background-color: #3072c9;
    float: left !important;

  
  }
  .blackfriday__sidebar__bottom  .expiration__box__container{
    margin-top: 1em !important;
    padding-left: 25% !important;
    padding-right: 20% !important;
    margin-bottom: 1em !important;
   }

   .lifetime__btn{
    padding: 0.5em;
    font-size: 1.5rem;
  }


}
* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: inherit;
  font: inherit;
  vertical-align: baseline;
  color: inherit;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased !important;
}
html {
  height: 100%;
  /* [1] */
  min-height: 100%;
  /* [1] */
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  /* [2] */
  line-height: 1.5;
  /* [2] */
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
          text-size-adjust: 100%;
  /* [3] */ }

body {
  height: 100%;
  /* [1] */
  min-height: 100%;
  /* [1] */
  margin: 0;
  background-color: #EFF3F6;
  width:100% }
  
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.white {
  color: #fff;
}
img,
iframe {
  vertical-align: middle;
  max-width: 100%;
  max-height: 100%;
}
strong,
.bold {
  font-weight: 700;
}
em {
  font-style: italic;
}
a {
  text-decoration: none;
  color: inherit;
}
a:hover,
a:active {
  text-decoration: none;
  opacity: 0.95;
  color: inherit;
}
a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
input[type='checkbox'],
label {
  vertical-align: middle;
}
input,
button {
  outline: none;
}
button {
  cursor: pointer;
}
a:hover {
  color: #007ab3;
  opacity: 0.9;
}

label {
  margin-bottom: 0;
}
input[type='checkbox'],
input[type='radio'] {
  margin: 0;
}
@-moz-document url-prefix() {
  input[type='text'],
  input[type='password'],
  input[type='email'],
  select {
    background: #fff;
  }
}

/*HEADER*/
#header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
#header .main-container {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  height: 100px;
  -ms-align-items: center;
  align-items: center;
  justify-content: space-between;
}
.top-menu-item {
  display: inline-block;
  color: #000;
  padding-top: 0px;
}
.logo img {
  width: 140px;
}
#header .logo {
  width: calc(100% - 800px);
  min-width: 150px;
}
.top-menu-list .active {
  color: #0069be;
}
.top-menu {
  width: 75%;
  display: flex;
  -webkit-align-items: flex-end;
  align-items: flex-end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  max-width: 600px;
}
.top-menu-list {
  width: 100%;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
  height: 35px;
}
.top-menu-link {
  font-size: 16px;
}
.red-button {
  background: #2ea1f8;
  color: #fff;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}
.red-button:hover {
  background: #1094f7;
  color: #fff;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}
.small-button {
  padding: 9px;
  text-align: center;
  min-width: 150px;
  font-weight: 600;
}
.sign-up-button {
  /*margin-top: 10px;*/
  margin-left: 6%;
  display: inline-block;
}
.sign-up-button:hover {
  color: #fff;
}
.mobile-button {
  display: none;
}

/*END HEADER*/

/*CONTAINER*/
.top-wrap {
  width: 100%;
  height: calc(100vw / 1.6);
  max-height: 1000px;
  margin-top: -140px;
  padding-top: 100px;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  background-image: linear-gradient(110deg, #e4f3ff 60%, #dcf0ff 60%);
}
.main-container {
  margin: auto;
  width: 85%;
  max-width: 85%;
}
.main-container-bg {
  margin: auto;
  width: 85%;
  max-width: 85%;
}
.top-title {
  font-size: 45px;
  color: #354052;
  font-weight: 400;
  line-height: 4rem;
  max-width: 59%;
  margin: 0 auto;
  text-align: center;
  /*text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);*/
}

.top-small-title {
  font-size: 1.5rem;
  color: #354052;
  font-weight: 400;
  max-width: 59%;
  margin: 0 auto;
  text-align: center;
  /*text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);*/
}
.orange-button {
  color: rgb(103, 95, 95);
  background-color: #e3e9fe;
}
.big-button {
  padding: 15px 35px 12px;
  display: inline-block;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  font-size: 18px;
  font-weight: 600;
}
.top-content {
  min-height: 350px;
  text-align: center;
}
.top-buttons {
  margin-top: 55px;
}
.top-buttons .button-effect {
  display: inline-block;
}
.top-buttons .button-effect:nth-child(1) {
  margin-right: 25px;
}
.orange-button:hover {
  color: rgb(103, 95, 95);
}
.third-party-integration {
  background-image: url(../../images/landing/third-party.jpg);
  padding-top: 80px;
  padding-bottom: 150px;
  background-position: center center;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.third-party-list {
  text-align: center;
  margin-top: 60px;
}
.third-party-item {
  width: 140px;
  height: 140px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background: #fff;
  margin-left: 1.3%;
  margin-right: 1.3%;
  margin-bottom: 40px;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.third-party-item a {
  display: flex;
  width: 100%;
  height: 100%;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.third-party-item a img {
  max-width: 85%;
}
.third-party-item span {
  display: flex;
  width: 100%;
  height: 100%;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.third-party-item span img {
  max-width: 85%;
}
.section-title {
  color: #486ea4;
  font-size: 40px;
  font-weight: 400;
}
.section-text {
  font-size: 16px;
  color: #544c4c;
  line-height: 24px;
}
.all-round-text {
  text-align: center;
  max-width: 1000px;
  margin: 15px auto;
}
.service-item {
  background: #f8f8f8;
}
.service-container {
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  padding-top: 70px;
  padding-bottom: 50px;
  width: 1400px;
  margin: auto;
  max-width: 85%;
}
.service-img {
  width: 650px;
  max-width: 100%;
}
.service-content {
  width: 650px;
  max-width: 100%;
  padding-right: 200px;
}
.service-content .section-text {
  margin-top: 20px;
  padding-bottom: 40px;
}
.service-item:nth-child(even) .service-img img {
  margin-left: -55px;
}
.service-item:nth-child(odd) {
  background: #fff;
}
.service-item:nth-child(odd) .service-img {
  -webkit-order: 2;
  -ms-order: 2;
  order: 2;
  width: 700px;
}
.service-item:nth-child(odd) .service-content {
  padding-right: 50px;
  width: 600px;
}
.try-taskeo {
  background-image: url(../../images/landing/try-taskeo.jpg);
  padding-top: 70px;
  padding-bottom: 85px;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center center;
}
.try-taskeo-title {
  color: #fff;
}
.try-taskeo-text {
  color: #fff;
  margin-top: 15px;
}

/*END CONTENT*/

/*START FOOTER*/
#footer {
  background: #fafdff;
  padding-top: 80px;
  padding-bottom: 80px;
}
#footer .main-container {
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.footer-col:nth-child(1) {
  max-width: 180px;
}
.fc1 {
  font-size: 1rem;
  line-height: 1.5rem;
  color: #354052;
  margin-top: 25px;
  padding-right: 15px;
}
.footer-col-title {
  font-size: 15px;
  color: #4669c3;
  font-weight: 500;
  margin-top: 15px;
  margin-bottom: 25px;
}
.footer-col-link {
  color: #354052;
  font-size: 13px;
  font-weight: 400;
}
.footer-col-item {
  margin-bottom: 10px;
}
.icon-footer {
  display: inline-block;
  width: 27px;
  height: 27px;
  margin-right: 10px;
  margin-bottom: 10px;
  background-image: url(../../images/landing/social-icons.png);
  -webkit-background-size: 162px 54px;
  -o-background-size: 162px 54px;
  background-size: 162px 54px;
}

.icon-twitter {
  background-position: 0 0;
}
.icon-instagram {
  background-position: -54px 0;
}
.icon-dk {
  background-position: -135px 0;
}

.icon-footer:hover {
  opacity: 1;
}

.icon-twitter:hover {
  background-position: 0 27px;
}
.icon-instagram:hover {
  background-position: -54px 27px;
}
.icon-dk:hover {
  background-position: -135px 27px;
}

/*END FOOTER*/

/* Effect 5: same word slide in */
.top-menu-list a {
  overflow: hidden;
  padding: 0 4px;
  height: 1.4em;
  font-size: 0.9rem;
}

.top-menu-list a span {
  position: relative;
  display: inline-block;
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
}

/*.top-menu-list a span::before {
  position: absolute;
  top: 100%;
  content: attr(data-hover);
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.top-menu-list a:hover span,
.top-menu-list a:focus span {
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  transform: translateY(-100%);
}*/

.top-menu-list a {
  position: relative;
  display: inline-block;
  outline: none;
  text-decoration: none;
  font-weight: 400;
  font-size: 0.9rem;
}

.top-menu-list a:hover,
.top-menu-list a:focus {
  outline: none;
}
.display-block {
  display: block;
}

/*.button-effect {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  position: relative;*/
  /*border: 1px solid rgba(255,255,255,0.5);*/
/*  overflow: hidden;
}
.button-effect::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  opacity: 1;
  -webkit-transform: translate(0, -105%);
  transform: translate(0, -105%);
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgba(255, 255, 255, 1);
  background-color: rgba(255, 255, 255, 0.25);
}
.button-effect:hover::before {
  opacity: 0;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}*/

/*RESPONSIVE*/

@media only screen and (max-width: 1600px) {
  .third-party-item {
    width: 140px;
    height: 140px;
  }
  .third-party-item a img {
    max-width: 80%;
  }
}

@media only screen and (min-width: 1600px) {


}

@media only screen and (max-width: 1400px) {
  .main-container {
    width: 85%;
    max-width: 1100px;
  }
  .service-container {
    width: 85%;
    max-width: 1100px;
  }
  .third-party-item {
    width: 140px;
    height: 140px;
  }
  .top-title {
    font-size: 42px;
    max-width: 59%;
  }
  .top-small-title {
    max-width: 59%;
  }
  .section-title {
    font-size: 34px;
  }
  .section-text {
    font-size: 15px;
  }
  .service-img {
    width: 550px;
  }
  .service-item:nth-child(even) .service-content {
    padding-right: 100px;
  }
  .service-content {
    width: 550px;
    padding-right: 100px;
  }
  .service-item:nth-child(even) .service-img img {
    margin-left: -40px;
  }
  .big-button {
    font-size: 16px;
  }
  .top-menu {
    max-width: 700px;
  }

}
@media only screen and (max-width: 1200px) {
  .main-container {
    width: 85%;
    max-width: 900px;
  }
  .service-container {
    width: 85%;
    max-width: 900px;
  }
  .service-item:nth-child(even) .service-content {
    margin-left: 2%;
    padding-right: 50px;
  }
  .service-img {
    width: 100%;
    max-width: 450px;
  }
  .service-content {
    width: 100%;
    max-width: 450px;
  }
  .third-party-item {
    width: 120px;
    height: 120px;
  }
  .third-party-item a img {
    max-width: 75%;
  }
  .top-menu-link {
    font-size: 14px;
  }
  #header .logo {
    width: calc(100% - 700px);
  }

  .top-title {
    font-size: 35px;
    line-height: 3rem;
    max-width: 59%;
  }
  .top-small-title {
    max-width: 59%;
  }
  .section-title {
    font-size: 30px;
  }
  .section-text {
    font-size: 14px;
  }
  .big-button {
    font-size: 14px;
  }
  .third-party-integration {
    padding-bottom: 100px;
  }
  .top-content {
    min-height: 300px;
  }
  .service-item:nth-child(odd) .service-content .section-text,
  .service-item:nth-child(odd) .service-content .section-title {
    max-width: 90%;
  }
  .top-img {
    top: 24% !important;
  }
}
@media only screen and (max-width: 1023px) {
  .service-item:nth-child(odd) .service-content {
    padding-right: 0;
  }
  .third-party-item {
    width: 90px;
    height: 90px;
  }
  .all-round-text {
    max-width: 85%;
  }
  #header .logo {
    width: calc(100% - 600px);
  }
  .section-title {
    font-size: 24px;
  }
  .top-title {
    font-size: 28px;
    line-height: 2.5rem;
    max-width: 80%;
  }
  .top-small-title {
    max-width: 80%;
    font-size: 1rem;
  }
  .top-menu-link {
    font-size: 13px;
  }
  .sign-up-button {
    font-size: 13px;
  }
  .service-item:nth-child(even) .service-content {
    margin-left: 0;
  }
  .big-button {
    padding: 10px 30px 12px;
  }
  .top-content {
    min-height: 250px;
  }

  .top-img {
    top: 24% !important;
  }


}

@media only screen and (max-width: 959px) {
  #header .logo {
    width: calc(100% - 550px);
  }
  .footer-col-title {
    font-size: 13px;
  }
  .third-party-item {
    width: 90px;
    height: 90px;
  }
  .top-small-title {
    max-width: 60%;
    font-size: 1.2rem;
  }
}
@media only screen and (max-width: 850px) {
  #header .logo {
    width: calc(100% - 500px);
    margin-right: 40px;
  }
}
@media only screen and (max-width: 767px) {
  .mobile-button {
    display: block;
  }
  .top-menu {
    display: none;
  }
  .mobile-menu-active .top-menu {
    display: block;
    background: #f8f8f8;
    position: absolute;
    width: 100%;
    max-width: 100%;
    height: auto;
    top: 0;
    left: 0;
    padding-top: 100px;
    z-index: 999;
    padding-bottom: 20px;
    border-bottom: 1px solid #97acbf;
    background-image: url(../../images/landing/third-party.jpg);
    background-size: 100% 100%;
  }
  .top-menu-item {
    width: 100%;
  }
  .mobile-menu-active .top-menu-list {
    display: block;
    height: auto;
    max-width: 75%;
    margin: auto;
  }
  .sign-up-button {
    width: 100%;
    display: block;
    -webkit-border-radius: 0;
    border-radius: 0;
    margin-top: 0;
    max-width: 75%;
    margin: auto;
    background: transparent;
    color: #486ea4;
    height: 35px;
    line-height: 35px;
    padding: 0;
    border-top: 1px solid #97acbf;
  }
  .sign-up-button:hover {
    color: #486ea4;
  }
  .sign-up-button:hover::before {
    display: none;
  }
  .sign-up-button::before {
    display: none;
  }
  #header .logo {
    position: relative;
    z-index: 9999;
  }
  .top-menu-item {
    height: 35px;
    line-height: 35px;
    border-top: 1px solid #97acbf;
  }
  .top-menu-item .top-menu-link {
    color: #2354cc;
    display: block;
    height: auto;
    padding: 0;
    margin-top: 4px;
  }
  .top-menu-list a span::before {
    display: none;
  }
  .top-menu-list a span {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
  }
  .top-menu-list a:hover span,
  .top-menu-list a:focus span {
    -webkit-transform: none;
    -moz-transform: none;
    transform: none;
  }
  .third-party-item {
    margin-left: 6%;
    margin-right: 6%;
  }
  .service-container {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .service-item .service-container .service-img {
    width: 100%;
    text-align: center;
  }
  .service-item:nth-child(even) .service-img img {
    margin-left: 0;
  }
  .service-item .service-container .service-content {
    width: 100%;
    text-align: left;
    padding-left: 7%;
    padding-right: 7%;
  }
  .service-item:nth-child(odd) .service-img {
    -webkit-order: 0;
    -ms-order: 0;
    order: 0;
  }
  .main-container {
    max-width: 100%;
  }
  #footer .main-container {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .footer-col:nth-child(1) {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
  }
  #footer {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .third-party-integration .section-title,
  .third-party-integration .section-text {
    max-width: 80%;
    margin: 15px auto;
  }
  .top-small-title {
    max-width: 80%;
    font-size: 0.8rem;
  }
}

@media only screen and (max-width: 567px) {
  .footer-col:nth-child(5) {
    width: 100%;
    max-width: 100%;
    margin-top: 20px;
  }
  .service-container {
    padding-top: 60px;
    padding-bottom: 40px;
  }
  .section-title {
    font-size: 20px;
  }
  .section-text {
    font-size: 13px;
    line-height: 20px;
  }
  .top-title {
    font-size: 24px;
    line-height: 2rem;
  }
  .top-buttons {
    margin-top: 20px;
  }
  .top-content {
    min-height: initial;
  }
  #header .main-container {
    height: 80px;
  }
  .top-wrap {
    margin-top: -80px;
    padding-top: 80px;
    min-height: 300px;
  }
  .big-button {
    padding: 8px 15px 9px;
    font-size: 13px;
    display: inline-block;
    margin-bottom: 10px;
    min-width: 110px;
    text-align: center;
  }
  #header .logo {
    min-width: 120px;
  }
  .mobile-menu-active .top-menu {
    padding-top: 80px;
  }
  .top-buttons .button-effect:nth-child(1) {
    margin-right: 15px;
  }
  .footer-col .display-block {
    display: none;
  }
}

@media only screen and (max-width: 480px) {
  .top-title {
    font-size: 22px;
    line-height: 1.5rem;
  }
}

@media only screen and (max-width: 359px) {
  .top-buttons .button-effect:nth-child(1) {
    margin-right: 10px;
  }
  .icon-footer {
    margin-right: 5px;
  }
}

.mobile-button {
  width: 36px;
  height: 32px;
  /*border: 1px solid #ff5c5c;*/
  -webkit-border-radius: 2px;
  border-radius: 2px;
  color: #ff5c5c;
  text-align: center;
  font-size: 17px;
  padding-top: 2px;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  cursor: pointer;
  position: relative;
  z-index: 1000;
}
.mobile-button span {
  display: block;
  position: absolute;
  height: 3px;
  width: 75%;
  background: #000;
  border-radius: 4px;
  opacity: 1;
  left: 0;
  right: 0;
  margin: auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}

/* Icon 3 */

.mobile-button span:nth-child(1) {
  top: 8px;
}

.mobile-button span:nth-child(2),
.mobile-button span:nth-child(3) {
  top: 16px;
}

.mobile-button span:nth-child(4) {
  top: 24px;
}

.mobile-menu-active .mobile-button span:nth-child(1) {
  top: 16px;
  width: 0%;
  left: 50%;
}

.mobile-menu-active .mobile-button span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.mobile-menu-active .mobile-button span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.mobile-menu-active .mobile-button span:nth-child(4) {
  top: 16px;
  width: 0%;
  left: 50%;
}


/* ==========================================================================
   #CARD
   ========================================================================== */
/**
 * A simple component to apply card-like style, used with genearal widgets that
 * have sub-components in it.
 */
 .c-card {
  position: relative;
  border: 1px solid #e6eaee;
  border-radius: 4px;
  background-color: #fff; }

/**
 * 1. Display a scrollbar if the content of the card is larger than the
 *    card's width.
 */

/**
 * 1. Align header's content vertically in the center
 */
.c-card__header {
  padding: 1.5625rem 1.875rem;
  border-bottom: 1px solid #e6eaee;
  background-color: #fafbfc; }

/**
 * Remove default background-color of card's header
 */

.c-card__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: -35px;
  right: 0;
  left: 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 70px;
  height: 70px;
  margin: 0 auto;
  border-radius: 100%;
  color: #fff;
  font-size: 1.75rem;
  background: #2ea1f8;
  background: -webkit-gradient(linear, left top, left bottom, from(#2ea1f8), to(#1990ea));
  background: linear-gradient(to bottom, #2ea1f8, #1990ea); }
  .c-card__icon:hover i {
    color: inherit;
    text-decoration: none; }

.c-card__body {
  padding: 1.875rem; }

.u-pr-xsmall {
  padding-right: 0.625rem !important; }

.u-ph-xsmall {
  padding-right: 0.625rem !important;
  padding-left: 0.625rem !important; }

.u-p-small {
  padding: 0.9375rem !important; }

.u-pt-small {
  padding-top: 0.9375rem !important; }

.u-pr-small {
  padding-right: 0.9375rem !important; }

.u-pb-small {
  padding-bottom: 0.9375rem !important; }

.u-pl-small {
  padding-left: 0.9375rem !important; }

.u-ph-small {
  padding-right: 0.9375rem !important;
  padding-left: 0.9375rem !important; }

.u-p-medium {
  padding: 1.875rem !important; }

.u-pt-medium {
  padding-top: 1.875rem !important; }

.u-pr-medium {
  padding-right: 1.875rem !important; }

.u-pb-medium {
  padding-bottom: 1.875rem !important; }

.u-pl-medium {
  padding-left: 1.875rem !important; }

.u-p-large {
  padding: 3.125rem !important; }

.u-pt-large {
  padding-top: 3.125rem !important; }

.u-pb-large {
  padding-bottom: 3.125rem !important; }

.u-ph-large {
  padding-right: 3.125rem !important;
  padding-left: 3.125rem !important; }

.u-p-xlarge {
  padding: 6.25rem !important; }

.u-pt-xlarge {
  padding-top: 6.25rem !important; }

.u-pr-xlarge {
  padding-right: 6.25rem !important; }

.u-pl-xlarge {
  padding-left: 6.25rem !important; }
  
  h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 0.5rem;
  color: #354052;
  font-weight: 600; }

h1 {
  font-size: 2.25rem; }

h2 {
  font-size: 1.75rem; }

h3 {
  font-size: 1.5rem; }

h4 {
  font-size: 1.25rem; }

h5 {
  font-size: 1.125rem; }

h6 {
  font-size: 1rem; }

p {
  color: #354052;
  font-size: 0.875rem; }

strong {
  color: #354052; }

.weak {
  font-weight: 100;
}


.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto; }

@media (min-width: 576px) {
  .container {
    max-width: 576px; } }

@media (min-width: 768px) {
  .container {
    max-width: 768px; } }

@media (min-width: 992px) {
  .container {
    max-width: 960px; } }

@media (min-width: 1200px) {
  .container {
    max-width: 1140px; } }

.o-page__card {
  width: 450px;
  margin: 0 auto 3.125rem; }
  @media (max-width: 768px) {
    .o-page__card {
      width: 95%; } }
    
@media (max-width: 768px) {
  .o-page__card {
      width: 100%;
  } }
        

/* ==========================================================================
   #SPACING UTILITIES
   ========================================================================== */
/**
 * Spacing utilities are used to provide spacing between components using
 * margins or inside the components using paddings. Different sizes allow you
 * to easily construct consistent layouts of components.
 */
/**
 * Margins
 *
 * m  -> all sides
 * mt -> margin-top
 * mr -> margin-right
 * mb -> margin-bottom
 * ml -> margin-left
 * mv -> margin-top & margin-bottom (vertically)
 * mh -> margin-right & margin-left (horizontaly)
 *
 */

.u-mb-zero {
  margin-bottom: 0 !important; }

.u-ml-zero {
  margin-left: 0 !important; }

.u-mt-xsmall {
  margin-top: 0.625rem !important; }

.u-mr-xsmall {
  margin-right: 0.625rem !important; }

.u-mb-xsmall {
  margin-bottom: 0.625rem !important; }

.u-ml-xsmall {
  margin-left: 0.625rem !important; }

.u-mv-xsmall {
  margin-top: 0.625rem !important;
  margin-bottom: 0.625rem !important; }

.u-mt-small {
  margin-top: 0.9375rem !important; }

.u-mr-small {
  margin-right: 0.9375rem !important; }

.u-mb-small {
  margin-bottom: 0.9375rem !important; }

.u-ml-small {
  margin-left: 0.9375rem !important; }

.u-mh-small {
  margin-right: 0.9375rem !important;
  margin-left: 0.9375rem !important; }

.u-mt-medium {
  margin-top: 1.875rem !important; }

.u-mr-medium {
  margin-right: 1.875rem !important; }

.u-mb-medium {
  margin-bottom: 1.875rem !important; }

.u-ml-medium {
  margin-left: 1.875rem !important; }

.u-mv-medium {
  margin-top: 1.875rem !important;
  margin-bottom: 1.875rem !important; }

.u-mt-large {
  margin-top: 3.125rem !important; }

.u-mb-large {
  margin-bottom: 3.125rem !important; }

.u-mv-large {
  margin-top: 3.125rem !important;
  margin-bottom: 3.125rem !important; }

.u-text-center {
  text-align: center !important; }


/**
 * Text Utilitites
 */
/**
 * Text Colors
 */
 .u-text-mute {
  color: #7f8fa4 !important; }

/**
  * Text Sizes
  */

.u-text-small {
  font-size: 0.875rem !important; }

.u-text-large {
  font-size: 1rem !important; }

.u-text-big {
  font-size: 3.375rem;
  font-weight: 600;
  line-height: 48px; }

@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?xboacj');
  src:  url('../fonts/icomoon.eot?xboacj#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?xboacj') format('truetype'),
    url('../fonts/icomoon.woff?xboacj') format('woff'),
    url('../fonts/icomoon.svg?xboacj#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-Brake-Link:before {
  content: "\e973";
}

.icon-Left-2:before {
  content: "\ed64";
}



i[class^="icon-"]:before {
	display: inline-block;
	text-decoration: none;
}

@keyframes spinanim {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.u-h5 {
  font-size: 1.125rem; }


/* ==========================================================================
   #DISPLAY UTILITIES
   ========================================================================== */
   .u-block {
    display: block !important; }
  
.u-justify-center {
  -webkit-box-pack: center !important;
      -ms-flex-pack: center !important;
          justify-content: center !important; }
    
/* ==========================================================================
   #LINE OBJECT
   ========================================================================== */
/**
 * The line object is used to align elemnts on one line, obviously.
 */
 .o-line {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; }



  @media screen and (width: 1024px) and (height: 1366px){
  .stats{
  
    margin-left: 1.5em !important;
    padding: 5px !important;
  
  
  }
  .aside--exp-boxes {
    margin-top: 10px !important;
    margin-right: 0px !important;
    margin-left: 0px !important;
    padding: 0px !important;
  }
  
  .blackfriday__sidebar__bottom  .expiration__box{
    margin: 10px !important;
    padding: 0px !important;
    border-radius: 5px;
    background-color: #3072c9;
    float: left !important;

    
  
  }
  .expiration__box__container__top{
    margin-left: 1em;
  }
 
}

.screenshot-container > img {
  overflow: hidden;

  padding: 0;
  margin-bottom: 1em;
  box-shadow: 0 0 10px 2px #d2d2d2 ;

  border-radius: 7px;
  /* background-color: #f9f9f9; */
  border: 8px solid #ffffff;
}

header {
  background-image: linear-gradient(242deg, #ffffff 0%, #ffffff 100%);
  z-index: 1;
  border-bottom: 1px solid #d6d6d6;
}

.feature-img > img {
  overflow: hidden;
 
  padding: 0;
  margin-bottom: 1em;
  box-shadow: 0px 4px 6px 1px #d5e2ee;

  border-radius: 5px;
  /* background-color: #f9f9f9; */
  border: 0px solid #ffffff;
}

.feature-box {
  width:300px;
  height:400px;
  display:inline-block;
  text-align:left;
  padding-left: 2rem;
  padding-right: 2rem;
  overflow: hidden;
}

.feature-box-bf {
  width:242px;
  height:360px;
  display:inline-block;
  text-align:left;
  padding-left: 0rem;
  padding-right: 1rem;
  overflow: hidden;
}