/* Homepage
--------------------------------------------------------------------------------------- */

/* .section-list-wrap li { border-color: #fff; } */
/* .giving-form_wrapper { background-color: #fff; padding: 40px 25px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;} */


.home .page-hero .center-v { top: auto; left: 50%; bottom: 120px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); }
.home .page-hero .hero-content { width: 88% !important; padding: 0 !important; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
.home .page-hero .hero-content  h2 { width: 65%; margin-bottom: 40px;}

.badge-wrap { position: relative; }
.badge-logo { max-width: 150px; top: -75px;}
.badge-wrap .overlay { background-color: rgba(0,0,0,.8);}

#Offer {
    overflow: visible;
}

#Offer .section {
    padding-top: 0 !important;
    margin-top: -220px;
    background: transparent;
    position: relative;
    z-index: 3;
}

#Offer:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 220px; /* same as your negative margin */
    background: #192a1b; /* your real Offer background color */
    z-index: 1;
}

#Club .section .headline { font-size: 15em;}

.circle-number {line-height: 75px;}
#How .steps-sec-color .circle-number { color:  #fdfaf7 !important; }
#How .panel .titles { text-transform: none !important; font-size: 2.6em !important; line-height: 1.3em !important;}

.popup-menu ul li {font-size: 3.6vw;}

.titles-lowercase .panel .titles,
.titles-lowercase .question .titles { text-transform: none !important; }

.home .header .logo {
    opacity: 0;
    transition: opacity 0.35s ease-in-out;
}

.home .header.header-display .logo {
    opacity: 1;
}

.header { background:transparent;}

.hero-logo-absolute { width: 200px !important; position: absolute !important; top: 40px; z-index: 4; }

.popup-menu { width: 220px; }

.popup-menu .small-titles { font-size: 16px !important;}
.popup-menu ul li { border-bottom: 1px solid #fff; text-align: left; font-size: 1.8em !important; line-height: 1.3em; }
.popup-menu ul li a { padding: 14px 0; display: block; font-weight: 400 !important;}
.popup-menu ul li a:hover { color: #BAA87C !important; text-decoration: none !important; }

.popup-menu a.btn-close { width: 44px; height: 44px; position: absolute; top: 18px; right: 18px; z-index: 999;}

/* Hidden by default, slid fully left */
.popup-menu {
    transform: translateX(-100%);
transition: transform 0.55s ease;
    opacity: 0;
    pointer-events: none;
}

/* When active, slide into view */
.popup-menu.active {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

/* Secondary Pages
--------------------------------------------------------------------------------------- */



/* Media Queries
--------------------------------------------------------------------------------------- */


/* Desktops and laptops ----------- */

@media only screen
and (max-height : 1440px) {


}

@media only screen
and (max-height : 1100px) {


}

@media only screen
and (max-height : 900px) {


}

@media only screen
and (max-height : 800px) {


}

@media only screen
and (max-height: 540px) {


}


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


}


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


}


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


}



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


}

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

}


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


}

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


}


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


}



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


}

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


}

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


}

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


}

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


}

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


}


/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {


}

@media screen and (min-width:320px) and (max-width:780px) and (orientation:landscape) {


}

@media only screen
and (max-width : 501px) and (orientation:portrait)  {
	

}

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {

    .hero-logo-absolute { width: 120px !important; top: 28px; }
    .home .page-hero .buttons-center { position: relative; bottom: 0; right: 0; width: 100%;}
    .home .page-hero .center-v { bottom:40px; }

    #Offer {
        overflow: visible; /* or auto if you prefer */
    }

    #Offer .section {
        padding-top: 0 !important;
        margin-top: 0 !important;
        background: transparent !important;
        position: relative;
        z-index: auto;
    }

    #Offer:before {
        content: none !important;
        display: none !important;
    }

    #Intro .titles.marg-b-40 { margin-bottom: 24px !important;}

    #section-7 .section { padding-top: 85px !important;}
    #How .section { padding-bottom: 60px !important;}
    .badge-logo {max-width: 80px;top: -40px;}
    .circle-number {line-height: 45px;}

    .popup-menu ul li {font-size: 4.4vw;}

    .popup-menu { width: 88%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}

    .popup-menu .small-titles { font-size: 13px !important;}

    a.button {
        width: auto !important;
        float: left !important;
        text-align: left !important;
        padding: 14px 22px !important; /* adjust if needed */
    }
	.buttons-center-active .buttons-center a.button { margin-left: .5% !important; margin-right: .5% !important; float: none !important;}


    #Club .panel-content-wrap .ta-center,
    #Offer .panel-content-wrap .ta-center { text-align: left !important;}

}