/*
These are custom classes and overides for the MyLAC theme
 */

/*This will overide the default search bar width

 */

body,p,ul,li {

    color: var(--main-font-color) !important;
}

a{
    color:var(--main-link-color)!important;
}
a:hover  {

    color: var(--main-hover-color) !important;
    text-decoration: underline !important;

}

p{
    /*line-height: 1.8;*/
    margin-bottom: 20px
}

/* fix for admin bar */
#wpadminbar a:visited{
    color: white !important;

}
#wpadminbar a:hover{
    color: #ffffff !important;

}
#wpadminbar a:link{
    color: white !important;

}
/* end */
h6,h5,h4,h3,h2,h1{

    color: var(--main-heading-color) !important;
}

.team-card{
    margin-bottom:-90px;
}

.teamImage{

    border-radius:20px;
    background-size:cover;
    min-height:300px;
    min-width:200px;
    background-position:center,bottom;

}


.team-card .content{

    padding: 30px 0px 30px 0px !important;
}

.header-style-1 .search-style-2 form {
    max-width: 100%;

}

/*This will overide the default icon size in the department dropdown*/
.categories-button-active i{

    font-size:15px !important

}
.widget-category-2 ul li{
    line-height: 0px !important;
}

.banner-img .banner-text h4 {
    font-weight: 700;
    margin-bottom: 15px;
    min-height: 100px;
    font-size:30px;
}
.banner-img .banner-text{
    max-width:65%
}
.banner-img img{

    width:100%
}

.categories-dropdown-wrap.style-2{
    padding:15px;
}


.card-1 figure img {
    border-radius: 10px;
    display: inline-block;
    max-width: none !important;
}

.featured-card img{
    width:auto;
}
.heroSlider{

    border-radius: 10px;

}
.fbSlider{
    border-radius: 10px;
}
.heroSlider .slider-content{
    padding-top:10px;
    padding-left:50px;
    overflow-x: auto;
    height: 100%;
}
.heroSlider .slider-content p {
    font-size: 30px;
    /*width: 80%;*/
    /*line-height: 40px;*/
}




.hotline i {
    opacity: 0.7;
    font-size: 30px;
    line-height: 40px;
}

/* end overides */

/*
This class ensures the dept dropdown is full width
 */
.deptDD ul{

    display:flex !important;
    gap:10px;
    flex-direction: row;
    width:100%;
    flex-wrap:wrap;
}
.deptDD li{
    margin: 0px !important;
    /* width: 30%; */
    height: auto !important;
    align-items: stretch !important;
    flex-grow: 1;
    flex-basis: 32%;
}

.main-categori-wrap .categori-dropdown-inner{
    min-width: 620px;
}

/* overides the banner image height for featured block */
.banner-img {
    position: relative;
    clear: both;
    border-radius: 10px;
    overflow: hidden;
    max-height: 250px;
    margin-bottom: 15px;
}
.banner-alt {
    max-height: none !important;
}
.wow { visibility: hidden; }
/* These styles control the blog news items */
.newsItem{
    margin:0px;
    margin-bottom:10px;
    padding:0px;

    border:solid 1px #e4e4e4 !important;
    border-radius:10px;
    position:relative;
    vertical-align:top !important;
}

.newsItem div {
    vertical-align:top !important;
    margin-bottom:-8px;
}

.newsItem img{
    object-fit:cover;

    height:100%;
    width:100%;
    border-radius: 10px 0px 0 10px ;
}
.newsItem .col-4 {
    padding: 0px !important;
    margin: 0px !important;
}

.newsItem .desc{


    max-height:150px;
    overflow:hidden;
    margin-bottom:10px;

}

.newsItem .title{

    color:black;
    margin-top:10px;
    margin-bottom:10px;

}
.newsItem .title a{

    color:black;
    margin-top:10px;
    margin-bottom:10px;

}

/* classes to control the post items */
.postItem {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    gap: 10px;
    border: solid #ebebeb 1px;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 35px;
    align-items: stretch;
    /* Remove this if we don't want middle align */
    align-items:center;
}

.postItem .postImage{

    display: flex;

    flex-direction: column;

    flex-basis: 100%;

    flex: 1;

    background-size:cover;

    min-height: 330px;
    align-items: stretch
}
.postTitle h1{

    font-size:25px;
    margin-bottom:10px;

}

.postItem .postContent{
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 2;
    padding:10px;
    align-items: stretch;}

.postItem .postContent .postBtn {
    justify-content: end;
    display: flex;
    margin-top: 15px;
}
/* add media queries for the post items */
@media only screen and (max-width: 500px) {

    .postItem .postContent{
        display: flex;
        flex-direction: column;
        flex-basis: 100%;
        flex: auto;
        padding: 10px;
        align-items: stretch;
    }

    .postItem .postContent .postBtn .btn{
        width:100%
    }

}

/* These classes will control the category box, typically to the right of the blog */
.cat-box{
    display:flex;
    flex-direction:column;
    border:solid 1px #e3e3e3;
    border-radius:10px;
    padding:10px;
}

.cat-box .categoryItem{

    display:flex;
    width:100%;

    border:1px #e7e7e7 solid;
    margin-bottom:5px;
    padding:5px;
    justify-content:center;
    align-items:center


}

.cat-box .catHead{

    font-size:18px;
    margin-bottom:10px;
    position:relative;
    padding-bottom:5px
}

.catHead::before {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    width: 25%;
    left: 0%;
    border-bottom: 3px solid #0095ff;
}

.cat-box .categoryItem .cateogryCount{

    background-color: #275891;
    width:25px;
    height:25px;
    justify-content:center;
    align-items:center;
    display:flex;
    border-radius:25px;
    color:white;

}

.cat-box .categoryItem .catgoryTitle{

    flex:.9;

    font-size:16px;
    margin-bottom:5px;
    margin-top:5px;
    align-self:center;
    justify-content:center;
    position:relative;

}
.cat-box .categoryItem .catgoryTitle::last-child{

    flex:.9;
    border-bottom:none;
    font-size:20px;
    border:solid;


}
.sliderHeader{

    font-size:55px;
}

.logo img {
    max-width: 100%;
    height: auto;
}

.nav li{
    list-style: none ;
}
.tab-pane li{
    list-style: disc !important;
    margin-left: 40px;
}

.tab-pane ul{

    margin:20px;

}


.alignleft{
    float: left;
    margin-right: 1em;
    margin-bottom: 1em;
}
.alignright{
    float: right;
    margin-right: 1em;
    margin-bottom: 1em;
}

.featured-card-alt {
    padding: 50px 30px;
    border-radius: 15px;
    border: 1px solid #ececec;
    background: #fff;
    height:100%;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    align-items: center;
}
/* controls the left right image content box */

.imgCon{
    display:flex;
    gap:50px;
    flex-wrap:wrap;
    align-items: center;
}

.ICtitle{
    font-size:25px !important;
}

.ICcontent p{
    margin-top:5px;
}
.ICcontent{

    flex-grow:1;

    margin-bottom:5px;

    width: 50%;
}
.ICright{

    flex-direction: row-reverse;

}

.imgCon .ICimg{
    width: 35%;
    /* flex-grow: 1; */
    justify-content: start;
    align-items: baseline;
    display: flex;
    position: 0;
    top: 0;
    /* border: solid; */
}

.imgCon .ICimg img{
    width: 100%;
    height: 100%;
    /* object-fit: cover; */
    border-radius:10px !important;
}
@media only screen and (max-width:820px) {
    .imgCon .ICimg{
        flex-grow: 1;
    }
    .imgCon .ICimg img{
        width:100%;
        height:100%;
        object-fit:cover;
        border-radius:10px !important;

    }

    .heroSlider .slider-content p {
        font-size: 30px;
        width: 100% !important;
        line-height: 40px;
    }
    .swiper-slide{
        height:auto !important;
        padding:25px;
    }
    .swiper-wrapper .single-hero-slider{
        background-image:none !important;

    }

    .heroSlider .slider-content{
        width:100% !important
    }

    .fbSliderContent{
        width:100% !important;
        height: 100% !important;

    }

    .swiper-slide-fb{
        padding:0px;

    }
    .heroSlider .slider-content{
        padding-left: 0px !important;
        paddint-top:0px !important;
    }
    .slider-content-middle{
        flex-direction: row !important;
    }
    .sliderHeader{
        font-size: 30px !important;
    }
}


/* end img con */

.tabBtnBar{

    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

}

.fbGroup{

    height:100%;
    display:flex;
    flex-wrap:wrap;
    align-content: stretch;
    /*gap:10px;*/
}

.hero-featureBox{





    width: 100%;

}
.mobile-header-logo img{
    width:auto !important;
}

.btn-100{
    width:100%;
}

.dashboard-menu ul li a.active{

    color: var(--tab-font-color) !important;

}
.hero-featureBox .fbItem{
    width:100%;
    border-radius:10px;
    height:50%;
    align-content: stretch;
    display:flex;
    /* background-position: center; */
    background-size: cover;
    /*border:solid 1px #f8f8f8;*/
    margin-bottom:10px;

}
.fbbtnBox {
    /* border: solid; */
    bottom: 10px;
    width: auto;
    /* height: 50px; */
    /* justify-content: flex-start; */
    /* display: flex; */
    /* background-color: red; */
    /* align-content: start !important; */
    position: absolute;
}

.hero-featureBox .fbItem .banner-text{
    width:100%;
    padding: 15px;
}

.listBoxHeading {
    width: 100%;
    font-weight: bold !important;
    font-size: 18px !important;
    margin-left: -5px !important;
    padding-left: 0px !important;
}

.fbItem .swiper-slide{

    border-radius:10px;

}


.postGridItem img{
    height: 375px !important;
    width: 375px !important;
    object-fit: cover;
}

.modal-body a:focus{
    border:solid 3px !important;
}
.modal-body a:focus img {
    border: solid 3px  !important;
}

.fbSliderContent{



    display:flex;
    text-align:left;
    justify-content:stretch;
    height:100%;
    padding:15px;
    font-weight:bold;
    font-size:25px;
    width:50%;
    flex-wrap: wrap;

}
.fbSliderContent h2{
    font-size:30px;
    width: 100%;
}

.HeadingBx{

    text-align:left;

    justify-content:left !important;
    align-items:center;
    display:flex;

}

.HeadingBx img{

    height:50px;
}

.sResults li {
    border-radius:10px;
    border:solid 1px #e5e5e5;
    padding:20px;
    margin-bottom:25px;
    font-size:16px;
}
.sResults li h3{
    font-size:25px;
}
.sResults .sResultContent{
    margin-top:10px;
    border-left: 4px solid;
    padding-left:10px;

}
.gridBox{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}
.gridBoxItem{


    flex:  1 0px;

}

.btn-outLine{

    color:black !important;
    border:solid 1px #707070 !important;
    background-color:white !important;

}
.btn-outline[href]:hover{

    color:black !important;
}

.cptFilesButtonRow{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:10px;

}
.cptFilesButtonRow .cptFilesItem{
    flex-grow:1;
}
.cptFilesButtonRow .cptFilesItem a{
    width:100%;
}
.cptFiles ul{

    list-style:disc;
    padding-left:30px;


}
.cptFiles ul li{
    padding-bottom:8px;
}


.container ul{

    list-style:disc;
    padding-left:30px;


}
.container ul li{
    padding-bottom:8px;
}

.container ul .nav-item{
    padding-bottom:0px !important;
}

.showList ul{
    margin-left:30px;
    list-style-type: disc

}


.angledHeader-right{
    height:100px;
    clip-path: polygon(0 0, -40% 0, 120% 100%, 0 100%)
}
.angledHeader-left{
    height:100px;
    clip-path: polygon(100% 0, -40% 100%, 100% 100%)
}


.wrapper.bg-light.angled.lower-end:after, .wrapper.bg-light.angled.upper-end:before {
    border-right-color: #fefefe;
}

.wrapper.angled.upper-end:before {
    border-right-color: transparent;
    border-right-width: 100vw;
    border-top-width: 4rem;
    top: -4rem;
}
.wrapper.angled:after, .wrapper.angled:before {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    z-index: 0;
    border: 0 solid transparent;
}

/* classed for the hero image widget */
.heroImage img{
    width:100%;
    display: flex;
}

/* end hero class widget css */

.dividerMain {
    position: relative;
    overflow: hidden;
    height:100px;
}

.dividerMain svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /* height: 100px; */
}
/* helper classes */

.rounded-10{
    border-radius:10px !important;
}
.rounded-20{
    border-radius:20px !important;
}
.rounded-30{
    border-radius:30px !important;
}
.rounded-40{
    border-radius:40px !important;
}

.border-solid-1{
    border:solid 1px #e5e5e5 !important;
}
.border-solid-2{
    border:solid 2px #e5e5e5 !important;
}
.border-solid-3{
    border:solid 3px #e5e5e5 !important;
}

a.topbtn {
    display: flex;
    align-items: center;
}

a.topbtn img {
    margin-right: 5px;
    max-height:20px;
    padding:0px
}

/*define slider slide width classes, these help assign classes for responsive *

 */

.slw10{
    width : 10%;
    height: 100%;
}
.slw20{
    width : 20%;
    height: 100%;
}
.slw30{
    width : 30%;
    height: 100%;
}
.slw40{
    width : 40%;
    height: 100%;
}
.slw50{
    width : 50%;
    height: 100%;
}
.slw60{
    width : 60%;
    height: 100%;
}
.slw70{
    width : 70%;
    height: 100%;
}
.slw80{
    width : 80%;
    height: 100%;
}
.slw90{
    width : 90%;
    height: 100%;
}
.slw100{
    width : 100%;
    height: 100%;
}

@media (max-width: 992px) {



    .slw10{
    width : 35%;
    }
    .slw20{
        width : 45%;
    }
    .slw30{
        width : 55%;
    }
    .slw40{
        width : 65%;
    }
    .slw50{
        width : 75%;
    }
    .slw60{
        width : 85%;
    }
    .slw70{
        width : 95%;
    }
    .slw80{
        width : 100%;
    }
    .slw90{
        width : 100%;
    }
    .slw100{
        width : 100%;
    } }

.content-wrap{

    display:flex;
    height:100%;

}


.box{

    margin-left:0px !important;
    padding-left:0px !important;
    border:solid;
    flex-direction:row;
    flex-wrap:wrap;


}



.content{
    flex-basis:50%;
    flex: 1 1 0;



}
.space{
    border:solid;
    flex-basis:50%;
}
.categories-dropdownMobile{
    position:relative !important;
    display: none;
    opacity: 0;
    visibility: hidden;
}
.categories-dropdownMobile.openm{
    opacity: 1;
    visibility: visible;
    display: block;

}
.categories-button-activeM{
    padding:10px;
    border-radius:10px;
    margin-bottom:5px;

}
.mylacContent ul{
    margin-left:25px;
    list-style-type: disc;
    margin-top:15px;
    margin-bottom:15px;
}
.mylacContent li{
    font-size:16px !important;
}

.main-menu a {

    color: var(--header-link-color) !important;

}
.main-menu a:hover {

    color: var(--header-link-color-hover) !important;

}
.main-menu a:focus {

    color: var(--header-link-color-hover) !important;
    text-decoration: underline;

}
.main-menu button {

    color: var(--header-link-color) !important;

}
.main-menu button:hover {

    color: var(--header-link-color-hover) !important;

}
.main-menu button:focus {

    color: var(--header-link-color-hover) !important;
    text-decoration: underline;
    border:solid 2px;

}
.main-menu > nav > ul > li > button i {
    font-size: 8px;
    position: relative;
    margin-left: 4px;
}
.expand-menu{
    opacity: 0;
    visibility: visible;
    color:var(--header-link-color) !important;
    font-size: 16px;
    background-color: rgba(0,0,0,0);
    font-size: 8px;
    position: relative;
    margin-left: 4px;
}
.expand-mm{
    opacity: 0;
    visibility: visible;
    color:var(--header-link-color) !important;
    font-size: 16px;
    background-color: rgba(0,0,0,0);
    font-size: 8px;
    position: relative;
    margin-left: 4px;
}
.navItems {
    padding-right:30px !important;
}
.expand-href{
    position: absolute !important;
}

.expand-mm:focus{
    opacity: 1;
    visibility: visible;
}
.expand-mm-alt{
    opacity: 1;
    visibility: visible;
}
.mmShow {
    opacity: 1 !important;
    visibility: visible !important;
    margin-top: 0 !important;/* Set to default margin when visible */
}

.mmHide {
    opacity: 0  !important;
    visibility: hidden  !important;
    margin-top: -10px  !important; /* Adjust this value as needed */
}

.team {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 10px;

    padding: 10px;

}
.team-member{



    border-radius: 10px;




    display: flex;
    flex-direction: column;


    flex: 0 1 auto;
    margin-bottom:20px;



}
.team .team-photo {

    width:100%;
    overflow:hidden;
    border-radius: 10px;

    /* height: 100%; */
}
.team .team-photo img{
    width:100%;

    object-fit: fill;

}

.team .team-details {
    padding-top:20px;
    padding-bottom:20px;
    min-height:100px;
    text-align: center;
    background-color: #ffffff;
    margin-top:-15px;
    border-radius:10px;
    flex: 1 1 auto;
    box-shadow: #31465914 0px 3px 7px 0px;
    /* justify-content: center; */
    /* align-items: unset; */
    /* align-content: unset; */
    display: flex;
    flex-wrap:wrap;

    width: 100%;

    justify-content: center;
    transition: transform 0.3s ease; /* Add a smooth transition effect */
}

.team .team-details div{
    flex-basis: 100%;




}
.team-details:hover {
    transform: translateY(-10px); /* Move the element up by 10 pixels on hover */
}
@media (max-width: 992px) {
    .team {  grid-template-columns: auto !important;}
}

.tab-style3 .nav-item .active{
    background-color:var(--main-color) !important;
    color:var(--tab-font-color) !important
}

.contact-infor,.sResults{
    list-style:none !important;

}
.no-break-words{
    word-break: keep-all !important;
}
.footerpagination ul{

    list-style-type: none !important;
}

a:focus{

    border: 1px double #000;
    outline: 2px solid #699;
    outline-offset: -9px;
}

.h4alt {
    font-size:24px !important;
    font-family: var(--main-heading-font);
    font-weight:700;
    line-height: 1.2;
}

.h6alt {
    font-size:16px !important;
    font-family: var(--main-heading-font);
    color: var(--main-heading-alt-color);
    font-weight: 700;
    line-height: 1.2;
    padding-right:5px;
}
#searchBox input:focus{
    background:#ddd !important;

}
#searchBox input{
    margin-left:0px !important;
    padding-left:10px !important;
}

.main a:link{
    font-weight: bold;
}
.btn:focus{

    border:solid 2px black!important;


}

.h3alt{
    font-family: var(--main-heading-font);
    color: var(--main-heading-alt-color);
    font-weight: 700;
    line-height: 1.2;
    font-size:32px;
}

.h4alt{
    font-family: var(--main-heading-font);
    color: var(--main-heading-alt-color);
    font-weight: 700;
    line-height: 1.2;
    font-size:30px;
}

.nav-link:focus{
    background-color: grey;
}
.linkListSlider ul{

    padding:0px !important;
}

.linkListSlider{

    max-height:420px;
    overflow-y:auto;
}
.linkListWrapSlider{
    padding: 5px !important;
}

.negative-mt-50{
    margin-top:-50px;
}
.negative-mt-100{
    margin-top:-100px;
}
.negative-mb-50{
    margin-bottom:-50px;
}
.negative-mb-75{
    margin-bottom:-75px;
}
.negative-mb-100{
    margin-bottom:-100px;
}
.mh-50 h1{
    min-height:50px !important;
}
.mh-75 h1{
    min-height:75px !important;
}
.sidebar-widget {
    background-color:white;

}
.setPosition-relative{
    position:relative;
}

.setPosition-fixed{
    position: fixed;
}
.content-center{
    width:100%;
    display:flex;
    justify-items:center;

    flex-wrap:wrap;
    flex-direction:row;
    flex-basis: 100%;
    gap:20px;
}

.content-center div{
    width:100%;

    text-align:center;
}
.heroSliderText{
    margin-top:100px;
    margin-left:200px
}
.heroSliderText h1{
    min-height:50px !important;
}
@media only screen and (max-width: 500px) {

    .heroSliderText{
        margin-top:100px;
        margin-left:auto;

    }
    .heroSliderText h1{
        min-height:50px !important;
    }

}
.box-shadow{
    box-shadow: 0px 0px 10px 0px #0000001a;
}

/* adding video background support */
.video-background {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.video-background video {
    position: absolute;
    bottom: 0;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1;
    transform: translateX(-50%);
    background-size: cover;
}


/* Ensure keyboard controls */
video::-webkit-media-controls {
    display: none !important;
}

video::-webkit-media-controls-enclosure {
    overflow: hidden !important;
}

.color-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    z-index: 0;
    pointer-events: none; /* Ensure the overlay does not interfere with other elements */
    will-change: transform; /* Hint to the browser to optimize for transforms */
    transform: translateZ(0); /* Force hardware acceleration */
}

.parallax-section {
    position: relative;

    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 100px 0; /* Adjust the padding as needed */
    color: #fff; /* Ensure text color contrasts well with background */
}

.parallax-section .container {
    position: relative;
    z-index: 2;
}

.parallax-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: rgba(0, 0, 0, 0.5); /* Adjust the overlay color and opacity as needed */
    z-index: 1;
}
.skip-nav-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff !important;
    padding: 8px;
    z-index: 100;
    transition: top 0.3s ease;
}

.skip-nav-link:focus {
    top: 0;
}

/* will allow for the calendar overload loading */
#calendar{
    position:relative;
}
.calLoading {
    background: rgba(0, 0, 0, 0.5);


    position: absolute;

    height:100%;
    width:100%;
    z-index:99;

}
.calDes img{

}

/* Add in a button style to drop the button to the bottom of the slide */
.slideBtnBox {
    bottom: 0;
    position: absolute;
}
.slider-content-middle {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    height: 100%;
    padding: 20px 0; /* Adjust padding to minimize space between top and bottom */
    box-sizing: border-box;
}
.slider-content-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: start;
    flex-wrap: wrap;
    height: 100%;
    padding: 20px 0; /* Adjust padding to minimize space between top and bottom */
    box-sizing: border-box;
}
.slider-content-bot {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: end;
    flex-wrap: wrap;
    height: 100%;
    padding: 20px 0; /* Adjust padding to minimize space between top and bottom */
    box-sizing: border-box;
}

/*swiper pagination icon increase*/
.swiper-pagination-bullet {
    width: 25px !important;
    height: 25px !important;
    margin-right:8px !important;

}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* test */

@keyframes fadeInout {
    0% {
        opacity: 0;
        -webkit-transform: translatey(-100px);
        transform: translatey(-100px);
    }
    40% {
        opacity: 0;
        -webkit-transform: translatey(-80px);
        transform: translatey(-80px);  }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;  }
}
@keyframes top-bottom {
    0%, 100%, 20%, 50%, 80% {

        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }

    40% {
        -webkit-transform: translateY(-8px);
        -ms-transform: translateY(-8px);
        transform: translateY(-8px);
    }
    60% {
        -webkit-transform: translateY(-4px);
        -ms-transform: translateY(-4px);
        transform: translateY(-4px);
    }
}

.megaMenuWrap{
    position: absolute;
    width:100% !important;
    left: 50%;
    transform: translateX(-50%);
    z-index:9999999;

}
.main-menu > nav > ul > li > button {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    color: var(--main-heading-alt-color);
    font-family: var(--main-font) !important;
    background-color:transparent;
    border:none;
    padding:0px;
}