html,
body {
  height: 100%;
  margin: 0;
}


/** Regular */
@font-face {
  font-family: "SFUIDisplay";
  font-weight: 400;
  font-style: normal;
  src: url("../fonts/SF-UI-Display-Regular.400add9ce2ba.ttf");
}

/** Medium */
@font-face {
  font-family: "SSFUIDisplay";
  font-weight: 500;
  font-style: normal;
  src: url("../fonts/SF-UI-Display-Medium.b22eadea43f2.ttf");
}


/** Bold */ 
@font-face {
  font-family: "SFUIDisplay";
  font-weight: 700;
  font-style: normal;
  src: url("../fonts/SF-UI-Display-Bold.12f4d7ac5530.ttf");
}

/** Black */ 
@font-face {
  font-family: "SFUIDisplay";
  font-weight: 900;
  font-style: normal;
  src: url("../fonts/SF-UI-Display-Black.e2f91ec7f8d7.ttf");
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: #37352F; /* WebKit/Blink Browsers */
  color: #FFFFFF;
}
::-moz-selection {
  background: #37352F; /* Gecko Browsers */
  color: #FFFFFF;
}


body {
    background-color: #F6F6F9;
    font-family: "SFUIDisplay";
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    line-height: 28px;
    color: #2E2E2E;
    padding: 0px 0px 0px 0px;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

body.modal-open {
  overflow: hidden;
}

.layout-session.modal-open {
  overflow: hidden;
  pointer-events: none;
} 


br.d-br {
  display: inline-block;
}

br.m-br {
  display: none;
}

img {
  max-width: 100%;
}

.w-only {
  display: inline-block;
}

.m-only {
  display: none !important;
}

a {
  color: inherit;
  cursor: pointer;
  transition: .3s;
}

a:hover {
  color: inherit;
  transition: .3s;
}

a:active {
  opacity: .5;
  transition: .3s;
}

a:visited {
  color: inherit;
  transition: .3s;
}


/* //////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////// TEXT
///////////////////////////////////////////////////////////////////////*/


h1, h2, h3, h4, h5, h6, p {
  padding: 0px;
  margin: 0px;
}



.black {
  color: #2B2A35;
}

.text-black {
  color: #2B2A35;
}

.white {
  color: #FFFFFF;
}

.darkgrey {
    color: #545465;
}

.grey {
  color: #939DA8;
}

.lighgrey {
  color: #F6F6F9;
}

.primary {
  color: #334AC0 !important;
}

.secondary {
  color: #FF6766 !important;
}

.green {
  color: #33C06B
}





.pointer {
  cursor: pointer;
}

.underline {
  text-decoration: underline;
}

.linethrough {
  text-decoration: line-through;
}

.td-none {
  text-decoration: none;
}



.f-regular {
  font-family: "SFUIDisplay";
  font-style: normal;
  font-weight: 400;
}

.f-medium {
  font-family: "SFUIDisplay";
  font-style: normal;
  font-weight: 500;
}

.f-bold {
  font-family: "SFUIDisplay";
  font-style: normal;
  font-weight: 700;
}

.f-black {
  font-family: "SFUIDisplay";
  font-style: normal;
  font-weight: 900;
}



h1 {
  font-size: 32px;
}

h2 {
  font-size: 24px;
}

h3 {
  font-size: 18px;
}


.p64 {
  font-size: 64px !important;
}

.p48 {
  font-size: 48px !important;
}

.p40 {
  font-size: 40px !important;
}

.p32 {
  font-size: 32px !important;
}

.p24 {
  font-size: 24px !important;
}

.p20 {
  font-size: 20px !important;
}

.p18 {
  font-size: 18px !important;
}

.p16 {
  font-size: 16px !important;
}

.p14 {
  font-size: 14px !important;
}

.p12 {
  font-size: 12px !important;
}


.lh64 {
  line-height: 64px !important;
}

.lh36 {
  line-height: 36px !important;
}

.lh28 {
  line-height: 28px !important;
}

.lh24 {
  line-height: 24px !important;
}

.lh18 {
  line-height: 18px !important;
}

.lh16 {
  line-height: 16px !important;
}

.lh14 {
  line-height: 14px !important;
}



.uppercase {
  text-transform: uppercase;
}

.inline {
  display: inline-block;
}

.block {
  display: block !important;
}

.relative {
  position: relative;
}

.overflow-text {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 200px !important;
  width: 200px !important;
  position: relative !important;
  display: block !important;
}

.fullwidth {
  width: 100%;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.va-middle {
  vertical-align: middle !important;
}

.va-top {
  vertical-align: top !important;
}

.va-bottom {
  vertical-align: bottom !important;
}

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

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

.ta-right {
  text-align: right !important;
}

.pl {
  padding-left: 30px;
}

.pr {
  padding-right: 30px;
}

.pl-normal {
  padding-left: 24px;
}

.pr-normal {
  padding-right: 24px;
}

.pr-micro {
  padding-right: 8px;
}

.pl-micro {
  padding-left: 8px;
}

.pl-small {
  padding-left: 16px;
}

.pr-small {
  padding-right: 16px;
}

.pl-large {
  padding-left: 32px;
}

.pr-large {
  padding-right: 32px;
}

.ml {
  margin-left: 30px;
}

.mr {
  margin-right: 30px;
}

.ml-normal {
  margin-left: 20px;
}

.mr-normal {
  margin-right: 20px;
}

.ml-small {
  margin-left: 10px;
}

.mr-small {
  margin-right: 10px;
}

.mr-micro {
  margin-right: 6px;
}

.ml-micro {
  margin-left: 6px;
}

.ml-large {
  margin-left: 37px;
}

.mr-large {
  margin-right: 37px;
}


/* ***** LAYOUT ****** */


/* ******************************* */
/* Mobile navigation */
/* ******************************* */

.m-nav {
  display: none;
}





/* //////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////    MARGINS
///////////////////////////////////////////////////////////////*/

.margin-top-0 {
  margin-top: 0px !important;
}

.margin-top-2 {
  margin-top: 2px !important;
}

.margin-top-4 {
  margin-top: 4px !important;
}

.margin-top-6 {
  margin-top: 6px !important;
}

.margin-top-8 {
  margin-top: 8px !important;
}

.margin-top-12 {
  margin-top: 12px !important;
}

.margin-top-16 {
  margin-top: 16px !important;
}

.margin-top-20 {
  margin-top: 20px !important;
}

.margin-top-21 {
  margin-top: 21px !important;
}

.margin-top-24 {
  margin-top: 24px !important;
}

.margin-top-25 {
  margin-top: 25px !important;
}

.margin-top-31 {
  margin-top: 31px !important;
}

.margin-top-32 {
  margin-top: 32px !important;
}

.margin-top-40 {
  margin-top: 40px !important;
}

.margin-top-48 {
  margin-top: 48px !important;
}

.margin-top-56 {
  margin-top: 56px !important;
}

.margin-top-60 {
  margin-top: 60px !important;
}

.margin-top-70 {
  margin-top: 70px !important;
}

.margin-top-88 {
  margin-top: 88px !important;
}

.margin-top-96 {
  margin-top: 96px !important;
}

.margin-top-112 {
  margin-top: 112px !important;
}

.margin-top-124 {
  margin-top: 124px !important;
}

.margin-top-144 {
  margin-top: 144px !important;
}

.margin-top-164 {
  margin-top: 164px !important;
}

.margin-top-172 {
  margin-top: 172px !important;
}

.margin-top-188 {
  margin-top: 188px !important;
}

.margin-top-220 {
  margin-top: 220px !important;
}

.margin-bottom-0 {
  margin-bottom: 0px !important;
}

.margin-bottom-2 {
  margin-bottom: 2px !important;
}

.margin-bottom-4 {
  margin-bottom: 4px !important;
}

.margin-bottom-8 {
  margin-bottom: 8px !important;
}

.margin-bottom-12 {
  margin-bottom: 12px !important;
}

.margin-bottom-14 {
  margin-bottom: 14px !important;
}

.margin-bottom-16 {
  margin-bottom: 16px !important;
}

.margin-bottom-17 {
  margin-bottom: 17px !important;
}

.margin-bottom-20 {
  margin-bottom: 20px !important;
}

.margin-bottom-24 {
  margin-bottom: 24px !important;
}

.margin-bottom-23 {
  margin-bottom: 23px !important;
}

.margin-bottom-32 {
  margin-bottom: 32px !important;
}

.margin-bottom-40 {
  margin-bottom: 40px !important;
}

.margin-bottom-48 {
  margin-bottom: 48px !important;
}

.margin-bottom-60 {
  margin-bottom: 60px !important;
}

.margin-bottom-72 {
  margin-bottom: 72px !important;
}

.margin-bottom-88 {
  margin-bottom: 88px !important;
}

.margin-bottom-96 {
  margin-bottom: 96px !important;
}

.margin-bottom-112 {
  margin-bottom: 112px !important;
}

.margin-bottom-144 {
  margin-bottom: 144px !important;
}

.padding-top-0 {
  padding-top: 0px !important;
}




/* //////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////// FORMS
///////////////////////////////////////////////////////////////////////*/


label.input-box {
  width: 100%;
  text-align: left;
  position: relative;
  display: inline-block;
  padding: 0px 0px 16px 0px;
}

label.input-box > span:nth-child(1) {
  font-size: 16px;
  line-height: 16px;
  padding: 12px 0px 16px 0px;
  position: relative;
  display: inline-block;
  width: 100%;
  color: rgba(55,53,47,1);
}

label.input-box > input + span {
  font-size: 12px;
  color: #FF5452;
  padding: 8px 0px 0px 0px;
  width: 100%;
  font-style: normal;
  font-weight: 700;
}

label.input-box > textarea + span {
  font-size: 12px;
  color: #FF5452;
  padding: 8px 0px 0px 0px;
  width: 100%;
  font-style: normal;
  font-weight: 700;
}

label.ic-required {
    min-width: 16px;
    max-width: 16px;
    height: 16px;
    border-radius: 16px;
    background-size: 16px 16px;
    position: relative;
    display: inline-block;
    margin-left: 4px;
    cursor: default;
    overflow-x: hidden;
    transition: .3s;
}
    label.ic-required.offset-top {
      top: 3px;
    }

.error-text {
  font-size: 12px;
  color: #FF5452;
  padding: 8px 0px 0px 0px;
  width: 100%;
  font-style: normal;
  font-weight: 700;
}



.text-placeholder {
    color: rgba(55,53,47,0.6);
}


input {
  width: 100%;
  height: 48px;
  padding: 0px 0px 0px 16px;
  margin: 0px 0px 0px 0px;
  background-color: #FFFFFF;
  border: 2px solid rgba(55,53,47, 0.24);
  border-radius: 8px;
  font-size: 16px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  transition: .3s;
}

input:hover {
  border: 2px solid rgba(55,53,47, 0.5);
  transition: .3s;
}

input:focus {
  border: 2px solid #33C06B;
  transition: .3s;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: rgba(55,53,47,0.48);
}
::-moz-placeholder { /* Firefox 19+ */
  color: rgba(55,53,47,0.48);
}
:-ms-input-placeholder { /* IE 10+ */
  color: rgba(55,53,47,0.48);
}
:-moz-placeholder { /* Firefox 18- */
  color: rgba(55,53,47,0.48);
}

input:focus::-webkit-input-placeholder{
  color: transparent!important;
}
input:focus::-moz-placeholder{
  color: transparent!important;
}
input:focus:-ms-input-placeholder{
  color: transparent!important;
}
input:focus:-moz-placeholder{
  color: transparent!important;
}

textarea, input, button { outline: none; }

textarea {
  width: 100%;
  min-height: 64px;
  padding: 16px 16px 16px 16px;
  margin: 0px 0px 0px 0px;
  background: #FFFFFF;
  border: 2px solid rgba(55,53,47, 0.24);
  border-radius: 8px;
  font-size: 16px !important;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  transition: .3s;
}

textarea:hover {
  border: 2px solid rgba(55,53,47, 0.5);
  transition: .3s;
}

textarea:focus {
  border: 2px solid #33C06B;
  transition: .3s;
}


label.input-box.small {
    display: table;
}

label.input-box.small > input {
    padding: 1px 12px 2px 12px;
    height: 32px;
    font-size: 13px;
    background-color: #FFFFFF;
    width: auto;
}

label.select-box.small {
    display: table;
}

label.select-box.small > input {
    padding: 1px 12px 2px 12px;
    height: 32px;
    font-size: 13px;
    background-color: #FFFFFF;
    width: auto;
}

.ic-date-divider {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
    background-size: 24px 24px;
}

label.input-box.date > input {
    padding: 1px 12px 2px 12px;
    width: 112px;
    text-align: center;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;  
}

label.input-box.date > input + span {
    position: absolute;
    display: inline-block;
    left: 0px;
    top: 34px;
    font-size: 11px;
    line-height: 11px;
    padding: 0px 0px 0px 0px;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
}

label.input-box.white > input {
    background-color: #FFFFFF;
    border: 0px;
    border-radius: 2px;
}

label.input-box.white > textarea {
    background-color: #FFFFFF;
    border: 0px;
    border-radius: 2px;
}

    label.input-box.white > span:nth-child(1) {
        color: rgba(255, 255, 255, 0.6);
    }

.input-box input:disabled {
    background-color: rgba(55,53,47, 0.08) !important;
    color: rgba(55,53,47, 0.48) !important;
    cursor: no-drop;
}
    .input-box input:disabled::-webkit-input-placeholder { /* Chrome/Opera/Safari */
        color: rgba(55,53,47, 0.48) ;
    }
    .input-box input:disabled::-moz-placeholder { /* Chrome/Opera/Safari */
        color: rgba(55,53,47, 0.48) ;
    }
    .input-box input:disabled:-ms-input-placeholder { /* Chrome/Opera/Safari */
        color: rgba(55,53,47, 0.48) ;
    }
    .input-box input:disabled:-moz-placeholder { /* Chrome/Opera/Safari */
        color: rgba(55,53,47, 0.48) ;
    }

        .input-box.white input:disabled {
            background-color: rgba(255,255,255,0.16) !important;
            color: rgba(255,255,255,0.48) !important;
            pointer-events: none;
        }
            .input-box.white input:disabled::-webkit-input-placeholder { /* Chrome/Opera/Safari */
                color: rgba(255,255,255,0.48);
            }
            .input-box.white input:disabled::-moz-placeholder { /* Chrome/Opera/Safari */
                color: rgba(255,255,255,0.48);
            }
            .input-box.white input:disabled:-ms-input-placeholder { /* Chrome/Opera/Safari */
                color: rgba(255,255,255,0.48);
            }
            .input-box.white input:disabled:-moz-placeholder { /* Chrome/Opera/Safari */
                color: rgba(255,255,255,0.48);
            }

.input-box textarea:disabled {
    background-color: rgba(55,53,47, 0.08) !important;
    color: rgba(55,53,47, 0.48) !important;
    cursor: no-drop;
}
    .input-box textarea:disabled::-webkit-input-placeholder { /* Chrome/Opera/Safari */
        color: rgba(55,53,47, 0.48) ;
    }
    .input-box textarea:disabled::-moz-placeholder { /* Chrome/Opera/Safari */
        color: rgba(55,53,47, 0.48) ;
    }
    .input-box textarea:disabled:-ms-input-placeholder { /* Chrome/Opera/Safari */
        color: rgba(55,53,47, 0.48) ;
    }
    .input-box textarea:disabled:-moz-placeholder { /* Chrome/Opera/Safari */
        color: rgba(55,53,47, 0.48) ;
    }

        .input-box.white textarea:disabled {
            background-color: rgba(255,255,255,0.16) !important;
            color: rgba(255,255,255,0.48) !important;
            cursor: no-drop;
        }
            .input-box.white textarea:disabled::-webkit-input-placeholder { /* Chrome/Opera/Safari */
                color: rgba(255,255,255,0.48);
            }
            .input-box.white textarea:disabled::-moz-placeholder { /* Chrome/Opera/Safari */
                color: rgba(255,255,255,0.48);
            }
            .input-box.white textarea:disabled:-ms-input-placeholder { /* Chrome/Opera/Safari */
                color: rgba(255,255,255,0.48);
            }
            .input-box.white textarea:disabled:-moz-placeholder { /* Chrome/Opera/Safari */
                color: rgba(255,255,255,0.48);
            }


.textarea-mh142 textarea {
  min-height: 142px;
}


/* //////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////    SELECT OPTIONS
///////////////////////////////////////////////////////////////*/

div.select-box {
  width: 100%;
  height: auto;
  text-align: left;
  display: block;
  padding: 0px 0px 8px 0px;
}

   div.select-box > span:nth-child(1) {
    font-size: 16px;
    line-height: 16px;
    padding: 12px 0px 16px 0px;
    position: relative;
    display: inline-block;
    width: 100%;
    color: rgba(55,53,47,1);
   }

    div.select-box > select + span {
      font-size: 12px;
      color: #FF5452;
      padding: 8px 0px 0px 0px;
      width: 100%;
      font-style: normal;
      font-weight: 700;
    }

select {
    width: 100%;
    height: 48px;
    padding: 0px 32px 2px 16px;
    margin: 0px 0px 0px 0px;
    background: #FFFFFF;
    border: 2px solid rgba(55,53,47, 0.24);
    border-radius: 3px;
    font-size: 16px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    color: #292929;
    background-size: 24px;
    background-position:  right 10px center;
    transition: .3s;
}

    select:hover {
      border: 2px solid rgba(55,53,47, 0.5);
      transition: .3s;
    }

    select:focus {
      border: 2px solid #1D8C75;
      transition: .3s;
      outline: none;
    }

    select.error {
      border: 2px solid #FF5452 !important;
      color: #FF5452;
      transition: .3s;
      font-style: normal;
      font-weight: 700;
    }


div.select-box.small {
    display: table;
}

div.select-box.small > select {
    padding: 1px 32px 2px 12px;
    height: 32px;
    font-size: 13px;
    background-color: #FFFFFF;
    width: auto;
}

div.select-box.white > select {
    background-color: #FFFFFF;
    border: 0px;
    border-radius: 2px;
}

    div.select-box.white > span:nth-child(1) {
        color: rgba(255, 255, 255, 0.6);
    }

.select-box select:disabled {
    color: rgba(55,53,47, 0.48) !important;
    cursor: no-drop;
    transition: .3s;
    background-size: 24px;
    background-position:  right 10px center;
}
    .select-box select:disabled::-webkit-input-placeholder { /* Chrome/Opera/Safari */
        color: rgba(55,53,47, 0.48) ;
    }
    .select-box select:disabled::-moz-placeholder { /* Chrome/Opera/Safari */
        color: rgba(55,53,47, 0.48) ;
    }
    .select-box select:disabled:-ms-input-placeholder { /* Chrome/Opera/Safari */
        color: rgba(55,53,47, 0.48) ;
    }
    .select-box select:disabled:-moz-placeholder { /* Chrome/Opera/Safari */
        color: rgba(55,53,47, 0.48) ;
    }

.select-box.white select:disabled {
    color: rgba(255,255,255,0.48) !important;
    cursor: no-drop;
    transition: .3s;
    background-size: 24px;
    background-position:  right 10px center;
}

        .select-box.white select:disabled::-webkit-input-placeholder { /* Chrome/Opera/Safari */
            color: rgba(255,255,255,0.48);
        }
        .select-box.white select:disabled::-moz-placeholder { /* Chrome/Opera/Safari */
            color: rgba(255,255,255,0.48);
        }
        .select-box.white select:disabled:-ms-input-placeholder { /* Chrome/Opera/Safari */
            color: rgba(255,255,255,0.48);
        }
        .select-box.white select:disabled:-moz-placeholder { /* Chrome/Opera/Safari */
            color: rgba(255,255,255,0.48);
        }


/* //////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////    FORMS CHECKBOX
///////////////////////////////////////////////////////////////*/

.checkbox-grid {
  position: relative;
  display: inline-block;
  width: 100%;
  text-align: left;
  padding: 0px 0px 24px 0px;
}

.checkbox-grid.clear {
  padding: 0px 0px 8px 0px;
}

  .checkbox-grid > span {
    font-size: 14px;
    padding-bottom: 16px;
    color: #FFFFFF;
    position: relative;
    display: inline-block;
    width: 100%;
  }

  .checkbox-grid > label {
    margin: 0px 16px 0px 0px;
  }

  .checkbox-grid > label:nth-last-child(1) {
    margin: 0px 0px 0px 0px;
  }

/* Customize the label (the container) */
.cr-container {
  display: inline-block;
  position: relative;
  padding-left: 32px;
  margin-bottom: 0px;
  cursor: pointer;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  z-index: 1;
}

.cr-container:hover {
  color: #334AC0;
}



/* Hide the browser's default checkbox */
.cr-container input {
  position: absolute;
  left: 3px;
  top: -12px;
  opacity: 0;
  width: 24px;
}

/* Create a custom checkbox */
.checkbox {
  position: absolute;
  top: 0;
  left: 0;
  height: 24px;
  width: 24px;
  background: url("../assets/ic_checkbox.45c919c9332d.svg") center center no-repeat;
  opacity: .24;
  transition: .3s;
}

/* On mouse-over, add a grey background color */
.cr-container:hover input ~ .checkbox {
  height: 24px;
  width: 24px;
  background: url("../assets/ic_checkbox.45c919c9332d.svg") center center no-repeat;
  opacity: 1;
  transition: .3s;
}

/* When the checkbox is checked, add a blue background */
.cr-container input:checked ~ .checkbox {
  height: 24px;
  width: 24px;
  background: url("../assets/ic_checkbox_checked.9e388ae40b6f.svg") center center no-repeat;
  opacity: 1;
  transition: .3s;
}

/* Create the checkbox/indicator (hidden when not checked) */
.checkbox:after {
  content: "";
  position: absolute;
  display: none;
}

.cr-container.disabled {
  color: rgba(55,53,47, .4);
  cursor: default;
}

.cr-container.disabled input ~ .checkbox {
  height: 24px;
  width: 24px;
  background: url("../assets/ic_checkbox.45c919c9332d.svg") center center no-repeat;
  opacity: .24;
  transition: .3s;
}

.cr-container.disabled input:checked ~ .checkbox {
  height: 24px;
  width: 24px;
  background: url("../assets/ic_checkbox_checked_disabled.6f36c29bc056.svg") center center no-repeat;
  opacity: .24;
  transition: .3s;
}






/* //////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////    FORMS RADIO
///////////////////////////////////////////////////////////////*/

/* Create a custom radio button */
.radio {
  position: absolute;
  top: 0;
  left: 0;
  height: 24px;
  width: 24px;
  background: url("../assets/ic_radio.8bf9e4e29cf5.svg") center center no-repeat;
  opacity: .32;
  transition: .3s;
}

/* On mouse-over, add a grey background color */
.cr-container:hover input ~ .radio {
  height: 24px;
  width: 24px;
  background: url("../assets/ic_radio.8bf9e4e29cf5.svg") center center no-repeat;
  opacity: 1;
  transition: .3s;
}

/* When the radio button is checked, add a blue background */
.cr-container input:checked ~ .radio {
  height: 24px;
  width: 24px;
  background: url("../assets/ic_radio_checked.601a7fc5e72d.svg") center center no-repeat;
  opacity: 1;
  transition: .3s;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radio:after {
  content: "";
  position: absolute;
  display: none;
}

.cr-container.disabled input ~ .radio {
  height: 24px;
  width: 24px;
  background: url("../assets/ic_radio.8bf9e4e29cf5.svg") center center no-repeat;
  opacity: .24;
  transition: .3s;
}

.cr-container.disabled input:checked ~ .radio {
  height: 24px;
  width: 24px;
  background: url("../assets/ic_radio_checked_disabled.9a6eb52ebbd3.svg") center center no-repeat;
  opacity: .24;
  transition: .3s;
}

.radio-text {
    transition: .3s;
}

.cr-container input:checked ~ .radio-text {
    color: #1D8C75;
}

.cr-container input:hover ~ .radio-text {
    color: #37352F;
}

.cr-container input:checked:hover ~ .radio-text {
    color: #1D8C75;
}






/* //////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////// ROTATE HINT
///////////////////////////////////////////////////////////////////////*/

.rotate-hint {
  display: none;
}



/* //////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////// BUTTONS
///////////////////////////////////////////////////////////////////////*/

button {
  outline: none;
  border: 0px;
  text-align: left;
}

button:focus { outline: none; }




a.lnk {
    position: relative;
    display: inline-block;
    text-decoration: underline;
    cursor: pointer;
    color: #FF6766;
    font-size: 18px;
    line-height: 28px;
    font-style: normal;
    font-weight: 400;
    word-wrap: break-word;

}

    a.lnk:hover {
        text-decoration: none;
    }

    a.lnk:active {
        opacity: .5;
    }


a.lnk.black {
  color: #2E2E2E;
}

a.lnk.black:hover {
  color: #FF6766;
}

a.lnk-large {
    font-size: inherit;
    line-height: inherit;
}

    a.lnk-large:hover {
        color: #FF6766;
    }

    a.lnk-large:active {
        opacity: .5;
    }


/* //////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////// NOTIFICATIONS
///////////////////////////////////////////////////////////////////////*/


.notification {
  position: fixed;
  font-size: 15px;
  padding: 16px 20px 18px 16px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.32);
  margin:60px auto 0px auto;
  right: 40px;
  bottom: 40px;
  background-color: #FFFFFF;
  z-index: 1000;
  display: none;
  animation-name: showNotification;
  animation-duration: 0.6s;
  border-radius: 2px;
}

    @keyframes showNotification {
      0% { opacity: 0; transform: translateY(100px); }
      100% { opacity: 1; transform: translateY(0px); }
    }

.notification.hideanimation {
  animation-name: hideNotification;
  animation-duration: 0.5s; 
}

    @keyframes hideNotification {
      100% { opacity: 1; transform: translateY(0px); }
      0% { opacity: 0; transform: translateY(100px); }
    }

.notification div:nth-child(2) {
  margin: 1px 0px 0px 36px;
}

.notification.callout-error {
  background-color: #FF5452;
  color: #FFFFFF;
}

.notification.callout-warning {
  background-color: #E6AB01;
  color: #FFFFFF;
}

.notification.callout-success {
  background-color: #1D8C75;
  color: #FFFFFF;
}

.notification.callout-default {
  background-color: #37352F;
  color: #FFFFFF;
}

    .notification.callout-default div:nth-child(2) {
      margin: 1px 8px 0px 8px;
    }

.notification.callout-success > div:nth-child(1) {
  width: 24px;
  height: 24px;
  background: url("../assets/ic_notification_done.59c29b25d60b.svg") center center no-repeat;
  background-size: contain;
  position: relative;
  display: inline-block;
  float: left;
  margin-top: 1px;
}

.notification.callout-warning > div:nth-child(1) {
  width: 24px;
  height: 24px;
  background: url("../assets/ic_notification_error.6c0e614b6609.svg") center center no-repeat;
  background-size: contain;
  position: relative;
  display: inline-block;
  float: left;
  margin-top: 1px;
}

.notification.callout-error > div:nth-child(1) {
  width: 24px;
  height: 24px;
  background: url("../assets/ic_notification_error.6c0e614b6609.svg") center center no-repeat;
  background-size: contain;
  position: relative;
  display: inline-block;
  float: left;
  margin-top: 1px;
}

.notification.callout-default > div:nth-child(1) {
  display: none;
}

/* END ****** NOTIFICATIONS **** */




/* //////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////// GRID
///////////////////////////////////////////////////////////////////////*/

.grid {
  display: grid;
  grid-template-rows: 1fr;
}

.grid.two {
  grid-template-columns: 1fr 1fr;
}

.grid.three {
  grid-template-columns: 1fr 1fr 1fr;
}

.grid.four {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.grid.gap-32 {
  grid-gap: 32px 32px;
}

.grid.gap-24 {
  grid-gap: 24px 24px;
}

.grid.gap-40 {
  grid-gap: 40px 40px;
}

.grid.gap-form {
  grid-gap: 0px 24px;
}


.grid-auto {
    position: relative;
    display: table;
}

    .grid-auto > div {
        position: relative;
        display: table-cell;
        vertical-align: middle;
    }

    .grid-auto.fw {
      width: 100%;
    }

.grid-inline {
    position: relative;
    display: inline-block;
}

    .grid-inline > div {
        position: relative;
        display: inline-block;
    }

.box-inline {
    position: relative;
    display: inline-block;
    margin: 12px 24px 12px 0px;
}



/* //////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////    NAVIGATION
///////////////////////////////////////////////////////////////*/


.navigation {
  position: fixed;
  display: inline-block;
  width: 100vw;
  padding: 16px 24px 16px 24px;
  height: 72px;
  left: 0px;
  top: 0px;
  right: 0px;
  background-color: #FFFFFF;
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  z-index: 100;
}

    .navigation-grid {
      position: relative;
      display: table;
      width: 100%;
      height: 40px;
    }

        .navigation-grid > div {
          position: relative;
          display: table-cell;
          vertical-align: middle;
        }

            .navigation-grid > div:nth-child(1) {

            }

            .navigation-grid > div:nth-child(2) {
              text-align: right;
            }

            .navigation-grid > div:nth-child(3) {
              width: 64px;
            }

    .userbox {
      position: relative;
      display: inline-block;
      vertical-align: middle;
      height: 40px;
      text-align: left;
    }

        .userbox > div {
          position: relative;
          display: table-cell;
          vertical-align: middle;
        }

        .userbox > div:nth-child(1) {
          width: 40px;
          height: 40px;
          border-radius: 40px;
          background-color: #FF6766;
          font-size: 13px;
          line-height: 18px;
          color: #FFFFFF;
          font-weight: 600;
          text-align: center;
        }

        .userbox > div:nth-child(2) {
          padding-left: 16px;
        }


    a.btn-logout {
      position: absolute;
      display: inline-block;
      right: 0px;
      top: 0px;
      width: 40px;
      height: 40px;
      border-radius: 40px;
      margin-left: 24px;
      background: url("../assets/ic_logout_grey.8448eab21fd4.svg") center center no-repeat #FFFFFF;
      background-size: 24px 24px;
      cursor: pointer;
      transition: .3s;
    }

        a.btn-logout:hover {
          background: url("../assets/ic_logout_white.13ae58d09513.svg") center center no-repeat #334AC0;
        }


/* //////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////    MENU ICON
///////////////////////////////////////////////////////////////*/


.m-menu-icon {
    position: fixed;
    display: inline-block;
    right: 103px;
    top: 4px;
    width: 64px;
    height: 64px;
    z-index: 990;
    opacity: 0;
    pointer-events: none;
}

    .m-menu-icon > div {
        position: absolute;
        display: inline-block;
        width: 20px;
        height: 20px;
        right: 24px;
        top: 18px;
        z-index: 990;
        cursor: pointer;
        text-decoration: none;
        transition: .3s;
    }

            .m-menu-icon > div > div:nth-child(1) {
                position: absolute;
                display: inline-block;
                width: 20px;
                height: 2px;
                background-color: #0B141D;
                top: 7px;
                left: 4px;
                transition: .3s;
            }

            .m-menu-icon > div > div:nth-child(2) {
                position: absolute;
                display: inline-block;
                width: 20px;
                height: 2px;
                background-color: #0B141D;
                top: 13px;
                left: 4px;
                transition: .3s;
            }

            .m-menu-icon > div > div:nth-child(3) {
                position: absolute;
                display: inline-block;
                width: 20px;
                height: 2px;
                background-color: #0B141D;
                top: 19px;
                left: 4px;
                transition: .3s;
            }


        .m-menu-icon:hover > div > div:nth-child(1) {
                top: 7px;
                left: 4px;
                background-color: #0B141D;
        }

        .m-menu-icon:hover > div > div:nth-child(2) {
                top: 13px;
                left: 4px;
                background-color: #0B141D;
        }

        .m-menu-icon:hover > div > div:nth-child(3) {
                top: 19px;
                left: 4px;
                background-color: #0B141D;
        }


        .m-menu-icon.active {
            border-right: 1px solid rgba(255, 255, 255, 0.18);
        }

        .m-menu-icon.active > div > div:nth-child(1) {
                top: 13px;
                left: 4px;
                background-color: #FFFFFF;
                transform: rotate(-135deg);
        }

        .m-menu-icon.active > div > div:nth-child(2) {
                width: 0px;
                top: 13px;
                left: 28px;
                background-color: #FFFFFF;
                opacity: 0;
        }

        .m-menu-icon.active > div > div:nth-child(3) {
                top: 13px;
                left: 4px;
                background-color: #FFFFFF;
                transform: rotate(135deg);
        }

            .m-menu-icon.active:hover > div > div:nth-child(1) {
                    background-color: #0B141D;
            }

            .m-menu-icon.active:hover > div > div:nth-child(2) {
                    background-color: #0B141D;
            }

            .m-menu-icon.active:hover > div > div:nth-child(3) {
                    background-color: #0B141D;
            }






/* //////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////    PANEL
///////////////////////////////////////////////////////////////*/


.panel {
  position: fixed;
  width: 359px;
  height: calc(100vh - 72px);
  top: 72px;
  right: 0px;
  bottom: 0px;
  border-left: 1px solid #DDDFE5;
  z-index: 10;
}

    .panel > div {
      position: absolute;
      display: inline-block;
      left: 0px;
      top: 0px;
      right: 0px;
      bottom: 0px;
      overflow-y: scroll;
      padding: 40px 24px 40px 24px;
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;
    }

    .chapter-item {
      position: relative;
      display: block;
      cursor: pointer;
      transition: .3s;
      text-decoration: none;
    }

        .chapter-item > div {
          position: relative;
          display: table-cell;
          vertical-align: top;
        }

        .chapter-item > div:nth-child(1) {
        }

        .chapter-item > div:nth-child(1) > div {
          font-size: 14px;
          line-height: 18px;
          color: #939DA8;
          font-weight: 700;
          border: 2px solid #DDDFE5;
          border-radius: 8px;
          padding: 3px 2px 3px 2px;
          min-width: 28px;
          text-align: center;
          -webkit-box-sizing: border-box;
             -moz-box-sizing: border-box;
                  box-sizing: border-box;
          transition: .3s;
        }

        .chapter-item > div:nth-child(2) {
          padding-left: 12px;
          font-size: 16px;
          line-height: 24px;
          color: #545465;
          padding-top: 2px;
          transition: .3s;
        }


    .chapter-item:hover > div:nth-child(1) > div {
      color: #2E2E2E;
      border: 2px solid #2E2E2E;
    }

        .chapter-item:hover > div:nth-child(2) {
          color: #2E2E2E;
        }

    .chapter-item:active {
      opacity: 0.5;
    }

    .chapter-item.active {
      pointer-events: none;
    }

        .chapter-item.active > div:nth-child(1) > div {
          color: #334AC0;
          border: 2px solid #334AC0;
        }

        .chapter-item.active > div:nth-child(2) {
          color: #334AC0;
        }

    .chapter-item.click-active {
      pointer-events: none;
    }

        .chapter-item.click-active > div:nth-child(1) > div {
          color: #334AC0 !important;
          border: 2px solid #334AC0 !important;
        }

        .chapter-item.click-active > div:nth-child(2) {
          color: #334AC0 !important;
        }


.lesson-box {
  position: relative;
  display: inline-block;
  width: 100%;
  margin-bottom: 24px;
  margin-top: 24px;
  background-color: #FFFFFF;
  box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.08);
  padding: 20px 24px 24px 24px;
  border-radius: 8px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.lesson-box:nth-child(1) {
  margin-top: 0px;
}

.lesson-box a {
  text-decoration: none;
  color: #545465;
}

.lesson-box a:hover {
  text-decoration: none;
  color: #FF6766;
}

        .lesson-box > a:nth-child(2) {
          position: relative;
          display: block;
          line-height: 24px !important;
          margin-top: 4px;
        }

.lesson-box:nth-last-child(1) {
  margin-bottom: 0px;
}

    .lesson-box.disabled {
      margin-bottom: 12px;
      margin-top: 12px;
      pointer-events: none;
      background-color: rgba(0, 0, 0, 0.04);
      box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0);
      padding: 16px 16px 8px 16px;
      border-radius: 8px;
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;
    }

    .lesson-box.disabled:nth-child(1) {
      margin-top: 0px;
    }


        .lesson-box.disabled > p:nth-child(1) {
          color: rgba(84, 84, 101, 1);
          position: relative;
          padding-left: 32px;
          -webkit-box-sizing: border-box;
             -moz-box-sizing: border-box;
                  box-sizing: border-box;
        }

        .lesson-box.disabled > a:nth-child(2) {
          position: relative;
          display: inline-block;
          color: rgba(84, 84, 101, 0.48) !important;
          margin-left: 32px;
          margin-top: 4px;
          font-size: 16px !important;
          line-height: 20px !important;
          -webkit-box-sizing: border-box;
             -moz-box-sizing: border-box;
                  box-sizing: border-box;
          text-decoration: none;
          cursor: no-drop;
        }

        .lesson-box.disabled > p:nth-child(1)::before {
          content: "";
          /*content: "👍";*/
          /*background-color: rgba(0, 0, 0, 0.08);*/          
          /*padding: 3px 6px 3px 6px;*/
          /*font-size: 20px;*/
          border-radius: 24px;
          position: absolute;
          display: inline-block;          
          left: 0px;
          top: -4px;
          width: 24px;
          height: 24px;
          background: url("../assets/ic_lock.57768401359b.svg") center center no-repeat #FF6766;
          background-size: 16px 16px;
        }


    .lesson-box.done {
      margin-bottom: 12px;
      margin-top: 12px;
      border: 2px dashed rgba(0, 0, 0, 0.08);
      box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0);
      background-color: transparent;
      padding: 16px 16px 6px 16px;
      border-radius: 8px;
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;
    }

    .lesson-box.done:nth-child(1) {
      margin-top: 0px;
    }

        .lesson-box.done > p:nth-child(1) {
          color: rgba(84, 84, 101, 1);
          position: relative;
          padding-left: 32px;
          font-size: 16px !important;
          line-height: 20px !important;
          -webkit-box-sizing: border-box;
             -moz-box-sizing: border-box;
                  box-sizing: border-box;
        }

        .lesson-box.done > a:nth-child(2) {
          position: relative;
          display: inline-block;
          color: rgba(84, 84, 101, 0.48) !important;
          margin-left: 32px;
          margin-top: 4px;
          font-size: 16px !important;
          line-height: 20px !important;
          -webkit-box-sizing: border-box;
             -moz-box-sizing: border-box;
                  box-sizing: border-box;
          text-decoration: none;
          cursor: pointer;
        }

        .lesson-box.done > a:nth-child(2):hover {
          color: #2E2E2E !important;
        }

        .lesson-box.done > p:nth-child(1)::before {
          content: "";
          /*content: "👍";*/
          /*background-color: rgba(0, 0, 0, 0.08);*/          
          /*padding: 3px 6px 3px 6px;*/
          /*font-size: 20px;*/
          border-radius: 24px;
          position: absolute;
          display: inline-block;          
          left: 0px;
          top: -3px;
          width: 24px;
          height: 24px;
          background: url("../assets/ic_done_bold_white.e693cc1ddef3.svg") center center no-repeat #33C06B;
          background-size: 20px 20px;
        }





.floating-action {
  position: fixed;
  display: inline-block;
  left: calc(50% - 360px);
  margin-left: 0px;
    text-decoration: none;
    cursor: pointer;
    text-align: left;
    background-color: #334AC0;
    color: #FFFFFF !important;
    font-size: 18px;
    line-height: 24px;
    font-style: normal;
    padding: 13px 32px 15px 68px;
    border-radius: 64px;
    z-index: 5;
    transition: .3s;
    box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.40);
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    bottom: 0px;
}

    .floating-action.show {
      opacity: 1;
      pointer-events: auto;
      bottom: 48px;
    }

    .floating-action > span {
      font-size: 28px;
      line-height: 28px;
      position: absolute;
      display: inline-block;
      left: 24px;
      top: 12px;
    }

    .floating-action:hover {
        color: #FFFFFF;
        background-color: #2E2E2E;
    }

    .floating-action:active {
        opacity: .5;
    }

    .floating-action > div {
      position: absolute;
      display: inline-block;
      right: 24px;
      top: 14px;
      width: 24px;
      height: 24px;
      background: url("../assets/ic_loader.748aa16ef62b.svg") center center no-repeat !important;
      background-size: 24px 24px !important;
    }


.floating-action.lesson-loading {
  background-color: #33C06B;
  padding: 13px 68px 15px 68px;
  transition: .6s;
  position: relative;
  display: inline-block;
  opacity: 1;
  pointer-events: none;
  bottom: auto;
  left: auto;
}

.floating-action.inline {
  transition: .6s;
  position: relative;
  display: inline-block;
  opacity: 1;
  pointer-events: auto;
  bottom: auto;
  left: 50%;
  margin-left: -130px;
  margin-top: 88px;
  cursor: pointer;
}

.floating-action.lesson-pay {
  background-color: #33C06B;
  padding: 13px 32px 15px 68px;
  transition: .6s;
  position: relative;
  display: inline-block;
  opacity: 1;
  pointer-events: auto;
  bottom: auto;
  left: auto;
  cursor: pointer;
}

  .floating-action.lesson-pay:hover {
    background-color: #2B2A35;
    transition: .3s;
  }

  .floating-action.lesson-pay:active {
    opacity: 0.5;
    transition: .3s;
  }

  .floating-action.lesson-pay > div {
    display: none;
  }

  .floating-action.lesson-pay.back {
    background-color: rgba(84, 84, 101, 0.48);
    box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0);
  }

  .floating-action.lesson-pay.back:hover {
    background-color: #2E2E2E;
    box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0);
  }

.ic-emptydata-complete {
  position: relative;
  display: inline-block;
  width: 400px;
  height: 286px;
  background: url("../assets/img_emptydata_complete.2cdab23bd108.svg") center center no-repeat;
  background-size: 400px 286px;
}

  .ic-emptydata-complete.small {
    width: 300px;
    height: 200px;
    background-size: contain;
  }

  .promocode {
    background-color: rgba(84, 84, 101, 0.08);
    padding: 24px 24px 24px 24px;
    border-radius: 16px;
    position: relative;
    display: block;
    font-size: 32px;
    line-height: 32px;
    text-decoration: none;
    text-align: center;
    /*box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0);*/
  }

.floating-action.disabled {
  pointer-events: none;
  opacity: 0.48;
  box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0);
}

/* //////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////    CONTENT
///////////////////////////////////////////////////////////////*/


.content {
  position: fixed;
  width: calc(100vw - 360px);
  height: calc(100vh - 72px);
  left: 0px;
  top: 72px;
  bottom: 0px;
  z-index: 10;
}

    .content > div {
      position: absolute;
      display: inline-block;
      left: 0px;
      top: 0px;
      right: 0px;
      bottom: 0px;
      overflow-y: scroll;
      padding: 0px 24px 124px 24px;
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;
    }

    .content-section {
      position: relative;
      display: block;
      padding: 40px;
      margin-top: 24px;
      margin-bottom: 24px;
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;
      border-radius: 16px;
      background-color: #FFFFFF;
    }

@media screen and (min-width: 1440px) {
    .content-section {
      max-width: 1024px;
      left: 50%;
      margin-left: -512px;
    }
}

    .content-chapter {
      position: relative;
      display: inline-block;
    }

        .content-chapter > div {
          position: relative;
          display: table-cell;
          vertical-align: top;
        }

        .content-chapter > div:nth-child(1) {
        }

        .content-chapter > div:nth-child(1) > div {
          font-size: 14px;
          line-height: 18px;
          color: #FFFFFF;
          background-color: #334AC0;
          font-weight: 700;
          border-radius: 8px;
          padding: 8px 2px 8px 2px;
          min-width: 34px;
          text-align: center;
          -webkit-box-sizing: border-box;
             -moz-box-sizing: border-box;
                  box-sizing: border-box;
        }

        .content-chapter > div:nth-child(2) {
          padding-left: 16px;
          font-size: 24px;
          line-height: 28px;
          color: #334AC0;
          padding-top: 3px;
        }

        p.paragraph {
          font-size: 18px;
          line-height: 28px;
          margin-top: 24px;
        }

        p.paragraph-subtitle {
          position: relative;
          display: inline-block;
          font-size: 24px;
          line-height: 28px;
          margin-top: 48px;
        }

        .image {
          position: relative;
          display: inline-block;
          width: 100%;
          padding: 8px 8px 0px 8px;
          background-color: #F6F6F9;
          border-radius: 16px;
          -webkit-box-sizing: border-box;
             -moz-box-sizing: border-box;
                  box-sizing: border-box;
          text-align: center;
          margin-top: 32px;
          margin-bottom: 8px;
        }

            .image > img {
              position: relative;
              display: inline-block;
              width: 100%;
              border-radius: 12px;
            }

        .formula {
          position: relative;
          display: inline-block;
          padding: 16px 24px 16px 24px;
          background-color: #F6F6F9;
          border-radius: 16px;
          -webkit-box-sizing: border-box;
             -moz-box-sizing: border-box;
                  box-sizing: border-box;
          text-align: center;
          margin-top: 32px;
          margin-bottom: 8px;
          font-size: 24px;
          line-height: 24px;
          font-weight: 700;
        }

        .formula.outline {
          background-color: #FFFFFF;
          border: 2px solid #F6F6F9;
        }

        .formula.clear {
          margin-top: 16px;
          margin-bottom: 8px;
        }

        .image.half {
          max-width: 50%;
        }

        .quote {
          position: relative;
          display: table;
          width: 100%;
          margin-top: 24px;
        }   

            .quote > div {
              position: relative;
              display: table-cell;
              vertical-align: middle;
            }

            .quote > div:nth-child(1) {
              width: 54px;
            }

            .quote > div:nth-child(1) > div {
              position: absolute;
              display: inline-block;
              width: 6px;
              left: 24px;
              top: 0px;
              bottom: 0px;
              background-color: #FF6766;
              border-radius: 6px;
            }

            .quote > div:nth-child(2) {
              padding: 10px 0px 12px 0px;
              -webkit-box-sizing: border-box;
                 -moz-box-sizing: border-box;
                      box-sizing: border-box;
            }

            .quote > div:nth-child(2) > span {
              font-weight: 700;
            }


.price-drop {
  font-size: 32px;
  text-decoration: line-through;
}

.alert-box {
  position: relative;
  display: block;
  padding: 24px;
  border-radius: 8px;
  background-color: #fff4c5; 
}

.alert-box.certificate {
  position: absolute;
  display: inline-block;
  left: 0px;
  top: 0px;
  right: 16px;
  padding: 16px;
  font-size: 16px;
  line-height: 20px;
  border-radius: 8px;
  background-color: #fff4c5;
  opacity: 0;
  pointer-events: 0; 
  transition: .3s;
}

.alert-box.certificate.show {
  left: 16px;
  top: 16px;
  opacity: 1;
  pointer-events: auto;
}

.chat-left {
  position: relative;
  display: table;
  width: 100%;
  margin-bottom: 48px;
}

    .chat-left > div {
      position: relative;
      display: table-cell;
      vertical-align: top;
    }

    .chat-left > div:nth-child(1) {
      width: 130px;
    }


    .chat-left > div:nth-child(2) {
      padding: 32px 32px 36px 32px;
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;
      background-color: #F6F6F9;
      color: #545465 !important;
      border-radius: 0px 16px 16px 16px;
    }

.chat-right {
  position: relative;
  display: table;
  width: 100%;
  margin-bottom: 48px;
}

    .chat-right > div {
      position: relative;
      display: table-cell;
      vertical-align: top;
    }

    .chat-right > div:nth-child(2) {
      width: 130px;
      text-align: right;
    }


    .chat-right > div:nth-child(1) {
      padding: 32px 32px 36px 32px;
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;
      background-color: #F6F6F9;
      color: #545465 !important;
      border-radius: 16px 0px 16px 16px;
    }


    .chat-person {
      position: relative;
      display: inline-block;
      width: 124px;
    }

        .chat-person > div {
          position: relative;
          display: inline-block;
          width: 64px;
          height: 64px;
          border-radius: 64px;
          background: url("../assets/img_person01.8b4baf7ebb87.jpg") center center no-repeat;
          background-size: 64px 64px;
        }

        .chat-person.second > div {
          background: url("../assets/img_person02.a6f99978fe12.jpg") center center no-repeat;
          background-size: 64px 64px;
        }

    .chat-corner {
      position: absolute;
      display: inline-block;
      right: 0px;
      top: 0px;
      width: 32px;
      height: 32px;
      background: url("../assets/ic_chat_corner.b2e98d424ae4.svg") center center no-repeat;
      background-size: 32px 32px;
    }

    .chat-corner.right {
      position: absolute;
      display: inline-block;
      right: auto;
      left: 0px;
      top: 0px;
      width: 32px;
      height: 32px;
      background: url("../assets/ic_chat_corner_right.c9da10082ee1.svg") center center no-repeat;
      background-size: 32px 32px;
    }

    .chat-grid {
      position: relative;
      display: table;
      margin-top: 20px;
    }

        .chat-grid > div {
          position: relative;
          display: table-cell;
          vertical-align: bottom;
          padding-right: 40px;
        }

        .chat-grid > div:nth-last-child(1) {
          padding-right: 0px;
        }





.answer {
  position: relative;
  display: table;
  width: 100%;
  margin-top: 48px;
  display: none;
}

.answer.show {
  display: inline-block;
}

    .answer > div {
      position: relative;
      display: table-cell;
      vertical-align: top;
      padding: 32px 32px 36px 32px;
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;
      background-color: #F6F6F9;
      color: #2E2E2E !important;
      border-radius: 0px 16px 16px 16px;
    }

    .answer-corner {
      position: absolute;
      display: inline-block;
      left: 0px;
      top: -32px;
      width: 32px;
      height: 32px;
      background: url("../assets/ic_answer_corner.c9da10082ee1.svg") center center no-repeat;
      background-size: 32px 32px;
      transform: rotate(-90deg);
    }



.table {
  position: relative;
  display: inline-block;
  width: 100%;
  margin-top: 40px;
  margin-bottom: 16px;
}

    .table > div {
      position: relative;
      display: table-cell;
      vertical-align: top;
      width: 50%;
      font-size: 16px;
      line-height: 24px;
    }

    .table.three > div {
      position: relative;
      display: table-cell;
      vertical-align: top;
      width: 33%;
      font-size: 16px;
      line-height: 24px;
    }

    .table > div > div {
      position: relative;
      display: inline-block;
      width: 100%;
      border-right: 1px solid #DDDFE5;
      border-bottom: 1px solid #DDDFE5;
      padding: 16px;
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;
    }

    .table > div:nth-child(1) > div {
      border-left: 1px solid #DDDFE5;
    }

    .table > div > div.table-header {
      background-color: #F6F6F9;
      border-top: 1px solid #DDDFE5;
      color: #545465;
      font-weight: 700;
    }






/* //////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////    SIGNIN
///////////////////////////////////////////////////////////////*/


.layout-signin {
  position: relative;
  display: table;
  width: 100%;
  height: 100vh;
  background-color: #334AC0;
}

  .layout-signin > div {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    overflow-y: scroll;
    padding: 48px 0px 48px 0px;
  }

  .layout-signin .content-box {
    max-width: 480px;
    padding: 32px 40px 40px 40px;
    margin-top: 0px;
    border-radius: 8px;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
  }


.signin-logo {
  position: relative;
  display: inline-block;
  width: 100%;
  margin-bottom: 40px;
}

.signin-copy {
    position: relative;
    display: block;
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    margin-top: 30px;
}



.switcher {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 8px;
  width: 100%;
}

  .switcher > div {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    background-color: rgba(55, 53, 47, 0.16);
    color: rgba(55, 53, 47, 0.5);
    font-family: roboto-medium;
    font-style: normal;
    font-weight: 700;
    padding: 11px 0px 13px 0px;
    text-align: center;
    border-radius: 3px;
    transition: .3s;
  }

  .switcher > div.active {
    background-color: #FC7F60;
    color: #FFFFFF;
  }


.grid-or-signin {
  position: relative;
  display: table;
  width: 100%;
}

  .grid-or-signin > div {
    position: relative;
    display: table-cell;
    vertical-align: middle;
  }

  .grid-or-signin > div:nth-child(1) {
    width: 40%;
  }

  .grid-or-signin > div:nth-child(2) {
    width: 20%;
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 12px;
    opacity: 0.5;
  }

  .grid-or-signin > div:nth-child(3) {
    width: 40%;
  }

  .grid-or-signin > div > hr {
    border-top: 1px solid rgba(75,85, 95, 0.2);
    border-bottom: 0px;
    border-left: 0px;
    border-right: 0px;
    padding-bottom: 3px;
  }


  hr.divider {
    border-top: 1px solid rgba(55,53, 47, 0.08);
    border-bottom: 0px;
    border-left: 0px;
    border-right: 0px;
    margin: 24px 0px 16px 0px;
  }

.content-box {
  position: relative;
  display: inline-block;
  width: 100%;
  background-color: #FFFFFF;
  margin-top: 154px;
  border-radius: 8px;
}



/* //////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////// BUTTONS
///////////////////////////////////////////////////////////////////////*/

button {
  outline: none;
  border: 0px;
  text-align: left;
}

button:focus { outline: none; }

.button {
    position: relative;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    background-color: #334AC0;
    color: #FFFFFF !important;
    font-size: 15px;
    line-height: 24px;
    font-style: normal;
    font-weight: 700;
    padding: 12px 32px 12px 32px;
    border-radius: 8px;
    z-index: 2;
    background-position: center center;
}

    .button:hover {
        color: #FFFFFF !important;
    }

    .button:active {
        opacity: .5;
    }

    .button::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        bottom: 0;
        z-index: -1;
        background-color: #2B2A35;
        will-change: transform,background-color;
        -webkit-transform: scale3d(0,1,1);
        transform: scale3d(0,1,1);
        -webkit-transform-origin: 100% 50%;
        transform-origin: 100% 50%;
        -webkit-transition: -webkit-transform .35s;
        transition: -webkit-transform .35s;
        transition: transform .35s;
        transition: transform .35s,-webkit-transform .35s;
        -webkit-transition-timing-function: cubic-bezier(.25,.46,.45,.94);
        border-radius: 8px !important;
    }

    .button:hover::before {
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1);
        -webkit-transform-origin: 0% 50%;
        transform-origin: 0% 50%;
        -webkit-transition-timing-function: ease;
        transition-timing-function: ease;
        border-radius: 8px;
    }


.button.fb {
  background-color: #3B5990;
  font-size: 15px;
  padding: 11px 24px 13px 48px;
}

  .button.fb::after {
    content: '';
    position: absolute;
    display: inline-block;
    left: 16px;
    top: 50%;
    margin-top: -13px;
    width: 24px;
    height: 24px;
    background-size: 20px 20px;
  }  

  .button.fb:hover::before {
    background-color: #2B2A35;
  }



.button.cancel {
    background-color: rgba(55,53,47, 0.40);
    color: #FFFFFF;
}
    .button.cancel:hover {
        color: #FFFFFF !important;
    }
    .button.cancel::before {
        background-color: #2B2A35;
    }

.button.green {
    background-color: #33C06B;
    color: #FFFFFF;
}
    .button.orange:hover {
    }
    .button.orange::before {
        background-color: #2B2A35;
    }

.button.red {
    background-color: #FF6766;
    color: #FFFFFF;
}
    .button.red:hover {
    }
    .button.red::before {
        background-color: #2B2A35;
    }



.button.clear-padding {
  padding-left: 0px;
  padding-right: 0px;
}

.button.delete {
    background-color: rgba(55,53,47,0.10);
    color: rgba(55,53,47,0.64) !important;
}
    .button.delete:hover {
        color: #FFFFFF !important;
    }
    .button.delete::before {
        background-color: #FF7A7A;
    }


.button.halfwhite {
    background-color: #FFFFFF;
    color: #37352F !important;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.32);
    max-width: 480px;
    padding-right: 0px;
    padding-left: 0px;
    text-decoration: none;
    margin-top: 24px;
    color: #FFFFFF !important;
}



.button.disabled {
    pointer-events: none;
    cursor: no-drop;
    background-color: rgba(55,53,47, 0.24);
    
}


    .button.hover-white:hover {
        color: #FFFFFF !important;
    }

    .button.hover-white::before {
        background-color: #37352F;
    }

    .button.hover-dark:hover {
        color: #37352F !important;
    }

    .button.hover-dark::before {
        background-color: #FFFFFF;
    }


.button.small-text {
    font-size: 14px;
    padding: 8px 20px 11px 20px;
}

.button.small {
    padding: 8px 24px 8px 24px;
}

.button.mini {
    padding: 5px 16px 3px 16px;
    border-radius: 2px;
    font-size: 11px;
}

.button.micro {
    padding: 5px 16px 3px 16px;
    border-radius: 2px;
    font-size: 11px;
    font-style: normal !important;
    font-weight: 700 !important;
    transition: .3s;
}

.button.fw {
    width: 100%;
    text-align: center;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}


.button.loader {
  color: transparent !important;
  background: url("../assets/ic_loader.748aa16ef62b.svg") center center no-repeat #37352F !important;
  background-size: 24px 24px !important;
  transition: .3s;
  opacity: 0.5;
  pointer-events: none;
  cursor: no-drop;
}

.button.loader::before {
  opacity: 0;
}

.button.loader::after {
  opacity: 0;
}

.button.mw-188 {
    min-width: 188px;
    padding-left: 0px;
    padding-right: 0px;
    text-align: center;
}



/* //////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////    POPUPS
///////////////////////////////////////////////////////////////*/


.popup-container {
  width:100%;
  min-height:100%;
  background-color: rgba(40,39,43,0.50);
  overflow-y:scroll;
  position:fixed;
  top:0px;
  left: 0px;
  z-index: 1000;
  
  pointer-events: none;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}


.popup-container.show {
  opacity: 1;
  pointer-events: auto;
}

.popup-container .popup-mask {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.03);
  z-index: 1;
}


.popup-container .popup-content { 
  margin: 64px auto 64px auto;
  position: absolute;
  width:640px;
  left: 50%;
  margin-left: -320px;
  padding:0px;
  background-color: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0 16px 24px 0 rgba(0, 0, 0, 0.25);
  animation-name: showPopup;
  animation-duration: 0.5s;
  z-index: 2;
  
  pointer-events: none;
  opacity: 0;
  -webkit-transform: translateY(-100px);
  -ms-transform: translateY(-100px);
  transform: translateY(-100px);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

        .popup-container.large .popup-content {
          width:840px;
          left: 50%;
          margin-left: -420px;
        }

.popup-container.show > div.popup-content {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

.popup-container > div.popup-content > div.body { 
  width: 100%;
  padding: 40px 40px 40px 40px;
  position: relative;
  display: inline-block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

      .popup-container.ptb60 .popup-content > div.body {
        padding: 60px 40px 60px 40px;
      }

.popup-container .popup-content.small { 
  position: relative;
  width:360px;
}

.popup-container > div.popup-content > div.footer {
    width: 100%;
    padding: 32px 40px 32px 40px;
    border-radius: 0px 0px 3px 3px;
    background-color: #FFFFFF;
    border-top: 1px solid rgba(55,53,47, 0.08);
    position: relative;
    display: block;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    text-align: right;
}




@keyframes showPopup {
  0% { opacity: 0; transform: translateY(-100px); }
  100% { opacity: 1; transform: translateY(0px); }
}

.popup-container .popup-content.hideanimation {
  animation-name: hidePopup;
  animation-duration: 0.6s;
}

@keyframes hidePopup {
  0% { opacity: 1; transform: translateY(0px); }
  100% { opacity: 0; transform: translateY(-100px); }
}

.popup-container > div.popup-content > div.body > div.h1 {
  padding-right: 24px;
}

.close-button {
  position: absolute;
  display: inline-block;
  width: 48px;
  height: 48px;
  cursor: pointer;
  right: 20px;
  top: 20px;
  transition: .3s;
  background-color: transparent;
  border: 2px solid rgba(55,53,47,0.20);
  border-radius: 48px;
  text-align: left;
  z-index: 990;
}

.close-button:hover {
  opacity: 1;
  background-color: #FF7A7A;
  border: 2px solid rgba(55,53,47,0);
  transition: .3s;
}

.close-button:active {
  opacity: .3;
  transition: .3s;
}

.close-button > div {
  margin: 12px 0px 0px 12px;
  width: 24px;
  height: 24px;
  position: relative;
  display: inline-block;
  transform: rotate(0deg);
  transition: .5s;
  background: url("../assets/ic_cancel.1df91685b983.svg") center center no-repeat;
  opacity: 0.48;
  background-size: 24px 24px;
}

.close-button:hover > div {
  transform: rotate(-180deg);
  background: url("../assets/ic_cancel_white.9373669d8bb1.svg") center center no-repeat;
  opacity: 1;
  background-size: 24px 24px;
  transition: .5s;
}


.close-button.detail {
    width: 40px; height: 40px;
    right: -20px;
    top: -20px;
    background-color: #CBCFD2;
}

    .close-button.detail:hover {
      opacity: 1;
      background-color: #FF7A7A;
      transition: .3s;
    }

    .close-button.detail > div {
      margin: 0px 0px 0px 0px;
      width: 40px;
      height: 40px;
      background-size: 28px 28px;
    }

    .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    border: 0px solid #FFFFFF;
    background: #f6f6f6;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    color: #454545;
}

    .ui-slider-horizontal .ui-slider-handle {
    top: -17px !important;
    margin-left: -24px !important;
}

    .ui-slider .ui-slider-handle {
    position: absolute !important;
    z-index: 2 !important;;
    width: 48px !important;;
    height: 38px !important;;
    padding: 10px 0px 0px 0px !important;;
    cursor: default !important;;
    -ms-touch-action: none !important;;
    touch-action: none !important;;
    border-radius: 64px !important;;
    background-color: #33C06B !important;
    color: #FFFFFF !important;
    box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.40);
}

    .ui-widget-content {
    border: 0px solid #dddddd;
    background: rgba(147, 157, 168, 0.16);
    color: #333333;
    border-radius: 32px !important;
}

    .ui-widget.ui-widget-content {
    border: 0px solid #c5c5c5;
}


.fullscreen-page {
  position: relative;
  display: table;
  width: 100%;
  height: 100vh;
  background-color: #FFFFFF;
}

    .fullscreen-page > div {
      position: relative;
      display: table-cell;
      text-align: center;
      width: 980px;
      height: 100vh;
      vertical-align: middle;
    }

.table-pay {
  position: relative;
  display: inline-block;
  width: 980px;
  text-align: left;
  padding-top: 112px;
  padding-bottom: 88px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

  .table-pay > div {
    width: 50%;
    position: relative;
    display: table-cell;
    vertical-align: middle;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
  }

  .table-pay > div:nth-child(2) {
    padding-left: 48px;
  }

  .table-pay-divider {
    border-right: 2px solid rgba(55,53,47,0.08);
    padding-right: 48px;
  }

.box-pay {
  position: relative;
  display: inline-block;
  max-width: 400px;
  text-align: left;
}




table {
  padding: 0px 0px 0px 0px;
  margin: 24px 0px 0px 0px;
  width: 100%;  
}

  thead {
    background-color: #F6F6F9;
    color: #545465;
    font-weight: 700;
    font-size: 16px;
  }

  tbody {
    background-color: #FFFFFF;
    font-size: 16px;
  }

  td {
    border-left: 1px solid #DDDFE5;
    border-bottom: 1px solid #DDDFE5;
    padding: 8px 8px 8px 16px;
    margin: 0px;
  }

  td:nth-last-child(1) {
    border-right: 1px solid #DDDFE5;
  }

  thead td {
    border-top: 1px solid #DDDFE5;
  }

  tbody td:nth-child(1) {
    font-weight: 700;
  }


  thead td:nth-child(1) {
    border-radius: 8px 0px 0px 0px;
  }

  thead td:nth-last-child(1) {
    border-radius: 0px 8px 0px 0px;
  }

  tbody tr:nth-last-child(1) td:nth-child(1) {
    border-radius: 0px 0px 0px 8px;
        font-weight: 700;
  }

  tbody tr:nth-last-child(1) td:nth-last-child(1) {
    border-radius: 0px 0px 8px 0px;
  }



  table.compact thead {
    background-color: #F6F6F9;
    color: #545465;
    font-weight: 700;
    font-size: 13px;
    line-height: 13px
  }

  table.compact tbody {
    background-color: #FFFFFF;
    font-size: 13px;
    line-height: 13px
  }

  table.compact td {
    border-left: 1px solid #DDDFE5;
    border-bottom: 1px solid #DDDFE5;
    padding: 8px 8px 8px 16px;
    margin: 0px;
  }


    .table > div > div {
      position: relative;
      display: inline-block;
      width: 100%;
      border-right: 1px solid #DDDFE5;
      border-bottom: 1px solid #DDDFE5;
      padding: 16px;
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;
    }

    .table > div:nth-child(1) > div {
      border-left: 1px solid #DDDFE5;
    }

    .table > div > div.table-header {
      background-color: #F6F6F9;
      border-top: 1px solid #DDDFE5;
      color: #545465;
      font-weight: 700;
    }


.grid-two {
  position: relative;
  display: table;
}

  .grid-two > div {
    position: relative;
    display: table-cell;
    vertical-align: middle;
  }

  .grid-two > div:nth-child(1) {
    padding-right: 16px;
  }

  .grid-two > div:nth-child(2) {
    padding-left: 16px;
  }

  .grid-two.smallgap > div:nth-child(1) {
    padding-right: 4px;
  }

  .grid-two.smallgap > div:nth-child(2) {
    padding-left: 4px;
  }


.telegram {
  position: relative;
  padding-left: 56px;
}

.telegram::before {
  content: '';
  position: absolute;
  display: inline-block;
  left: 0px;
  top: -5px;
  width: 48px;
  height: 48px;
  border-radius: 48px;
  background: url("../assets/ic_app_telegram.2f1ddb1f5227.jpg") center center no-repeat;
  background-size: cover;
}


.certificate-box {
  position: relative;
  display: inline-block;
  width: 400px;
  height: 268px;
  background: url("../assets/img_certificate.e5f6ecb9489b.jpg") center center no-repeat;
  background-size: cover;
  border-radius: 16px;
  padding: 16px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

    .certificate-box > a {
      padding: 14px 24px 16px 24px;
      font-size: 20px;
      line-height: 16px;
      text-decoration: none;
      border-radius: 48px;
      position: absolute;
      display: inline-block;
      right: 16px;
      bottom: 16px;
      background: linear-gradient(67.33deg, #334AC0 16.18%, #5871F1 77.23%);
      color: #FFFFFF;
      box-shadow: 0 8px 16px 0 rgba(0,0,0,0.32);
      transition: .6s;
    }

    .certificate-box > a:hover {
      background: linear-gradient(68deg, #FFFFFF 16%, #FFFFFF 74%);
      color: #FF6766;
    }



.broker-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 16px 16px;
}


.broker-item {
  position: relative;
  display: inline-block;
  width: 100%;
  text-align: center;
  border-radius: 16px;
  background-color: #FFFFFF;
  transition: all .2s ease-in-out;
}


  .broker-item.open-broker {
    background-color: #00BEF0;
  }

  .broker-item.open-broker > a {
    position: relative;
    display: inline-block;
    width: 80%;
    height: 64px;
    background: url("../assets/broker_otkritie.616bfe173329.svg") center 22px no-repeat;
    background-size: contain;
  }

  .broker-item.freedom {
    background-color: #72BF44;
  }

  .broker-item.freedom > a {
    position: relative;
    display: inline-block;
    width: 80%;
    height: 64px;
    background: url("../assets/broker_freedom.59558f8b4e92.svg") center 27px no-repeat;
    background-size: contain;
  }


  .broker-item.iti {
    background-color: #E1372F;
  }

  .broker-item.iti > a {
    position: relative;
    display: inline-block;
    width: 80%;
    height: 64px;
    background: url("../assets/broker_iti.12ee64c153ca.svg") center 20px no-repeat;
    background-size: contain;
  }

.broker-item:hover {
  transform: scale(1.1);
}

.broker-item:active {
  transform: scale(1);
}