body.zagg_european_fr #why-screen-protection .title h2 { font-size: 36px; margin: -73px 0 35px; } body.zagg_european_fr .fixed-nav .fixed-box ul li { padding: 10px 40px; } body.zagg_european_fr .fixed-nav .fixed-box ul li:first-of-type { padding-left: 0; } body.zagg_european_fr .fixed-nav .fixed-box ul li:last-of-type { padding-right: 0; } @media (max-width: 970px) { body.zagg_european_fr .hero-video .video-caption-wrapper .video-caption h2 { font-size: 28px; } body.zagg_european_fr .hero-video .video-caption-wrapper .video-caption h3 { font-size: 22px; } } @media (max-width: 767px) { body.zagg_european_fr #why-screen-protection .title h2 { font-size: 20px; margin: -42px 0 25px; } body.zagg_european_fr #why-screen-protection .container .box-third.first { height: 470px; } } body.zagg_european_de .fixed-nav .fixed-box ul li { padding: 10px 56px; } body.zagg_european_de .fixed-nav .fixed-box ul li:first-of-type { padding-left: 0; } body.zagg_european_de .fixed-nav .fixed-box ul li:last-of-type { padding-right: 0; } body.zagg_european_de #why-screen-protection .container .box-third.third .red-border .gray-box p { font-size: 18px; } @media (max-width: 1280px) { body.zagg_european_de #why-screen-protection .container .box-third.first p { font-size: 20px; } body.zagg_european_de #why-screen-protection .container .box-third.second p { font-size: 20px; } } @media (max-width: 970px) { body.zagg_european_de .hero-video .video-caption-wrapper .video-caption h3 { font-size: 22px; } } @media (max-width: 767px) { body.zagg_european_de #why-screen-protection .container .box-third.first { height: 450px; } } .fancybox-lock { overflow: visible !important; } .fancybox-wrap.fancybox-hero-video { width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; position: fixed !important; } .fancybox-wrap.fancybox-hero-video .fancybox-skin { padding: 0 !important; width: 100% !important; height: 100% !important; } .fancybox-wrap.fancybox-hero-video .fancybox-skin .fancybox-outer { height: 100% !important; } .fancybox-wrap.fancybox-hero-video .fancybox-skin .fancybox-outer .fancybox-inner { width: 100% !important; height: 100% !important; } .fancybox-wrap.fancybox-hero-video .fancybox-skin .fancybox-close { top: 15px !important; right: 15px !important; } .hero-video { width: 100%; min-height: 590px; max-height: 800px; position: relative; overflow: hidden; background: transparent; } .hero-video #video-background { position: absolute; width: 100%; top: -150px; height: auto; background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-image: url("/media/zagg/images/landing-pages/invisibleshield/backgroundimage-videois.jpg"); background-position: center center; } @media (max-width: 1700px) { .hero-video #video-background { top: -50px; } } @media (max-width: 1520px) { .hero-video #video-background { top: 0; } } @media (max-width: 1422px) { .hero-video #video-background { width: 1422px; height: auto; left: 50%; margin-left: -711px; } } .hero-video .video-caption-wrapper { width: 100%; position: absolute; top: 0; height: 100%; left: 0; } .hero-video .video-caption-wrapper .video-caption { width: 500px; top: 50%; text-align: center; position: absolute; left: 50%; margin-top: -140px; margin-left: -250px; } .hero-video .video-caption-wrapper .video-caption img.is-logo { margin: 0 auto 20px; max-width: 100%; } .hero-video .video-caption-wrapper .video-caption h2, .hero-video .video-caption-wrapper .video-caption h3 { text-align: center; color: #fff; font-weight: 500; text-shadow: 0 0 35px rgba(0, 0, 0, 0.5); font-family: "Avenir Next W00", "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif; margin: 0; line-height: 1.2; } .hero-video .video-caption-wrapper .video-caption h2 { font-size: 36px; } .hero-video .video-caption-wrapper .video-caption h3 { font-size: 26px; } .hero-video .video-caption-wrapper .video-caption img.play-btn { margin: 20px auto; } .hero-video .video-caption-wrapper .video-caption .icon-infinity, .hero-video .video-caption-wrapper .video-caption .new-messaging { display: none; } .ispage-new2 .hero-video .video-caption-wrapper .video-caption { width: 450px; margin-left: -225px; } @media (min-width: 767px) { .ispage-new2 .hero-video .video-caption-wrapper .video-caption { margin-top: -165px; } } .ispage-new2 .hero-video .video-caption-wrapper .video-caption .old-messaging { display: none; } .ispage-new2 .hero-video .video-caption-wrapper .video-caption .icon-infinity, .ispage-new2 .hero-video .video-caption-wrapper .video-caption .new-messaging { display: block; } .ispage-new2 .hero-video .video-caption-wrapper .video-caption h3 { font-size: 14px; text-align: left; } @media (max-width: 767px) { .ispage-new2 .hero-video .video-caption-wrapper .video-caption h2 { font-size: 20px; } } .ispage-new2 .hero-video .video-caption-wrapper .video-caption .icon-infinity { float: left; font-size: 55px; color: #fff; margin-right: 25px; } @media (max-width: 970px) { .ispage-new2 .hero-video, .hero-video { width: 100%; height: 546px; position: relative; overflow: hidden; min-height: auto; max-height: none; } .ispage-new2 .hero-video #video-background, .hero-video #video-background { top: 0; width: 970px; left: 50%; margin-left: -490px; } .ispage-new2 .hero-video .video-caption-wrapper .video-caption, .hero-video .video-caption-wrapper .video-caption { width: 450px; margin-left: -225px; } .ispage-new2 .hero-video .video-caption-wrapper .video-caption h1, .hero-video .video-caption-wrapper .video-caption h1 { font-size: 40px; } .ispage-new2 .hero-video .video-caption-wrapper .video-caption h1 sup, .hero-video .video-caption-wrapper .video-caption h1 sup { font-size: 12px; top: -6px; } .ispage-new2 .hero-video .video-caption-wrapper .video-caption h1 span.reg, .hero-video .video-caption-wrapper .video-caption h1 span.reg { font-size: 18px; } .ispage-new2 .hero-video .video-caption-wrapper .video-caption img.play-btn, .hero-video .video-caption-wrapper .video-caption img.play-btn { margin: 14px auto; } } @media (max-width: 767px) { .ispage-new2 .hero-video, .hero-video { width: 100%; height: 380px; position: relative; overflow: hidden; } .ispage-new2 .hero-video #video-background, .hero-video #video-background { top: 0; width: 100%; left: 0; margin-left: 0; } .ispage-new2 .hero-video .video-caption-wrapper .video-caption, .hero-video .video-caption-wrapper .video-caption { top: 60%; width: 300px; margin-left: -150px; } .ispage-new2 .hero-video .video-caption-wrapper .video-caption h1, .hero-video .video-caption-wrapper .video-caption h1 { font-size: 40px; } .ispage-new2 .hero-video .video-caption-wrapper .video-caption h1 sup, .hero-video .video-caption-wrapper .video-caption h1 sup { font-size: 12px; top: -6px; } .ispage-new2 .hero-video .video-caption-wrapper .video-caption h1 span.reg, .hero-video .video-caption-wrapper .video-caption h1 span.reg { font-size: 18px; } .ispage-new2 .hero-video .video-caption-wrapper .video-caption h2, .hero-video .video-caption-wrapper .video-caption h2 { font-size: 24px; } .ispage-new2 .hero-video .video-caption-wrapper .video-caption img.play-btn, .hero-video .video-caption-wrapper .video-caption img.play-btn { margin: 14px auto; } } @media (max-width: 680px) { .ispage-new2 .hero-video, .hero-video { height: 320px; } .ispage-new2 .hero-video #video-background, .hero-video #video-background { width: 680px; height: auto; left: 50%; margin-left: -340px; } .ispage-new2 .hero-video .video-caption-wrapper .video-caption, .hero-video .video-caption-wrapper .video-caption { width: 300px; } .ispage-new2 .hero-video .video-caption-wrapper .video-caption h1, .hero-video .video-caption-wrapper .video-caption h1 { font-size: 40px; } .ispage-new2 .hero-video .video-caption-wrapper .video-caption h1 sup, .hero-video .video-caption-wrapper .video-caption h1 sup { font-size: 12px; top: -6px; } .ispage-new2 .hero-video .video-caption-wrapper .video-caption h1 span.reg, .hero-video .video-caption-wrapper .video-caption h1 span.reg { font-size: 18px; } .ispage-new2 .hero-video .video-caption-wrapper .video-caption img.play-btn, .hero-video .video-caption-wrapper .video-caption img.play-btn { margin: 14px auto; } } @keyframes arrow { 0% { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0); } 90% { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0); } 100% { opacity: 0; -webkit-transform: translate(0, 1em); transform: translate(0, 1em); } } .scroll-arrow { -webkit-anmiation: arrow 3s infinite ease-out; animation: arrow 3s infinite ease-out; cursor: pointer; display: block; margin: 3px auto 0; width: 0; height: 0; border-style: solid; border-width: 10px 12.5px 0 12.5px; border-color: #CF2A3C transparent transparent transparent; } #why-screen-protection-infographic img { margin: 0 auto; max-width: 100%; } #why-screen-protection .title .gray-bar { width: 100%; background-color: #4D4D54; height: 39px; } #why-screen-protection .title .red-bar { width: 100%; background-color: #CF2A3C; height: 71px; } #why-screen-protection .title .text-banner { margin: -89px auto 0; } #why-screen-protection .title h2 { text-align: center; margin: -78px 0 35px; color: #fff; font-size: 43px; font-weight: 600; font-family: "Avenir Next W00", "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif; } #why-screen-protection .container { width: 1280px; margin: 0 auto; text-align: center; padding: 0; } #why-screen-protection .container h2 { font-size: 40px; font-weight: 400; margin: 80px 0 40px; } #why-screen-protection .container .box-third { width: 420px; height: 420px; display: inline-block; vertical-align: middle; } #why-screen-protection .container .box-third.first .circle { margin: 0 auto; } #why-screen-protection .container .box-third.first h1 { margin: -220px 0 100px; font-size: 150px; font-weight: 700; } #why-screen-protection .container .box-third.first h1 sup { font-size: 50px; font-weight: 700; top: -70px; } #why-screen-protection .container .box-third.first p { font-size: 22px; line-height: 1.2; } #why-screen-protection .container .box-third.second .people img { display: inline-block; margin: 0 8px 0; vertical-align: middle; transition: all 0.25s ease-in-out; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; width: 105px; } #why-screen-protection .container .box-third.second .people img.grow { width: 121px; margin: -20px 0; } #why-screen-protection .container .box-third.second p.red-text { font-size: 22px; color: #CF2A3C; margin: 25px 0 0; line-height: 1.2; } #why-screen-protection .container .box-third.second p.red-text strong { font-size: 32px; } #why-screen-protection .container .box-third.second p { font-size: 22px; line-height: 1.2; } #why-screen-protection .container .box-third.third .red-border { width: 360px; border: 8px solid #CF2A3C; margin: 0 auto; } #why-screen-protection .container .box-third.third .red-border .gray-box { width: 328px; background-color: #4D4D54; margin: 8px; } #why-screen-protection .container .box-third.third .red-border .gray-box img { padding: 30px 0; margin: 0 auto; } #why-screen-protection .container .box-third.third .red-border .gray-box h1 { color: #fff; font-size: 110px; font-weight: 700; margin-bottom: 10px; } #why-screen-protection .container .box-third.third .red-border .gray-box p { color: #fff; margin: 0; font-size: 26px; font-weight: 500; padding-bottom: 30px; line-height: 1.2; } #why-screen-protection .container .btn.btn-special { background: transparent; border: 1px solid #4D4D54; display: block; margin: 0 auto; } #why-screen-protection .container .legal { font-size: 10px; margin: 20px 0; } @media (max-width: 1280px) { #why-screen-protection .container { width: 940px; } #why-screen-protection .container .box-third { width: 310px; height: 360px; } #why-screen-protection .container .box-third.first .circle { width: 238px; } #why-screen-protection .container .box-third.first h1 { margin: -175px 0 95px; font-size: 110px; } #why-screen-protection .container .box-third.first h1 sup { font-size: 30px; top: -55px; } #why-screen-protection .container .box-third.second .people img { width: 80px; } #why-screen-protection .container .box-third.second .people img.grow { width: 90px; } #why-screen-protection .container .box-third.third .red-border { width: 310px; } #why-screen-protection .container .box-third.third .red-border .gray-box { width: 278px; } #why-screen-protection .container .box-third.third .red-border .gray-box img { padding: 20px 0; } #why-screen-protection .container .box-third.third .red-border .gray-box h1 { font-size: 90px; } } @media (max-width: 970px) { #why-screen-protection .container { width: 740px; } #why-screen-protection .container .box-third { width: 420px; height: 420px; } #why-screen-protection .container .box-third.first .circle { width: 302px; } #why-screen-protection .container .box-third.first h1 { margin: -220px 0 100px; font-size: 150px; } #why-screen-protection .container .box-third.first h1 sup { font-size: 50px; top: -70px; } #why-screen-protection .container .box-third.second .people img { width: 105px; } #why-screen-protection .container .box-third.second .people img.grow { width: 121px; } #why-screen-protection .container .box-third.third .red-border { width: 360px; } #why-screen-protection .container .box-third.third .red-border .gray-box { width: 328px; } #why-screen-protection .container .box-third.third .red-border .gray-box img { padding: 30px 0; } #why-screen-protection .container .box-third.third .red-border .gray-box h1 { font-size: 110px; } } @media (max-width: 767px) { #why-screen-protection .title .gray-bar { height: 19px; } #why-screen-protection .title .red-bar { height: 41px; } #why-screen-protection .title .text-banner { margin: -50px auto 0; width: 300px; } #why-screen-protection .title h2 { margin: -44px 0 25px; font-size: 24px; } #why-screen-protection .container { width: 300px; margin: 0 auto; text-align: center; padding: 0; } #why-screen-protection .container h2 { font-size: 40px; font-weight: 400; margin: 80px 0 40px; } #why-screen-protection .container .box-third { width: 300px; height: 410px; display: inline-block; vertical-align: middle; } #why-screen-protection .container .box-third.first .circle { margin: 0 auto; } #why-screen-protection .container .box-third.first h1 { margin: -220px 0 100px; font-size: 150px; font-weight: 700; } #why-screen-protection .container .box-third.first h1 sup { font-size: 50px; font-weight: 700; top: -70px; } #why-screen-protection .container .box-third.first p { font-size: 22px; line-height: 1.2; } #why-screen-protection .container .box-third.second .people img { display: inline-block; margin: 0 8px 0; vertical-align: middle; transition: all 0.25s ease-in-out; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; width: 78px; } #why-screen-protection .container .box-third.second .people img.grow { width: 121px; margin: -20px 0; } #why-screen-protection .container .box-third.second p.red-text { font-size: 22px; color: #CF2A3C; margin: 25px 0 0; line-height: 1.2; } #why-screen-protection .container .box-third.second p.red-text strong { font-size: 32px; } #why-screen-protection .container .box-third.second p { font-size: 22px; line-height: 1.2; } #why-screen-protection .container .box-third.third .red-border { width: 300px; border: 8px solid #CF2A3C; margin: 0 auto; } #why-screen-protection .container .box-third.third .red-border .gray-box { width: 268px; background-color: #4D4D54; margin: 8px; } #why-screen-protection .container .box-third.third .red-border .gray-box img { padding: 30px 0; margin: 0 auto; } #why-screen-protection .container .box-third.third .red-border .gray-box h1 { color: #fff; font-size: 90px; font-weight: 700; margin-bottom: 10px; } #why-screen-protection .container .box-third.third .red-border .gray-box p { color: #fff; margin: 0; font-size: 26px; font-weight: 500; padding-bottom: 30px; line-height: 1.2; } #why-screen-protection .container .btn.btn-special { background: transparent; border: 1px solid #4D4D54; display: block; margin: 0 auto; } #why-screen-protection .container .legal { font-size: 10px; margin: 20px 0; } } .fixed-nav { width: 100%; background-color: #4D4D54; height: 54px; } .fixed-nav .fixed-box { width: 100%; height: 100%; background-color: #4D4D54; height: 54px; } .fixed-nav .fixed-box.fixed { position: fixed; top: 0; z-index: 100; } .fixed-nav .fixed-box.transparent { background-color: rgba(77, 77, 84, 0.7); } .fixed-nav .fixed-box ul { width: 940px; margin: 0 auto; text-align: center; } .fixed-nav .fixed-box ul li { color: #fff !important; list-style: none; display: inline-block; vertical-align: middle; padding: 10px 62px; margin: 0; } .fixed-nav .fixed-box ul li:first-of-type { padding-left: 0; } .fixed-nav .fixed-box ul li:last-of-type { padding-right: 0; } .fixed-nav .fixed-box ul li a { color: #fff; padding: 16px 0; } .fixed-nav .fixed-box ul li a:hover { text-decoration: none; } .fixed-nav .fixed-box ul li a.selected span { color: #fff; border-bottom: 3px solid #CF2A3C; } .fixed-nav .fixed-box ul li a.invisibleshield .is-shield { display: inline-block; vertical-align: middle; margin-right: 10px; } @media (max-width: 970px) { .fixed-nav { display: none !important; } } #about-invisibleshield .container { width: 1280px; margin: 0 auto; text-align: center; padding: 0; } #about-invisibleshield .container .info .is-logo { margin: 0 auto; padding: 60px 0 30px; max-width: 100%; } #about-invisibleshield .container .info h2 { width: 545px; margin: 0 auto 30px; font-size: 30px; } #about-invisibleshield .container .comparisons { width: 100%; overflow: auto; margin: 50px 0 0; display: block !important; } #about-invisibleshield .container .comparisons .comparison { width: 426.66px; float: left; /*.cd-image-label { position: absolute; top: 50%; right: -100px; color: #4d4d54; padding: 1em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; opacity: 0; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0.3s 0.7s; -moz-transition: -moz-transform 0.3s 0.7s, opacity 0.3s 0.7s; transition: transform 0.3s 0.7s, opacity 0.3s 0.7s; &.is-hidden { visibility: hidden; } }*/ /*.is-visible .cd-image-label { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); }*/ } #about-invisibleshield .container .comparisons .comparison .with { display: inline-block; vertical-align: middle; width: 65px; margin-right: -10px; } #about-invisibleshield .container .comparisons .comparison .without { display: inline-block; vertical-align: middle; width: 65px; text-align: left; margin-left: -10px; margin-bottom: 0; line-height: 1.2; } #about-invisibleshield .container .comparisons .comparison .cd-image-container { position: relative; width: 100%; max-width: 290px; margin: 0em auto; } #about-invisibleshield .container .comparisons .comparison .cd-image-container img { display: block; max-width: 100%; } @media (max-width: 970px) { #about-invisibleshield .container .comparisons .comparison .cd-image-container { max-width: 180px; } } #about-invisibleshield .container .comparisons .comparison .cd-resize-img { position: absolute; top: 0; left: 0; width: 0; height: 100%; overflow: hidden; border-right: 1px solid #cf2b3c; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; /*.cd-image-label { right: auto; left: -100px; }*/ } #about-invisibleshield .container .comparisons .comparison .cd-resize-img img { position: absolute; left: 0; top: 0; display: block; height: 100%; width: auto; max-width: none !important; } #about-invisibleshield .container .comparisons .comparison .is-visible .cd-resize-img { width: 50%; /* bounce in animation of the modified image */ -webkit-animation: cd-bounce-in 0.7s; -moz-animation: cd-bounce-in 0.7s; animation: cd-bounce-in 0.7s; } @-webkit-keyframes cd-bounce-in { 0% { width: 0; } 60% { width: 55%; } 100% { width: 50%; } } @-moz-keyframes cd-bounce-in { 0% { width: 0; } 60% { width: 55%; } 100% { width: 50%; } } @keyframes cd-bounce-in { 0% { width: 0; } 60% { width: 55%; } 100% { width: 50%; } } #about-invisibleshield .container .comparisons .comparison .cd-handle { position: absolute; height: 30px; width: 40px; /* center the element */ left: 50%; top: 50%; margin-left: -20px; margin-top: -15px; background: url("/media/zagg/images/invisibleshield/glass-curve/slide.png") no-repeat center center; cursor: move; opacity: 0; -webkit-transform: translate3d(0, 0, 0) scale(0); -moz-transform: translate3d(0, 0, 0) scale(0); -ms-transform: translate3d(0, 0, 0) scale(0); -o-transform: translate3d(0, 0, 0) scale(0); transform: translate3d(0, 0, 0) scale(0); } @media (max-width: 970px) { #about-invisibleshield .container .comparisons .comparison .cd-handle { visibility: hidden; } } #about-invisibleshield .container .comparisons .comparison .is-visible .cd-handle { opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale(1); -moz-transform: translate3d(0, 0, 0) scale(1); -ms-transform: translate3d(0, 0, 0) scale(1); -o-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0s 0.7s; -moz-transition: -moz-transform 0.3s 0.7s, opacity 0s 0.7s; transition: transform 0.3s 0.7s, opacity 0s 0.7s; } #about-invisibleshield .container .comparisons .comparison .cd-image-container { max-width: 258px; display: inline-block; vertical-align: middle; } #about-invisibleshield .container .warranty { width: 940px; margin: 60px auto 40px; } #about-invisibleshield .container .warranty .warranty-logo { display: inline-block; vertical-align: middle; margin: 0 60px 0 100px; } #about-invisibleshield .container .warranty .warranty-text { display: inline-block; vertical-align: middle; text-align: left; width: 570px; margin: 0 98px 0 0; } #about-invisibleshield .container .warranty .warranty-text p { font-size: 19px; margin: 0 0 3px; font-weight: 200; } #about-invisibleshield .container .warranty .warranty-text p strong { font-size: 20px; } #about-invisibleshield .videos { width: 100%; overflow: auto; max-width: 1920px; margin: 0 auto; } #about-invisibleshield .videos .video { width: 33.33%; float: left; position: relative; background-color: #4D4D54; height: auto; max-width: 100%; } #about-invisibleshield .videos .video:hover img { opacity: 0; } #about-invisibleshield .videos .video video { width: 100%; position: absolute; top: 0; left: 0; } #about-invisibleshield .videos .video img { width: 100%; position: relative; z-index: 1; opacity: 1; transition: opacity 0.25s ease-in-out; -webkit-transition: opacity 0.25s ease-in-out; -moz-transition: opacity 0.25s ease-in-out; } #about-invisibleshield .videos .video h1, #about-invisibleshield .videos .video h2 { color: #fff; text-align: center; width: 100%; } #about-invisibleshield .videos .video h1 { bottom: 30px; font-weight: 700; font-size: 58px; margin: 10px auto 0; } #about-invisibleshield .videos .video h2 { font-size: 32px; font-weight: 400; margin: 0 auto 10px; } @media (max-width: 1280px) { #about-invisibleshield .container { width: 970px; } #about-invisibleshield .container .comparisons .comparison { width: 323.33px; } #about-invisibleshield .container .comparisons .comparison .cd-image-container { max-width: 140px; } } @media (max-width: 970px) { #about-invisibleshield .container { width: 740px; margin: 0 auto; text-align: center; padding: 0; } #about-invisibleshield .container .comparisons { display: none !important; } #about-invisibleshield .container .warranty { width: 740px; margin: 10px auto 40px; } #about-invisibleshield .container .warranty .warranty-logo { margin: 0 30px 0 10px; } #about-invisibleshield .container .warranty .warranty-text { margin: 0 10px 0 0; } #about-invisibleshield .videos .video { width: 426.66px; float: none; margin: 0 auto 20px; } #about-invisibleshield .videos .video:hover img { opacity: 1; } } @media (max-width: 767px) { #about-invisibleshield .container { width: 300px; margin: 0 auto; text-align: center; padding: 0; } #about-invisibleshield .container .info .is-logo { padding: 40px 0 30px; } #about-invisibleshield .container .info h2 { width: 300px; } #about-invisibleshield .container .comparisons { display: none; } #about-invisibleshield .container .warranty { width: 300px; } #about-invisibleshield .container .warranty .warranty-logo { margin: 20px auto; } #about-invisibleshield .container .warranty .warranty-text { text-align: center; width: 300px; margin: 0 auto; } #about-invisibleshield .videos .video { width: 300px; float: none; margin: 0 auto 20px; } } #top-features { width: 100%; position: relative; overflow: hidden; } #top-features .backgrounds { width: 100%; position: absolute; overflow: hidden; background-color: #FFF; } #top-features .backgrounds #bg-image { width: 100%; height: 100%; background-attachment: fixed; background-size: cover; background-position: center center; transition: background-image 0.3s ease-out; -webkit-transition: background-image 0.3s ease-out; -moz-transition: background-image 0.3s ease-out; -o-transition: background-image 0.3s ease-out; } #top-features .backgrounds #bg-image.military { background-image: url("/media/zagg/images/landing-pages/invisibleshield/full-military-grade-bg.jpg"); } #top-features .backgrounds #bg-image.clarity { background-image: url("/media/zagg/images/landing-pages/invisibleshield/full-clarity-bg.jpg"); } #top-features .backgrounds #bg-image.precision { background-image: url("/media/zagg/images/landing-pages/invisibleshield/full-precision-bg.jpg"); } #top-features .backgrounds #bg-image.smudge { background-image: url("/media/zagg/images/landing-pages/invisibleshield/full-smudge-bg.jpg"); } #top-features .backgrounds #bg-image.warrantybox { background-image: url("/media/zagg/images/landing-pages/invisibleshield/full-warranty-bg.jpg"); } #top-features .backgrounds #bg-image:after { position: absolute; width: 0; height: 0; overflow: hidden; z-index: -1; content: url("/media/zagg/images/landing-pages/invisibleshield/full-military-grade-bg.jpg") url("/media/zagg/images/landing-pages/invisibleshield/full-clarity-bg.jpg") url("/media/zagg/images/landing-pages/invisibleshield/full-precision-bg.jpg") url("/media/zagg/images/landing-pages/invisibleshield/full-smudge-bg.jpg") url("/media/zagg/images/landing-pages/invisibleshield/full-warranty-bg.jpg"); } #top-features .backgrounds.fixed { position: fixed; top: 0; left: 0; } #top-features .backgrounds.bottom { position: absolute; bottom: 0; top: auto; left: 0; } #top-features .backgrounds img { width: 100%; opacity: 0; transition: opacity 0.2s ease-in-out; -webkit-transition: opacity 0.2s ease-in-out; -moz-transition: opacity 0.2s ease-in-out; -o-transition: opacity 0.2s ease-in-out; position: absolute; top: 0; } #top-features .backgrounds img.active { opacity: 1; } #top-features .container { width: 940px; margin: 0 auto; padding: 0; position: relative; } #top-features .container .navigation { width: 100%; position: absolute; top: 0; left: 0; } #top-features .container .navigation.fixed { width: 940px; position: fixed; top: 0; left: 50%; margin-left: -470px; } #top-features .container .navigation.bottom { position: absolute; bottom: 0; left: 0; margin: 0; top: auto; } #top-features .container .navigation #left-bar { width: 50px; height: 100%; position: absolute; top: 0; left: 0; } #top-features .container .navigation #left-bar .top-bar { width: 1px; background-color: #fff; margin: 0 auto; display: block; transition: all 0.6s ease-in-out; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; } #top-features .container .navigation #left-bar .icon { width: 35px; height: 35px; margin: 15px auto; display: block; background-repeat: no-repeat; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; } #top-features .container .navigation #left-bar .bottom-bar { width: 1px; background-color: #fff; margin: 0 auto; display: block; transition: all 0.6s ease-in-out; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; } #top-features .container .navigation #left-bar.military .top-bar { height: 16%; } #top-features .container .navigation #left-bar.military .icon { background-image: url("/media/zagg/images/landing-pages/invisibleshield/icon-military.png"); } #top-features .container .navigation #left-bar.military .bottom-bar { height: 84%; } #top-features .container .navigation #left-bar.clarity .top-bar { height: 32%; } #top-features .container .navigation #left-bar.clarity .icon { background-image: url("/media/zagg/images/landing-pages/invisibleshield/icon-clarity.png"); } #top-features .container .navigation #left-bar.clarity .bottom-bar { height: 68%; } #top-features .container .navigation #left-bar.precision .top-bar { height: 48%; } #top-features .container .navigation #left-bar.precision .icon { background-image: url("/media/zagg/images/landing-pages/invisibleshield/icon-precision.png"); } #top-features .container .navigation #left-bar.precision .bottom-bar { height: 52%; } #top-features .container .navigation #left-bar.smudge .top-bar { height: 64%; } #top-features .container .navigation #left-bar.smudge .icon { background-image: url("/media/zagg/images/landing-pages/invisibleshield/icon-smudge.png"); } #top-features .container .navigation #left-bar.smudge .bottom-bar { height: 36%; } #top-features .container .navigation #left-bar.warrantybox .top-bar { height: 80%; } #top-features .container .navigation #left-bar.warrantybox .icon { background-image: url("/media/zagg/images/landing-pages/invisibleshield/icon-warranty.png"); } #top-features .container .navigation #left-bar.warrantybox .bottom-bar { height: 20%; } #top-features .container .navigation .circle-nav { width: 30px; height: 100px; position: absolute; right: 0; top: 50%; margin-top: -50px; text-align: center; } #top-features .container .navigation .circle-nav span { width: 8px; height: 8px; padding: 0; background-color: #fff; border-radius: 50%; display: block; margin: 8px auto; opacity: 0.8; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; cursor: pointer; } #top-features .container .navigation .circle-nav span.active { padding: 10px; opacity: 1; } #top-features .container .scroll-box { height: 1FFFpx; margin-left: 60px; width: 390px; } #top-features .container .scroll-box img.title { margin-bottom: 15px; } #top-features .container .scroll-box h2 { color: #fff; font-size: 32px; font-weight: 400; } #top-features .container .scroll-box p { color: #fff; font-size: 20px; font-weight: 400; } #top-features .container .scroll-box#military { padding-top: 190px; } @media (max-width: 970px) { #top-features { width: 100%; position: relative; overflow: hidden; } #top-features .container { width: 740px; } #top-features .container .navigation.fixed { width: 740px; position: fixed; top: 0; left: 50%; margin-left: -370px; } #top-features .container .navigation.bottom { position: absolute; bottom: 0; left: 0; margin: 0; top: auto; } } @media (max-width: 767px) { #top-features { width: 100%; position: relative; overflow: hidden; } #top-features .container { width: 300px; } #top-features .container .navigation { display: none; } #top-features .container .navigation.fixed { width: 300px; position: fixed; top: 0; left: 50%; margin-left: -150px; } #top-features .container .navigation.bottom { position: absolute; bottom: 0; left: 0; margin: 0; top: auto; } #top-features .container .scroll-box { margin-left: 0; width: 300px; } #top-features .container .scroll-box .info-box { background: rgba(0, 0, 0, 0.7); padding: 10px; text-align: center; } #top-features .container .scroll-box img.title { margin: 0 auto; margin-bottom: 15px; max-width: 100%; } #top-features .container .scroll-box h2 { color: #fff; font-size: 22px; font-weight: 400; } #top-features .container .scroll-box p { color: #fff; font-size: 16px; font-weight: 400; } #top-features .container .scroll-box img { margin: 0 auto; } #top-features .container .scroll-box#military { padding-top: 190px; } } #easy-application { width: 100%; margin-bottom: -200px; } #easy-application .container { width: 940px; position: relative; z-index: 10; margin: 0 auto; } #easy-application .container .info { padding-top: 60px; text-align: center; } #easy-application .container .info h3 { font-size: 22px; font-weight: 500; } #easy-application .container .info h2 { font-weight: 500; font-size: 34px; margin: 20px 0; } #easy-application .container .info p { font-size: 20px; font-weight: 200; } #easy-application .container .info .btn.btn-special { background: transparent; border: 1px solid #4D4D54; } #easy-application .install-video-box { width: 100%; position: relative; top: -200px; z-index: 1; background: #fff; display: block !important; } #easy-application .install-video-box #install-video { width: 100%; background: #fff; } @media (max-width: 1280px) { #easy-application { margin-bottom: -130px; } #easy-application .install-video-box { top: -130px; } } @media (max-width: 970px) { #easy-application { margin-bottom: -40px; } #easy-application .container { width: 740px; } #easy-application .install-video-box { top: -40px; } } @media (max-width: 767px) { #easy-application { margin-bottom: -30px; } #easy-application .container { width: 300px; } }