/* CSS Document */
@media screen and (max-width: 1500px){
    
    body.over-mst .row.intro .page_content { gap: 60px; }
    body.over-mst .row.intro .left { width: 55%; }
    body.over-mst .row.intro .right { width: 45%; }

}
@media screen and (max-width: 1200px){
    
    #header-bottom-container #logo { width: 150px; height: 60px; }
    #header-bottom-container #logo a img { width: 130px; }
    
    #header-bottom-container #menu > ul > li:after { margin: 0 20px; }
    #header-bottom-container #menu > ul > li > a { font-size: 24px; }
    
    body.diensten .row.diensten .diensten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 45px; }

}
@media screen and (max-width: 800px){
    
    body.diensten .row.diensten .diensten { gap: 30px; }

}
@media screen and (max-width: 600px){
    
    body.diensten .row.diensten .diensten { display: flex; flex-direction: column; gap: 20px; }

}
    
@media screen and (max-width: 1000px){
    
    body { padding-top: 70px; font-size: 16px; }
    
    h1 { margin-bottom: 20px; font-size: 26px; }
    h2 { font-size: 21px; }

    #header-top { display: none; }
    
    #header-bottom { margin-top: 0!important; height: 70px; }
    
    #header-bottom-container { align-items: center; width: 85%; }
    #header-bottom-container #logo { top: 10px; width: 70px; height: 0; }
    body.scroll #header-bottom-container #logo { top: 10px; transform: scale(0.85); }
    #header-bottom-container #logo a img { width: 75px; }
    
    #header-bottom-container #menu-button { display: flex; }
    
    #header-bottom-container #menu { position: fixed; flex-direction: column; justify-content: center; top: 0; right: 0; width: 90%; height: 100%; transform: translateX(100%); transition: all ease 0.25s; background-color: var(--red); background-color: var(--black); }
    #header.active #header-bottom-container #menu { transform: translateX(0); }
    #header-bottom-container #menu > ul { flex-direction: column; align-items: center; height: auto; }
    #header-bottom-container #menu > ul > li { height: auto; }
    #header-bottom-container #menu > ul > li:after { content: none; }
    #header-bottom-container #menu > ul > li > a { padding: 5px 0; font-size: 24px; }
    #header-bottom-container #menu > ul > li.hassubs > a:after { content: none; }
    
    #header-bottom-container #menu > ul > li ul { display: none!important; }
    
    #header-bottom-container #menu > ul > li:hover > a,
    #header-bottom-container #menu > ul > li > a.active { color: var(--red); }
    
    #header-image { height: 180px; }
    body.homepage #header-image { height: 60vh; min-height: auto; }
    
    #header-image-content { width: 85%; }
    #header-image-content .center { margin-bottom: 40px; width: 100%; }
    body.homepage #header-image-content .center { margin-bottom: 45px; }
    #header-image-content .center h1 { font-size: 32px; }
    #header-image-content .center h1 span:nth-of-type(1) { font-size: 21px; }
    #header-image-content .center h1 span:nth-of-type(2) { font-size: 18px; line-height: 1.2; }
    

    /* CONTENT */

    .row .content { padding: 45px 0; width: 85%; }
    .row .content .page_content { flex-direction: column; font-size: 16px; line-height: 1.4; }

    .row.first .content { padding: 60px 0 45px 0; }
    body.homepage .row.first .content { padding: 45px 0; }
    .row.first.title .content { padding: 60px 0 45px 0; }
    .row.first.title .content .page_content { align-items: flex-start; font-size: 16px; line-height: 1.5; text-align: left; }
    .row.first.title .content .page_content h1 { margin-bottom: 20px; font-size: 26px; }
    
    .content .page_content .image .caption { padding: 9px 20px 11px 20px; font-size: 14px; }
    
    a.btn { margin-top: 10px; padding: 12px 30px 15px 30px; font-size: 16px; }
    a.btn.back { padding: 10px 28px 13px 28px; border: 2px solid #fff; background-color: transparent; }
        
    .content .media { gap: 20px; margin-left: 0; width: 100%; }
    
    .breadcrumbs ul li { font-size: 14px; }
    .breadcrumbs ul li:not(:last-of-type):after { margin: 0 8px; }
    .breadcrumbs ul li a img { width: 14px; height: 14px; }


    /* HOMEPAGE */

    .row.columns .columns { display: flex; flex-direction: column; margin-top: 0; }
    .row.columns .columns .column { padding: 25px 30px; padding-bottom: 30px; font-size: 16px; line-height: 1.4; }
    .row.columns .columns .column .top { margin-bottom: 12px; padding-bottom: 12px; text-align: left; }
    .row.columns .columns .column .top .title { font-size: 21px; }
    
    body.homepage .row.first .content .page_content { flex-direction: column; gap: 45px; }
    body.homepage .row.first .text,
    body.homepage .row.first .image { width: 100%; }
    body.homepage .row.first .image { padding-bottom: 75%; }
    
    body.homepage .row.usps .content { padding: 45px 0; }
    body.homepage .row.usps .columns { display: flex; flex-direction: column; gap: 30px; }
    body.homepage .row.usps .columns .column .icon { margin-bottom: 25px; width: 40px; height: 40px; }
    body.homepage .row.usps .columns .column h2 { font-size: 21px; }
    body.homepage .row.usps .columns .column p { margin: 0; }
    

    /* OVER MST */

    body.over-mst .row .content .page_content .left,
    body.over-mst .row .content .page_content .right { flex-direction: column; width: 100%; }
    
    body.over-mst .row.intro .content { padding: 45px 0; }
    body.over-mst .row.intro .page_content { gap: 30px; }
    body.over-mst .row.intro .left { gap: 30px; }
    body.over-mst .row.intro .left .image { padding-bottom: 130%; width: 100%; }
    
    body.over-mst .row.usps .content { padding: 45px 0; }
    body.over-mst .row.usps .columns { display: flex; flex-direction: column; gap: 30px; }
    body.over-mst .row.usps .columns .column .icon { margin-bottom: 25px; width: 40px; height: 40px; }
    
    body.over-mst .row.reviews .content { padding: 45px 0; }
    body.over-mst .row.reviews .reviews { display: flex; flex-direction: column; gap: 15px; margin: 30px 0; }
    body.over-mst .row.reviews .reviews .review { padding: 25px; padding-bottom: 30px; font-size: 16px; line-height: 1.4; }
    body.over-mst .row.reviews .reviews .review strong { font-size: 18px; }
    

    /* DIENSTEN */

    body.diensten .row.diensten .content { padding: 45px 0 60px 0; }
    body.diensten .row.diensten .diensten { }
    body.diensten .row.diensten .diensten .dienst .text { padding: 25px 30px 30px 30px; }
    body.diensten .row.diensten .diensten .dienst .text h2 { font-size: 21px; }
    body.diensten .row.diensten .diensten .dienst .text a.more { position: relative; bottom: 0; margin-top: 5px; }
        
    body.diensten .row .buttons { flex-direction: column; align-items: flex-start; margin-top: 30px; }
    body.diensten .row .buttons a { margin: 0; }

    /* DIENSTEN > subpagina's */
    
    body.diensten.dienst .row .content { flex-direction: column; gap: 45px; padding: 60px 0; }
    
    body.diensten.dienst .row.media .media { display: flex; flex-direction: column; gap: 30px; }
    
    body.diensten.dienst .row.media .images { display: flex; flex-direction: column; gap: 20px; }
    body.diensten.dienst .row.media .images h2 { font-size: 24px; }
    /*body.diensten.dienst .row.media .images .set { display: flex; flex-direction: column; gap: 20px; }*/
    body.diensten.dienst .row.media .images .set { display: flex; flex-direction: column; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    
    body.diensten.dienst.badkamers .row .content { padding: 60px 0 45px 0; }
    body.diensten.dienst.badkamers .row.media .content { padding: 45px 0 60px 0; }

    
    /* IMPRESSIE */
    
    body.impressie .images { display: flex; flex-direction: column; gap: 20px; }
    body.impressie .images h2 { font-size: 24px; }
    /*body.impressie .images .set { display: flex; flex-direction: column; gap: 20px; }*/
    body.impressie .images .set { display: flex; flex-direction: column; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    
    
    /* CONTACT */

    body.contact .row.first .content { padding: 45px 0; }
    
    body.contact .row .content .page_content { gap: 45px; }

    body.contact .row .left,
    body.contact .row .right { width: 100%; }
    
    body.contact .row form input.p25 { width: 50%; }
    body.contact .row form input.p50 { width: 75%; }
    body.contact .row form input.p75 { width: 100%; }
    
    body.contact .row.maps { padding-bottom: 60px; height: 320px; }
    body.contact .row.maps iframe { width: 85%; }
    
    /*.ifsendmessage { padding: 20px 25px 15px 25px; }*/
    .ifsendmessage span strong { margin-bottom: 2px; font-size: 17px!important; }
    
    
    /* ALGEMENE VOORWAARDEN */
    body.algvoorw span.knop { display: none; }
    body.algvoorw span.link { display: inline-block; }
    
    a.btn.algvoorw { margin: 0; padding: 0; color: var(--red); text-decoration: underline; border-radius: 0; background-color: transparent; }

    
    /* FOOTER */
    
    #footer-image { height: 120px; }
    #footer-image .center { margin-bottom: 5px; width: 85%; font-size: 24px; text-align: center; }
    #footer-image img { filter: blur(2px); }

    #footer-top-container { flex-direction: column; gap: 20px; padding: 45px 0; width: 85%; }
    #footer-top-container .column ul:first-of-type li:first-of-type { font-size: 21px; }
    
    #footer-top-container .column.socials { margin-left: 0; text-align: left; }
    #footer-top-container .column.socials .social { justify-content: flex-start; }
    #footer-top-container .column.socials .social .icon a { width: 36px; height: 36px; }
    #footer-top-container .column.socials .social .icon a svg { width: 16px; height: 16px; }
    
    #footer-bottom-container { flex-direction: column; gap: 30px; padding: 30px 0 60px 0; width: 85%; }
    #footer-bottom-container ul { flex-direction: column; gap: 10px; }
    #footer-bottom-container ul:first-of-type li:first-of-type { margin-bottom: 10px; }
    #footer-bottom-container ul:first-of-type li:not(:last-of-type):after { content: none; }
    
}