h1 {
  font-family: 'Lato','Helvetica', sans-serif;
  color: #28c4f4; }

h2 {
  font-family: 'Lato','Helvetica', sans-serif;
  color: #4E4D4F; }

h3 {
  font-family: 'Lato','Helvetica', sans-serif;
  color: #28c4f4; }
  h3.bold {
    font-weight: bold; }

h4 {
  font-family: 'Rubik','Helvetica', sans-serif;
  color: #4E4D4F; }

h5 {
  font-family: 'Rubik','Helvetica', sans-serif;
  color: #4E4D4F; }

h6 {
  font-family: 'Rubik','Helvetica', sans-serif;
  color: #28c4f4; }

a:hover {
  text-decoration: underline; }

ul {
  margin: 0;
  padding: 0; }

section {
  overflow: hidden;
  position: relative; }

header {
  position: fixed;
  height: 60px;
  width: 100%;
  background-color: white;
  z-index: 50; }
  header .container, header .row, header .col {
    height: 100%; }
  header .col-12 {
    position: relative; }

.logo {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 300px; }
  .logo img {
    width: 100%; }
  @media (max-width: 576px) {
    .logo {
      width: 180px; } }

.navigation {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  position: relative; }
  @media (max-width: 1200px) {
    .navigation {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      width: 35vw;
      background-color: white;
      position: fixed;
      left: -35vw;
      top: 0;
      height: 100vh;
      min-height: 100vh;
      -webkit-transition: 0.2s;
      -o-transition: 0.2s;
      transition: 0.2s;
      z-index: 100; } }
  @media (max-width: 576px) {
    .navigation {
      width: 75vw;
      left: -75vw; } }
  .navigation.opened .mobile-action {
    left: calc(35vw - 33px);
    margin: 0 5px; }
    @media (max-width: 576px) {
      .navigation.opened .mobile-action {
        left: calc(75vw - 33px); } }
  .navigation .mobile-action {
    position: absolute;
    left: 35vw;
    top: 30px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 20px;
    margin-left: 10px;
    display: none; }
    @media (max-width: 1200px) {
      .navigation .mobile-action {
        display: inline; } }
    @media (max-width: 576px) {
      .navigation .mobile-action {
        left: 75vw; } }
    .navigation .mobile-action i {
      cursor: pointer; }
  .navigation .main-navigation, .navigation .user-navigation {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
    .navigation .main-navigation ul, .navigation .user-navigation ul {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center; }
      @media (max-width: 1200px) {
        .navigation .main-navigation ul, .navigation .user-navigation ul {
          display: block;
          width: 100%;
          padding-left: 15px;
          padding-right: 15px; } }
      .navigation .main-navigation ul li, .navigation .user-navigation ul li {
        float: left;
        list-style: none;
        font-family: 'Open Sans', 'Roboto', 'Helvetica', Sans-Serif;
        text-transform: uppercase; }
        @media (max-width: 1200px) {
          .navigation .main-navigation ul li, .navigation .user-navigation ul li {
            float: none;
            padding: 5px; } }
        .navigation .main-navigation ul li a, .navigation .user-navigation ul li a {
          color: #666666; }
          .navigation .main-navigation ul li a:hover, .navigation .user-navigation ul li a:hover {
            color: #252525; }
  @media (max-width: 1200px) {
    .navigation .main-navigation {
      -webkit-box-flex: 1;
      -ms-flex-positive: 1;
      flex-grow: 1;
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: flex-start;
      margin-top: 10px; } }
  .navigation .main-navigation li {
    padding-right: 30px; }
  @media (max-width: 1200px) {
    .navigation .user-navigation {
      -webkit-box-flex: 1;
      -ms-flex-positive: 1;
      flex-grow: 1;
      -webkit-box-align: end;
      -ms-flex-align: end;
      align-items: flex-end;
      margin-bottom: 10px; } }
  .navigation .user-navigation li {
    padding-left: 30px; }
    .navigation .user-navigation li:first-of-type a {
      color: #28c4f4; }

footer {
  padding: 60px 0; }
  footer h6 {
    text-transform: uppercase;
    margin-bottom: 26px;
    color: #4E4D4F; }
  footer ul {
    list-style: none; }

.home .hero .background-image {
  width: 100%;
  height: 850px; }
  .home .hero .background-image img {
    width: 100%; }

.home .hero .container, .home .hero .row, .home .hero .col, .home .hero .message {
  height: 100%; }

.home .hero .overlay {
  position: absolute;
  background-color: rgba(37, 37, 37, 0.6);
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.input-with-calendar-icon {
  padding-left: 30px !important;
}

.calendar-icon {
  color: #000;
  font-size: 18px;
  left: 10px;
  position: relative;
  top: -28px;
}

.form-group .picker.picker--opened {
  max-width: unset !important;
}
.animate-switch-container {
  position:relative;
  overflow-x: hidden;
  max-width: 550px;
  margin: auto;
}

@media (min-width:962px) {
  .animate-switch-container.expanded {
    width:50vw;
    margin-left: -25%;
  }
}

.animate-switch{
  padding:10px;
  width: 100%;
  text-align: center;
}
.animate-switch.ng-animate {
  -webkit-transition:all 0.5s;
  transition:all 0.5s;
  position:absolute;

}

/* hide leaving slide  */
/* show */
.animate-switch.ng-leave{
  left:0;
}
/* hide */
.forward .animate-switch.ng-leave.ng-leave-active{
  left:-100%;
}
.backward .animate-switch.ng-leave.ng-leave-active{
  left: 100%;
}
/* show entering slide  */
/* hide */
.forward .animate-switch.ng-enter {
  left:100%;
}
.backward .animate-switch.ng-enter {
  left:-100%;
}
/* show */
.animate-switch.ng-enter.ng-enter-active {
  left:0;
}

.animate-switch button.btn, input[type="submit"].btn {
  padding-top: 0.58035714em;
  padding-bottom: 0.58035714em;
  padding-right: 3.48214286em;
  padding-left: 3.48214286em;
  font-size: 13.5px;
}

.animate-switch .btn:not(:last-child) {
  margin-bottom: 0;
}


/*-----------------------------------*/
/*------>>> Validation <<<-----------*/
/*-----------------------------------*/

.form-validation input.ng-invalid-maxlength {
  border:2px solid #D9272D;
}


.length-error {
  color: #D9272D;
  display: block;
  font-size: 12px;
  opacity: .8;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  position: relative;
  line-height: 18px;
  padding: 10px 10px 5px 10px;
  margin: -25px 0 20px 0;
  background-color: #E3E3E3;
  border-radius: 0 0 5px 5px;
}

input.input-error, select.input-error {
  border: 2px solid #D9272D;
}

/*-----------------------------------*/
/*------->>> FORM STYLES <<<---------*/
/*-----------------------------------*/

.note {
  display: block;
  font-size: 12px;
  opacity: .8;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  position: relative;
  line-height: 18px;
}

.note-input {
  padding: 10px 10px 5px 10px;
  margin: -25px 0 20px 0;
  background-color: #E3E3E3;
  border-radius: 0 0 5px 5px;
}

.note-input-error, .required-error-banner {
  background-color: rgba(217, 39, 45, 0.5);
}

label.radio {
    background: #fff;
    border: 1px solid #38354a;
    border-radius: 10px;
    color: grey;
    cursor: pointer;
    padding: 15px;
    height: 150px;
}

label.radio span {
    position: absolute;
    top: 50%;
    padding: 30px;
    margin: 0 0 0 -20px;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 1.3em;
    text-align: center;
    color: black;
}

.toggle-selector  input:checked+label
 {
    background: #04859b;
    border-color: #2bc3f4;
}

.toggle-selector  input:checked+label span {
  color: white;
}


label.radio:hover {
    opacity: 0.8;
    border-color: #2bc3f4;
}

.terms-scrollbox {
  height: 500px;
  border: 1px solid #28c4f4;
  overflow-y: scroll;
  padding:10px;
}
/* width */
.terms-scrollbox::-webkit-scrollbar {
  width: 20px;
}

/* Track */
.terms-scrollbox::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #c9e0ec;
}

/* Handle */
.terms-scrollbox::-webkit-scrollbar-thumb {
  background: #28c4f4;
}

/* Handle on hover */
.terms-scrollbox::-webkit-scrollbar-thumb:hover {
  background: #166984;
}