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

    /* ONZE SOKKEN */
    .row.sokken { left: -12.5%; width: 125%; background-position: center left 12.5%, bottom right 12.5%; }
    
}

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

    /* ONZE SOKKEN */
    .row.sokken { left: 0; width: 100%; background-position: center left, bottom right; }
    .row.sokken .page_content .column { width: calc(100% / 3); }
    .row.sokken .page_content .column.odd { display: none; }
    
}

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

    /* ONZE STEMMEN */
    .row.stemmen .stemmen-bg-pattern .pattern:first-of-type,
    .row.stemmen .stemmen-bg-pattern .pattern:last-of-type {
        display: block;
    }
        
}

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

    /* ONZE SOKKEN */
    .row.sokken { left: -12.5%; width: 125%; background-position: center left 12.5%, bottom right 12.5%; }
        
}

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

}

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

    #page-header {
        min-height: 600px;
    }

}

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

    /* body */
    body {
        font-size: 1em;
        /* #header-height */

    }

    html {
     
    }


    /* OVERALL TYPE & BUTTONS */
    h1 {
        font-size: 2.3em;
    }
    .btn {
        max-width: 100%;
        font-size: 1.6em;
    }
    body.__home .btn {
        /*font-size: 2.6em;*/
        font-size: 1.2em;
    }


    /* HEADER */
    #header,body.scroll #header {
        height: 130px;
    }
    #header #logo {
        /*width: 250px;*/
        width: 300px;
    }
    .nav-button#menu-button {
        top: 35%;
        right: 0px;
    }
    #menu ul {
        width: 85%;
    }
    #menu .socials {
        width: 85%;
    }
    #menu ul li {
        font-size: 2.3em;
    }


    /* PAGE-HEADER */
    #page-header {
        height: 100vh; /* fix for safari 100vh deny thing */
        background-image: url("../../images/headerfoto-sokkeltocht-mobile.jpg?v202108");
        background-position: center;
    }
    #page-header .page-header-content {
        top: 42%;
        width: 85%;
        height: 48%;
    }
    #page-header .btns { flex-direction: column; align-items: center; bottom: 110px; }
    #page-header .btns .btn { margin: 0; margin-bottom: 10px; }
    #page-header .btns .btn:last-of-type { margin-bottom: 0; }

    .page_content .btns { flex-direction: column; align-items: flex-start; margin-bottom: 40px; }
    .page_content .btns.small { margin-top: 0; }
    .page_content .btns .btn { margin: 0; margin-bottom: 10px; }
    .page_content .btns .btn:last-of-type { margin-bottom: 0; }
    
    .shop_paymentreturn div.column.ophalen { margin: 0 0 30px 0; }

    /* (LEDEN.)SUBMENU */
    #submenu {
        padding-top: 110px;
    }
    #submenu ul {
        max-width: 80%;
        justify-content: center;
    }
     #submenu ul li {
        padding: 5px 10px;
     }


     /* PATTERNS ENZO */
    #menu:after {
        background-size: auto 101px;
    }
    .row {
        background-size: 125% auto;
    }     
    .row.first {
        background-image: url(/images/backdrop_left.png);
        background-position: top left;
    }
    .row.first:before {
        top: -223px;
        pointer-events: none;
        background-size: auto 101px;
    }
    .row.first:after /* pijltje - scroll down klik gaat via #page-header dus daarom pointer events none */ {
        content: "";
        width: 100%;
        height: 75px;
        background: #e0d4d1;
        position: absolute;
        left: 0;
        top: -75px;
        background-image: url('/images/arrow_down.svg');
        background-size: 50px 50px;
        background-repeat: no-repeat;
        background-position: 50% 0;
        pointer-events: none;
    }
    .row.helden:before,
    .row.kraak:before,
    #footer:before {
        background-size: auto 38px;
    }
    #footer #footer-container .line.credit { flex-direction: column; }
    #footer #footer-container .line.credit span,
    #footer #footer-container .line.credit a { display: block; margin: 8px 0; }


    /* CONTENT */
    body.__home .row {
        padding: 60px 0;
        padding-top: 70px;     
    }
    body.__home .row.first {
        padding-top: 30px!important;
        padding-bottom: 90px;
    }
    
    body.shopcart .row.first,
    body.shoporder .row.first {
        padding: 105px 0;
        padding-top: 130px;
    }
    
    #page-header + .row,
    #submenu + .row {
        padding-top: 70px;
    }


    /* ONZE HELDEN */
    .row.helden { background-image: url('/images/backdrop_right.png'); background-position: top right; }
    
    .row.helden .page_content .mobile-info { display: block; }

    .row.helden .page_content .helden-container { left: 0; margin: 0 auto; width: 100%; }
    .row.helden .page_content .helden-container .held { margin: 0 auto; margin-bottom: 30px; padding-bottom: 0; width: 100%; height: auto; }
    .row.helden .page_content .helden-container .held:last-of-type { margin-bottom: 0; }
    
    .row.helden .page_content .helden-container .held .card { position: relative; margin: 0 auto; width: 85%; height: auto; transition: none; transform-style: flat; }
    .row.helden .page_content .helden-container .held .card .icon { display: none; }
    .row.helden .page_content .helden-container .held .card .card__face { position: relative; height: auto; backface-visibility: visible; }
    .row.helden .page_content .helden-container .held .card .card__face--back { display: none; }
    .row.helden .page_content .helden-container .held .card .banner { bottom: 8%; width: 92.25%; }
    .row.helden .page_content .helden-container .held .card .banner:before { left: -36px; }
    .row.helden .page_content .helden-container .held .card .banner:after { right: -36px; }
    .row.helden .page_content .helden-container .held .card.is-flipped { transform: none; }
    .row.helden .page_content .helden-container .held .card.is-flipped .banner { opacity: 1; visibility: visible; }
    
    .row.helden .page_content .helden-container .held .card .image { position: relative; }

    .row.helden .page_content .helden-container .held .held-content { display: block; margin-top: 30px; color: #3b4895; text-align: center; }
    .row.helden .page_content .helden-container .held .held-content strong { display: block; margin-bottom: 15px; font-size: 1.8em; line-height: .9; font-weight: 900; text-transform: uppercase; }


    /* ONZE STEMMEN */
    .row.stemmen .stemmen-bg-pattern .pattern { display: block!important; width: 300%; }
    
    .row.stemmen .stemmen-bg-pattern .background { background-image: url(/images/backdrop_left-orange.png); background-position: center left; background-size: 125% auto; }
    
    .row.stemmen .page_content .stemmen-container { left: 0; margin: 0 auto; width: 90%; }
    .row.stemmen .page_content .stemmen-container .stem { margin: 0; margin-bottom: 30px; padding-bottom: 0; width: 100%; height: auto; }
    .row.stemmen .page_content .stemmen-container .stem:last-of-type { margin-bottom: 0; }
    .row.stemmen .page_content .stemmen-container .stem .image { padding-bottom: 80%; width: 80%; }
    .row.stemmen .page_content .stemmen-container .stem .text strong { font-size: 1.8em; }

    
    /* ONZE SOKKEN */
    .row.sokken { left: 0; width: 100%; overflow: hidden; background-image: url('/images/backdrop_left-blue.png'); background-position: bottom 55% left; }
    .row.sokken .page_content .column { width: 100%; }
    .row.sokken .page_content .column.even { display: none; }
    .row.sokken .page_content .column.center .column-content img.sokken { margin-bottom: 0; }
    .row.sokken .page_content .column.center .column-content .text { width: 85%; }
    .row.sokken .page_content .column > img { transform: scaleX(-1); }

    
    /* KRAAK DE CODE */
    .row.kraak { padding-bottom: 120px!important; overflow: hidden; background-image: url(/images/backdrop_left.png); background-position: bottom 25% left; }
    .row.kraak .text-and-media { flex-direction: column; }
    .row.kraak .text-and-media .text,
    .row.kraak .text-and-media .media { width: 100%; }
    .row.kraak .text-and-media .media { margin: 0 auto; margin-top: 90px; padding-bottom: 80%; width: 80%; }
    .row.kraak .text-and-media .media .circle { top: -30%; right: -15%; width: 140px; height: 140px; font-size: 1.3em; /*text-shadow: 3px 3px 0 #ea633c;*/ }


    .content {
        display: flex;
        flex-direction: column;
        width: 85%;
        min-height: 0;
    }
    .content .page_content,
    .content .page_content.half,
    .content .page_content.hasmedia {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        order: 0;
        min-height: 0;
    }
    
    .content .page_content p,
    .content .page_content blockquote {
        margin-bottom: 20px;
    }
    
    .content .media {
        width: 100%;
        margin-top: 50px;
        order: 1;
    }
    .content .media a {
        margin-bottom: 20px;
    }
    .content .media a .icon, .fotoalbum a .icon, .news-overview .item a .image .icon, .productmedia a .icon, .product a .icon {
        display: block;
        width: 30px;
        height: 30px;
    }
    .content .media a .icon svg, .fotoalbum a .icon svg, .news-overview .item a .image .icon svg, .productmedia a .icon svg, .product a .icon svg {
        width: 30px;
        height: 30px;
    }


    /* FORMS */
    .content #contact form input[type=checkbox],
    .content #contact form input[type=radio] {
        transform: translateY(6px);
    }
    
    .content #contact form .field { margin-bottom: 10px; }
    .content #contact form .field.textfield.name,
    .content #contact form .field.textfield.email,
    .content #contact form .field.textfield.phone { flex-direction: column; }
    .content #contact form .field.textfield.name label,
    .content #contact form .field.textfield.email label,
    .content #contact form .field.textfield.phone label { margin-bottom: 5px; }
    .content #contact form .field label,
    .content #contact form .field input { width: 100%; }
    .content #contact form .field label.error { top: 20px; }
    
    .content #contact form .field.vakje { width: calc(100% / 2); }
    .content #contact form .field.vakje label { padding-left: 8%; width: 70%; }
    .content #contact form .field.vakje input { width: 30%; }
    
    .content #contact form .field.vakje label.error { top: 6px; right: -10px; padding: 10px 8px; font-size: 10px; z-index: 1; }
    .content #contact form .field.vakje label.error.checked { right: 12px; width: 22px; height: 22px; background-size: 10px 10px; }
    
    .content #contact form .field.header.vakjes h2 { margin-bottom: 15px; }
    .content #contact form .field.header.hint { width: 100%; border-top: none; border-bottom: none; }
    .content #contact form .field.textfield.tekst,
    .content #contact form .field.textfield.sokkel { width: 100%; border-top: none; border-bottom: none; }
    .content #contact form .field.textfield.tekst { padding: 0; }
    .content #contact form .field.textfield.sokkel { padding: 10px 0 15px 0; }
    .content #contact form .field.textfield.tekst label,
    .content #contact form .field.textfield.sokkel label { background-color: rgb(255 255 255 / 25%); }
    .content #contact form .field label.tekst.text,
    .content #contact form .field label.sokkel.text { justify-content: flex-start; margin-right: 2%; padding: 5px 0 5px 12px; width: 78%; border-radius: 3px; }
    .content #contact form .field input.tekst.text,
    .content #contact form .field input.sokkel.text { border-radius: 3px; }
    
    .content #contact form .btn.submit { margin-top: 30px; }


    /* KIEK */
    #kiek-close,#kiek-close:hover {
        top: 5%;
        right: 0;
        width: 100%;
        background-size: 16px 16px;
    }
    #kiek-close span.kiek-close {
        width: 100%;
    }
    div#kiek-left,div#kiek-right,div#kiek-left:hover,div#kiek-right:hover{
        background-position: 50% 95%;
        width: 50px;
        background-size: 16px 16px;
    }


}