.pre-header {
    background-color: #0484b8;
    color: #fff;
    height: 57px;
    display: flex;
    @media only screen and (max-width: 768px) {
      font-size: 15px;
    }
    @media only screen and (max-width: 500px) {
      font-size: 13px;
    }
    .sponsored {
      text-align: right;
      .logo {
        width: 149px;
        margin-left: 30px;
        @media only screen and (max-width: 768px) {
          width: 130px;
          margin-left: 20px;
        }
        @media only screen and (max-width: 500px) {
          width: 130px;
          margin-left: 10px;
        }
      }
    }
    .desktop{
      @media only screen and (max-width: 768px) {
        display: none;
      }
    }
  }
  #main-nav {
    background-color: #fff;
    height: 128px;
    transition: 0.4s;
    box-shadow:1px 2px 5px -2px #000000;
    @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;
        margin-left: 36px;
        @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;
    @media only screen and (max-width: 768px) {
      top: 0px;
    }
  }

  
  #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: center;
    background-size: cover;
    width: 100%;
    position: relative;
    box-shadow: inset 0 0 0 2000px rgb(0 83 116 / 80%)
  }
  .full-image::after {
    content: "";
    display: block;
    position: absolute;
    background-size: contain;
    bottom: -2px;
    right: 0px;
    width: 200px;
    height: 200px;
    @media only screen and (max-width: 900px) {
      width: 140px;
      height: 140px;
    }
   
    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: 22px;
      line-height: 30px;
      margin-bottom: 25px;
    }
    a:not(.item) {
      padding: 12px 30px;
      background-color: #e8d44b;
      color: #2c2c2c;
      font-size: 18px;
      line-height: 24px;
      text-decoration: none;
      text-transform: uppercase;
      @media only screen and (max-width: 768px) {
        font-size: 15px;
      }
    }
    a:not(.item):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;
    position: relative;
    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-button a:hover {
    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='%23000'/%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-button.open{
    display:none;
  }

  .search:not(body){
    top:57px;
    height: 128px;
    background-color:rgba(255,255,255,0.9);
    position: fixed;
    right:0px;
    visibility: hidden;
    transition: 0.4s;
     width: 100%;
     right: -100%;

 .search-form{
  width: 60%;
  margin: auto;
  margin-top: 20px;
  @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-width: 0px 0px 1px 0px !important;
    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");
  }
}
.admin-bar{
  .search{
    top:90px;
  }
}
.search .search-form label::before{
  content: "";
  opacity: 0;
  transition: 0.8s;
  position: absolute;
  width: 35px;
  height: 35px;
  margin-left: -65px;
  margin-top: -5px;
  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.open .search-form label::before{
  opacity: 1;
}

.search.open:not(.mobile-search){
  right:0px;
  width: 100%;
  visibility: visible;
  transition: 0.4s;

  @media only screen and (max-width: 768px) {
    display: none;
    visibility: hidden;
  }
  z-index: 999;
}

.search.mobile{
  display: none;
  visibility: hidden;
  position: revert;
  height: 40px;
  top:0px;
  @media only screen and (max-width: 768px) {
    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);
}
}

.logged-in{
.sign-up.mobile.menu-item,
  .log-in-button,
  .sign-up.menu-item{
    display: none !important;
    visibility: hidden !important;
  }
}
#login-menu{
 .user-menu {
   display: block;
   padding-bottom: 0px;
   padding-top: 0px;
   text-align: right !important;
 }
}
#login-menu{
  .menu-item-type-user{
    margin-right: 50px;
  }
  .menu-item-type-user::after{
    content: url("data:image/svg+xml,%3Csvg id='Group_1360' data-name='Group 1360' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='42.064' height='42.049' viewBox='0 0 42.064 42.049'%3E%3Cdefs%3E%3CclipPath id='clip-path'%3E%3Crect id='Rectangle_242' data-name='Rectangle 242' width='42.064' height='42.049' fill='%23156570'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg id='Group_1359' data-name='Group 1359' clip-path='url(%23clip-path)'%3E%3Cpath id='Path_1390' data-name='Path 1390' d='M20.087 0h1.245A1.368 1.368 0 0 0 21.5.024a21.19 21.19 0 0 1 3.893.444A20.321 20.321 0 0 1 36.729 7.033a20.5 20.5 0 0 1 5.305 12.884 20.8 20.8 0 0 1-7.98 17.638 20.188 20.188 0 0 1-12.389 4.488 20.74 20.74 0 0 1-6.526-.8 21.057 21.057 0 0 1-11.58-8.517A20.512 20.512 0 0 1 .123 23.19c-.045-.432-.082-.865-.123-1.3v-1.8c.026-.262.055-.524.077-.786A20.206 20.206 0 0 1 2.007 12.1 20.8 20.8 0 0 1 15.265.823 17.258 17.258 0 0 1 19.92.029 1.053 1.053 0 0 0 20.087 0M21.24 25.906v.023c-1.695 0-3.39-.006-5.085 0a17.691 17.691 0 0 0-4.366.38A10.475 10.475 0 0 0 6.324 29.5c-.132.15-.246.315-.366.475a.349.349 0 0 0-.024.42c.112.191.213.389.335.573a17.792 17.792 0 0 0 17.552 7.649A17.591 17.591 0 0 0 34 33.246a15.948 15.948 0 0 0 2.049-2.637.621.621 0 0 0-.045-.827 9.178 9.178 0 0 0-1.632-1.575 11.333 11.333 0 0 0-6.612-2.232c-2.174-.039-4.348-.047-6.521-.068m-.222-3.25a8.088 8.088 0 1 0-8.046-8.115 8.133 8.133 0 0 0 8.046 8.115' fill='%23156570'/%3E%3C/g%3E%3C/svg%3E");
    height: 42px;
    width: 42px;
    display: block;
    position: absolute;
    right: 0px;
    top: 0px;
    margin-left: 50px;
  }
}

#main-menu{
 .hide-on-main 
 {
  display: none;
  visibility: hidden;
  @media only screen and (max-width: 768px) {
    display: block;
    visibility: visible;
  }
}
}