/* 
█████████████████████████████████████████████████████

M A X   6 0 0 P X                         
▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂
*/

@media screen and ( max-width: 600px ){
    
    p,
    h1,
    h2,
    h3,
    h4,
    .btn,
    body,
    header,
    select,
    figure,
    .small-p,
    .small-p p,
    footer nav,
    figcaption,
    footer address,
    footer #offices,
    .super-title h1,
    footer #copyright {
        --font:             1.3;
    }
    
    .btn.play:hover::after { 
        right:              -23px;
        border-top:         22px solid transparent;
        border-bottom:      23px solid transparent;
        border-left:        22px solid var(--font-color);
    }
    
    header svg {
        width:              54px;
    }
    
    footer,
    section,
    header,
    .slide,
    [class*='col-'],
    [class*='grid-'] {
        --padding:          10px;
    }
    
    .vpad20 {
        padding-top:        10px;
        padding-bottom:     10px;
    }
    
    .vpad40 {
        padding-top:        20px;
        padding-bottom:     20px;
    }

    .vpad80 {
        padding-top:        40px;
        padding-bottom:     40px;
    }
    
}


/* 
█████████████████████████████████████████████████████

6 0 0   -   1 0 0 0 P X                         
▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂
*/

@media screen and ( min-width: 600px ) and ( max-width: 1000px ) {
    header,
    footer,
    .slide,
    section,
    [class*='col-'],
    [class*='grid-'] {
        --padding:          40px;
    }
}


/* 
█████████████████████████████████████████████████████

M A X   1 0 0 0 P X                       
▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂
*/

@media screen and ( max-width: 1000px ) {
    
    header {
        --nav-pad:           10px;
    }
    
    header,
    .slide,
    .banner {
        --space:             60px;
    }
    
    header label[for=nav-trigger] {
        display:            inherit;
        padding:            0 40px 0 calc(var(--nav-pad) / 2);
        margin:             6px calc(var(--padding)) 
                            6px calc(var(--nav-pad) / 2);
        position:           relative;
    }
    
    header label[for=nav-trigger] span {
        display:            block;
        height:             1px;
        width:              26px;
        background-color:   var(--font-color);
        position:           absolute;
        right:              0;
    }
    
    header label[for=nav-trigger] span:nth-child(1) {
        top:                0;
    }
    
    header label[for=nav-trigger] span:nth-child(2) {
        top:                50%;
    }
    
    header label[for=nav-trigger] span:nth-child(3) {
        bottom:             0;
    }
    
    #nav-trigger:checked ~ header label[for=nav-trigger] span:nth-child(1) {
        top:                50%;
        transform:          rotate(45deg);
    }
    
    #nav-trigger:checked ~ header label[for=nav-trigger] span:nth-child(2) {
        width:              0;
    }
    
    #nav-trigger:checked ~ header label[for=nav-trigger] span:nth-child(3) {
        top:                50%;
        transform:          rotate(-45deg);
    }
    
    header.bg-color {
        background-color:   transparent;    
    }
    
    header {
        display:            block;
        height:             auto;
        align-items:        flex-start;
        padding:            0;
    }
    
    header #mobile-wrap {
        height:             var(--space);
        display:            flex;
        align-items:        center;
        justify-content:    space-between;
        flex:               1;
        background-color:   var(--base-color);
        padding:            0 var(--padding);
    }
    
    header nav {
        height:             calc(100vh - var(--space));
        flex-direction:     column;
        display:            none;
        background-color:   var(--base-color);
        overflow-y:         scroll;
    }
    
    #nav-trigger:checked ~ header nav { 
        display:            flex;
    }
    
    header #main-nav,
    header #side-nav {
        width:              100%;
        margin:             0;
    }
    
    header #side-nav {
        padding:            0 
                            calc(var(--padding) * 2);
    }
    
    #site-picker a,
    header #main-nav a {
        margin:             0;
        padding:            calc(var(--nav-pad) * 2) 0;
    }
    
    header #main-nav {
        display:            block;
        padding:            calc(var(--padding) * 2) 
                            calc(var(--padding) * 2) 
                            0 
                            calc(var(--padding) * 2);
        padding-top:        0;
        height:             auto;
    }
    
    header #side-nav,
    header #side-nav ul li ul {
        margin:             0;
        display:            block;
    }
    
    #main-nav a::after,
    #site-picker a::after,
    #main-nav a.selected::after {
        width:              100%;
    }
    
    header #site-picker {
        margin:             0;
    }
    
    #quick-contact:hover li ul {
        position:           relative;
        animation-name:     none;
    }

    .col-2-12 { 
        flex:               0 0 50%;    		
    }
    
    .col-3-12,
    .col-4-12,
    .col-5-12,
    .col-6-12,
    .col-7-12,
    .col-8-12,
    .col-9-12,
    .col-10-12,
    .col-11-12,
    .col-12-12 { 
        flex:               0 0 100%;
    }
    
    [class*='max-'] {
        max-width:         100%;
    }
    
    [class*='grid-'] {
        display:            flex;
        flex-direction:     column;
    }
    
    .dpl-grid,
    .nobenefit.dpl-grid {
        display:                grid;
        grid-template-columns:  1fr;
    }
    
    .dpl-grid,
    .dpl-grid:nth-child(even) {
        grid-template-areas: 
        "image"
        "summary"
        "benefit1"
        "benefit2"
        "benefit3";
    }
    
    .nobenefit.dpl-grid,
    .nobenefit.dpl-grid:nth-child(even) {
        grid-template-areas: 
        "image"
        "summary";
    }
    
    #software_services div:nth-child(1) {   order: 2;   }
    #software_services div:nth-child(2) {   order: 3;   }
    #software_services div:nth-child(3) {   order: 1;   }
    #software_services div:nth-child(4) {   order: 4;   }
    #software_services div:nth-child(5) {   order: 5;   }
    #software_services div:nth-child(6) {   order: 6;   }
    #software_services div:nth-child(7) {   order: 7;   }
    
    #home #design_print_love div:nth-child(3) {
        order:              3;
    }

    #home #design_print_love div:nth-child(4) {
        order:              4;
    }
    
    #customization .grid-6 divn:nth-child(1) {
        grid-column:        1 / span 1; padding-top: 40px;
    }

    #customization .grid-6 div:nth-child(5) {
        grid-column:        5 / span 1; grid-row:auto; padding-top: 40px;
    }
    
    #sub-brands,
    #sub-brands ul {
        display:            block;
    }
    
    #sub-brands .logo {
        padding-top:        0;
        padding-bottom:     0; 
    }
    
    #sub-brands .logo:first-child {
        padding-top:        40px;
    }
    
    #sub-brands .logo {
        text-align:         left;
    }
    
    #sub-brands .logo svg {
        width:              50%;
    }
    
    #sub-brands .summary {
        padding-top:        40px; 
        padding-bottom:     20px; 
    }
    
    #quick-contact {
        margin-bottom:      30px;
    }
    
    ,
    #nav-trigger:checked ~ header nav {
        display:            flex;
        flex-direction:     column;
        justify-content:    space-between;
    }
    
    #quick-contact label[for=contact-trigger] {
        display:            none;
    }
    
    #quick-contact li ul {
        width:              100%;
        position:           relative;
    }

    #quick-contact li {
        position:           relative;
        background-color:   var(--font-color);
    }
    
    #quick-contact a,
    #quick-contact li {
        color:              var(--base-color);
    }
    
    #quick-contact li label ~ a[href*=tel] {
        display:            none;
    }
    
    #site-picker {
        border-right:       0px solid var(--font-color);
        margin-right:       0px;
    }
    
    .hero .btn { 
        display:            table;
    }
    
    .btn.primary {
        margin-bottom:      20px;
    }

    #client_logos .flex [class*='col-']:nth-child(7) {
        display:            none;
    }
    #client_logos .col-1-12  { 
        flex:               0 0 20%;    		
    }
    
    img.img_4x3,
    img.img_4x1,
    .left img.img_4x3,
    .dpl-grid:nth-child(even) .grid-image img,
    .dpl-grid:nth-child(even) .grid-image picture {
            clip-path:      polygon( 21%   0%, 
                                    100%   0, 
                                    100%  67%, 
                                     79% 100%, 
                                      0  100%, 
                                      0%  33%);
    -webkit-clip-path:      polygon( 21%   0%, 
                                    100%   0, 
                                    100%  67%, 
                                     79% 100%, 
                                      0  100%, 
                                      0%  33%);
    }
    
    .grid-image img:nth-child(1),
    .grid-image video:nth-child(1),
    .grid-image picture:nth-child(1),
    .grid-image.left img:nth-child(1),
    .grid-image.left video:nth-child(1),
    .grid-image.left picture:nth-child(1),
    .dpl-grid:nth-child(even) .grid-image img:nth-child(1),
    .dpl-grid:nth-child(even) .grid-image picture:nth-child(1) {
        margin:             0;
        align-self:         auto;
        width:              100%;
    }
    
    .grid-image img:nth-child(2),
    .grid-image video:nth-child(2) {
        display:            none;
    }
    
    #clients_wrap .grid-12 > div:nth-child(1) div {
        padding-bottom:     0;
    }

    #clients_wrap .grid-12 > div:nth-child(1) img {
        position:           relative;
        width:              100%;
        height:             auto;
        left:               0;
    }
    
}


/* 
█████████████████████████████████████████████████████

1 0 0 0  -  1 6 0 0 P X                      
▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂
*/

@media screen and ( min-width: 1000px ) and ( max-width: 1600px ) {
    
    header {
        --nav-pad:          10px;
    }
    
    header,
    .slide,
    .banner {
        --space:            80px;
        --padding:          20px;
    }
    
    p,
    h1,
    h2,
    h3,
    h4,
    .btn,
    body,
    header,
    select,
    figure,
    .small-p,
    .small-p p,
    footer nav,
    figcaption,
    footer address,
    footer #offices,
    .super-title h1,
    footer #copyright {
        --font:         1.3;
    }
    
    .btn.play:hover::after { 
        right:              -23px;
        border-top:         22px solid transparent;
        border-bottom:      23px solid transparent;
        border-left:        22px solid var(--font-color);
    }
    
    header svg {
        width:              54px;
    }
    
}


/* 
█████████████████████████████████████████████████████

M I N   2 0 0 0 P X                      
▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂
*/

@media screen and ( min-width: 2000px ){
    
    header,
    footer,
    .slide,
    section,
    [class*='col-'],
    [class*='grid-'] {
        --padding:          60px;
    }
    
    header,
    .slide,
    .banner {
        --space:           100px;
    }
    
}


/* 
█████████████████████████████████████████████████████

M I N   2 6 0 0 P X                      
▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂
*/

@media screen and ( min-width: 2600px ){
    
    p,
    h1,
    h2,
    h3,
    h4,
    .btn,
    body,
    header,
    select,
    figure,
    .small-p,
    .small-p p,
    footer nav,
    figcaption,
    footer address,
    footer #offices,
    .super-title h1,
    footer #copyright {
        --font:         0.8;
    }
    
    header,
    footer,
    .slide,
    section,
    [class*='col-'],
    [class*='grid-'] {
        --padding:          80px;
    }

    .vpad20 {
        padding-top:        30px;
        padding-bottom:     30px;
    }

    .vpad40 {
        padding-top:        60px;
        padding-bottom:     60px;
    }

    .vpad80 {
        padding-top:        120px;
        padding-bottom:     120px;
    }
    
    .btn.play:hover::after { 
        right:              -28px;
        border-top:         27px solid transparent;
        border-bottom:      28px solid transparent;
        border-left:        27px solid var(--font-color);
    }
    
    #client_logos .flex [class*='col-']:nth-child(1),
    #client_logos .flex [class*='col-']:nth-child(8) {
        display:            block;
    }
    
    header svg {
        width:              73px;
    }
    
}