header,
.slide,
.banner {
    --space:                80px;
    --padding:              20px;
}

footer,
section,
[class*='col-'],
[class*='grid-'] {
    --padding:              20px;
}

header {
    --nav-pad:              20px;
}

.flex {
    display:                flex;
    flex-wrap:              wrap;
}

.column {
    flex-direction:         column;
}

[class*='grid-'] {
    display:                grid;
    padding-left:           var(--padding);
    padding-right:          var(--padding);
    grid-column-gap:        calc(var(--padding) * 2);
}

[class*='grid-'] [class*='grid-'],
[class*='col-'] > [class*='grid-'] {
    padding:                0;
}

.grid-image {
    grid-template-columns:  repeat(2, 1fr);
    grid-template-rows:     repeat(2, 1fr);
}

.grid-image.wide-image {
    grid-template-columns:  repeat(12, 1fr);
    grid-template-rows:     auto;
}

.grid-image img:nth-child(1),
.grid-image video:nth-child(1),
.grid-image picture:nth-child(1) {
    grid-column:            1 / span 2;
    grid-row:               1 / span 2;
    width:                  calc(100% - var(--padding) * 2);
    margin-bottom:          calc(var(--padding) *2);
    justify-self:           right;
    align-self:             end;
}

.grid-image.wide-image img:nth-child(1),
.grid-image.wide-image video:nth-child(1),
.grid-image.wide-image picture:nth-child(1) {
    grid-column:            1 / span 12;
    width:                  100%;
}

.grid-image img:nth-child(2) {
    grid-column:            1 / span 1;
    grid-row:               2 / span 1;
    align-self:             end;
}

.grid-image.wide-image img:nth-child(2),
.grid-image.wide-image video:nth-child(2) {
    grid-column:            8 / span 4;
}


.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) {
    justify-self:           left;
}

.grid-image.left img:nth-child(2),
.dpl-grid:nth-child(even) .grid-image img:nth-child(2) {
    grid-column:            2 / span 1;
}

.grid-6 {
    grid-template-columns: repeat(6, 1fr);
}

.grid-12 {
    grid-template-columns: repeat(12, 1fr);
}

.vertical-align {
	align-items: 		center;
}

.baseline {
    align-items:        baseline;
}

.vertical-center {
	align-self: 		center;
}

.top {
	align-self: 		flex-start;
}

.bottom {
	align-self: 		flex-end;
}

.space-between {
    justify-content:    space-between;
}

.center {
    justify-content:    center;
}

.space-around {
    margin:             0 auto;
}

.space-left {
    margin-left:        auto;
}

.space-right {
    margin-right:       auto;
}

.space-bottom {
    margin-bottom:      auto;
}

.stretch {
    align-content:      stretch;
}      

footer,
main section {
    padding-left:       var(--padding);
    padding-right:      var(--padding);
}

.col-1-12  { flex:      0 0 calc(100% / 12 );			}
.col-2-12  { flex:      0 0 calc(100% / 12 * 2);		}
.col-3-12  { flex:      0 0 calc(100% / 12 * 3);		}
.col-4-12  { flex:      0 0 calc(100% / 12 * 4);		}
.col-5-12  { flex:      0 0 calc(100% / 12 * 5);		}
.col-6-12  { flex:      0 0 calc(100% / 12 * 6);		}
.col-7-12  { flex:      0 0 calc(100% / 12 * 7);		}
.col-8-12  { flex:      0 0 calc(100% / 12 * 8);		}
.col-9-12  { flex:      0 0 calc(100% / 12 * 9);		}
.col-10-12 { flex:      0 0 calc(100% / 12 * 10);		}
.col-11-12 { flex:      0 0 calc(100% / 12 * 11);		}
.col-12-12 { flex:      0 0 100%;						}

.max-6-12 { max-width:  calc(100% / 12 * 6);            }
.max-8-12 { max-width:  calc(100% / 12 * 8);            }

[class*='col-'] {       
    padding:            0 var(--padding); 
}

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

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

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

img {
    display:            block;
    width:              100%;
    height:             auto;
}

.banner {
    padding-top:        var(--space);
}


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

D E S I G N   P R I N T   L O V E                            
▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂▂
*/

.dpl-grid div:nth-child(1) {
    grid-area:          summary;
    align-self:         center;
}
.dpl-grid div:nth-child(2) {
    grid-area:          benefit1;
}
.dpl-grid div:nth-child(3) {
    grid-area:          benefit2;
}
.dpl-grid div:nth-child(4) {
    grid-area:          benefit3;
}
.dpl-grid .grid-image {
    grid-area:          image;
}

.dpl-grid {
    grid-template-rows: 1fr auto;
    grid-row-gap:       20px;
    grid-template-areas: 
    ". summary summary summary summary . .  image image image image ."     
    ". benefit1 benefit1 benefit2 benefit2 benefit3 benefit3 image image image image .";
}

.dpl-grid:nth-child(even) {
    grid-template-areas: 
    ". image image image image . . summary summary summary summary ."
    ". image image image image . . summary summary summary summary ."
    ". image image image image benefit1 benefit1 benefit2 benefit2 benefit3 benefit3 .";
}

.nobenefit.dpl-grid div:nth-child(1) {
    grid-area:          summary;
    align-self:         center;
}
.nobenefit.dpl-grid div:nth-child(2) {
    grid-area:          image;
}

.nobenefit.dpl-grid {
    grid-template-rows: 1fr auto;
    grid-row-gap:       20px;
    grid-template-areas: 
    "summary summary summary summary summary . . image image image image image"
    "summary summary summary summary summary . . image image image image image";
}

.nobenefit.dpl-grid:nth-child(even) {
    grid-template-areas: 
    "image image image image image . . summary summary summary summary summary"
    "image image image image image . . summary summary summary summary summary"
    "image image image image image . . summary summary summary summary summary";
}

#design_print_love .super-title * {
    text-align:         center;
    padding-bottom:     0;
}

#home #design_print_love div:nth-child(1) {
    order:              1;
}

#home #design_print_love div:nth-child(2) {
    order:              2;
}

#home #design_print_love div:nth-child(3) {
    order:              4;
}

#home #design_print_love div:nth-child(4) {
    order:              3;
}

#home #design_print_love div:nth-child(5) {
    order:              5;
}

#home #design_print_love div:nth-child(6) {
    order:              6;
}

#customization .grid-6 div:nth-child(1) {
    grid-column:        1 / span 3; 
    padding-top:        40px;
}

#customization .grid-6 div:nth-child(5) {
    grid-column:        4 / span 3; 
    grid-row:           1; 
    padding-top:        40px;
}

#clients_wrap .grid-12 > div:nth-child(1) {
    grid-column:        1 / span 5;
    grid-row:           1 / span 3;
}

#clients_wrap .grid-12 > div:nth-child(1) div {
    position:           relative; 
    overflow:           hidden; 
    max-width:          100%; 
    height:             auto; 
    padding-bottom:     132%;
}

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

#clients_wrap .grid-12 > div:nth-child(2) {
    grid-column:        7 / span 6;
    grid-row:           1 / span 2;
}
    
#clients_wrap .grid-12 > div:nth-child(3) {
    grid-column:        7 / span 6;
    grid-row:           3 / span 2;
}

#clients_wrap .grid-12 > div:nth-child(4) {
    grid-column:        1 / span 4;
    grid-row:           4;
}

#clients_wrap .grid-12 > div:nth-child(4) ul {
    column-count:       2; 
    column-gap:         calc(var(--padding) * 2);
}

video {
    width:              100%;
    height:             auto;
}

.embed-container {
    position:           relative;
    overflow:           hidden; 
    padding-bottom:     39% /*56.25%*/; 
    height:             0; 
    max-width:          100%; 
    height:             auto; 
    margin-bottom:      0;    
}

.embed-container iframe, 
.embed-container object, 
.embed-container embed, 
.embed-container video { 
    position:           absolute; 
    top:                0; 
    left:               0; 
    width:              100%; 
    height:             100%; 
}

.ratio169 { 
    padding-bottom:     56.25%; 
}

.ratio239 { 
    padding-bottom:     41.75%; 
}

.grecaptcha-badge { 
    visibility:         hidden; 
}