/* 
###
BACKSTAGE 5.1 CSS > RESPONSIVE GENERAL
###
*/

@media screen and (max-height: 800px) {
    
    #header-video,
    #header-columns,
    .row.image .image,
    .row.products .products .product,
    #map_canvas {
        height: calc(100vh - 200px);
    }

}
@media screen and (max-width: 1800px) and (min-width: 1100px) {

    #header-video #video { width: 90%; }
    .row.products .content { width: 90%; }
    #header-columns #columns { width: 90%; }
    
    body.userforms .content { width: 90%; }
    
}
@media screen and (max-width: 1400px) and (min-width: 1100px) {

    ul#menu { column-gap: 15px; }
    ul#menu li a.master { font-size: 21px; }
    
}
@media screen and (max-width: 1200px) and (min-width: 1100px) {

    body.userforms .content .form { padding: 60px; }
    body.userforms .content .page_content { padding: 60px; padding-left: 0; }
    
}
@media screen and (max-width: 1100px) {

    /* body */
    body {
        font-size: 1em;
        padding-top: 70px; /* #header-height */
    }
    body:after {
        height: 70px;
    }

    /* OVERALL TYPE & BUTTONS */
    h1 {
        margin-bottom: 20px;
        font-size: 32px;
    }
    h2 {
        font-size: 24px;
    }
    h3 {
        font-size: 1.3em;
    }
    .btn {
        padding: 15px 20px;
        font-size: 1em;
    }

    /* HEADER */
    #header,
    body.scroll #header {
        height: 70px;
    }
    
    #header #search-button-mobile.nav-button {
        display: block;
    }
    ul.search #search-button-desktop.nav-button {
        display: none!important;
    }
    
    #header #logo,
    body.scroll #header  #logo {
        width: 74px;
        height: 50px;
        margin-bottom: 10px;
    }
    body.scroll #header #logo img {
        margin-top: 0;
    }
    .nav-button {
        width: 24px;
        height: 24px;
    }
    .nav-button#menu-button {
        display: flex;
    }
    .nav-button#cart-button {
        right: 70px;
    }
    .nav-button#search-button-mobile {
        right: 60px;
    }
    
    #langmenu {
        left: 20px;
        top: auto;
        bottom: -20px;
    }
    #langmenu a {
        width: 20px;
        height: 20px;
        margin-right: 10px;
    }
    #menu-holder {
        position: fixed;
        left: 0;
        top: 0;
        width: auto;
        height: 100%;
        z-index: 3;
        background: var(--main);
        transform: translateX(-100%);
        transition: transform 600ms cubic-bezier(0.76, 0, 0.24, 1);    
        box-sizing: border-box;    
        padding: 30px 45px 30px 30px;
        align-items: flex-start; 
        justify-content: center;
        column-gap: 30px;
        font-size: 1.2em; 
        overflow-y: auto;   
    }
    #menu-holder.active {
        transform: translateX(0%);
    }    
    ul#menu {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        right: auto;
        z-index: 3;
        line-height: 1;
        order:  0;
        column-gap: 0px;
        row-gap:  10px;
    }
    ul#menu li.hassub ul.sub,
    ul#menu li.hassub:hover ul.sub {
        position: relative;
        transform: none;
        bottom: auto;
        left: auto;
        background: transparent;
        visibility: visible;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    ul#menu li#cart-button {
        display: block;
        margin-top: 10px;
        margin-left: 0;
    }
    ul#menu li#cart-button a {
        display: flex;
    }
    ul#menu li {
        margin-left: 0;
    }
    ul#menu li.webshop {
        display: block;
        top: 5px;
    }
    ul#menu li.webshop a {
        color: var(--primarycta);
    }
    ul#menu li a {
        display: block;
        white-space: nowrap;
    }
    ul#menu li a.master {
        padding: 2px 5px;
        padding-left: 0;
    }
    ul#menu-second {
        flex-direction: column;
        align-items: flex-start;
        position: static;
        top: auto;
        right: auto;
        order:  1;
        margin-top: 30px;
        padding:0;
        background: none;
    }
    ul#menu-second.webshop {
        display: none;
    }
    ul#menu-second li a {
        padding:  0;
    }
    ul#menu-second li#cart-button a {
        padding:  5px 15px;
    }
    ul#menu-second li#cart-button {
        margin-left: 0;
    }
    ul#menu-second li#cart-button {
        margin-top: 30px;
    }
    body.scroll ul#menu-second {
        transform: none;
    }
    
    ul#menu + span { column-gap: 0; }
    
    /* PAGE-HEADER */
    #page-header {
        
    }

    .extra-logo {
        display: block;
        margin-bottom: 30px;
    }
    .extra-logo img {
        display: block;
        width: 120px;
    }

    /* CONTENT */
    .row {
        padding: 45px 0;
    }    
    .content {
        display: flex;
        flex-direction: column;
        column-gap:  0px;
        row-gap:  30px;
        width: 85%;
    }
    
    body.__electric .row.first .content,
    body.__roll_up .row.first .content,
    body.__motoren .row.first .content,
    body.__accessoires-en-onderhoud .row.first .content,
    body.__lifestyle .row.first .content,
    body.__watersport .row.first .content,
    body.__dock-marine .row.first .content {
        text-align: left;
    }
    
    .content .page_content,
    .content .page_content.hasmedia {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        order: 0;
        min-height: 0;
    }
    body.homepage .row.first .content .page_content {
        column-count: auto;
    }
    .content .page_content table {
        display: block;
        border: none;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    body.__electric .row.more .content .page_content,
    body.__roll_up .row.more .content .page_content,
    body.__motoren .row.more .content .page_content {
        padding: 0;
        background-color: transparent;
    }
    
    .row.more h2:first-of-type,
    .row.text h2:first-of-type,
    .row.specs .content .page_content h2 {
        margin-bottom: 15px;
        font-size: 32px;
    }
    .row.specs .content .page_content h2 {
        margin-bottom: 30px;
    }
    .row.specs .content .page_content h2:after {
        display: block;
        margin-top: 15px;
        content: "Swipe om meer te zien";
        font-family: 'Chivo', sans-serif;
        font-size: 16px;
        font-weight: 400;
        font-style: italic;
        opacity: 0.5;
    }
    
    .content .page_content blockquote {
        padding: 25px 25px;
        font-size: 15px;
        line-height: 1.5;
    }
    
    .row.specs .content .page_content table {
        font-size: 16px;
    }
    .row.specs .content .page_content table tr td {
        padding: 8px 20px;
    }
    .row.specs .content .page_content table tr td:first-of-type {
        padding-left: 0;
    }
    .row.specs + .row.specs {
        margin-top: -5px;
    }
    
    body.userforms .content .page_content table { width: 100%; }
    body.userforms .content .page_content table tr td { width: 50%; }

        
    .content .links { margin-top: 30px; padding: 25px 25px 30px 25px; }
    .content .links h3 { margin-bottom: 15px; font-size: 21px; }

    
    .content .media {
        width: 100%;
        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;
    }
    
    body.over .content .page_content { width: 100%; line-height: 1.7; }
    body.over .content .page_content h2 { margin-bottom: 20px; font-size: 19px; font-weight: 500; line-height: 1.5; }
    body.over .content .media { width: 100%; }
    body.over .content .media a { margin-bottom: 30px; }

    /* elements */
    .elements {
        margin-left: 0;
        margin-top: 45px;
        width: 100%;
    }
    .elements .element {
        margin-bottom: 15px;
        width: 100%;
    }
    .elements .element:last-of-type {
        margin-bottom: 0;
    }
    
    .owl-carousel .owl-nav button.owl-next,
    .owl-carousel .owl-nav button.owl-prev { width: 40px!important; height: 40px!important; background-size: 15px!important; }
    
    .elements .element .text {
        padding: 30px 30px 40px 30px;
        font-size: 16px;
    }
    .elements .element .text .naam h2 {
        margin-bottom: 15px;
        font-size: 24px;
    }

    .elements .element:nth-of-type(odd) {
        color: #fff;
        background-color: #182d36;
    }
    .elements .element:nth-of-type(even) {
        color: #182d36;
        background-color: #ccbca0;
    }
    .elements .element:nth-of-type(odd) h2,
    .elements .element:nth-of-type(odd) a {
        color: #fff;
    }
    .elements .element:nth-of-type(even) h2,
    .elements .element:nth-of-type(even) a {
        color: #182d36;
    }
    
    /* BREADCRUMBS */
    .content .page_content .breadcrumbs { margin-top: -15px; margin-bottom: 25px; height: auto; font-size: 14px; }
    .content .page_content .breadcrumbs ul li:not(:last-child):after {  margin: 0 10px; }
    
    /* VIDEO HEADER HIGHFIELD BOATS */
    #header-video #video { width: 100%; }
    body.__electric #header-video #video video { transform: scale(1); }
    body.__roll_up #header-video #video video { transform: scale(1.5); }
    #header-video #video .watch_btn { top: 18px; right: 18px; width: 35px; height: 35px; }
    #header-video #video .center .title { font-size: 40px; }
    #header-video #video .down { bottom: 30px; width: 30px; height: 30px; }
    
    body.__electric #header-video #video .center { padding: 0 1em; }
    
    .row.prijzen a.button { padding: 20px 25px; font-size: 18px; border-radius: 6px; }
    .row.prijzen a.button svg { width: 20px; height: 20px; }
    
    .model-overview { flex-direction: column; left: 0; width: 100%; }
    .model-overview .model { margin: 0; margin-bottom: 10px; width: 100%; }
    .model-overview .model.electric { padding: 10px 0; border: 4px solid rgb(247 239 228 / 75%); background-color: #00060c; }
    .model-overview .model:last-of-type { margin-bottom: 0; }
    
    body.__modellen .row.first .content .page_content .left { width: 100%; }
    body.__modellen .row.first .content .page_content .model-overview { position: relative; margin-top: 30px; margin-bottom: 35px; width: 100%; }
    .model-overview .model .image { width: 75px; height: 75px; }
    .model-overview .model .info { justify-content: flex-start; padding: 0 5%; width: calc(100% - 75px); line-height: 1; }
    .model-overview .model .info .title { margin-top: 0; margin-bottom: -15px; width: 100%; font-size: 18px; }
    .model-overview .model .info .length,
    .model-overview .model .info .capacity { margin-top: -15px; width: auto; font-size: 16px; }
    .model-overview .model .info .length { margin-right: 10px; }
    .model-overview .model .info svg { width: 21px; height: 21px; }
    
    .link-rows .link-row a { padding: 18px 0; font-size: 21px; }
    .link-rows .link-row a svg { width: 18px; height: 18px; }
    
    .models + .models { margin-top: 50px; }
    .models h2 { margin-bottom: 30px; font-size: 28px; }
    .models .item { margin-bottom: 20px; }
    .models .item.sheet { flex-direction: column; margin-bottom: 15px; }
    .models .item.sheet:before { font-size: 14px; }
    .models .item.sheet .image { padding: 30px; width: 100%; border: none; border-bottom: 4px solid #f7efe4; }
    .models .item.sheet .title { padding: 15px 15px; width: 100%; font-size: 18px; font-weight: 700; line-height: 1; text-align: center; box-sizing: border-box; }
    .models .item.sheet svg { top: 15px; right: 15px; width: 16px; height: 16px; padding: 10px; fill: #fff; border-radius: 5px; background-color: #182d36; }
        
    .models .item.colors { margin-top: 20px; }
        
    #header-columns { height: auto; }
    #header-columns .down { display: none; }
    #header-columns #columns { flex-direction: column; width: 100%; }
    #header-columns #columns .column.intro { order: 2; padding: 30px 7.5% 50px 7.5%; width: 100%; }
    #header-columns #columns .column-wrapper { order: 1; width: 100%; height: calc(50vh - 70px); }
    
    .row.products .content { width: 100%; }
    .row.products .products .product { flex-direction: column; margin-bottom: 30px; height: auto; }
    .row.products .products .product .left { position: relative; order: 2!important; padding: 30px 7.5% 45px 7.5%; width: 100%; height: auto; overflow-y: initial; }
    .row.products .products .product .left .naam h2 { margin-bottom: 20px; font-size: 24px; }
    .row.products .products .product .right { order: 1!important; width: 100%; }

    
    .owl-carousel .owl-dots { padding: 30px 0!important; }
    .owl-carousel .owl-dots .owl-dot { margin: 0 6px!important; }
        
    body.__motoren .row.first,
    body.__dock-marine .row.first { padding: 45px 0 45px 0; }

    body.__accessoires-en-onderhoud h1,
    body.__lifestyle h1,
    body.__watersport h1 { font-size: 40px; line-height: 1; }
    
    body.__dock-marine .page_content p .btn { margin-top: 15px; }
    body.__dock-marine .page_content p .btn em { display: none; }
    body.__dock-marine .page_content p .btn strong { text-transform: uppercase; }

    .row.media .content .page_content .media a { width: calc(100% / 2); }

    
    /* submenu on page */
    #submenu {
        width: 100%; max-width: 100%; min-width: 100%; 
        margin:  0;
        position: relative; top: auto; /* remove sticky */
        padding: 15px 0;
        margin-bottom: 10px;
    }
    #submenu #submenu-trigger {
        display: block;
        position: relative;
        width: 100%;
        font-size: 1.2em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-left: 20px;
        padding-right: 40px;
        box-sizing: border-box;
    }
    #submenu #submenu-trigger.active {
    }
    #submenu #submenu-trigger svg {
        width: 20px;
        height: 20px;
        fill: var(--main);
        position: absolute;
        right: 20px;
        top:  50%;
        margin-top: -10px;
        transition: transform 300ms;
    }
    #submenu #submenu-trigger.active svg {
        transform: rotate(-180deg);
    }
    #submenu ul {
        flex-direction: column;
        display: none;
        border-top: 1px solid rgba(0,0,0,0.1);
        padding:  20px;
        padding-top: 15px;
        padding-bottom: 0;
        margin-top: 15px;
    }
    #submenu ul.active {
        display: block;
    }


    /* CONTENT - ONDERHOUD */
    .content .page_content.form { flex-direction: column; }
    .content .page_content.form .left { padding: 0; width: 100%; }
    .content .page_content.form .right { margin-top: 30px; width: 100%; }
    .content .page_content.form .right .form { padding: 35px 7.5%; }
    .content .page_content.form .right .form h2 { margin-bottom: 20px; font-size: 28px; }
    
    
    body.userforms .content .form h1,
    body.userforms .content .form h2 { margin-bottom: 20px; font-size: 28px; }
    body.userforms .content { flex-direction: column; width: 100%; }
    body.userforms .content .page_content { padding: 0 7.5%; width: 100%; }
    body.userforms .content .form { padding: 45px 7.5%; width: 100%; }
    body.userforms .content .media { padding: 0; }
    
    .row.maps { padding: 30px 0 0 0; }
    

    /* FOOTER */
    #footer {
        padding: 40px 0;
        padding-bottom: 0;
    }
    #footer #footer-container {
        flex-direction: column;
        column-gap: 0;
        row-gap:  30px;
        width: 85%;
    }
    #footer #footer-container .column {
        width: 100%;
    }
    #footer #footer-container .column.two-col ul {
        columns:  1;
    }
    
    #footer #footer-container .column a.more {
        margin-top: 10px;
    }
    
    #footer #footer-container #footer-logo {
        display: none;
    }
/*    #footer #footer-container .social-buttons ul {
        flex-direction: column;
        row-gap:  20px;
    }*/

    /* CREDITS */
    #credits {
        background: var(--accents2);
        padding: 20px 0;   
        font-size: .8em;
        padding-top: 0;
    }
    #credits #credits-container {
        display: block;
        padding-top: 35px;
        padding-bottom: 20px;
    }
    #credits #credits-container ul {
        flex-wrap: wrap;
        justify-content: center;
    }
    #credits #credits-container ul li {
        padding:  3px 0;
    }
    #credits #credits-container .social-buttons {
        position: relative;
        top:  auto;
        right:  auto;
        margin-bottom: 20px;
    }


}