* { margin: 0; padding: 0; border-style: none; outline-style: none; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0,0,0,0); }
html, body { position: relative; height: 100%;  }
body { font-family: Lato, sans-serif; font-size: 14px; color:#000; background-color: #939c9e; font-weight: 300; scroll-behavior: smooth; }
p { line-height: 19px; margin-top: 18px; margin-bottom: 18px; }

/* INTRO */
.intro { color: #ffffff; background-color: #313740; width: 100%; height: auto; }
.title { background-color: #313740; width: 100px; height: 100vh; }
h1 { font-size: 18vh; word-spacing: 100vw; color: white; font-family: Oswald, sans-serif; font-weight: 400; line-height: 18vh; padding-top: 10px; padding-bottom: 20px; padding-left: 20px;}
.intro-arrow { background-image: url(../imgs/intro-arrow.svg); background-size: contain; position: absolute; left: 50%; bottom: 0px; width: 70px; height: 70px; margin-left: -35px; opacity: 1; transition: opacity 0.2s ease;}
.off { opacity: 0; transition: opacity 0.2s ease; }
.copy-wrapper { padding-bottom: 28px; }
.copy p { /*text-align: justify;*/ margin-right: 30px; margin-left: 30px; }
.copy:first-child p { border-top: 1px solid #ccc; padding-top: 24px; }
.copy a { color: #cc3; text-decoration: none; }
.faqs a { color:#000; text-decoration: underline; }
.faqs a:hover { color:#fff; }

/* FAQS */
.faqs, .base { margin-right: 30px; margin-left: 30px; margin-top: 30px; border-top: 1px solid #494949; }
.question { font-family: Oswald, sans-serif; font-size: 15px; font-weight: 300; line-height: 22px; letter-spacing: 1px; margin-top: 30px; padding-top: 24px; border-top: 1px solid #848b8d; }
.question:nth-child(1) { border-top: 0px; margin-top: 26px;}
.question em { font-size: 150%; font-style: normal; vertical-align: middle; }
.answer {  }

/* BASE */
.base { margin-top: 20px; padding-top: 20px; padding-bottom: 22px; }
.base p { margin: 0px; }

/* SWIPER CUSTOM */
.swiper-container { width: 100%; height: 100%; }
.swiper-slide { text-align: center; line-height: 0; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: -webkit-box; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }
.swiper-slide img, .swiper-lazy-preloader img { width: 100%; height: auto; max-width: 550px; padding-top: 36px; padding-bottom: 36px; box-sizing: border-box; }
.swiper-pagination-A { background-color: #939c9e; line-height: 0; position: relative; }
.swiper-pagination-B { z-index: 300;}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0;}
.swiper-container-horizontal > .swiper-pagination-bullets { bottom: 0px; }
.swiper-pagination-bullet { width: 14px; height: 14px; background: #000; border: solid 8px #939c9e; }
.swiper-pagination-bullet-active { background-color: #d1d138 !important; opacity: 1 !important; }
.swiper-pagination-A { text-align: left; margin-bottom: 12px; }
.swiper-pagination-A .swiper-pagination-bullet { background-image: url(../imgs/buttons.svg); background-size: 168px 56px; border: none; border-radius: 0px;}
.swiper-pagination-A .swiper-pagination-bullet:nth-child(1) { width: 56px; height: 56px; }
.swiper-pagination-A .swiper-pagination-bullet:nth-child(2) { background-position: center; width: 56px; height: 56px; }
.swiper-pagination-A .swiper-pagination-bullet:nth-child(3) { background-position: right center; width: 36px; height: 56px; }
.swiper-lazy-preloader { width: 100%; position: absolute; left: 0; top: 0; z-index: 10; display: block; text-align: center; line-height: 0; background-image: url(../imgs/stopwatch.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: 30px 30px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: block; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }
.desktop-loader { background-position: 50% 41%; }
/* SWIPER ADDITIONAL: */
.loading { position: absolute; width: 100%; height: 100%; background-color: yellow; box-sizing: border-box; top:0px; left: 0px;}
.frame { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 200; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.device { background-repeat: no-repeat; background-position: center; position: relative; width: 100%; height: 100%; max-width: 550px; margin-right: auto; margin-left: auto; background-size: contain; }
.desktop { background-image: url(../imgs/preview-imac.png);  }
.tablet { background-image: url(../imgs/preview-ipad.png);  }
.phone { background-image: url(../imgs/preview-iphone.png);  }
.swiper-lazy { opacity: 0; }
.swiper-lazy-loaded { opacity: 1; transition: opacity 0.3s; }

/* PORTFOLIO */
.box { position: relative; width: 100%; float: left; box-sizing: border-box; }
.portfolio { position: relative; padding-top: 30px; }
.portfolio:after { content: ""; display: table; clear: both; }
.details { position: relative; margin-top: 14px; margin-right: 30px; margin-left: 30px; padding-top: 24px; padding-bottom: 50px; border-top: 1px solid #848b8d; }
.box:last-child .details { padding-bottom: 4px; }
.box::before { position: absolute; top: -14px; left: 30px; right: 30px; box-sizing: border-box; content: ""; border-top: 1px solid #494949; display: inline-block; }
.box:nth-child(1)::before  { display: none; }
.label, h3 { font-family: Oswald, sans-serif; font-size: 15px; font-weight: 300; line-height: 22px; letter-spacing: 1px; display: inline-block; }
h3 { margin-left: 4px;}
h3 a { color: #000; text-decoration: none; }
h3 a:hover { color: #FFF; }
.titles { margin-bottom: -10px; }
.titles span { display: block; }
.label { opacity: 0.4; }
.blurb a { color:#000; text-decoration: underline; display: block; transition: 0.3s;}
.blurb a:hover { color:#fff; }

/* TEMP PORTFOLIO */
.temp-portfolio { margin: 30px; margin-top: 0px; }
.temp-portfolio ul { margin-left: 20px; color: #fff; }
.temp-portfolio ul li { margin-bottom: 12px; margin-top: 12px; }
.temp-portfolio ul a { display: block; color: #fff; text-decoration: none; font-weight: 700; letter-spacing: 0.05em; margin-bottom: 2px; transition: 0.3s }
.temp-portfolio ul a:hover { color: #cc3; }

@media (min-width: 540px) {
.swiper-slide img {  padding-top: 40px; padding-bottom: 40px; }
.swiper-pagination-bullet { width: 16px; height: 16px; border: solid 10px #939c9e; transition: all 0.2s ease; }
.swiper-pagination-B .swiper-pagination-bullet:not(.swiper-pagination-bullet-active):hover { transform: scale(1.25); transition: all 0.2s ease; }
.swiper-pagination-A .swiper-pagination-bullet:not(.swiper-pagination-bullet-active):hover { transform: translateY(-3px); transition: all 0.2s ease; }
.swiper-pagination-A { position: absolute; top: 19px; right: -10px; text-align: center; margin-bottom: 0px;}
.swiper-pagination-A .swiper-pagination-bullet { background-size: 210px 70px; }
.swiper-pagination-A .swiper-pagination-bullet:nth-child(1) { width: 70px; height: 70px; }
.swiper-pagination-A .swiper-pagination-bullet:nth-child(2) { background-position: center; width: 70px; height: 70px; }
.swiper-pagination-A .swiper-pagination-bullet:nth-child(3) { background-position: right center; width: 45px; height: 70px; }
.titles { margin-bottom: 0px; }
.base p { display: inline-block; }
}

@media (min-width: 1020px) {
.box { width: 50%; }
.divider-1 { position: absolute; width: 1px; height: auto; top: 40px; bottom: 20px; left: 50%; margin-left: 0px; background: #333; z-index: 1000;}
.box:nth-child(2)::before { display: none; }
.box:nth-child(2), .box:nth-child(4), .box:nth-child(6), .box:nth-child(8), .box:nth-child(10), .box:nth-child(12) { border-right: 1px solid #939c9e; }
.box:nth-child(3), .box:nth-child(5), .box:nth-child(7), .box:nth-child(9), .box:nth-child(11) { clear: left; }
.details::after { position: absolute; bottom: -100px; right: -31px; height: 100px; box-sizing: border-box; content: ""; border-right: 1px solid #939c9e;; display: inline-block; }
/*.box:nth-child(2) .details::after, .box:nth-child(4) .details::after, .box:nth-child(6) .details::after, .box:nth-child(8) .details::after, .box:nth-child(10) .details::after, .box:nth-child(11) .details::after, .box:nth-child(12) .details::after { display: none; }*/
.box:nth-child(2) .details::after, .box:nth-child(4) .details::after, .box:nth-child(5) .details::after, .box:nth-child(6) .details::after { display: none; }
/*.box:nth-child(11) .details { padding-bottom: 4px; }*/
/*.box:nth-child(5) .details { padding-bottom: 4px; }*/
.faqs p { width: 50%; }
.box::before { top: -20px; }
}

@media (min-width: 1100px) and (min-height: 650px) {
.intro { height: 100%; display: flex; flex-wrap: wrap; }
.title { height: auto; }
.intro-arrow { display: none !important; }
.copy-wrapper { padding-bottom: 0px;}
.copy-wrapper { margin-top: auto; }
.copy { width: 50%; float: left; box-sizing: border-box; }
.copy p { padding-top: 16px !important; padding-bottom: 12px; border-top: 1px solid #ccc; }
.copy:first-child p { margin-right: 20px; }
.copy:nth-child(2) p { margin-left: 20px; }
.box:nth-child(9) .details, .box:nth-child(10) .details { padding-bottom: 4px; }
}

@media (min-width: 1500px) {
.box { width: 33.333%; }
.divider-1 { left: 33.333%; }
.divider-2 { position: absolute; width: 1px; height: auto; top: 40px; bottom: 20px; left: 66.666%; margin-left: 0px; background: #333; z-index: 1000;}
.box:nth-child(3)::before { display: none; }
/*.box:nth-child(2), .box:nth-child(4), .box:nth-child(6), .box:nth-child(8), .box:nth-child(10) { border-right: 1px solid #494949; }*/
.box:nth-child(3), .box:nth-child(6), .box:nth-child(9) { border-right: 1px solid #939c9e; }
.box:nth-child(3), .box:nth-child(5), .box:nth-child(7), .box:nth-child(9), .box:nth-child(11) { clear: none; }
.box:nth-child(4), .box:nth-child(7), .box:nth-child(10) { clear: left; }
/*.box:nth-child(2) .details::after, .box:nth-child(4) .details::after, .box:nth-child(6) .details::after, .box:nth-child(8) .details::after { display: inline-block; }*/
.box:nth-child(2) .details::after { display: inline-block; }
/*.box:nth-child(10) .details { padding-bottom: 4px; }*/
/*.box:nth-child(5) .details { padding-bottom: 20px; }*/
.box:nth-child(10) { display: none; }
.box:nth-child(9) .details, .box:nth-child(8) .details { padding-bottom: 0px; }
}

@media (max-aspect-ratio: 1/1) {
h1 { font-size: auto; font-size: 18vw; line-height: 18vw; }
}

/*
@media (max-width: 760px) {
.copy { width: 100%; float: none;}
.copy:nth-child(2) p { border-top: 0px; padding-top: 0px;}
.pagination-a { position: relative !important; top: 0; margin-bottom: 14px; }
.box { width: 100%; }
}

@media (max-width: 500px), (max-height: 460px) {
.title { height: 100%; }
.intro { display: auto !important; }
}
*/