/* ================= Media Query Mixins ================= */ /* ================= H1 style ================= */ /* ================= H1 style ================= */ /** Box shadow */ /** Arrow down **/ /** Case studies **/ /** Case study image on mobile */ @import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Teko:wght@300;400;500;600;700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Teko:wght@300;400;500;600;700&display=swap"); .icons { margin-bottom: 2em; } .icons img { width: 30px; margin-right: 20px; margin-top: 30px; } .icons a:hover { text-decoration: none; } .box .valign { min-height: 100vh; display: flex; align-items: center; justify-content: center; } .box .middleAlignment { min-height: 100vh; display: flex; align-items: center; justify-content: center; } .btncont { color: #fff; cursor: pointer; text-transform: uppercase; padding: 20px 30px; position: relative; display: inline-block; font-family: "Teko", "Serif"; font-weight: 100; letter-spacing: 2px; font-size: .9em; } @media (max-width: 767px) { .btncont { width: 100%; text-align: center; } } .btn-1 svg { height: 62px; left: 0; position: absolute; top: 0; width: 100%; } .btn-1 rect { fill: none; stroke: #ffce00; stroke-width: 3; stroke-dasharray: 422, 0; transition: all 0.35s linear; } .btn-1:hover { color: white; text-decoration: none; } .btn-1:hover rect { stroke-width: 3; stroke-dasharray: 52, 240; stroke-dashoffset: 20; transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1); } @media (max-width: 767px) { .block { margin-bottom: 2em; } } .animatable { /* initially hide animatable objects */ visibility: hidden; /* initially pause animatable objects their animations */ -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -ms-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } /* show objects being animated */ .animated { visibility: visible; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-play-state: running; -moz-animation-play-state: running; -ms-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } /* CSS Animations (extracted from http://glifo.uiparade.com/) */ @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-20px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInDown { 0% { opacity: 0; -o-transform: translateY(-20px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 20% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fadeIn { 0% { opacity: 0; } 20% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fadeIn { 0% { opacity: 0; } 20% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 60% { opacity: 0; } 20% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); } 60% { -webkit-transform: translateX(20px); } 80% { -webkit-transform: translateX(-5px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes bounceInLeft { 0% { opacity: 0; -moz-transform: translateX(-2000px); } 60% { -moz-transform: translateX(20px); } 80% { -moz-transform: translateX(-5px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes bounceInLeft { 0% { opacity: 0; -o-transform: translateX(-2000px); } 60% { opacity: 1; -o-transform: translateX(20px); } 80% { -o-transform: translateX(-5px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes bounceInLeft { 0% { opacity: 0; transform: translateX(-2000px); } 60% { transform: translateX(20px); } 80% { transform: translateX(-5px); } 100% { opacity: 1; transform: translateX(0); } } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); } 60% { -webkit-transform: translateX(-20px); } 80% { -webkit-transform: translateX(5px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes bounceInRight { 0% { opacity: 0; -moz-transform: translateX(2000px); } 60% { -moz-transform: translateX(-20px); } 80% { -moz-transform: translateX(5px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes bounceInRight { 0% { opacity: 0; -o-transform: translateX(2000px); } 60% { -o-transform: translateX(-20px); } 80% { -o-transform: translateX(5px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes bounceInRight { 0% { opacity: 0; transform: translateX(2000px); } 60% { transform: translateX(-20px); } 80% { transform: translateX(5px); } 100% { opacity: 1; transform: translateX(0); } } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(20px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInUp { 0% { opacity: 0; -o-transform: translateY(20px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(0.3); } 50% { -webkit-transform: scale(1.05); } 70% { -webkit-transform: scale(0.9); } 100% { opacity: 1; -webkit-transform: scale(1); } } @-moz-keyframes bounceIn { 0% { opacity: 0; -moz-transform: scale(0.3); } 50% { -moz-transform: scale(1.05); } 70% { -moz-transform: scale(0.9); } 100% { opacity: 1; -moz-transform: scale(1); } } @-o-keyframes bounceIn { 0% { opacity: 0; -o-transform: scale(0.3); } 50% { -o-transform: scale(1.05); } 70% { -o-transform: scale(0.9); } 100% { opacity: 1; -o-transform: scale(1); } } @keyframes bounceIn { 0% { opacity: 0; transform: scale(0.3); } 50% { transform: scale(1.05); } 70% { transform: scale(0.9); } 100% { opacity: 1; transform: scale(1); } } @-webkit-keyframes moveUp { 0% { opacity: 1; -webkit-transform: translateY(40px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes moveUp { 0% { opacity: 1; -moz-transform: translateY(40px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes moveUp { 0% { opacity: 1; -o-transform: translateY(40px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes moveUp { 0% { opacity: 1; transform: translateY(40px); } 100% { opacity: 1; transform: translateY(0); } } @-webkit-keyframes fadeBgColor { 0% { background: none; } 70% { background: none; } 100% { background: #464646; } } @-o-keyframes fadeBgColor { 0% { background: none; } 70% { background: none; } 100% { background: #464646; } } @keyframes fadeBgColor { 0% { background: none; } 70% { background: none; } 100% { background: #464646; } } .animated.animationDelay { animation-delay: .4s; -webkit-animation-delay: .4s; } .animated.animationDelayMed { animation-delay: 1.2s; -webkit-animation-delay: 1.2s; } .animated.animationDelayLong { animation-delay: 1.6s; -webkit-animation-delay: 1.6s; } .animated.fadeBgColor { -webkit-animation-name: fadeBgColor; -moz-animation-name: fadeBgColor; -o-animation-name: fadeBgColor; animation-name: fadeBgColor; } .animated.bounceIn { -webkit-animation-name: bounceIn; -moz-animation-name: bounceIn; -o-animation-name: bounceIn; animation-name: bounceIn; } .animated.bounceInRight { -webkit-animation-name: bounceInRight; -moz-animation-name: bounceInRight; -o-animation-name: bounceInRight; animation-name: bounceInRight; } .animated.bounceInLeft { -webkit-animation-name: bounceInLeft; -moz-animation-name: bounceInLeft; -o-animation-name: bounceInLeft; animation-name: bounceInLeft; } .animated.fadeIn { -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn; } .animated.fadeInDown { -webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -o-animation-name: fadeInDown; animation-name: fadeInDown; } .animated.fadeInUp { -webkit-animation-name: fadeInUp; -moz-animation-name: fadeInUp; -o-animation-name: fadeInUp; animation-name: fadeInUp; } .animated.moveUp { -webkit-animation-name: moveUp; -moz-animation-name: moveUp; -o-animation-name: moveUp; animation-name: moveUp; } #modal-container, #modal-container2, #modal-container3, #modal-container4, #modal-container5, #modal-container6 { position: fixed; display: table; height: 100%; width: 100%; top: 0; left: 0; transform: scale(0); z-index: 9999; overflow: scroll; } #modal-container .btn-1, #modal-container2 .btn-1, #modal-container3 .btn-1, #modal-container4 .btn-1, #modal-container5 .btn-1, #modal-container6 .btn-1 { color: black; } #modal-container .btn-1 svg, #modal-container2 .btn-1 svg, #modal-container3 .btn-1 svg, #modal-container4 .btn-1 svg, #modal-container5 .btn-1 svg, #modal-container6 .btn-1 svg { height: 62px; left: 0; position: absolute; top: 0; width: 100%; } #modal-container .btn-1 rect, #modal-container2 .btn-1 rect, #modal-container3 .btn-1 rect, #modal-container4 .btn-1 rect, #modal-container5 .btn-1 rect, #modal-container6 .btn-1 rect { fill: none; stroke: #009bc3; stroke-width: 3; stroke-dasharray: 422, 0; transition: all 0.35s linear; } #modal-container .btn-1:hover, #modal-container2 .btn-1:hover, #modal-container3 .btn-1:hover, #modal-container4 .btn-1:hover, #modal-container5 .btn-1:hover, #modal-container6 .btn-1:hover { color: black; text-decoration: none; } #modal-container .btn-1:hover rect, #modal-container2 .btn-1:hover rect, #modal-container3 .btn-1:hover rect, #modal-container4 .btn-1:hover rect, #modal-container5 .btn-1:hover rect, #modal-container6 .btn-1:hover rect { stroke-width: 3; stroke-dasharray: 52, 240; stroke-dashoffset: 20; transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1); } #modal-container.one, #modal-container2.one, #modal-container3.one, #modal-container4.one, #modal-container5.one, #modal-container6.one { transform: scaleY(0.01) scaleX(0); animation: unfoldIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.one .modal-background .modal, #modal-container2.one .modal-background .modal, #modal-container3.one .modal-background .modal, #modal-container4.one .modal-background .modal, #modal-container5.one .modal-background .modal, #modal-container6.one .modal-background .modal { transform: scale(0); animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.one.out, #modal-container2.one.out, #modal-container3.one.out, #modal-container4.one.out, #modal-container5.one.out, #modal-container6.one.out { transform: scale(1); animation: unfoldOut 1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.one.out .modal-background .modal, #modal-container2.one.out .modal-background .modal, #modal-container3.one.out .modal-background .modal, #modal-container4.one.out .modal-background .modal, #modal-container5.one.out .modal-background .modal, #modal-container6.one.out .modal-background .modal { animation: zoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.two, #modal-container2.two, #modal-container3.two, #modal-container4.two, #modal-container5.two, #modal-container6.two { transform: scale(1); } #modal-container.two .modal-background, #modal-container2.two .modal-background, #modal-container3.two .modal-background, #modal-container4.two .modal-background, #modal-container5.two .modal-background, #modal-container6.two .modal-background { background: rgba(0, 0, 0, 0); animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.two .modal-background .modal, #modal-container2.two .modal-background .modal, #modal-container3.two .modal-background .modal, #modal-container4.two .modal-background .modal, #modal-container5.two .modal-background .modal, #modal-container6.two .modal-background .modal { opacity: 0; animation: scaleUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.two + .content, #modal-container2.two + .content, #modal-container3.two + .content, #modal-container4.two + .content, #modal-container5.two + .content, #modal-container6.two + .content { animation: scaleBack 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.two.out, #modal-container2.two.out, #modal-container3.two.out, #modal-container4.two.out, #modal-container5.two.out, #modal-container6.two.out { animation: quickScaleDown 0s .5s linear forwards; } #modal-container.two.out .modal-background, #modal-container2.two.out .modal-background, #modal-container3.two.out .modal-background, #modal-container4.two.out .modal-background, #modal-container5.two.out .modal-background, #modal-container6.two.out .modal-background { animation: fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.two.out .modal-background .modal, #modal-container2.two.out .modal-background .modal, #modal-container3.two.out .modal-background .modal, #modal-container4.two.out .modal-background .modal, #modal-container5.two.out .modal-background .modal, #modal-container6.two.out .modal-background .modal { animation: scaleDown 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.two.out + .content, #modal-container2.two.out + .content, #modal-container3.two.out + .content, #modal-container4.two.out + .content, #modal-container5.two.out + .content, #modal-container6.two.out + .content { animation: scaleForward 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.three, #modal-container2.three, #modal-container3.three, #modal-container4.three, #modal-container5.three, #modal-container6.three { z-index: 0; transform: scale(1); } #modal-container.three .modal-background, #modal-container2.three .modal-background, #modal-container3.three .modal-background, #modal-container4.three .modal-background, #modal-container5.three .modal-background, #modal-container6.three .modal-background { background: rgba(0, 0, 0, 0.6); } #modal-container.three .modal-background .modal, #modal-container2.three .modal-background .modal, #modal-container3.three .modal-background .modal, #modal-container4.three .modal-background .modal, #modal-container5.three .modal-background .modal, #modal-container6.three .modal-background .modal { animation: moveUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.three + .content, #modal-container2.three + .content, #modal-container3.three + .content, #modal-container4.three + .content, #modal-container5.three + .content, #modal-container6.three + .content { z-index: 1; animation: slideUpLarge 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.three.out .modal-background .modal, #modal-container2.three.out .modal-background .modal, #modal-container3.three.out .modal-background .modal, #modal-container4.three.out .modal-background .modal, #modal-container5.three.out .modal-background .modal, #modal-container6.three.out .modal-background .modal { animation: moveDown 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.three.out + .content, #modal-container2.three.out + .content, #modal-container3.three.out + .content, #modal-container4.three.out + .content, #modal-container5.three.out + .content, #modal-container6.three.out + .content { animation: slideDownLarge 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.four, #modal-container2.four, #modal-container3.four, #modal-container4.four, #modal-container5.four, #modal-container6.four { z-index: 0; transform: scale(1); } #modal-container.four .modal-background, #modal-container2.four .modal-background, #modal-container3.four .modal-background, #modal-container4.four .modal-background, #modal-container5.four .modal-background, #modal-container6.four .modal-background { background: rgba(0, 0, 0, 0.7); } #modal-container.four .modal-background .modal, #modal-container2.four .modal-background .modal, #modal-container3.four .modal-background .modal, #modal-container4.four .modal-background .modal, #modal-container5.four .modal-background .modal, #modal-container6.four .modal-background .modal { animation: blowUpModal 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.four + .content, #modal-container2.four + .content, #modal-container3.four + .content, #modal-container4.four + .content, #modal-container5.four + .content, #modal-container6.four + .content { z-index: 1; animation: blowUpContent 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.four.out .modal-background .modal, #modal-container2.four.out .modal-background .modal, #modal-container3.four.out .modal-background .modal, #modal-container4.four.out .modal-background .modal, #modal-container5.four.out .modal-background .modal, #modal-container6.four.out .modal-background .modal { animation: blowUpModalTwo 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.four.out + .content, #modal-container2.four.out + .content, #modal-container3.four.out + .content, #modal-container4.four.out + .content, #modal-container5.four.out + .content, #modal-container6.four.out + .content { animation: blowUpContentTwo 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.five, #modal-container2.five, #modal-container3.five, #modal-container4.five, #modal-container5.five, #modal-container6.five { transform: scale(1); } #modal-container.five .modal-background, #modal-container2.five .modal-background, #modal-container3.five .modal-background, #modal-container4.five .modal-background, #modal-container5.five .modal-background, #modal-container6.five .modal-background { background: rgba(0, 0, 0, 0); animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.five .modal-background .modal, #modal-container2.five .modal-background .modal, #modal-container3.five .modal-background .modal, #modal-container4.five .modal-background .modal, #modal-container5.five .modal-background .modal, #modal-container6.five .modal-background .modal { transform: translateX(-1500px); animation: roadRunnerIn 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.five.out, #modal-container2.five.out, #modal-container3.five.out, #modal-container4.five.out, #modal-container5.five.out, #modal-container6.five.out { animation: quickScaleDown 0s .5s linear forwards; } #modal-container.five.out .modal-background, #modal-container2.five.out .modal-background, #modal-container3.five.out .modal-background, #modal-container4.five.out .modal-background, #modal-container5.five.out .modal-background, #modal-container6.five.out .modal-background { animation: fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.five.out .modal-background .modal, #modal-container2.five.out .modal-background .modal, #modal-container3.five.out .modal-background .modal, #modal-container4.five.out .modal-background .modal, #modal-container5.five.out .modal-background .modal, #modal-container6.five.out .modal-background .modal { animation: roadRunnerOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.six, #modal-container2.six, #modal-container3.six, #modal-container4.six, #modal-container5.six, #modal-container6.six { transform: scale(1); } #modal-container.six .modal-background, #modal-container2.six .modal-background, #modal-container3.six .modal-background, #modal-container4.six .modal-background, #modal-container5.six .modal-background, #modal-container6.six .modal-background { background: rgba(0, 0, 0, 0); animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.six .modal-background .modal, #modal-container2.six .modal-background .modal, #modal-container3.six .modal-background .modal, #modal-container4.six .modal-background .modal, #modal-container5.six .modal-background .modal, #modal-container6.six .modal-background .modal { background-color: transparent; animation: modalFadeIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.six .modal-background .modal h2, #modal-container.six .modal-background .modal p, #modal-container2.six .modal-background .modal h2, #modal-container2.six .modal-background .modal p, #modal-container3.six .modal-background .modal h2, #modal-container3.six .modal-background .modal p, #modal-container4.six .modal-background .modal h2, #modal-container4.six .modal-background .modal p, #modal-container5.six .modal-background .modal h2, #modal-container5.six .modal-background .modal p, #modal-container6.six .modal-background .modal h2, #modal-container6.six .modal-background .modal p { opacity: 0; position: relative; animation: modalContentFadeIn 0.5s 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.six .modal-background .modal .modal-svg rect, #modal-container2.six .modal-background .modal .modal-svg rect, #modal-container3.six .modal-background .modal .modal-svg rect, #modal-container4.six .modal-background .modal .modal-svg rect, #modal-container5.six .modal-background .modal .modal-svg rect, #modal-container6.six .modal-background .modal .modal-svg rect { animation: sketchIn 0.5s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.six.out, #modal-container2.six.out, #modal-container3.six.out, #modal-container4.six.out, #modal-container5.six.out, #modal-container6.six.out { animation: quickScaleDown 0s .5s linear forwards; } #modal-container.six.out .modal-background, #modal-container2.six.out .modal-background, #modal-container3.six.out .modal-background, #modal-container4.six.out .modal-background, #modal-container5.six.out .modal-background, #modal-container6.six.out .modal-background { animation: fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.six.out .modal-background .modal, #modal-container2.six.out .modal-background .modal, #modal-container3.six.out .modal-background .modal, #modal-container4.six.out .modal-background .modal, #modal-container5.six.out .modal-background .modal, #modal-container6.six.out .modal-background .modal { animation: modalFadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.six.out .modal-background .modal h2, #modal-container.six.out .modal-background .modal p, #modal-container2.six.out .modal-background .modal h2, #modal-container2.six.out .modal-background .modal p, #modal-container3.six.out .modal-background .modal h2, #modal-container3.six.out .modal-background .modal p, #modal-container4.six.out .modal-background .modal h2, #modal-container4.six.out .modal-background .modal p, #modal-container5.six.out .modal-background .modal h2, #modal-container5.six.out .modal-background .modal p, #modal-container6.six.out .modal-background .modal h2, #modal-container6.six.out .modal-background .modal p { animation: modalContentFadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.six.out .modal-background .modal .modal-svg rect, #modal-container2.six.out .modal-background .modal .modal-svg rect, #modal-container3.six.out .modal-background .modal .modal-svg rect, #modal-container4.six.out .modal-background .modal .modal-svg rect, #modal-container5.six.out .modal-background .modal .modal-svg rect, #modal-container6.six.out .modal-background .modal .modal-svg rect { animation: sketchOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.seven, #modal-container2.seven, #modal-container3.seven, #modal-container4.seven, #modal-container5.seven, #modal-container6.seven { transform: scale(1); } #modal-container.seven .modal-background, #modal-container2.seven .modal-background, #modal-container3.seven .modal-background, #modal-container4.seven .modal-background, #modal-container5.seven .modal-background, #modal-container6.seven .modal-background { background: rgba(0, 0, 0, 0); animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.seven .modal-background .modal, #modal-container2.seven .modal-background .modal, #modal-container3.seven .modal-background .modal, #modal-container4.seven .modal-background .modal, #modal-container5.seven .modal-background .modal, #modal-container6.seven .modal-background .modal { height: 75px; width: 75px; border-radius: 75px; overflow: hidden; animation: bondJamesBond 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.seven .modal-background .modal h2, #modal-container.seven .modal-background .modal p, #modal-container2.seven .modal-background .modal h2, #modal-container2.seven .modal-background .modal p, #modal-container3.seven .modal-background .modal h2, #modal-container3.seven .modal-background .modal p, #modal-container4.seven .modal-background .modal h2, #modal-container4.seven .modal-background .modal p, #modal-container5.seven .modal-background .modal h2, #modal-container5.seven .modal-background .modal p, #modal-container6.seven .modal-background .modal h2, #modal-container6.seven .modal-background .modal p { opacity: 0; position: relative; animation: modalContentFadeIn .5s 1.4s linear forwards; } #modal-container.seven.out, #modal-container2.seven.out, #modal-container3.seven.out, #modal-container4.seven.out, #modal-container5.seven.out, #modal-container6.seven.out { animation: slowFade .5s 1.5s linear forwards; } #modal-container.seven.out .modal-background, #modal-container2.seven.out .modal-background, #modal-container3.seven.out .modal-background, #modal-container4.seven.out .modal-background, #modal-container5.seven.out .modal-background, #modal-container6.seven.out .modal-background { background-color: rgba(0, 0, 0, 0.7); animation: fadeToRed 2s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.seven.out .modal-background .modal, #modal-container2.seven.out .modal-background .modal, #modal-container3.seven.out .modal-background .modal, #modal-container4.seven.out .modal-background .modal, #modal-container5.seven.out .modal-background .modal, #modal-container6.seven.out .modal-background .modal { border-radius: 3px; height: 162px; width: 227px; animation: killShot 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.seven.out .modal-background .modal h2, #modal-container.seven.out .modal-background .modal p, #modal-container2.seven.out .modal-background .modal h2, #modal-container2.seven.out .modal-background .modal p, #modal-container3.seven.out .modal-background .modal h2, #modal-container3.seven.out .modal-background .modal p, #modal-container4.seven.out .modal-background .modal h2, #modal-container4.seven.out .modal-background .modal p, #modal-container5.seven.out .modal-background .modal h2, #modal-container5.seven.out .modal-background .modal p, #modal-container6.seven.out .modal-background .modal h2, #modal-container6.seven.out .modal-background .modal p { animation: modalContentFadeOut 0.5s 0.5 cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container .modal-background, #modal-container2 .modal-background, #modal-container3 .modal-background, #modal-container4 .modal-background, #modal-container5 .modal-background, #modal-container6 .modal-background { display: table-cell; background: rgba(0, 0, 0, 0.8); text-align: center; vertical-align: middle; } #modal-container .modal-background img, #modal-container2 .modal-background img, #modal-container3 .modal-background img, #modal-container4 .modal-background img, #modal-container5 .modal-background img, #modal-container6 .modal-background img { width: 50%; margin-bottom: 3rem; box-shadow: 0rem 0.66667rem 1.33333rem 0rem rgba(128, 68, 68, 0.35); } @media (max-width: 767px) { #modal-container .modal-background img, #modal-container2 .modal-background img, #modal-container3 .modal-background img, #modal-container4 .modal-background img, #modal-container5 .modal-background img, #modal-container6 .modal-background img { width: 100%; margin-left: 0; } } #modal-container .modal-background .modal, #modal-container2 .modal-background .modal, #modal-container3 .modal-background .modal, #modal-container4 .modal-background .modal, #modal-container5 .modal-background .modal, #modal-container6 .modal-background .modal { background: white; padding: 50px; display: inline-block; border-radius: 3px; font-weight: 300; position: relative; height: 100vh; overflow-y: scroll; } #modal-container .modal-background .modal h1, #modal-container .modal-background .modal h2, #modal-container .modal-background .modal h3, #modal-container .modal-background .modal p, #modal-container2 .modal-background .modal h1, #modal-container2 .modal-background .modal h2, #modal-container2 .modal-background .modal h3, #modal-container2 .modal-background .modal p, #modal-container3 .modal-background .modal h1, #modal-container3 .modal-background .modal h2, #modal-container3 .modal-background .modal h3, #modal-container3 .modal-background .modal p, #modal-container4 .modal-background .modal h1, #modal-container4 .modal-background .modal h2, #modal-container4 .modal-background .modal h3, #modal-container4 .modal-background .modal p, #modal-container5 .modal-background .modal h1, #modal-container5 .modal-background .modal h2, #modal-container5 .modal-background .modal h3, #modal-container5 .modal-background .modal p, #modal-container6 .modal-background .modal h1, #modal-container6 .modal-background .modal h2, #modal-container6 .modal-background .modal h3, #modal-container6 .modal-background .modal p { color: black; font-family: 'Josefin Sans', sans-serif; } #modal-container .modal-background .modal h1, #modal-container2 .modal-background .modal h1, #modal-container3 .modal-background .modal h1, #modal-container4 .modal-background .modal h1, #modal-container5 .modal-background .modal h1, #modal-container6 .modal-background .modal h1 { font-weight: 800; } #modal-container .modal-background .modal h2, #modal-container2 .modal-background .modal h2, #modal-container3 .modal-background .modal h2, #modal-container4 .modal-background .modal h2, #modal-container5 .modal-background .modal h2, #modal-container6 .modal-background .modal h2 { font-size: 25px; line-height: 25px; margin-bottom: 15px; color: Black; } #modal-container .modal-background .modal p, #modal-container2 .modal-background .modal p, #modal-container3 .modal-background .modal p, #modal-container4 .modal-background .modal p, #modal-container5 .modal-background .modal p, #modal-container6 .modal-background .modal p { font-size: 18px; line-height: 22px; color: black; } #modal-container .modal-background .modal .modal-svg, #modal-container2 .modal-background .modal .modal-svg, #modal-container3 .modal-background .modal .modal-svg, #modal-container4 .modal-background .modal .modal-svg, #modal-container5 .modal-background .modal .modal-svg, #modal-container6 .modal-background .modal .modal-svg { position: absolute; top: 0; left: 0; height: 100%; width: 100%; border-radius: 3px; } #modal-container .modal-background .modal .modal-svg rect, #modal-container2 .modal-background .modal .modal-svg rect, #modal-container3 .modal-background .modal .modal-svg rect, #modal-container4 .modal-background .modal .modal-svg rect, #modal-container5 .modal-background .modal .modal-svg rect, #modal-container6 .modal-background .modal .modal-svg rect { stroke: #fff; stroke-width: 2px; stroke-dasharray: 778; stroke-dashoffset: 778; } .content { min-height: 100%; height: 100%; background: white; position: relative; z-index: 0; } .content h1 { padding: 75px 0 30px 0; text-align: center; font-size: 30px; line-height: 30px; } @keyframes unfoldIn { 0% { transform: scaleY(0.005) scaleX(0); } 50% { transform: scaleY(0.005) scaleX(1); } 100% { transform: scaleY(1) scaleX(1); } } @keyframes unfoldOut { 0% { transform: scaleY(1) scaleX(1); } 50% { transform: scaleY(0.005) scaleX(1); } 100% { transform: scaleY(0.005) scaleX(0); } } @keyframes zoomIn { 0% { transform: scale(0); } 100% { transform: scale(1); } } @keyframes zoomOut { 0% { transform: scale(1); } 100% { transform: scale(0); } } @keyframes fadeIn { 0% { background: rgba(0, 0, 0, 0); } 100% { background: rgba(0, 0, 0, 0.7); } } @keyframes fadeOut { 0% { background: rgba(0, 0, 0, 0.7); } 100% { background: rgba(0, 0, 0, 0); } } @keyframes scaleUp { 0% { transform: scale(0.8) translateY(1000px); opacity: 0; } 100% { transform: scale(1) translateY(0px); opacity: 1; } } @keyframes scaleDown { 0% { transform: scale(1) translateY(0px); opacity: 1; } 100% { transform: scale(0.8) translateY(1000px); opacity: 0; } } @keyframes scaleBack { 0% { transform: scale(1); } 100% { transform: scale(0.85); } } @keyframes scaleForward { 0% { transform: scale(0.85); } 100% { transform: scale(1); } } @keyframes quickScaleDown { 0% { transform: scale(1); } 99.9% { transform: scale(1); } 100% { transform: scale(0); } } @keyframes slideUpLarge { 0% { transform: translateY(0%); } 100% { transform: translateY(-100%); } } @keyframes slideDownLarge { 0% { transform: translateY(-100%); } 100% { transform: translateY(0%); } } @keyframes moveUp { 0% { transform: translateY(150px); } 100% { transform: translateY(0); } } @keyframes moveDown { 0% { transform: translateY(0px); } 100% { transform: translateY(150px); } } @keyframes blowUpContent { 0% { transform: scale(1); opacity: 1; } 99.9% { transform: scale(2); opacity: 0; } 100% { transform: scale(0); } } @keyframes blowUpContentTwo { 0% { transform: scale(2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @keyframes blowUpModal { 0% { transform: scale(0); } 100% { transform: scale(1); } } @keyframes blowUpModalTwo { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(0); opacity: 0; } } @keyframes roadRunnerIn { 0% { transform: translateX(-1500px) skewX(30deg) scaleX(1.3); } 70% { transform: translateX(30px) skewX(0deg) scaleX(0.9); } 100% { transform: translateX(0px) skewX(0deg) scaleX(1); } } @keyframes roadRunnerOut { 0% { transform: translateX(0px) skewX(0deg) scaleX(1); } 30% { transform: translateX(-30px) skewX(-5deg) scaleX(0.9); } 100% { transform: translateX(1500px) skewX(30deg) scaleX(1.3); } } @keyframes sketchIn { 0% { stroke-dashoffset: 778; } 100% { stroke-dashoffset: 0; } } @keyframes sketchOut { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 778; } } @keyframes modalFadeIn { 0% { background-color: transparent; } 100% { background-color: white; } } @keyframes modalFadeOut { 0% { background-color: white; } 100% { background-color: transparent; } } @keyframes modalContentFadeIn { 0% { opacity: 0; top: -20px; } 100% { opacity: 1; top: 0; } } @keyframes modalContentFadeOut { 0% { opacity: 1; top: 0px; } 100% { opacity: 0; top: -20px; } } @keyframes bondJamesBond { 0% { transform: translateX(1000px); } 80% { transform: translateX(0px); border-radius: 75px; height: 75px; width: 75px; } 90% { border-radius: 3px; height: 182px; width: 247px; } 100% { border-radius: 3px; height: 162px; width: 227px; } } @keyframes killShot { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(300px) rotate(45deg); opacity: 0; } } @keyframes fadeToRed { 0% { background-color: rgba(0, 0, 0, 0.6); } 100% { background-color: rgba(255, 0, 0, 0.8); } } @keyframes slowFade { 0% { opacity: 1; } 99.9% { opacity: 0; transform: scale(1); } 100% { transform: scale(0); } } .grid-col-container { display: flex; flex-wrap: wrap; } .grid-col-container .grid-col { flex: 1 0 48.3%; box-sizing: border-box; } @media (max-width: 767px) { .grid-col-container .grid-col { flex: 1 0 100%; } } .grid-col-container .grid-col:first-child, .grid-col-container .grid-col:nth-child(3), .grid-col-container .grid-col:nth-child(5) { margin-right: 30px; } @media (max-width: 767px) { .grid-col-container .grid-col:first-child, .grid-col-container .grid-col:nth-child(3), .grid-col-container .grid-col:nth-child(5) { margin-right: 0; } } .grid-col-container .grid-col:first-child, .grid-col-container .grid-col:nth-child(2), .grid-col-container .grid-col:nth-child(3), .grid-col-container .grid-col:nth-child(4) { margin-bottom: 30px; } @media (min-width: 768px) { .grid-col-container-flex { display: flex; flex-direction: row; } .grid-col-container-flex .grid-col { flex: 1; box-sizing: border-box; padding-left: 40px; padding-right: 40px; } } .top-padding { padding-top: 110px; padding-bottom: 110px; padding-right: 30px; padding-left: 30px; } @media (min-width: 2000px) { .top-padding { padding-top: 210px; padding-bottom: 210px; } } /* ================= Media Query Mixins ================= */ /* ================= H1 style ================= */ /* ================= H1 style ================= */ /** Box shadow */ /** Arrow down **/ /** Case studies **/ /** Case study image on mobile */ @media (max-width: 767px) { .darkHeader { position: fixed; background: rgba(0, 0, 0, 0.6); } } nav { position: absolute; z-index: 2; /* ================= Animated menu ================= */ } @media (min-width: 768px) { nav { width: 80%; margin-left: 10%; } } @media (min-width: 1200px) { nav { width: 80%; margin-left: 10%; } } @media (min-width: 2000px) { nav { width: 40%; margin-left: 30%; } } @media (max-width: 767px) { nav { height: 60px; display: block; width: 100%; } nav .menu-icons { display: none; } } nav .logo { width: 50px; height: 30px; float: left; margin-top: 20px; margin-left: 5px; } nav .logo img { height: 40px; } @media (max-width: 767px) { nav .logo { position: fixed; margin-top: 12px; margin-left: 20px; } nav .logo img { height: 32px; } } nav ul { text-align: left; list-style: none; font-family: 'Josefin Sans', sans-serif; letter-spacing: 1px; font-size: 16px; float: left; } nav ul li { display: inline; margin-right: 30px; position: relative; } nav ul li.active a { color: #ffce00; font-weight: 800; } nav ul a { color: #fff; display: inline-block; transition: color 1s; padding: 10px 0 0 0; font-weight: 400; } nav ul a:hover { text-decoration: none; color: #ffce00; } nav .menu-icons { margin-right: 0; margin-left: 10px; float: right; } nav .menu-icons img { width: 25px; margin-top: 25px; margin-left: 10px; } nav .menu-icons a:hover { text-decoration: none; } nav .menu-icons a:hover:after { width: 0; height: 0; } nav .mcd-menu li { float: left; position: relative; } nav .mcd-menu li a { display: block; text-decoration: none; padding: 32px 20px; text-align: center; } nav .mcd-menu li a i { display: block; font-size: 30px; margin-bottom: 10px; } nav .mcd-menu li a strong { display: block; color: #fff; font-weight: 400; } nav .mcd-menu li a small { display: block; font-size: 10px; } nav .mcd-menu li a i, nav .mcd-menu li a strong, nav .mcd-menu li a small { position: relative; transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; -moz-transition: all 300ms linear; -webkit-transition: all 300ms linear; } nav .mcd-menu li:hover > a i { opacity: 1; -webkit-animation: moveFromTop 300ms ease-in-out; -moz-animation: moveFromTop 300ms ease-in-out; -ms-animation: moveFromTop 300ms ease-in-out; -o-animation: moveFromTop 300ms ease-in-out; animation: moveFromTop 300ms ease-in-out; } nav .mcd-menu li:hover a strong { opacity: 1; -webkit-animation: moveFromLeft 300ms ease-in-out; -moz-animation: moveFromLeft 300ms ease-in-out; -ms-animation: moveFromLeft 300ms ease-in-out; -o-animation: moveFromLeft 300ms ease-in-out; animation: moveFromLeft 300ms ease-in-out; } nav .mcd-menu li:hover a small { opacity: 1; -webkit-animation: moveFromRight 300ms ease-in-out; -moz-animation: moveFromRight 300ms ease-in-out; -ms-animation: moveFromRight 300ms ease-in-out; -o-animation: moveFromRight 300ms ease-in-out; animation: moveFromRight 300ms ease-in-out; } nav .mcd-menu li:hover > a { color: #ffce00; } nav .mcd-menu li a.active { position: relative; color: #ffce00; border: 0; border-top: 4px solid #ffce00; margin-top: 0; } nav .mcd-menu li a.active strong { margin-top: -2px; } nav .mcd-menu li a.active:before { content: ""; position: absolute; top: 0; left: 45%; border-top: 5px solid #ffce00; border-left: 5px solid transparent; border-right: 5px solid transparent; } @-webkit-keyframes moveFromTop { from { opacity: 0; -webkit-transform: translateY(200%); -moz-transform: translateY(200%); -ms-transform: translateY(200%); -o-transform: translateY(200%); transform: translateY(200%); } to { opacity: 1; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } } @-webkit-keyframes moveFromLeft { from { opacity: 0; -webkit-transform: translateX(200%); -moz-transform: translateX(200%); -ms-transform: translateX(200%); -o-transform: translateX(200%); transform: translateX(200%); } to { opacity: 1; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } } @-webkit-keyframes moveFromRight { from { opacity: 0; -webkit-transform: translateX(-200%); -moz-transform: translateX(-200%); -ms-transform: translateX(-200%); -o-transform: translateX(-200%); transform: translateX(-200%); } to { opacity: 1; -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } } nav .mcd-menu li ul, nav .mcd-menu li ul li ul { position: absolute; height: auto; min-width: 200px; padding: 0; margin: 0; background: #181a1b; border-top: 4px solid #ffce00; opacity: 0; visibility: hidden; transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; -moz-transition: all 300ms linear; -webkit-transition: all 300ms linear; top: 130px; z-index: 1000; } nav .mcd-menu li ul:before { content: ""; position: absolute; top: -8px; left: 16px; border-bottom: 5px solid #ffce00; border-left: 5px solid transparent; border-right: 5px solid transparent; } nav .mcd-menu li:hover > ul, nav .mcd-menu li ul li:hover > ul { display: block; opacity: 1; visibility: visible; top: 65px; } nav .mcd-menu li ul li { float: none; } nav .mcd-menu li ul li a { padding: 10px 10px 0 10px; text-align: left; border: 0; } nav .mcd-menu li ul li a i { font-size: 16px; display: inline-block; margin: 0 10px 0 0; } nav .mcd-menu li ul li ul { left: 230px; top: 0; border: 0; border-left: 4px solid #ffce00; } nav .mcd-menu li ul li ul:before { content: ""; position: absolute; top: 15px; left: -14px; border-right: 5px solid #ffce00; border-bottom: 5px solid transparent; border-top: 5px solid transparent; } nav .mcd-menu li ul li:hover > ul { top: 0px; left: 200px; } nav .mcd-menu li.float { float: right; } nav .mcd-menu li a.search { padding: 29px 20px 30px 10px; } nav .mcd-menu li a.search i { margin: 0; display: inline-block; font-size: 18px; } nav .mcd-menu li a.search input { border: 1px solid #EEE; padding: 10px; background: #FFF; outline: none; color: #777; } nav .mcd-menu li a.search button { border: 1px solid #ffce00; padding: 10px; background: #ffce00; outline: none; color: #FFF; margin-left: -4px; } nav .mcd-menu li a.search input:focus { border: 1px solid #ffce00; } nav .search-mobile { display: none !important; background: #ffce00; border-left: 1px solid #ffce00; border-radius: 0 3px 3px 0; } nav .search-mobile i { color: #FFF; margin: 0 !important; } @media only screen and (min-width: 960px) and (max-width: 1199px) { nav .mcd-menu li a.search input { width: 100px; } } @media only screen and (min-width: 768px) and (max-width: 959px) { nav .mcd-menu { height: 85px; } nav .mcd-menu li a { padding: 22px 12px 0 12px; } nav .mcd-menu li a i { font-size: 22px; } nav .mcd-menu li a strong { font-size: 12px; } nav .mcd-menu li a small { font-size: 10px; } nav .mcd-menu li a.search { display: none; } nav .search-mobile { display: block !important; margin: 20px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } nav .mcd-menu li:hover > ul { top: 85px; min-width: 180px; } nav .mcd-menu li ul li > ul { min-width: 150px; left: 200px; top: 0; } nav .mcd-menu li ul li:hover > ul { min-width: 150px; left: 180px; top: 0; } nav .mcd-menu li ul li ul li ul { min-width: 150px; left: 25px !important; top: 54px; border: 0; border-top: 3px solid #ffce00; } nav .mcd-menu li ul li ul li:hover ul { top: 35px; } nav .mcd-menu li ul li ul li ul:before { border: 0; border-bottom: 5px solid #ffce00; border-left: 5px solid transparent; border-right: 5px solid transparent; left: 10%; top: -8px; } nav .mcd-menu li:hover ul a { font-size: 12px; } nav .mcd-menu li:hover ul a i { font-size: 14px; } } @media only screen and (min-width: 480px) and (max-width: 767px) { nav .mcd-menu { height: 42px; position: relative; } nav .mcd-menu li a { padding: 12px 17.7px; } nav .mcd-menu li a strong, nav .mcd-menu li a small, nav .mcd-menu li a.search { display: none; } nav .mcd-menu li a i { margin: 0; font-size: 18px; } nav .mcd-menu li { position: static; } nav .mcd-menu li ul { min-width: 100%; left: 0; top: 50px; } nav .mcd-menu li:hover > ul { top: 42px; } nav .mcd-menu li > ul:before { border: 0; } nav .mcd-menu li ul > li { position: relative; } nav .mcd-menu li ul li:hover > ul { left: 34px; } nav .mcd-menu li a { position: relative; font-size: 12px; } nav .mcd-menu li a:hover strong, nav .mcd-menu li a.active strong { display: block; font-size: 10px; padding: 3px 0; position: absolute; top: -20px; left: 0; background: #ffce00; color: #FFF; min-width: 100%; text-transform: lowercase; font-weight: normal; } nav .mcd-menu li a.active:before { left: 40%; } nav .search-mobile { display: block !important; } nav .mcd-menu li ul li > ul { min-width: 200px; left: 200px; } nav .mcd-menu li ul li:hover ul { left: 180px; } nav .mcd-menu li ul li ul:before { left: -9px; } nav .mcd-menu li ul li ul li ul { min-width: 200px; border: 0; border-top: 3px solid #ffce00; left: 25px !important; top: 45px; } nav .mcd-menu li ul li ul li:hover ul { top: 40px; } nav .mcd-menu li ul li ul li ul:before { border: 0; border-bottom: 5px solid #ffce00; border-left: 5px solid transparent; border-right: 5px solid transparent; left: 10%; top: -8px; } } @media only screen and (max-width: 479px) { nav .mcd-menu { height: 42px; position: relative; } nav .mcd-menu li a strong, nav .mcd-menu li a small, nav .mcd-menu li a.search { display: none; } nav .mcd-menu li a { padding: 12px 13.8px; font-size: 12px; } nav .mcd-menu li a i { margin: 0; font-size: 18px; } nav .mcd-menu li { position: static; } nav .mcd-menu li ul { min-width: 100%; left: 0; top: 50px; } nav .mcd-menu li:hover > ul { top: 42px; } nav .mcd-menu li > ul:before { border: 0; } nav .mcd-menu li ul > li { position: relative; } nav .mcd-menu li ul li:hover > ul { left: 34px; } nav .mcd-menu li a { position: relative; } nav .mcd-menu li a:hover strong, nav .mcd-menu li a.active strong { display: block; font-size: 10px; padding: 3px 0; position: absolute; top: -20px; left: 0; background: #ffce00; color: #FFF; min-width: 100%; text-transform: lowercase; font-weight: normal; } nav .mcd-menu li a.active:before { left: 40%; } nav .mcd-menu li ul li > ul { min-width: 150px; left: 160px; } nav .mcd-menu li ul li:hover ul { left: 120px; } nav .mcd-menu li ul li ul:before { left: -9px; } nav .mcd-menu li ul li ul li ul { min-width: 160px; left: 25px !important; top: 39px; border: 0; border-top: 3px solid #ffce00; } nav .mcd-menu li ul li ul li:hover ul { top: 39px; } nav .mcd-menu li ul li ul li ul:before { border: 0; border-bottom: 5px solid #ffce00; border-left: 5px solid transparent; border-right: 5px solid transparent; left: 10%; top: -8px; } } .header { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: left; position: relative; background-size: 200px; } @media (min-width: 2000px) { .header { min-height: 675px; } } @media (max-width: 767px) { .header .padding-right-100, .header .brands { margin-left: -20px; width: 109%; } } @media (min-width: 768px) { .header .box { width: 80%; margin-left: auto; margin-right: auto; } } @media (min-width: 1200px) { .header .box { width: 80%; margin-left: auto; margin-right: auto; } } @media (min-width: 2000px) { .header .box { width: 40%; margin-left: auto; margin-right: auto; } } @media (max-width: 767px) { .header .box { width: 70%; margin-left: 10%; margin-right: 10%; } } .header .box .printer:before { content: ""; background: url(../images/print-mark.svg) no-repeat; width: 16px; height: 109px; position: absolute; top: 35px; left: -35px; } @media (max-width: 767px) { .header .box .printer:before { left: -20px; top: 8px; } } .header h1 { font-family: 'Josefin Sans', sans-serif; font-weight: 800; color: white; width: 100%; font-size: 70px; margin: 0 0 1em 0; padding: 0; line-height: 50px; } .header h1:before { content: ""; width: 20px; height: 1px; background-color: white; position: absolute; top: -17px; left: -45px; } @media (max-width: 767px) { .header h1:before { display: none; } } .header h1:after { content: ""; width: 1px; height: 20px; background-color: white; position: absolute; top: -72px; left: 0px; } @media (max-width: 767px) { .header h1:after { display: none; } } @media (max-width: 767px) { .header h1 { font-size: 3em; line-height: 50px; } .header h1:before { content: ""; width: 20px; height: 1px; background-color: white; position: absolute; top: -17px; left: -25px; } .header h1:after { content: ""; width: 1px; height: 20px; background-color: white; position: absolute; top: -52px; left: 0px; } } .header h2 { font-family: 'Josefin Sans', sans-serif; font-weight: 300; color: #ffce00; width: 100%; font-size: 4em; text-transform: uppercase; margin: 0; padding: 0; letter-spacing: 1px; } @media (max-width: 767px) { .header h2 { font-size: 1.5em; } } .header h3 { font-family: 'Teko', serif; font-weight: 100; font-size: 1em; display: block; margin-bottom: 45px; width: 100%; color: #ffce00; letter-spacing: 2px; margin-top: 10px; text-transform: uppercase; } @media (max-width: 767px) { .header h3 { font-size: 1.5em; } } .header h4 { display: none; } @media (max-width: 767px) { .header h4 { font-family: "Teko", "Serif"; font-weight: 200; font-size: 16px; margin-top: 30px; margin-bottom: 16px; color: #8c8e8f; display: block; color: #ffce00; } } .header p { font-size: 16px; color: #B3B3B3; } @media (max-width: 767px) { .header p { padding-left: 0px; } } .header p strong { font-weight: 400; color: white; } .header p:before { content: ""; width: 20px; height: 1px; background-color: white; position: absolute; bottom: -17px; left: -45px; } @media (max-width: 767px) { .header p:before { background-color: transparent; } } .header p:after { content: ""; width: 1px; height: 20px; background-color: white; position: absolute; bottom: -72px; left: 0px; } @media (max-width: 767px) { .header p:after { background-color: transparent; } } .header p a { color: #ffce00; border-bottom: 1px dotted #ffce00; } .header p a:hover { text-decoration: none; color: white; border-bottom: 1px dotted white; } .header .brands .block { display: inline-block; vertical-align: middle img; vertical-align-width: 100%; } .header .brands .block:first-child, .header .brands .block:nth-child(2), .header .brands .block:nth-child(3), .header .brands .block:nth-child(4) { margin-bottom: 20px; } .header .brands .block:nth-child(5), .header .brands .block:nth-child(6), .header .brands .block:nth-child(7), .header .brands .block:nth-child(8) { margin-bottom: 0; } .mobileNav h1 { font-weight: 200; font-size: 2em; color: rgba(255, 255, 255, 0.8); padding-bottom: 10px; } .mobileNav h2 { font-size: 1.25em; font-weight: 200; margin-top: 1.5em; color: rgba(255, 255, 255, 0.8) !important; } .mobileNav .nav-bar { position: fixed; background-color: black; top: 0; right: 100%; height: 100vh; width: 75%; display: flex; justify-content: center; align-items: center; transition: position 2.9s; -webkit-transition: position 2.9s; -moz-transition: position 2.9s; -ms-transition: position 2.9s; -o-transition: position 2.9s; z-index: 999999; } .mobileNav .toggle { left: 0; box-shadow: 1px 0 15px 2px rgba(0, 0, 0, 0.4); } .mobileNav .toggle-menu { position: fixed; top: 15px; right: 20px; width: 40px; height: 30px; display: flex; flex-direction: column; justify-content: space-around; padding: 2px 5px; border-radius: 5px; cursor: pointer; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; } .mobileNav .line { width: 100%; height: 2px; border-radius: 5px; background-color: #fff; transition: transform 0.2s ease-out; -webkit-transition: transform 0.2s ease-out; -moz-transition: transform 0.2s ease-out; -ms-transition: transform 0.2s ease-out; -o-transition: transform 0.2s ease-out; } .mobileNav .toggle .line1 { background-color: #fff; transform: scale(0.9) rotateZ(-45deg) translate(-6px, 4px); } .mobileNav .toggle .line2 { display: none; } .mobileNav .toggle .line3 { background-color: #fff; transform: scale(0.9) rotateZ(45deg) translate(-6px, -4px); } .mobileNav .toggle .toggle-menu { background-color: none; } .mobileNav .nav-list { list-style: none; } .mobileNav .nav-list h2 { margin-top: 20px; } .mobileNav .nav-list-item { text-align: center; padding: 10px 0; } .mobileNav .nav-link { color: #fff; font-size: 22px; text-decoration: none; position: relative; padding-bottom: 4px; } .mobileNav .nav-link::before { position: absolute; content: ''; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #fff; transform: scaleX(0); transition: transform 0.4s ease-in-out; transform-origin: left; -webkit-transition: transform 0.4s ease-in-out; -moz-transition: transform 0.4s ease-in-out; -ms-transition: transform 0.4s ease-in-out; -o-transition: transform 0.4s ease-in-out; } .mobileNav .nav-link:hover::before { transform: scaleX(1); } .mobileNav .nav-list { float: none; width: 100%; text-align: left; } .mobileNav .nav-list li { display: block; margin-right: 0; margin-bottom: 0em; } .mobileNav .nav-list li a { padding: 6px 0 0 0; } .mobileNav .nav-list .menu-icons { float: left; margin-left: 0; margin-right: 20px; } .mobileNav .nav-list .menu-icons img { width: 30px; } /* ================= Media Query Mixins ================= */ /* ================= H1 style ================= */ /* ================= H1 style ================= */ /** Box shadow */ /** Arrow down **/ /** Case studies **/ /** Case study image on mobile */ .icons { margin-bottom: 2em; } .icons img { width: 30px; margin-right: 20px; margin-top: 30px; } .icons a:hover { text-decoration: none; } .box .valign { min-height: 100vh; display: flex; align-items: center; justify-content: center; } .box .middleAlignment { min-height: 100vh; display: flex; align-items: center; justify-content: center; } .btncont { color: #fff; cursor: pointer; text-transform: uppercase; padding: 20px 30px; position: relative; display: inline-block; font-family: "Teko", "Serif"; font-weight: 100; letter-spacing: 2px; font-size: .9em; } @media (max-width: 767px) { .btncont { width: 100%; text-align: center; } } .btn-1 svg { height: 62px; left: 0; position: absolute; top: 0; width: 100%; } .btn-1 rect { fill: none; stroke: #ffce00; stroke-width: 3; stroke-dasharray: 422, 0; transition: all 0.35s linear; } .btn-1:hover { color: white; text-decoration: none; } .btn-1:hover rect { stroke-width: 3; stroke-dasharray: 52, 240; stroke-dashoffset: 20; transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1); } @media (max-width: 767px) { .block { margin-bottom: 2em; } } .animatable { /* initially hide animatable objects */ visibility: hidden; /* initially pause animatable objects their animations */ -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -ms-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; } /* show objects being animated */ .animated { visibility: visible; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-play-state: running; -moz-animation-play-state: running; -ms-animation-play-state: running; -o-animation-play-state: running; animation-play-state: running; } /* CSS Animations (extracted from http://glifo.uiparade.com/) */ @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-20px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInDown { 0% { opacity: 0; -o-transform: translateY(-20px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 20% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fadeIn { 0% { opacity: 0; } 20% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fadeIn { 0% { opacity: 0; } 20% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 60% { opacity: 0; } 20% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); } 60% { -webkit-transform: translateX(20px); } 80% { -webkit-transform: translateX(-5px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes bounceInLeft { 0% { opacity: 0; -moz-transform: translateX(-2000px); } 60% { -moz-transform: translateX(20px); } 80% { -moz-transform: translateX(-5px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes bounceInLeft { 0% { opacity: 0; -o-transform: translateX(-2000px); } 60% { opacity: 1; -o-transform: translateX(20px); } 80% { -o-transform: translateX(-5px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes bounceInLeft { 0% { opacity: 0; transform: translateX(-2000px); } 60% { transform: translateX(20px); } 80% { transform: translateX(-5px); } 100% { opacity: 1; transform: translateX(0); } } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); } 60% { -webkit-transform: translateX(-20px); } 80% { -webkit-transform: translateX(5px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes bounceInRight { 0% { opacity: 0; -moz-transform: translateX(2000px); } 60% { -moz-transform: translateX(-20px); } 80% { -moz-transform: translateX(5px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes bounceInRight { 0% { opacity: 0; -o-transform: translateX(2000px); } 60% { -o-transform: translateX(-20px); } 80% { -o-transform: translateX(5px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes bounceInRight { 0% { opacity: 0; transform: translateX(2000px); } 60% { transform: translateX(-20px); } 80% { transform: translateX(5px); } 100% { opacity: 1; transform: translateX(0); } } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(20px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInUp { 0% { opacity: 0; -o-transform: translateY(20px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(0.3); } 50% { -webkit-transform: scale(1.05); } 70% { -webkit-transform: scale(0.9); } 100% { opacity: 1; -webkit-transform: scale(1); } } @-moz-keyframes bounceIn { 0% { opacity: 0; -moz-transform: scale(0.3); } 50% { -moz-transform: scale(1.05); } 70% { -moz-transform: scale(0.9); } 100% { opacity: 1; -moz-transform: scale(1); } } @-o-keyframes bounceIn { 0% { opacity: 0; -o-transform: scale(0.3); } 50% { -o-transform: scale(1.05); } 70% { -o-transform: scale(0.9); } 100% { opacity: 1; -o-transform: scale(1); } } @keyframes bounceIn { 0% { opacity: 0; transform: scale(0.3); } 50% { transform: scale(1.05); } 70% { transform: scale(0.9); } 100% { opacity: 1; transform: scale(1); } } @-webkit-keyframes moveUp { 0% { opacity: 1; -webkit-transform: translateY(40px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes moveUp { 0% { opacity: 1; -moz-transform: translateY(40px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes moveUp { 0% { opacity: 1; -o-transform: translateY(40px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes moveUp { 0% { opacity: 1; transform: translateY(40px); } 100% { opacity: 1; transform: translateY(0); } } @-webkit-keyframes fadeBgColor { 0% { background: none; } 70% { background: none; } 100% { background: #464646; } } @-o-keyframes fadeBgColor { 0% { background: none; } 70% { background: none; } 100% { background: #464646; } } @keyframes fadeBgColor { 0% { background: none; } 70% { background: none; } 100% { background: #464646; } } .animated.animationDelay { animation-delay: .4s; -webkit-animation-delay: .4s; } .animated.animationDelayMed { animation-delay: 1.2s; -webkit-animation-delay: 1.2s; } .animated.animationDelayLong { animation-delay: 1.6s; -webkit-animation-delay: 1.6s; } .animated.fadeBgColor { -webkit-animation-name: fadeBgColor; -moz-animation-name: fadeBgColor; -o-animation-name: fadeBgColor; animation-name: fadeBgColor; } .animated.bounceIn { -webkit-animation-name: bounceIn; -moz-animation-name: bounceIn; -o-animation-name: bounceIn; animation-name: bounceIn; } .animated.bounceInRight { -webkit-animation-name: bounceInRight; -moz-animation-name: bounceInRight; -o-animation-name: bounceInRight; animation-name: bounceInRight; } .animated.bounceInLeft { -webkit-animation-name: bounceInLeft; -moz-animation-name: bounceInLeft; -o-animation-name: bounceInLeft; animation-name: bounceInLeft; } .animated.fadeIn { -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn; } .animated.fadeInDown { -webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -o-animation-name: fadeInDown; animation-name: fadeInDown; } .animated.fadeInUp { -webkit-animation-name: fadeInUp; -moz-animation-name: fadeInUp; -o-animation-name: fadeInUp; animation-name: fadeInUp; } .animated.moveUp { -webkit-animation-name: moveUp; -moz-animation-name: moveUp; -o-animation-name: moveUp; animation-name: moveUp; } #modal-container, #modal-container2, #modal-container3, #modal-container4, #modal-container5, #modal-container6 { position: fixed; display: table; height: 100%; width: 100%; top: 0; left: 0; transform: scale(0); z-index: 9999; overflow: scroll; } #modal-container .btn-1, #modal-container2 .btn-1, #modal-container3 .btn-1, #modal-container4 .btn-1, #modal-container5 .btn-1, #modal-container6 .btn-1 { color: black; } #modal-container .btn-1 svg, #modal-container2 .btn-1 svg, #modal-container3 .btn-1 svg, #modal-container4 .btn-1 svg, #modal-container5 .btn-1 svg, #modal-container6 .btn-1 svg { height: 62px; left: 0; position: absolute; top: 0; width: 100%; } #modal-container .btn-1 rect, #modal-container2 .btn-1 rect, #modal-container3 .btn-1 rect, #modal-container4 .btn-1 rect, #modal-container5 .btn-1 rect, #modal-container6 .btn-1 rect { fill: none; stroke: #009bc3; stroke-width: 3; stroke-dasharray: 422, 0; transition: all 0.35s linear; } #modal-container .btn-1:hover, #modal-container2 .btn-1:hover, #modal-container3 .btn-1:hover, #modal-container4 .btn-1:hover, #modal-container5 .btn-1:hover, #modal-container6 .btn-1:hover { color: black; text-decoration: none; } #modal-container .btn-1:hover rect, #modal-container2 .btn-1:hover rect, #modal-container3 .btn-1:hover rect, #modal-container4 .btn-1:hover rect, #modal-container5 .btn-1:hover rect, #modal-container6 .btn-1:hover rect { stroke-width: 3; stroke-dasharray: 52, 240; stroke-dashoffset: 20; transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1); } #modal-container.one, #modal-container2.one, #modal-container3.one, #modal-container4.one, #modal-container5.one, #modal-container6.one { transform: scaleY(0.01) scaleX(0); animation: unfoldIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.one .modal-background .modal, #modal-container2.one .modal-background .modal, #modal-container3.one .modal-background .modal, #modal-container4.one .modal-background .modal, #modal-container5.one .modal-background .modal, #modal-container6.one .modal-background .modal { transform: scale(0); animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.one.out, #modal-container2.one.out, #modal-container3.one.out, #modal-container4.one.out, #modal-container5.one.out, #modal-container6.one.out { transform: scale(1); animation: unfoldOut 1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.one.out .modal-background .modal, #modal-container2.one.out .modal-background .modal, #modal-container3.one.out .modal-background .modal, #modal-container4.one.out .modal-background .modal, #modal-container5.one.out .modal-background .modal, #modal-container6.one.out .modal-background .modal { animation: zoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.two, #modal-container2.two, #modal-container3.two, #modal-container4.two, #modal-container5.two, #modal-container6.two { transform: scale(1); } #modal-container.two .modal-background, #modal-container2.two .modal-background, #modal-container3.two .modal-background, #modal-container4.two .modal-background, #modal-container5.two .modal-background, #modal-container6.two .modal-background { background: rgba(0, 0, 0, 0); animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.two .modal-background .modal, #modal-container2.two .modal-background .modal, #modal-container3.two .modal-background .modal, #modal-container4.two .modal-background .modal, #modal-container5.two .modal-background .modal, #modal-container6.two .modal-background .modal { opacity: 0; animation: scaleUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.two + .content, #modal-container2.two + .content, #modal-container3.two + .content, #modal-container4.two + .content, #modal-container5.two + .content, #modal-container6.two + .content { animation: scaleBack 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.two.out, #modal-container2.two.out, #modal-container3.two.out, #modal-container4.two.out, #modal-container5.two.out, #modal-container6.two.out { animation: quickScaleDown 0s .5s linear forwards; } #modal-container.two.out .modal-background, #modal-container2.two.out .modal-background, #modal-container3.two.out .modal-background, #modal-container4.two.out .modal-background, #modal-container5.two.out .modal-background, #modal-container6.two.out .modal-background { animation: fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.two.out .modal-background .modal, #modal-container2.two.out .modal-background .modal, #modal-container3.two.out .modal-background .modal, #modal-container4.two.out .modal-background .modal, #modal-container5.two.out .modal-background .modal, #modal-container6.two.out .modal-background .modal { animation: scaleDown 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.two.out + .content, #modal-container2.two.out + .content, #modal-container3.two.out + .content, #modal-container4.two.out + .content, #modal-container5.two.out + .content, #modal-container6.two.out + .content { animation: scaleForward 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.three, #modal-container2.three, #modal-container3.three, #modal-container4.three, #modal-container5.three, #modal-container6.three { z-index: 0; transform: scale(1); } #modal-container.three .modal-background, #modal-container2.three .modal-background, #modal-container3.three .modal-background, #modal-container4.three .modal-background, #modal-container5.three .modal-background, #modal-container6.three .modal-background { background: rgba(0, 0, 0, 0.6); } #modal-container.three .modal-background .modal, #modal-container2.three .modal-background .modal, #modal-container3.three .modal-background .modal, #modal-container4.three .modal-background .modal, #modal-container5.three .modal-background .modal, #modal-container6.three .modal-background .modal { animation: moveUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.three + .content, #modal-container2.three + .content, #modal-container3.three + .content, #modal-container4.three + .content, #modal-container5.three + .content, #modal-container6.three + .content { z-index: 1; animation: slideUpLarge 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.three.out .modal-background .modal, #modal-container2.three.out .modal-background .modal, #modal-container3.three.out .modal-background .modal, #modal-container4.three.out .modal-background .modal, #modal-container5.three.out .modal-background .modal, #modal-container6.three.out .modal-background .modal { animation: moveDown 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.three.out + .content, #modal-container2.three.out + .content, #modal-container3.three.out + .content, #modal-container4.three.out + .content, #modal-container5.three.out + .content, #modal-container6.three.out + .content { animation: slideDownLarge 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.four, #modal-container2.four, #modal-container3.four, #modal-container4.four, #modal-container5.four, #modal-container6.four { z-index: 0; transform: scale(1); } #modal-container.four .modal-background, #modal-container2.four .modal-background, #modal-container3.four .modal-background, #modal-container4.four .modal-background, #modal-container5.four .modal-background, #modal-container6.four .modal-background { background: rgba(0, 0, 0, 0.7); } #modal-container.four .modal-background .modal, #modal-container2.four .modal-background .modal, #modal-container3.four .modal-background .modal, #modal-container4.four .modal-background .modal, #modal-container5.four .modal-background .modal, #modal-container6.four .modal-background .modal { animation: blowUpModal 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.four + .content, #modal-container2.four + .content, #modal-container3.four + .content, #modal-container4.four + .content, #modal-container5.four + .content, #modal-container6.four + .content { z-index: 1; animation: blowUpContent 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.four.out .modal-background .modal, #modal-container2.four.out .modal-background .modal, #modal-container3.four.out .modal-background .modal, #modal-container4.four.out .modal-background .modal, #modal-container5.four.out .modal-background .modal, #modal-container6.four.out .modal-background .modal { animation: blowUpModalTwo 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.four.out + .content, #modal-container2.four.out + .content, #modal-container3.four.out + .content, #modal-container4.four.out + .content, #modal-container5.four.out + .content, #modal-container6.four.out + .content { animation: blowUpContentTwo 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.five, #modal-container2.five, #modal-container3.five, #modal-container4.five, #modal-container5.five, #modal-container6.five { transform: scale(1); } #modal-container.five .modal-background, #modal-container2.five .modal-background, #modal-container3.five .modal-background, #modal-container4.five .modal-background, #modal-container5.five .modal-background, #modal-container6.five .modal-background { background: rgba(0, 0, 0, 0); animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.five .modal-background .modal, #modal-container2.five .modal-background .modal, #modal-container3.five .modal-background .modal, #modal-container4.five .modal-background .modal, #modal-container5.five .modal-background .modal, #modal-container6.five .modal-background .modal { transform: translateX(-1500px); animation: roadRunnerIn 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.five.out, #modal-container2.five.out, #modal-container3.five.out, #modal-container4.five.out, #modal-container5.five.out, #modal-container6.five.out { animation: quickScaleDown 0s .5s linear forwards; } #modal-container.five.out .modal-background, #modal-container2.five.out .modal-background, #modal-container3.five.out .modal-background, #modal-container4.five.out .modal-background, #modal-container5.five.out .modal-background, #modal-container6.five.out .modal-background { animation: fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.five.out .modal-background .modal, #modal-container2.five.out .modal-background .modal, #modal-container3.five.out .modal-background .modal, #modal-container4.five.out .modal-background .modal, #modal-container5.five.out .modal-background .modal, #modal-container6.five.out .modal-background .modal { animation: roadRunnerOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.six, #modal-container2.six, #modal-container3.six, #modal-container4.six, #modal-container5.six, #modal-container6.six { transform: scale(1); } #modal-container.six .modal-background, #modal-container2.six .modal-background, #modal-container3.six .modal-background, #modal-container4.six .modal-background, #modal-container5.six .modal-background, #modal-container6.six .modal-background { background: rgba(0, 0, 0, 0); animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.six .modal-background .modal, #modal-container2.six .modal-background .modal, #modal-container3.six .modal-background .modal, #modal-container4.six .modal-background .modal, #modal-container5.six .modal-background .modal, #modal-container6.six .modal-background .modal { background-color: transparent; animation: modalFadeIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.six .modal-background .modal h2, #modal-container.six .modal-background .modal p, #modal-container2.six .modal-background .modal h2, #modal-container2.six .modal-background .modal p, #modal-container3.six .modal-background .modal h2, #modal-container3.six .modal-background .modal p, #modal-container4.six .modal-background .modal h2, #modal-container4.six .modal-background .modal p, #modal-container5.six .modal-background .modal h2, #modal-container5.six .modal-background .modal p, #modal-container6.six .modal-background .modal h2, #modal-container6.six .modal-background .modal p { opacity: 0; position: relative; animation: modalContentFadeIn 0.5s 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.six .modal-background .modal .modal-svg rect, #modal-container2.six .modal-background .modal .modal-svg rect, #modal-container3.six .modal-background .modal .modal-svg rect, #modal-container4.six .modal-background .modal .modal-svg rect, #modal-container5.six .modal-background .modal .modal-svg rect, #modal-container6.six .modal-background .modal .modal-svg rect { animation: sketchIn 0.5s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.six.out, #modal-container2.six.out, #modal-container3.six.out, #modal-container4.six.out, #modal-container5.six.out, #modal-container6.six.out { animation: quickScaleDown 0s .5s linear forwards; } #modal-container.six.out .modal-background, #modal-container2.six.out .modal-background, #modal-container3.six.out .modal-background, #modal-container4.six.out .modal-background, #modal-container5.six.out .modal-background, #modal-container6.six.out .modal-background { animation: fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.six.out .modal-background .modal, #modal-container2.six.out .modal-background .modal, #modal-container3.six.out .modal-background .modal, #modal-container4.six.out .modal-background .modal, #modal-container5.six.out .modal-background .modal, #modal-container6.six.out .modal-background .modal { animation: modalFadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.six.out .modal-background .modal h2, #modal-container.six.out .modal-background .modal p, #modal-container2.six.out .modal-background .modal h2, #modal-container2.six.out .modal-background .modal p, #modal-container3.six.out .modal-background .modal h2, #modal-container3.six.out .modal-background .modal p, #modal-container4.six.out .modal-background .modal h2, #modal-container4.six.out .modal-background .modal p, #modal-container5.six.out .modal-background .modal h2, #modal-container5.six.out .modal-background .modal p, #modal-container6.six.out .modal-background .modal h2, #modal-container6.six.out .modal-background .modal p { animation: modalContentFadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.six.out .modal-background .modal .modal-svg rect, #modal-container2.six.out .modal-background .modal .modal-svg rect, #modal-container3.six.out .modal-background .modal .modal-svg rect, #modal-container4.six.out .modal-background .modal .modal-svg rect, #modal-container5.six.out .modal-background .modal .modal-svg rect, #modal-container6.six.out .modal-background .modal .modal-svg rect { animation: sketchOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.seven, #modal-container2.seven, #modal-container3.seven, #modal-container4.seven, #modal-container5.seven, #modal-container6.seven { transform: scale(1); } #modal-container.seven .modal-background, #modal-container2.seven .modal-background, #modal-container3.seven .modal-background, #modal-container4.seven .modal-background, #modal-container5.seven .modal-background, #modal-container6.seven .modal-background { background: rgba(0, 0, 0, 0); animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.seven .modal-background .modal, #modal-container2.seven .modal-background .modal, #modal-container3.seven .modal-background .modal, #modal-container4.seven .modal-background .modal, #modal-container5.seven .modal-background .modal, #modal-container6.seven .modal-background .modal { height: 75px; width: 75px; border-radius: 75px; overflow: hidden; animation: bondJamesBond 1.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.seven .modal-background .modal h2, #modal-container.seven .modal-background .modal p, #modal-container2.seven .modal-background .modal h2, #modal-container2.seven .modal-background .modal p, #modal-container3.seven .modal-background .modal h2, #modal-container3.seven .modal-background .modal p, #modal-container4.seven .modal-background .modal h2, #modal-container4.seven .modal-background .modal p, #modal-container5.seven .modal-background .modal h2, #modal-container5.seven .modal-background .modal p, #modal-container6.seven .modal-background .modal h2, #modal-container6.seven .modal-background .modal p { opacity: 0; position: relative; animation: modalContentFadeIn .5s 1.4s linear forwards; } #modal-container.seven.out, #modal-container2.seven.out, #modal-container3.seven.out, #modal-container4.seven.out, #modal-container5.seven.out, #modal-container6.seven.out { animation: slowFade .5s 1.5s linear forwards; } #modal-container.seven.out .modal-background, #modal-container2.seven.out .modal-background, #modal-container3.seven.out .modal-background, #modal-container4.seven.out .modal-background, #modal-container5.seven.out .modal-background, #modal-container6.seven.out .modal-background { background-color: rgba(0, 0, 0, 0.7); animation: fadeToRed 2s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.seven.out .modal-background .modal, #modal-container2.seven.out .modal-background .modal, #modal-container3.seven.out .modal-background .modal, #modal-container4.seven.out .modal-background .modal, #modal-container5.seven.out .modal-background .modal, #modal-container6.seven.out .modal-background .modal { border-radius: 3px; height: 162px; width: 227px; animation: killShot 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container.seven.out .modal-background .modal h2, #modal-container.seven.out .modal-background .modal p, #modal-container2.seven.out .modal-background .modal h2, #modal-container2.seven.out .modal-background .modal p, #modal-container3.seven.out .modal-background .modal h2, #modal-container3.seven.out .modal-background .modal p, #modal-container4.seven.out .modal-background .modal h2, #modal-container4.seven.out .modal-background .modal p, #modal-container5.seven.out .modal-background .modal h2, #modal-container5.seven.out .modal-background .modal p, #modal-container6.seven.out .modal-background .modal h2, #modal-container6.seven.out .modal-background .modal p { animation: modalContentFadeOut 0.5s 0.5 cubic-bezier(0.165, 0.84, 0.44, 1) forwards; } #modal-container .modal-background, #modal-container2 .modal-background, #modal-container3 .modal-background, #modal-container4 .modal-background, #modal-container5 .modal-background, #modal-container6 .modal-background { display: table-cell; background: rgba(0, 0, 0, 0.8); text-align: center; vertical-align: middle; } #modal-container .modal-background img, #modal-container2 .modal-background img, #modal-container3 .modal-background img, #modal-container4 .modal-background img, #modal-container5 .modal-background img, #modal-container6 .modal-background img { width: 50%; margin-bottom: 3rem; box-shadow: 0rem 0.66667rem 1.33333rem 0rem rgba(128, 68, 68, 0.35); } @media (max-width: 767px) { #modal-container .modal-background img, #modal-container2 .modal-background img, #modal-container3 .modal-background img, #modal-container4 .modal-background img, #modal-container5 .modal-background img, #modal-container6 .modal-background img { width: 100%; margin-left: 0; } } #modal-container .modal-background .modal, #modal-container2 .modal-background .modal, #modal-container3 .modal-background .modal, #modal-container4 .modal-background .modal, #modal-container5 .modal-background .modal, #modal-container6 .modal-background .modal { background: white; padding: 50px; display: inline-block; border-radius: 3px; font-weight: 300; position: relative; height: 100vh; overflow-y: scroll; } #modal-container .modal-background .modal h1, #modal-container .modal-background .modal h2, #modal-container .modal-background .modal h3, #modal-container .modal-background .modal p, #modal-container2 .modal-background .modal h1, #modal-container2 .modal-background .modal h2, #modal-container2 .modal-background .modal h3, #modal-container2 .modal-background .modal p, #modal-container3 .modal-background .modal h1, #modal-container3 .modal-background .modal h2, #modal-container3 .modal-background .modal h3, #modal-container3 .modal-background .modal p, #modal-container4 .modal-background .modal h1, #modal-container4 .modal-background .modal h2, #modal-container4 .modal-background .modal h3, #modal-container4 .modal-background .modal p, #modal-container5 .modal-background .modal h1, #modal-container5 .modal-background .modal h2, #modal-container5 .modal-background .modal h3, #modal-container5 .modal-background .modal p, #modal-container6 .modal-background .modal h1, #modal-container6 .modal-background .modal h2, #modal-container6 .modal-background .modal h3, #modal-container6 .modal-background .modal p { color: black; font-family: 'Josefin Sans', sans-serif; } #modal-container .modal-background .modal h1, #modal-container2 .modal-background .modal h1, #modal-container3 .modal-background .modal h1, #modal-container4 .modal-background .modal h1, #modal-container5 .modal-background .modal h1, #modal-container6 .modal-background .modal h1 { font-weight: 800; } #modal-container .modal-background .modal h2, #modal-container2 .modal-background .modal h2, #modal-container3 .modal-background .modal h2, #modal-container4 .modal-background .modal h2, #modal-container5 .modal-background .modal h2, #modal-container6 .modal-background .modal h2 { font-size: 25px; line-height: 25px; margin-bottom: 15px; color: Black; } #modal-container .modal-background .modal p, #modal-container2 .modal-background .modal p, #modal-container3 .modal-background .modal p, #modal-container4 .modal-background .modal p, #modal-container5 .modal-background .modal p, #modal-container6 .modal-background .modal p { font-size: 18px; line-height: 22px; color: black; } #modal-container .modal-background .modal .modal-svg, #modal-container2 .modal-background .modal .modal-svg, #modal-container3 .modal-background .modal .modal-svg, #modal-container4 .modal-background .modal .modal-svg, #modal-container5 .modal-background .modal .modal-svg, #modal-container6 .modal-background .modal .modal-svg { position: absolute; top: 0; left: 0; height: 100%; width: 100%; border-radius: 3px; } #modal-container .modal-background .modal .modal-svg rect, #modal-container2 .modal-background .modal .modal-svg rect, #modal-container3 .modal-background .modal .modal-svg rect, #modal-container4 .modal-background .modal .modal-svg rect, #modal-container5 .modal-background .modal .modal-svg rect, #modal-container6 .modal-background .modal .modal-svg rect { stroke: #fff; stroke-width: 2px; stroke-dasharray: 778; stroke-dashoffset: 778; } .content { min-height: 100%; height: 100%; background: white; position: relative; z-index: 0; } .content h1 { padding: 75px 0 30px 0; text-align: center; font-size: 30px; line-height: 30px; } @keyframes unfoldIn { 0% { transform: scaleY(0.005) scaleX(0); } 50% { transform: scaleY(0.005) scaleX(1); } 100% { transform: scaleY(1) scaleX(1); } } @keyframes unfoldOut { 0% { transform: scaleY(1) scaleX(1); } 50% { transform: scaleY(0.005) scaleX(1); } 100% { transform: scaleY(0.005) scaleX(0); } } @keyframes zoomIn { 0% { transform: scale(0); } 100% { transform: scale(1); } } @keyframes zoomOut { 0% { transform: scale(1); } 100% { transform: scale(0); } } @keyframes fadeIn { 0% { background: rgba(0, 0, 0, 0); } 100% { background: rgba(0, 0, 0, 0.7); } } @keyframes fadeOut { 0% { background: rgba(0, 0, 0, 0.7); } 100% { background: rgba(0, 0, 0, 0); } } @keyframes scaleUp { 0% { transform: scale(0.8) translateY(1000px); opacity: 0; } 100% { transform: scale(1) translateY(0px); opacity: 1; } } @keyframes scaleDown { 0% { transform: scale(1) translateY(0px); opacity: 1; } 100% { transform: scale(0.8) translateY(1000px); opacity: 0; } } @keyframes scaleBack { 0% { transform: scale(1); } 100% { transform: scale(0.85); } } @keyframes scaleForward { 0% { transform: scale(0.85); } 100% { transform: scale(1); } } @keyframes quickScaleDown { 0% { transform: scale(1); } 99.9% { transform: scale(1); } 100% { transform: scale(0); } } @keyframes slideUpLarge { 0% { transform: translateY(0%); } 100% { transform: translateY(-100%); } } @keyframes slideDownLarge { 0% { transform: translateY(-100%); } 100% { transform: translateY(0%); } } @keyframes moveUp { 0% { transform: translateY(150px); } 100% { transform: translateY(0); } } @keyframes moveDown { 0% { transform: translateY(0px); } 100% { transform: translateY(150px); } } @keyframes blowUpContent { 0% { transform: scale(1); opacity: 1; } 99.9% { transform: scale(2); opacity: 0; } 100% { transform: scale(0); } } @keyframes blowUpContentTwo { 0% { transform: scale(2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @keyframes blowUpModal { 0% { transform: scale(0); } 100% { transform: scale(1); } } @keyframes blowUpModalTwo { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(0); opacity: 0; } } @keyframes roadRunnerIn { 0% { transform: translateX(-1500px) skewX(30deg) scaleX(1.3); } 70% { transform: translateX(30px) skewX(0deg) scaleX(0.9); } 100% { transform: translateX(0px) skewX(0deg) scaleX(1); } } @keyframes roadRunnerOut { 0% { transform: translateX(0px) skewX(0deg) scaleX(1); } 30% { transform: translateX(-30px) skewX(-5deg) scaleX(0.9); } 100% { transform: translateX(1500px) skewX(30deg) scaleX(1.3); } } @keyframes sketchIn { 0% { stroke-dashoffset: 778; } 100% { stroke-dashoffset: 0; } } @keyframes sketchOut { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 778; } } @keyframes modalFadeIn { 0% { background-color: transparent; } 100% { background-color: white; } } @keyframes modalFadeOut { 0% { background-color: white; } 100% { background-color: transparent; } } @keyframes modalContentFadeIn { 0% { opacity: 0; top: -20px; } 100% { opacity: 1; top: 0; } } @keyframes modalContentFadeOut { 0% { opacity: 1; top: 0px; } 100% { opacity: 0; top: -20px; } } @keyframes bondJamesBond { 0% { transform: translateX(1000px); } 80% { transform: translateX(0px); border-radius: 75px; height: 75px; width: 75px; } 90% { border-radius: 3px; height: 182px; width: 247px; } 100% { border-radius: 3px; height: 162px; width: 227px; } } @keyframes killShot { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(300px) rotate(45deg); opacity: 0; } } @keyframes fadeToRed { 0% { background-color: rgba(0, 0, 0, 0.6); } 100% { background-color: rgba(255, 0, 0, 0.8); } } @keyframes slowFade { 0% { opacity: 1; } 99.9% { opacity: 0; transform: scale(1); } 100% { transform: scale(0); } } .grid-col-container { display: flex; flex-wrap: wrap; } .grid-col-container .grid-col { flex: 1 0 48.3%; box-sizing: border-box; } @media (max-width: 767px) { .grid-col-container .grid-col { flex: 1 0 100%; } } .grid-col-container .grid-col:first-child, .grid-col-container .grid-col:nth-child(3), .grid-col-container .grid-col:nth-child(5) { margin-right: 30px; } @media (max-width: 767px) { .grid-col-container .grid-col:first-child, .grid-col-container .grid-col:nth-child(3), .grid-col-container .grid-col:nth-child(5) { margin-right: 0; } } .grid-col-container .grid-col:first-child, .grid-col-container .grid-col:nth-child(2), .grid-col-container .grid-col:nth-child(3), .grid-col-container .grid-col:nth-child(4) { margin-bottom: 30px; } @media (min-width: 768px) { .grid-col-container-flex { display: flex; flex-direction: row; } .grid-col-container-flex .grid-col { flex: 1; box-sizing: border-box; padding-left: 40px; padding-right: 40px; } } .top-padding { padding-top: 110px; padding-bottom: 110px; padding-right: 30px; padding-left: 30px; } @media (min-width: 2000px) { .top-padding { padding-top: 210px; padding-bottom: 210px; } } .dark-theme { color: white; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#181a1b+0,000000+37,000000+100 */ background: #181a1b; /* Old browsers */ background: -moz-linear-gradient(top, #27282c 0%, #000000 37%, #000000 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #27282c 0%, #000000 37%, #000000 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #27282c 0%, #000000 37%, #000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#27282c', endColorstr='#000000',GradientType=0 ); /* IE6-9 */ } /* ================= Media Query Mixins ================= */ /* ================= H1 style ================= */ /* ================= H1 style ================= */ /** Box shadow */ /** Arrow down **/ /** Case studies **/ /** Case study image on mobile */ /* ================= Media Query Mixins ================= */ /* ================= H1 style ================= */ /* ================= H1 style ================= */ /** Box shadow */ /** Arrow down **/ /** Case studies **/ /** Case study image on mobile */ .case-heading { text-align: center; position: relative; } @media (max-width: 767px) { .case-heading { text-align: left; margin-left: 15px; } } .case-heading h1 { font-family: 'Josefin Sans', sans-serif; font-weight: 800; font-size: 42px; color: white; position: absolute; padding: 0; margin: 0; bottom: 12px; left: 0; right: 0; z-index: 1; line-height: 1; } @media (max-width: 767px) { .case-heading h1 { bottom: 3px; } } .case-heading h2 { font-family: 'Josefin Sans', sans-serif; font-weight: 900; font-size: 80px; padding: 0; margin: 0; color: rgba(255, 255, 255, 0.04); } .case-heading h2 strong { font-weight: 600; } @media (max-width: 767px) { .case-heading h2 { font-size: 55px; } } .casestudy { display: flex; align-items: center; justify-content: center; padding: 4em 10% 0 10%; } @media (max-width: 767px) { .casestudy { padding: 4em 5% 0 5%; } } .casestudy .number-container { position: relative; margin-bottom: 2em; position: relative; } @media (max-width: 767px) { .casestudy .number-container { margin-bottom: 4em; } } .casestudy .number-container .number { width: 100%; font-family: 'Teko', sans-serif; font-size: 1.25em; position: relative; top: -24px; padding: 10px 10px 10px 0; } @media (max-width: 767px) { .casestudy .number-container .number { font-size: 2em; } } .casestudy .number-container .number::before { background: url("../images/curl.svg") no-repeat; content: ""; width: 340px; height: 30px; position: absolute; z-index: 999; right: -80px; top: 0; } @media (max-width: 767px) { .casestudy .number-container .number::before { display: none; } } .casestudy .number-container .number:after { content: ""; width: 92%; height: 1px; background: white; position: absolute; z-index: 1; left: 20px; top: 24px; } @media (min-width: 768px) { .casestudy .number-container .number:after { width: 88%; } } @media (max-width: 767px) { .casestudy .number-container .number:after { top: 32px; left: 30px; width: 90%; } } .casestudy .col-left .logo { width: 30%; margin-bottom: 4em; } @media (max-width: 767px) { .casestudy .col-left .logo { width: 60%; } } .casestudy .col-left h1 { color: #ffce00; margin-bottom: 2px; font-family: "Teko", "Arial"; font-size: 1em; letter-spacing: 2px; } .casestudy .col-left h2 { font-family: 'Josefin Sans', sans-serif; margin-bottom: 9px; font-size: 30px; line-height: 34px; font-weight: 800; } @media (max-width: 767px) { .casestudy .col-left h2 { font-size: 30px; line-height: 38px; } } .casestudy .col-left h3 { color: #ffce00; margin-bottom: 2em; font-family: "Teko", "Arial"; font-size: 1em; letter-spacing: 2px; font-weight: 100; } .casestudy .col-left p { margin-bottom: 2em; } .casestudy .col-right img { width: 75%; } @media (max-width: 767px) { .casestudy .col-right img { width: 100%; } } .casestudy .toolset { margin: 40px 0; } @media (min-width: 768px) { .casestudy .toolset { bottom: 2em; margin-top: 81px; } } .casestudy .toolset h4 { font-size: .75em; font-weight: 500; color: white; text-transform: uppercase; margin-bottom: 1em; } .casestudy .toolset img { margin-left: .25em; height: 25px; -webkit-box-shadow: 9px 7px 5px -4px rgba(0, 0, 0, 0.7); -moz-box-shadow: 9px 7px 5px -4px rgba(0, 0, 0, 0.7); box-shadow: 9px 7px 5px -4px rgba(0, 0, 0, 0.7); -webkit-box-shadow: 9px 7px 5px -4px rgba(0, 0, 0, 0.44); -moz-box-shadow: 9px 7px 5px -4px rgba(0, 0, 0, 0.44); box-shadow: 9px 7px 5px -4px rgba(0, 0, 0, 0.44); } .preservica-home h1, .preservica-home h3 { color: #009ac3 !important; } .preservica-home .btn-1 svg { height: 62px; left: 0; position: absolute; top: 0; width: 100%; } .preservica-home .btn-1 rect { fill: none; stroke: #009ac3; stroke-width: 3; stroke-dasharray: 422, 0; transition: all 0.35s linear; } .preservica-home .btn-1:hover { color: white; text-decoration: none; } .preservica-home .btn-1:hover rect { stroke-width: 3; stroke-dasharray: 52, 240; stroke-dashoffset: 20; transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1); } .agspace-home h1, .agspace-home h3 { color: #72ab3b !important; } .agspace-home .btn-1 svg { height: 62px; left: 0; position: absolute; top: 0; width: 100%; } .agspace-home .btn-1 rect { fill: none; stroke: #72ab3b; stroke-width: 3; stroke-dasharray: 422, 0; transition: all 0.35s linear; } .agspace-home .btn-1:hover { color: white; text-decoration: none; } .agspace-home .btn-1:hover rect { stroke-width: 3; stroke-dasharray: 52, 240; stroke-dashoffset: 20; transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1); } .zift-home h1, .zift-home h3 { color: #46beee !important; } .zift-home .btn-1 svg { height: 62px; left: 0; position: absolute; top: 0; width: 100%; } .zift-home .btn-1 rect { fill: none; stroke: #46beee; stroke-width: 3; stroke-dasharray: 422, 0; transition: all 0.35s linear; } .zift-home .btn-1:hover { color: white; text-decoration: none; } .zift-home .btn-1:hover rect { stroke-width: 3; stroke-dasharray: 52, 240; stroke-dashoffset: 20; transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1); } /* ================= Media Query Mixins ================= */ /* ================= H1 style ================= */ /* ================= H1 style ================= */ /** Box shadow */ /** Arrow down **/ /** Case studies **/ /** Case study image on mobile */ footer { text-align: center; margin: 0; } footer p { font-size: .9em; line-height: 1em; } footer span { color: #ffce00; } footer strong { font-style: italic; color: white; } footer .btn-1 { color: white !important; } /* ================= Media Query Mixins ================= */ .case-study-page { background: #f0efed; } .case-study-page h2 { color: #009ac3; } @media (max-width: 767px) { .case-study-page h2 { margin-top: 0em; } } .case-study-page .header { margin-bottom: 0; align-items: normal; } @media (max-width: 767px) { .case-study-page .header { background-size: 100%; margin-bottom: 0; } } .case-study-page .header .container { margin: 0; padding-top: 140px; } .case-study-page .header:before { display: none; } .case-study-page .header .three-col { border-color: white; } .case-study-page .header img { width: 50%; margin-bottom: 5em; } @media (max-width: 767px) { .case-study-page .header img { width: 80%; margin-bottom: 2em; } } .case-study-page .header h1, .case-study-page .header h2, .case-study-page .header h3 { font-size: 1em; font-family: "Teko", "Arial"; letter-spacing: 2px; font-weight: 100; color: #B3B3B3; padding-bottom: 5px; margin-bottom: 0; text-transform: uppercase; } .case-study-page .header h2 { margin-top: 15px; color: #B3B3B3; } .case-study-page .header h3 img { width: 30%; } @media (max-width: 767px) { .case-study-page .header h3 img { width: 80%; padding: .25em 0; } } .case-study-page .header h5 { font-family: 'Josefin Sans', sans-serif; font-size: 1em; color: white; font-weight: 300; line-height: 20px; } .case-study-page .header ul a { color: white; } .case-study-page .header p { color: white; font-family: 'Josefin Sans', sans-serif; font-size: 30px; line-height: 34px; font-weight: 800; } @media (max-width: 767px) { .case-study-page .header p { font-size: 18px; line-height: 24px; } } @media (max-width: 767px) { .case-study-page .header .printer { top: 16px; } } .case-study-page .customers img { width: 100%; } .case-study-page .case-heading h1 { color: #000; } .case-study-page .case-heading h2 { font-family: 'Josefin Sans', sans-serif; font-weight: 900; font-size: 92px; padding: 0; margin: 0; color: rgba(0, 0, 0, 0.04); } .case-study-page .case-heading h2 strong { font-weight: 600; } @media (max-width: 767px) { .case-study-page .case-heading h2 { display: none; } } .case-study-page .case-study-next { color: white; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#181a1b+0,000000+37,000000+100 */ background: #181a1b; /* Old browsers */ background: -moz-linear-gradient(top, #27282c 0%, #000000 37%, #000000 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #27282c 0%, #000000 37%, #000000 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #27282c 0%, #000000 37%, #000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#27282c', endColorstr='#000000',GradientType=0 ); /* IE6-9 */ padding-bottom: 10em; padding-top: 10em; } .case-study-page .case-study-next h2 { color: white; } .case-study-page .case-study-next a { color: white; } .case-study-page .case-study-next .number-container { margin-bottom: 2em; } .case-study-page .case-study-next h1 { color: white; } .case-study-page .case-study-next .case-heading h2 { color: rgba(255, 255, 255, 0.04); } .color-row { margin-bottom: 2em; display: flex; } .color-row .colour-palette01, .color-row .colour-palette02, .color-row .colour-palette03, .color-row .colour-palette04, .color-row .colour-palette05, .color-row .colour-palette06, .color-row .colour-palette07, .color-row .colour-palette08, .color-row .colour-palette09, .color-row .colour-palette10 { height: 120px; width: 20%; flex: 1; } @media (max-width: 767px) { .color-row .colour-palette01, .color-row .colour-palette02, .color-row .colour-palette03, .color-row .colour-palette04, .color-row .colour-palette05, .color-row .colour-palette06, .color-row .colour-palette07, .color-row .colour-palette08, .color-row .colour-palette09, .color-row .colour-palette10 { width: 40px; height: 40px; } } .color-row .colour-palette01 { background: #02352c; } .color-row .colour-palette02 { background: #035d4e; } .color-row .colour-palette03 { background: #05856f; } .color-row .colour-palette04 { background: #50aa9a; } .color-row .colour-palette05 { background: #afe0b7; } .color-row .colour-palette06 { background: #581515; } .color-row .colour-palette07 { background: #992525; } .color-row .colour-palette08 { background: #db3535; } .color-row .colour-palette09 { background: #e67272; } .color-row .colour-palette10 { background: #f1aeae; } .breadcrumb { background: transparent; padding: 0; font-size: .75em; margin-top: 1em; } .breadcrumb .breadcrumb-item + .breadcrumb-item { margin-top: 2px; } .breadcrumb .black a { color: black; } .styleguide { font-family: 'Josefin Sans', sans-serif; } .styleguide h2 { padding: 0; margin: 0; } .styleguide img { width: 100%; } .case-studies-page { position: relative; } .case-studies-page a { text-decoration: underline; } .case-studies-page a:hover { color: black; text-decoration: none; } .case-studies-page .graphic img { width: 100%; } .case-studies-page h3 { font-family: 'Josefin Sans', sans-serif; } .case-studies-page strong { font-family: 'Josefin Sans', sans-serif; } .case-studies-page .topTitle { font-family: 'Josefin Sans', sans-serif; color: #009ac3; font-size: 28px; font-weight: 300; letter-spacing: 0px; } .case-studies-page ol { font-size: calc(.75em + (17 - 14) * ((100vw - 300px) / (1600 - 300))); margin: 0 0 0 1.5em; padding: 0; font-family: "CallunaRegular", sans-serif; } .case-studies-page ol li { margin-bottom: .25em; } .case-studies-page ol li a { text-decoration: none; color: #252B33; border-bottom: 1px dotted #252B33; } .case-studies-page ol li a:hover { border-bottom: none; } .case-studies-page .goal span { color: #46beee; border: 1px solid #46beee; border-radius: 50%; padding: .5em .8em; font-size: 1.25em; } @media (max-width: 767px) { .case-studies-page .goal h2 { margin-left: 17.5%; margin-bottom: 2em; } } .case-studies-page .goal p { margin-bottom: 2em; } .case-studies-page .goal img { height: 40px; } .case-studies-page .floating-text { position: absolute; left: 60px; top: 60px; } .case-studies-page .floating-text h2 { color: #305b9f; } .focus-area { position: relative; padding-top: 0; overflow: hidden; } .focus-area .row .col-10 { padding-left: 0; } .focus-area .image { background: url(../images/portfolio/ag-space-gatheing.jpg); height: 1000px; position: absolute; left: 0; background-repeat: no-repeat; width: 48%; background-size: 170%; } @media (max-width: 767px) { .focus-area .image { position: inherit; height: 200px; width: 100%; } } .focus-area .image img { width: 100%; } .focus-area .number { width: 55%; margin-right: .5em; } @media (max-width: 767px) { .focus-area .number { width: 100%; } } .porfolio img { width: 100%; } @media (max-width: 767px) { .porfolio img { margin-bottom: 2em; } } .grey-strip .colours-col h3 { color: #1a1a1a; margin-bottom: 1.5em; } .grey-strip img { width: 100%; } .white { background: white; } .white-strip { position: relative; padding: 0; position: relative; background: white; } .white-strip .col-sm-4 { padding-left: 0; text-align: right; } .white-strip .col-sm-4 h2 { color: black; } @media (max-width: 767px) { .white-strip .col-sm-4 { padding-left: 15px; text-align: left; } } .white-strip h3 { color: #009ac3; } .grey-strip { position: relative; padding: 10em 0; position: relative; background-color: white; } @media (max-width: 767px) { .grey-strip { padding: 2em 0; } } .grey-strip .col-sm-4 { padding-left: 0; text-align: right; } .grey-strip .col-sm-4 h2 { color: black; } @media (max-width: 767px) { .grey-strip .col-sm-4 { padding-left: 15px; text-align: left; } } .grey-strip h3 { color: #009ac3; } .screenshot { position: relative; } .screenshot:after { background: grey; position: absolute; border-radius: 50%; top: 0; content: ""; width: 100%; height: 400px; z-index: 1; } .screenshot img { z-index: 2; } #email-sig img { width: 100%; } /* ================= Media Query Mixins ================= */ /* ================= H1 style ================= */ /* ================= H1 style ================= */ /** Box shadow */ /** Arrow down **/ /** Case studies **/ /** Case study image on mobile */ .container1 { background: white; padding: 8em 3em; position: relative; } @media (max-width: 767px) { .container1 { padding-right: 1.5em; padding-left: 1.5em; } } .container1:before { background: url("../images/arrow-down-dark.svg") no-repeat; position: absolute; content: ""; width: 90px; height: 46px; margin-left: auto; margin-right: auto; left: 0; right: 0; top: 0; z-index: 999; -webkit-filter: drop-shadow(0px 4px 2px rgba(122, 122, 122, 0.1)); filter: drop-shadow(0px 4px 2px rgba(122, 122, 122, 0.1)); } @media (max-width: 767px) { .container1:before { background: url("../images/arrow-down-blue-line.svg") no-repeat; position: absolute; content: ""; width: 90px; height: 46px; margin-left: auto; margin-right: auto; left: 0; right: 0; top: 0; z-index: 999; -webkit-filter: drop-shadow(0px 4px 2px rgba(122, 122, 122, 0.1)); filter: drop-shadow(0px 4px 2px rgba(122, 122, 122, 0.1)); } } .container1 h1 { position: relative; /* This is important */ font-weight: 200; text-align: center; overflow: hidden; /* This is important */ margin-bottom: 4em; text-transform: uppercase; letter-spacing: 3px; width: 100%; margin-left: auto; margin-right: auto; } .container1 h1:before { position: absolute; top: 50%; content: ''; width: 50%; height: 1px; display: inline-block; background: #c2dce2; margin-left: calc(-50% - 14px); } .container1 h1:after { position: absolute; top: 50%; content: ''; width: 50%; height: 1px; display: inline-block; background: #c2dce2; margin-left: 14px; } .container1 h2 { font-size: 18px; font-weight: 300; margin-bottom: .25em; font-family: 'Teko', sans-serif; } .container1 h3 { font-weight: 800; font-size: 20px; margin-bottom: 1em; text-transform: uppercase; } .container-left { background: #f0f2f1; padding: 3rem; height: 100vh; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .container-left h1 { letter-spacing: 6; font-weight: 600; font-size: 24px; } .container-left img { width: 100%; } .container-left-white { height: 100vh; background: white; padding: 3rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .container-left-white h1 { letter-spacing: 6; font-weight: 600; font-size: 24px; } .container-left-white img { width: 100%; } .image-text-container { background: #f0f2f1; position: relative; text-align: center; padding: 8em 0; } .image-text-container h1 { position: relative; font-weight: 100; margin-bottom: 0em; text-transform: uppercase; } .image-text-container h2 { font-size: 1.5em; margin-bottom: 2em; } .image-text-container p { width: 60%; margin-right: auto; margin-left: auto; } @media (max-width: 767px) { .image-text-container p { width: 90%; } } .image-text-container img { width: 100%; } .image-container { position: relative; text-align: center; } .image-container h1 { position: relative; font-weight: 100; margin-bottom: .5em; text-transform: uppercase; letter-spacing: 3px; } .image-container h1:after { background: #000; } .image-container p { width: 60%; margin: auto; } @media (max-width: 767px) { .image-container p { width: 90%; } } .image-container img { width: 100%; } .myProcess { color: white; padding: 8em 3em; position: relative; } @media (max-width: 767px) { .myProcess { padding-right: 1.5em; padding-left: 1.5em; } } .myProcess:before { background: url("../images/arrow-down-white.svg") no-repeat; position: absolute; content: ""; width: 90px; height: 46px; margin-left: auto; margin-right: auto; left: 0; right: 0; top: 0; z-index: 999; -webkit-filter: drop-shadow(0px 4px 2px rgba(122, 122, 122, 0.1)); filter: drop-shadow(0px 4px 2px rgba(122, 122, 122, 0.1)); } .myProcess h1 { text-align: center; font-family: 'Teko', sans-serif; font-weight: 300; font-size: 22px; } .myProcess p { text-align: center; margin-bottom: 1em; } .myProcess h2 { font-family: 'Teko', sans-serif; font-size: 18px; margin-top: 2em; font-weight: 300; } .myProcess article p { text-align: left; margin-bottom: 0; } .container-image-right { background: #ffffff; padding: 0; position: relative; } .container-image-right h1 { font-weight: 100; margin-bottom: 0; font-size: 2.5em; } .container-image-right h2 { font-size: 1em; font-weight: 700; margin-bottom: 1.5em; color: #ffce00; } .container-image-right img { padding-top: 4em; } .plain-text { text-align: center; padding-left: 15%; padding-right: 15%; padding-top: 8em; padding-bottom: 8em; position: relative; } .plain-text h1 { width: auto; font-family: Teko, sans-serif; font-size: 38px; font-weight: 500; text-transform: uppercase; } .plain-text p { font-size: 1.25em; font-weight: 400; } /** preservica **/ #preservica { /** Images **/ } @media (min-width: 768px) { #preservica .banner-case { height: 100vh; background-size: cover; } } #preservica .banner-height .blueBox h2 { font-size: 1em; font-weight: 300; margin-bottom: 20px; text-transform: uppercase; } #preservica .profile .profileImage { background-image: url("../images/zift/banner.jpg"); background-position-x: center; background-position-y: bottom; background-size: cover; } #preservica .profile .profileImage:before { content: ""; background-image: url(../images/preservica/logo.svg); background-size: 100%; background-repeat: no-repeat; display: block; width: 80%; height: 50px; position: absolute; top: 20px; left: 10%; } @media (min-width: 768px) { #preservica .banner-case { background-image: url("../images/preservica/banner-angleimages.png"); } } #preservica .profile .profileImage { background-image: url("../images/zift/banner.jpg"); } #preservica .profile .profileImage:before { background-image: url("../images/preservica/logo.svg"); } #preservica .container-image-right .image-01 { background: url("../images/hero7.jpg") no-repeat white; background-size: cover; } #preservica .blueBox:after { bottom: -92px; } #preservica .case-study-01 { background-image: url("../images/preservica/before-after.jpg"); background-size: 100%; background-repeat: no-repeat; background-position: bottom; background-color: #eff1f7; } @media (max-width: 767px) { #preservica .case-study-01 { width: 100%; height: 300px; } } #preservica .case-study-02 { background-image: url("../images/preservica/graph.jpg"); background-size: 100%; background-position: bottom; background-repeat: no-repeat; } #preservica .case-study-03 { background-image: url("../images/preservica/user-journey.png"); background-size: cover; } @media (max-width: 767px) { #preservica .case-study-03 { width: 100%; height: 300px; } } #preservica .case-study-04 { background-image: url("../images/preservica/persona.jpg"); background-size: cover; } @media (max-width: 767px) { #preservica .case-study-04 { width: 100%; height: 300px; } } #preservica .case-study-05 { background-image: url("../images/preservica/mobile2.jpg"); background-size: cover; } @media (max-width: 767px) { #preservica .case-study-05 { width: 100%; height: 300px; } } #preservica .case-study-06 { background-image: url("../images/preservica/dashboards.jpg"); background-size: cover; } @media (max-width: 767px) { #preservica .case-study-06 { width: 100%; height: 300px; } } #preservica .case-study-07 { background-image: url("../images/preservica/mobile2.jpg"); background-size: cover; } @media (max-width: 767px) { #preservica .case-study-07 { width: 100%; height: 300px; } } #preservica .case-study-08 { background-image: url("../images/013b1cc9ec7841c5b156b38a40ecd0c3.png"); background-size: cover; } @media (max-width: 767px) { #preservica .case-study-08 { width: 100%; height: 300px; } } #preservica .case-study-09 { background-image: url("../images/preservica/dark-light.png"); background-size: cover; background-position: center; } @media (max-width: 767px) { #preservica .case-study-09 { width: 100%; height: 300px; } } #preservica .case-study-10 { background-image: url("../images/preservica/dashboard.png"); background-size: cover; background-position: center; } @media (max-width: 767px) { #preservica .case-study-10 { width: 100%; height: 300px; } } #preservica .ad-01 { background-image: url("../images/preservica/background-shapes.png"); background-size: cover; background-position: center; height: 100vh; line-height: 100vh; position: relative; } #preservica .ad-01 h1 { text-align: center; color: white; font-size: 4em; text-align: center; display: inline-block; vertical-align: middle; line-height: 1.5em; margin: 0 auto; float: none; width: 100%; } /** AgSpace **/ #agSpace { /** Delete **/ /** Images **/ } @media (min-width: 768px) { #agSpace .banner-case { height: 100vh; background-size: cover; } } #agSpace .banner-height .blueBox h2 { font-size: 1em; font-weight: 300; margin-bottom: 20px; text-transform: uppercase; } #agSpace .profile .profileImage { background-image: url("../images/zift/banner.jpg"); background-position-x: center; background-position-y: bottom; background-size: cover; } #agSpace .profile .profileImage:before { content: ""; background-image: url(../images/preservica/logo.svg); background-size: 100%; background-repeat: no-repeat; display: block; width: 80%; height: 50px; position: absolute; top: 20px; left: 10%; } @media (min-width: 768px) { #agSpace .banner-case { background-image: url("../images/preservica/banner-angleimages.png"); } } #agSpace .profile .profileImage { background-image: url("../images/zift/banner.jpg"); } #agSpace .profile .profileImage:before { background-image: url("../images/agspace/logo.svg"); } #agSpace .container-image-right .image-01 { background: url("../images/hero7.jpg") no-repeat white; background-size: cover; } #agSpace .blueBox:after { bottom: -92px; } #agSpace .background-image-purple { background-image: url("../images/agspace/background-shapes.png"); background-size: cover; padding: 8em 3em; color: white; } #agSpace .background-image-purple .st0 { fill: white; } #agSpace .background-image-purple h1 { text-align: right; padding-right: 2em; font-family: 'Teko', sans-serif; font-weight: 300; font-size: 35px; } #agSpace .case-study-01 { background-image: url("../images/preservica/before-after.jpg"); background-size: 100%; background-repeat: no-repeat; background-position: bottom; background-color: #eff1f7; } @media (max-width: 767px) { #agSpace .case-study-01 { width: 100%; height: 300px; } } #agSpace .case-study-02 { background-image: url("../images/preservica/graph.jpg"); background-size: 100%; background-position: bottom; background-repeat: no-repeat; } #agSpace .case-study-03 { background-image: url("../images/preservica/user-journey.png"); background-size: cover; } @media (max-width: 767px) { #agSpace .case-study-03 { width: 100%; height: 300px; } } #agSpace .case-study-04 { background-image: url("../images/preservica/persona.jpg"); background-size: cover; } @media (max-width: 767px) { #agSpace .case-study-04 { width: 100%; height: 300px; } } #agSpace .case-study-05 { background-image: url("../images/preservica/mobile2.jpg"); background-size: cover; } @media (max-width: 767px) { #agSpace .case-study-05 { width: 100%; height: 300px; } } #agSpace .case-study-06 { background-image: url("../images/preservica/dashboards.jpg"); background-size: cover; } @media (max-width: 767px) { #agSpace .case-study-06 { width: 100%; height: 300px; } } #agSpace .case-study-07 { background-image: url("../images/preservica/mobile2.jpg"); background-size: cover; } @media (max-width: 767px) { #agSpace .case-study-07 { width: 100%; height: 300px; } } #agSpace .case-study-08 { background-image: url("../images/013b1cc9ec7841c5b156b38a40ecd0c3.png"); background-size: cover; } @media (max-width: 767px) { #agSpace .case-study-08 { width: 100%; height: 300px; } } #agSpace .case-study-09 { background-image: url("../images/preservica/dark-light.png"); background-size: cover; background-position: center; } @media (max-width: 767px) { #agSpace .case-study-09 { width: 100%; height: 300px; } } #agSpace .case-study-10 { background-image: url("../images/preservica/dashboard.png"); background-size: cover; background-position: center; } @media (max-width: 767px) { #agSpace .case-study-10 { width: 100%; height: 300px; } } #agSpace .ad-01 { background-image: url("../images/preservica/background-shapes.png"); background-size: cover; background-position: center; height: 100vh; line-height: 100vh; position: relative; } #agSpace .ad-01 h1 { text-align: center; color: white; font-size: 4em; text-align: center; display: inline-block; vertical-align: middle; line-height: 1.5em; margin: 0 auto; float: none; width: 100%; } /* ================= Media Query Mixins ================= */ .zift .header { background-image: url("../images/zift/hero.png"); background-size: cover; position: relative; background-position: bottom; background-repeat: no-repeat; min-height: 100vh; display: flex; align-items: center; justify-content: center; } @media (min-width: 2000px) { .zift .header { min-height: 675px; } } .zift .header .printer:before { content: ""; background: url(../images/zift/print-mark.svg) no-repeat; width: 16px; height: 109px; position: absolute; top: 35px; left: -25px; } @media (max-width: 767px) { .zift .header .printer:before { top: 15px; } } .zift nav a { color: white; } .zift a { color: #46beee; } .zift .banner-height .blueBox h2 { font-size: 1em; font-weight: 300; margin-bottom: 20px; text-transform: uppercase; } .zift .profile .profileImage { background-image: url("../images/zift/banner.jpg"); background-position-x: center; background-position-y: bottom; background-size: cover; } .zift .profile .profileImage:before { content: ""; background-image: url(../images/zift/logo.svg); background-size: 100%; background-repeat: no-repeat; display: block; width: 80%; height: 50px; position: absolute; top: 20px; left: 10%; } .zift .case-studies-page.tertiary-color-background ul { margin: 0; padding: 0; } @media (min-width: 768px) { #preservica .banner-case { background-image: url("../images/preservica/banner-angleimages.png"); height: 100vh; background-size: cover; } } #preservica .banner-height .blueBox h2 { font-size: 1em; font-weight: 300; margin-bottom: 20px; text-transform: uppercase; } #preservica .profile .profileImage { background-image: url("../images/zift/banner.jpg"); background-position-x: center; background-position-y: bottom; background-size: cover; } #preservica .profile .profileImage:before { content: ""; background-image: url(../images/preservica/logo.svg); background-size: 100%; background-repeat: no-repeat; display: block; width: 80%; height: 50px; position: absolute; top: 20px; left: 10%; } .agspace .focus-area h2 { margin-bottom: 1em; } @media (max-width: 767px) { .agspace .focus-area h2 { margin-top: 2em; } } .agspace .header { background-image: url("../images/agspace/hero.png"); background-size: cover; position: relative; background-position: bottom; background-repeat: no-repeat; min-height: 100vh; display: flex; align-items: center; justify-content: center; } @media (min-width: 2000px) { .agspace .header { min-height: 675px; } } .agspace .header .printer:before { content: ""; background: url(../images/agspace/print-mark.svg) no-repeat; width: 16px; height: 109px; position: absolute; top: 35px; left: -25px; } @media (max-width: 767px) { .agspace .header .printer:before { top: 15px; } } .agspace nav a { color: white; } .agspace a, .agspace .case-studies-page h2 { color: #72ab3b; } .agspace .banner-height .blueBox h2 { font-size: 1em; font-weight: 300; margin-bottom: 20px; text-transform: uppercase; } .agspace .profile .profileImage { background-image: url("../images/zift/banner.jpg"); background-position-x: center; background-position-y: bottom; background-size: cover; } .agspace .profile .profileImage:before { content: ""; background-image: url(../images/zift/logo.svg); background-size: 100%; background-repeat: no-repeat; display: block; width: 80%; height: 50px; position: absolute; top: 20px; left: 10%; } .agspace .case-studies-page.tertiary-color-background ul { margin: 0; padding: 0; } @media (min-width: 768px) { #preservica .banner-case { background-image: url("../images/preservica/banner-angleimages.png"); height: 100vh; background-size: cover; } } #preservica .banner-height .blueBox h2 { font-size: 1em; font-weight: 300; margin-bottom: 20px; text-transform: uppercase; } #preservica .profile .profileImage { background-image: url("../images/zift/banner.jpg"); background-position-x: center; background-position-y: bottom; background-size: cover; } #preservica .profile .profileImage:before { content: ""; background-image: url(../images/preservica/logo.svg); background-size: 100%; background-repeat: no-repeat; display: block; width: 80%; height: 50px; position: absolute; top: 20px; left: 10%; } /* ================= Media Query Mixins ================= */ /* ================= H1 style ================= */ /* ================= H1 style ================= */ /** Box shadow */ /** Arrow down **/ /** Case studies **/ /** Case study image on mobile */ .case-studies { color: #ffffff; padding: 0 0 30px 0; position: relative; width: 80%; margin-left: 10%; /** UI Ad */ } @media (max-width: 767px) { .case-studies { width: 90%; margin-left: 5%; } } .case-studies h1 { position: relative; /* This is important */ font-weight: 200; text-align: center; overflow: hidden; /* This is important */ margin-bottom: 4em; text-transform: uppercase; letter-spacing: 3px; width: 100%; margin-left: auto; margin-right: auto; margin-bottom: 4em; width: 95%; } .case-studies h1:before { position: absolute; top: 50%; content: ''; width: 50%; height: 1px; display: inline-block; background: #c2dce2; margin-left: calc(-50% - 14px); } .case-studies h1:after { position: absolute; top: 50%; content: ''; width: 50%; height: 1px; display: inline-block; background: #c2dce2; margin-left: 14px; } .case-studies h1:before, .case-studies h1:after { background: #34383b; } .case-studies .arrow-case-studies { margin-bottom: 30px; } .case-studies .ad { padding: 3.5em 2em 3.5em 2em; position: relative; } @media (max-width: 767px) { .case-studies .ad { padding: 20px; } } .case-studies .ad h2 { font-weight: 100; font-size: 16px; margin-bottom: 0; font-family: 'Teko', sans-serif; color: #ffce00; letter-spacing: 2px; } .case-studies .ad h3 { width: 100%; font-family: 'Josefin Sans', sans-serif; margin-bottom: 9px; font-size: 30px; line-height: 34px; font-weight: 800; } @media (max-width: 767px) { .case-studies .ad h3 { width: 100%; font-size: 22px; line-height: 28px; } } .case-studies .ad h4 { color: #ffce00; margin-bottom: 2em; font-family: 'Teko', sans-serif; font-size: 16px; letter-spacing: 2px; font-weight: 100; } .case-studies .ad p { width: 100%; line-height: 26px; } @media (max-width: 767px) { .case-studies .ad p { width: 100%; } } .case-studies .ad .action { margin: 2em 0 0 0; } .case-studies .ad .toolset { margin: 40px 0; } @media (min-width: 768px) { .case-studies .ad .toolset { bottom: 2em; margin-top: 81px; } } .case-studies .ad .toolset h4 { font-size: .75em; font-weight: 500; color: white; text-transform: uppercase; margin-bottom: 1em; } .case-studies .ad .toolset img { margin-left: .25em; height: 25px; -webkit-box-shadow: 9px 7px 5px -4px rgba(0, 0, 0, 0.7); -moz-box-shadow: 9px 7px 5px -4px rgba(0, 0, 0, 0.7); box-shadow: 9px 7px 5px -4px rgba(0, 0, 0, 0.7); -webkit-box-shadow: 9px 7px 5px -4px rgba(0, 0, 0, 0.44); -moz-box-shadow: 9px 7px 5px -4px rgba(0, 0, 0, 0.44); box-shadow: 9px 7px 5px -4px rgba(0, 0, 0, 0.44); } .case-studies .ad-logo { margin-bottom: 4em; } @media (max-width: 767px) { .case-studies .ad-logo { margin-bottom: 3em; } } @media (max-width: 767px) { .case-studies .ad-logo img { width: 190px; } } .case-studies .preservica-ad { background-image: url("../images/zift/ad.jpg"); background-size: cover; } .case-studies .preservica-ad .btn-1 svg { height: 62px; left: 0; position: absolute; top: 0; width: 100%; } .case-studies .preservica-ad .btn-1 rect { fill: none; stroke: #009bc3; stroke-width: 3; stroke-dasharray: 422, 0; transition: all 0.35s linear; } .case-studies .preservica-ad .btn-1:hover { color: white; text-decoration: none; } .case-studies .preservica-ad .btn-1:hover rect { stroke-width: 3; stroke-dasharray: 52, 240; stroke-dashoffset: 20; transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1); } .case-studies .preservica-ad h4 { color: #009bc3; } .case-studies .preservica-ad .ad-logo img { width: 150px; } .case-studies .preservica-ad .ad-logo:before { content: ""; background: #af5aa5; width: 20px; height: 20px; position: absolute; top: 0; right: 0; } .case-studies .preservica-ad .ad-logo:after { content: ""; background: #784191; width: 20px; height: 20px; position: absolute; top: 20px; right: 0; } .case-studies .preservica-ad:after { content: ""; background: #69c3af; width: 20px; height: 20px; position: absolute; top: 40px; right: 0; } .case-studies .preservica-ad:before { content: ""; background: #41b9c3; width: 20px; height: 20px; position: absolute; top: 60px; right: 0; } .case-studies .agspace-ad { background-image: url("../images/zift/ad.jpg"); background-size: cover; } .case-studies .agspace-ad .btn-1 svg { height: 62px; left: 0; position: absolute; top: 0; width: 100%; } .case-studies .agspace-ad .btn-1 rect { fill: none; stroke: #72ab3c; stroke-width: 3; stroke-dasharray: 422, 0; transition: all 0.35s linear; } .case-studies .agspace-ad .btn-1:hover { color: white; text-decoration: none; } .case-studies .agspace-ad .btn-1:hover rect { stroke-width: 3; stroke-dasharray: 52, 240; stroke-dashoffset: 20; transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1); } .case-studies .agspace-ad h4 { color: #72ab3c; } .case-studies .agspace-ad .ad-logo img { width: 150px; } .case-studies .agspace-ad .ad-logo:before { content: ""; background: #009bc3; width: 20px; height: 20px; position: absolute; top: 0; right: 0; } .case-studies .agspace-ad .ad-logo:after { content: ""; background: #195faa; width: 20px; height: 20px; position: absolute; top: 20px; right: 0; } .case-studies .agspace-ad:after { content: ""; background: #69c3af; width: 20px; height: 20px; position: absolute; top: 40px; right: 0; } .case-studies .agspace-ad:before { content: ""; background: #41b9c3; width: 20px; height: 20px; position: absolute; top: 60px; right: 0; } .case-studies .zift-ad { background-image: url("../images/zift/ad.jpg"); background-size: cover; } .case-studies .zift-ad .btn-1 svg { height: 62px; left: 0; position: absolute; top: 0; width: 100%; } .case-studies .zift-ad .btn-1 rect { fill: none; stroke: #4fc0f0; stroke-width: 3; stroke-dasharray: 422, 0; transition: all 0.35s linear; } .case-studies .zift-ad .btn-1:hover { color: white; text-decoration: none; } .case-studies .zift-ad .btn-1:hover rect { stroke-width: 3; stroke-dasharray: 52, 240; stroke-dashoffset: 20; transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1); } .case-studies .zift-ad h4 { color: #4fc0f0; } .case-studies .zift-ad .ad-logo img { width: 150px; } .case-studies .canon-ad { background-image: url("../images/ui/canon/ad.jpg"); background-size: cover; } .case-studies .canon-ad img { height: 72px; width: 140px; } .case-studies .canon-ad h3 { width: 100%; } .case-studies .samsung-ad { background-image: url("../images/portfolio/angloinfo/banner.png"); background-size: cover; } .case-studies .samsung-ad h3 { width: 100%; } .case-studies .cisco-ad { background-image: url("../images/ui/cisco/ad.jpg"); background-size: cover; } .case-studies .cisco-ad img { height: 72px; width: 110px; } .case-studies .cisco-ad h3 { width: 100%; } .case-studies .sap-ad { background-image: url("../images/ui/sap/ad.jpg"); background-size: cover; margin-bottom: 300px; } @media (max-width: 767px) { .case-studies .sap-ad { margin-bottom: 50px; } } .case-studies .sap-ad img { height: 73px; width: 110px; } .case-studies .sap-ad h3 { width: 100%; } .case-studies .vodafone-ad { background-image: url("../images/ui/vodafone/ad.jpg"); background-size: cover; margin-bottom: 300px; } @media (max-width: 767px) { .case-studies .vodafone-ad { margin-bottom: 50px; } } .case-studies .vodafone-ad img { height: 73px; width: 110px; } .case-studies .vodafone-ad h3 { width: 100%; } .case-studies .trend-ad { background-image: url("../images/ui/trend-micro/header-bg.jpg"); background-size: cover; } .case-studies .trend-ad img { height: 73px; width: 110px; } .case-studies .trend-ad h3 { width: 100%; } .case-studies .anglo-info-ad { background-image: url("../images/portfolio/angloinfo/banner.png"); background-size: cover; } .case-studies .anglo-info-ad img { height: 72px; width: 190px; } .case-studies .anglo-info-ad h3 { width: 100%; } /* ================= Media Query Mixins ================= */ /* ================= H1 style ================= */ /* ================= H1 style ================= */ /** Box shadow */ /** Arrow down **/ /** Case studies **/ /** Case study image on mobile */ .afterWork { background-image: url("../images/footer.jpg"); background-size: cover; background-position: top center; text-align: center; color: white; height: 100vh; min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; } @media (max-width: 767px) { .afterWork a { width: 80%; margin-left: 10%; } } .afterWork .btn-1 svg { height: 62px; left: 0; position: absolute; top: 0; width: 100%; } .afterWork .btn-1 rect { fill: none; stroke: #af5aa5; stroke-width: 3; stroke-dasharray: 422, 0; transition: all 0.35s linear; } .afterWork .btn-1:hover { color: white; text-decoration: none; } .afterWork .btn-1:hover rect { stroke-width: 3; stroke-dasharray: 52, 240; stroke-dashoffset: 20; transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1); } .afterWork h1 { font-size: 40px; color: #af5aa5; font-weight: 800; } .afterWork p { width: 40%; text-align: center; margin: 10px auto 0 auto; line-height: 20px; } @media (max-width: 767px) { .afterWork p { width: 90%; } } .afterWork a { color: white; margin-top: 2em; margin-bottom: 1em; } .afterWork span { color: #af5aa5; } /* ================= Media Query Mixins ================= */ /* ================= H1 style ================= */ /* ================= H1 style ================= */ /** Box shadow */ /** Arrow down **/ /** Case studies **/ /** Case study image on mobile */ .small-title { font-size: 1em; letter-spacing: 3px; } .container-portfolio { padding-left: 10%; padding-right: 10%; width: 100%; } .margin-top { margin-top: 1em; } .font-teko-header { color: #009ac3; font-size: 1em; font-family: "Teko", "Arial" !important; letter-spacing: 1px; text-transform: uppercase; font-weight: 500 !important; margin-bottom: 0; } .margin-top-portfolio { margin-top: 3em; } @media (max-width: 767px) { .margin-top-portfolio { margin-top: 0; } } @media (max-width: 767px) { .hide-mobile { display: none; } } @media (min-width: 768px) { .hide-large { display: none; } } .margin-bottom-portfolio { margin-bottom: 2em; } @media (max-width: 767px) { .margin-bottom-portfolio { margin-top: 0; } } .box-shadow a { text-decoration: none; color: #252B33; border-bottom: 1px dotted #252B33; font-size: 1em; margin-bottom: 5px; font-family: 'Josefin Sans', sans-serif; } .box-shadow a:hover { color: #46beee; border-bottom: 1px solid #46beee; } @media (max-width: 767px) { .box-shadow { margin-bottom: 2em; margin-top: 1.25em; } } .text-justified { text-align: justify; } strong { color: #252B33; } .case-padding { position: relative; padding-top: 10em; padding-bottom: 10em; } @media (max-width: 767px) { .case-padding { padding-top: 2em; padding-bottom: 2em; } } .case-padding .col-2 { text-align: right; } .case-padding-top { padding-top: 10em; } @media (max-width: 767px) { .case-padding-top { padding-top: 1em; } } .case-heading-top { padding-top: 10em; } @media (max-width: 767px) { .case-heading-top { padding-top: 3em; } .case-heading-top h1 { position: relative; color: black; margin-bottom: 0; font-weight: 200; font-size: 2rem; } } .case-padding-bottom { padding-bottom: 10em; } @media (max-width: 767px) { .case-padding-bottom { padding-bottom: 2em; } } .margin-top-2 { margin-top: 2em; } .margin-bottom-1 { margin-bottom: 1em; } .margin-bottom-3 { margin-bottom: 3em; } .margin-bottom-5 { margin-bottom: 5em; } @media (max-width: 767px) { .case-padding-bottom-2 { padding-bottom: 2em; } } .case-padding-top-5 { padding-top: 5em; } @media (max-width: 767px) { .case-padding-top-5 { padding-top: 2em; } } .case-padding-top-0 { padding-top: 0em; } .case-padding-bottom-5 { padding-bottom: 5em; } @media (max-width: 767px) { .case-padding-bottom-5 { padding-bottom: 0em; } } .case-padding-bottom-2 { padding-bottom: 2em !important; } .case-padding-bottom-1 { padding-bottom: 1em !important; } .case-padding-right { padding-right: 15%; padding-left: 70px; } .case-margin-bottom-30 { margin-bottom: 30px; } @media (max-width: 767px) { .display-non-mobile { display: none !important; } } .user-research { padding: 0; margin: 0; position: absolute; text-align: center; top: 1.75em; left: 50px; } .show { display: block !important; } .background-color-eef1f8 { background: #eef1f8; } .width-100 { width: 100%; } @media (min-width: 992px) { .vertical-aligned { display: flex; align-items: center; justify-content: center; } } .professional .image-prof { background-image: url("../images/preservica/professional/banner-angleimages.png") !important; background-size: cover; position: relative; background-position: bottom; background-repeat: no-repeat; min-height: 100vh; display: flex; align-items: center; justify-content: center; } @media (min-width: 2000px) { .professional .image-prof { min-height: 675px; } } .professional .research { position: relative; } .professional .research h1 { position: absolute; z-index: 9999; padding-left: 20%; padding-top: 35px; } @media (max-width: 767px) { .professional .research h1 { padding: 15px 0 0 15px; font-size: 16px; } } .preservica .phase2container { background-color: white; } .preservica .phase2container h1 { font-weight: 400; position: relative; color: #009ac3; padding: 23px 0; font-family: 'Josefin Sans', sans-serif; } @media (max-width: 767px) { .preservica .phase2container h1 { padding: 1em 0 1em 15px; margin-bottom: 0; font-size: 30px; } } .preservica .phase2container span { padding: 1em 0 .5em 25px; color: #212529; margin-right: 18px; border-bottom: 1px solid #212529; font-weight: 100; } @media (max-width: 767px) { .preservica .phase2container span { border-bottom: none; padding: 0; font-size: 20px; display: block; font-family: "Teko", "Arial" !important; color: black; } } .preservica .image-shadow { border: 6px solid #fff; -webkit-box-shadow: 0px 10px 49px -30px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 10px 49px -30px rgba(0, 0, 0, 0.75); box-shadow: 0px 10px 49px -30px rgba(0, 0, 0, 0.75); } .preservica .focus-area .image { background: url("../images/preservica/mobile2.jpg"); background-size: cover; background-repeat: no-repeat; } .preservica .image-height { height: 60px; width: auto !important; } .preservica .numbers img { width: 70% !important; } .preservica .marketing-image img { width: 100%; } .preservica video { width: 100%; } .preservica .btn-1 { color: black; } .preservica .btn-1 svg { height: 62px; left: 0; position: absolute; top: 0; width: 100%; } .preservica .btn-1 rect { fill: none; stroke: #009ac3; stroke-width: 3; stroke-dasharray: 422, 0; transition: all 0.35s linear; } .preservica .btn-1:hover { color: black; text-decoration: none; } .preservica .btn-1:hover rect { stroke-width: 3; stroke-dasharray: 52, 240; stroke-dashoffset: 20; transition: all 1.35s cubic-bezier(0.19, 1, 0.22, 1); } .preservica .header { background-image: url("../images/preservica/banner-angleimages.png"); background-size: cover; position: relative; background-position: bottom; background-repeat: no-repeat; min-height: 100vh; display: flex; align-items: center; justify-content: center; } @media (min-width: 2000px) { .preservica .header { min-height: 675px; } } .preservica .header .printer:before { content: ""; background: url(../images/preservica/print-mark.svg) no-repeat; width: 16px; height: 109px; position: absolute; top: 35px; left: -25px; } @media (max-width: 767px) { .preservica .header .printer:before { top: 15px; } } .preservica .color-p { background: #004b64; color: white; padding: 8em 0; } @media (max-width: 767px) { .preservica .color-p { padding: 2em 0; } } .preservica .color-p img { width: 100%; } .preservica .color-p h2 { color: white; } .preservica nav a { color: white; } .preservica a { color: #009ac3; } .preservica .banner-height .blueBox h2 { font-size: 1em; font-weight: 300; margin-bottom: 20px; text-transform: uppercase; } .preservica .profile .profileImage { background-image: url("../images/zift/banner.jpg"); background-position-x: center; background-position-y: bottom; background-size: cover; } .preservica .profile .profileImage:before { content: ""; background-image: url(../images/zift/logo.svg); background-size: 100%; background-repeat: no-repeat; display: block; width: 80%; height: 50px; position: absolute; top: 20px; left: 10%; } @media (min-width: 768px) { #preservica .banner-case { background-image: url("../images/preservica/banner-angleimages.png"); height: 100vh; background-size: cover; } } #preservica .banner-height .blueBox h2 { font-size: 1em; font-weight: 300; margin-bottom: 20px; text-transform: uppercase; } #preservica .profile .profileImage { background-image: url("../images/zift/banner.jpg"); background-position-x: center; background-position-y: bottom; background-size: cover; } #preservica .profile .profileImage:before { content: ""; background-image: url(../images/preservica/logo.svg); background-size: 100%; background-repeat: no-repeat; display: block; width: 80%; height: 50px; position: absolute; top: 20px; left: 10%; } /* ================= Media Query Mixins ================= */ /* ================= H1 style ================= */ /* ================= H1 style ================= */ /** Box shadow */ /** Arrow down **/ /** Case studies **/ /** Case study image on mobile */ .second-nav { width: 100%; clear: both; border-bottom: 1px solid rgba(0, 0, 0, 0.1); text-align: right; background-color: white; } @media (max-width: 767px) { .second-nav { width: 100%; padding-left: 5%; text-align: center; } } .second-nav ul { padding: 0; margin: 0; font-family: 'Teko', sans-serif; font-size: 18px; letter-spacing: 2px; font-weight: 300; } .second-nav ul li { display: inline-block; margin-right: 1.5em; } @media (max-width: 767px) { .second-nav ul li { margin-right: 1.4em; } } .second-nav ul li.title { color: #212529; } .second-nav ul li.title:hover:after { display: none; } .second-nav ul li a { display: block; padding: 1em 0; color: #009ac3; position: relative; } .second-nav ul li a:hover { text-decoration: none; } .second-nav ul li:after { display: block; bottom: 0; content: ''; border-bottom: solid 3px #000; transform: scaleX(0); transition: transform 250ms ease-in-out; z-index: 9999; } .second-nav ul li:hover:after { transform: scaleX(1); } .second-nav ul li.active a { border-bottom: 3px solid black; color: black; } .second-nav ul li.active:after { display: none; } /* ================= Media Query Mixins ================= */ /* ================= H1 style ================= */ /* ================= H1 style ================= */ /** Box shadow */ /** Arrow down **/ /** Case studies **/ /** Case study image on mobile */ .cv .case-study-next { color: white; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#181a1b+0,000000+37,000000+100 */ background: #181a1b; /* Old browsers */ background: -moz-linear-gradient(top, #27282c 0%, #000000 37%, #000000 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #27282c 0%, #000000 37%, #000000 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #27282c 0%, #000000 37%, #000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#27282c', endColorstr='#000000',GradientType=0 ); /* IE6-9 */ padding-bottom: 10em; padding-top: 10em; } .cv .case-study-next .case-heading h1 { color: white; } .cv .case-study-next .case-heading h2 { color: rgba(255, 255, 255, 0.04); } .cv .h2-cv-heading { font-weight: 100; font-size: 18px; margin-bottom: 0; font-family: 'Teko', sans-serif; color: #ffce00; text-transform: uppercase; letter-spacing: 2px; color: #009ac3; } .cv .h2-cv-heading span { color: black; } @media (min-width: 992px) { .cv .aboutme > div, .cv .values > div { max-width: 60%; } } .cv .aboutme { background-color: #f0efed; padding-top: 5em; padding-bottom: 5em; } @media (max-width: 767px) { .cv .aboutme { padding-top: 2em; padding-bottom: 2em; } } @media (max-width: 767px) { .cv .aboutme h1 { margin-top: .25em; } } .cv .aboutme img { width: 100%; box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; margin-bottom: 0em; } @media (max-width: 767px) { .cv .aboutme img { margin-bottom: 0em; } } .cv .aboutme p { margin-bottom: 1.5em; } .cv p { margin-bottom: 0; } .cv .left-border { border-left: 3px solid #e9e8e8; padding-left: 10px; margin-bottom: 2em; } .cv .cv-container { font-family: 'Josefin Sans', sans-serif; } .cv .cv-container img { border-radius: 3px; } .cv .cv-container h1 { color: black; margin-bottom: 1em; font-weight: 200; font-size: 2rem; } .cv .cv-container h2 { color: #009ac3; font-size: 1rem; font-weight: 400; margin-bottom: 0; } .cv i { color: #212529; font-size: .9rem; font-weight: 400; } .cv .white h3 { margin-bottom: 0 !important; padding-bottom: 0 !important; } @media (min-width: 992px) { .cv .header { background: url("../images/me.png") no-repeat; background-size: 300px; background-position: top right; } } .cv .header p { margin-bottom: 2rem; } .cv .header h1 { margin-bottom: 10px; } .cv .cv-container h3 { font-weight: bold; font-size: 14px; } .cv .cv-container ul, .cv .cv-container h3, .cv .cv-container p { color: #212529; font-weight: 300; } .cv .cv-container ul strong, .cv .cv-container h3 strong, .cv .cv-container p strong { font-weight: 400; } .cv .cv-container ul, .cv .cv-container h3 { padding: 0; list-style-type: none; } .cv h2.aboutMeh2 { font-family: 'Josefin Sans', sans-serif; color: #009ac3; font-size: 28px; font-weight: 300; letter-spacing: 0px; margin-top: 1em; text-transform: none; margin-bottom: .5rem; } .cv .case-heading h1 { color: #000; } .cv .case-heading h2 { font-family: 'Josefin Sans', sans-serif; font-weight: 900; font-size: 92px; padding: 0; margin: 0; color: rgba(0, 0, 0, 0.04); } .cv .case-heading h2 strong { font-weight: 600; } @media (max-width: 767px) { .cv .case-heading h2 { display: none; } } .cv .cv-left-col { background: #eef1f4; color: white; padding: 5em 40px 6em 40px; } @media (max-width: 767px) { .cv .cv-left-col { padding: 3em 15px 2em 15px; } } .cv .cv-mid-col { padding: 5em 40px 6em 40px; } @media (max-width: 767px) { .cv .cv-mid-col { padding: 2em 15px; } } .cv .cv-mid-col ul { list-style: disc; margin-left: 35px; } @media (max-width: 767px) { .cv .cv-mid-col ul { margin-left: 15px; } } .cv .cv-right-col { background: #eef1f4; color: white; padding: 5em 40px 6em 40px; } @media (max-width: 767px) { .cv .cv-right-col { padding: 2em 15px; } } .cv .values { background: #fff; padding: 5em 0; } @media (max-width: 767px) { .cv .values { padding-top: 2em; padding-bottom: 2em; } } .cv .values h2, .cv .values h3, .cv .values p, .cv .values a, .cv .values ul { color: #212529; } .cv .values h2 { font-size: 2rem; font-weight: 300; margin-top: 0; margin-bottom: .5em; } .cv .values h3 { font-size: 1.25rem; font-weight: 500; margin-bottom: 0.5em; color: #009ac3; } .cv .values p { margin-bottom: 0em; } @media (max-width: 767px) { .cv .values p { margin-bottom: 2em; } } .cv .values img { width: 100%; box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; } .cv .values ul { list-style: disc; margin-left: 25px; } @media (max-width: 767px) { .cv .values ul { margin-left: 15px; margin-bottom: 2em; } } .cv .values a { text-decoration: underline; } .cv .values a:hover { color: #009ac3; } /* ================= Media Query Mixins ================= */ /* ================= H1 style ================= */ /* ================= H1 style ================= */ /** Box shadow */ /** Arrow down **/ /** Case studies **/ /** Case study image on mobile */ .container1 { background: white; padding: 8em 3em; position: relative; } @media (max-width: 767px) { .container1 { padding-right: 1.5em; padding-left: 1.5em; } } .container1:before { background: url("../images/arrow-down-dark.svg") no-repeat; position: absolute; content: ""; width: 90px; height: 46px; margin-left: auto; margin-right: auto; left: 0; right: 0; top: 0; z-index: 999; -webkit-filter: drop-shadow(0px 4px 2px rgba(122, 122, 122, 0.1)); filter: drop-shadow(0px 4px 2px rgba(122, 122, 122, 0.1)); } @media (max-width: 767px) { .container1:before { background: url("../images/arrow-down-blue-line.svg") no-repeat; position: absolute; content: ""; width: 90px; height: 46px; margin-left: auto; margin-right: auto; left: 0; right: 0; top: 0; z-index: 999; -webkit-filter: drop-shadow(0px 4px 2px rgba(122, 122, 122, 0.1)); filter: drop-shadow(0px 4px 2px rgba(122, 122, 122, 0.1)); } } .container1 h1 { position: relative; /* This is important */ font-weight: 200; text-align: center; overflow: hidden; /* This is important */ margin-bottom: 4em; text-transform: uppercase; letter-spacing: 3px; width: 100%; margin-left: auto; margin-right: auto; } .container1 h1:before { position: absolute; top: 50%; content: ''; width: 50%; height: 1px; display: inline-block; background: #c2dce2; margin-left: calc(-50% - 14px); } .container1 h1:after { position: absolute; top: 50%; content: ''; width: 50%; height: 1px; display: inline-block; background: #c2dce2; margin-left: 14px; } .container1 h2 { font-size: 18px; font-weight: 300; margin-bottom: .25em; font-family: 'Teko', sans-serif; } .container1 h3 { font-weight: 800; font-size: 20px; margin-bottom: 1em; text-transform: uppercase; } .container-left { background: #f0f2f1; padding: 3rem; height: 100vh; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .container-left h1 { letter-spacing: 6; font-weight: 600; font-size: 24px; } .container-left img { width: 100%; } .container-left-white { height: 100vh; background: white; padding: 3rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .container-left-white h1 { letter-spacing: 6; font-weight: 600; font-size: 24px; } .container-left-white img { width: 100%; } .image-text-container { background: #f0f2f1; position: relative; text-align: center; padding: 8em 0; } .image-text-container h1 { position: relative; font-weight: 100; margin-bottom: 0em; text-transform: uppercase; } .image-text-container h2 { font-size: 1.5em; margin-bottom: 2em; } .image-text-container p { width: 60%; margin-right: auto; margin-left: auto; } @media (max-width: 767px) { .image-text-container p { width: 90%; } } .image-text-container img { width: 100%; } .image-container { position: relative; text-align: center; } .image-container h1 { position: relative; font-weight: 100; margin-bottom: .5em; text-transform: uppercase; letter-spacing: 3px; } .image-container h1:after { background: #000; } .image-container p { width: 60%; margin: auto; } @media (max-width: 767px) { .image-container p { width: 90%; } } .image-container img { width: 100%; } .myProcess { color: white; padding: 8em 3em; position: relative; } @media (max-width: 767px) { .myProcess { padding-right: 1.5em; padding-left: 1.5em; } } .myProcess:before { background: url("../images/arrow-down-white.svg") no-repeat; position: absolute; content: ""; width: 90px; height: 46px; margin-left: auto; margin-right: auto; left: 0; right: 0; top: 0; z-index: 999; -webkit-filter: drop-shadow(0px 4px 2px rgba(122, 122, 122, 0.1)); filter: drop-shadow(0px 4px 2px rgba(122, 122, 122, 0.1)); } .myProcess h1 { text-align: center; font-family: 'Teko', sans-serif; font-weight: 300; font-size: 22px; } .myProcess p { text-align: center; margin-bottom: 1em; } .myProcess h2 { font-family: 'Teko', sans-serif; font-size: 18px; margin-top: 2em; font-weight: 300; } .myProcess article p { text-align: left; margin-bottom: 0; } .container-image-right { background: #ffffff; padding: 0; position: relative; } .container-image-right h1 { font-weight: 100; margin-bottom: 0; font-size: 2.5em; } .container-image-right h2 { font-size: 1em; font-weight: 700; margin-bottom: 1.5em; color: #ffce00; } .container-image-right img { padding-top: 4em; } .plain-text { text-align: center; padding-left: 15%; padding-right: 15%; padding-top: 8em; padding-bottom: 8em; position: relative; } .plain-text h1 { width: auto; font-family: Teko, sans-serif; font-size: 38px; font-weight: 500; text-transform: uppercase; } .plain-text p { font-size: 1.25em; font-weight: 400; } /** preservica **/ #preservica { /** Images **/ } @media (min-width: 768px) { #preservica .banner-case { height: 100vh; background-size: cover; } } #preservica .banner-height .blueBox h2 { font-size: 1em; font-weight: 300; margin-bottom: 20px; text-transform: uppercase; } #preservica .profile .profileImage { background-image: url("../images/zift/banner.jpg"); background-position-x: center; background-position-y: bottom; background-size: cover; } #preservica .profile .profileImage:before { content: ""; background-image: url(../images/preservica/logo.svg); background-size: 100%; background-repeat: no-repeat; display: block; width: 80%; height: 50px; position: absolute; top: 20px; left: 10%; } @media (min-width: 768px) { #preservica .banner-case { background-image: url("../images/preservica/banner-angleimages.png"); } } #preservica .profile .profileImage { background-image: url("../images/zift/banner.jpg"); } #preservica .profile .profileImage:before { background-image: url("../images/preservica/logo.svg"); } #preservica .container-image-right .image-01 { background: url("../images/hero7.jpg") no-repeat white; background-size: cover; } #preservica .blueBox:after { bottom: -92px; } #preservica .case-study-01 { background-image: url("../images/preservica/before-after.jpg"); background-size: 100%; background-repeat: no-repeat; background-position: bottom; background-color: #eff1f7; } @media (max-width: 767px) { #preservica .case-study-01 { width: 100%; height: 300px; } } #preservica .case-study-02 { background-image: url("../images/preservica/graph.jpg"); background-size: 100%; background-position: bottom; background-repeat: no-repeat; } #preservica .case-study-03 { background-image: url("../images/preservica/user-journey.png"); background-size: cover; } @media (max-width: 767px) { #preservica .case-study-03 { width: 100%; height: 300px; } } #preservica .case-study-04 { background-image: url("../images/preservica/persona.jpg"); background-size: cover; } @media (max-width: 767px) { #preservica .case-study-04 { width: 100%; height: 300px; } } #preservica .case-study-05 { background-image: url("../images/preservica/mobile2.jpg"); background-size: cover; } @media (max-width: 767px) { #preservica .case-study-05 { width: 100%; height: 300px; } } #preservica .case-study-06 { background-image: url("../images/preservica/dashboards.jpg"); background-size: cover; } @media (max-width: 767px) { #preservica .case-study-06 { width: 100%; height: 300px; } } #preservica .case-study-07 { background-image: url("../images/preservica/mobile2.jpg"); background-size: cover; } @media (max-width: 767px) { #preservica .case-study-07 { width: 100%; height: 300px; } } #preservica .case-study-08 { background-image: url("../images/013b1cc9ec7841c5b156b38a40ecd0c3.png"); background-size: cover; } @media (max-width: 767px) { #preservica .case-study-08 { width: 100%; height: 300px; } } #preservica .case-study-09 { background-image: url("../images/preservica/dark-light.png"); background-size: cover; background-position: center; } @media (max-width: 767px) { #preservica .case-study-09 { width: 100%; height: 300px; } } #preservica .case-study-10 { background-image: url("../images/preservica/dashboard.png"); background-size: cover; background-position: center; } @media (max-width: 767px) { #preservica .case-study-10 { width: 100%; height: 300px; } } #preservica .ad-01 { background-image: url("../images/preservica/background-shapes.png"); background-size: cover; background-position: center; height: 100vh; line-height: 100vh; position: relative; } #preservica .ad-01 h1 { text-align: center; color: white; font-size: 4em; text-align: center; display: inline-block; vertical-align: middle; line-height: 1.5em; margin: 0 auto; float: none; width: 100%; } /** AgSpace **/ #agSpace { /** Delete **/ /** Images **/ } @media (min-width: 768px) { #agSpace .banner-case { height: 100vh; background-size: cover; } } #agSpace .banner-height .blueBox h2 { font-size: 1em; font-weight: 300; margin-bottom: 20px; text-transform: uppercase; } #agSpace .profile .profileImage { background-image: url("../images/zift/banner.jpg"); background-position-x: center; background-position-y: bottom; background-size: cover; } #agSpace .profile .profileImage:before { content: ""; background-image: url(../images/preservica/logo.svg); background-size: 100%; background-repeat: no-repeat; display: block; width: 80%; height: 50px; position: absolute; top: 20px; left: 10%; } @media (min-width: 768px) { #agSpace .banner-case { background-image: url("../images/preservica/banner-angleimages.png"); } } #agSpace .profile .profileImage { background-image: url("../images/zift/banner.jpg"); } #agSpace .profile .profileImage:before { background-image: url("../images/agspace/logo.svg"); } #agSpace .container-image-right .image-01 { background: url("../images/hero7.jpg") no-repeat white; background-size: cover; } #agSpace .blueBox:after { bottom: -92px; } #agSpace .background-image-purple { background-image: url("../images/agspace/background-shapes.png"); background-size: cover; padding: 8em 3em; color: white; } #agSpace .background-image-purple .st0 { fill: white; } #agSpace .background-image-purple h1 { text-align: right; padding-right: 2em; font-family: 'Teko', sans-serif; font-weight: 300; font-size: 35px; } #agSpace .case-study-01 { background-image: url("../images/preservica/before-after.jpg"); background-size: 100%; background-repeat: no-repeat; background-position: bottom; background-color: #eff1f7; } @media (max-width: 767px) { #agSpace .case-study-01 { width: 100%; height: 300px; } } #agSpace .case-study-02 { background-image: url("../images/preservica/graph.jpg"); background-size: 100%; background-position: bottom; background-repeat: no-repeat; } #agSpace .case-study-03 { background-image: url("../images/preservica/user-journey.png"); background-size: cover; } @media (max-width: 767px) { #agSpace .case-study-03 { width: 100%; height: 300px; } } #agSpace .case-study-04 { background-image: url("../images/preservica/persona.jpg"); background-size: cover; } @media (max-width: 767px) { #agSpace .case-study-04 { width: 100%; height: 300px; } } #agSpace .case-study-05 { background-image: url("../images/preservica/mobile2.jpg"); background-size: cover; } @media (max-width: 767px) { #agSpace .case-study-05 { width: 100%; height: 300px; } } #agSpace .case-study-06 { background-image: url("../images/preservica/dashboards.jpg"); background-size: cover; } @media (max-width: 767px) { #agSpace .case-study-06 { width: 100%; height: 300px; } } #agSpace .case-study-07 { background-image: url("../images/preservica/mobile2.jpg"); background-size: cover; } @media (max-width: 767px) { #agSpace .case-study-07 { width: 100%; height: 300px; } } #agSpace .case-study-08 { background-image: url("../images/013b1cc9ec7841c5b156b38a40ecd0c3.png"); background-size: cover; } @media (max-width: 767px) { #agSpace .case-study-08 { width: 100%; height: 300px; } } #agSpace .case-study-09 { background-image: url("../images/preservica/dark-light.png"); background-size: cover; background-position: center; } @media (max-width: 767px) { #agSpace .case-study-09 { width: 100%; height: 300px; } } #agSpace .case-study-10 { background-image: url("../images/preservica/dashboard.png"); background-size: cover; background-position: center; } @media (max-width: 767px) { #agSpace .case-study-10 { width: 100%; height: 300px; } } #agSpace .ad-01 { background-image: url("../images/preservica/background-shapes.png"); background-size: cover; background-position: center; height: 100vh; line-height: 100vh; position: relative; } #agSpace .ad-01 h1 { text-align: center; color: white; font-size: 4em; text-align: center; display: inline-block; vertical-align: middle; line-height: 1.5em; margin: 0 auto; float: none; width: 100%; } body { font-family: 'Josefin Sans', sans-serif; } ul { list-style: none; } a { color: #000; text-decoration: none; } a:hover { color: #009ac3; } p { font-family: 'Josefin Sans', sans-serif; font-weight: 300; font-size: 1em; margin-bottom: 1rem; } h2 { font-size: 2rem; font-weight: 300; font-family: 'Josefin Sans', sans-serif; } @media (max-width: 767px) { h2 { font-size: 1.75rem; font-weight: 300; } } h3 { font-size: 1.25rem; font-weight: 800; font-family: 'Josefin Sans', sans-serif; margin-bottom: 0.5em; } @media (max-width: 767px) { h3 { font-size: 1.25rem; font-weight: 800; } } html { scroll-behavior: smooth; } .mobile-display-none { display: none; } .padding-left-100 { padding-left: 100px; } @media (max-width: 767px) { .padding-left-100 { padding-left: 0; } } .padding-right-100 { padding-right: 100px; } @media (max-width: 767px) { .padding-right-100 { padding-right: 0; padding-left: 0; } } #button { display: inline-block; background-color: rgba(70, 190, 238, 0.7); width: 50px; height: 50px; text-align: center; border-radius: 50px; position: fixed; bottom: 30px; right: 30px; transition: background-color .3s, opacity .5s, visibility .5s; opacity: 0; visibility: hidden; z-index: 1000; transition: background-color 0.5s ease; box-shadow: 0 3px 8px 0px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 3px 8px 0px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 3px 8px 0px rgba(0, 0, 0, 0.3); } #button::after { content: ""; background: url("../images/icon-left.svg") no-repeat; width: 20px; height: 20px; position: absolute; top: 15px; left: 15px; } #button:hover { cursor: pointer; background-color: #46beee; } #button:active { background-color: #46beee; } #button.show { opacity: 1; visibility: visible; }