/* topbar */
.topbar.cfosj-topbar{
   background: #fff7d1;
   
}

.topbar.cfosj-topbar .header-left{
   background-color: unset ;
}

.topbar.cfosj-topbar .header-left::before{
   background-color: unset ;
   /* content: none; */
}

.topbar.cfosj-topbar .header-left::after{
   background-color: var(--cfosj-black) ;
}



.topbar.cfosj-topbar .header-left .topbaner-cta{
   /* background-color: var(--cfosj-black); */
   /* background: #424242; */
   color: #fff;
   position: relative;
   z-index: 1;
}

.topbar.cfosj-topbar .header-left .topbaner-cta::before{
   /* background: var(--cfosj-purple); */
   content: "";
   position: absolute;
   display: block;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   z-index: -1;
   -webkit-transform-origin: bottom left;
   transform-origin: bottom left;
   -webkit-transform: skew(-12deg, 0deg);
   transform: skew(-12deg, 0deg);
   -webkit-transition: all 0.35s !important;
   transition: all 0.35s !important;
   -moz-transition: all 0.35s !important;
   -ms-transition: all 0.35s !important;
}

.topbar.cfosj-topbar .header-left .topbaner-cta.cta1,
.topbar.cfosj-topbar .header-left .topbaner-cta.cta1::before
{
   background: var(--cfosj-black);
}
.topbar.cfosj-topbar .header-left .topbaner-cta.cta2{
   background: var(--cfosj-black);
}

.topbar.cfosj-topbar .header-left .topbaner-cta.cta2::before
{
   background: var(--cfosj-purple);
}
.topbar.cfosj-topbar .header-left .topbaner-cta.cta3{
   background: var(--cfosj-purple);
}

.topbar.cfosj-topbar .header-left .topbaner-cta.cta3::before
{
   background: var(--cfosj-coral);
}

.topbar.cfosj-topbar .header-left .topbaner-cta .content-inner{
   text-align: center;
}
.topbar.cfosj-topbar .header-left .topbaner-cta .content-inner:hover{
   color: var(--cfosj-yellow);
}

.topbar.cfosj-topbar .header-right{
   padding: 0 130px 0 0;
}

.topbar.cfosj-topbar .header-right .main-search{
   /* margin-top: -20px; */
}

.topbar.cfosj-topbar .header-right .gva-search .control-search{
   background: var(--cfosj-yellow);
}

.topbar.cfosj-topbar .quick-menu a{
   line-height: 2;
}


.topbar.cfosj-topbar .header-right .quick-menu{
   /* float: left; */
}
/* .topbar.cfosj-topbar .main-search a{
   line-height: 1;
} */



/* header */
ul.gva-nav-menu > li .submenu-inner li a:hover, ul.gva-nav-menu > li .submenu-inner li a:focus, ul.gva-nav-menu > li .submenu-inner li a:active, ul.gva-nav-menu > li ul.submenu-inner li a:hover, ul.gva-nav-menu > li ul.submenu-inner li a:focus, ul.gva-nav-menu > li ul.submenu-inner li a:active{
   color: var(--cfosj-yellow);
}




/* new section using wp_nav for the right section 
*
*
*
*
*/
.topbar.cfosj-topbar .header-left{
   padding-left: 0;
   padding-right: 0;
}

.topbar.cfosj-topbar .cfosj-topbar-menu{
   height: 100%;
}

.topbar.cfosj-topbar .header-left .cfosj-menu {
   /* padding-top: 8px; */

   height: 100%;
   align-content: center;
}
   .topbar.cfosj-topbar .header-left .cfosj-menu  .menu-item{
   position: relative;
   z-index: 1;



   height: 100%;
   /* padding-top: 8px; */
   padding-top: 10px;
}

.topbar.cfosj-topbar .header-left .cfosj-menu  .menu-item::before{
   content: "";
   position: absolute;
   display: block;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   z-index: -1;
   -webkit-transform-origin: bottom left;
   transform-origin: bottom left;
   -webkit-transform: skew(-12deg, 0deg);
   transform: skew(-12deg, 0deg);
   -webkit-transition: all 0.35s !important;
   transition: all 0.35s !important;
   -moz-transition: all 0.35s !important;
   -ms-transition: all 0.35s !important;
}


.topbar.cfosj-topbar .header-left .cfosj-menu  .menu-item a{
   padding: 8px 42px;
   color: var(--cfosj-cream);
   font-size: 13px;
   font-weight: 600;
   font-stretch: normal;
   font-style: normal;
   line-height: normal;
   letter-spacing: 0.25px;
}

@media screen and (max-width: 1200px) {
   .topbar.cfosj-topbar .header-left .cfosj-menu  .menu-item a{
      padding: 8px 30px;
   }
 }


 @media screen and (max-width: 992px) {
   .topbar.cfosj-topbar .header-left .cfosj-menu  .menu-item{
      padding: 10px;
   }
 }

 @media screen and (max-width: 773px) {

   .topbar.cfosj-topbar .row{
      flex-direction: column;
   }

   .topbar.cfosj-topbar .header-left .cfosj-menu  .menu-item{
      width: 100%;
      /* padding: 0px; */
      text-align: center;
      padding: 15px;
   }

   .topbar.cfosj-topbar .header-left .cfosj-menu  .menu-item a{
      font-size: 16px;
   }

 }

.topbar.cfosj-topbar .header-left .cfosj-menu  .menu-item a:hover{
   color: var(--cfosj-yellow);
}


.topbar.cfosj-topbar .header-left .cfosj-menu  .menu-item,
.topbar.cfosj-topbar .header-left .cfosj-menu  .menu-item::before
{
   background: var(--cfosj-black);
}

.topbar.cfosj-topbar .header-left .cfosj-menu  .menu-item:nth-of-type(2){
   background: var(--cfosj-black);
}

.topbar.cfosj-topbar .header-left .cfosj-menu  .menu-item:nth-of-type(2)::before{
   background: var(--cfosj-purple);
}

.topbar.cfosj-topbar .header-left .cfosj-menu  .menu-item:nth-of-type(3){
   background: var(--cfosj-purple);
}

.topbar.cfosj-topbar .header-left .cfosj-menu  .menu-item:nth-of-type(3)::before{
   background: var(--cfosj-coral);

}

.header-mobile .main-search{
   right: 25px;
   margin-top: -15px;
}


.elementor-kit-7 .header-v1 input[type="submit"] 
{
   font-family: "Font Awesome 5 Free" !important;
}

@media screen and (max-width: 773px) {

   .topbar.cfosj-topbar .container{
      margin: 0;
      padding-left: 0;
      padding-right: 0;
      max-width: 100%;
   }

   .topbar.cfosj-topbar .header-left .cfosj-menu  .menu-item:nth-of-type(2){
      background: var(--cfosj-purple);
   }

   .topbar.cfosj-topbar .header-left .cfosj-menu  .menu-item:nth-of-type(3){
      background: var(--cfosj-coral);
   }


   /* .header-mobile .main-search{
      position: absolute;
      right: 25px;
      top: 50%;
      z-index: 1;
      margin-top: -15px;
   } */

 }


 @media screen and (max-width: 575px) {
   .header-mobile .mobile-logo{
      padding: 0 150px;
   }
 }

 @media screen and (max-width: 480px) {
   .header-mobile .mobile-logo{
      padding: 0;
   }
 }