.box { width:100%; height:100vh;} header, .header-section { height: 106px; position: fixed; top: 0; transition: top 0.2s ease-in-out; width: 100%; z-index:10; } .nav-up { top: -106px; } body{background-color: #f4f3f4} html, body, div, p{font-family: 'GothamBook';} button{cursor:pointer} .justify{ /*text-align: justify; text-justify: inter-word;*/ } .outer-margins{margin-left:1.875rem; margin-right:1.875rem} /* Make the container relative */ .swap-on-hover, .swap-on-hover-right { position: relative; margin: 0 auto; } /* Select the image and make it absolute to the container */ .swap-on-hover img { position: absolute; top:0; left:0; overflow: hidden; margin-bottom:2rem; } /* Select the image and make it absolute to the container */ .swap-on-hover-right img { position: absolute; top:0; right:0; overflow: hidden; margin-bottom:2rem; } /* We set z-index to be higher than the back image, so it's alwyas on the front. We give it an opacity leaner to .25s, that way when we hover we will get a nice fading effect. */ .swap-on-hover .swap-on-hover__front-image { z-index: 9999; } /* When we hover the figure element, the block with .swap-on-hover, we want to use > so the front-image is going to have opacity of 0, which means it will be hidden, to the back image will show */ .swap-on-hover:hover > .swap-on-hover__front-image{ opacity: 0; } .swap-on-hover-right .swap-on-hover__front-image { z-index: 9999; } /* When we hover the figure element, the block with .swap-on-hover, we want to use > so the front-image is going to have opacity of 0, which means it will be hidden, to the back image will show */ .swap-on-hover-right:hover > .swap-on-hover__front-image{ opacity: 0; } #mobileHomeHeader{background: url("../img/mobile-home-header.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; height:100vh} #mobileContactHeader{background: url("../img/mobile-connect-header.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; height:100vh} #mobileServicesHeader{background: url("../img/mobile-services-header.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; height:100vh} #mobileTeamHeader{background: url("../img/mobile-team-header.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; height:100vh} #mobileWorkHeader{background: url("../img/mobile-work-header.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; height:100vh} #mobileNewsHeader{background: url("../img/mobile-news-header.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; height:100vh} #mobileCampaign{background: url("../img/mobile-campaign-header.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; height:100vh} #mobileDisplay{background: url("../img/mobile-display-header.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; height:100vh} #mobileLarge{background: url("../img/mobile-large-header.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; height:100vh} #mobileSmall{background: url("../img/mobile-small-header.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; height:100vh} #mobilePOS{background: url("../img/mobile-pos-header.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; height:100vh} #mobileSignage{background: url("../img/mobile-signage-header.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; height:100vh} #mobileAustralasia{background: url("../img/mobile-australasia-header.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; height:100vh} #mobileIceland{background: url("../img/mobile-iceland-header.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; height:100vh} #mobilePennant{background: url("../img/mobile-pennant-header.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; height:100vh} #mobileSuperdrug{background: url("../img/mobile-superdrug-header.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; height:100vh} #mobileWonderwall{background: url("../img/mobile-wonderwall-header.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; height:100vh} .overlay { position: absolute; width: 100%; height:50%; top: 0px; left: 0px; z-index: 10; color:#fff; font-size:5rem; text-align:center; } /*Accordian*/ .container { padding:0; margin: 0; width: 100%; background-color:#000; } .gallery-wrap { display: flex; flex-direction: row; width: 100%; height: 50vh; } .item { flex: 1; height: 100%; background-position: center; background-size: cover; background-repeat: none; transition: flex 0.8s ease; text-align: center; font-family: 'GothamBold'; font-size: 2rem; color:#fff; } .item:hover { flex: 7; font-family: 'GothamBold'; font-size: 2rem; } .item-1 { background-image: url("../img/slider2.jpg"); } .item-2 { background-image: url("../img/slider3.jpg"); } .item-3 { background-image: url("../img/slider1.jpg"); } .item-4 { background-image: url("../img/slider4.jpg"); } /*Accordian End*/ .flip .front { border-radius:5px; color: #fff; text-align: center; padding:1rem; } .flip .back { border-radius:5px; /*color: #fff;*/ text-align: center; padding:1rem; /*background-color:#000;*/ } .blueBlack{background-color:#16428E; color:#fff} .pinkBlack{background-color:#FF4365; color:#000} .yellowBlack{background-color:#FFD400; color:#000} .tealBlack{background-color:#17C3B2; color:#000} .purpleBlack{background-color:#AD45FF; color:#000} .greenBlack{background-color: #3DD359; color:#000} /*61,211,89*/ .orangeBlack{background-color: #FF8C33; color:#000 } /*255,140,51*/ .flex-vertical { display: flex; align-items: center; justify-content: center; } /*Scroller*/ section { width: 100%; height: 100%; } #section07 { height:70px;} #section07 a { padding-top: 80px; } #section07 a span { position: absolute; top: 0; left: 50%; width: 24px; height: 24px; margin-left: -12px; border-left: 1px solid #fff; border-bottom: 1px solid #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: sdb07 2s infinite; animation: sdb07 2s infinite; opacity: 0; box-sizing: border-box; } #section07 a span:nth-of-type(1) { -webkit-animation-delay: 0s; animation-delay: 0s; } #section07 a span:nth-of-type(2) { top: 16px; -webkit-animation-delay: .15s; animation-delay: .15s; } #section07 a span:nth-of-type(3) { top: 32px; -webkit-animation-delay: .3s; animation-delay: .3s; } @-webkit-keyframes sdb07 { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes sdb07 { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } /*End Scroller*/ .sub-slider{height:500px;} ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #000; } ::-moz-placeholder { /* Firefox 19+ */ color: #000; } :-ms-input-placeholder { /* IE 10+ */ color: #000; } :-moz-placeholder { /* Firefox 18- */ color: #000; } .overlay { position: absolute; width: 100%; height:50%; top: 0px; left: 0px; z-index: 5; color:#fff; text-align:center; } .video-cover{ position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); min-width: 100%; min-height: 100%; width: auto; height: 100vh; z-index: -1000; overflow: hidden; object-fit: cover; } ul.bullets{ list-style:square} ul.list_links { list-style:none; margin-left: 0; } .font-1{font-size:1.5rem; font-family: 'GothamBook';} .font-2{font-size:2rem; font-family: 'GothamBook';} .list_links li { background:url("../img/tick.png") no-repeat left center; padding-left: 32px; /* the width of your image + some space */ margin-bottom:8px; min-height:24px; } .whiteButton{background-color: rgba(255,255,255,0); color:#fff; border:1px solid #FF4365; border-radius:2rem; padding:.5rem 2rem; font-size: 1.6rem; font-family: 'GothamLight'; cursor: pointer} .blackButton:hover{background-color: rgba(255,255,255,0); color:#000; border:1px solid #FF4365; border-radius:2rem; padding:.5rem 2rem; font-size: 1.6rem; font-family: 'GothamLight'; cursor: pointer} .allBlackButton{background-color: rgba(255,255,255,1); color:#000; border:1px solid #000; border-radius:2rem; padding:.5rem 2rem; font-size: 1.6rem; font-family: 'GothamBook'; cursor: pointer} .allBlackButton:hover{background-color: rgba(255,255,255,1); color:#000; border:1px solid #000; border-radius:2rem; padding:.5rem 2rem; font-size: 1.6rem; font-family: 'GothamBook'; cursor: pointer} .tealButton{background-color: #17C3B2; color:#fff; border:1px solid #17C3B2; border-radius:2rem; padding:.5rem 2rem; font-size: 1.6rem; font-family: 'GothamLight'; cursor: pointer} .tealButton:hover{background-color: #fff; color:#17C3B2; border:1px solid #17C3B2; border-radius:2rem; padding:.5rem 2rem; font-size: 1.6rem; font-family: 'GothamLight'; cursor: pointer} .blueButton{background-color: #16428E; color:#fff; border:1px solid #16428E; border-radius:2rem; padding:.5rem 2rem; font-size: 1.6rem; font-family: 'GothamLight'; cursor: pointer} .blueButton:hover{background-color: #fff; color:#16428E; border:1px solid #16428E; border-radius:2rem; padding:.5rem 2rem; font-size: 1.6rem; font-family: 'GothamLight'; cursor: pointer} .purpleButton{background-color: #AD45FF; color:#fff; border:1px solid #AD45FF; border-radius:2rem; padding:.5rem 2rem; font-size: 1.6rem; font-family: 'GothamLight'; cursor: pointer} .purpleButton:hover{background-color: #fff; color:#AD45FF; border:1px solid #AD45FF; border-radius:2rem; padding:.5rem 2rem; font-size: 1.6rem; font-family: 'GothamLight'; cursor: pointer} .pinkButton{background-color: #FF4365; color:#fff; border:1px solid #FF4365; border-radius:2rem; padding:.5rem 2rem; font-size: 1.6rem; font-family: 'GothamLight'; cursor: pointer} .pinkButton:hover{background-color: #fff; color:#FF4365; border:1px solid #FF4365; border-radius:2rem; padding:.5rem 2rem; font-size: 1.6rem; font-family: 'GothamLight'; cursor: pointer} .yellowButton{background-color: #FFD400; color:#fff; border:1px solid #FFD400; border-radius:2rem; padding:.5rem 2rem; font-size: 1.6rem; font-family: 'GothamLight'; cursor: pointer} .yellowButton:hover{background-color: #fff; color:#FFD400; border:1px solid #FFD400; border-radius:2rem; padding:.5rem 2rem; font-size: 1.6rem; font-family: 'GothamLight'; cursor: pointer} .orangeButton{background-color: #FF8C33; color:#fff; border:1px solid #FF8C33; border-radius:2rem; padding:.5rem 2rem; font-size: 1.6rem; font-family: 'GothamLight'; cursor: pointer} .orangeButton:hover{background-color: #fff; color:#FF8C33; border:1px solid #FF8C33; border-radius:2rem; padding:.5rem 2rem; font-size: 1.6rem; font-family: 'GothamLight'; cursor: pointer} .dropshadow{-moz-box-shadow: 0 0 10px 5px #4f4f4f; -webkit-box-shadow: 0 0 10px 5px #4f4f4f; box-shadow: 0 0 10px 5px #4f4f4f;} .greyInput{border:none; background-color: #e9eaeb} .transWhiteButton{background:none; border:1px solid #fff; color:#fff; border-radius: 0; padding:0.5rem 0rem; text-align: center; font-size: 1.6rem; font-family: 'GothamLight';} .transWhiteButton:hover{background:#fff; border:1px solid #fff; color:#000; border-radius: 0; padding:0.5rem 0rem; text-align: center; font-size: 1.6rem; font-family: 'GothamLight';} .whiteBox{background-color: #fff; color:#000; border-radius: 0; max-height: 36px;} .boldText{font-family: 'GothamBold';} a.white:link{color:#fff} a.white:active{color:#fff} a.white:visited{color:#fff} a.white:hover{color:#fff; text-decoration: underline} a.white-nav:link{color:#fff;} a.white-nav:active{color:#fff;} a.white-nav:visited{color:#fff;} a.white-nav:hover{color:#000;} a.white-footer-nav:link{color:#fff; font-size:1rem;} a.white-footer-nav:active{color:#fff; font-size:1rem;} a.white-footer-nav:visited{color:#fff; font-size:1rem;} a.white-footer-nav:hover{color:#3DD359; font-size:1rem;} a.black:link{color:#000} a.black:active{color:#000} a.black:visited{color:#000} a.black:hover{color:#000; text-decoration: underline} a.sendText:link{color:#FF4365; font-size:1.5rem; font-family: 'GothamBlack';} a.sendText:hover{color:#000; font-size:1.5rem; font-family: 'GothamBlack'; text-decoration: underline} a.sendText:active{color:#FF4365; font-size:1.5rem; font-family: 'GothamBlack';} a.sendText:visited{color:#FF4365; font-size:1.5rem; font-family: 'GothamBlack';} .blue{color:#16428E} /*22,66,142*/ .pink{color:#FF4365} /*255,67,101*/ .orange{color:#17C3B2} /*23,195,178*/ /*This is TEAL*/ .yellow{color:#FFD400} /*255,212,0*/ .teal{color:#17C3B2} /*23,195,178*/ .purple{color:#AD45FF} /*173,69,255*/ .green{color: #3DD359} /*61,211,89*/ .orange2{color:#FF8C33 } /*255,140,51*/ .texture{background: url("../img/background-texture.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:top left;} .bottomPadHalf{padding-bottom:.5rem;} .whiteSmall{font-size:0.8rem; color:#fff} /* Height based media queries */ @media only screen { .headText{margin-top:50px} #arrowDown{bottom: 8rem;} } @media only screen and (max-height: 700px) { .headText{margin-top:32px} #arrowDown{bottom: 4rem;} } @media only screen and (max-height: 800px) { .headText{margin-top:50px} #arrowDown{bottom: 4rem;} } @media only screen and (min-height: 900px) { .headText{margin-top:200px} #arrowDown{bottom: 4rem;} } @media only screen and (min-height: 1000px) { .headText{margin-top:250px} #arrowDown{bottom: 6rem;} } @media only screen and (min-height: 1200px) { .headText{margin-top:250px} #arrowDown{bottom: 6rem;} } @media only screen { #paraPOS{ background:url('../img/parallax-pos.jpg') no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #paraOOH{background:url('../img/parallax-ooh.jpg') no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #paraCOL{background:url('../img/parallax-colateral.jpg') no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #paraWork{background:url('../img/parallax-work.jpg') no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} } @media only screen and (min-width: 1000px) { #paraPOS{width:100%; background:url('../img/parallax-pos.jpg') no-repeat; background-repeat:no-repeat; background-size:cover; background-attachment: fixed; background-position:center; height:100vh} #paraOOH{width:100%; background:url('../img/parallax-ooh.jpg') no-repeat; background-repeat:no-repeat; background-size:cover; background-attachment: fixed; background-position:center; height:100vh} #paraCOL{width:100%; background:url('../img/parallax-colateral.jpg') no-repeat; background-repeat:no-repeat; background-size:cover; background-attachment: fixed; background-position:center; height:100vh} #paraWork{width:100%; background:url('../img/parallax-work.jpg') no-repeat; background-repeat:no-repeat; background-size:cover; background-attachment: fixed; background-position:center; height:100vh} } /*Small*/ @media only screen { #caseSection1{background-image: none} #caseSection2{background: url("../img/case-study-break-1.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #colSection3{background-image: none} #colSection4{background: url("../img/colateral-back-4.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #colSection5{background-image: none} #plantSection1{background-image: none; height:auto; padding-top:2rem; padding-bottom:2rem;} #plantSection2{background: url("../img/plant-section-2.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #plantSection3{background-image: none; height:auto; padding-top:2rem; padding-bottom:2rem;} #plantSection4{background: url("../img/plant-section-4.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #plantSection5{background-image: none; height:auto; padding-top:2rem; padding-bottom:2rem;} #aboutBack{background-image: none} #createBack{background-image: none} #svsTopBack{background-image: none} #oohBack{background-image: none} #colBack{background-image: none} #posBack{background-image: none} #campaignBack{background-image: none} #displayBack{background-image: none} #largeBack{background-image: none} #signageBack{background-image: none} #smallBack{background-image: none} .margin-top-mobile{margin-top:3rem;} .font110{font-size:2rem; font-family: 'GothamBlack'; line-height: 2.5rem} .font40{font-size:1.3rem; font-family: 'GothamLight'; line-height: 2rem} .font40black{font-size:1.3rem; font-family: 'GothamBlack'; line-height: 2rem} .font26{font-size:1rem; font-family: 'GothamBlack';} #realEmotionsBack{background: url("../img/real-to-real.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center} #transformBack{background: url("../img/transform-break-mobile.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center} #aboutBreakBack{background: url("../img/about-break.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center} .introText{height:100vh;} .iconContainer{height:auto;} #servicesVideo{background: url("../video/services.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; height:105vh} #introVideo{background: url("../video/introducing.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; height:100vh} #dnaVideo{background: url("../video/dna.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; height:100vh} #whatVideo{background: url("../video/what.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; height:100vh} #specVideo{background: url("../video/spec.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; height:100vh} #contactVideo{background: url("../video/contact.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; height:120vh} #caseVideo{background: url("../video/case.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; height:100vh;} .mobileMod{line-height: 1.5rem; font-size: 0.9rem} .mobile-font-1{font-size:2.0rem; font-family: 'GothamMedium'; color:#fff} .mobile-font-2{font-size:1.5rem; font-family: 'GothamLight'; color:#fff} .titleGrid{padding-top: 4rem} .infoGrid{padding-top:2rem;} .serviceGrid{padding-top:2rem; padding-bottom:4rem} .xpHeader{margin-bottom:1rem;} .contactGrid{padding-top:2rem;} .reviewGrid{padding-top:0rem; padding-bottom:3rem} .serviceInfoDiv{margin-top:1rem;} .section-font-1{font-size:1.5rem; font-family: 'GothamMedium'; color:#fff} .section-font-2{font-size:1.3rem; font-family: 'GothamLight'; color:#fff} .section-font-3{font-size:1rem; font-family: 'GothamMedium'; color:#fff} .custom-hide-for-medium{display:block} .top-margin-3{margin-top:-.5rem;} .top-pad-home{padding-top:10rem;} .mega-font{font-size: 2rem;} .large-font{font-size: 1rem;} .font-5{font-size:2rem;} .std-large-font{font-size: 3rem;} .padding-top-large{padding-top:20rem;} .customMenu{width:70%} .customMenu ul li {margin-bottom:1rem;} #customMenuTitle{margin-bottom:1rem;} .team-member figcaption p { font-size: .75rem; } } /*Medium*/ @media only screen and (min-width: 40.0625em) { #caseSection1{background: url("../img/case-study-section-1.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #caseSection2{background: url("../img/case-study-break-1.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #colSection3{background: url("../img/colateral-back-3.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #colSection4{background: url("../img/colateral-back-4.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #colSection5{background: url("../img/colateral-back-5.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #plantSection1{background: url("../img/plant-section-1.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;; height:auto; padding-top:2rem; padding-bottom:2rem;} #plantSection2{background: url("../img/plant-section-2.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #plantSection3{background: url("../img/plant-section-3.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;; height:auto; padding-top:2rem; padding-bottom:2rem;} #plantSection4{background: url("../img/plant-section-4.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #plantSection5{background: url("../img/plant-section-5.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;; height:auto; padding-top:2rem; padding-bottom:2rem;} #aboutBack{background: url("../img/about-section-back.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #createBack{background: url("../img/create-section-back.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #svsTopBack{background: url("../img/services-top-back.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; } #oohBack{background: url("../img/ooh-back.png") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:bottom;} #colBack{background: url("../img/col-back.png") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:bottom;} #posBack{background: url("../img/pos-back.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:bottom;} #campaignBack{background: url("../img/campaign-back.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:bottom;} #displayBack{background: url("../img/display-back.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:bottom;} #largeBack{background: url("../img/large-back.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:bottom;} #signageBack{background: url("../img/signage-back.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:bottom;} #smallBack{background: url("../img/small-back.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:bottom;} .font110{font-size:3rem; font-family: 'GothamBlack';} .font40{font-size:1.3rem; font-family: 'GothamLight'; line-height: 2rem} .font40black{font-size:1.3rem; font-family: 'GothamBlack'; line-height: 2rem} #realEmotionsBack{background: url("../img/real-to-real.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center} #transformBack{background: url("../img/transform-break-tablet.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center} #aboutBreakBack{background: url("../img/about-break.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center} .introText{height:100vh;} .iconContainer{height:auto;} #servicesVideo{background: url("../video/services.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; height:100vh;} #introVideo{background: url("../video/introducing.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; height:100vh;} #dnaVideo{background: url("../video/dna.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; height:100vh;} #whatVideo{background: url("../video/what.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; height:100vh;} #specVideo{background: url("../video/spec.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; height:100vh;} #contactVideo{background: url("../video/contact.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; height:115vh} #caseVideo{background: url("../video/case.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; height:100vh;} .mobile-font-1{font-size:2.0rem; font-family: 'GothamMedium'; color:#fff} .mobile-font-2{font-size:1.5rem; font-family: 'GothamLight'; color:#fff} .mobileMod{line-height: 1.5; font-size: 0.9rem} .titleGrid{padding-top: 8rem} .infoGrid{padding-top:5rem;} .serviceGrid{padding-top:4rem; padding-bottom:4rem} .xpHeader{margin-bottom:4rem;} .contactGrid{padding-top:6rem;} .reviewGrid{padding-top:4rem; padding-bottom:4rem} .serviceInfoDiv{margin-top:2rem;} .section-font-1{font-size:4rem; font-family: 'GothamMedium'; color:#fff} .section-font-2{font-size:1.8rem; font-family: 'GothamLight'; color:#fff} .section-font-3{font-size:1.3rem; font-family: 'GothamMedium'; color:#fff} .custom-hide-for-medium{display:block} .top-margin-3{margin-top:-.75rem;} .top-pad-home{padding-top:8rem;} .mega-font{font-size: 3.5rem;} .large-font{font-size: 1.5rem;} .font-5{font-size:3rem;} .std-large-font{font-size: 4rem;} .padding-top-large{padding-top:20rem;} .customMenu{width:50%} .customMenu ul li {margin-bottom:1.5rem;} #customMenuTitle{margin-bottom:1.5rem;} .team-member figcaption p { font-size: .9rem; } } /*Medium*/ @media only screen and (min-width: 45.0625em) { #caseSection1{background: url("../img/case-study-section-1.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #caseSection2{background: url("../img/case-study-break-1.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #colSection3{background: url("../img/colateral-back-3.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #colSection4{background: url("../img/colateral-back-4.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #colSection5{background: url("../img/colateral-back-5.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #plantSection1{background: url("../img/plant-section-1.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #plantSection2{background: url("../img/plant-section-2.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #plantSection3{background: url("../img/plant-section-3.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #plantSection4{background: url("../img/plant-section-4.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #plantSection5{background: url("../img/plant-section-5.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #aboutBack{background: url("../img/about-section-back.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #createBack{background: url("../img/create-section-back.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #svsTopBack{background: url("../img/services-top-back.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; } #oohBack{background: url("../img/ooh-back.png") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:bottom;} #colBack{background: url("../img/col-back.png") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:bottom;} #posBack{background: url("../img/pos-back.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:bottom;} #campaignBack{background: url("../img/campaign-back.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:bottom;} #displayBack{background: url("../img/display-back.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:bottom;} #largeBack{background: url("../img/large-back.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:bottom;} #signageBack{background: url("../img/signage-back.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:bottom;} #smallBack{background: url("../img/small-back.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:bottom;} .font110{font-size:3rem; font-family: 'GothamBlack';} .font40{font-size:1.3rem; font-family: 'GothamLight'; line-height: 2rem} .font40black{font-size:1.3rem; font-family: 'GothamBlack'; line-height: 2rem} #realEmotionsBack{background: url("../img/real-to-real.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center} #transformBack{background: url("../img/transform-break-tablet.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center} #aboutBreakBack{background: url("../img/about-break.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center} .introText{height:100vh;} .mobileMod{line-height: 1.75; font-size: 0.9rem} .iconContainer{height:auto;} #servicesVideo{background: url("../video/services.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; height:100vh;} #introVideo{background: url("../video/introducing.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; height:100vh;} #dnaVideo{background: url("../video/dna.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; height:100vh;} #whatVideo{background: url("../video/what.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; height:100vh;} #specVideo{background: url("../video/spec.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; height:100vh;} #contactVideo{background: url("../video/contact.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; height:115vh} #caseVideo{background: url("../video/case.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; height:100vh;} #mobileHead{background: url("../img/blank-head.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; height:100vh} .mobile-font-1{font-size:2.5rem; font-family: 'GothamMedium'; color:#fff} .mobile-font-2{font-size:1.8rem; font-family: 'GothamLight'; color:#fff} .titleGrid{padding-top: 8rem} .infoGrid{padding-top:5rem;} .serviceGrid{padding-top:4rem; padding-bottom:4rem} .xpHeader{margin-bottom:4rem;} .contactGrid{padding-top:6rem;} .reviewGrid{padding-top:4rem; padding-bottom:4rem} .serviceInfoDiv{margin-top:2rem;} .section-font-1{font-size:4.2rem; font-family: 'GothamMedium'; color:#fff} .section-font-2{font-size:2.3rem; font-family: 'GothamLight'; color:#fff} .section-font-3{font-size:1.8rem; font-family: 'GothamMedium'; color:#fff} .custom-hide-for-medium{display:block} .top-margin-3{margin-top:-1.5rem;} .top-pad-home{padding-top:8rem;} .mega-font{font-size: 4.5rem;} .large-font{font-size: 2rem;} .font-5{font-size:3rem;} .std-large-font{font-size: 4rem;} .padding-top-large{padding-top:20rem;} .customMenu{width:50%} .customMenu ul li {margin-bottom:2rem;} #customMenuTitle{margin-bottom:2rem;} .team-member figcaption p { font-size: .9rem; } } /*Large*/ @media only screen and (min-width: 54.0625em) { #caseSection1{background: url("../img/case-study-section-1.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #caseSection2{background: url("../img/case-study-break-1.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #colSection3{background: url("../img/colateral-back-3.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #colSection4{background: url("../img/colateral-back-4.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #colSection5{background: url("../img/colateral-back-5.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #plantSection1{background: url("../img/plant-section-1.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #plantSection2{background: url("../img/plant-section-2.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #plantSection3{background: url("../img/plant-section-3.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #plantSection4{background: url("../img/plant-section-4.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #plantSection5{background: url("../img/plant-section-5.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #aboutBack{background: url("../img/about-section-back.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #createBack{background: url("../img/create-section-back.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #svsTopBack{background: url("../img/services-top-back.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; } #oohBack{background: url("../img/ooh-back.png") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:bottom;} #colBack{background: url("../img/col-back.png") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:bottom;} #posBack{background: url("../img/pos-back.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:bottom;} #campaignBack{background: url("../img/campaign-back.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:bottom;} #displayBack{background: url("../img/display-back.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:bottom;} #largeBack{background: url("../img/large-back.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:bottom;} #signageBack{background: url("../img/signage-back.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:bottom;} #smallBack{background: url("../img/small-back.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:bottom;} .font110{font-size:3rem; font-family: 'GothamBlack';} .font40{font-size:1.3rem; font-family: 'GothamLight'; line-height: 2rem} .font40black{font-size:1.3rem; font-family: 'GothamBlack'; line-height: 2rem} #realEmotionsBack{background: url("../img/real-to-real.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center} #transformBack{background: url("../img/transform-break.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center} #aboutBreakBack{background: url("../img/about-break.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center} .introText{height:100vh;} .iconContainer{height:auto;} .mobileMod{line-height: 2; font-size: 1rem} #mobileHead{background: url("../img/blank-head.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; height:100vh} .titleGrid{padding-top: 10rem} .infoGrid{padding-top:7rem;} .serviceGrid{padding-top:8rem; padding-bottom:8rem} .xpHeader{margin-bottom:6rem;} .contactGrid{padding-top:8rem;} .reviewGrid{padding-top:6rem; padding-bottom:6rem} .serviceInfoDiv{margin-top:4rem;} .section-font-1{font-size:5.4rem; font-family: 'GothamMedium'; color:#fff} .section-font-2{font-size:2.8rem; font-family: 'GothamLight'; color:#fff} .section-font-3{font-size:2.3rem; font-family: 'GothamMedium'; color:#fff} .custom-hide-for-medium{display:none} .top-margin-3{margin-top:-1.75rem;} .top-pad-home{padding-top:8rem;} .mega-font{font-size: 4.5rem;} .large-font{font-size: 2rem;} .font-5{font-size:4rem;} .std-large-font{font-size: 4rem;} .padding-top-large{padding-top:25rem;} .customMenu{width:30%} .customMenu ul li {margin-bottom:2.5rem;} #customMenuTitle{margin-bottom:2.5rem;} .team-member figcaption p { font-size: 1rem; } } /*Custom for video*/ @media only screen and (min-width: 58em) { .font110{font-size:3rem; font-family: 'GothamBlack';} .font40{font-size:1.3rem; font-family: 'GothamLight'; line-height: 2rem} .font40black{font-size:1.3rem; font-family: 'GothamBlack'; line-height: 2rem} .iconContainer{height:auto;} .introText{height:50vh;} #servicesVideo{background: url("../video/services.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; height:100vh;} #introVideo{background: url("../video/introducing.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; height:100vh;} #dnaVideo{background: url("../video/dna.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; height:100vh;} #whatVideo{background: url("../video/what.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; height:100vh;} #specVideo{background: url("../video/spec.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; height:100vh;} #caseVideo{background: url("../video/case.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; height:100vh;} #contactVideo{background: url("../video/contact.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center; height:110vh} } /*Large*/ @media only screen and (min-width: 75em) { #caseSection1{background: url("../img/case-study-section-1.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #caseSection2{background: url("../img/case-study-break-1.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #colSection3{background: url("../img/colateral-back-3.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #colSection4{background: url("../img/colateral-back-4.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #colSection5{background: url("../img/colateral-back-5.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #plantSection1{background: url("../img/plant-section-1.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #plantSection2{background: url("../img/plant-section-2.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #plantSection3{background: url("../img/plant-section-3.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #plantSection4{background: url("../img/plant-section-4.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #plantSection5{background: url("../img/plant-section-5.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #aboutBack{background: url("../img/about-section-back.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #createBack{background: url("../img/create-section-back.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #svsTopBack{background: url("../img/services-top-back.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center;} #oohBack{background: url("../img/ooh-back.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:bottom;} #colBack{background: url("../img/col-back.png") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:bottom;} #posBack{background: url("../img/pos-back.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:bottom;} #campaignBack{background: url("../img/campaign-back.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:bottom;} #displayBack{background: url("../img/display-back.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:bottom;} #largeBack{background: url("../img/large-back.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:bottom;} #signageBack{background: url("../img/signage-back.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:bottom;} #smallBack{background: url("../img/small-back.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:bottom;} .font110{font-size:4.5rem; font-family: 'GothamBlack'; line-height: 5rem;} .font40{font-size:1.3rem; font-family: 'GothamLight'; line-height: 2rem} .font40black{font-size:1.3rem; font-family: 'GothamBlack'; line-height: 2rem} #realEmotionsBack{background: url("../img/real-to-real.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center} #transformBack{background: url("../img/transform-break.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center} #aboutBreakBack{background: url("../img/about-break.jpg") no-repeat; background-repeat:no-repeat; background-size:cover; background-position:center} .iconContainer{height:100vh} .introText{height:100vh;} #servicesVideo{background:none; height:100vh; overflow: hidden} #introVideo{background:none; height:100vh; overflow: hidden} #dnaVideo{background:none; height:100vh; overflow: hidden} #whatVideo{background:none; height:100vh; overflow: hidden} #specVideo{background:none; height:100vh; overflow: hidden} #contactVideo{background:none; height:100vh; overflow: hidden} #caseVideo{background:none; height:100vh; overflow: hidden} .mobileMod{line-height: 2; font-size: 1rem} .titleGrid{padding-top: 10rem} .infoGrid{padding-top:7rem;} .serviceGrid{padding-top:6rem; padding-bottom:8rem} .xpHeader{margin-bottom:8rem;} .contactGrid{padding-top:8rem;} .reviewGrid{padding-top:6rem; padding-bottom:6rem} .serviceInfoDiv{margin-top:4rem;} .section-font-1{font-size:5.9rem; font-family: 'GothamMedium'; color:#fff} .section-font-2{font-size:3.3rem; font-family: 'GothamLight'; color:#fff} .section-font-3{font-size:2.8rem; font-family: 'GothamMedium'; color:#fff} .custom-hide-for-medium{display:none} .top-margin-3{margin-top:-2rem;} .top-pad-home{padding-top:11rem;} .mega-font{font-size: 6.5rem;} .large-font{font-size: 4rem;} .font-5{font-size:5rem;} .std-large-font{font-size: 4rem;} .padding-top-large{padding-top:30rem;} .customMenu{width:30%} .customMenu ul li {margin-bottom:3rem;} #customMenuTitle{margin-bottom:3rem;} .team-member figcaption p { font-size: 1rem; } } .acordion-menu { margin: 0; padding: 0; } .acordion-menu [aria-expanded] { display: block; position: relative; color: #41A4D8; text-decoration: none; padding: 5px 12px 5px 12px; background-color: #eaeaea; margin-bottom:1rem; font-size: 1.6rem; font-family: 'GothamLight'; } .acordion-menu [aria-expanded]:after { content: url("../img/arrow-down-orange.png"); position: absolute; right: 12px; top: 0px; line-height: 2.4; } .acordion-menu [aria-expanded] + [id] * { margin: 0; trasition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; } .acordion-menu [aria-expanded=true] { color: #3FA96D; border-bottom: none; } .acordion-menu [aria-expanded=true]:after { content: url("../img/arrow-up-orange.png"); right: 12px; top: 0px; } .acordion-menu [aria-expanded=true] + [id] { visibility: visible; } .acordion-menu [id] { overflow: hidden; position: absolute; visibility: collapse; } .accTab{ padding-left:12px; } .accTab p { font-family: 'GothamLight'; line-height: 1.5; font-size: 1.6rem; } .cookieAcceptBar { display:none; position: fixed; bottom: 0; left:0; right: 0; text-align: center; background-color: #000; color: #fff; padding: 20px 0; z-index: 9999; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .cookieAcceptBar a { color: #fff; text-decoration: none; font-weight: bold; } .buttonCookie { cursor: pointer; border: none; background-color: #000; color: #fff; text-transform: uppercase; margin-top: 10px; height: 40px; line-height: 40px; padding: 0 20px; } .buttonCookie:hover { cursor: pointer; border: none; background-color: #FF4365; color: #fff; text-transform: uppercase; margin-top: 10px; height: 40px; line-height: 40px; padding: 0 20px; } #list-builder { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: #333; filter: alpha(opacity=80); opacity: 0.8; display: none; } #popup-box { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); background-color: #26b14a; color: #FFFFFF; width: 80%; max-width: 600px; padding: 30px; border: 10px solid #FFFFFF; display: none; } #popup-close { position: absolute; top: -25px; right: -25px; cursor: pointer; width: 40px; } #popup-box h1 { margin: 0; } #popup-box form { margin-bottom: 0px; } #popup-box input { padding: 10px; border: 1px solid #333; width: 40%; } #popup-box button { padding: 10px; border: 1px solid #333; }