@charset "UTF-8";


/* Index */

#banner {
   width: 100vw;
   height: 125vh;
   display: block;
   position: relative;
   z-index: 89;
}


.scene, .scene2 {
	position: absolute;
	width: 100%;
	transform: translateY(var(--translateY));
	will-change: transform;
}

#foreground {
   position: absolute;
   background-image: url("../images/hero_fg_min.png");
   background-position: center bottom;
   background-size: cover;
   background-repeat: no-repeat;
   top: 0;
   width: 100vw;
   height: 135vh;
   margin: auto;
   pointer-events: none;
	transform: translateY(var(--translateY));
	will-change: transform;
}

#foreground2 {
   position: absolute;
   background-image: url("../images/hero_fg2_min.png");
   background-position: center bottom;
   background-size: cover;
   background-repeat: no-repeat;
   top: 0;
   width: 100vw;
   height: 115vh;
   margin: auto;
   pointer-events: none;
	transform: translateY(var(--translateY));
	will-change: transform;
}

#foreground3 {
   position: absolute;
   background-image: url("../images/hero_fg3_min.png");
   background-position: center bottom;
   background-size: cover;
   background-repeat: no-repeat;
   top: 0;
   width: 100vw;
   height: 110vh;
   margin: auto;
   pointer-events: none;
	transform: translateY(var(--translateY));
	will-change: transform;
}

#foreground4 {
   position: absolute;
   background-image: url("../images/hero_fg4_min.png");
   background-position: center bottom;
   background-size: cover;
   background-repeat: no-repeat;
   top: 0;
   width: 100vw;
   height: 110vh;
   margin: auto;
   pointer-events: none;
	transform: translateY(var(--translateY));
	will-change: transform;
}

#background {
   position: absolute;
   background-image: url("../images/hero_bg.jpg");
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
   top: 0;
   width: 100vw;
   height: 100vh;
   margin: auto;
	transform: translateY(var(--translateY));
	will-change: transform;
}

#heroTitle1 {
   position: absolute;
   background-image: url("../images/hero_thirdeye.png");
   background-position: center bottom;
   background-size: 90% auto;
   background-repeat: no-repeat;
   top: 2vw;
   width: 100vw;
   height: 32vh;
   margin: auto;
   pointer-events: none;
	transform: translateY(var(--translateY));
	will-change: transform;
}

#heroTitle2 {
   position: absolute;
   background-image: url("../images/hero_creative.png");
   background-position: center top;
   background-size: 60% auto;
   background-repeat: no-repeat;
   top: 75vh;
   width: 100vw;
   height: 25vh;
   margin: auto;
   pointer-events: none;
	transform: translateY(var(--translateY));
	will-change: transform;
}

#heroSlogan {
   position: absolute;
   bottom: calc(25vh + 55px);
   width: 100vw;
   height: 5vh;
   margin: auto;
   pointer-events: none;
	transform: translateY(var(--translateY));
	will-change: transform;
}

#innerheroSlogan {
   position: absolute;
   bottom: calc(1vh + 45px);
   width: 100vw;
   height: 5vh;
   margin: auto;
   pointer-events: none;
	transform: translateY(var(--translateY));
	will-change: transform;
}

#heroSlogan h1, #innerheroSlogan h1 {
   pointer-events: none;
   color: #ffffff;
   text-transform: uppercase;
   font-size: 120%;
   font-weight: 400;
   letter-spacing: 2px;
	transform: translateY(var(--translateY));
	will-change: transform;
}

.blackOverlay {
   background-color: #000000;
   opacity: 0;
   position: absolute;
   top: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
	transform: translateY(var(--translateY));
	will-change: transform;
}

.whiteOverlay {
   background-color: #F4F4F4;
   opacity: 0;
   position: absolute;
   top: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
	transform: translateY(var(--translateY));
	will-change: transform;
}


/* Websites */

#webbanner {
   width: 100vw;
   height: 100vh;
   display: block;
   position: relative;
   z-index: 89;
}

#webforeground {
   position: absolute;
   background-image: url("../images/web_fg_min.png");
   background-position: center bottom;
   background-size: 100% auto;
   background-repeat: no-repeat;
   top: 0;
   width: 100vw;
   height: 105vh;
   margin: auto;
   pointer-events: none;
	transform: translateY(var(--translateY));
	will-change: transform;
}

#weblaptops {
   position: absolute;
   background-image: url("../images/web_laptops_min.png");
   background-position: center bottom;
   background-size: 100% auto;
   background-repeat: no-repeat;
   top: 0;
   width: 100vw;
   height: 105vh;
   margin: auto;
   pointer-events: none;
	transform: translateY(var(--translateY));
	will-change: transform;
}

#webforeground2 {
   position: absolute;
   background-image: url("../images/web_fg2_min.png");
   background-position: center bottom;
   background-size: 100% auto;
   background-repeat: no-repeat;
   top: 0;
   width: 100vw;
   height: 100vh;
   margin: auto;
   pointer-events: none;
	transform: translateY(var(--translateY));
	will-change: transform;
}

#webbackground {
   position: absolute;
   background-image: url("../images/web_bg.jpg");
   background-position: center top;
   background-size: cover;
   background-repeat: no-repeat;
   top: 0;
   width: 100vw;
   height: 100vh;
   margin: auto;
	transform: translateY(var(--translateY));
	will-change: transform;
}

#webheroTitle1 {
   position: absolute;
   background-image: url("../images/hero_web.png");
   background-position: center bottom;
   background-size: 90% auto;
   background-repeat: no-repeat;
   top: 2vw;
   width: 100vw;
   height: 33vh;
   margin: auto;
   pointer-events: none;
	transform: translateY(var(--translateY));
	will-change: transform;
}


/* Print */

#printbanner {
   width: 100vw;
   height: 100vh;
   display: block;
   position: relative;
   z-index: 89;
}

#printforeground {
   position: absolute;
   background-image: url("../images/print_fg_min.png");
   background-position: center bottom;
   background-size: 100% auto;
   background-repeat: no-repeat;
   top: 0;
   width: 100vw;
   height: 100vh;
   margin: auto;
   pointer-events: none;
	transform: translateY(var(--translateY));
	will-change: transform;
}

#printforeground2 {
   position: absolute;
   background-image: url("../images/print_fg2_min.png");
   background-position: center bottom;
   background-size: 100% auto;
   background-repeat: no-repeat;
   top: 0;
   width: 100vw;
   height: 73vw;
   margin: auto;
   pointer-events: none;
	transform: translateY(var(--translateY));
	will-change: transform;
}

#printforeground3 {
   position: absolute;
   background-image: url("../images/print_fg3_min.png");
   background-position: center bottom;
   background-size: 100% auto;
   background-repeat: no-repeat;
   top: 0;
   width: 100vw;
   height: 73vw;
   margin: auto;
   pointer-events: none;
	transform: translateY(var(--translateY));
	will-change: transform;
}

#printbackground {
   position: absolute;
   background-image: url("../images/print_bg.jpg");
   background-position: center bottom;
   background-size: cover;
   background-repeat: no-repeat;
   top: 0;
   width: 100vw;
   height: 100vh;
   margin: auto;
	transform: translateY(var(--translateY));
	will-change: transform;
}

#printheroTitle1 {
   position: absolute;
   background-image: url("../images/hero_print.png");
   background-position: center bottom;
   background-size: 90% auto;
   background-repeat: no-repeat;
   top: 2vw;
   width: 100vw;
   height: 33vh;
   margin: auto;
   pointer-events: none;
	transform: translateY(var(--translateY));
	will-change: transform;
}


/* Brand */

#brandbanner {
   width: 100vw;
   height: 100vh;
   display: block;
   position: relative;
   z-index: 89;
}

#brandforeground {
   position: absolute;
   background-image: url("../images/brand_fg_min.png");
   background-position: center bottom;
   background-size: 100% auto;
   background-repeat: no-repeat;
   top: 0;
   width: 100vw;
   height: 100vh;
   margin: auto;
   pointer-events: none;
	transform: translateY(var(--translateY));
	will-change: transform;
}

#brandforeground2 {
   position: absolute;
   background-image: url("../images/brand_fg2_min.png");
   background-position: center bottom;
   background-size: 100% auto;
   background-repeat: no-repeat;
   top: 0;
   width: 100vw;
   height: 100vh;
   margin: auto;
   pointer-events: none;
	transform: translateY(var(--translateY));
	will-change: transform;
}

#brandbackground {
   position: absolute;
   background-image: url("../images/brand_bg.jpg");
   background-position: center bottom;
   background-size: cover;
   background-repeat: no-repeat;
   top: 0;
   width: 100vw;
   height: 105vh;
   margin: auto;
	transform: translateY(var(--translateY));
	will-change: transform;
}

#brandheroTitle1 {
   position: absolute;
   background-image: url("../images/hero_brand.png");
   background-position: center bottom;
   background-size: 90% auto;
   background-repeat: no-repeat;
   top: 2vw;
   width: 100vw;
   height: 33vh;
   margin: auto;
   pointer-events: none;
	transform: translateY(var(--translateY));
	will-change: transform;
}


/* Promos */

#promobanner {
   width: 100vw;
   height: 100vh;
   display: block;
   position: relative;
   z-index: 89;
}

#promoforeground {
   position: absolute;
   background-image: url("../images/promo_fg_min.png");
   background-position: center bottom;
   background-size: 100% auto;
   background-repeat: no-repeat;
   top: 0;
   width: 100vw;
   height: 100vh;
   margin: auto;
   pointer-events: none;
	transform: translateY(var(--translateY));
	will-change: transform;
}

#promoforeground2 {
   position: absolute;
   background-image: url("../images/promo_fg2_min.png");
   background-position: center bottom;
   background-size: 100% auto;
   background-repeat: no-repeat;
   top: 0;
   width: 100vw;
   height: 80vw;
   margin: auto;
   pointer-events: none;
	transform: translateY(var(--translateY));
	will-change: transform;
}

#promoforeground3 {
   position: absolute;
   background-image: url("../images/promo_fg3_min.png");
   background-position: center bottom;
   background-size: 100% auto;
   background-repeat: no-repeat;
   top: 0;
   width: 100vw;
   height: 80vw;
   margin: auto;
   pointer-events: none;
	transform: translateY(var(--translateY));
	will-change: transform;
}

#promobackground {
   position: absolute;
   background-image: url("../images/promo_bg.jpg");
   background-position: center top;
   background-size: cover;
   background-repeat: no-repeat;
   top: 0;
   width: 100vw;
   height: 100vh;
   margin: auto;
	transform: translateY(var(--translateY));
	will-change: transform;
}

#promoheroTitle1 {
   position: absolute;
   background-image: url("../images/hero_promo.png");
   background-position: center bottom;
   background-size: 90% auto;
   background-repeat: no-repeat;
   top: 2vw;
   width: 100vw;
   height: 33vh;
   margin: auto;
   pointer-events: none;
	transform: translateY(var(--translateY));
	will-change: transform;
}


/* Apparel */

#apparelbanner {
   width: 100vw;
   height: 100vh;
   display: block;
   position: relative;
   z-index: 89;
}

#apparelforeground {
   position: absolute;
   background-image: url("../images/apparel_fg_min.png");
   background-position: center bottom;
   background-size: 100% auto;
   background-repeat: no-repeat;
   top: 0;
   width: 100vw;
   height: 100vh;
   margin: auto;
   pointer-events: none;
	transform: translateY(var(--translateY));
	will-change: transform;
}

#apparelforeground2 {
   position: absolute;
   background-image: url("../images/apparel_fg2_min.png");
   background-position: center bottom;
   background-size: 100% auto;
   background-repeat: no-repeat;
   top: 0;
   width: 100vw;
   height: 85vw;
   margin: auto;
   pointer-events: none;
	transform: translateY(var(--translateY));
	will-change: transform;
}

#apparelbackground {
   position: absolute;
   background-image: url("../images/apparel_bg.jpg");
   background-position: center top;
   background-size: cover;
   background-repeat: no-repeat;
   top: 0;
   width: 100vw;
   height: 100vh;
   margin: auto;
	transform: translateY(var(--translateY));
	will-change: transform;
}

#apparelheroTitle1 {
   position: absolute;
   background-image: url("../images/hero_apparel.png");
   background-position: center bottom;
   background-size: 90% auto;
   background-repeat: no-repeat;
   top: 2vw;
   width: 100vw;
   height: 33vh;
   margin: auto;
   pointer-events: none;
	transform: translateY(var(--translateY));
	will-change: transform;
}


/* Displays */

#displaysbanner {
   width: 100vw;
   height: 100vh;
   display: block;
   position: relative;
   z-index: 89;
}

#displaysforeground {
   position: absolute;
   background-image: url("../images/display_fg_min.png");
   background-position: center bottom;
   background-size: 90% auto;
   background-repeat: no-repeat;
   top: 0;
   width: 100vw;
   height: 99vh;
   margin: auto;
   pointer-events: none;
	transform: translateY(var(--translateY));
	will-change: transform;
}

#displaysforeground2 {
   position: absolute;
   background-image: url("../images/display_fg2_min.png");
   background-position: center bottom;
   background-size: 100% auto;
   background-repeat: no-repeat;
   top: 0;
   width: 100vw;
   height: 100vh;
   margin: auto;
   pointer-events: none;
	transform: translateY(var(--translateY));
	will-change: transform;
}

#displaysbackground {
   position: absolute;
   background-image: url("../images/display_bg.jpg");
   background-position: center bottom;
   background-size: cover;
   background-repeat: no-repeat;
   top: 0;
   width: 100vw;
   height: 105vh;
   margin: auto;
	transform: translateY(var(--translateY));
	will-change: transform;
}

#displaysheroTitle1 {
   position: absolute;
   background-image: url("../images/hero_displays.png");
   background-position: center bottom;
   background-size: 90% auto;
   background-repeat: no-repeat;
   top: 2vw;
   width: 100vw;
   height: 33vh;
   margin: auto;
   pointer-events: none;
	transform: translateY(var(--translateY));
	will-change: transform;
}


/* Digital */

#digitalbanner {
   width: 100vw;
   height: 110vh;
   display: block;
   position: relative;
   z-index: 89;
}

#digitalforeground {
   position: absolute;
   background-image: url("../images/digital_fg_min.png");
   background-position: center bottom;
   background-size: 100% auto;
   background-repeat: no-repeat;
   top: 0;
   width: 100vw;
   height: 110vh;
   margin: auto;
   pointer-events: none;
	transform: translateY(var(--translateY));
	will-change: transform;
}

#digitaltarget {
   position: absolute;
   background-image: url("../images/digital_target_min.png");
   background-position: center bottom;
   background-size: 40% auto;
   background-repeat: no-repeat;
   top: 0;
   left: 0.75vw;
   width: 99.25vw;
   height: 105vh;
   margin: auto;
   pointer-events: none;
	transform: translateY(var(--translateY));
	will-change: transform;
}

#digitalforeground2 {
   position: absolute;
   background-image: url("../images/digital_fg2_min.png");
   background-position: center bottom;
   background-size: 100% auto;
   background-repeat: no-repeat;
   top: 0;
   width: 100vw;
   height: 105vh;
   margin: auto;
   pointer-events: none;
	transform: translateY(var(--translateY));
	will-change: transform;
}

#digitalbackground {
   position: absolute;
   background-image: url("../images/digital_bg.jpg");
   background-position: center top;
   background-size: cover;
   background-repeat: no-repeat;
   top: 0;
   width: 100vw;
   height: 100vh;
   margin: auto;
	transform: translateY(var(--translateY));
	will-change: transform;
}

#digitalheroTitle1 {
   position: absolute;
   background-image: url("../images/hero_digital.png");
   background-position: center bottom;
   background-size: 90% auto;
   background-repeat: no-repeat;
   top: 2vw;
   width: 100vw;
   height: 33vh;
   margin: auto;
   pointer-events: none;
	transform: translateY(var(--translateY));
	will-change: transform;
}

#digitalbanner #innerheroSlogan {
   bottom: calc(11vh + 45px);
}

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 812px) {

#heroSlogan h1 {
   font-size: 150%;
}

#heroTitle2 {
   background-size: 80% auto;
   top: 69vh;
}

#foreground {
   top: 0;
}

#foreground2, #foreground3, #foreground4 {
   top: -8vh;
}
}


@media (min-width: 1200px) {

/* Web */

#weblaptops {
   background-size: 90% auto;
   height: 102vh;
}


/* Brand */

#brandforeground {
   background-size: 90% auto;
}


/* Promo */

#promoforeground2 {
   height: 77vw;
}


/* Apparel */

#apparelforeground2 {
   height: 80vw;
}


/* Digital */

#digitaltarget {
   background-size: 39% auto;
}


/* Displays */

#displaysbanner {
   height: 110%;
}

#displaysforeground {
   background-size: 90% auto;
   height: 90%;
}

#displaysforeground2 {
   height: 98%;
}

#displaysbanner #innerheroSlogan {
   bottom: calc(11vh + 45px);
}
}


@media (min-width: 1250px) {

/* Web */

#weblaptops {
   height: 105vh;
}


/* Displays */

#displaysbanner {
   height: 110%;
}

#displaysforeground {
   background-size: 75% auto;
   height: 85%;
}

#displaysforeground2 {
   height: 95%;
}
}


@media (min-width: 1350px) {

/* Web */

#weblaptops {
   background-size: 80% auto;
   height: 100vh;
}


/* Print */

#printbackground {
   height: 120vh;
}


/* Brand */

#brandforeground {
   background-size: 85% auto;
}


/* Promo */

#promoforeground2 {
   height: 75vw;
}


/* Apparel */

#apparelforeground2 {
   height: 75vw;
}


/* Displays */

#displaysbanner {
   height: 110%;
}

#displaysforeground {
   background-size: 78% auto;
}

#displaysforeground2 {
   height: 100%;
}
}


@media (min-width: 1450px) {

/* Web */

#weblaptops {
   background-size: 75% auto;
}


/* Promo */

#promobackground {
   height: 120vh;
}

#promoforeground2 {
   height: 70vw;
}


/* Displays */

#displaysbanner {
   height: 110%;
}

#displaysforeground {
   background-size: 73% auto;
}

#displaysforeground2 {
   height: 100%;
}

#displaysbackground {
    height: 120vh;
}
}

	
@media only screen and (max-device-width: 1200px) 
and (orientation: portrait) {

/* Websites */

#webforeground {
   background-size: 140% auto;
   height: 90vh;
}

#weblaptops {
   background-size: 170% auto;
   height: 90vh;
}

#webforeground2 {
    height: 80vh;
}

/* Print */

#printbackground {
   height: 120vh;
}

#printforeground {
   background-size: 150% auto;
   height: 100vh;
}

#printforeground2 {
   background-size: 200% auto;
   height: 100vh;
}

#printforeground3 {
   background-size: 200% auto;
   height: 100vh;
}

/* Brand */

#brandbackground {
   height: 110vh;
}

#brandforeground {
   background-size: 230% auto;
   height: 105vh;
}

#brandforeground2 {
   background-size: 200% auto;
   height: 100vh;
}

/* Promo */

#promobackground {
   height: 120vh;
   background-position: center bottom;
}

#promoforeground {
   background-size: 150% auto;
   height: 100vh;
}

#promoforeground2 {
   background-size: 200% auto;
   height: 100vh;
}

#promoforeground3 {
   background-size: 280% auto;
   height: 115vh;
}

/* Apparel */

#apparelbackground {
   height: 120vh;
}

#apparelforeground {
   background-size: 150% auto;
   height: 100vh;
}

#apparelforeground2 {
   background-size: 230% auto;
   height: 110vh;
}


/* Displays */

#displaysforeground {
   background-size: 190% auto;
   height: 92%;
}

#displaysforeground2 {
   background-size: 220% auto;
}


/* Digital */

#digitalforeground {
   background-size: 120% auto;
   height: 90vh;
}

#digitaltarget {
   background-size: 90% auto;
   height: 100vh;
}

#digitalforeground2 {
   height: 75vh;
}
}

	
@media only screen and (max-device-width: 1200px) 
and (orientation: landscape) {


/* Websites */

#webbanner {
    height: 110vh;
}

#webforeground {
    height: 120vh;
}

#weblaptops {
   background-size: 90% auto;
   height: 120vh;
}

#webforeground2 {
    height: 120vh;
}

#webbanner #innerheroSlogan {
   bottom: calc(11vh + 45px);
}


/* Print */

#printbackground {
   height: 140vh;
}

#printforeground {
   background-size: 100% auto;
   height: 100vh;
}

#printforeground2 {
   background-size: 100% auto;
   height: 125vh;
}

#printforeground3 {
   background-size: 100% auto;
   height: 125vh;
}


/* Brand */

#brandbanner {
    height: 120vh;
}

#brandbackground {
   height: 100vh;
}

#brandforeground {
   background-size: 93% auto;
   height: 115vh;
}

#brandforeground2 {
   background-size: 100% auto;
   height: 125vh;
}

#brandbanner #innerheroSlogan {
   bottom: calc(21vh + 45px);
}


/* Promo */

#promobanner {
    height: 110vh;
}

#promobackground {
   height: 140vh;
}

#promoforeground {
   background-size: 100% auto;
   height: 110vh;
}

#promoforeground2 {
   background-size: 100% auto;
   height: 125vh;
}

#promoforeground3 {
   background-size: 100% auto;
   height: 125vh;
}

#promobanner #innerheroSlogan {
   bottom: calc(11vh + 45px);
}


/* Apparel */

#apparelbanner {
    height: 120vh;
}

#apparelbackground {
   height: 140vh;
}

#apparelforeground {
   background-size: 100% auto;
   height: 120vh;
}

#apparelforeground2 {
   background-size: 100% auto;
   height: 135vh;
}

#apparelbanner #innerheroSlogan {
   bottom: calc(21vh + 45px);
}


/* Displays */

#displaysforeground {
   background-size: 70% auto;
   height: 100vh;
}

#displaysforeground2 {
   height: 120vh;
}


/* Digital */

#digitalbanner {
    height: 120vh;
}

#digitalforeground {
   height: 120vh;
}

#digitaltarget {
   height: 115vh;
}

#digitalforeground2 {
   height: 125vh;
}

#digitalbanner #innerheroSlogan {
   bottom: calc(21vh + 45px);
}
}

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 812px)
and (orientation: landscape) {

/* Home */

#foreground {
   height: 145vh;
}

#foreground2 {
   height: 120vh;
}

#foreground3 {
   height: 120vh;
}

#foreground4 {
   height: 120vh;
}

.eye {
  width: 45vw!important;
  height: 35vw!important;
}
.eyeCover {
  width: 45vw!important;
}
.eye::before {
  top: -80px!important;
}
.eye::after {
  height: 75%!important;
}

.eventListener {
  display: none!important;
}
}

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 812px)
and (orientation: portrait) {

#webheroTitle1, #printheroTitle1, #brandheroTitle1, #promoheroTitle1, #apparelheroTitle1, #displaysheroTitle1, #digitalheroTitle1 {
    top: -10vw;
}

.eventListener {
  display: none!important;
}
}