.pre-header {
    background-color: #0484b8;
    color: #fff;
    height: 57px;
    display: flex;
    @media only screen and (max-width: 768px) {
      font-size: 15px;
    }
    .sponsored {
      text-align: right;
      .logo {
        width: 149px;
        margin-left: 30px;
      }
    }
    .desktop{
      @media only screen and (max-width: 768px) {
        display: none;
      }
    }
  }
  #main-nav {
    background-color: #fff;
    height: 128px;
    transition: 0.4s;
    @media only screen and (max-width: 768px) {
      height: auto;
    }
    .custom-logo-link {
      margin-left: 0px;
      @media only screen and (max-width: 768px) {
      width: 70%;
      max-width: 300px;
      }
      img {
        transition: 0.4s;
        width: 349px;
        @media only screen and (max-width: 768px) {
          width: 100%;

        }
      }
    }
    .navbar-nav.sign-up {
      margin-bottom: 20px;
    }
    #login-menu {
      transition: 0.4s;
      position: relative;
      a {
        font-size: 14px;
        color: #0484b8;
        margin-left: 20px;
        text-align: center;
      }
      a:hover {
        color: #2c2c2c;
        text-decoration: underline;
      }
      .sign-up {
        a {
          margin-left: 10px;
        }
      }
      .log-in-button {
        background-color: #0484b8;
        margin-left: 20px;
        a {
          font-size: 14px;
          color: #fff;
          padding: 7px 25px;
          margin-left: 0px;
        }
        a:hover {
          text-decoration: none !important;
        }
      }
      .log-in-button:hover {
        background-color: #2c2c2c;
      }
    }
  
    #main-menu {
      transition: 0.4s;
      position: relative;
      top: unset;
      a {
        font-size: 18px;
        font-weight: bold;
        color: #0484b8;
        @media only screen and (max-width: 1000px) {
          //font-size: 16px;
        }
        @media only screen and (max-width: 768px) {
          font-size: 18px;
        }
      }
      a:hover {
        color: #2c2c2c;
        text-decoration: underline;
      }
    }
    .mobile{
      display: none;
      visibility: hidden;
      @media only screen and (max-width: 768px) {
        text-transform: uppercase;
        display: block;
        visibility:visible;
      }
    }
  }
  
  .admin-bar .fixed-top {
    top: 32px;
  }
  
  #main-nav.fixed-top {
    height: 80px !important;
    #main-menu {
      top: -20px;
      @media only screen and (max-width: 768px) {
        top: 0px;
      }
    }
    #login-menu {
      top: -60px;
    }
    .custom-logo-link img {
      width: 240px !important;
      @media only screen and (max-width: 768px) {
        width: 180px !important;
      }
    }
  }
  
  .hero-container {
    background-position: top right;
    background-size: cover;
    width: 100%;
    background-color: #ccc;
    height: 530px;
  }
  
  .header-section,
  .full-image,
  .image-loaded {
    height: 530px;
    background-position: top right;
    background-size: cover;
    width: 100%;
    position: relative;
  }
  .full-image::after {
    content: "";
    display: block;
    position: absolute;
    background-size: contain;
    bottom: -2px;
    right: 0px;
    width: 200px;
    height: 200px;
    background-image: url("../images/logo-border.png");
  }
  
  .hero-content {
    width: 60%;
    height: 520px;
    @media only screen and (max-width: 900px) {
      width: 95%;
      margin: auto;
    }
    h1 {
      color: #fff;
      margin-bottom: 10px;
    }
    p {
      color: #fff;
      font-size: 20px;
      line-height: 28px;
      margin-bottom: 25px;
    }
    a {
      padding: 12px 30px;
      background-color: #e8d44b;
      color: #2c2c2c;
      font-size: 18px;
      line-height: 24px;
      text-decoration: none;
      text-transform: uppercase;
    }
    a:hover {
      color: #2c2c2c;
      background-color: #fff;
    }
  }
  
  #btn-back-to-top {
    position: fixed;
    bottom: 20px;
    right: 0px;
    width: 43px;
    height: 43px;
    display: none;
    background-color: #0484b8;
    padding: 5px;
    border-radius: 0px;
    background-size: 22px;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23.024' height='23.545' viewBox='0 0 23.024 23.545'%3E%3Cg id='Group_1373' data-name='Group 1373' transform='translate(0 1.5)'%3E%3Cline id='Line_15' data-name='Line 15' y1='15.007' transform='translate(11.512 7.038)' fill='none' stroke='%23fff' stroke-width='3'/%3E%3Cpath id='Path_1388' data-name='Path 1388' d='M3331.593 12517.547h23.024' transform='translate(-3331.593 -12517.547)' fill='none' stroke='%23fff' stroke-width='3'/%3E%3Cpath id='Path_1389' data-name='Path 1389' d='M3279.832 12508.2l8.216-8.217 8.216 8.217' transform='translate(-3276.535 -12494.895)' fill='none' stroke='%23fff' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E");
    z-index: 999;
  }
  
  #btn-back-to-top:hover {
    background-color: #000;
  }
  
  .search-button a {
    text-indent: 99999px;
    background-repeat: no-repeat;
    width: 35px;
    height: 35px;
    background-image: url("data:image/svg+xml,%3Csvg id='Component_33_1' data-name='Component 33 %E2%80%93 1' xmlns='http://www.w3.org/2000/svg' width='35' height='35' viewBox='0 0 35 35'%3E%3Ccircle id='Ellipse_8' data-name='Ellipse 8' cx='17.5' cy='17.5' r='17.5' fill='%230484b8'/%3E%3Cg id='Group_1454' data-name='Group 1454' transform='translate(-1077.417 -15.667)'%3E%3Ccircle id='Ellipse_7' data-name='Ellipse 7' cx='6.701' cy='6.701' r='6.701' transform='translate(1086.75 25)' fill='none' stroke='%23fff' stroke-width='3'/%3E%3Cline id='Line_39' data-name='Line 39' x2='4.188' y2='4.188' transform='translate(1098.896 37.146)' fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E");
  }
  .search{
    display: none;
  


 .search-form{
  width: 60%;
  margin: auto;
  margin-top: 40px;
  @media only screen and (max-width: 768px) {
    width: 99%;
    margin-top: 0px;
    margin-bottom: 10px;
  }

  
  label{
    
    width: 90%;
    @media only screen and (max-width: 768px) {
      width: 98%;
    }
  }
 
  .search-field{
    all: unset;
    width: 100%;
    margin: auto;
    border-bottom:1px solid  #2c2c2c;
  }

  .search-submit{
    all: unset;
    background-color: #0484B8;
    color: #fff;
    padding: 6px 12px;
    position:relative;
    top: -10px;
    left: -56px;
    @media only screen and (max-width: 768px) {
      left: unset;
      float: right;
      top: -40px;
     
     
    }
  }
  .search-submit:hover{
  background-color: #2c2c2c;
  }
}
.close{
    all: unset;
    position: relative;
    top: -10px;
    display: inline-block;
   font-size: 0px;
   width: 30px;
   height: 30px;
   @media only screen and (max-width: 768px) {
  display: none;
  visibility: hidden;
   }
   background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33.996' height='33.996' viewBox='0 0 33.996 33.996'%3E%3Cg id='Group_1458' data-name='Group 1458' transform='translate(2.121 2.121)' opacity='0.997'%3E%3Cline id='Line_3' data-name='Line 3' x2='29.754' y2='29.754' transform='translate(0 0)' fill='none' stroke='%23156570' stroke-linecap='round' stroke-width='3'/%3E%3Cline id='Line_4' data-name='Line 4' x1='29.754' y2='29.754' transform='translate(0 0)' fill='none' stroke='%23156570' stroke-linecap='round' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E");
}
.close:hover{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='33.996' height='33.996' viewBox='0 0 33.996 33.996'%3E%3Cg id='Group_1499' data-name='Group 1499' transform='translate(2.121 2.121)' opacity='0.997'%3E%3Cpath id='Path_1922' data-name='Path 1922' d='M0 0 29.754 29.754' transform='translate(0 0)' fill='none' stroke='%232c2c2c' stroke-linecap='round' stroke-width='3'/%3E%3Cline id='Line_4' data-name='Line 4' x1='29.754' y2='29.754' transform='translate(0 0)' fill='none' stroke='%232c2c2c' stroke-linecap='round' stroke-width='3'/%3E%3C/g%3E%3C/svg%3E");
  }
}
.search.open:not(.mobile-search){
  display: block;
  top:57px;
  width: 100%;
  height: 128px;
  background-color:rgba(255,255,255,0.9);
  position: fixed;
  @media only screen and (max-width: 768px) {
    display: none;
    visibility: hidden;
  }
  z-index: 999;
}

.search.open.mobile{
  display: none;
  visibility: hidden;

  @media only screen and (max-width: 768px) {
    position: absolute;
    display: block;
    visibility: visible;
  }
}

.navbar-toggler{
  position: absolute;
  top: 30px;
  right: 20px;
  border-color:transparent !important ;
}
.fixed-top{
  .navbar-toggler{
  top: 20px;
  }
}


#navbarNavDropdown{
  @media only screen and (max-width: 768px) {
  background-color: #fff;
  z-index: 99;
  width: 100vw;
  margin-top: -2px;
  padding: 20px 30px;
  }
}



.pre-header .container,
.nav-container{
  @media only screen and (max-width: 1000px) {
max-width: unset !important;
  }
}

.navbar-toggler:focus{
    color: rgba(0,0,0,.0);
    border-color: rgba(0,0,0,.0);

}

.hamburger .line{
  width: 35px;
  height: 4px;
  background-color: #0484b8;
  display: block;
  margin: 8px auto;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.navbar-toggler:not(.collapsed){

 .hamburger .line:nth-child(2){
  opacity: 0;
}

 .hamburger .line:nth-child(1){
  transform: translateY(13px) rotate(45deg);
}

.hamburger .line:nth-child(3){
  transform: translateY(-11px) rotate(-45deg);
}
}