/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */

/* 1500px and below
   ========================================================================== */
@media screen and (max-width: 1500px) {
    .img_s1 {
        width: 80%;
        height: auto !important;
    }
}

@media screen and (max-width: 1400px) {
    /* Contact section */
    
    .img_s1 {
        width: 67%;
        height: auto !important;
    }
    
    /* Navigation */
    nav a {
        font-size: 15px;
        letter-spacing: 0.8em;
    }

    nav {
        gap: 30px;
        bottom: -30px;
    }
    
    .submenu {
        margin-right: 1.2% !important;
    }
    
    
    .submenu a {
        font-size: 10px;
        margin-right: 0;
        letter-spacing: 0.8em;
    }
    
    .content.contact {
        margin-top: -60px;
    }
    
}
/* 1200px and below
   ========================================================================== */
@media screen and (max-width: 1200px) {
    /* Contact section */
    .contact section {
        margin-bottom: 0 !important;
    }
    
    .content.contact {
        margin-top: 0;
    }
    
    /* Images */
    .img_s1 {
        width: auto;
        height: 100%;
        max-width: 200px;
        max-height: 200px;
    }    
    
    /* Typography */
    html, 
    body, 
    .contact form input {
        font-size: 11px;
        line-height: 1.7;
    }
            
    /* Headings */
    .content .left-title,
    .content .right-title,
    h2, 
    .button {
        font-size: 17px;
        margin-bottom: 15px;
    }

    /* Layout */
    .content section {
        margin-bottom: 60px;
    }

    .contact h2 {
        margin-bottom: 20px;
    }

    .contact form .hline {
        margin-bottom: 15px;
    }

    /* Image adjustments */
    section .row.images .right-col img.img_s30 {
        margin-left: 60px;
    }

}

/* 800px and below
   ========================================================================== */
@media screen and (max-width: 800px) {

    /* Images */
    .img_s1 {
        max-height: 200px;
    } 
    
    .img_s2 {
        display: none;
    }

    .pdesctop {
        display: none;
    }

    .pdescmob,
    .img_s2_m,
    .img_s1_m {
        display: block;
    }

    /* Layout */
    .page {
        padding: 0 0;
    }

    .left-col {
        padding-left: 20px;
    }
       
    .right-col {
        padding-right: 20px;
    }
    
    header {
        padding: 15px 0 10px 0;
    }

    .right-col {
        padding-left: 20px;
    }

    .left-col {
        padding-right: 20px;
    }

    .content .right-content p {
        margin-left: 0;
        margin-right: 0;
    }

    /* Navigation */
    nav {
        gap: 20px;
    }

    /* Credo section */
    .crdimg {
        max-width: 58%;
        position: fixed;
        top: 0;
        left: -15%;
        z-index: 8;
    }
    
    .credo .quote {
        padding-left: 0;
    }
    
    /* Typography */
    .content .left-title,
    .content .right-title,
    h2, .button {
        font-size: 15px;
    }
    
    .content .left-title .year {
        letter-spacing: normal !important;
        white-space: nowrap;
    }

    /* Image gallery */
    section .row.images .left-col img {
        margin-right: -120px;
    }

    section .row.images .left-col img.img_s17m {
        margin-right: -120px;
    }

    section .row.images .right-col p {
        justify-content: end;
    }

    section .row.images .right-col img {
        width: calc(70% - 20px);
        max-width: 240px;
    }
    
    section .row .left-col img.img_s1 {
        display: none;
    }

    section .row.images .right-col img.img_s10a,
    section .row.images .right-col img.img_s14a,
    section .row.images .right-col img.img_s16,
    section .row.images .right-col img.img_s34a,
    section .row.images .right-col img.img_s36a {
        display: none;
    }

    /* Contact section */
    .contact section {
        margin-left: 15px;
    }
    
    .btmlogos a {
        width: calc(30% - 15px);
    }
    
}

/* 600px and below
   ========================================================================== */
@media screen and (max-width: 600px) {
    .btmlogos a {
            width: calc(40% - 15px);
            min-width: 150px;
    }
    
        .submenu {
        margin-right: 0.8% !important;
    }
    
    .btmlogos a:first-of-type {
        min-width: 180px;
}
    
    .btmlogos {
        gap: 20px;
    }
    
    .main .pbg {
        background-image: url(img/mv-portrait.jpg);
    }
    
    /* Base styles */
    html, body {
        font-size: 12px;
    }

    body.crbg::before, 
    .hdnbg {
        background: linear-gradient(to right, #000 50%, #6f6c6f 100%);
    }

    .page {
        margin-top: -20px;
    }

    /* Navigation */
    nav a {
        font-size: 10px;
        letter-spacing: 0.4em;
    }
    
    .submenu a {
        font-size: 9px;
        letter-spacing: 0.4em;
    }

    nav {
        gap: 15px;
        padding-top: 10px;
    }

    .submenu {
        padding-top: 5px;
        margin-right: 0;
    }

    /* Content elements */
    .content .left-col .left-title .dot {
        width: 5px;
        height: 5px;
    }

    .img_s2_m {
        width: 100%;
        max-width: 130px;
        margin-top: 50px;
    }

    .img_s1_m {
        max-width: 180px;
        position: absolute;
        top: 15px;
    }

    /* Contact section */
    .contact {
        position: relative;
        z-index: 9;
    }
    
    .contact section {
        width: 100%;
    }
    
    .contact .form {
        position: relative;
        z-index: 9;
        width: 100%;
        padding: 40px 20px;
        box-sizing: border-box;
        margin: 0 20px 0 20px;
        background: linear-gradient(-45deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%);
        margin-top: -50px;
    }
    
    .contactbg {
        width: 100%;
        background-image: url(img/contact_bg_m.jpg);
    }

    .content.contact {
        margin-top: 20px;
        transform: translateY(10px);    
    }

    /* Image handling */
    mob {
        display: none;
    }
    
    section .row.images .right-col img.img_s10a {
        right: 0;
    }

    .img_s36, .img_s36a, .img_s13, 
    .img_s14, .img_s29, .img_s17, 
    .img_s18 {
        display: none;
    }
    
    .img_s36m, .img_s13m, .img_s14m, 
    .img_s29m, .img_s17m, .img_s18m {
        display: inline-block;
    }

    /* Image gallery adjustments */
    section .row.images .left-col img.img_s3,
    section .row.images .left-col img.img_s7 {
        width: 150px;
        margin-right: -95px;
    }

    section .row.images .right-col img.img_s6, 
    section .row.images .right-col img.img_s20 {
        width: 80%;
    }
    
    section .row.images .right-col img.img_s26 {
        width: 75%;
    }
    
    section .row.images .right-col img.img_s24 {
        width: 65%;
    }
    
    section .row.images .right-col img.img_s16a {
        width: 70%;
        margin-left: 0;
    }
    
    section .row.images .right-col img.img_s12 {
        width: 45%;
    }
    
    section .row.images .right-col img.img_s30,
    section .row.images .right-col img.img_s22 {
        margin-left: 0;
        width: 65%;
    }
    
    section .row.images .right-col img.img_s22 {
        position: relative;
        left: -20px;
    }
    
    section .row.images .right-col img.img_s28 {
        width: 90%;
        max-width: 400px;
    }

    section .row.images .right-col img.img_s13m {
        width: 65%;
        max-width: 100%;
        left: -20px;
        position: relative;
    }
    
    section .row.images .right-col img.img_s18m {
        width: 100%;
        max-width: 100%;
    }

    section .row.images .right-col img.img_s8 {
        max-width: 100px;
    }

    section .row.images .right-col img.img_s10 {
        width: calc(63% - 20px);
        left: -20px;
        position: relative;
    }

    /* Special row layout */
    section .row.noflx {
        flex-wrap: wrap;
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 30px;
    }
    
    section .row.noflx .left-col, 
    section .row.noflx .right-col {
        width: 100%;
        text-align: left;
        padding: 0;
    }
    
    section .row.noflx .right-col {
        width: calc(100% - 32.67% - 20px);
        margin-left: auto;
    }

    /* Image positioning */
    .img_s35 {
        zoom: 0;
        left: -35px;
    }
    
    .img_s36m, .img_s34, .img_s29, 
    .img_s27, .img_s12 {
        left: -30px;
        position: relative;
    }
    
    .img_s32, .img_s23, .img_s14m, 
    .img_s29m {
        left: -20px;
        position: relative;
    }
    
    .img_s8 {
        left: -40px;
        position: relative;
    }
    
    .img_s13m {
        margin-top: 20px;
    }

    /* Credo section */
    .crdimg {
        margin-top: 30px;
    }
    
    
section .row.images .right-col .img_s34 {
    max-width: 160px;
}

section .row.images .right-col .img_s34a {
    margin-left: 20px;
    max-width: 130px;
}

.contact section {
    margin-left: 0;
}
}

/* 400px and below
   ========================================================================== */
@media screen and (max-width: 400px) {
    /* Image scaling */
    .img_hs, 
    .img_hm, 
    .img_hxs {
        transform: scale(1.3);
    }
    
    .img_s1_m {
        max-width: 160px;
        position: absolute;
        top: 15px;
    }
}