/* ===========================================================
   MARCO VISSER OFFICIAL WEBSITE
   RESPONSIVE
   Homepage v1.0
=========================================================== */


/* ===========================================================
   LARGE DESKTOP
   <= 1200px
=========================================================== */

@media (max-width:1200px){

    /* HERO */

    .hero{
        padding-top:120px;
        padding-bottom:80px;
    }

    .hero h1{
        font-size:58px;
    }

    .hero h2{
        font-size:28px;
    }

    .hero p{
        font-size:18px;
    }


    /* HERO BOEKEN */

    .hero-book{
        width:190px;
    }

}


/* ===========================================================
   TABLET / SMALL DESKTOP
   <= 992px
=========================================================== */

@media (max-width:992px){

    /* ALGEMEEN */

    section{
        padding:90px 0;
    }


    /* NAVBAR */

    .navbar{
        padding:15px 0;
    }

    .navbar-brand{
        font-size:26px;
    }

    .navbar-collapse{
        margin-top:15px;

        padding:20px;

        background:#111;

        border:1px solid rgba(255,255,255,.06);

        border-radius:12px;

        box-shadow:
            0 20px 40px rgba(0,0,0,.30);
    }

    .nav-link{
        margin:8px 0;

        padding:10px 5px !important;
    }

    .nav-link::after{
        display:none;
    }


    /* HERO */

    .hero{
        min-height:auto;

        padding-top:130px;
        padding-bottom:90px;

        text-align:center;
    }

    .hero .row{
        min-height:auto !important;
    }

    .hero h1{
        margin-top:0;

        font-size:52px;
    }

    .hero h2{
        font-size:26px;
    }

    .hero p{
        margin-right:auto;
        margin-left:auto;
    }


    /* HERO BUTTONS */

    .hero-buttons{
        justify-content:center;
    }


    /* HERO BOEKEN */

    .hero-books{
        order:2;

        margin-top:60px;

        gap:25px;
    }

    .hero-book{
        width:180px;
    }


    /* OVER MARCO */

    .author-image{
        max-width:600px;

        margin:0 auto 40px;
    }

    .about-section .section-title{
        text-align:center !important;
    }

    .about-section .subtitle{
        display:block;

        text-align:center;
    }

    .about-section .lead-text{
        text-align:center;
    }

    .author-highlights{
        justify-content:center;
    }

    .highlight{
        min-width:180px;
    }


    /* NIEUWS */

    .news-content h3{
        font-size:24px;
    }


    /* TIJDLIJN */

    .timeline{
        margin-top:60px;
    }

    .timeline::before{
        left:25px;
    }

    .timeline-item{
        left:0 !important;

        width:100%;

        padding-right:20px;
        padding-left:70px;

        text-align:left !important;
    }

    .timeline-item::after{
        right:auto !important;
        left:16px !important;
    }


    /* REVIEWS */

    .reviews-header{
        margin-bottom:45px;
    }

    .review-card{
        min-height:330px;

        padding:32px;
    }


    /* FOOTER */

    .footer{
        padding-top:70px;
    }

    .footer-description{
        max-width:450px;
    }

}


/* ===========================================================
   MOBILE / TABLET PORTRAIT
   <= 768px
=========================================================== */

@media (max-width:768px){

    /* ALGEMEEN */

    section{
        padding:75px 0;
    }

    .section-title{
        font-size:38px;
    }

    .section-intro{
        font-size:16px;
    }

    .subtitle{
        font-size:12px;

        letter-spacing:3px;
    }


    /* HERO */

    .hero{
        padding-top:110px;
        padding-bottom:70px;
    }

    .hero h1{
        font-size:42px;
    }

    .hero h2{
        font-size:22px;
    }

    .hero p{
        font-size:17px;

        line-height:1.8;
    }


    /* HERO BOEKEN */

    .hero-books{
        gap:20px;

        margin-top:50px;
    }

    .hero-book{
        width:155px;
    }


    /* BUTTONS */

    .hero-buttons{
        flex-direction:column;

        align-items:stretch;

        max-width:380px;

        margin:0 auto;
    }

    .hero-buttons .btn{
        width:100%;

        margin:0 !important;
    }


    /* OVER MARCO */

    .lead-text{
        font-size:20px;
    }

    .about-section p{
        font-size:16px;
    }

    .highlight h3{
        font-size:32px;
    }


    /* CTA + NIEUWSBRIEF */

    .cta-section{
        padding:80px 0;
    }

    .cta-box{
        padding:55px 30px;
    }

    .cta-box h2{
        font-size:36px;
    }

    .cta-lead{
        font-size:16px;
    }

    .newsletter-benefits{
        gap:12px 20px;
    }

    .newsletter-field{
        flex-direction:column;

        padding:10px;

        border-radius:18px;
    }

    .newsletter-field input{
        min-height:55px;

        text-align:center;
    }

    .newsletter-field .btn{
        width:100%;
    }


    /* FOOTER */

    .footer{
        padding:60px 0 25px;
    }

    .footer-bottom{
        flex-direction:column;

        align-items:flex-start;
    }

    .footer-legal{
        flex-wrap:wrap;

        gap:15px 22px;
    }

}


/* ===========================================================
   SMALL MOBILE
   <= 576px
=========================================================== */

@media (max-width:576px){

    /* ALGEMEEN */

    section{
        padding:65px 0;
    }

    .section-title{
        font-size:30px;
    }


    /* NAVBAR */

    .navbar-brand{
        font-size:22px;

        letter-spacing:2px;
    }


    /* HERO */

    .hero h1{
        font-size:34px;
    }

    .hero h2{
        font-size:19px;
    }

    .hero p{
        font-size:16px;
    }


    /* HERO BOEKEN */

    .hero-books{
        gap:14px;

        flex-wrap:nowrap;
    }

    .hero-book{
        width:135px;
    }


    /* BOEKEN */

    .book-image{
        min-height:400px;

        padding:30px 20px;
    }

    .book-image img{
        max-width:270px;
    }

    .book-content{
        padding:28px 24px;
    }


    /* NIEUWS */

    .news-card img{
        height:200px;
    }

    .news-content{
        padding:24px;
    }

    .news-content h3{
        font-size:22px;
    }


    /* TIJDLIJN */

    .timeline{
        margin-top:45px;
    }

    .timeline-item{
        padding-right:0;
        padding-left:55px;
    }

    .timeline::before{
        left:15px;

        width:3px;
    }

    .timeline-item::after{
        left:7px !important;

        width:16px;
        height:16px;
    }

    .timeline-content{
        padding:24px 20px;
    }


    /* REVIEWS */

    .review-card{
        min-height:auto;

        padding:28px 24px;
    }

    .review-card blockquote p{
        font-size:16px;
    }

    .review-stars{
        font-size:19px;

        letter-spacing:4px;
    }

    .reviews-action{
        margin-top:45px;
    }


    /* CTA */

    .cta-box{
        padding:45px 20px;
    }

    .cta-box h2{
        font-size:30px;
    }

    .newsletter-benefits{
        flex-direction:column;

        gap:8px;
    }

    .newsletter-consent{
        justify-content:flex-start;

        text-align:left;
    }


    /* FOOTER */

    .footer-brand{
        font-size:22px;
    }

    .footer-divider{
        margin:45px 0 25px;
    }

}


/* ===========================================================
   EXTRA SMALL MOBILE
   <= 400px
=========================================================== */

@media (max-width:400px){

    /* NAVBAR */

    .navbar-brand{
        font-size:19px;

        letter-spacing:1.5px;
    }


    /* HERO */

    .hero{
        padding-top:100px;
    }

    .hero h1{
        font-size:30px;
    }

    .hero h2{
        font-size:17px;
    }

    .hero p{
        font-size:15px;
    }


    /* HERO BOEKEN */

    .hero-books{
        gap:10px;
    }

    .hero-book{
        width:120px;
    }


    /* BUTTONS */

    .btn{
        padding:13px 24px;

        font-size:15px;
    }


    /* BOEKEN */

    .book-image{
        min-height:350px;
    }

    .book-image img{
        max-width:230px;
    }


    /* CTA */

    .cta-box{
        padding:40px 16px;
    }

    .cta-box h2{
        font-size:27px;
    }


    /* FOOTER */

    .footer-legal{
        gap:12px 18px;
    }

}