/************ * Imports * *************/ @import url("https://fonts.googleapis.com/css?family=Roboto:900"); @import url("https://fonts.googleapis.com/css?family=Open+Sans:300,700"); @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400"); @import url("https://use.fontawesome.com/releases/v5.0.7/css/all.css"); /********** * Reset * ***********/ html, body, p, a, figure { font-family: Source Sans Pro, sans-serif; } h1, h2, h3, h4, h5, h6 { font-family: Source Sans Pro, sans-serif; text-transform: uppercase; font-weight: 100; } h5, h4 { font-weight: 400; } /***************** * Main Wrapper * *****************/ #wrapper { overflow: hidden; } #wrapper .sticky { position: fixed; } #wrapper .sticky.sticky-info { width: 355px; height: 175px; right: 2vw; bottom: 3vw; background: url("../img/noise.png") 0 0 repeat #161627; z-index: 10; } #wrapper .sticky.sticky-info .sticky-content { padding: 3em 3.5em; } #wrapper .sticky.sticky-info .sticky-content .close-x { outline: none; position: absolute; border: 0 none; background: none; cursor: pointer; top: .25em; right: .5em; color: #fff; } #wrapper .sticky.sticky-info .sticky-content p { float: right; } #wrapper .sticky.sticky-info .sticky-content p span { width: 100%; display: inline-block; color: #fff; } #wrapper .sticky.sticky-info .sticky-content p span:first-child { text-transform: uppercase; } #wrapper .sticky.sticky-info .sticky-content p span.text-right { font-size: small; } #wrapper .sticky.sticky-info .sticky-content p span.bbText { color: #01b0f9; font-size: larger; text-transform: uppercase; font-weight: 600; } #wrapper .sticky.sticky-info .sticky-content img { width: 50px; } #wrapper .full-video-wrap { position: fixed; display: none; background-color: rgba(0, 0, 0, 0.85); width: 100%; height: 100%; z-index: 999; } #wrapper .full-video-wrap.show-video { display: block; } #wrapper .full-video-wrap iframe { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #wrapper .fixed { position: fixed; top: 0; left: 0; width: 100%; z-index: 20; } #wrapper .header-mobile { background-color: rgba(238, 238, 238, 0.96); padding: 1.125em 1.375em; } #wrapper .header-mobile .logo-wrapper { padding-left: 0; } #wrapper .header-mobile .logo-wrapper figure { font-family: Roboto, sans-serif; font-weight: 900; text-transform: uppercase; font-size: 2em; margin: 0; line-height: .75; } #wrapper .header-mobile .logo-wrapper figure span:first-child { background: -webkit-gradient(linear, left top, right top, from(#5b449f), to(#13aacf)); background: linear-gradient(to right, #5b449f, #13aacf); background-clip: text; -webkit-background-clip: text; text-fill-color: transparent; -webkit-text-fill-color: transparent; } #wrapper .header-mobile .logo-wrapper figure .logo-small { font-family: Open sans, sans-serif; font-weight: 300; font-size: 1.35rem !important; text-transform: initial; background: -webkit-gradient(linear, left top, right top, from(#1f1e34), to(#1f1e34)); background: linear-gradient(to right, #1f1e34, #1f1e34); background-clip: text; -webkit-background-clip: text; text-fill-color: transparent; -webkit-text-fill-color: transparent; } @media (max-width: 1200px) { #wrapper .header-mobile .logo-wrapper figure .logo-small { font-size: calc(1.07rem + 0.37333vw) !important; } } #wrapper .header-mobile .nav-wrapper button { outline: none; background: transparent; border: 0 none; color: #1f1e34; } #wrapper .mobile-nav { -webkit-transition: top .4s ease-out; transition: top .4s ease-out; position: fixed; left: 0; width: 100%; height: calc(100vh - 60px); background-color: #23213e; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 16; } #wrapper .mobile-nav ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: .65; -ms-flex: .65; flex: .65; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; padding: 0; margin: 0; } #wrapper .mobile-nav ul.nav-lang { -webkit-box-flex: .125; -ms-flex: .125; flex: .125; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; width: 25%; -ms-flex-item-align: center; align-self: center; } #wrapper .mobile-nav ul.nav-lang li { position: relative; float: left; } #wrapper .mobile-nav ul.nav-lang li:first-child:after { content: '/'; color: #f6f6f6; position: absolute; right: -55%; } #wrapper .mobile-nav ul.nav-lang li a.active { color: #00ccff; } #wrapper .mobile-nav ul.nav-social { -webkit-box-flex: .15; -ms-flex: .15; flex: .15; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; width: 50%; -ms-flex-item-align: center; align-self: center; } #wrapper .mobile-nav ul.nav-social li { float: left; } #wrapper .mobile-nav ul li { list-style: none; text-align: center; font-size: 1.25em; } #wrapper .mobile-nav ul li a { color: #fff; } #wrapper .mobile-nav ul li a:focus, #wrapper .mobile-nav ul li a:active { color: #00ccff; text-decoration: none; } #wrapper .mobile-nav.nav-show { top: 60px; } #wrapper .mobile-nav.nav-off { top: -200vw; } #wrapper .header-nav { -webkit-transition: .4s; transition: .4s; padding: 28px 2.62467vw; } #wrapper .header-nav.scroll { background-color: rgba(238, 238, 238, 0.96); -webkit-box-shadow: 0px 0px 6px 2px #9a9a9a; box-shadow: 0px 0px 6px 2px #9a9a9a; } #wrapper .header-nav.scroll.header-nav .logo-wrapper figure span { background: -webkit-gradient(linear, left top, right top, from(#1f1e34), to(#1f1e34)); background: linear-gradient(to right, #1f1e34, #1f1e34); background-clip: text; -webkit-background-clip: text; text-fill-color: transparent; -webkit-text-fill-color: transparent; } #wrapper .header-nav.scroll.header-nav .logo-wrapper figure span:first-child { background: -webkit-gradient(linear, left top, right top, from(#5b449f), to(#13aacf)); background: linear-gradient(to right, #5b449f, #13aacf); background-clip: text; -webkit-background-clip: text; text-fill-color: transparent; -webkit-text-fill-color: transparent; } #wrapper .header-nav.scroll.header-nav .nav-lang li a.active { color: #13aacf !important; } #wrapper .header-nav .logo-wrapper { padding-left: 0; } #wrapper .header-nav .logo-wrapper figure { font-family: Roboto, sans-serif; font-weight: 900; text-transform: uppercase; font-size: 2em; color: #1f1e34; margin: 0; line-height: .75; } #wrapper .header-nav .logo-wrapper figure .logo-small { font-family: Open sans, sans-serif; font-weight: 300; font-size: 1.35rem !important; color: #f6f6f6; text-transform: initial; } @media (max-width: 1200px) { #wrapper .header-nav .logo-wrapper figure .logo-small { font-size: calc(1.07rem + 0.37333vw) !important; } } #wrapper .header-nav .nav-wrapper { padding-right: 0; position: absolute; bottom: 27px; right: 2.62467vw; } #wrapper .header-nav .nav-wrapper .nav { font-family: Source Sans Pro, sans-serif; margin: 0 45px 0 0; float: left; } #wrapper .header-nav .nav-wrapper .nav li { margin-left: 20px; margin-right: 20px; line-height: 1; } #wrapper .header-nav .nav-wrapper .nav li:first-child { margin-left: 0; } #wrapper .header-nav .nav-wrapper .nav li:last-child { margin-right: 0; } #wrapper .header-nav .nav-wrapper .nav li a { font-weight: 300; text-decoration: none; color: #1f1e34; } #wrapper .header-nav .nav-wrapper .nav li a:hover, #wrapper .header-nav .nav-wrapper .nav li a:active, #wrapper .header-nav .nav-wrapper .nav li a:focus, #wrapper .header-nav .nav-wrapper .nav li a.active { font-weight: 400; } #wrapper .header-nav .nav-wrapper .nav li a:after { display: block; content: attr(title); font-weight: 400; height: 0; overflow: hidden; visibility: hidden; } #wrapper .header-nav .nav-wrapper .nav-social li { margin-left: 4px; margin-right: 4px; } #wrapper .header-nav .nav-wrapper .nav-social li:first-child { margin-left: 0; } #wrapper .header-nav .nav-wrapper .nav-social li:first-child a { font-size: 12px; padding: 2px 0 0 0; } #wrapper .header-nav .nav-wrapper .nav-lang li { margin: 0; } #wrapper .header-nav .nav-wrapper .nav-lang li:first-child { margin-right: 6px; } #wrapper .header-nav .nav-wrapper .nav-lang li:last-child { position: relative; margin-left: 3px; } #wrapper .header-nav .nav-wrapper .nav-lang li:last-child:before { position: absolute; top: -1px; left: -9px; content: '/'; padding: 3px; font-size: 13px; } #wrapper .header-nav .nav-wrapper .nav-lang li a:focus, #wrapper .header-nav .nav-wrapper .nav-lang li a.active { font-weight: 600; } #wrapper section { position: relative; background-color: #fff; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; overflow: hidden; } #wrapper section .colored h2 { font-family: Source Sans Pro, sans-serif; font-weight: 300; text-transform: uppercase; } #wrapper section .colored-db { background: url("../img/noise.png") #161627 0 0 repeat; color: #fff; width: 100%; margin-left: auto; margin-right: auto; } #wrapper section .colored-db a, #wrapper section .colored-db p, #wrapper section .colored-db figure { color: #fff; } #wrapper section .colored-lg { background: url("../img/noise.png") #f3f3f3 0 0 repeat; color: #161627; } #wrapper section .colored-lg a, #wrapper section .colored-lg p, #wrapper section .colored-lg figure { color: #161627; } #wrapper section .shape-bottom { position: relative; } #wrapper section .shape-bottom:before { content: ''; width: 0; height: 0; border-left: 99.9vw solid transparent; border-bottom: 1.8229vw solid #fff; position: absolute; bottom: 0; left: 0; z-index: 1; } #wrapper section .mini-shape-bottom-left { position: relative; } #wrapper section .mini-shape-bottom-left:after { content: ''; width: 0; height: 0; border-right: 99.9vw solid transparent; border-bottom: 2.3622vw solid #fff; position: absolute; bottom: 0; left: 0; z-index: 1; } #wrapper section .shape-top { position: relative; } #wrapper section .shape-top:before { content: ''; width: 0; height: 0; border-right: 99.9vw solid transparent; border-top: 1.8229vw solid #fff; position: absolute; top: 0; left: 0; z-index: 1; } #wrapper section .icon-list { width: 100%; } #wrapper section .icon-list li { position: relative; list-style: none; float: left; } #wrapper section .icon-list li:first-child:before { border: none; } #wrapper section .icon-list li:last-child { margin-right: 0; } #wrapper section .icon-list .img-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; margin: 0 auto 1.14583vw auto; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #wrapper section .icon-list .img-wrap img { width: 100%; -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } #wrapper section .icon-list .img-wrap img:hover { -webkit-transform: scale3d(1.3, 1.3, 1.3); transform: scale3d(1.3); } #wrapper section .icon-list figure { text-align: center; text-transform: uppercase; font-size: 0.85em; font-weight: 600; margin: 0; } #wrapper section .sol-list { width: 100% !important; padding: 0; } #wrapper section .sol-list li { width: calc((100% / 4) - 3px); margin: 0 auto; } #wrapper section .sol-list li:first-child { margin-left: 0; } #wrapper section .sol-list li:before { position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); content: ''; width: 0; height: 70%; } #wrapper section .sol-list li:last-child { margin-right: 0; } #wrapper section .fun-list { width: 100%; padding: 0; margin: 0; } #wrapper section .fun-list li figure { letter-spacing: 2px; line-height: 1; white-space: nowrap; } #wrapper section .img img { width: 100%; } #wrapper section .img-absolute { position: absolute; z-index: 2; } #wrapper section .text-content { position: relative; } #wrapper section .text-content .header-container, #wrapper section .text-content .detail { position: relative; margin-right: 0; margin-left: auto; } #wrapper section .text-content h2 { font-size: 2em; } #wrapper section .text-content .detail aside figure { position: absolute; left: 0px; } #wrapper section .text-content .detail aside figure img { width: 1.75vw; } #wrapper section .text-content .detail aside p { letter-spacing: 0; line-height: 1.25; } #wrapper section .text-content .detail aside a { color: #1f1e34; text-transform: uppercase; font-weight: bold; padding: .5em 0; display: inline-block; } #wrapper section#home { background-image: radial-gradient(60% 100% ellipse at 50% 65%, transparent 30%, #9a9a9a 100%); } #wrapper section#home .screen-shield { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #fff; -webkit-transition: all .6s ease-out; transition: all .6s ease-out; z-index: 2; /*&.tuned-immediate { opacity: 1; //z-index: 5; }*/ /*&.zIndex-1 { z-index: -1; }*/ } #wrapper section#home .screen-shield.tuned { opacity: 1; } #wrapper section#home .screen-shield.tuned-off { opacity: 0; } #wrapper section#home .screen-shield.scaled { -webkit-transform: scale(250); transform: scale(250); } #wrapper section#home .intro-content #video { position: absolute; background-color: #000; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 1; /*&:before { content: ""; display: block; padding-top: 90%; }*/ } #wrapper section#home .intro-content #video video { position: relative; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } #wrapper section#home .intro-content #video button { outline: none; position: absolute; width: 50px; right: 2%; bottom: 2%; cursor: pointer; border: 0 none; background: transparent; z-index: 5; -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /*&:hover { -webkit-transform: scale3d(1.3, 1.3, 1.3); transform: rotate(90deg) scale3d(1.3); }*/ } #wrapper section#home .intro-content #video button i { font-size: 2em; display: block; margin: 0 auto; color: #1f1e34; } #wrapper section#home .intro-content #video button.vid-play { -webkit-transition: opacity .4s; transition: opacity .4s; opacity: 1; } #wrapper section#home .intro-content #video button.vid-not-play { -webkit-transition: opacity .4s; transition: opacity .4s; opacity: 0; } #wrapper section#home .intro-content #homeBgVideo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } #wrapper section#home .intro-content #homeBgVideo video { position: absolute; top: 0; left: 0; -o-object-fit: cover; object-fit: cover; } #wrapper section#home .intro-content .video-play-btn { position: absolute; width: 7vw; height: 7vw; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: 33%; opacity: 0; z-index: 2; } #wrapper section#home .intro-content .video-play-btn:hover { cursor: pointer; } #wrapper section#home .intro-content .video-play-btn.opacity-full { -webkit-transition: opacity .4s linear; transition: opacity .4s linear; opacity: .5; } #wrapper section#home .intro-content .video-play-btn.opacity-full:hover { opacity: 1; } #wrapper section#home .intro-content .video-play-btn .circle-bg-white { position: absolute; left: 5%; top: 5%; width: 100%; height: 100%; border-radius: 50%; background-color: #1f1e34; z-index: 1; } #wrapper section#home .intro-content .video-play-btn svg { position: absolute; top: 15%; left: 15%; width: 80%; height: 80%; z-index: 1; } #wrapper section#home .intro-content .video-play-btn img { width: 100%; position: relative; z-index: 2; } #wrapper section#home .intro-content .text { position: absolute; width: 50%; height: 50%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 2; } #wrapper section#home .intro-content .text svg { width: 100%; -webkit-filter: drop-shadow(0px 0px 20px #616161); filter: drop-shadow(0px 0px 20px #616161); } #wrapper section#home .intro-content .text svg .cls-1 { fill: transparent; fill-rule: evenodd; } #wrapper section#home .intro-content .text svg.animation-done path { -webkit-animation: animationText 2s linear forwards; animation: animationText 2s linear forwards; fill: transparent; } #wrapper section#home .intro-content .tablet { position: relative; margin: 0 auto; -webkit-transition: all .6s ease-out; transition: all .6s ease-out; /*animation-name: tabletanim; animation-duration: 1s;*/ /*&.start { width: 10%; transform: perspective(20vw) rotateY(90deg) translateX(-50%); }*/ /*&.skew { width: 50%; transform: perspective(0) rotateY(0) translateX(-50%); }*/ /*&.move-up { bottom: calc(-40vw * 0.15)!important; //top: 18%; }*/ /*@keyframes tabletanim { 0% { top: 110%; } 100% { top: 18%; } }*/ } #wrapper section#home .intro-content .tablet.rotate-90 { -webkit-transform: rotate(-90deg) !important; transform: rotate(-90deg) !important; top: 13%; } #wrapper section#home .intro-content .tablet img { width: 100%; } #wrapper section#solutions .text-content .header-container, #wrapper section#solutions .text-content .detail { left: 300%; } #wrapper section#solutions .text-content .detail { margin-top: 1.5625vw; } #wrapper section#solutions .ap-mac img, #wrapper section#solutions .ap-iphone img { width: 100%; } #wrapper section#solutions .ap-mac img { width: 100%; } #wrapper section#solutions .ap-iphone { width: 55%; } #wrapper section#vr .text-content.from-left .header-container, #wrapper section#vr .text-content.from-left .detail { left: -300%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } #wrapper section#vr .vr-img img { width: 85%; margin: 7.5% 0; } #wrapper section#vr .holo-img { bottom: 0; } #wrapper section#references { -webkit-box-pack: normal; -ms-flex-pack: normal; justify-content: normal; } #wrapper section#references > .row:last-child { margin-top: auto; margin-bottom: auto; } #wrapper section#references .icon-list { margin: 1.5vw 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } #wrapper section#references .icon-list li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #wrapper section#ar > .row .container > .row { height: 100%; } #wrapper section#ar .shape-top { padding: 0; } #wrapper section#ar .text-content.from-right .header-container, #wrapper section#ar .text-content.from-right .detail { left: 300%; } #wrapper section#ar .text-content.from-left .header-container, #wrapper section#ar .text-content.from-left .detail { left: -300%; } #wrapper section#ar .text-content.from-bottom { width: 100%; padding: 0 0 0 2.0997vw; } #wrapper section#ar .text-content.from-bottom .header-container, #wrapper section#ar .text-content.from-bottom .detail { bottom: -100vh; } #wrapper section#ar .text-content.from-bottom form input[type=email] { border-bottom: 1px solid #322961; border-top: none; border-left: none; border-right: none; padding: 0.524934vw 0 0.577427vw 0.262467vw; margin: 0 5.1443569vw 0 0; } #wrapper section#ar .tablet-fw { bottom: 0; z-index: 0; } #wrapper section#ar .iphone-es img { margin: 0 0 0 auto; display: block; } #wrapper section#contact .shape-top { padding: 1.5vw 0 1vw 0; } #wrapper section#contact .text-content:first-child { /*&.head-row { margin-top: 3vw; }*/ } #wrapper section#contact .text-content:first-child aside { padding: 0 0 0 2.62467vw; } #wrapper section#contact .text-content:first-child aside figure img { width: 1.574803vw; } #wrapper section#contact .row { margin-left: 0; margin-right: 0; /*&:nth-child(2) { flex: 1; }*/ } #wrapper section#contact .row .map-wrapper { position: relative; width: 100%; } #wrapper section#contact .row .map-wrapper .map-street-info { position: absolute; top: 10px; right: 10px; padding: 5px 15px; background: rgba(255, 255, 255, 0.5); z-index: 1; border-radius: 3px; } #wrapper section#contact .row .map-wrapper .map-street-info p { margin: 0; } #wrapper section#contact .row .map-wrapper #map { position: absolute; width: 100%; height: 100%; } #wrapper section#contact .footer { background-color: #1f1e34; color: #fff; padding: 20px 0; } #wrapper section#contact .footer p { margin: 0; } #wrapper section#product-circle h1 { margin-top: 10.498vw; } #wrapper section#product-circle .pos-sun { margin: 6.56167vw auto 0 auto; height: 920px; position: relative; width: 73.95833333333334%; } #wrapper section#product-circle .pos-sun .ray-buble { background: url("../img/dots.svg") 0 0 no-repeat transparent; background-size: 100%, 100%; position: absolute; width: 15.845070422535212%; height: calc(73.95833333333334vw * 0.1584512); display: block; border-radius: 50%; } #wrapper section#product-circle .pos-sun .ray-buble { top: 0; left: 48.59154295774648%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } #wrapper section#product-circle .pos-sun .logo-center { width: 22.183098591549296%; position: absolute; left: 48.59154295774648%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); top: 46.47887323943662%; } #wrapper section#product-circle .pos-sun .logo-center .logo-img.sun-diagram-logo img { width: 53.96825396825397%; margin: 0 auto; display: block; } #wrapper section#product-circle .pos-sun .logo-center p { text-transform: uppercase; line-height: 1; margin: .5vw 0; } #wrapper section#product-circle .pos-sun svg { width: 64.7887323943662%; margin: 0 auto; display: block; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } /********************* * Fixes for Safari * *********************/ .safari #wrapper section .icon-list .img-wrap img { -webkit-transition: none; transition: none; } .safari #wrapper section#home .intro-content .tablet #video video { width: 135%; height: 70%; top: 15%; left: -17%; -webkit-transform: rotate(90deg); transform: rotate(90deg); } .safari #wrapper section#home .intro-content .tablet #video video::-webkit-media-controls-fullscreen-button { display: none !important; } .safari #wrapper section#contact .map-wrapper { height: 80vh; } .safari #wrapper section#contact .footer { position: relative; bottom: 0; } /********************* * Fixes for Firefox * *********************/ .ff #wrapper section#home .intro-content .tablet #video video { width: 150%; height: 70%; top: 10%; left: -25%; -webkit-transform: rotate(90deg); transform: rotate(90deg); } /************** * Container * ***************/ .container-solid { max-width: 980px; margin: 0 auto; } .container-fluid { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } /************** * Carousel * ***************/ .carousel .carousel-inner { padding: 1px; } .carousel .carousel-inner .carousel-item h3 { font-family: Source Sans Pro, sans-serif; text-transform: uppercase; margin-bottom: 3.1496vw; } .carousel .carousel-inner .carousel-item aside { position: relative; padding: 0 0 0 3.67454vw; margin: 0 0 2.0997vw 0; } .carousel .carousel-inner .carousel-item aside h5 { font-weight: 600; } .carousel .carousel-inner .carousel-item aside figure { position: absolute; left: 0; } .carousel .carousel-inner .carousel-item aside figure img { width: 2.62467vw; } .carousel .carousel-inner .item-img-container { position: relative; } .carousel .carousel-inner .item-img-container img { width: 100%; } .carousel .carousel-indicators li { /*width: 0.9448vw; height: 0.9vw;*/ border-radius: 10px; background-color: #9f9f9f; margin-left: 0.5em; margin-right: 0.5em; } .carousel .carousel-indicators li.active { background-color: #1f1e34; } .carousel .carousel-control-prev, .carousel .carousel-control-next { width: 5vw; } .carousel .carousel-control-prev { margin-left: -8vw; } .carousel .carousel-control-prev .carousel-control-prev-icon { /*width: 2.2047vw; height: 3.7795vw;*/ background-image: url("../img/left-arrow.svg") !important; } .carousel .carousel-control-next { margin-right: -8vw; } .carousel .carousel-control-next .carousel-control-next-icon { /*width: 2.2047vw; height: 3.7795vw;*/ background-image: url("../img/right-arrow.svg") !important; } .gradient-btn { position: relative; display: inline-block; text-transform: uppercase; font-weight: 600; padding: 0.39vw 2.3622vw; z-index: 0; cursor: pointer; } .gradient-btn.has-icon { padding: 10px 60px 10px 25px; } .gradient-btn:before, .gradient-btn:after { content: ''; position: absolute; } .gradient-btn:before { top: -1px; left: -1px; right: -1px; bottom: -1px; background-image: -webkit-gradient(linear, left top, right top, from(#5b449f), to(#13aacf)); background-image: linear-gradient(to right, #5b449f, #13aacf); z-index: -2; } .gradient-btn:hover { text-decoration: none; color: #fff; } .gradient-btn:hover .play-icon-btn { background-color: #fff; } .gradient-btn:hover:after { -webkit-transition: background-color .4s; transition: background-color .4s; background-color: transparent; } .db-btn { color: #fff; } .db-btn:after { -webkit-transition: background-color .4s; transition: background-color .4s; top: 0; left: 0; bottom: 0; right: 0; background-color: #161627; z-index: -1; } .cw-btn { color: #1f1e34; } .cw-btn:after { -webkit-transition: background-color .4s; transition: background-color .4s; top: 0; left: 0; bottom: 0; right: 0; background-color: #fff; z-index: -1; } .play-icon-btn { background-color: #1f1e34; -webkit-mask-image: url("../img/playIcon.svg"); mask-image: url("../img/playIcon.svg"); position: absolute; width: 40px; height: 40px; display: inline-block; margin: 0 0 0 5px; -webkit-mask-size: 100%; background-mask-size: 100%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .light-blue { color: #00b4ff !important; } .light-font { font-weight: 300 !important; } .regular-font { font-weight: 400 !important; } .black-font { font-family: Roboto, sans-serif !important; font-weight: 900 !important; } .shape-bottom-absolute { width: 0; height: 0; border-left: 105vw solid transparent; border-bottom: 1.8229vw solid #fff; position: absolute; bottom: 0; } .ease { -webkit-transition: 1s ease; transition: 1s ease; } .top-ease { bottom: 0 !important; } .right-ease { left: 0 !important; } .left-ease { left: 50% !important; } .country { background: url("../img/grass.jpg") left bottom no-repeat, url(../img/noise.png) #f3f3f3 0 0 repeat !important; background-size: contain, auto !important; } .height-50 { height: calc(100vh / 2); } .z5 { z-index: 5 !important; } @keyframes animationText { 100% { fill: #fff; } } @-webkit-keyframes animationText { 100% { fill: #fff; } } /********** * Media * ***********/ @media screen and (min-width: 320px) { .sticky-info { display: none; } .h2, h2 { font-size: 1.355rem; letter-spacing: 0; } h3 { margin: 1.5rem 0; } .colored { padding: 10vw 0 !important; } .colored h2 { letter-spacing: 0; margin: 1em 0; } /*.shape-top { padding: 1.5rem 0; }*/ p { font-size: 0.8em; } .header-desktop, #video { display: none; } .header-mobile, #home .tablet { display: block; } .container, .container-solid { max-width: 320px; } .text-content.from-left { -webkit-transition: none; transition: none; left: 0; } .text-content.from-right { -webkit-transition: 0; transition: 0; left: 0; } .text-content.from-right .header-container, .text-content.from-right .detail { left: 0; } .text-content aside { padding: 0; } .text-content aside figure { display: none; } .text-center-sm { text-align: center; } .sol-list li:before { border: 0 none; } .sol-list li .img-wrap { width: 11vw; height: 11vw; } #home { height: 50vh; } #home .screen-shield { display: none; } #home .intro-content #homeBgVideo { display: none; } #home .intro-content .video-play-btn { display: none; } #home .intro-content .text { top: 25%; -webkit-transform: translateX(-25%); transform: translateX(-25%); } #home .intro-content .tablet { bottom: -100vh; width: 50%; } #home .intro-content .tablet.move-up { bottom: calc(-50vw * 0.5) !important; } #solutions .fun-list .img-wrap { width: 11vw; height: 11vw; } #solutions .fun-list li figure { font-size: .85em; } #solutions .fun-list li figure span { font-size: .9em; } #solutions h2, #solutions h3 { margin: 1.5rem 0; } #solutions .ap-mac { margin: 0 auto; } #solutions .ap-iphone { bottom: -65px; left: 0.5vw; } #vr .vr-img { width: 100%; } #vr .vr-img img { right: 0; } #vr .holo-img { position: absolute; -webkit-transform: scaleX(-1); transform: scaleX(-1); right: 0; width: 90%; } #vr .vr-desktop { display: none !important; } #vr .vr-mobile { display: block !important; padding-bottom: 0 !important; } #references .shape-bottom { padding-bottom: .5em; } #references .icon-list { padding: 0; } #references .icon-list li { width: 25%; } #references .icon-list li img { width: 100%; display: block; margin: 0 auto; } #references .icon-list li:nth-child(2) img, #references .icon-list li:nth-child(3) img { width: 50%; } #references .carousel { margin: 5vw 10vw 20vw 10vw; } #references .carousel .carousel-inner { min-height: 460px; } #references .carousel .carousel-inner .carousel-item { min-height: 350px; } #references .carousel .carousel-indicators { position: relative; margin-top: 1em; } #references .carousel .carousel-indicators li { width: 20px; height: 20px; } #references .carousel .carousel-control-prev { opacity: 1; } #references .carousel .carousel-control-prev .carousel-control-prev-icon { width: 10vw; height: 10vw; } #references .carousel .carousel-control-next { opacity: 1; } #references .carousel .carousel-control-next .carousel-control-next-icon { width: 10vw; height: 10vw; } #ar .country { padding-bottom: 0 !important; } #ar .ar-desktop { display: none !important; } #ar .ar-mobile { display: block !important; } #ar .iphone-es { position: relative; margin: 0 0 0 auto; right: 0; bottom: 0px; } #ar .iphone-es img { width: 150% !important; } #ar .tablet-fw { position: relative; width: 100%; left: 0; } #contact .map-wrapper { display: none; } .m-3rem { margin-top: 1rem !important; margin-bottom: 3rem !important; } } @media screen and (min-width: 340px) and (min-height: 812px) and (-webkit-device-pixel-ratio: 3) { #home .intro-content .text { top: 40%; } #home .intro-content .tablet.move-up { bottom: calc(-50vw * 0.85) !important; } } @media screen and (min-width: 576px) { h1 h2, h3, h4, h5, h6 { white-space: normal; } .mt-6 { margin-top: 6rem !important; } .container, .container-solid { max-width: 545px; } .row { margin-right: 0; margin-left: 0; } .sol-list li:before { border: 1px solid #463584; } /*#home { .intro-content { .tablet { bottom: -110px; } } }*/ #solutions .ap-iphone { width: 30vw; } #vr .holo-img { width: 32vw; } } @media screen and (min-width: 768px) { html, body, p, a, figure { letter-spacing: 1px; } .h2, h2 { font-size: 2rem; letter-spacing: 1px; } h3 { margin: 0 0 .5rem 0; } p { font-size: 0.95em; } .colored { padding: 3vw 0; } .colored h2 { letter-spacing: 5px; } .text-center-sm { text-align: left; } .container, .container-solid { max-width: 735px; } .row { margin-right: -15px; margin-left: -15px; } .fun-list { margin: 1vw 0 0 0; } .fun-list li:first-child { margin-left: -1.14583vw; } .fun-list li:last-child { margin-right: 3.5vw; } .text-content.from-right .header-container, .text-content.from-right .detail { left: 300%; } .text-content aside { padding: 0 0 0 2.6041666vw; } .text-content aside figure { display: block; } #home { height: 100vh; } #home .intro-content .text { top: 50%; } #home .intro-content .tablet { width: 70%; } #home .intro-content .tablet.move-up { bottom: calc(-50vw * 0.8) !important; } #solutions .sol-list { width: 100%; } #solutions .sol-list li:before { left: -25%; } #solutions .sol-list li .img-wrap { width: 4.4vw; height: 4.4vw; } #solutions .fun-list .img-wrap { width: 3.6vw; height: 3.6vw; } #solutions .fun-list li figure { font-size: 1.5em; } #solutions .fun-list li figure span { font-size: 1rem; } #solutions .ap-mac { width: 100%; margin: 0 auto 0 0; } #solutions .ap-mac img { width: 100%; } #solutions .ap-iphone { width: 14.065vw; bottom: 50px; left: .5em; } #solutions .text-content .header-container, #solutions .text-content .detail { width: 95%; } #vr .vr-desktop { display: block !important; padding-bottom: 0 !important; } #vr .vr-mobile { display: none !important; } #vr .text-content.from-right .header-container, #vr .text-content.from-right .detail { left: 300%; } #vr .text-content.from-right .header-container { top: 0; } #vr .text-content.from-left .header-container, #vr .text-content.from-left .detail { left: -300%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } #vr .vr-img { width: 49.21259842vw; } #vr .holo-img { position: relative; -webkit-transform: scaleX(1); transform: scaleX(1); width: 30vw; left: 5vw; margin-top: 30px; z-index: 2; } #ar .country { padding-bottom: 0 !important; } #ar .ar-desktop { display: block !important; } #ar .ar-mobile { display: none !important; } #ar > .row:first-child { -webkit-box-flex: .6; -ms-flex: .6; flex: .6; } #ar > .row:last-child { -webkit-box-flex: .4; -ms-flex: .4; flex: .4; } #ar > .row:last-child > div .row { height: 100%; } #ar .iphone-es { width: 100%; position: relative; right: -30%; bottom: -10px; margin-top: -30px; } #ar .iphone-es img { width: 100% !important; } #ar .tablet-fw { width: 120%; left: -10%; } #ar .tablet-fw > div { display: -webkit-box; display: -ms-flexbox; display: flex; } #ar .ar-r-text { margin: 2em 0; } #references .icon-list li img { width: 50%; } #references .icon-list li:nth-child(2) img, #references .icon-list li:nth-child(3) img { width: 20%; } #references .carousel { margin: 5vw 10vw 6vw 10vw; } #references .carousel .carousel-inner { min-height: inherit; /*.carousel-item { min-height: 350px; }*/ } #references .carousel .carousel-indicators { bottom: 0; margin-top: 4em; } #references .carousel .carousel-indicators li { width: 15px; height: 15px; } #references .carousel .carousel-control-prev { opacity: .5; } #references .carousel .carousel-control-prev:hover { opacity: .9; } #references .carousel .carousel-control-prev .carousel-control-prev-icon { width: 3vw; height: 3vw; } #references .carousel .carousel-control-next { opacity: .5; } #references .carousel .carousel-control-next:hover { opacity: .9; } #references .carousel .carousel-control-next .carousel-control-next-icon { width: 3vw; height: 3vw; } #contact .shape-top { padding: 6.5vw 0 1vw 0; } #contact .map-wrapper { display: block; height: 425px; } .m-3rem { margin-top: 5rem !important; margin-bottom: 5rem !important; } } @media screen and (min-width: 992px) { .sticky-info { display: block; } .container-solid { max-width: 960px; } h1 h2, h3, h4, h5, h6 { white-space: no-wrap; } .container { max-width: 960px; } .colored { padding: 6vw 0 !important; } .header-desktop, #video { display: block; } .header-mobile, .mobile-nav, #home .tablet { display: none; } #home .screen-shield { display: block; } #home .intro-content #homeBgVideo { display: block; } #home .intro-content .video-play-btn { display: block; } #home .intro-content .text { top: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } #home .intro-content .tablet { display: none; width: 35%; } #home .intro-content .tablet.move-up { bottom: calc(-35vw * 0.25) !important; } #solutions .sol-list { margin: 0 0 1.5vw 0; } #solutions .sol-list li:before { left: -50%; } #solutions .ap-iphone { bottom: -120px; } #vr .vr-desktop { padding-bottom: 0 !important; } #vr .vr-img img { right: 0; } #vr .holo-img { margin-top: -70px; } #ar .country { padding-bottom: 0 !important; } #ar .iphone-es { margin-top: -100px; } #ar .ar-r-text { margin: 4em 0; } #references .icon-list img { margin: 0; } .mobile .sticky-info { display: none; } .mobile #home .intro-content #homeBgVideo { display: none; } .mobile #home .intro-content .tablet { display: block; width: 80%; } .mobile #home .intro-content .tablet.move-up { bottom: calc(-80vw * 0.35) !important; } } @media screen and (min-width: 1200px) { .mt-xl-6 { margin-top: 6rem !important; } #vr .vr-img img { right: -4em; } #vr .holo-img { left: 0; } #ar .iphone-es { right: -40%; } #ar .tablet-fw { width: 150%; left: -30%; } #ar .ar-r-text { margin: 8em 0; } /*#contact { .map-wrapper { height: 29.5vw; } }*/ } @media screen and (min-width: 1340px) { .container { max-width: 1230px; } #vr .vr-img img { right: -5.75em; } #ar .text-content:last-child .from-left { width: 100%; } #ar .tablet-fw { width: 120%; left: 0; } #ar .iphone-es { right: -20%; } #contact { /*.map-wrapper { height: 28.75vw; }*/ } } @media screen and (min-width: 1568px) { p { font-size: 1em; } #home #video { top: 9.25%; } #solutions .ap-iphone { bottom: -140px; } #vr .holo-img { margin-top: -20px; left: -5vw; } #refeences .carousel .carousel-indicators { bottom: -1vw; } #ar .tablet-fw { width: 150%; left: -30%; } #ar .iphone-es { right: -60%; } } .mobile .header-desktop, .mobile #video { display: none; } .mobile .header-mobile, .mobile #home .tablet { display: block; } .mobile #home .intro-content .video-play-btn { display: none; }