/**
    Font Families
**/
@font-face {
    font-family: Amplify;
    src: url('../media/fonts/Amplify.ttf') format("truetype");
}
@font-face {
    font-family: Monoton;
    src: url('../media/fonts/Monoton-Regular.ttf') format("truetype");
}


/*
    https://fxaeberhard.github.io/handdrawn.css/
*/

/**
    Global Styles
**/
body { font-family: 'Lato', sans-serif; font-size: 14px;  }
.flex-center-align { display: flex; align-items: center; position: relative; }
.o-hide { overflow: hidden; }
.justify-flex-end { justify-content: flex-end; }
#client-brands, #problem-solutions, #brand-compliant-design { background-color: #cff828; }
.text-white { color: #fff; }
.highlight-yellow { color: #cff828; }
.text-purple { color: #9501b0 }
.text-uppercase { text-transform: uppercase; }
.font-amplify { font-family: Amplify, lato, sans-serif; }
.font-monoton { font-family: Monoton, lato, sans-serif; }
.text-center { text-align: center; }
/*
.site-wrapper { scroll-snap-type: y mandatory; }
.y-mandatory-scroll-snapping { scroll-snap-align: start; }
*/

/**
    Header Styles
**/
#header { display: flex; height: 90px; justify-content: flex-start; align-items: center; padding: 15px 50px; }
#header-logo span { position: absolute; left: 0; top: 0; visibility: hidden; }
#header-logo img { height: 50px; }
.top-nav { display:flex; justify-content: flex-end; list-style-type: none; margin: 0; padding: 0; width: 100%; }
.top-nav li a { color: #485255; font-size: 1.1em; letter-spacing: 2px; padding: 0 1em; text-transform: uppercase; }

/**
    Main Body Styles
**/

/**
    Video
**/
#kea-digital-video-hero { background-color: #000; display: block; height: calc(100vh - 90px); overflow: hidden; position: relative; width: 100%; }
#bg-full-video { object-fit: cover; height: calc(100vh - 90px); position: absolute; left: 0; top: 0; width: 100vw; }

/**
    Client Brands
**/
.top-brands .row { display: flex; align-items: stretch; padding: 100px 0; }
.top-brands h2 { color: #000; font-size: 68px; font-weight: 900; letter-spacing: 3px; text-shadow: -3px -5px #000; text-align: right; text-transform: uppercase; -webkit-text-fill-color: transparent; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #000; }
.top-brands h2 span.bg-callout { background-color: #000; color: #fff!important; display: block; line-height: 1.25em; margin: 10px 0; padding: 15px 25px 15px 50px; text-align: right; text-shadow: none; -webkit-text-fill-color: #fff; -webkit-text-stroke-width: 0; -webkit-text-stroke-color:#fff; transform: skew(-0.02turn, -6deg); }
.top-brands h2 span.slanted-text { display: block; transform: rotate(-5deg); }
.img-full { display: block; width: 100%; }
.brands-headline-container, .brands-logo-container { display: flex; align-items: center; height: 100%; }
.brand-highlight { display: block; height: calc( 100vh - 200px ); list-style-type: none; margin: 0; padding: 0; position: relative; width: 100%; }
.brand-highlight li { background-color: #cff828; border: 2px solid #000; border-radius: 50%; display: flex; align-items: center; position: absolute; }
.brand-highlight li img { display: block; margin: 0 auto; width: 80%; }
.brand-highlight li.premiere  { height: 30vw; left: calc(50% - 15vw); top: calc(50% - 15vw); width: 30vw; }
.brand-highlight li.secondary { height: 15vw; bottom: calc(50% - 25vw); right: 0; width: 15vw; }
.brand-highlight li.third { height: 10vw; top: calc(50% - 23vw); right: 10%; width: 10vw; }
.brand-highlight li.fourth { height: 5vw; left: calc(50% - 5vw); bottom: calc(50% - 21vw); width: 5vw; }
#problem-solutions { background-image: url('../media/img/problems-solutions-blur-bg.png'); background-size: cover; }
#problem-solutions .row { display: flex; align-items: stretch; }
.silhouette .img-full { margin-left: -50px; }
.problems-details h2 { background: #000; color: #cff828; display: block; font-size: 56px; font-weight: 900; line-height: 1.25em; margin-right: -15px; padding: 25px; position: relative; z-index: 10; }
.problems-details p { display: block; font-size: 24px; margin: 40px 15px 40px 0; }
.problems-details a { border: 2px solid #000; color: #000; display: inline-block; font-size: 24px; letter-spacing: 3px; margin: 0; padding: 10px 50px; text-transform: uppercase; }
.plays { position: absolute; z-index: 2; }
#xs-os { top: 0; left: 10vw; width: 10vw; }
#slant-route { top: 5%; right: 15%; width: 20vw; }
#o-large { bottom: -20vw; right: -20vw; height: 40vw; }
#o-medium { bottom: -20vh; left: -10vw; }
#x-large { bottom: 0; left: 15vw; width: 10vw; }

@media screen and (max-width: 991px) {
    .top-brands .row { flex-direction: column; flex-wrap: wrap; padding: 50px 0; }
    .brands-headline-container { justify-content: center; }
    .brands-headline-container .img-full { width: 100%; }
    .brands-logo-container { margin-top: 0; }

    .problems-details { display: block; position: absolute; top: 15vw; }

    #problem-solutions .col-md-6:first-of-type, #problem-solutions .plays { display: none; }
    .problems-details h2, .problems-details p { text-align: center }
    .problems-details h2 { margin-right: 0; }
    .problems-details p { width: fit-content; }
    .problems-details a { display: block; margin: 0 auto 50px; width: fit-content; }

    .brand-highlight { height: calc(75vh - 200px); }
    .brand-highlight li.premiere  { height: 55vw; left: calc(30% - 25vw); top: calc(50% - 25vw); width: 55vw; }
    .brand-highlight li.secondary { bottom: calc(50% - 40vw); height: 30vw; right: 5vw; width: 30vw; }
    .brand-highlight li.third { height: 22vw; top: calc(50% - 35vw); right: 10vw;width: 22vw; }
    .brand-highlight li.fourth { bottom: calc(50% - 37vw); height: 15vw; left: calc(50% - 10vw); width: 15vw; }
}
@media screen and (min-width: 992px) and (max-width: 1199px){    
    .problems-details h2 { font-size: 36px; }
    .problems-details p { font-size: 18px; }
}
@media screen and (min-width: 1200px) and (max-width: 1299px){
    .problems-details p { font-size: 20px; }
}

/**
    E-Commerce Support
**/
#ecommerce-support { background-color:#000; background-image: url('../media/img/ecommerce-support-e.png'); background-position: left bottom calc(-10vh); background-repeat: no-repeat; }
#ecommerce-support .row { display: flex; align-items: stretch; padding: 150px 0; }
#ecommerce-support .col { padding-bottom: 400px; }
.support-details { padding: 15% 0 0 40%; }
.arrows-container .arrows { padding: 0 50px 25px 0; width: 25%; }
.arrows-container .arrows:last-of-type { padding-bottom: 0; transform: rotate(30deg); }
.support-details h2 { color: #fff; font-size: 58px; font-weight: 900; line-height: 1.25em; margin: 0; text-transform: uppercase; }
.support-details h2 span { color: #cff828; display:block; }
.support-details p { color: #fff; display: block; font-size: 20px; line-height: 1.5em; margin: 25px 0; }
.support-details a { border: 2px solid #fff; color: #fff; display: inline-block; font-size: 24px; letter-spacing: 3px; margin-top: 25px; padding: 10px 50px; text-transform: uppercase; }
.platform-experts { display: block; padding: 15% 0 0; position: relative; width: 100%; }
.platform { list-style-type: none; margin: 0; padding: 0; position: relative; }
.platform li.showcase { background: url('../media/img/platform-showcase-circle-outline.png') no-repeat center center; background-size: contain; height: 30vw; position: absolute; right: 5vw; width: 29vw; }
.platform li.showcase div.inner { background: url('../media/img/platform-showcase-shopify-experts.png') no-repeat center center; background-size: contain; display: flex; align-items: center; justify-content: center; height: 23vw; position: absolute; left: 45px; top: 35px; width: 21vw; }
.showcase h3 { text-align: center; }
.showcase h3 span { background: #fff; display:inline-block; font-size: 28px; font-weight: 900; padding: 5px 20px; }
.platform .highlight { border: 4px solid #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; height: 10vw; position: absolute; width: 10vw; }
.platform .highlight h3 { color: #fff; font-size: 16px; font-weight: 900; margin: 0; padding: 0 5px; text-align: center; }
.platform .highlight h3 span { background-color: #9501b0; display: block; margin: 0 auto 10px; padding: 5px 15px; width: fit-content; }
.highlight[data-platform-order="1"] { top: 0; left: 5vw; }
.highlight[data-platform-order="2"] { top: 12vw; left: 30px; height: 12vw; width: 12vw; }
.highlight[data-platform-order="3"] { top: 26vw; left: 7vw; height: 14vw; width: 14vw; }
.highlight[data-platform-order="4"] { top: 27vw; left: 25vw; height: 16vw; width: 16vw; background: #000; box-shadow: 0 0 0 25px #000; }

@media screen and (max-width: 991px){
    #ecommerce-support { background-image: unset;}
    #ecommerce-support .row { flex-direction: column; flex-wrap: wrap; padding: 50px 0; }
    #ecommerce-support .col { padding-bottom: 0; }
    .platform-experts { overflow: hidden; min-height: 50vh; padding: 5vh 0; }
    .support-details { padding: 0; }
    .support-details h2 { font-size: 36px; }
    .support-details a { padding: 10px 25px; text-align: center; width: 100%; }  
    .platform li.showcase { height: 93vw; right: 0; width: 90vw; }
    .platform li.highlight { display: none; }
    .platform li.showcase div.inner { background-size: cover; height: 68vw; left: 30px; top: 35px; width: 70vw; }
    .showcase h3 span { padding: 5px 20px; }
}
@media screen and (min-width: 992px) and (max-width: 1100px){
    #ecommerce-support { background-image: none; }
    #ecommerce-support .row { padding: 50px 0; }
    #ecommerce-support .col { padding-bottom: 75px; }
    .support-details { padding-left: 2vw!important; }
    .support-details h2 { font-size: 36px; }
    .platform .highlight h3 { font-size: 11px; }
    .platform .highlight h3 span { border-radius: 5px; padding: 5px; }
    .showcase h3 span { font-size: 18px; padding: 8px 20px; }
}
@media screen and (min-width: 1100px) and (max-width: 1299px){    
    #ecommerce-support { background-size: 27vh; }
    #ecommerce-support .row { padding: 50px 0; }
    #ecommerce-support .col { padding-bottom: 200px; }
    .support-details { padding: 15% 0 0 15%; }
    .platform .highlight { height: 12vw; width: 12vw; }
    .platform .highlight h3 { font-size: 15px; }
    .platform .highlight h3 span { font-size: 12px; }
    .highlight[data-platform-order="1"] { left: 2vw; }    
    .showcase h3 span { font-size: 24px; }
    .support-details h2 { font-size: 46px; }    
}
@media screen and (min-width: 1300px) and (max-width: 1399px) {
    #ecommerce-support { background-size: 60vh; }
    .support-details h2 { font-size: 52px; }
}

/**
    Brand Compliant Design
**/
#brand-compliant-design .row { display: flex; align-items: center; padding: 100px 0; }
.brand-design img { width: 100%; }
#brand-compliant-design h2 { font-size: 70px; font-weight: 900; text-transform: uppercase; }
#brand-compliant-design .smaller-width { padding: 0 125px; }
#brand-compliant-design p { display: block; font-size: 26px; line-height: 1.5em; margin: 50px 0; }
.compliant-work-container { background-color: #000; display: flex; justify-content: space-around; padding: 3em 2em; }
.compliant-work { margin: 0; padding: 0; }
.compliant-work li { color: #cff828; font-size: 26px; }
.compliant-work li span { color: #fff; }
#brand-compliant-design a { border: 2px solid #000; color: #000; display: block; font-size: 24px; letter-spacing: 3px; margin: 50px 0; padding: 10px 50px; text-transform: uppercase; width: fit-content; }

@media screen and (max-width: 991px){
    #brand-compliant-design .row { flex-wrap: wrap; justify-content: center;}
    #brand-compliant-design .col-md-6:first-of-type { order: 2; }
    #brand-compliant-design .col-md-6:last-of-type { order: 1; }
    #brand-compliant-design .smaller-width { padding: 0 15px; }
    #brand-compliant-design a { margin: 50px auto; }
    #brand-compliant-design h2 { font-size: 36px; line-height: 48px; }
    #brand-compliant-design p { font-size: 22px; }
    .compliant-work-container { justify-content: space-between; }
    .compliant-work li { font-size: 18px; }
}
@media screen and (min-width: 992px) and (max-width: 1099px){
    #brand-compliant-design h2 { font-size: 34px; }
    #brand-compliant-design p { font-size: 16px; }
    .compliant-work li { font-size: 14px; }
    #brand-compliant-design a { padding: 10px 25px; }
}
@media screen and (min-width: 1100px) and (max-width: 1199px){
    #brand-compliant-design h2 { font-size: 40px; }
    #brand-compliant-design p { font-size: 16px; }
    .compliant-work li { font-size: 14px; }
}
@media screen and (min-width: 1200px) and (max-width: 1299px){
    #brand-compliant-design h2 { font-size: 46px; }
    #brand-compliant-design p { font-size: 18px; }
    .compliant-work li { font-size: 16px; }
}
@media screen and (min-width: 1300px) and (max-width: 1399px){
    #brand-compliant-design h2 { font-size: 46px; }
    #brand-compliant-design p { font-size: 22px; }
    .compliant-work li { font-size: 19px; }
}

/**
    Aren't Selling Advertising
**/
#selling-advertising { background: url('../media/img/not-selling-advertising-arrow.png')#000 no-repeat center left; position: relative; }
#selling-advertising:after { content: ""; background: url('../media/img/not-selling-advertising-arrow.png') transparent no-repeat; display: block; height: 100vh; position: absolute; right: 0; top: 150px; width: 100vw; transform: scaleX(-1); }
#selling-advertising .row { padding: 150px 0; position: relative; }
#selling-advertising .col { padding: 0 15%; }
#selling-advertising span { display: block; }
.transparent-yellow { color: #000; font-size: calc(100vw / 10); font-weight: 900; padding-left: 13%; text-transform: uppercase; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #cff828; }
.big-block { color: #fff; font-size: calc(100vw / 10); font-weight: 900; text-transform: uppercase; }
.cursive-sell { color: #cff828; font-family: Amplify, sans-serif; font-size: calc(100vw / 10); padding-left: 17%; }
.double-shadow { color: #000; font-size: calc(100vw / 15); font-style: italic; font-weight: 900; position: relative; text-align: right; text-transform: uppercase; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #fff; }
.double-shadow:before { content: "Advertising"; color: #000; font-size: calc(100vw / 15); font-style: italic; font-weight: 900; position: absolute; right: 8px; top: -8px; text-align: right; text-transform: uppercase; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #fff; }
.double-shadow:after { content: "Advertising"; color: #000; font-size: calc(100vw / 15); font-style: italic; font-weight: 900; position: absolute; right: 16px; bottom: 16px; text-align: right; text-transform: uppercase; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #fff; }
.not-selling-plus { border: 2px solid #fff; border-radius: 50%; padding: 40px; position: absolute;  }
#top-right-plus-large { right: 10%; top: 10%; }
#top-right-plus-small { right: 5%; top: 10%; height: 50px; padding: 10px; }
#lower-left-plus-medium { left: 17%; bottom: 33%; height: 70px; padding: 10px; }

@media screen and (max-width: 991px){
    #selling-advertising, #selling-advertising:after { background-image: none; }   
    #selling-advertising .row { padding: 100px 0; }
    #top-right-plus-large { top: 10px; padding: 20px!important; width: 25vw; }
    #top-right-plus-small { height: 35px; right: 5px; padding: 10px; top: 5px; }
    #lower-left-plus-medium { left: 10%; bottom: 10%; }
    .double-shadow { margin-top: 15px; }
}
@media screen and (min-width: 992px) and (max-width: 1100px){
    #selling-advertising { background-image: none; }
    #selling-advertising:after { display: none!important; }
    #top-right-plus-large { right: 8%; top: 5%; }
    #top-right-plus-small { right: 2%; top: 5%; }
}
@media screen and (min-width: 1100px) and (max-width: 1200px){
    #selling-advertising { background-image: none; }
    #selling-advertising:after { display: none!important; }
    #top-right-plus-large { right: 8%; top: 5%; }
    #top-right-plus-small { right: 2%; top: 5%; }
}
@media screen and (min-width: 1200px) and (max-width: 1299px){
    #selling-advertising { background-image: none; }
    #selling-advertising:after { display: none!important; }
    #top-right-plus-large { right: 8%; top: 5%; }
    #top-right-plus-small { right: 2%; top: 5%; }
}


/**
    Constulting & Audits
**/
#consulting-audits { background: #000; }
.consulting-details { padding: 5rem; }
#consulting-focused { background: url('../media/img/consulting-focused-bg-image.png') no-repeat center center; background-size: contain; display: block; padding-top: 100%; position: relative; }
.consulting-details h2 { font-size: 72px; font-weight: 700; margin: 0; }
.consulting-details p { font-size: 26px; line-height: 36px; margin: 0; padding: 35px 0; }
#consulting-focused img  { animation: Hover 4s linear infinite; position: absolute; left: 10%; top: 10%; width: 80%; }
.consulting-highlights { border: 2px solid #fff; display: flex; align-items: center; justify-content: space-between; padding: 15px; width: fit-content; }
.consulting-highlights ul { margin: 0 40px; padding: 0; }
.consulting-highlights ul li { font-size: 26px; padding: 7px 0; }
.contact-consulting { border: 2px solid #fff; display: block; font-size: 26px; letter-spacing: 3px; margin: 35px 0 0; padding: 15px 35px; width: fit-content; }
@media screen and (max-width: 991px){
    #consulting-audits .row { display: flex; flex-wrap: wrap; }
    #consulting-audits .col-md-6:first-of-type { order: 2; }
    #consulting-audits .col-md-6:last-of-type { order: 1; }
    #consulting-focused { width: calc(100vw - 30px); }
    .consulting-details { padding: 1.5rem; }
    .consulting-details h2 { font-size: 32px; }
    .consulting-details p { font-size: 16px; }
    .consulting-highlights { flex-wrap: wrap; }
    .consulting-highlights ul li { font-size: 15px; }
    .contact-consulting { text-align: center; width: 100%; }
}
@media screen and (min-width: 992px) and (max-width: 1100px){
    #consulting-audits .row { display: flex; align-items: center; }
    .consulting-details h2 { font-size: 56px; }
    .consulting-details p { font-size: 22px; line-height: 30px; }
    .consulting-highlights ul li { font-size: 16px; padding: 3px 0; }
}
@media screen and (min-width: 1100px) and (max-width: 1200px){
    #consulting-audits .row { display: flex; align-items: center; }
    .consulting-details h2 { font-size: 62px; }
    .consulting-details p { font-size: 24px; line-height: 30px; }
    .consulting-highlights ul li { font-size: 18px; padding: 3px 0; }
}
@media screen and (min-width: 1200px) and (max-width: 1299px){
    #consulting-audits .row { display: flex; align-items: center; }
}


/**
    We make you look good
**/
#look-good { background: url('../media/img/kea-digital-makes-you-look-good-bg.jpg') no-repeat center center; background-size: cover; padding: 50px 0; }
#look-good h2 { margin: 0; font-size: 48px; }
#look-good h2 .callout { display: block; font-size: 84px; letter-spacing: 3px; margin-top: 20px; }
@media screen and (max-width: 991px){    
    #look-good h2 { font-size: 24px; }
}

/**
    Contact Styles
**/
#contact-kea-digital { background: #000; background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 50%, rgba(149,1,176,1) 100%); }
#contact-kea-digital .container { padding: 100px 0; }
#contact-kea-digital h2 { color: #cff828; font-size: 96px; font-weight: 900; margin: 0; padding-bottom: 25px; text-align: center; text-transform: uppercase; }
#contact-kea-digital p { color: #fff; display: block; font-size: 16px; margin: 0 auto; width: 450px; text-align: center; }
#contact-kea-digital form { margin: 50px auto 0; width: 60%; }
#contact-kea-digital form label { color: #fff; font-size: 16px; font-weight: 400; padding: 10px 0; }
#contact-kea-digital .form-control { border-radius: 0; font-size: 18px; height: inherit!important; padding: 10px; }
#contact-kea-digital form input[type="submit"] { background: #cff828; border: none; border-radius: 0; color: #000; display: block; font-size: 24px; font-weight: 600; margin: 60px auto 0; padding: 15px; text-transform: uppercase; width: 450px; }
input[name="contact_primary_desire"], label[for="contact_primary_desire"] { position: absolute; left: 0; bottom: 0; visibility: hidden; }


/**
    Footer Styles
**/
#footer { background: #485254; padding: 15px 50px; }
#footer ul { display: flex; align-items: center; justify-content: center; flex-direction: row; list-style-type: none; margin: 0 auto; padding: 0; }
#footer ul li, #footer ul li a { color: #fff; }
#footer ul li { padding: 5px 10px; text-align: center; }
#footer ul li:before { content: ""; background: #fff; display: block; height: 100%; width: 2px; }
#footer ul li img { width: 150px; }


/**
    Responsive Styles
**/
@media screen and (max-width: 749px) {
    /**
        Header Styles
    **/
    #header { flex-wrap: wrap; height: inherit!important; justify-content: center; }
    .top-nav { justify-content: center; }
    
    /**
        Video Styles
    **/
    #kea-digital-video-hero { height: 35vh; }
    #bg-full-video { height: inherit!important; }
    /**
        Contact Styles
    **/
    #contact-kea-digital form { width: 90%; }
    #contact-kea-digital h2 { font-size: 48px; }
    #contact-kea-digital p { width: 80%; }
    #contact-kea-digital form input[type="submit"] { width: 100%; }

    /**
        Footer Styles
    **/
    #footer ul { flex-direction: column; justify-content: center; list-style-type: none; margin: 0 auto; padding: 0; }
    #footer ul li { color: #fff; padding: 5px 0; text-align: center; }
    #footer ul li img { width: 100%; }
    #footer ul li a { color: #fff; }
    .spacer { display: none; }
}

@keyframes Hover {
    0%, 100% {
        top: 10%;        
    }
    25%, 75% {
        /*transform: rotate(5deg)*/
    }
    50% {
        top: 0%;
        /*transform: rotate(10deg);*/
    }
}