@import url('https://fonts.googleapis.com/css2?family=Lexend+Exa&display=swap');
@import url('https://fonts.cdnfonts.com/css/glacial-indifference-2');

.wrap {
    padding-top: 0 !important;
}

.header {
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(10%, #e8c7b6),
        color-stop(#bbd0d1),
        to(#9bdbdb)
    );
    background: linear-gradient(#e8c7b6 10%, #bbd0d1, #9bdbdb);
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    background-position: 100px;

    height: 600px;
}

.header .row, .welcome .welcome-row, .treat .treat-row {
    height: 100%;
}

.header .header-background {
    background: url('https://vivaya-uploads.s3.amazonaws.com/production/img/corporate/bertelsmann/header-background.png') no-repeat top+2rem center;
    background-size: contain;
}

.header p {
    color: #008cc1;
    font-weight: 100;
    font-size: 50px;
    margin: 1rem 0 2rem 0;
}

@media (min-width: 768px) {
    .header {
        height: 700px;
    }
}

@media (min-width: 992px) {
    .header .header-background {
        background-size: 96vw auto;
        background-position: top+2rem;
    }

    .header {
        height: 700px;
    }
}

@media (min-width: 1200px) {
    .header {
        height: 900px;
    }
}

@media (max-width: 576px) {
    .header {
        height: 450px;
    }

    .header p {
        font-size: 25px;
        font-weight: bold;
    }
}

.welcome {
    height: 1080px;
    padding-top: 5rem;
    position: relative;
    display: block;
}

.welcome .container {
    height: 100%;
    position: relative;
}

.welcome h2, .welcome h4 {
    display: block;
    color: #FFFFFF;
}

.welcome h2 {
    font-size: 70px;
}

.welcome h4 {
    font-family: 'Lexend Exa', sans-serif;
    font-size: 45px;
}

.welcome a {
    font-size: 15px !important;
    padding: 0.8rem 1.5rem !important;
}

.welcome a:hover {
    background-color: #FFFFFF !important;
}

.welcome .bottom {
    position: absolute;
    bottom: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.welcome #welcome-video {
    height: 100%;
    width: 100vw;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
    object-fit: fill;
}

@media (min-width: 768px) {
    .welcome a {
        font-size: 20px !important;
        padding: 1rem 2rem !important;
    }
}

@media (min-width: 992px) {
    .welcome a {
        font-size: 25px !important;
    }
}

@media (min-width: 576px) {
    .welcome a {
        font-size: 18px !important;
        padding: 0.5rem 1rem !important;
    }
}

@media (max-width: 576px) {
    .welcome {
        height: 540px !important;
    }

    .welcome .bottom {
        bottom: 45%;
    }

    .welcome a {
        font-size: 14px !important;
        padding: 0.5rem 1rem !important;
    }

    .welcome h2 {
        font-size: 52.5px;
    }
    
    .welcome h4 {
        font-size: 34px;
    }
}

.treat {
    background: -webkit-linear-gradient(135deg, #6287a3, #dd7365 90%);
    background: linear-gradient(135deg, #6287a3, #dd7365 90%);
    -webkit-transition: all 0.2s;
    transition: all 0.2s;

    min-height: 550px;
    padding: 4rem 1rem;
}

.treat .container-fluid {
    height: 100%;
    position: relative;
}

.treat h2, .treat h4, .treat p {
    display: block;
    color: #FFFFFF;
}

.treat h2 {
    font-family: 'Lexend Exa', sans-serif;
    font-size: 22px;
}

.treat h4 {
    font-family: 'Glacial Indifference', sans-serif;
    font-size: 39px;
    line-height: 2.25rem;
    margin-top: 3rem;
    margin-bottom: 2rem;
}

.treat h4, .treat p {
    margin-left: 5rem;
}

.treat .line {
    border-bottom: 0.3rem solid #FFFFFF; 
    display: block;
    line-height: 0.25rem;
    margin-top: 0.5rem;
}

@media (min-width: 992px) {
    .treat .line {
        border-bottom: 0.5rem solid #FFFFFF; 
        margin-top: 0.8rem;
    }

    .treat h2 {
        font-size: 40px;
    }

    .treat h4 {
        font-family: 'Lexend Exa', sans-serif;
        font-size: 49px;
        line-height: 4rem;
    }

    .treat p {
        font-size: 25px;
    }
}

@media (min-width: 1400px) {
    .treat .container-fluid {
        background: url('https://vivaya-uploads.s3.amazonaws.com/production/img/corporate/bertelsmann/treat-background.png') no-repeat center right+4rem;
        background-size: contain;
    }
}

.schedule {
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(10%, #FFFFFF),
        color-stop(#c5bbbf),
        to(#9ec7d9)
    );
    background: linear-gradient(#FFFFFF 10%, #c5bbbf, #9ec7d9);
    -webkit-transition: all 0.2s;
    transition: all 0.2s;

    position: relative;
    padding-top: 2rem;
    font-size: 14px;
}

.schedule h2 {
    font-size: 32px;
    margin-top: 0;
    margin-bottom: 3rem;
}

.schedule .teachers-image {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.schedule .teachers-image h4 {
    color: #666666;
    font-size: 30px;
    margin-bottom: 2rem;
    padding: 1rem 1rem 0 1rem;
}

.schedule .schedule-table {
    background: linear-gradient(69deg, rgba(143,193,215,0.5) 0%, rgba(235,104,81,0.1) 20%, rgba(255,255,255,0.5) 100%);
    border-radius: 0.25rem;
    margin: 2rem;
    padding: 2rem;
}

.schedule .schedule-table .schedule-time {
    color: #EB6851;
    font-weight: bold;
}

.schedule .schedule-table .schedule-title {
    color: #6287A3;
}

.schedule .schedule-table .schedule-class {
    margin: 0.5rem 0;
    min-height: 50px;
}

@media (max-width: 992px) {
    .schedule {
        background-repeat: no-repeat;
        background-size: 100% 38.5%;
    }
}

@media (max-width: 768px) {
    .schedule {
        background-size: 100% 47.5%;
    }
}

@media (max-width: 576px) {
    .schedule {
        background-size: 100% 44.5%;
        padding-top: 0;
    }
    .schedule .schedule-table .schedule-class, .schedule .schedule-table .schedule-title, .schedule .schedule-table .schedule-time {
        font-size: 15px;
    }

    .schedule .schedule-table {
        margin: 1.5rem 1rem 2rem 1rem;
        padding: 1rem 0;
    }

    .schedule h2 {
        margin-top: 0;
        margin-bottom: 2rem;
    }

    .schedule h4 {
        font-size: 24px !important;
    }

    .schedule .teachers-image {
        margin-top: 7rem;
    }
}

.features {
    background-color: #FFFFFF;
    background: url('https://vivaya-uploads.s3.amazonaws.com/production/img/corporate/bertelsmann/features-background.png') no-repeat top center;
    background-size: cover;
    padding-top: 5rem;
    padding-bottom: 2rem;
}

@media (min-width: 768px) {
    .features .second-features {
        margin-top: 5.25rem;
    }
}

.wellness-journey {
    background-color: #FFFFFF;
    background: url('https://vivaya-uploads.s3.amazonaws.com/production/img/corporate/bertelsmann/wellness-journey-background.png') no-repeat top center;
    background-size: cover;
    padding: 2rem 2rem 4rem 2rem;
    min-height: 550px;
}

.wellness-journey img {
    width: 90%;
}

.wellness-journey h2 {
    font-family: 'Lexend Exa', sans-serif;
    font-size: 50px;
    margin: 3rem 0;
}

@media (max-width: 576px) {
    .wellness-journey h2 {
        font-size: 42px;
    }
    .wellness-journey img {
        width: 100%;
    }
}

.purchases {
    background-color: #FFFFFF;
    padding: 2rem 2rem 8rem 2rem;
    min-height: 500px;
    position: relative;
}

.purchases .purchases-title {
    font-family: 'Lexend Exa', sans-serif;
    font-size: 50px;
    color: #FFFFFF;
    margin-top: 4rem;
}

.purchases #purchases-video {
    position: absolute;
    z-index: 0;
    object-fit: cover;
    width:100%;
    height:100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.purchases h2 {
    font-size: 44px;
    margin: 4rem 0 6rem 0;
    display: inline-block;
    background-color: #008cc1;
    border-radius: 5px;
    color: #FFFFFF;
    padding: 2rem;
}

.purchases small {
    margin-top: 0.4rem;
    font-size: 12px;
    float:right;
}

.purchases .logoVivaya {
    margin-top: 3rem;
}

.purchases h2, .purchases small {
    color: #FFFFFF;
    font-family: 'Lexend Exa', sans-serif;
}

.purchases a:hover {
    background-color: #FFFFFF !important;
}

.purchases a {
    font-size: 15px !important;
    padding: 0.8rem 1.5rem !important;
    margin-bottom: 5rem;
}

@media (max-width: 576px) {
    .purchases h2 {
        font-size: 28px;
    }

    .purchases small {
        font-size: 9px;
    }

    .purchases .purchases-title {
        font-size: 34px;
    }
}

@media (min-width: 768px) {
    .purchases a {
        font-size: 20px !important;
        padding: 1rem 2rem !important;
    }
}

@media (min-width: 992px) {
    .purchases a {
        font-size: 25px !important;
    }
}

.membership-includes {
    background: url('https://vivaya-uploads.s3.amazonaws.com/production/img/corporate/bertelsmann/membership-includes-background.jpg') no-repeat bottom center;
    background-size: cover;
    min-height: 600px;
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.membership-includes h2 {
    display: block;
    color: #FFFFFF;
    font-size: 45px;
    margin-bottom: 3rem;
}

.membership-includes p {
    color: #FFFFFF;
    font-family: 'Glacial Indifference', sans-serif;
    font-size: 25px;
}

.membership-includes .membership-includes-item {
    font-size: 28px;
    line-height: 1.5rem;
    margin: 1.5rem 0 0 0;
    min-height: 3rem;
}

@media (max-width: 768px) {
    .membership-includes p:not(.membership-includes-item) {
        margin-bottom: 3rem;
    }

    .membership-includes .membership-includes-item {
        font-size: 22px;
        line-height: 1.3rem;
        margin: 1.5rem 0 1rem 0;
        min-height: 0;
    }
}

.sign-up-message {
    background: -webkit-linear-gradient(135deg, #dd7365, #6287a3 120%);
    background: linear-gradient(135deg, #dd7365, #6287a3 120%);
    -webkit-transition: all 0.2s;
    transition: all 0.2s;

    padding: 2rem;
    position: relative;
}

.sign-up-message h2, .sign-up-message p {
    display: block;
    color: #FFFFFF;
}

.sign-up-message h2 {
    margin-top: 5.5rem;
    font-size: 50px;
}

.sign-up-message p {
    margin-bottom: 5rem;
    margin-top: 2rem;
    font-size: 28px;
}

.sign-up-message a:hover {
    background-color: #FFFFFF !important;
}

.sign-up-message .vertical-line {
    border-left: 2px solid #FFFFFF;
    height: 5rem;
    position: absolute;
    left: 50%;
    top: 4.5rem;
}

.sign-up-message a {
    font-size: 15px !important;
    padding: 0.8rem 1.5rem !important;
}

@media (max-width: 768px) {
    .sign-up-message .vertical-line {
        border-left: 2px solid #FFFFFF;
        height: 5rem;
        position: absolute;
        left: 50%;
        top: 3.2rem;
    }
}

@media (min-width: 768px) {
    .sign-up-message a {
        font-size: 20px !important;
        padding: 1rem 2rem !important;
    }
}

@media (min-width: 992px) {
    .sign-up-message a {
        font-size: 25px !important;
    }
}

.press-logo {
    padding: 1.5rem !important;
}

.testimonials {
    background: -webkit-linear-gradient(135deg, #6287a3, #dd7365 90%);
    background: linear-gradient(135deg, #6287a3, #dd7365 90%);
    -webkit-transition: all 0.2s;
    transition: all 0.2s;

    padding: 2rem 1rem 4rem 1rem;
}

.testimonials h2 {
    display: block;
    color: #FFFFFF;
}

.testimonials h2 {
    font-size: 60px;
}

.testimonials .testimonial {
    position: relative;
    margin-top: 2rem;
}

.testimonials .testimonial p {
    color: #666666;
    font-size: 24px;
    margin: 0;
    padding: 2rem 1rem 1rem 1rem;
}

.testimonials .testimonial .name {
    transform: translate(-50%, 0);
    left: 50%;
    bottom: -5rem;
    position: absolute;
}

.testimonials .testimonial .box {
    background-color: #FFFFFF;
    height: 100%;
    padding: 1.5rem 1rem 6rem 1rem;
}

.testimonials .testimonial .box .stars {
    color: #EB6851;
    display: block;
    font-size: 40px;
    padding-top: 1rem;
}

.footer {
    background-color: #FFFFFF !important;
}

@media (max-width: 992px) {
    .press-logo {
        position: relative;
        padding: 0 !important;
    }
    
    .press-logo h2 {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 35%);
    }
    
    .press-logo .logos {
        position: relative;
        width: 100%;
        height: 100%;
    }
    
    .press-logo .logos .slick-list {
        padding-bottom: 4rem;
        padding-top: 4rem;
    }
    
    .press-logo .slick-dots {
        bottom: 2rem;
    }
    
    .press-logo .slick-dotted.slick-slider {
        margin: 0;
    }
}