/*!
Theme Name: buildER
Author: <a href="https://www.access.dev/">Access Solutions</a>
Version: 1.0.0
*/




/* hide header sections */
.header .searchmain, .top-main,
.header-menu.menu .menu-depth-1 .right-block.show-sidebar {
	display:none;
}

/* header updates */
.header {
        background:transparent;
        background-color: transparent;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        z-index: 99;
        padding:0 0;
        height:80px;
        background-image: linear-gradient( rgba(0,0,0,0.5), rgba(5,29,73,0) );

    &.sticky {
        background-image: linear-gradient(rgba(0,0,0,0.5), rgba(5,29,73,0), );
        height:80px;
        padding:0 0;
    }
    
    .menu-grid-container {
        background:transparent;
        background-color: transparent;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        z-index: 99;
        padding:0;

        @media screen and (max-width:1023px){
            padding:15px 15px;

        }

        & .header-container {
            display:grid;
            grid-template-columns: 1fr 4fr 1fr;
            grid-template-rows: 1fr;
            grid-column-gap: 0px;
            grid-row-gap: 0px;

            @media screen and (max-width:1023px){
                display:flex;
                flex-direction:row;
                justify-content: space-between;
            }
        }

        .main-menu-container {
            justify-content: flex-start;
            margin-left:25px;

            @media screen and (max-width:1023px){
                margin-left:0;
                width:100%;
                left:0;
            }
        }

    }

    /* contact button section */
    .contact-button-container {
		justify-content:center;
		align-items:center;
		flex-direction:column;
        display:flex;
        overflow-x:hidden;
        height:80px;

        @media screen and ( max-width: 1023px ) {

            display:none;

        } 

        .button-section {
            width:100%;
            height:80px;
            position:relative;
            display:flex;
            flex-direction: column;
            justify-content: center;
            align-items:center;

            a.button {
                font-family: "futura-pt",sans-serif !important;
                padding:8px 32px;
                line-height:100%;
                border-radius:32px;
                border:3px solid transparent;
                background-color:#D0EAFA;
                text-transform: uppercase;
                width:fit-content;
                font-weight:400 !important;
                z-index:999999;
                
                &:hover {
                    border:3px solid #B8D8EB;
                    color:white;
                    background:transparent;
                }
            }
        }

        .contact-button-title {
            display: none;
            color:white;
            font-size: 40px !important;
            text-transform: capitalize;
            position:absolute;
            bottom:20px;
            left:20px;
            line-height:110%;
            max-width:200px;
        }

        &.active {
            position: relative;
            background-size:cover;
            background-position:center;
            display:block;
            overflow-x:auto;
            z-index:100000;
            border-left:3px solid #479DC8;

            @media screen and ( max-width:1300px ) {
                min-height:none;
                max-height:none;
            }

            @media screen and ( max-width: 1023px ) {

                display:none;

            } 

            &::after {
                content:'';
                position:absolute;
                left:0;
                top:0;
                width:100%;
                height:100%;
                background-image: linear-gradient(rgba(60, 161, 203, 0), rgba(60, 161, 203, .33), rgba(60, 161, 203, 1))
            }
            
            .contact-button-title {
                display:initial;
                z-index: 1;
            }

        }

}
    
}

.header #main-menu #menu-header-menu .menu-item a {
	color:white;
    font-family: "futura-pt",sans-serif !important;
    text-transform: uppercase;
    font-weight:600 !important;

    @media screen and (max-width:1023px){ 

        color:rgb(60, 161, 203);

    }

    &:hover {
        color:white;
        border-bottom:2px solid white;

        @media screen and (max-width:1023px){ 

            color:rgb(60, 161, 203);
            border-bottom:none;
        }
    }
}

.header #main-menu #menu-header-menu .menu-item.bold > a {
    font-weight:600 !important;
    margin-bottom:0px;
}

.header #main-menu #menu-header-menu .menu-item:not(.bold) > a {
    font-weight:500 !important;
    margin-bottom:0px;
}

.header #main-menu #menu-header-menu .menu-item.menu-item-depth-0>a{
    height:auto;
    padding-bottom:5px;
    font-size:14px !important; 
    letter-spacing: 2px;
    font-weight:500 !important;
    border-bottom:2px solid transparent;
    z-index: 99999;

    @media screen and ( max-width: 1400px ) {
        letter-spacing:1px;
    }
}
.header-menu.menu .menu-item-depth-0.open-first-menu .menu-link.main-submenu {
    border-bottom:2px solid white;
}
.header #main-menu #menu-header-menu {
    margin-top:10px;
}
.header #main-menu #menu-header-menu .menu-item:last-child {
	color:white;
	background:transparent;
	position:relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    align-content: center;
    justify-content: flex-start;
    padding: 0;
    position: relative;
    height: auto;
    width:max-content;

    @media screen and ( max-width: 1023px ) {
        height:auto;
    }

    &:hover {
		background:transparent;
		color:white;
	}

    a {
	    display:inherit;
	    transition:none;
	
		&:hover {
			background:transparent;
			color:white;
		}
	}
}

.menu-container {
    max-height:80px;
    padding-left:25px;
}



/** submenu **/
.header-menu.menu .menu-depth-1.show-submenu {
    background: linear-gradient(rgba(0,0,0,0.5) 0%, rgba(5,29,73,0) 80px ), #B8D8EB;
	flex-direction:row;
    position:fixed;
    display:grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: repeat(1, 1fr);
    left:0;
    top:0;
    padding:100px 20px 50px 20px;
    z-index:0;
    min-height:fit-content;
    max-height:330px;
    align-items:stretch;
    border-right:3px solid #051D49;

    grid-gap: 10px; /* Border width */

        @media screen and (max-width:1300px) {
            min-height:fit-content;
        }

        @media screen and (max-width:1023px){
            
            display:flex;
            flex-direction:column;
            min-height:100% !important;
            max-height:100%;
            height:fit-content;
            background: #F1F1F2;
            border-right:none;
            border-left:none;

        }
}   

/** main menu section **/
.header-menu.menu .menu-depth-1 .menu-item-depth-1:not(:first-child) {
	align-items:flex-start;
	justify-content:flex-start;
    width:100%;
    padding-right:30px;
    padding-left:30px;
    overflow-y:hidden;
    border-left:1px solid #479DC8;

    @media screen and ( max-width: 1023px ) {
        border-left:none;
    }

    /* &::after {
        position:absolute;
        content:'';
        border-right:1px solid #479EC8;
        width:1px;
        right:20px;
        top:0;
        height:140px;

        @media screen and ( max-width: 1600px ) {
            right:0;
        } 

        @media screen and ( max-width:1300px){
            border-right:none;
        }
    } */
}

.header-menu.menu .menu-depth-1 .menu-item-depth-1.no-border-left {
    border-left:none;
}

.sub-menu-item.menu-item-depth-1 {

    @media screen and (min-width:1024px){
        width:100%;
        padding-left:30px !important;
    }
}

.header-menu.menu .sub-menu-item.menu-item-depth-1:last-child {
    width:100% !important;
}

.header #main-menu #menu-header-menu .menu-item {
	justify-content:flex-start;
    font-family: "futura-pt",sans-serif !important;
    height:auto;
}

.header-menu.menu .menu-depth-1 .menu-depth-2
{
	border-bottom:2px solid transparent;
	padding:0px 15px 5px;
    transition: border none;
}

.header-menu.menu .menu-depth-1 .menu-item-depth-1>.sub-menu-link,
.header-menu.menu .menu-depth-1 .menu-depth-2 {
	padding-left: 0px;

    /* @media screen and ( max-width: 1500px ) {

        padding-left:10px;
        padding-right:10px;

    }  */
}

.title-bar .menu-icon span, .title-bar .menu-icon span::before, .title-bar .menu-icon span::after {
    color:#FFF;
    background-color:#FFF;
}

@media print, screen and (max-width: 64.0613em) {
    .title-bar { 
        margin-top:5px;
    }
}
.logo-container {
    padding-left:20px;
    width:auto;
    height:80px;
    z-index:1;

    @media screen and ( min-width:1300px ) {

        width:400px;

    }
}

.header-menu.menu .menu-depth-1 .menu-item-depth-1>.sub-menu-link {
    margin-bottom:10px;

    &:hover {
        border-bottom: 2px solid white !important;
    }
}

.header-menu.menu .menu-depth-1 .menu-depth-2 .menu-item-depth-2 {
    margin-bottom:0px;
}

.header-menu.menu .menu-depth-1 .menu-depth-2 .menu-item-depth-2:not(.bold) a{
    font-weight:400 !important;
    margin-bottom:16px;
}

/** Mobile Menu updates **/
@media screen and (max-width:  1023px) {
    .header #main-menu #menu-header-menu .menu-item.menu-item-depth-0>a {
        font-size:16px !important;
    }

    .top-bar#main-menu #menu-header-menu .menu-item-depth-0.menu-item-has-children .menu-depth-1 .menu-item-depth-1 .sub-menu-link {
        font-size:14px !important;
        padding:0 0;
        margin-bottom:0px;
    }
}

.menu-item-depth-0 >a .show-submenu:hover {
    color:#051D49;
}

.header #main-menu #menu-header-menu .menu-item a {
    border-bottom:2px solid transparent;

    &:hover {
        
        border-bottom:2px solid white;

    }
}

/** button settings **/

/** primary button **/
.button.primary:not(.header-button),
.slider-solutions-block__items__content .slider-category-item__btn .button.primary,
.filter-gallery .button.hollow.primary,
.filter-gallery-search form .button.hollow.primary,
.template-video-gallery .content-for-result .load-more-wrapper button {
    font-size:20px;
    font-weight:500;
    padding: 8px 32px;
    border:3px solid #051D49 !important;
    border-radius:42.15px;
    text-transform: uppercase;
    color:#051D49;
    text-decoration:none !important;
    background:transparent;
    


    &:hover {
        border:3px solid transparent !important;
        background-color: #B8D8EB !important;
        border-radius: 42.15px;
        color:#051D49;
        
    }

    .button.primary.bg-white,
    .button.hollow.primary{
        color: #051D49 !important;
        border: 3px solid #051D49 !important;
        background:transparent !important;
        border-radius:42.15px;

        &:hover,
        &:focus {
            color:#051D49 !important;
            background-color:#B8D8EB !important; 
            border:3px solid #B8D8EB !important;
        
        }
    }
}

.page-template-template-banner .hero .hero-container--inner .hero-content .hero-link .button.hollow.primary {
    font-size:20px;
    font-weight:500;
    padding: 8px 32px;
    border:3px solid #FFF !important;
    border-radius:42.15px;
    text-transform: uppercase;
    color:#FFFFFF;
    text-decoration:none !important;
    background:transparent;

    &:hover {
        color:#FFF !important;
        background-color: #051D49 !important;
        border: 3px solid #051D49 !important;
    }
}

.button.hollow.primary:hover, .button.hollow.primary:focus {
    color: #051D49;
}

.button.primary.type-a,
.clear-filtr {
    border:3px solid #FFF !important;
    color:#FFF !important;

    &:hover,
    &:focus {
        border:3px solid transparent !important;
        color:#051D49 !important;
    }
}
.button.primary.type-b {
    border: 3px solid #479DC8 !important;
    color:#FFF !important;

    &:hover,
    &:focus {
        border:3px solid transparent !important;
        color:#051D49 !important;
    }
}
.button.primary.type-c {
    border: 3px solid #051D49 !important;
    color:#051D49 !important;
    
    &:hover,
    &:focus {
        border:3px solid transparent !important;
        color:#051D49 !important;
    }
}

.filter-gallery .button.hollow.primary {
    border:3px solid #FFF !important;
}

/** secondary buttons **/

.button.secondary.type-a,
.button.secondary.type-b,
.button.secondary.type-c,
.columns-content__content__btn .button.secondary,
.hero-container--inner .hero-link a  {

    font-weight:500 !important;
    padding: 8px 32px !important;
    border-radius:42.15px !important;
    background:transparent !important;
    text-transform: uppercase !important;
    border-bottom: 3px solid transparent !important;
    color:#051D49;
}

.button.secondary.type-a,
.hero-container--inner .hero-link a {
    color: #FFF !important;
    font-size:20px;
    line-height:31px;
    width: fit-content;
    height: 44px;
    display: flex;
    text-decoration: none;
    justify-content: center;
    align-items: center;

    &:hover,
    &:focus {
        color: #FFF !important;
        text-decoration: underline;
        text-decoration-color: #479DC8;
        text-underline-offset: 8px;
        line-height: 31px;
        text-decoration-thickness: 2px;
        transition:none;

    }
}

.button.secondary.type-b,
.button.secondary.type-c,
.columns-items.without_bg .columns-items__content__btn .button.secondary {
    color: #051D49 !important;

    &:hover,
    &:focus {
        color: #051D49 !important;
    }
}


.columns-content__content__btn .button.secondary:hover {
    color:#FFF;
}

.button.secondary,
.single-product .hero .hero-container--inner .hero-content .hero-link .button.hollow.secondary,
.hero-container--inner .hero-link a {
    border:none !important;
    position:relative;
    text-transform: uppercase !important;
    background: tranparent;

    &::after {
        content:'';
        position:absolute;
        width:13px;
        height:12px;
        right: -10px;
        background: url(./assets/icon/button_arrow_light.svg) no-repeat;
        background-position: center right;

    }

    &:hover {
        background:transparent !important;
        color: #FFF;
        text-decoration:underline;
        text-decoration-color:#479DC8;
        text-underline-offset: 8px;
        line-height:31px;
        text-decoration-thickness: 2px;

        &::after {
        
            background: url(./assets/icon/button_arrow_active.svg) no-repeat; 
        
        }
        

    }
}

.button.secondary.type-a {

    &::after {
    
        background: url(./assets/icon/button_arrow_light.svg) no-repeat;
    
    }

}

/** zip code search **/
.authorized-dealer__content__input-fields input,
.authorized-dealer__content__input-fields input:focus,
.filter-gallery-search form#searchformforgallery .input-group #search-filtr{ 
    border-radius: 42.15px;
    font-family: "futura-pt",sans-serif !important;
    font-weight:300;
    text-transform: uppercase;
}

/** FOOTER UPDATES **/

.footer .footer-logo img {
    height:auto;
}

/** FONT UPDATES **/
h1,h2,
.callout-block__content__ttl,
.product-slider__content__item__ttl,
.hero-container--inner h1,
.contact-button-title
{ font-family: "marlide-display-variable", sans-serif !important; font-weight:500; }

p, button, a.button,h3,h4,h5,h6,
a,
.footer .soc-block .ttl,
.breadcrumbs-block .breadcrumbs__current,
.callout-block-without-bg__content__ttl,
.callout-cols-block__content__ttl,
.full-content-only-text__content__ttl,
.full-content-icon-text__content__ttl,
.authorized-dealer__content__ttl,
.callout-block__content__ttl,
.slider-solutions-block__ttl,
.callout-block-without-bg__content__description p, .callout-block-without-bg__content__description li { font-family: "futura-pt",sans-serif !important; font-weight: 500; }

p {
    font-size:20px;
    font-weight:300;
    line-height:100%;

     @media screen and ( max-width:767px ) {
        font-size:18px;
    }
}

.columns-items-block__content__description p, .columns-items-block__content__description li {
    font-weight:300;
}

h1,h2,h3,h4,h5,h6 {
    line-height:105% !important;
}
h3,h4,h5,h6 {
    text-transform: uppercase;
}
h1 {
    font-size:84px !important;
    text-transform: capitalize;

    @media screen and ( max-width:767px ) {
        font-size:42px !important;
    }

}
h2 {
    font-size:42px !important;
    text-transform: capitalize;

    @media screen and ( max-width:767px ) {
        font-size:32px !important;
    }
}
h3 {
    font-size:16px !important;
    font-weight:500 !important;
    
}
h4 {
    font-weight:300 !important;
    font-size:16px !important;
}
h5 {
    font-weight:300 !important;
    font-size:18px !important;
}
h6 {

    font-weight:300 !important;
    font-size:20px !important;
}

p strong{
    font-weight:500;
}

#main_form input[type=submit] {
    padding:8px 32px;
    height:auto;
    background: transparent;
    border:3px solid #051D49;
    color:#051D49;
    border-radius:42.15px;
    font-family: "futura-pt",sans-serif !important; 
    text-transform: uppercase;
    font-size:20px;

    &:hover {
        color:#FFF;
        background:#479DC8;
        border:3px solid transparent;
    }
}

.header-menu.menu .menu-depth-1 .menu-item-depth-1 .menu-link,
.header-menu.menu .menu-depth-1 .menu-depth-2 .menu-item-depth-2 .menu-link {
    
    color: #051D49 !important;
    
    @media screen and ( max-width:1200px ) {
        font-size:14px !important;
    }

}

.header-menu.menu .menu-depth-1 .menu-item-depth-1:last-child a {
    color: #051D49 !important;
}

.header #main-menu #menu-header-menu .menu-item.mobile-menu-only {

    display:block !important;


    @media screen and ( min-width: 1024px ) {
        
        display:none !important; 
    
    }
}


@media print, screen and ( max-width: 1024px ) {
.top-bar#main-menu #menu-header-menu .menu-item-depth-0.menu-item-has-children .menu-depth-1 .menu-item-depth-1 .sub-menu-link {
        font-family: "futura-pt",sans-serif !important;
        padding:0 0 !important;
    }
}

.footer {
    background-color: #051D49;
}

@media screen and ( min-width: 64.0625em ) {
    .header-menu.menu .menu-depth-1.show-submenu {
        min-height:fit-content;
    }
}

/** ELEMENTOR UPDATES **/

.elementor-flip-box__layer__title {
    font-size: 36px !important;
}

.elementor-flip-box__layer__description {
    font-size:24px !important;
}

/* help widget toggle */
.help-widget__toggle,
.help-widget__icon {
    font-family: "marlide-display-variable",sans-serif !important;
    font-size: 45px;
    display:flex;
    justify-content: center;
    align-items:center;
    line-height: 100% !important;
    border-radius:50% !important;
}
.help-widget__toggle {
    padding: 0;
    position: fixed;
    display: block;
    right: 50px;
    bottom: 50px;
    width: 60px;
    height: 60px;
    margin-bottom: 10px;
    font-family: "Lato Bold";
    background: #ffffff;
    color: #051d49;
    font-size: 48px;
    line-height: 60px;
    border: 2px solid #051d49;
    border-radius: 50%;
    padding:0px !important;
    &:hover {
        background: #051d49;
    }
}
.help-widget__close {
    background:transparent !important;
    padding:0px !important;
}

/* help widget logo */
.help-widget__body img {

    max-width:200px;
}

.top-bar #main-menu #menu-header-menu {

    column-gap: 50px;

    @media screen and (min-width: 1025px) and (max-width: 1500px) {
        
        column-gap: 20px !important;
    
    }

}

.header #main-menu #menu-header-menu .menu-item:hover a {
    color:#051D49;
}

.header #main-menu #menu-header-menu .menu-item.menu-item-depth-0>a:hover {
    color: #fff;

    @media screen and ( max-width: 1024px ) {

        color: #051D49;
    }
}

.move-to-bottom-right a {
    position:relative;
    top:40px;
    left:40px;

    @media screen and ( max-width: 1024px ) {
        top:unset;
        left:unset;
    }
}
.header #main-menu #menu-header-menu .menu-item.move-to-bottom-right {
    @media screen and ( max-width: 1024px ) {
        padding-top:40px;
        padding-bottom:40px;
    }

    & > a {

        @media screen and ( max-width: 1024px ) {
            font-size:20px !important;
        }
    }

}