* {margin:0;padding:0;box-sizing: border-box;}
body {font-family: Proxima;padding:1vw;padding:4vw}

header.bar {position:fixed;width:100%;top:0;left:0;padding:10px;z-index:10;background-color:#FFF}
header.bar nav > *:not(div) {display:none;}
header.bar nav div img {width:250px;display:block;margin:auto}

main {margin:10vw 0}
main header {width:100%;text-align:center;margin-top:1vw;}
main header h1 {font-weight:800;font-size:3.5vw;line-height:1;}
main header p {font-weight:400;font-size:2vw;line-height:1;}



main section.slide-container {position:relative;width:100%; height:34vw; margin-bottom:6vw; overflow:hidden}
main section.slide-container figure.slide {position:absolute;left:0;top:0;width:100%;height:100%;transform:rotateY(0); transition:0.5s transform;transition-timing-function:cubic-bezier(0.39, 0.575, 0.565, 1);}
main section.slide-container figure.slide img {width:100%;height:100%;object-fit:cover;}
main section.slide-container figure.slide.turnOut {transform:rotateX(270deg) scale(.75);}
main section.slide-container figure.slide figcaption{position:absolute;top:0;left:0;width:50%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center; font-size:3.5vw;font-weight:800;mix-blend-mode:difference;color:#FFF;z-index:inherit;}
main section.slide-container figure.slide figcaption div span:not(:first-of-type){margin-left:.25em}


main section:not(.slide-container) {display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:6vw}
main section:not(.slide-container):nth-of-type(odd) {flex-direction:row-reverse}
main section:not(.slide-container) picture img:not(.over) {width:100%;}
main section:not(.slide-container) picture,
main section:not(.slide-container) article {position:relative;display:block;width:45%}
main section:not(.slide-container) article h2{font-size:3vw;line-height:.85}
main section:not(.slide-container) article p,
main section:not(.slide-container) article ul li{margin-top:2vw;font-size:2vw;line-height:1.5}
main section:not(.slide-container) article ul li{margin-left:4vw;list-style-type: lower-greek;}
main section:not(.slide-container) article img{display:block;margin:4rem 0}
@media all and (min-width:1601px) {
    main section:not(.slide-container) article h2{font-size:3rem;line-height:.85}
    main section:not(.slide-container) article p,
    main section:not(.slide-container) article ul li{margin-top:2rem;font-size:2rem;line-height:1.5}
    main section:not(.slide-container) article ul li{margin-left:4rem;list-style-type: lower-greek;}
}
main section.how-it-works {padding:4vw;background-color:#CCC}
main section.how-it-works picture img.additional {margin-top:4em}
main section.print-samples picture img.over {display:block;margin-bottom:20%;width:100%}
main section.print-samples picture img.additional {position:relative;margin-top:-20vw;z-index:-1}




main section.faq {position:relative; display:flex;flex-wrap:wrap;justify-content:space-around;align-items:center;background:url('images/faq-bg.png') no-repeat 50% 50%;background-size:75%;padding:5vw}
main section.faq h2 {width:100%;text-align:center;font-size:12vw;color:#00000066;padding:3rem}
main section.faq figure {width:30%;cursor:pointer;margin-bottom:10vw}
main section.faq figure img {height:8vw;display:block;margin:auto}
main section.faq figure figcaption {font-size:2vw;text-align:center;}
main section.faq article {position:absolute;left:5%;width:90%;border:1px solid #00000033;padding:4vw;background-color:#FFF;transform:rotateY(90deg);transition:1s transform;transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1)}
main section.faq article.open {transform:rotateX(0deg)}
main section.faq article h2 {margin-bottom:1rem;padding:0;font-size:3.5vw;line-height:1}
main section.faq article p,
main section.faq article ul {margin-bottom:1vw;font-size:2vw}
main section.faq article ul li {margin-left:1vw;margin-bottom:1vw;font-size:2vw;line-height:1;list-style-type: lower-greek;}
main section.faq article img {position:absolute;top:0;left:50%;transform:translateX(-50%);height:90%;width:90%;padding:1vw;margin-top:2vw;object-fit:contain;mix-blend-mode:multiply;opacity:.15;z-index:-1}
main section.faq article button {display:block;width:fit-content;margin:2vw auto;padding:1vw 3vw;font-size:inherit}
@media all and (min-width:1601px) {
    main section.faq figure figcaption {font-size:2rem;}
    main section.faq article h2 {font-size:3.5rem;}
    main section.faq article p,
    main section.faq article ul {font-size:2rem}
    main section.faq article ul li {font-size:2rem;}
}

footer {position:fixed;bottom:0;left:0;width:100%;height:fit-content;padding:1rem;background-color:#222;z-index:10; text-align:center;font-size:1.5rem;color:#FFF}
footer a {text-decoration:inherit; color:#EEE}
footer a:hover {text-decoration:underline; color:#0FF}