/** ----- UNIVERSAL ----- **/

/* font */
@font-face { 
  font-family: 'rpmtxt'; 
  src: url(../font/inter.ttf);
  font-weight: 300;
}
@font-face { font-family: 'sol-300'; src: url(../font/sol-300.otf); }
@font-face { font-family: 'sol-400'; src: url(../font/sol-400.otf); }
@font-face { font-family: 'sol-500'; src: url(../font/sol-500.otf); }
@font-face { font-family: 'sol-700'; src: url(../font/sol-700.otf); }
@font-face { font-family: 'sol-800'; src: url(../font/sol-800.otf); }


/* RESET */
*, html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
  line-height: normal;
  text-decoration: none;
  box-sizing: border-box;
  font-family: 'sol-300';
  font-weight: normal;
  word-wrap: break-word;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* html & body */
html, body {
  box-sizing: border-box;
  scroll-behavior: smooth;
  line-height: 1;
}

/* links */
a { 
  cursor: pointer;
  color: inherit;
  transition: 0.4s;
}

/* scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
  ::-webkit-scrollbar-track {
    background-color:rgba(0,0,0,0.1);
  }
  ::-webkit-scrollbar-thumb {
    background: #666;
    border-radius: 500px;
  }
    ::-webkit-scrollbar-thumb:hover {
      background: #6ea833;
    }

/*** ----- COLORS ----- ***/
/*
Border Light - #2b4258
Border Dark - #26323d
*/


/*** ----- PAGE PROGRESS BAR ----- ***/
.pbar {
  overflow: hidden;
  position: relative;
	margin-top: 0px;
  width: 100%;
	height: 4px;
	background: #444444;
  float: left;
}
  #pbar, #pbar-mobile {
    overflow: hidden;
    width: 0%;
    height: 4px;
    background: #6ea833;
    color: #6ea833;
    text-align: center;
    font-size: 5px;
  }

/*** --- BLOCK --- ***/
#block {
    overflow: hidden;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgb(0, 0, 0, 0.07);
    color: #ffffff;
    transition: 0.4s;
    opacity: 1;
    z-index: 99999;
}


/*** --- LOADERS --- ***/

/* page loader */
#loader {
  overflow: hidden;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgb(255, 255, 255, 0.8);
  color: #ffffff;
  transition: 0.4s;
  opacity: 1;
  z-index: 99999;
}
.dark #loader {
  background-color: rgb(0, 0, 0, 0.8);
}
#loader .hide {
  opacity: 0;
  pointer-events: none;
}
#loader .jumper {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: block;
  position: absolute;
  margin: auto;
  width: 8vw;
  height: 8vw;
}
#loader .jumper > div {
  background-color: #6ea833;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  position: absolute;
  opacity: 0;
  width: 8vw;
  height: 8vw;
  -webkit-animation: jumper 1.5s 0s linear infinite;
  animation: jumper 1.5s 0s linear infinite;
}
#loader .jumper > div:nth-child(2) {
  -webkit-animation-delay: 0.33333s;
  animation-delay: 0.33333s;
}
#loader .jumper > div:nth-child(3) {
  -webkit-animation-delay: 0.66666s;
  animation-delay: 0.66666s;
}
  @-webkit-keyframes jumper {
    0% {
      opacity: 0;
      -webkit-transform: scale(0);
      transform: scale(0);
    }
    5% {
      opacity: 1;
    }
    100% {
      -webkit-transform: scale(1);
      transform: scale(1);
      opacity: 0;
    }
  }
  @keyframes jumper {
    0% {
      opacity: 0;
      -webkit-transform: scale(0);
      transform: scale(0);
    }
    5% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

/* section loader */
.sec-loader {
  overflow: hidden;
  position: relative;
  margin-right: .5vw;
  width: 3vw;
  height: 3vw;
  border: .35vw solid #f0f0f0;
  border-radius: 50%;
  border-top: .35vw solid #6ea833;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  float: right;
}
  @-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

/* small loader */
.sm-loader {
  overflow: hidden;
  position: relative;
  top: .45vw;
  margin-right: 1vw;
  width: 2vw;
  height: 2vw;
  border: .30vw solid #f0f0f0;
  border-radius: 50%;
  border-top: .30vw solid #444444;
  -webkit-animation: spin 2s linear infinite;
  animation: smspin 1s linear infinite;
  display: inline-block;
}
  @-webkit-keyframes smspin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  @keyframes smspin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

/*** ----- ERROR MSG ----- ***/
#logout {
    overflow: hidden;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 107;
}
#start_msg {
    overflow: hidden;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 107;
}
#error_msg {
    overflow: hidden;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 107;
}
  :is(#logout, #error_msg, #start_msg) #msg {
    overflow: hidden;
    position: relative;
    width: 100%;
    color: #ffffff;
    padding: 1.4vw 2vw;
    padding-bottom: 1.3vw;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
    z-index: 4;
    float: left;
  }
    :is(#logout, #error_msg, #start_msg) #msg div {
      overflow: visible;
      margin: 0;
      font-size: 1.4vw;
      text-align: center;
    }
    :is(#logout, #error_msg, #start_msg) #msg b {
      position: relative;
      margin-right: 1vw;
      font-size: 1.6vw;
      cursor: pointer;
      transition: 0.4s;
      float: left;
    }
      :is(#logout, #error_msg, #start_msg) #msg b:hover {
        opacity: .6;
      }
      :is(#logout, #error_msg, #start_msg) #msg b:before {
        font-family: "FontAwesome";
        content: '\f00d';
      }
  
  /* types */
  .msg-green {
    background-color: rgba(102, 173, 31, .85);
  }
  .msg-yellow {
    background-color: rgba(248, 141, 0, .85);
  }
  .msg-red {
    background-color: rgba(235, 53, 53, 0.85);
  }
  .msg-blue {
    background-color: rgba(42, 142, 209, 0.85);
  }


/*** ----- DROP MENU -----  ***/
.drop-content {
  overflow: hidden;
  position: absolute;
  right: 0;
  width: auto;
  background-color: #ffffff;
  text-align: center;
  text-transform: capitalize;
  border-radius: 1vw;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  z-index: 1;
  display: none;
}

  .drop-content :is(span, a)  {
    overflow: hidden;
    color: #333333;
    font-size: 1.1vw;
    border-top: 1px solid #e5e5e5;
    padding: 1.2vw 2.5vw;
    display: block;
  }
    .drop-content :is(span:hover, a:hover) {
      background-color: #f5f5f5;
      cursor: pointer;
    }
    .drop-content :nth-child(1) {
      border: none;
    }
  .drop-content .delete {
    color: #fd5a5a;
  }
  .show {
    display: block !important;
  }


/*** ----- INPUTS ----- ***/

/* required */
.require b:after {
  content: "* ";
  color: #fd5a5a;
}

form {
  padding: .2vw;
}

/* default: TEXT/PASSWORD */
.input {
  overflow: visible;
  position: relative;
  margin-top: 1.1vw;
  width: 100%;
  float: left;
}

  /* input: CURRENCY */
  .input-alt .currency {
    overflow: hidden;
    position: absolute;
    margin-top: 2.1vw;
    left: 1.3vw;
    font-size: 1.1vw;
    color: #888888 !important;
  }

  /* input: FIELD */
  input[type="text"], input[type="password"], input[type="number"], textarea, .select {
    overflow: hidden;
    position: relative;
    margin: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    font-size: 1.2vw;
    color: #888888;
    outline: none;
    border: 1px solid #e5e5e5;
    border-radius: 1vw;
    padding: 1.4vw 1.5vw;
    padding-top: 3.3vw;
    transition: all 0.4s;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    float: left;
  }
    input:focus, input:hover, textarea:focus, textarea:hover {
      outline: none;
      border: 1px solid #6ea834;
      box-shadow: 0 0 5px rgba(110, 168, 52, 1);
    }
    input[type="number"] {
      padding-left: 2.3vw !important;
    }

  /* input: ERROR OUTLINE */
  .input .error, .select:has(.error) {
    outline: none;
    border: 1px solid #fd5a5a;
    box-shadow: 0 0 5px #fd5a5a;
  }
  
  /* input: HIDDEN */
  .input-hidden {
    display: none;
  }

  /* input: LABEL */
  .input span:nth-of-type(1) {
    position: absolute;
    top: 1.5vw;
    left: 1.5vw;
    color: #333333;
    font-size: .9vw;
    font-family: 'sol-400';
    text-transform: uppercase;
    z-index: 1;
  }
    .input span:nth-of-type(1)::after {
      content: ' :';
    }
    .input span i { /* required */
      color: #fd5a5a;
      font-family: 'sol-500';
    }

  /* input alt */
  .input-alt  {
    overflow: hidden;
    position: relative;
    margin-top: 2vw;
    float: left;
  }
    .input-alt input {
      position: relative;
      margin-top: .8vw;
      font-size: 1.15vw;
      color: #888888;
      border: 1px solid #e5e5e5;
      border-radius: .9vw;
      padding: 1.2vw;
      display: block;
    }
      .dark .input-alt input {
        background: #666666;
        color: #cccccc;
        border: 1px solid #666666;
      }
      .input-alt :is(input:focus, input:hover) {
        outline: none;
        border: 1px solid #6ea834;
        box-shadow: none;
      }
    .input-alt span:nth-of-type(1) {
      color: #555555;
      font-size: 1.1vw;
      text-transform: capitalize;
      display: block;
    }
      .dark .input-alt span:nth-of-type(1) {
        color: #bbbbbb;
      }
      .input-alt span:nth-of-type(1)::after {
        content: ' :';
      }

  /* input: W/ Icon */
  .input-ico input {
    padding-right: 4vw !important;
  }
  .input-ico i {
    position: absolute;
    margin-top: 2.4vw;
    right: 2vw;
    font-size: 1.2vw;
    color: #aaaaaa;
    z-index: 1;
  }

  /* input: PASS TOGGLE */
  .input-pass .ico {
    position: absolute;
    margin-top: 2.2vw;
    right: 2vw;
    font-size: 1.6vw;
    color: #999999;
    cursor: pointer;
    z-index: 1;
  }
    .input-pass .ico::before { 
      content: '\f06e';
      font: var(--fa-font-regular);
    }
    .input-pass .ico-slash::before { 
      content: '\f070';
      font: var(--fa-font-regular);
    }
  .input-pass input {
    padding-right: 5vw !important;
  }

  /* input: PASS CHECKER */
  #input-pass-check {
    overflow: hidden;
    position: absolute;
    margin-top: -9.5vw;
    width: 19.8vw;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 1.5vw;
    padding: 2vw;
    padding-top: 1.7vw;
    outline: none;
    border: 1px solid #6ea834;
    box-shadow: 0 0 5px rgba(110, 168, 52, 1);
    z-index: 3;
    display: none;
  }
    #input-pass-check h3 {
      padding-bottom: 0vw;
    }
    #input-pass-check span {
      position: relative;
      margin-top: 1vw;
      font-size: 1.1vw;
      font-family: 'sol-500';
      text-transform: capitalize;
      display: block;
    }
    #input-pass-check .valid {
      color: #6ea833;
    }
      #input-pass-check .valid:before {
        position: relative;
        content: "\f058";
        font-family: 'FontAwesome';
        padding-right: 1vw;
      }
    #input-pass-check .invalid {
      color: #fd5a5a;
      
    }
      #input-pass-check .invalid:before {
        position: relative;
        content: "\f057";
        font-family: 'FontAwesome';
        padding-right: 1vw;
      }

  /* input: TEXTAREA */
  textarea {
    resize: vertical;
  }

  /* alt */
  .textarea-alt  {
    overflow: hidden;
    position: relative;
    margin-top: 2vw;
    float: left;
  }
    .textarea-alt textarea {
      overflow: auto;
      position: relative;
      margin-top: .8vw;
      width: 100%;
      min-height: 9.5vw;
      font-size: 1.15vw;
      color: #888888;
      outline: none;
      border: 1px solid #e5e5e5;
      border-radius: 1vw;
      padding: 1.4vw;
      transition: all 0.4s;
      float: left;
    }
      .dark .textarea-alt textarea {
        background: #666666;
        color: #cccccc;
        border: 1px solid #666666;
      }
      .textarea-alt :is(textarea:focus, textarea:hover) {
        outline: none;
        border: 1px solid #6ea834;
        box-shadow: none;
      }
    .textarea-alt span:nth-of-type(1) {
      color: #555555;
      font-size: 1.15vw;
      text-transform: capitalize;
      display: block;
    }
      .dark .textarea-alt span:nth-of-type(1) {
        color: #bbbbbb;
      }
      .textarea-alt span:nth-of-type(1)::after {
        content: ' :';
      }
    .textarea-alt .count {
      overflow: hidden;
      position: relative;
      margin-top: .8vw;
      width: 100%;
      color: #6ea833;
      font-size: 1vw;
      font-family: 'sol-400';
      text-align: right;
      padding-right: 1vw;
      float: left;
    }
      .dark .textarea-alt .count {
        color: #81c63d;
      }
  
  /* input: FILE */
  .input-file {
    overflow: hidden;
    background-color: #ffffff;
    color: #888888;
    border: 1px solid #e5e5e5;
    border-radius: 500px;
    padding: .8vw;
    float: left;
  }
  .dark .input-file {
    background: #666666;
    color: #cccccc;
    border: 1px solid #666666;
  }
    .input-file label {
      overflow: hidden;
      position: relative;
      margin-top: -.08vw;
      background: #6ea833;
      color: #ffffff;
      font-size: 1.2vw;
      text-transform: capitalize;
      padding: .8vw 1.5vw;
      border-radius: 500px;
      cursor: pointer;
      transition: 0.4s;
      float: left;
    }
      .input-file label:hover {
        background-color: #95be6b;
      }
    .input-file div {
      overflow: hidden;
      position: relative;
      margin: 0;
      font-size: 1.3vw;
      text-overflow: ellipsis;
      white-space: initial;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      padding: 0vw 1vw;
      padding-top: .8vw;
    }
    .input-file b:before {
      position: relative;
      margin-top: .60vw;
      margin-right: .5vw;
      color: #bbbbbb;
      font-size: 1.6vw;
      font-weight: normal;
      font-family: "FontAwesome";
      content: '\f058';
      float: right;
    }
      .input-file .active:before {
        color: #6ea833;
      }

  /* input: CHECKBOX SLIDER */
  .switch-con {
    overflow: hidden;
    position: relative;
    margin: 0;
  }
  .switch {
    overflow: hidden;
    position: relative;
    margin: 0;
  }
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
    visibility: hidden;
    float: left;
  }
  .slider {
    overflow: hidden;
    position: relative;
    width: 100%;
    background-color: #d9d9d9;
    border-radius: 500px;
    padding: .6vw;
    padding-left: .65vw;
    -webkit-transition: .4s;
    transition: .4s;
    cursor: pointer;
    float: left;
  }
    .slider:before {
      overflow: hidden;
      position: relative;
      width: 50%;
      background-color: #ffffff;
      color: #ffffff;
      content: "|";
      border-radius: 500px;
      -webkit-transition: .4s;
      transition: .4s;
      margin-right: 1vw;
      cursor: pointer;
      float: left;
    }
  .switch .block {
    background: #fd5a5a;
    opacity: .7;
  }
  input:checked + .slider {
    background-color: #6ea833;
  }
  input:checked + .slider:before {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    
  }

  /* input: CHECKBOX */
  .input-checkbox {
    overflow: hidden;
    position: relative;
    width: 2vw;
    height: 2vw;
    background-color: #cccccc;
    border-radius: .4vw;
    cursor: pointer;
    float: left;
  }   
    .input-checkbox input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    .input-checkbox .checkmark {
      position: absolute;
      top: 0;
      left: 0;
      width: 2vw;
      height: 2vw;
      background-color: #d9d9d9;
    }
    .input-checkbox input:checked ~ .checkmark {
      background-color: #6ea833;
    }
    .input-checkbox .checkmark:after {
      content: "";
      position: absolute;
      display: none;
    }
    .input-checkbox input:checked ~ .checkmark:after {
      display: block;
    }
    .input-checkbox .checkmark:after {
      left: .7vw;
      top: .4vw;
      width: .35vw;
      height: .8vw;
      border: solid white;
      border-width: 0 .25vw .25vw 0;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
    }

  /* input: RADIO */
  .input-radio {
    position: relative;
    padding-left: 2vw;
    cursor: pointer;
    font-size: 2vw;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: block;
  }
    .input-radio input {
      position: absolute;
      opacity: 0;
      cursor: pointer;
    }
    .input-radio .checkmark {
      position: absolute;
      top: 0;
      left: 0;
      height: 2vw;
      width: 2vw;
      background-color: #d9d9d9;
      border-radius: 100%;
    }
      .input-radio:hover input ~ .checkmark {
        background-color: #ccc;
      }
      .input-radio input:checked ~ .checkmark {
        background-color: #6ea833;
      }
    .input-radio .checkmark:after {
      content: "";
      position: absolute;
      display: none;
    }
      .input-radio input:checked ~ .checkmark:after {
        display: block;
      }
      .input-radio .checkmark:after {
        top: .57vw;
        left: .57vw;
        width: .85vw;
        height: .85vw;
        border-radius: 50%;
        background: white;
      }
  
  /* input: RANGE */
  .input-range {
    overflow: visible;
    position: relative;
    width: 100%;
    padding-bottom: .1vw;
    float: left;
  }
    .input-range input {
      width: 100%;
      height: 1vw;
      background: #d9d9d9;
      border: none;
      outline: none;
      border-radius: 500px;  
      box-shadow: none !important;
      -webkit-appearance: none;
      -webkit-transition: .2s;
    }
      .input-range input::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 1.7vw;
        height: 1.7vw;
        border-radius: 100%; 
        background: #6ea833;
        cursor: pointer;
      }
      .input-range input::-moz-range-thumb {
        width: 1.5vw;
        height: 1.5vw;
        border-radius: 100%; 
        background: #6ea833;
        cursor: pointer;
      }
    /* .input-range span {
      overflow: hidden;
      position: relative;
      font-size: 1vw;
      border: 1px solid red;
      float: left;
    } */

  
  /* input: SELECT DROPDOWN */
  .input-select {
    display: none;
    visibility: hidden;
    padding-right: 1vw;
  }
  .select {
    text-transform: capitalize !important;
    cursor: pointer;
  }
    .select:hover, .input span .select:hover {
      outline: none;
      border: 1px solid #6ea834;
      box-shadow: 0 0 5px rgba(110, 168, 52, 1);
    }
  .select-styled {
    position: relative;
    margin: 0;
    width: 100%;
    height: 100%;
  }
    .select-styled .active {
      color: #6ea833;
    }
    .select-styled:after {
      position: absolute;
      top: -1.8vw;
      right: 1.2vw;
      width: 0;
      height: 0;
      font-size: 1.1vw;
      font-weight: normal;
      font-family: "FontAwesome";
      content: '\f107';
    }
      .select-styled.active:after {
        top: -1.95vw;
        color: #6ea833;
        content: '\f106';
      }
  .select-options {
    overflow-y: auto;
    position: relative;
    margin-top: 1.5vw;
    width: 100%;
    max-height: 12.5vw;
    text-transform: capitalize;
    z-index: 99;
    display: none;
  }
    .select-options li {
      margin: 0;
      transition: 0.4s;
      padding-top: 1.4vw;
    }
      .select-options li:hover {
        color: #6ea833;
      }
        .select-options li:nth-child(1) {
          display: none;
        }
        .select-options li:nth-child(2) {
          margin-top: -1.4vw;
        }

  /* alt */    
  .input-select-alt {
    overflow: hidden;
    position: relative;
    margin-top: 2vw;
    float: left;
  }
    .input-select-alt :is(.select:hover, .input span .select:hover) {
      outline: none;
      border: 1px solid #6ea834;
      box-shadow: none;
    }
  .input-select-alt .select {
    padding: 1.15vw 1.5vw;
    padding-top: 2.9vw;
  }
    .dark .input-select-alt .select {
      background: #666666;
      color: #cccccc;
      border: 1px solid #666666;
    }
  .input-select-alt span:nth-of-type(1) {
    color: #555555;
    font-size: 1.15vw;
    text-transform: capitalize;
    padding-bottom: .8vw;
    display: block;
  }
  .dark .input-select-alt span:nth-of-type(1) {
    color: #bbbbbb;
  }
  .input-select-alt .select-styled {
    overflow: hidden;
    position: relative;
    margin: 0;
    margin-top: -1.7vw;
    height: 100%;
    font-size: 1.4vw;
  }
  .input-select-alt .select-options {
    margin-top: 2vw;
    font-size: 1.4vw;
  }
    .input-select-alt .select-options li {
      padding-top: 1.4vw;
    }
  .input-select-alt .select-styled:after {
    top: .3vw;
    right: 1.15vw;
    font-size: 1.2vw;
    z-index: 1;
  }
    .input-select-alt .select-styled.active:after {
      top: .1vw;
    }
    .input-select-alt .select-options li:nth-child(2) {
    margin-top: -1.4vw;
  }


/*** ----- BUTTONS ----- ***/

/* default */
button {
  background-color: #6ea833;
  color: #ffffff;
  font-size: 1.3vw;
  text-align: center;
  font-family: 'sol-300';
  border: none;
  border-radius: 1vw;
  padding: 1.6vw 2.2vw;
  transition: 0.4s;
}
  button:hover {
    background-color: #95be6b;
    cursor: pointer;
  }

  /* button: STYLES */
  .btn-outline {
    background: transparent;
    border: 2px solid #6ea833;
    color: #6ea833;
    padding: 15px 22px !important;
    transition: 0.4s;
  }
    .btn-outline:hover {
      background-color: #6ea833;
      color: #ffffff;
    }

  .btn-outline-blk {
    background: transparent;
    border: 1px solid #e5e5e5;
    color: #444444;
    transition: 0.4s;
    padding: 1.2vw 0vw;
    transition: 0.4s;
  }
    .btn-outline-blk:hover {
      background-color: #444444;
      color: #ffffff;
    }

  .btn-green {
    background-color: #6ea833;
    color: #ffffff;
    cursor: pointer;
    transition: 0.4s;
  }
    .btn-green:hover { 
      background-color: #95be6b;
    }

  .btn-black { 
    background-color: #333333;
    color: #ffffff;
    cursor: pointer;
    transition: 0.4s;
  }
    .btn-black:hover { 
      background-color: #444444; 
    }

  .btn-grey { 
    background-color: #f0f0f0;
    color: #444444;
    cursor: pointer;
    transition: 0.4s;
  }
    .btn-grey:hover { 
      background-color: #dddddd; 
    }

  .btn-white { 
    background-color: #ffffff;
    color: #555555;
    border:1px solid #e5e5e5;
    transition: 0.4s;
  }
    .btn-white:hover { 
      background-color: #f5f5f5; 
    }

  .btn-red { 
    background-color: #fd5a5a;
    color: #ffffff;
    cursor: pointer;
    transition: 0.4s;
  }
    .btn-red:hover { 
      background-color: #fa6f6f; 
    }

  .btn-blue {
    background-color: #168eea;
    color: #ffffff;
    cursor: pointer;
    transition: 0.4s;
  }
    .btn-blue:hover { 
      background-color: #005ddf;
    }


/*** ----- WIDTHS ----- ***/

/* container */
.w-inner {
  overflow: visible;
  position: relative;
  float: left;
}

  /* type */
  .w-mixed {
    overflow: hidden;
    width: calc(100% + 1.12vw);
    margin-left: -1.1vw;
    padding-right: .2vw;
    float: left;
  }

    .w-100 {
      width: 100%;
      float: left;
    }
    .w-85 {
      width: calc(85% - 1.1vw);
      margin-left: 1.1vw;
      float: left;
    }
    .w-80 {
      width: calc(80% - 1.1vw);
      margin-left: 1.1vw;
      float: left;
    }
    .w-75 {
      width: calc(75% - 1.1vw);
      margin-left: 1.1vw;
      float: left;
    }
    .w-70 {
      width: calc(70% - 1.1vw);
      margin-left: 1.1vw;
      float: left;
    }
    .w-65 {
      width: calc(65% - 1.1vw);
      margin-left: 1.1vw;
      float: left;
    }
    .w-60 {
      width: calc(60% - 1.1vw);
      margin-left: 1.1vw;
      float: left;
    }
    .w-50 {
      width: calc(50% - 1.1vw);
      margin-left: 1.1vw;
      float: left;
    }
    .w-40 {
      width: calc(40% - 1.1vw);
      margin-left: 1.1vw;
      float: left;
    }
    .w-45 {
      width: calc(45% - 1.1vw);
      margin-left: 1.1vw;
      float: left;
    }
    .w-35 {
      width: calc(35% - 1.1vw);
      margin-left: 1.1vw;
      float: left;
    }
    .w-30 {
      width: calc(30% - 1.1vw);
      margin-left: 1.1vw;
      float: left;
    }
    .w-33 {
      width: calc(33.3% - 1.1vw);
      margin-left: 1.1vw;
      float: left;
    }
    .w-25 {
      width: calc(25% - 1.1vw);
      margin-left: 1.1vw;
      float: left;
    }
    .w-15 {
      width: calc(15% - 1.1vw);
      margin-left: 1.1vw;
      float: left;
    }
    .w-20 {
      width: calc(20% - 1.1vw);
      margin-left: 1.1vw;
      float: left;
    }


/*** ----- 404 ----- ***/
#exist {
  overflow: hidden;
  margin: 0 auto;
  margin-top: 4vw;
  width: 44%;
  background-color: #ffffff;
  border-radius: 1.5vw;
  padding: 50px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
  text-align:center;
}

  #exist img {
    width: 18vw;
  }

  #exist .etitle {
    overflow: hidden;
    color: #fd5a5a;
    padding-top: 2vw;
    display: block;
  }
    #exist .etitle i {
      font-size: 2.3vw;
      padding-right: .8vw;
    }
    #exist .etitle span {
      font-size: 2.2vw;
      font-family: 'sol-800';
      text-transform: uppercase;
    }

  #exist .etext {
    padding-top: .5vw;
    display: block;
  }
    #exist .etext span {
      color: #666666;
      font-size: 1.3vw;
      padding-top: .5vw;
      display: block;
    }
      #exist .etext span:nth-child(1) {
        color: #333333;
        font-family: 'sol-500';
      }

  #exist .ebtn {
    overflow: hidden;
    position: relative;
    background-color: #f0f0f0;
    margin-top: 2.5vw;
    margin-left: -.5vw;
    border-radius: 1.5vw;
    padding: 2.5vw 2vw;
    display: block;
  }
    #exist .ebtn button {
      margin-left: .5vw;
    }


/*** ----- TOGGLE MOBILE ELEMENTS ----- ***/
.xmobile {
  display: block;
}
  .mobile {
      display: none !important;
  }
.hide {
    display: none !important;
}












/** ----- BREAKPOINTS -----**/

/* Tablet */
@media screen and (min-device-width: 650px)
and (max-device-width: 1024px) {

}

/* Mobile */
@media screen and (max-width: 750px) {


  /** TOGGLE MOBILE ELEMENTS **/
  .mobile { 
    display: block !important; 
  }
  .xmobile { 
    display: none !important; 
  }

  /** LOADER **/
  #loader .jumper {
    width: 150px;
    height: 150px;
  }
  #loader .jumper > div {
    width: 150px;
    height: 150px;
    
  }
        
  /** FORM **/
  .input {
    margin-top: 15px;
  }

    /* input - textarea */
    input[type="text"], input[type="password"], textarea, .select {
      font-size: 19px;
      border-radius: 15px;
      padding: 20px 20px;
      padding-top: 55px;
    }
      .input span:nth-of-type(1) {
        top: 25px;
        left: 25px;
        font-size: 14px;
      }

    /* input pass toggle */
    .input-pass .ico {
      margin-top: 24px;
      right: 25px;
      font-size: 15px;
    }

    /* select */
    .select-styled:after {
      position: absolute;
      top: -31px;
      right: 0;
      width: 0;
      height: 0;
      border: 9px solid transparent;
      border-color: #333333 transparent transparent transparent;
      content: "";
    }
    .select-styled.active:after {
      top: -39px;
    }
    .select-options {
      margin-top: 25px;
      max-height: 100%;
    }
    .select-options li {
      padding-top: 15px;
    }
        .select-options li:nth-child(2) {
          margin-top: -15px;
        }

    /* button */
    button {
      width: 100%;
      font-size: 18px;
      border-radius: 15px;
      text-transform: capitalize;
      padding: 25px 0px;
    }

    /* input: CHECKBOX */
    .input-checkbox {
      width: 30px;
      height: 30px;
      border-radius: 6px;
    }
    .input-checkbox .checkmark {
      width: 30px;
      height: 30px;
    }
    .input-checkbox .checkmark:after {
      left: 10px;
      top: 5px;
      width: 6px;
      height: 13px;
      border-width: 0 4px 3px 0;
    }

    /* input: RADIO */
    .input-radio {
      padding-left: 30px;
      font-size: 30px;
    }
    .input-radio .checkmark {
      height: 30px;
      width: 30px;
    }
    .input-radio .checkmark:after {
      top: 7.5px;
      left: 7.5px;
      width: 15px;
      height: 15px;
    }

    /* input: PASSWORD CHECKER */
    #input-pass-check {
      overflow: hidden;
      position: relative;
      margin-top: 30px;
      width: 100%;
      background: #f0f0f0;
      border-bottom: 1px solid #e5e5e5;
      padding: 0px;
      padding-bottom: 50px;
      float: left;
      display: block !important;
    }
    #input-pass-check h3 {
      font-size: 19px;
      font-family: 'sol-400';
      text-transform: capitalize;
      padding-bottom: 5px;
    }
    #input-pass-check span {
      margin-top: 15px;
      font-size: 19px;
    }
      #input-pass-check .valid:before {
        padding-right: 10px;
      }
      #input-pass-check .invalid:before {
        padding-right: 10px;
      }

  /** WIDTHS **/
  .w-mixed .w-100, .w-50, .w-65, .w-35 {
    width: 100%;
    margin-left: 0px;
    padding: 3px;
    float: left;
  }

  /** ERROR MSG **/
  #msg {
    margin-top: 5px;
    margin-bottom: 10px;
    margin-left: 0px !important;
    width: 100% !important;
    font-size: 18px;
    padding: 30px 15px;
    border-radius: 15px;
  }


}