html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block } body { line-height: 1 } ol, ul { list-style: none } blockquote, q { quotes: none } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none } table { border-collapse: collapse; border-spacing: 0; color:#fff; } .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0 } .slick-list:focus { outline: none } .slick-list.dragging { cursor: pointer; cursor: hand } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } .slick-track { position: relative; top: 0; left: 0; display: block } .slick-track:before, .slick-track:after { display: table; content: '' } .slick-track:after { clear: both } .slick-loading .slick-track { visibility: hidden } .slick-slide { display: none; float: left; height: 100%; min-height: 1px } [dir='rtl'] .slick-slide { float: right } .slick-slide img { display: block } .slick-slide.slick-loading img { display: none } .slick-slide.dragging img { pointer-events: none } .slick-initialized .slick-slide { display: block } .slick-loading .slick-slide { visibility: hidden } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent } .slick-arrow.slick-hidden { display: none } .slick-dotted.slick-slider { margin-bottom: 30px } .slick-dots { position: absolute; bottom: -25px; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center } .slick-dots li { position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 5px; padding: 0; cursor: pointer } .slick-dots li button { font-size: 0; line-height: 0; display: block; width: 20px; height: 20px; padding: 5px; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent } .slick-dots li button:hover, .slick-dots li button:focus { outline: none } .slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1 } .slick-dots li button:before { font-family: 'slick'; font-size: 6px; line-height: 20px; position: absolute; top: 0; left: 0; width: 20px; height: 20px; content: '•'; text-align: center; opacity: .25; color: black; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .slick-dots li.slick-active button:before { opacity: .75; color: black } @font-face { font-family: 'HelveticaNeueLTStd-Cn'; src: url("../fonts/HelveticaNeueLTStd-Cn.eot?#iefix") format("embedded-opentype"), url("../fonts/HelveticaNeueLTStd-Cn.otf") format("opentype"), url("../fonts/HelveticaNeueLTStd-Cn.woff") format("woff"), url("../fonts/HelveticaNeueLTStd-Cn.ttf") format("truetype"), url("../fonts/HelveticaNeueLTStd-Cn.svg#HelveticaNeueLTStd-Cn") format("svg"); font-weight: normal; font-style: normal } @font-face { font-family: 'HelveticaNeueLTStd-ThCn'; src: url("../fonts/HelveticaNeueLTStd-ThCn.eot?#iefix") format("embedded-opentype"), url("../fonts/HelveticaNeueLTStd-ThCn.otf") format("opentype"), url("../fonts/HelveticaNeueLTStd-ThCn.woff") format("woff"), url("../fonts/HelveticaNeueLTStd-ThCn.ttf") format("truetype"), url("../fonts/HelveticaNeueLTStd-ThCn.svg#HelveticaNeueLTStd-ThCn") format("svg"); font-weight: normal; font-style: normal } @font-face { font-family: "Roboto"; src: url("../fonts/Roboto-Light_2.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-Light_2.otf") format("opentype"), url("../fonts/Roboto-Light_2.woff") format("woff"), url("../fonts/Roboto-Light_2.ttf") format("truetype"), url("../fonts/Roboto-Light_2.svg#Roboto-Light_2") format("svg"); font-weight: normal; font-style: normal } @font-face { font-family: "RobotoBold"; src: url("../fonts/Roboto-Bold_2.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-Bold_2.otf") format("opentype"), url("../fonts/Roboto-Bold_2.woff") format("woff"), url("../fonts/Roboto-Bold_2.ttf") format("truetype"), url("../fonts/Roboto-Bold_2.svg#Roboto-Bold_2") format("svg"); font-weight: normal; font-style: normal } @media all and (max-width: 767px) { .desktop-only { display: none } } @media all and (min-width: 768px) { .mobile-only { display: none } } .clearfix { clear: both } .text-center { text-align: center } .img-responsive { max-width: 100%; height: auto } hr { border-top: 1px solid #f3f3f3; border-bottom: none } .row { overflow: hidden } .col { float: left } .mb-50 { margin-bottom: 50px } .only-desktop { display: block } @media all and (max-width: 767px) { .only-desktop { display: none !important } } .only-mobile { display: block } @media all and (min-width: 768px) { .only-mobile { display: none !important } } div#preloader { position: fixed; left: 0; top: 0; z-index: 999; width: 100%; height: 100%; overflow: visible; background: #333 } .cssload-thecube { width: 73px; height: 73px; margin: 0 auto; top: 50%; margin-top: -36px; position: relative; transform: rotateZ(45deg); -o-transform: rotateZ(45deg); -ms-transform: rotateZ(45deg); -webkit-transform: rotateZ(45deg); -moz-transform: rotateZ(45deg) } .cssload-thecube .cssload-cube { position: relative; transform: rotateZ(45deg); -o-transform: rotateZ(45deg); -ms-transform: rotateZ(45deg); -webkit-transform: rotateZ(45deg); -moz-transform: rotateZ(45deg) } .cssload-thecube .cssload-cube { float: left; width: 50%; height: 50%; position: relative; transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1) } .cssload-thecube .cssload-cube:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #2ba0c7; animation: cssload-fold-thecube 2.76s infinite linear both; -o-animation: cssload-fold-thecube 2.76s infinite linear both; -ms-animation: cssload-fold-thecube 2.76s infinite linear both; -webkit-animation: cssload-fold-thecube 2.76s infinite linear both; -moz-animation: cssload-fold-thecube 2.76s infinite linear both; transform-origin: 100% 100%; -o-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100% } .cssload-thecube .cssload-c2 { transform: scale(1.1) rotateZ(90deg); -o-transform: scale(1.1) rotateZ(90deg); -ms-transform: scale(1.1) rotateZ(90deg); -webkit-transform: scale(1.1) rotateZ(90deg); -moz-transform: scale(1.1) rotateZ(90deg) } .cssload-thecube .cssload-c3 { transform: scale(1.1) rotateZ(180deg); -o-transform: scale(1.1) rotateZ(180deg); -ms-transform: scale(1.1) rotateZ(180deg); -webkit-transform: scale(1.1) rotateZ(180deg); -moz-transform: scale(1.1) rotateZ(180deg) } .cssload-thecube .cssload-c4 { transform: scale(1.1) rotateZ(270deg); -o-transform: scale(1.1) rotateZ(270deg); -ms-transform: scale(1.1) rotateZ(270deg); -webkit-transform: scale(1.1) rotateZ(270deg); -moz-transform: scale(1.1) rotateZ(270deg) } .cssload-thecube .cssload-c2:before { animation-delay: 0.35s; -o-animation-delay: 0.35s; -ms-animation-delay: 0.35s; -webkit-animation-delay: 0.35s; -moz-animation-delay: 0.35s } .cssload-thecube .cssload-c3:before { animation-delay: 0.69s; -o-animation-delay: 0.69s; -ms-animation-delay: 0.69s; -webkit-animation-delay: 0.69s; -moz-animation-delay: 0.69s } .cssload-thecube .cssload-c4:before { animation-delay: 1.04s; -o-animation-delay: 1.04s; -ms-animation-delay: 1.04s; -webkit-animation-delay: 1.04s; -moz-animation-delay: 1.04s } @keyframes cssload-fold-thecube { 0%, 10% { transform: perspective(136px) rotateX(-180deg); opacity: 0 } 25%, 75% { transform: perspective(136px) rotateX(0deg); opacity: 1 } 90%, 100% { transform: perspective(136px) rotateY(180deg); opacity: 0 } } @-o-keyframes cssload-fold-thecube { 0%, 10% { -o-transform: perspective(136px) rotateX(-180deg); opacity: 0 } 25%, 75% { -o-transform: perspective(136px) rotateX(0deg); opacity: 1 } 90%, 100% { -o-transform: perspective(136px) rotateY(180deg); opacity: 0 } } @-ms-keyframes cssload-fold-thecube { 0%, 10% { -ms-transform: perspective(136px) rotateX(-180deg); opacity: 0 } 25%, 75% { -ms-transform: perspective(136px) rotateX(0deg); opacity: 1 } 90%, 100% { -ms-transform: perspective(136px) rotateY(180deg); opacity: 0 } } @-webkit-keyframes cssload-fold-thecube { 0%, 10% { -webkit-transform: perspective(136px) rotateX(-180deg); opacity: 0 } 25%, 75% { -webkit-transform: perspective(136px) rotateX(0deg); opacity: 1 } 90%, 100% { -webkit-transform: perspective(136px) rotateY(180deg); opacity: 0 } } @-moz-keyframes cssload-fold-thecube { 0%, 10% { -moz-transform: perspective(136px) rotateX(-180deg); opacity: 0 } 25%, 75% { -moz-transform: perspective(136px) rotateX(0deg); opacity: 1 } 90%, 100% { -moz-transform: perspective(136px) rotateY(180deg); opacity: 0 } } .chart { position: relative; display: inline-block; width: 150px; height: 150px; margin-bottom: 15px; text-align: center; top: 0 } .chart span { font-size: 50px; color: #656565; font-family: "FrutigerLTStd-Bold"; position: absolute; width: 100%; z-index: 1; left: 0; display: block; text-align: center; white-space: nowrap; transition-property: all; transition-duration: 0.2s; transition-timing-function: ease-out; top: 5px } .chart canvas { position: absolute; top: 0; left: 0 } .percent { display: inline-block; line-height: 150px; z-index: 2 } .percent:after { content: '%'; margin-left: 0.1em; font-size: .8em } .span6 { float: left; width: 50% } @keyframes airwheel-remote-arc1 { 0% { transform: scale(0.5); opacity: 1 } 100% { transform: scale(1.1); opacity: 0 } } @-webkit-keyframes airwheel-remote-arc1 { 0% { transform: scale(0.5); opacity: 1 } 100% { transform: scale(1.1); opacity: 0 } } .animated { animation-duration: 1s; animation-fill-mode: both } .animated.infinite { animation-iteration-count: infinite } .animated.hinge { animation-duration: 2s } .animated.flipOutX, .animated.flipOutY, .animated.bounceIn, .animated.bounceOut { animation-duration: .75s } @keyframes bounce { from, 20%, 53%, 80%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 0, 0) } 40%, 43% { animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translate3d(0, -30px, 0) } 70% { animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translate3d(0, -15px, 0) } 90% { transform: translate3d(0, -4px, 0) } } .bounce { animation-name: bounce; transform-origin: center bottom } @keyframes flash { from, 50%, to { opacity: 1 } 25%, 75% { opacity: 0 } } .flash { animation-name: flash } @keyframes pulse { from { transform: scale3d(1, 1, 1) } 50% { transform: scale3d(1.05, 1.05, 1.05) } to { transform: scale3d(1, 1, 1) } } .pulse { animation-name: pulse } @keyframes rubberBand { from { transform: scale3d(1, 1, 1) } 30% { transform: scale3d(1.25, 0.75, 1) } 40% { transform: scale3d(0.75, 1.25, 1) } 50% { transform: scale3d(1.15, 0.85, 1) } 65% { transform: scale3d(0.95, 1.05, 1) } 75% { transform: scale3d(1.05, 0.95, 1) } to { transform: scale3d(1, 1, 1) } } .rubberBand { animation-name: rubberBand } @keyframes shake { from, to { transform: translate3d(0, 0, 0) } 10%, 30%, 50%, 70%, 90% { transform: translate3d(-10px, 0, 0) } 20%, 40%, 60%, 80% { transform: translate3d(10px, 0, 0) } } .shake { animation-name: shake } @keyframes headShake { 0% { transform: translateX(0) } 6.5% { transform: translateX(-6px) rotateY(-9deg) } 18.5% { transform: translateX(5px) rotateY(7deg) } 31.5% { transform: translateX(-3px) rotateY(-5deg) } 43.5% { transform: translateX(2px) rotateY(3deg) } 50% { transform: translateX(0) } } .headShake { animation-timing-function: ease-in-out; animation-name: headShake } @keyframes swing { 20% { transform: rotate3d(0, 0, 1, 15deg) } 40% { transform: rotate3d(0, 0, 1, -10deg) } 60% { transform: rotate3d(0, 0, 1, 5deg) } 80% { transform: rotate3d(0, 0, 1, -5deg) } to { transform: rotate3d(0, 0, 1, 0deg) } } .swing { transform-origin: top center; animation-name: swing } @keyframes tada { from { transform: scale3d(1, 1, 1) } 10%, 20% { transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg) } 30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg) } 40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg) } to { transform: scale3d(1, 1, 1) } } .tada { animation-name: tada } @keyframes wobble { from { transform: none } 15% { transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg) } 30% { transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg) } 45% { transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg) } 60% { transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg) } 75% { transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg) } to { transform: none } } .wobble { animation-name: wobble } @keyframes jello { from, 11.1%, to { transform: none } 22.2% { transform: skewX(-12.5deg) skewY(-12.5deg) } 33.3% { transform: skewX(6.25deg) skewY(6.25deg) } 44.4% { transform: skewX(-3.125deg) skewY(-3.125deg) } 55.5% { transform: skewX(1.5625deg) skewY(1.5625deg) } 66.6% { transform: skewX(-0.78125deg) skewY(-0.78125deg) } 77.7% { transform: skewX(0.39062deg) skewY(0.39062deg) } 88.8% { transform: skewX(-0.19531deg) skewY(-0.19531deg) } } .jello { animation-name: jello; transform-origin: center } @keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) } 0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3) } 20% { transform: scale3d(1.1, 1.1, 1.1) } 40% { transform: scale3d(0.9, 0.9, 0.9) } 60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03) } 80% { transform: scale3d(0.97, 0.97, 0.97) } to { opacity: 1; transform: scale3d(1, 1, 1) } } .bounceIn { animation-name: bounceIn } @keyframes bounceInDown { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) } 0% { opacity: 0; transform: translate3d(0, -3000px, 0) } 60% { opacity: 1; transform: translate3d(0, 25px, 0) } 75% { transform: translate3d(0, -10px, 0) } 90% { transform: translate3d(0, 5px, 0) } to { transform: none } } .bounceInDown { animation-name: bounceInDown } @keyframes bounceInLeft { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) } 0% { opacity: 0; transform: translate3d(-3000px, 0, 0) } 60% { opacity: 1; transform: translate3d(25px, 0, 0) } 75% { transform: translate3d(-10px, 0, 0) } 90% { transform: translate3d(5px, 0, 0) } to { transform: none } } .bounceInLeft { animation-name: bounceInLeft } @keyframes bounceInRight { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) } from { opacity: 0; transform: translate3d(3000px, 0, 0) } 60% { opacity: 1; transform: translate3d(-25px, 0, 0) } 75% { transform: translate3d(10px, 0, 0) } 90% { transform: translate3d(-5px, 0, 0) } to { transform: none } } .bounceInRight { animation-name: bounceInRight } @keyframes bounceInUp { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) } from { opacity: 0; transform: translate3d(0, 3000px, 0) } 60% { opacity: 1; transform: translate3d(0, -20px, 0) } 75% { transform: translate3d(0, 10px, 0) } 90% { transform: translate3d(0, -5px, 0) } to { transform: translate3d(0, 0, 0) } } .bounceInUp { animation-name: bounceInUp } @keyframes bounceOut { 20% { transform: scale3d(0.9, 0.9, 0.9) } 50%, 55% { opacity: 1; transform: scale3d(1.1, 1.1, 1.1) } to { opacity: 0; transform: scale3d(0.3, 0.3, 0.3) } } .bounceOut { animation-name: bounceOut } @keyframes bounceOutDown { 20% { transform: translate3d(0, 10px, 0) } 40%, 45% { opacity: 1; transform: translate3d(0, -20px, 0) } to { opacity: 0; transform: translate3d(0, 2000px, 0) } } .bounceOutDown { animation-name: bounceOutDown } @keyframes bounceOutLeft { 20% { opacity: 1; transform: translate3d(20px, 0, 0) } to { opacity: 0; transform: translate3d(-2000px, 0, 0) } } .bounceOutLeft { animation-name: bounceOutLeft } @keyframes bounceOutRight { 20% { opacity: 1; transform: translate3d(-20px, 0, 0) } to { opacity: 0; transform: translate3d(2000px, 0, 0) } } .bounceOutRight { animation-name: bounceOutRight } @keyframes bounceOutUp { 20% { transform: translate3d(0, -10px, 0) } 40%, 45% { opacity: 1; transform: translate3d(0, 20px, 0) } to { opacity: 0; transform: translate3d(0, -2000px, 0) } } .bounceOutUp { animation-name: bounceOutUp } @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } } .fadeIn { animation-name: fadeIn } @keyframes fadeInDown { from { opacity: 0; transform: translate3d(0, -100%, 0) } to { opacity: 1; transform: none } } .fadeInDown { animation-name: fadeInDown } @keyframes fadeInDownBig { from { opacity: 0; transform: translate3d(0, -2000px, 0) } to { opacity: 1; transform: none } } .fadeInDownBig { animation-name: fadeInDownBig } @keyframes fadeInLeft { from { opacity: 0; transform: translate3d(-100%, 0, 0) } to { opacity: 1; transform: none } } .fadeInLeft { animation-name: fadeInLeft } @keyframes fadeInLeftBig { from { opacity: 0; transform: translate3d(-2000px, 0, 0) } to { opacity: 1; transform: none } } .fadeInLeftBig { animation-name: fadeInLeftBig } @keyframes fadeInRight { from { opacity: 0; transform: translate3d(100%, 0, 0) } to { opacity: 1; transform: none } } .fadeInRight { animation-name: fadeInRight } @keyframes fadeInRightBig { from { opacity: 0; transform: translate3d(2000px, 0, 0) } to { opacity: 1; transform: none } } .fadeInRightBig { animation-name: fadeInRightBig } @keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 100%, 0) } to { opacity: 1; transform: none } } .fadeInUp { animation-name: fadeInUp } @keyframes fadeInUpBig { from { opacity: 0; transform: translate3d(0, 2000px, 0) } to { opacity: 1; transform: none } } .fadeInUpBig { animation-name: fadeInUpBig } @keyframes fadeOut { from { opacity: 1 } to { opacity: 0 } } .fadeOut { animation-name: fadeOut } @keyframes fadeOutDown { from { opacity: 1 } to { opacity: 0; transform: translate3d(0, 100%, 0) } } .fadeOutDown { animation-name: fadeOutDown } @keyframes fadeOutDownBig { from { opacity: 1 } to { opacity: 0; transform: translate3d(0, 2000px, 0) } } .fadeOutDownBig { animation-name: fadeOutDownBig } @keyframes fadeOutLeft { from { opacity: 1 } to { opacity: 0; transform: translate3d(-100%, 0, 0) } } .fadeOutLeft { animation-name: fadeOutLeft } @keyframes fadeOutLeftBig { from { opacity: 1 } to { opacity: 0; transform: translate3d(-2000px, 0, 0) } } .fadeOutLeftBig { animation-name: fadeOutLeftBig } @keyframes fadeOutRight { from { opacity: 1 } to { opacity: 0; transform: translate3d(100%, 0, 0) } } .fadeOutRight { animation-name: fadeOutRight } @keyframes fadeOutRightBig { from { opacity: 1 } to { opacity: 0; transform: translate3d(2000px, 0, 0) } } .fadeOutRightBig { animation-name: fadeOutRightBig } @keyframes fadeOutUp { from { opacity: 1 } to { opacity: 0; transform: translate3d(0, -100%, 0) } } .fadeOutUp { animation-name: fadeOutUp } @keyframes fadeOutUpBig { from { opacity: 1 } to { opacity: 0; transform: translate3d(0, -2000px, 0) } } .fadeOutUpBig { animation-name: fadeOutUpBig } @keyframes flip { from { transform: perspective(400px) rotate3d(0, 1, 0, -360deg); animation-timing-function: ease-out } 40% { transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); animation-timing-function: ease-out } 50% { transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); animation-timing-function: ease-in } 80% { transform: perspective(400px) scale3d(0.95, 0.95, 0.95); animation-timing-function: ease-in } to { transform: perspective(400px); animation-timing-function: ease-in } } .animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; animation-name: flip } @keyframes flipInX { from { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); animation-timing-function: ease-in; opacity: 0 } 40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); animation-timing-function: ease-in } 60% { transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1 } 80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg) } to { transform: perspective(400px) } } .flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; animation-name: flipInX } @keyframes flipInY { from { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); animation-timing-function: ease-in; opacity: 0 } 40% { transform: perspective(400px) rotate3d(0, 1, 0, -20deg); animation-timing-function: ease-in } 60% { transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1 } 80% { transform: perspective(400px) rotate3d(0, 1, 0, -5deg) } to { transform: perspective(400px) } } .flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; animation-name: flipInY } @keyframes flipOutX { from { transform: perspective(400px) } 30% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1 } to { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0 } } .flipOutX { animation-name: flipOutX; -webkit-backface-visibility: visible !important; backface-visibility: visible !important } @keyframes flipOutY { from { transform: perspective(400px) } 30% { transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1 } to { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0 } } .flipOutY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; animation-name: flipOutY } @keyframes lightSpeedIn { from { transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0 } 60% { transform: skewX(20deg); opacity: 1 } 80% { transform: skewX(-5deg); opacity: 1 } to { transform: none; opacity: 1 } } .lightSpeedIn { animation-name: lightSpeedIn; animation-timing-function: ease-out } @keyframes lightSpeedOut { from { opacity: 1 } to { transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0 } } .lightSpeedOut { animation-name: lightSpeedOut; animation-timing-function: ease-in } @keyframes rotateIn { from { transform-origin: center; transform: rotate3d(0, 0, 1, -200deg); opacity: 0 } to { transform-origin: center; transform: none; opacity: 1 } } .rotateIn { animation-name: rotateIn } @keyframes rotateInDownLeft { from { transform-origin: left bottom; transform: rotate3d(0, 0, 1, -45deg); opacity: 0 } to { transform-origin: left bottom; transform: none; opacity: 1 } } .rotateInDownLeft { animation-name: rotateInDownLeft } @keyframes rotateInDownRight { from { transform-origin: right bottom; transform: rotate3d(0, 0, 1, 45deg); opacity: 0 } to { transform-origin: right bottom; transform: none; opacity: 1 } } .rotateInDownRight { animation-name: rotateInDownRight } @keyframes rotateInUpLeft { from { transform-origin: left bottom; transform: rotate3d(0, 0, 1, 45deg); opacity: 0 } to { transform-origin: left bottom; transform: none; opacity: 1 } } .rotateInUpLeft { animation-name: rotateInUpLeft } @keyframes rotateInUpRight { from { transform-origin: right bottom; transform: rotate3d(0, 0, 1, -90deg); opacity: 0 } to { transform-origin: right bottom; transform: none; opacity: 1 } } .rotateInUpRight { animation-name: rotateInUpRight } @keyframes rotateOut { from { transform-origin: center; opacity: 1 } to { transform-origin: center; transform: rotate3d(0, 0, 1, 200deg); opacity: 0 } } .rotateOut { animation-name: rotateOut } @keyframes rotateOutDownLeft { from { transform-origin: left bottom; opacity: 1 } to { transform-origin: left bottom; transform: rotate3d(0, 0, 1, 45deg); opacity: 0 } } .rotateOutDownLeft { animation-name: rotateOutDownLeft } @keyframes rotateOutDownRight { from { transform-origin: right bottom; opacity: 1 } to { transform-origin: right bottom; transform: rotate3d(0, 0, 1, -45deg); opacity: 0 } } .rotateOutDownRight { animation-name: rotateOutDownRight } @keyframes rotateOutUpLeft { from { transform-origin: left bottom; opacity: 1 } to { transform-origin: left bottom; transform: rotate3d(0, 0, 1, -45deg); opacity: 0 } } .rotateOutUpLeft { animation-name: rotateOutUpLeft } @keyframes rotateOutUpRight { from { transform-origin: right bottom; opacity: 1 } to { transform-origin: right bottom; transform: rotate3d(0, 0, 1, 90deg); opacity: 0 } } .rotateOutUpRight { animation-name: rotateOutUpRight } @keyframes hinge { 0% { transform-origin: top left; animation-timing-function: ease-in-out } 20%, 60% { transform: rotate3d(0, 0, 1, 80deg); transform-origin: top left; animation-timing-function: ease-in-out } 40%, 80% { transform: rotate3d(0, 0, 1, 60deg); transform-origin: top left; animation-timing-function: ease-in-out; opacity: 1 } to { transform: translate3d(0, 700px, 0); opacity: 0 } } .hinge { animation-name: hinge } @keyframes jackInTheBox { from { opacity: 0; transform: scale(0.1) rotate(30deg); transform-origin: center bottom } 50% { transform: rotate(-10deg) } 70% { transform: rotate(3deg) } to { opacity: 1; transform: scale(1) } } .jackInTheBox { animation-name: jackInTheBox } @keyframes rollIn { from { opacity: 0; transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg) } to { opacity: 1; transform: none } } .rollIn { animation-name: rollIn } @keyframes rollOut { from { opacity: 1 } to { opacity: 0; transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg) } } .rollOut { animation-name: rollOut } @keyframes zoomIn { from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3) } 50% { opacity: 1 } } .zoomIn { animation-name: zoomIn } @keyframes zoomInDown { from { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) } 60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1) } } .zoomInDown { animation-name: zoomInDown } @keyframes zoomInLeft { from { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) } 60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1) } } .zoomInLeft { animation-name: zoomInLeft } @keyframes zoomInRight { from { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) } 60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1) } } .zoomInRight { animation-name: zoomInRight } @keyframes zoomInUp { from { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) } 60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1) } } .zoomInUp { animation-name: zoomInUp } @keyframes zoomOut { from { opacity: 1 } 50% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3) } to { opacity: 0 } } .zoomOut { animation-name: zoomOut } @keyframes zoomOutDown { 40% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) } to { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform-origin: center bottom; animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1) } } .zoomOutDown { animation-name: zoomOutDown } @keyframes zoomOutLeft { 40% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0) } to { opacity: 0; transform: scale(0.1) translate3d(-2000px, 0, 0); transform-origin: left center } } .zoomOutLeft { animation-name: zoomOutLeft } @keyframes zoomOutRight { 40% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0) } to { opacity: 0; transform: scale(0.1) translate3d(2000px, 0, 0); transform-origin: right center } } .zoomOutRight { animation-name: zoomOutRight } @keyframes zoomOutUp { 40% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) } to { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform-origin: center bottom; animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1) } } .zoomOutUp { animation-name: zoomOutUp } @keyframes slideInDown { from { transform: translate3d(0, -100%, 0); visibility: visible } to { transform: translate3d(0, 0, 0) } } .slideInDown { animation-name: slideInDown } @keyframes slideInLeft { from { transform: translate3d(-100%, 0, 0); visibility: visible } to { transform: translate3d(0, 0, 0) } } .slideInLeft { animation-name: slideInLeft } @keyframes slideInRight { from { transform: translate3d(100%, 0, 0); visibility: visible } to { transform: translate3d(0, 0, 0) } } .slideInRight { animation-name: slideInRight } @keyframes slideInUp { from { transform: translate3d(0, 100%, 0); visibility: visible } to { transform: translate3d(0, 0, 0) } } .slideInUp { animation-name: slideInUp } @keyframes slideOutDown { from { transform: translate3d(0, 0, 0) } to { visibility: hidden; transform: translate3d(0, 100%, 0) } } .slideOutDown { animation-name: slideOutDown } @keyframes slideOutLeft { from { transform: translate3d(0, 0, 0) } to { visibility: hidden; transform: translate3d(-100%, 0, 0) } } .slideOutLeft { animation-name: slideOutLeft } @keyframes slideOutRight { from { transform: translate3d(0, 0, 0) } to { visibility: hidden; transform: translate3d(100%, 0, 0) } } .slideOutRight { animation-name: slideOutRight } @keyframes slideOutUp { from { transform: translate3d(0, 0, 0) } to { visibility: hidden; transform: translate3d(0, -100%, 0) } } .slideOutUp { animation-name: slideOutUp } .clear { clear: both } section { overflow: hidden; padding: 0 !important } #topVideo { position: absolute; right: 0; bottom: 0; top: 0; right: 0; width: 100%; height: 100%; background-size: 100% 100%; background-color: black; background-position: center center; background-size: contain; object-fit: cover; z-index: 3 } video::-webkit-media-controls { display: none !important } #fp-nav ul li a span, .fp-slidesNav ul li a span { width: 10px !important; height: 10px !important; background: #dedede !important; margin: -5px 0 0 -5px !important } #fp-nav ul li:hover a span, #fp-nav ul li:hover a.active span, #fp-nav ul li a.active span, #fp-nav ul li:hover a span, .fp-slidesNav ul li:hover a span { width: 14px !important; height: 14px !important; background: #dedede !important; margin: -7px 0 0 -7px !important } #back-top { position: fixed; bottom: 15px; right: 15px } #back-top a { width: 40px; display: block; text-align: center; font: 10px/100% Arial, Helvetica, sans-serif; text-transform: uppercase; text-decoration: none; color: #dedede; -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; line-height: 1.2 } #back-top a:hover { color: #ddd } #back-top span { width: 40px; height: 40px; display: block; margin-bottom: 3px; background: #ddd url(../img/up-arrow.png) no-repeat center center; background-size: 50%; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-transition: 1s; -moz-transition: 1s; transition: 1s } #back-top a:hover span { background-color: #777 } .top-slider .titles{ position:absolute; top:30%; left:55%; z-index:333; } .top-slider .titles p{ font-size: 85px; font-family: "HelveticaNeueLTStd-ThCn"; color: rgb(255, 255, 255); text-transform: uppercase; line-height: 1.176; font-weight:200; } .top-slider .titles p span{ color:#06b8e8; margin-left:20px; text-transform: lowercase; } .top-slider .box { position: absolute; bottom: 0; right: 0; z-index: 333; } .top-slider .box .box1, .top-slider .box .box2, .top-slider .box .box3, .top-slider .box .box4 { float: left; text-align: center; max-height: 95px; overflow: hidden } .top-slider .box .box1 { background: rgba(33, 194, 234, 0.7); padding: 14px 0; width: 215px } .top-slider .box .box1 h1 { font-family: "HelveticaNeueLTStd-ThCn"; color: #ffffff; font-size: 44px } .top-slider .box .box1 p { font-family: "HelveticaNeueLTStd-ThCn"; color: #ffffff; font-size: 22px; margin-top: 0px; } .top-slider .box .box2, .top-slider .box .box4 { background: rgba(0, 0, 0, 0.7); text-align: center; line-height: 95px; width: 215px } .top-slider .box .box2 p, .top-slider .box .box4 p { font-family: "HelveticaNeueLTStd-ThCn"; color: #ffffff; font-size: 44px } .top-slider .box .box3 { background: rgba(33, 194, 234, 0.7); padding: 18px 0; width: 135px } .top-slider .box .box3 img { margin: 2px auto; } @media all and (max-width: 767px) { .top-slider .mobile-only { display: block } .top-slider .fp-tableCell { height: initial !important; vertical-align: top } .top-slider .fp-tableCell .bg { width: 100%; height: auto } .top-slider .box { left: 0!important; bottom: 0!important; width: 100%; right: auto; z-index: 5555 } .top-slider .box .box1, .top-slider .box .box2 { width: 50% } .top-slider .box .box3, .top-slider .box .box4 { display: none } .top-slider .box3-mob { width: 50%; float: left; background-color: #06b8e8; color: #fff; height: 50px; padding: 5px 0 0 5px; } .top-slider .bg.mobile-only { display: block } .top-slider .mob-box { width: 100%; height: 50px; } .top-slider .box2-mob { width: 50vw; background-color: #06b8e8; text-align: center; height: 50px; float: right; line-height: 50px; font-size: 20px; font-family: "HelveticaNeueLTStd-ThCn"; } .top-slider .box2-mob p a { color: #fff; font-size: 16px; } .top-slider .box3-mob { width: 49vw; float: left; background-color: #06b8e8; color: #fff; height: 50px; padding: 5px 0 0 5px; } .top-slider .box3-mob a img { width: 38%; float: left; margin-left: 10px; } .top-slider .box3-mob a p { width: 40%; float: left; text-transform: uppercase; color: #fff; font-family: "HelveticaNeueLTStd-ThCn"; padding-left: 10px; padding-top: 5px; font-weight: 100!important; font-size: 15px; line-height: 5vw; } .top-slider .box3-mob a p span { display: block; font-weight: 900!important; } .fotorama__nav--dots { top: -7px; z-index: 9999; } .top-slider .fp-tableCell { height: initial !important; vertical-align: top } .top-slider .fp-tableCell .bg { width: 100%; height: auto; } } @media only screen and (min-width: 321px) and (max-width: 480px) { .top-slider .box3-mob a img { width: 29%; float: left; margin-left: 10px; } .top-slider .box3-mob a p { line-height: 4vw; } } .mob{display:none;} @media all and (max-width: 767px) {.mob{display:block;}.desk{display:none;}} #section1 { background: url("../img/intro/intro-bg.jpg") no-repeat center; background-size: cover } #section1.intro .titles{ position: absolute; top: 61%; left: 61%; z-index: 333; } #section1.intro .titles p{ font-size: 85px; font-family: "HelveticaNeueLTStd-ThCn"; color: rgb(255, 255, 255); text-transform: uppercase; line-height: 1.176; font-weight:200; } #section1.intro .titles p span{ color:#06b8e8; margin-left:20px; text-transform: lowercase; } #section1.intro .box { position: absolute; bottom: 0; right: 0; z-index: 333; } #section1.intro .features{position:relative;width:50vw;margin-left:50vw;margin-top:50vh;} #section1.intro .features .feat-mob{display:none;} #section1.intro .features .feat-left{float:left;margin-top:30vh;margin-right:20px;width:50%} #section1.intro .features .feat-left .feat-imgs{margin-top:40px;} #section1.intro .features .feat-left .feat-descr{margin-top:-50px;margin-right:20px;border-bottom:2px solid #fff;padding-bottom:10px;width:97%;} #section1.intro .features .feat-left .feat-descr p{color:#fff;text-align:right;font-size:26px;letter-spacing:2px;font-family: "HelveticaNeueLTStd-ThCn";} #section1.intro .features .feat-left .feat-descr p:not(:first-child){display:none;} #section1.intro .features .feat-left img{margin-right: 15px;width: 64px;border-radius:15px;display:inline-block;} #section1.intro .features .feat-left img:hover{background-color:#06b8e8;border-radius:15px;width:64px;} #section1.intro .features .feat-right{float:left;width:35%;} #section1.intro .features .feat-right .video-oeffnen{background-color:#06b8e8;color:#fff;padding:7px 25px;width:80%;margin-top:22px;cursor:pointer;} #section1.intro .features .feat-right .video-oeffnen img{display:block;float:left;margin-right: 20px;} #section1.intro .features .feat-right .video-oeffnen p{font-size:18px;text-transform:uppercase;font-family: "HelveticaNeueLTStd-ThCn";line-height:40px;} #section1.intro .carousel-indicators { position: relative; left: 0; z-index: 15; width: 100%; margin-left: 0; bottom:0!important; } .carousel-indicators .active { background-color: #06b8e8; width:64px; height:auto; } .carousel-inner .carousel-item { transition: -webkit-transform 2s ease; transition: transform 2s ease; transition: transform 2s ease, -webkit-transform 2s ease; } @media screen and (min-width: 1368px) and (max-width: 1680px) { #section1.intro .features {width: 40vw;margin-left: 47vw;margin-top: 42vh;} #section1.intro .titles {top: 60%;left: 57%;} #section1.intro .titles p {font-size: 65px;} #section1.intro .features .feat-left{margin-top:43vh;width:57%;} #section1.intro .features .feat-left img {margin-right: 10px;border-radius: 8px;width:50px;} #section1.intro .features .feat-left img:hover{border-radius:10px;width:50px;} #section1.intro .features .feat-right {margin-top: 9vh;} #section1.intro .features .feat-right > img{width:80%;} #section1.intro .features .feat-right .video-oeffnen {padding: 5px 25px;width: 90%;margin-top: 20px;} #section1.intro .features .feat-left .feat-descr p {font-size: 22px;} } @media all and (max-width: 767px) { #section1 { background: url("../img/intro/intro-mob-bg.jpg") no-repeat 100% 80%; background-size: cover; } #section1.intro .features { width: 100vw; margin-left: 0vw; margin-top: -40vh; } #section1.intro .titles p, #section1.intro .features .feat-right .video-oeffnen, #section1.intro .features .feat-left{ display:none; } #section1.intro .features .feat-mob{display:block;padding-left:10px;margin-left:20px;} #section1.intro .features .feat-mob img{display: block;margin-bottom: 10px;width: 40px;} #section1.intro .features .feat-mob p{ position:absolute; line-height: 45px; margin-top: -7vh; margin-left: 15vw; font-family: Roboto; font-size: 14px; } #section1.intro .features .feat-right { float: right; position: absolute; right: -7vw; bottom: -57vh; } #section1.intro .features .feat-right img{width:90%;} } @media all and (min-width: 321px) and (max-width: 480px) { #section1.intro .features .feat-mob{display:block;padding-left:10px;} #section1.intro .features .feat-mob .feat-imgs{margin-top: 4vh;} #section1.intro .features .feat-mob img{display:block;margin-bottom:10px;width: 35px;} #section1.intro .features .feat-mob p{line-height: 30px;} #section1.intro .features .feat-right { right: -13vw; bottom: -52vh; } #section1.intro .features .feat-right img{width:70%;} } @media all and (min-width: 320px) and (max-width: 480px){ #section1.intro .features .feat-right { right: -13vw; bottom: -50vh; } } @media all and (max-width: 319px) { #section1 { background: url("../img/intro/intro-mob-bg.jpg") no-repeat 100% 80%; background-size: cover; } #section1.intro .features { width: 100vw; margin-left: 0vw; margin-top: -40vh; } #section1.intro .titles p, #section1.intro .features .feat-right .video-oeffnen, #section1.intro .features .feat-left{ display:none; } #section1.intro .features .feat-mob{display:block;padding-left:10px;} #section1.intro .features .feat-mob img{display:block;margin-bottom:7px;width: 30px;} #section1.intro .features .feat-mob p{ position:absolute; line-height: 15px; margin-top: -7vh; margin-left: 15vw; font-family: Roboto; font-size: 14px; } #section1.intro .features .feat-right { right: -13vw; bottom: -53vh; } #section1.intro .features .feat-right img{width:70%;} } /* START SECTION 2 */ #section2.load-background { background: url("../img/testsieger/testsieger-bg.jpg") no-repeat center 0; background-size: cover; } #section2 .testsieger-cont{ width:15vw; position:absolute; top:10vh; left:65vw; } #section2 .testsieger-cont img:first-child{margin-bottom:20px;} #section2 .testsieger-cont p{ font-size:20px; color:#fff; font-family: "HelveticaNeueLTStd-ThCn"; text-align:justify; line-height:1.7; } #section2 .testsieger-cont .sp1{ font-size:16px; color:#fff; font-family: "HelveticaNeueLTStd-ThCn"; float:right; line-height:1.2; margin-top:20px; text-align:right; } #section2 .testsieger-cont .test-res{width:100%;margin-top:10vh;} #section2 .testsieger-cont .test-res img{width:25%;float:left;margin-right:10px;} #section2 .testsieger-cont .test-res p{text-align:left;font-size:13px;} #section2 .testsieger-cont .test-res .sp2{font-size:16px;display:block;text-transform:uppercase;} @media screen and (min-width: 1368px) and (max-width: 1680px) { #section2 .testsieger-cont {width: 17vw;top:15vh;} #section2 .testsieger-cont p {font-size: 17px;} } @media all and (max-width: 767px) { #section2 { height:130vh!important; } #section2.load-background { background: url("../img/testsieger/testsieger-mob-bg.jpg") no-repeat center 0; background-size: cover; } #section2 .testsieger-cont { width: 100vw; position: relative; top: 19vh; left: 0vw; } #section2 .testsieger-cont .testsieger-logo{ max-width: 60%; margin-bottom: 20px; margin-left: 37%; box-shadow: 2px 2px 2px #333; } #section2 .testsieger-cont p { font-size: 16px; color: #000; line-height: 1.6; padding: 15px; } #section2 .testsieger-cont .sp1 { color: #000; margin-top: 5px; margin-right: 15px; } #section2 .testsieger-cont .test-res { display:none; } #section2 .testsieger-cont .test-res-mob { margin-top: 12vh; } #section2 .testsieger-cont .test-res-mob img { float:left; margin-left:15px; width:17%; margin-top:20px; } #section2 .testsieger-cont .test-res-mob p { width:70%; float:left; font-size:13px; } #section2 .testsieger-cont .test-res-mob .sp2 { font-size: 22px; display: block; margin-top: 0px; } } @media screen and (min-width: 320px) and (max-width: 480px){ #section2 {height: 140vh!important;} #section2 .testsieger-cont {top: 18vh;} #section2 .testsieger-cont .test-res-mob p {width: 65%;font-size: 12px;} #section2 .testsieger-cont .test-res-mob .sp2 { font-size: 20px; margin-top: 10px; line-height: 15px; } } @media all and (max-width: 319px) { #section2 { height: 175vh!important; } #section2 .testsieger-cont { top: 22vh; } #section2 .testsieger-cont .test-res-mob p { width: 65%; font-size: 12px; } #section2 .testsieger-cont .test-res-mob .sp2 { font-size: 20px; margin-top: 10px; line-height: 15px; } } /* SECTION 3 */ #section3.load-background { background: url("../img/safety-controls/safety-controls-bg.jpg") no-repeat center 0; background-size: cover } #section3.safety-controls h2 { color: #fff; font-size: 36px; font-family: "Roboto"; text-transform: uppercase; margin-bottom:30px; } #section3 .safety-cont{widht:50vh;margin-left:50vw;} #section3.safety-controls ul li { font-size: 18px; font-family: "Roboto"; color: rgba(255, 255, 255); margin-bottom: 15px; line-height: 50px } #section3.safety-controls ul li img { float: left; margin-right: 35px; margin-top: 4px; zoom: 0.9 } @media screen and (min-width: 1368px) and (max-width: 1680px) { #section3.safety-controls ul li {font-size: 18px;margin-bottom: 10px;line-height: 45px;color: #fff;} #section3 .safety-cont {margin-top: 5vh;} } @media all and (max-width: 767px) { #section3.load-background { background: url("../img/safety-controls/safety-controls-mob-bg.jpg") no-repeat center ; background-size: cover } #section3 .safety-cont { margin-left: 0vw; padding: 15px; margin-bottom: 5vh; margin-top:10vh; } #section3.safety-controls h2 { font-size: 22px; margin-top: 6vh; position:relative; text-align:center; } #section3.safety-controls .safety-cont ul li { font-size: 16px; font-family: "Roboto"; color: rgba(255, 255, 255)!important; margin-bottom: 15px; line-height: 40px; } #section3.safety-controls ul li img { margin-right: 15px; margin-top: 0px; } } @media all and (min-width: 320px) and (max-width: 480px){ #section3.safety-controls .safety-cont ul li { font-size: 12px; line-height: 35px; color: rgb(255, 255, 255)!important; } } @media all and (max-width: 319px) { #section3.safety-controls .safety-cont ul li { font-size: 12px; line-height: 35px; color: rgb(255, 255, 255)!important; } } /* SECTION 4 */ #section4.load-background { background: url("../img/control/control-bg.jpg") no-repeat center 0; background-size: cover } #section4.control .control-cont { width:25vw; margin-left:60vw; margin-top:10vh; } #section4.control .control-cont h2{ color: #000; font-size: 30px; font-family: "Roboto"; text-transform: uppercase; margin-bottom:30px; } #section4.control .control-cont p{ color: #000; font-size: 16px; font-family: "Roboto"; line-height:1.7; margin-bottom:8vh; } #section4.control ul li { font-size: 20px; font-family: "Roboto"; color: #000; line-height: 60px; margin-top: -10px; overflow: hidden; } #section4.control ul li span{ float:left; margin-top: 30px; text-transform:uppercase; } #section4.control ul li img { margin-right: 35px; margin-top: 30px; zoom: 0.9; float:left; } @media screen and (min-width: 1368px) and (max-width: 1680px) { #section4.control .control-cont {width: 28vw;margin-left: 53vw;margin-top: 20vh;} #section4.control .control-cont h2 {font-size: 30px;margin-bottom: 10px;} #section4.control .control-cont p {margin-bottom: 8vh;font-size:15px;} #section4.control ul li img {margin-right: 20px;margin-top: 20px;width:60px;} #section4.control ul li span {margin-top: 16px;font-size:16px;} } @media all and (max-width: 767px) { #section4.load-background { background: url("../img/control/control-mob-bg.jpg") no-repeat center 0; background-size: cover } #section4.control .control-cont { width: 100vw; margin-left: 0vw; margin-top: 80vh; padding:15px; } #section4.control .control-cont .desk, #section4.control .control-cont p{ display:none; } #section4.control .control-cont .mob{display:block;margin-left:4vw;} #section4.control .control-cont h2 { color: #fff; font-size: 25px; margin-bottom: 30px; } #section4.control .control-cont h2:after { content:'*'; } #section4.control ul li span { margin-top: 10px; text-transform: uppercase; font-size: 14px; color: #fff; } #section4.control ul li img { margin-right: 20px; margin-top: 20px; zoom: 0.9; float: left; } #section4.control .tab-smart{ color:#fff; font-family:'Roboto'; font-size:14px; line-height:1.7; padding:15px; } } @media all and (min-width: 320px) and (max-width: 480px){ #section4.control .control-cont {margin-top: 80vh;} #section4.control .control-cont h2 {font-size: 20px;} #section4.control ul li span {margin-top: 10px;font-size: 12px;} #section4.control ul li img {margin-right: 15px;} #section4.control .tab-smart {font-size: 10px;} } @media all and (max-width: 319px) { #section4.control .control-cont {margin-top: 90vh;} #section4.control .control-cont h2 {font-size: 18px;} #section4.control ul li span {margin-top: 10px;font-size: 12px;} #section4.control ul li img {margin-right: 15px;} #section4.control .tab-smart {font-size: 10px;} } /* SECTION 5 */ #section5.load-background { background: url("../img/protection/protection-bg.jpg") no-repeat center 0; background-size: cover } #section5 .protection-cont { background-color: rgba(0,0,0,.4); width:22vw; position:absolute; bottom:0; left:15vw; padding:80px 40px 120px; color:#fff; border:1px solid rgba(255,255,255,.4); border-bottom:none; } #section5 .protection-cont h2{ font-size: 30px!important; font-family: "Roboto"; text-transform: uppercase; margin-bottom:30px; color:#fff; } #section5 .protection-cont p{ font-size: 16px; font-family: "Roboto"; line-height:1.7; margin-bottom:6vh; } #section5 .protection-cont ul li{ display:inline-block; } #section5 .protection-cont ul li img{ width:70px; margin-right:60px; } #section5 .protection-cont ul li:last-child img{ margin-right:0px; } @media screen and (min-width: 1368px) and (max-width: 1680px) { #section5 .protection-cont {background-color: rgba(0,0,0,.4);width: 22vw;padding: 60px 30px 100px;} #section5 .protection-cont h2 {font-size: 26px!important;margin-bottom: 30px;} #section5 .protection-cont p {font-size: 14px;margin-bottom: 5vh;} #section5 .protection-cont ul li img {width: 55px;margin-right: 60px;} } @media all and (max-width: 767px) { #section5.load-background { background: url("../img/protection/mob/protection-mob-bg.jpg") no-repeat center 0; background-size: cover } #section5 .protection-cont-mob {font-family: "Roboto";width:75%;margin-left:12.5%;margin-top:77vh;margin-bottom:5vh;} #section5 .protection-cont-mob h2{color:#fff;font-size:30px;margin-bottom:5vh;} #section5 .protection-cont-mob ul li{color:#fff;position:relative;line-height:50px;font-size:16px;margin-bottom:10px;} #section5 .protection-cont-mob ul li img{margin-right:15px;} #section5 .protection-cont-mob ul li span{position:absolute;top: 0;left: 15vw;} } @media all and (min-width: 320px) and (max-width: 480px){ #section5 .protection-cont-mob {width:80%;margin-left:10%;margin-top:80vh;} #section5 .protection-cont-mob h2{font-size:24px;} #section5 .protection-cont-mob ul li{line-height:50px;font-size:12px;} #section5 .protection-cont-mob ul li img{margin-right:15px;} #section5 .protection-cont-mob ul li span{left: 18vw;} } @media all and (max-width: 319px) { #section5 .protection-cont-mob {width:80%;margin-left:10%;margin-top:80vh;} #section5 .protection-cont-mob h2{font-size:24px;} #section5 .protection-cont-mob ul li{line-height:50px;font-size:12px;} #section5 .protection-cont-mob ul li img{margin-right:15px;} #section5 .protection-cont-mob ul li span{left: 19vw;} } /* SECTION 6 */ #section6.load-background {} /* SECTION 7 */ #section7.load-background { background: url("../img/colors/colors-bg.jpg") no-repeat center; background-size: cover } #section7 .colors-cont { width:22vw; position:absolute; color:#fff; top:32vh; left:44vw; } #section7 .colors-cont h2{ font-size: 30px; font-family: "Roboto"; text-transform: uppercase; margin-bottom:9vh; line-height:40px; color:#fff; } #section7 .colors-cont p{ font-size: 16px; font-family: "Roboto"; line-height:1.7; margin-bottom:6vh; } #section7 .colors-cont1 p{width:80%;} #section7 .colors-cont2 p{ color:#000; } #section7 .endless-river { position:absolute; bottom:0; width:100%; height:25vh; } #section7 #myUl li img{width:250px;} section.colors .slick-dots { bottom: 0; z-index: 99 } section.colors .slick-dots li { width: 17px; height: 16px; vertical-align: middle } section.colors .slick-dots li button { width: 17px; height: 16px } section.colors .slick-dots li button:before { opacity: 1; color: transparent; background: url("https://www.bluewheel.de/products/hx310/img/slider/dots.png") no-repeat center top; width: 17px; height: 16px } section.colors .slick-dots li.slick-active button:before { background-position: center -32px } section.colors .slick-dots li:hover button:before { background-position: center -16px } @media screen and (min-width: 1368px) and (max-width: 1680px) { #section7 .colors-cont {width: 25vw;top: 31vh;left: 42vw;} } @media screen and (max-width: 767px){ #section7.load-background { background: url("../img/colors/colors-mob-bg.jpg") no-repeat center; background-size: cover } #section7 .endless-river{display:none;} #section7 .colors-cont {width: 92vw;top: 45vh;left:8vw;} #section7 .colors-cont h2 {margin-bottom: 20vh;line-height: 40px;} #section7 .colors-cont p {font-size: 14px;} #section7 .colors-cont1 p {display:none;} #section7 .colors-slider {height: 35vh;margin-top: 90vh;margin-bottom: 3vh;width:80%;margin-left:10%;} } @media all and (min-width: 320px) and (max-width: 480px){ #section7 .colors-cont h2 {margin-bottom: 20vh;line-height: 36px;font-size: 26px;} #section7 .colors-cont p {font-size: 11px;} #section7 .colors-slider {height: 40vh;} #section7 .colors-cont {top: 47vh;} section.colors .slick-dots {position: absolute;bottom: -5px;width: 100vw;left: -30px;} } @media all and (max-width: 319px) { #section7 .colors-cont h2 {margin-bottom: 20vh;line-height: 32px;font-size: 22px;} #section7 .colors-cont p {font-size: 11px;} } /* SECTION 8 */ #section8.load-background { background: #F4F4F4 url("../img/music-bluetooth/musik-bg.jpg") no-repeat left center; background-size: cover } #section8 .musik-cont{width:50vw;position:absolute;bottom:0;right:5vw;} #section8 .musik-cont-overlay{width:60%;float:left;color:#fff;background-color:rgba(0,0,0,.4);padding:30px 50px;position:absolute;bottom:0;} #section8 .musik-cont-overlay h2{ font-size: 30px; font-family: "Roboto"; text-transform: uppercase; margin-bottom:5vh; color:#fff; } #section8 .musik-cont-overlay span{ font-size: 16px; font-family: "Roboto"; display:block; text-transform: lowercase; padding-top:10px; } #section8 .musik-cont-overlay p{ font-size: 14px; font-family: "Roboto"; line-height:1.7; margin-bottom:1vh; } #section8 .musik-cont-overlay .musik-left{width:60%;float:left;} #section8 .musik-cont-overlay .musik-left span{text-align:right;margin-right:30px;} #section8 .musik-cont-overlay .musik-right{width:30%;float:left;margin-top: 6.5vh;margin-left:2vw;} #section8 .musik-cont-overlay .musik-right div{width:50%;float:left;} #section8 .musik-cont-overlay .musik-right img{width:60%;float:left;margin:0 10%;} #section8 .musik-cont-overlay .musik-right span{float:left;display:block;text-transform:capitalize;font-size: 14px;} #section8 .musik-cont-right{width:40%;float:right;margin-bottom:-10px;} #section8 .musik-cont .img1_box { position: absolute; width: 0vw; left: -16vw; bottom: 5vh; } #section8 .musik-cont .img1_box .pulse1, #section8 .musik-cont .img1_box .pulse2, #section8 .musik-cont .img1_box .pulse3, #section8 .musik-cont .img1_box .pulse4 { border-radius: 100%; border: 4px #6CB6E7 solid; margin: 0 auto; display: inline-block; position: absolute; top: 57%; left: 50%; z-index: 3; animation: airwheel-remote-arc1 1.8s infinite; -webkit-animation: airwheel-remote-arc1 1.8s infinite } #section8 .musik-cont .img1_box .pulse1 { width: 2vw; height: 2vw; margin-top: -5vw; margin-left: -5vw } #section8 .musik-cont .img1_box .pulse2 { width: 6vw; height: 6vw; margin-top: -7vw; margin-left: -7vw; } #section8 .musik-cont .img1_box .pulse3 { width: 10vw; height: 10vw; margin-top: -9vw; margin-left: -9vw } #section8 .musik-cont .img1_box .pulse4 { width: 14vw; height: 14vw; margin-top: -11vw; margin-left: -11vw } @media screen and (min-width: 1368px) and (max-width: 1680px) { #section8 .musik-cont-overlay .musik-right {margin-top: 8.8vh;} #section8 .musik-cont .img1_box {left: -13vw;bottom: 6vh;} } @media all and (max-width: 767px) { /* #section8 .musik-cont .img1_box .pulse1, #section8 .musik-cont .img1_box .pulse2, #section8 .musik-cont .img1_box .pulse3, #section8 .musik-cont .img1_box .pulse4 { display: none } */ #section8 .musik-cont .img1_box .pulse1 { width: 14vw; height: 14vw; margin-top: -17vw; margin-left: -17vw } #section8 .musik-cont .img1_box .pulse2 { width: 18vw; height: 18vw; margin-top: -19vw; margin-left: -19vw; } #section8 .musik-cont .img1_box .pulse3 { width: 22vw; height: 22vw; margin-top: -21vw; margin-left: -21vw } #section8 .musik-cont .img1_box .pulse4 { width: 26vw; height: 26vw; margin-top: -23vw; margin-left: -23vw } #section8.load-background {background: url("../img/music-bluetooth/musik-bg-mob2.jpg") no-repeat center;background-size:cover;} #section8 .musik-cont {width: 100vw;position: relative;right: 0;} #section8 .musik-cont .mob-bg{width: 100vw;height:130vh;background: url("../img/music-bluetooth/musik-bg-mob.jpg") no-repeat center;background-size:cover;} #section8 .musik-cont-overlay {width: 100%;position:relative;padding:25px;margin-top: -13vh;background-color: rgba(0,0,0,0.6);} #section8 .musik-cont .img1_box {width: 0vw;left: 46vw;bottom: 20vh;} #section8 .musik-cont-overlay h2 {font-size: 25px;position: absolute;top: -105vh;left:12vw;} #section8 .musik-cont-overlay span {font-size: 20px;} #section8 .musik-cont-overlay .musik-right {width: 40%;margin-top: 34vh;margin-left: -10vw;position: absolute;} #section8 .musik-cont-overlay .musik-right div {width: 60%;float: right;margin-bottom: 4vh;} #section8 .musik-cont-overlay .musik-right span {font-size: 16px;} #section8 .musik-cont-overlay .musik-left {width: 80%;float: left;} #section8 .musik-cont-overlay .musik-left span {text-align: left;margin-right: 30px;width: 32vw;} #section8 .musik-cont-right {width: 60%;float: right;margin-bottom: 0px;margin-top: -13vh;} #section8 .musik-cont-right img{width: 100%;} #section8 .musik-cont-overlay .musik-right img {width: 50%;float: left;margin: 0 20%;} } @media screen and (min-width: 320px) and (max-width: 480px) { #section8 .musik-cont-overlay h2 {font-size: 20px;top: -107vh;} #section8 .musik-cont-overlay span {font-size: 11px;} #section8 .musik-cont-overlay p {font-size: 11px;} #section8 .musik-cont-overlay .musik-left span {width: 37vw;font-size: 14px;} #section8 .musik-cont-right img {width: 90%;float: right;} #section8 .musik-cont-overlay .musik-right img {width: 50%;margin: 0 10%;} #section8 .musik-cont-overlay .musik-right {margin-left: -15vw;} #section8 .musik-cont-overlay {margin-top: -10vh;} #section8 .musik-cont .img1_box {width: 0vw;left: 52vw;bottom: 15vh;} #section8 .musik-cont-overlay span {font-size: 11px;} #section8 .musik-cont-overlay .musik-right span {font-size: 14px;} } @media all and (max-width: 319px) { #section8 .musik-cont-overlay h2 {font-size: 20px;top: -107vh;} #section8 .musik-cont-overlay span {font-size: 11px;} #section8 .musik-cont-overlay p {font-size: 13px;} #section8 .musik-cont-overlay .musik-left span {width: 37vw;font-size: 14px;} #section8 .musik-cont-right img {width: 90%;float: right;} #section8 .musik-cont-overlay .musik-right img {width: 50%;margin: 0 10%;} #section8 .musik-cont-overlay .musik-right {margin-left: -15vw;} #section8 .musik-cont-overlay .musik-right span {font-size: 12px;} } /* SECTION 9 */ #section9.load-background { background: url("../img/cat-tires/cat-tires-bg.jpg") no-repeat center bottom; background-size: cover } #section9 .cat-tires-cont{ position:absolute; width:58vw; left:42vw; top:30vh; color:#fff; } #section9 .cat-tires-cont .cont1{ width:50%; float:left; } #section9 .cat-tires-cont .cont1 h2{ font-size: 30px; font-family: "Roboto"; text-transform: uppercase; margin-bottom:2vh; color:#fff; } #section9 .cat-tires-cont .cont1 p{ font-size: 18px; font-family: "Roboto"; line-height:1.7; font-weight:bold; letter-spacing:1px; } #section9 .cat-tires-cont .cont2{ width:50%; float:left; margin-top:15vh; } #section9 .cat-tires-cont .cont2 p{ font-size: 14px; font-family: "Roboto"; line-height:1.7; width:33%; margin-bottom:5vh; } #section9 .cat-tires-cont .cont2 ul li{overflow:hidden;margin-bottom:1vh;} #section9 .cat-tires-cont .cont2 ul li img{width:60px;float:left;} #section9 .cat-tires-cont .cont2 ul li span{float:left;line-height:55px;margin-left:1vw;font-size:18px;font-family: "Roboto";} @media screen and (min-width: 1368px) and (max-width: 1680px) { #section9 .cat-tires-cont {width: 65vw;left: 40vw;top: 25vh;} #section9 .cat-tires-cont .cont2 {width: 50%;margin-top: 25vh;} #section9 .cat-tires-cont .cont1 {width: 45%;} #section9 .cat-tires-cont .cont2 p {width: 38%;} } @media all and (max-width: 767px) { #section9{height:170vh!important;} #section9.load-background { background: url("../img/cat-tires/cat-tires-mob-bg.jpg") no-repeat center center; background-size: 100% 100% } #section9 .cat-tires-cont .cont1 {width: 95%;float: left;text-align: right;} #section9 .cat-tires-cont .cont1 p {font-size: 15px;} #section9 .cat-tires-cont {position: relative;width: 100vw;left: 0vw;top: 42vh;} #section9 .cat-tires-cont .cont2 {width: 100%;float: left;margin-top: 5vh;margin-left: 20vw;} #section9 .cat-tires-cont .cont2 p {font-size: 14px;width: 60%;margin-bottom: 5vh;text-align: left;} #section9 .cat-tires-cont .cont2 ul li {margin-bottom: 5vh;} #section9 .cat-tires-cont .cont2 ul li span {margin-left: 10vw;} } @media all and (min-width: 320px) and (max-width: 480px){ #section9 {height: 200vh!important;} #section9 .cat-tires-cont {top: 50vh;} #section9 .cat-tires-cont .cont1 h2 {font-size: 30px;} #section9 .cat-tires-cont .cont1 p {font-size: 14px;} #section9 .cat-tires-cont .cont2 ul li img {width: 60px;} #section9 .cat-tires-cont .cont2 ul li span {line-height: 60px;font-size: 16px;} #section9 .cat-tires-cont .cont2 p {font-size: 14px;} } @media all and (max-width: 319px) { #section9 {height: 200vh!important;} #section9 .cat-tires-cont {top: 50vh;} #section9 .cat-tires-cont .cont1 h2 {font-size: 24px;} #section9 .cat-tires-cont .cont1 p {font-size: 10px;} #section9 .cat-tires-cont .cont2 ul li img {width: 50px;} #section9 .cat-tires-cont .cont2 ul li span {line-height: 60px;font-size: 16px;} } /* SECTION 10 */ #section10.load-background { background: url("../img/zubehor/zubehoer-bg.jpg") no-repeat center bottom; background-size: cover } #section10 .zubehoer-cont{ position:absolute; width:100%; top:13vh; } #section10 .zubehoer-cont .title{ width:100%; background-color:#3face2; color:#fff; } #section10 .zubehoer-cont .title h2{ font-size: 30px; font-family: "Roboto"; text-transform: uppercase; line-height:70px; margin-left:64vw; color:#fff; } #section10 .zubehoer-cont .helm-cont{ color:#fff; width:71vw; text-align:right; } #section10 .zubehoer-cont .helm-cont h3{ font-size: 20px; font-family: "Roboto"; line-height:80px; color:#fff; text-transform: none; } #section10 .zubehoer-cont .helm-cont p{ font-size: 14px; font-family: "Roboto"; line-height:1.7; margin-bottom:5vh; } #section10 .zubehoer-cont .helm-cont .groesse{ font-size:18px; margin-bottom:2vh; } #section10 .zubehoer-cont .helm-cont h2{ font-size: 30px; font-family: "Roboto"; line-height:50px; color:#fff; text-transform: none; } #section10 .zubehoer-cont .helm-cont span{ font-family: "Roboto"; } #section10 .zubehoer-cont .helm-cont .preis{ font-family: "Roboto"; font-size:30px; font-weight:500; margin-top:-10px; margin-bottom:3vh; } #section10 .zubehoer-cont .helm-cont a{ font-family: "Roboto"; background-color:#3face2; color:#fff; padding:10px 30px; border:1px solid #fff; text-decoration:none; } #section10 .zubehoer-cont .helm-cont a:hover{ background-color:#73caf5; } #section10 .zubehoer-cont .helm-cont a:focus{ background-color:#cdcdcd; } #section10 .zubehoer-cont .all-zubehoer{ width:94%; margin-left:3%; overflow:hidden; margin-top:10vh; } #section10 .zubehoer-cont .all-zubehoer .helm, #section10 .zubehoer-cont .all-zubehoer .schutzkleidung, #section10 .zubehoer-cont .all-zubehoer .hoverkart, #section10 .zubehoer-cont .all-zubehoer .silicone, #section10 .zubehoer-cont .all-zubehoer .trolley{ width:23%; float:left; margin-right:2.3%; height:25vh; position:relative; } #section10 .zubehoer-cont .all-zubehoer .schutzkleidung{ background: url("../img/zubehor/ps200.jpg") no-repeat center; background-size: cover } #section10 .zubehoer-cont .all-zubehoer .hoverkart{ background: url("../img/zubehor/hk200.jpg") no-repeat center; background-size: cover } #section10 .zubehoer-cont .all-zubehoer .silicone{ background: url("../img/zubehor/silikon_cases.jpg") no-repeat center; background-size: cover } #section10 .zubehoer-cont .all-zubehoer .trolley{ margin-right:0%; background: url("../img/zubehor/trolley.jpg") no-repeat center; background-size: cover } #section10 .zubehoer-cont .all-zubehoer .helm p, #section10 .zubehoer-cont .all-zubehoer .schutzkleidung p, #section10 .zubehoer-cont .all-zubehoer .hoverkart p, #section10 .zubehoer-cont .all-zubehoer .silicone p, #section10 .zubehoer-cont .all-zubehoer .trolley p{ position:absolute; font-family: "Roboto"; background-color:#3face2; color:#fff; bottom:0; padding:7px 20px; width:100%; } #section10 .zubehoer-cont .all-zubehoer .helm span, #section10 .zubehoer-cont .all-zubehoer .schutzkleidung span, #section10 .zubehoer-cont .all-zubehoer .hoverkart span, #section10 .zubehoer-cont .all-zubehoer .silicone span, #section10 .zubehoer-cont .all-zubehoer .trolley span{ float:right; bottom:0; color:#fff; font-size:16px; width:25%!important; display:none; } #section10 .zubehoer-cont .all-zubehoer .helm a, #section10 .zubehoer-cont .all-zubehoer .schutzkleidung a, #section10 .zubehoer-cont .all-zubehoer .hoverkart a, #section10 .zubehoer-cont .all-zubehoer .silicone a, #section10 .zubehoer-cont .all-zubehoer .trolley a{ position:absolute; font-family: "Roboto"; background-color:#3face2; color:#fff; bottom:4vh; right:1px; padding:10px 30px; font-size:12px; text-decoration:none; } #section10 .zubehoer-cont .all-zubehoer .helm a:hover, #section10 .zubehoer-cont .all-zubehoer .schutzkleidung a:hover, #section10 .zubehoer-cont .all-zubehoer .hoverkart a:hover, #section10 .zubehoer-cont .all-zubehoer .silicone a:hover, #section10 .zubehoer-cont .all-zubehoer .trolley a:hover{ background-color:#73caf5; } #section10 .zubehoer-cont .all-zubehoer .helm a:focus, #section10 .zubehoer-cont .all-zubehoer .schutzkleidung a:focus, #section10 .zubehoer-cont .all-zubehoer .hoverkart a:focus, #section10 .zubehoer-cont .all-zubehoer .silicone a:focus, #section10 .zubehoer-cont .all-zubehoer .trolley a:focus{ background-color:#cdcdcd; } @media screen and (min-width: 1368px) and (max-width: 1680px) { #section10 .zubehoer-cont {width: 100%;top: 10vh;} #section10 .zubehoer-cont .all-zubehoer {margin-top: 10vh;} #section10 .zubehoer-cont .all-zubehoer .schutzkleidung span, #section10 .zubehoer-cont .all-zubehoer .hoverkart span, #section10 .zubehoer-cont .all-zubehoer .silicone span, #section10 .zubehoer-cont .all-zubehoer .trolley span { left: 1px;width: 88%; } #section10 .zubehoer-cont .helm-cont {width: 71vw;} #section10 .zubehoer-cont .title h2 {margin-left: 63vw;} #section10 .zubehoer-cont .all-zubehoer .schutzkleidung a, #section10 .zubehoer-cont .all-zubehoer .hoverkart a, #section10 .zubehoer-cont .all-zubehoer .silicone a, #section10 .zubehoer-cont .all-zubehoer .trolley a {bottom: 5vh;right: 0px;} } @media all and (max-width: 767px) { #section10.load-background { background: url("../img/zubehor/zubehoer-mob-bg.jpg") no-repeat center; background-size: cover } #section10 .zubehoer-cont {position: relative;top:0;} #section10 .zubehoer-cont .helm-cont {display: none;} #section10 .zubehoer-cont .title h2 {font-size: 25px;margin-left: 0;text-align: center;padding-top: 20px;margin-top: 8vh;margin-bottom: 7vh;} #section10 .zubehoer-cont .all-zubehoer {width: 100%;margin-left: 0%;margin-bottom: 2vh;} #section10 .zubehoer-cont .all-zubehoer .helm{ background: url("../img/zubehor/helm.png") no-repeat center; background-size: cover; } #section10 .zubehoer-cont .all-zubehoer .helm, #section10 .zubehoer-cont .all-zubehoer .schutzkleidung, #section10 .zubehoer-cont .all-zubehoer .hoverkart, #section10 .zubehoer-cont .all-zubehoer .silicone, #section10 .zubehoer-cont .all-zubehoer .trolley { width: 100%; margin-right:0; height: 35vh; position: relative; margin-bottom: 5vh; } #section10 .zubehoer-cont .all-zubehoer .helm p, #section10 .zubehoer-cont .all-zubehoer .schutzkleidung p, #section10 .zubehoer-cont .all-zubehoer .hoverkart p, #section10 .zubehoer-cont .all-zubehoer .silicone p, #section10 .zubehoer-cont .all-zubehoer .trolley p { width: 100%; } #section10 .zubehoer-cont .all-zubehoer .helm p span, #section10 .zubehoer-cont .all-zubehoer .schutzkleidung p span, #section10 .zubehoer-cont .all-zubehoer .hoverkart p span, #section10 .zubehoer-cont .all-zubehoer .silicone p span, #section10 .zubehoer-cont .all-zubehoer .trolley p span{ display:block; margin-right: -30px; } #section10 .zubehoer-cont .all-zubehoer .helm a, #section10 .zubehoer-cont .all-zubehoer .schutzkleidung a, #section10 .zubehoer-cont .all-zubehoer .hoverkart a, #section10 .zubehoer-cont .all-zubehoer .silicone a, #section10 .zubehoer-cont .all-zubehoer .trolley a { bottom: 6vh; right: 0px; padding: 15px 20px 15px 40px; } } @media all and (min-width: 320px) and (max-width: 480px) { #section10 .zubehoer-cont .all-zubehoer .helm p span, #section10 .zubehoer-cont .all-zubehoer .schutzkleidung p span, #section10 .zubehoer-cont .all-zubehoer .hoverkart p span, #section10 .zubehoer-cont .all-zubehoer .silicone p span, #section10 .zubehoer-cont .all-zubehoer .trolley p span { display: block; margin-right: 0px; } #section10 .zubehoer-cont .all-zubehoer .helm a, #section10 .zubehoer-cont .all-zubehoer .schutzkleidung a, #section10 .zubehoer-cont .all-zubehoer .hoverkart a, #section10 .zubehoer-cont .all-zubehoer .silicone a, #section10 .zubehoer-cont .all-zubehoer .trolley a { bottom: 7vh; padding: 10px 20px 10px 35px; } #section10 .zubehoer-cont .all-zubehoer .helm p, #section10 .zubehoer-cont .all-zubehoer .schutzkleidung p, #section10 .zubehoer-cont .all-zubehoer .hoverkart p, #section10 .zubehoer-cont .all-zubehoer .silicone p, #section10 .zubehoer-cont .all-zubehoer .trolley p { padding: 7px 0px 7px 20px; } } @media all and (max-width: 319px) { #section10 .zubehoer-cont .all-zubehoer .helm p span, #section10 .zubehoer-cont .all-zubehoer .schutzkleidung p span, #section10 .zubehoer-cont .all-zubehoer .hoverkart p span, #section10 .zubehoer-cont .all-zubehoer .silicone p span, #section10 .zubehoer-cont .all-zubehoer .trolley p span { display: block; margin-right: 5px; } #section10 .zubehoer-cont .all-zubehoer .helm a, #section10 .zubehoer-cont .all-zubehoer .schutzkleidung a, #section10 .zubehoer-cont .all-zubehoer .hoverkart a, #section10 .zubehoer-cont .all-zubehoer .silicone a, #section10 .zubehoer-cont .all-zubehoer .trolley a { bottom: 7vh; padding: 10px 20px 10px 30px; } } /* SECTION 11 */ #section11.load-background { background: url("../img/technische/technische-daten-bg.jpg") no-repeat center; background-size: cover } #section11 .techn-daten-cont { width:90vw; margin-left:5vw; color:#fff; font-family: "Roboto"; } #section11 .techn-daten-cont .techn-left{ width:25%; float:left; } #section11 .techn-daten-cont .techn-middle{ width:25%; float:left; } #section11 .techn-daten-cont .techn-right{ width:35%; float:left; } #section11 .techn-daten-cont .techn-left, #section11 .techn-daten-cont .techn-middle, #section11 .techn-daten-cont .techn-right{ margin-right:5%; } #section11 .techn-daten-cont .techn-left h3, #section11 .techn-daten-cont .techn-middle h3, #section11 .techn-daten-cont .techn-right h3{ background-color:#3face2; font-size:20px; text-align:center; text-transform:uppercase; padding:15px 30px; border:1px solid #fff; color:#fff; } #section11 .techn-daten-cont .techn-middle h3{margin-bottom:3vh;} #section11 .techn-daten-cont .techn-right a{ font-family: "Roboto"; color: rgb(66, 173, 227); text-decoration:none; margin-top:5vh; } #section11 .techn-daten-cont .techn-left table{ margin:8vh 20px 2vh 20px; font-size:16px; } #section11 .techn-daten-cont .techn-left table tr{ width:10vw; } #section11 .techn-daten-cont .techn-left table tr td{ width:10vw; line-height:1.7; } #section11 .techn-daten-cont .techn-middle ul{ padding:3vh 20px 5vh; } #section11 .techn-daten-cont .techn-middle ul li{ line-height:1.7; } #section11 .techn-daten-cont .techn-middle a{ padding:20px; color:#fff; text-decoration:none; position:relative; } #section11 .techn-daten-cont .techn-middle a img{ margin-left:20px; position:absolute; right:-20px; top:20px; } #section11 .techn-daten-cont .techn-left p, #section11 .techn-daten-cont .techn-middle p, #section11 .techn-daten-cont .techn-right p{ padding:20px; line-height:1.7; font-size:16px; } #section11 .techn-daten-cont .techn-right p{ text-align:justify; padding:3vh 0 5vh; } @media screen and (min-width: 1368px) and (max-width: 1680px) { #section11 .techn-daten-cont .techn-middle ul {padding: 0vh 20px 5vh;} #section11 .techn-daten-cont .techn-left table {font-size: 13px;} #section11 .techn-daten-cont .techn-left table tr td {line-height: 2.2;} #section11 .techn-daten-cont .techn-left p, #section11 .techn-daten-cont .techn-middle p, #section11 .techn-daten-cont .techn-right p { font-size: 15px; line-height:2.2; } } @media all and (max-width: 768px) { #section11.load-background { background: url("../img/technische/technische-daten-mob-bg.jpg") no-repeat center; background-size: cover } #section11 .techn-daten-cont {width: 100vw;margin-left: 0vw;margin-top: 15vh;} #section11 .techn-daten-cont .techn-left {width: 100%;} #section11 .techn-daten-cont .techn-middle {width: 100%;margin-bottom:10vh;} #section11 .techn-daten-cont .techn-right {width: 100%;margin-bottom: 7vh;} #section11 .techn-daten-cont .techn-left h3, #section11 .techn-daten-cont .techn-middle h3, #section11 .techn-daten-cont .techn-right h3 {background-color: rgba(63,172,226,.7);} #section11 .techn-daten-cont .techn-left table {margin: 8vh 20px 2vh 20px;width: 90%;} #section11 .techn-daten-cont .techn-left table tr td {width: 0vw;} #section11 .techn-daten-cont .techn-left p{text-align: center;width: 50%;margin: 0 auto 10vh;} #section11 .techn-daten-cont .techn-middle ul {padding: 0vh 20px 10vh;} #section11 .techn-daten-cont .techn-right p {padding: 3vh 20px 5vh;} #section11 .techn-daten-cont .techn-right a {text-align: center;width: 70%;display: block;margin: 5vh auto 0;font-weight:bold;line-height: 25px;} #section11 .techn-daten-cont .techn-right a:after{content:url(../img/technische/pdf.png);margin-left: 15px;position: absolute;} } @media all and (min-width: 320px) and (max-width: 480px) { #section11 .techn-daten-cont .techn-left table {font-size: 12px;} #section11 .techn-daten-cont .techn-left p {width: 80%;font-size: 15px;} #section11 .techn-daten-cont .techn-middle ul li {font-size: 15px;} #section11 .techn-daten-cont .techn-middle a {font-size: 14px;} #section11 .techn-daten-cont .techn-middle a img {right: -5px;top: 15px;} #section11 .techn-daten-cont .techn-right p {font-size: 14px;} #section11 .techn-daten-cont .techn-right a {width: 50%;font-size: 14px;} } @media all and (max-width: 319px) { #section11 .techn-daten-cont .techn-left table {font-size: 12px;} #section11 .techn-daten-cont .techn-left p {width: 80%;font-size: 15px;} #section11 .techn-daten-cont .techn-middle ul li {font-size: 15px;} #section11 .techn-daten-cont .techn-middle a {font-size: 14px;} #section11 .techn-daten-cont .techn-middle a img {right: -5px;top: 15px;} #section11 .techn-daten-cont .techn-right p {font-size: 14px;} #section11 .techn-daten-cont .techn-right a {width: 70%;font-size: 14px;} } /* SECTION 12 */ #section12.load-background { background: url("../img/safety-first/safety-first-bg.jpg") no-repeat center; background-size: cover } #section12 .safety-first-cont{ width:80vw; margin-left:5vw; position:absolute; bottom:0; } #section12 .safety-first-cont .safety-first-left, #section12 .safety-first-cont .steuerung { width:50%; float:left; position:relative; } #section12 .safety-first-cont .safety-first-left .ce-zert {width:45%;float:left;} #section12 .safety-first-cont .safety-first-left .self-balancing {width:45%;float:left;padding-left:3vw;} #section12 .safety-first-cont .safety-first-left .ce-zert h3{font-size:26px;font-family: "Roboto";text-transform:uppercase;padding:5vh 3vw;} #section12 .safety-first-cont .safety-first-left .ce-zert h3 span{color: #06b8e8;} #section12 .safety-first-cont .safety-first-left .self-balancing h3{font-size:26px;font-family: "Roboto";padding:5vh 0 2vh;text-transform: lowercase;} #section12 .safety-first-cont .safety-first-left .self-balancing p{font-size:14px;font-family: "Roboto";width:70%;line-height:1.5;} #section12 .safety-first-cont .safety-first-left .self-balancing p:last-child{font-size:14px;font-family: "Roboto";text-transform:uppercase;letter-spacing:1px;} #section12 .safety-first-cont .safety-first-left .self-balancing .chip-cont{ width:100%; margin-top:10vh; margin-bottom:2vh; overflow:hidden; } #section12 .safety-first-cont .safety-first-left .self-balancing .chip-cont img{ width:50%; float:left; } #section12 .safety-first-cont .safety-first-left .self-balancing .chip-cont p{ width:30%; float:left; font-size:12px; margin-left:10%; text-transform:none; } #section12 .safety-first-cont .safety-first-left .self-balancing .chip-cont p span{ color: #06b8e8; font-size:34px; font-weight:bold; } #section12 .safety-first-cont .steuerung .steuerung-cont {position:absolute;width:11vw;padding:2px 20px;background: url("../img/safety-first/steuerung-bg.jpg") no-repeat center;top: 25vh;left: 18vw;} #section12 .safety-first-cont .steuerung .steuerung-cont p {color:#fff;font-weight:bold;text-transform:uppercase;font-family: "Roboto";font-size:18px;letter-spacing:1px;line-height:1.7;} #section12 .safety-first-cont .steuerung .steuerung-cont p .second {color: #06b8e8;display:block;font-size:31px;line-height:1;font-weight:200;} @media screen and (min-width: 1368px) and (max-width: 1680px) { #section12 .safety-first-cont {margin-left: 3vw;} #section12 .safety-first-cont .safety-first-left .ce-zert h3 {font-size: 24px;padding: 5vh 2vw;} #section12 .safety-first-cont .safety-first-left .ce-zert img {width:90%;} #section12 .safety-first-cont .safety-first-left .self-balancing h3 {font-size: 23px;} #section12 .safety-first-cont .safety-first-left .self-balancing p {font-size: 14px;width: 76%;} #section12 .safety-first-cont .safety-first-left .self-balancing p:last-child {font-size: 14px;} #section12 .safety-first-cont .steuerung .steuerung-cont p {font-size: 15px;} #section12 .safety-first-cont .steuerung .steuerung-cont {padding: 2px 20px;top: 25vh;left: 18vw;} #section12 .safety-first-cont .steuerung .steuerung-cont p .second {font-size: 26px;} } @media all and (max-width: 768px) { #section12.load-background { background: url("../img/safety-first/safety-first-mob-bg.jpg") no-repeat center; background-size: cover } #section12 .safety-first-cont .safety-first-left .ce-zert img {display:none;} #section12 .safety-first-cont .safety-first-left .ce-zert h3 {visibility: hidden!important;} #section12 .safety-first-cont {width: 100vw;margin-left: 0vw;position: relative;} #section12 .safety-first-cont .steuerung .steuerung-cont {position: absolute;width: 55vw;background: none;top: 77vh;left: 19vw;} #section12 .safety-first-cont .steuerung .steuerung-cont p {font-size: 19px;} #section12 .safety-first-cont .steuerung .steuerung-cont p .second {font-size: 33px;line-height: 1;font-weight: bold;} #section12 .safety-first-cont .steuerung {width: 50%;position: absolute;} #section12 .safety-first-cont .safety-first-left .self-balancing {width: 100%;padding-left: 0vw;margin-top:82vh;} #section12 .safety-first-cont .safety-first-left .self-balancing h3 {font-size: 20px;position: absolute;top: -95vh;color: #fff;background-color: #3face2;padding: 1vh 4vw;text-transform: uppercase;} #section12 .safety-first-cont .safety-first-left {width: 99%;position: relative;} #section12 .safety-first-cont .safety-first-left .self-balancing p {font-size: 14px;width: 51%;margin: 0 auto;} #section12 .safety-first-cont .safety-first-left .self-balancing .chip-cont {width: 100%;margin-top: 6vh;margin-bottom: 2vh;} #section12 .safety-first-cont .safety-first-left .self-balancing .chip-cont img {width: 65%;float: left;margin-left: 17.5%;} #section12 .safety-first-cont .safety-first-left .self-balancing .chip-cont p {width: 44%!important;float: right;margin-top: 45vh;margin-left: 37vw;position: absolute;} #section12 .safety-first-cont .safety-first-left .self-balancing .chip-cont p span {font-size: 50px;font-weight: bold;} #section12 .safety-first-cont .safety-first-left .self-balancing p:last-child {margin-bottom: 25vh;text-align: right;font-size: 18px;width: 60vw;} #section12 .safety-first-cont .steuerung .steuerung-cont p .third{color:#000;font-weight:500;letter-spacing: 1.2px;} } @media all and (min-width: 320px) and (max-width: 480px){ #section12 .safety-first-cont .safety-first-left .self-balancing h3 {top: -105vh;} #section12 .safety-first-cont .safety-first-left .self-balancing h3 {font-size: 16px;} #section12 .safety-first-cont .safety-first-left .self-balancing {margin-top: 90vh;} #section12 .safety-first-cont .steuerung .steuerung-cont p {font-size: 22px;} #section12 .safety-first-cont .safety-first-left .self-balancing p {font-size: 14px;width: 70%;margin: 0 auto;} #section12 .safety-first-cont .steuerung .steuerung-cont p .second {font-size: 37px;} #section12 .safety-first-cont .steuerung .steuerung-cont {width: 80vw;top: 79vh;left: 15vw;} #section12 .safety-first-cont .safety-first-left .self-balancing p:last-child {font-size: 14px;} #section12 .safety-first-cont .safety-first-left .self-balancing .chip-cont p span {font-size: 40px;} #section12 .safety-first-cont .safety-first-left .self-balancing .chip-cont p {margin-top: 50vh;} } @media all and (max-width: 319px) { #section12 .safety-first-cont .safety-first-left .self-balancing h3 {font-size: 16px;} #section12 .safety-first-cont .safety-first-left .self-balancing {margin-top: 90vh;} #section12 .safety-first-cont .steuerung .steuerung-cont p {font-size: 18px;} #section12 .safety-first-cont .safety-first-left .self-balancing p {font-size: 14px;width: 70%;margin: 0 auto;} #section12 .safety-first-cont .steuerung .steuerung-cont p .second {font-size: 31px;} #section12 .safety-first-cont .steuerung .steuerung-cont {width: 55vw;top: 82vh;left: 14vw;} #section12 .safety-first-cont .safety-first-left .self-balancing p:last-child {font-size: 14px;} #section12 .safety-first-cont .safety-first-left .self-balancing .chip-cont p span {font-size: 40px;} #section12 .safety-first-cont .safety-first-left .self-balancing .chip-cont p {margin-top: 47vh;} } section.battery { background: #f6f6f6 } section.battery h1 { padding-top: 30px; margin-bottom: 25px; font-family: "Roboto"; font-size: 40px; color: #444444 } section.battery p { font-family: "Roboto"; font-size: 18px; color: #000; line-height: 1.5; margin-bottom: 35px } section.battery .battery-cont-mid {background-color:#eaeaea;position:relative;} section.battery .battery-cont-mid .mob {display:none;} section.battery .left-img { position:absolute; bottom:5vh; left:40vh; } section.battery .mid-img { background: #eaeaea; text-align: center; overflow:hidden; } section.battery .right-img { position:absolute; right: 23vw; bottom: 5vh; } section.battery .right-img h4, section.battery .left-img h4{ font-size:14px; font-family: "Roboto"; color:#fff; text-align:center; background-color:#3face2; border-radius:50%; padding:40px; } section.battery .left-img h4{ padding:50px 40px; } section.battery .left-img h4 span, section.battery .right-img h4 span{ font-size:60px; } section.battery .mid-img img { max-width: 100%; height: auto; display: inline; margin-left:-3vw; } section.battery .icons { max-width: 1200px; margin: 40px auto 40px auto } @media all and (max-width: 1199px) { section.battery .icons { padding-left: 25px } } section.battery .icons .col { width: calc(25% - 10px); margin-bottom: 20px } section.battery .icons .col:nth-child(4n+1) { clear: left } section.battery .icons .col .img { float: left; margin-right: 5px; width:60px; } section.battery .icons .col .text { float: left; width: calc(100% - 65px) } section.battery .icons .col p { font-size: 16px; color: #000; font-family: "Roboto"; margin-bottom: 0; padding-top: 25px; margin-left: 30px; } @media screen and (min-width: 1368px) and (max-width: 1680px) { section.battery h1 {padding-top: 8vh;margin-bottom: 10px;} section.battery p {font-size: 16px;margin-bottom: 15px;} section.battery .icons {max-width: 1200px;margin: 40px auto 0px auto;} section.battery .left-img {left: 35vh;} section.battery .left-img h4 span, section.battery .right-img h4 span {font-size: 50px;} } @media all and (max-width: 768px) { section.battery .battery-cont-mid .mob {display:block;} section.battery h1 {font-size: 7vw;text-align: center;margin: 7vh 0 5vh; } section.battery p {font-size: 4vw;padding-left: 5vw;padding-right: 5vw;text-align: center;} section.battery p br {display: none} section.battery .mid-img .desk {display:none;} section.battery .mid-img {background: #eaeaea;text-align: center;height: 90vh;} section.battery .mid-img img {display: block;margin-left:0;margin-top:5vh;} section.battery .right-img {position: absolute;right: 30vw;bottom: 30vh;} section.battery .left-img {bottom: 4vh;left: 17vh;width: 40vw;} section.battery .left-img h4 {padding: 55px 40px;} section.battery .left-img h4 span {font-size:45px;font-weight: bold;} section.battery .icons {padding: 0 15vw!important;} section.battery .icons .col {width: 100%!important;position:relative;margin-bottom:5vh;} section.battery .icons .col p {font-size: 16px;margin-bottom: 0;padding-top: 0px;margin-left: 15px;position: absolute;top: 2vh;left: 15vw;} section.battery .icons .col .img img {display: inline-block;width: 55px;} section.battery .icons {padding: 0 15px} section.battery .icons .col {width: 50%} section.battery .icons .col .img { float: none; margin-right: 0; text-align: center } section.battery .icons .col .img img { display: inline-block; float: left; } section.battery .icons .col .text { float: none; width: 100%; text-align: center } section.battery .icons .col p { text-align: center } } @media screen and (min-width: 320px) and (max-width: 480px) { section.battery .left-img {bottom: 4vh;left: 16vh;width: 45vw;} section.battery .right-img {position: absolute;right: 28vw;bottom: 32vh;} } @media all and (max-width: 319px) { } /* SECTION 14 */ section.features { background-color:#fff; color:#000; background-size: cover; position: relative } section.features h1 { font-size: 36px; text-transform: uppercase; font-family: "Roboto"; color: #000; padding-top: 50px; margin-bottom: 10px; margin-left: 22vw; } section.features .subtitle { font-family: "Roboto"; font-size: 18px; color: #000; margin-left: 22vw; } section.features .subtitle span { font-family: "Roboto"; font-style: normal } section.features .slick-dots { background: url("https://www.bluewheel.de/products/hx310/img/slider/glow-line.png") no-repeat center center; bottom: 20px; z-index: 99 } section.features .slick-dots li { width: 17px; height: 16px; vertical-align: middle } section.features .slick-dots li button { width: 17px; height: 16px } section.features .slick-dots li button:before { opacity: 1; color: transparent; background: url("https://www.bluewheel.de/products/hx310/img/slider/dots.png") no-repeat center top; width: 17px; height: 16px } section.features .slick-dots li.slick-active button:before { background-position: center -32px } section.features .slick-dots li:hover button:before { background-position: center -16px } section.features .row { max-width: 1580px; margin: 0 auto; padding-top: 130px; padding-bottom: 10px } @media all and (max-width: 1199px) { section.features .row { padding-top: 50px; padding-bottom: 50px } } section.features .row .col { width: calc(33% - 30px); padding: 0 15px; margin-bottom: 50px } @media all and (max-width: 1199px) { section.features .row .col { margin-bottom: 25px; width: calc(50% - 30px) } section.features .row .col:nth-child(2n+1) { clear: left } section.features .row .col br { display: none } } @media all and (min-width: 1200px) { section.features .row .col:nth-child(3n+1) { clear: left } } section.features .row .col .img { float: left; margin-right: 15px } section.features .row .col .img img { width:65px; } @media all and (max-width: 767px) and (max-width: 479px) { section.features .row .col .img img { max-width: 75px } } section.features .row .col .text { float: left; width: calc(100% - 115px) } section.features .row .col .text p { color: #000; font-family: "Roboto"; font-size: 14px; line-height: 1.5 } section.features .row .col .text p.title { font-family: "Roboto"; font-size: 16px; display: block; font-weight:bold; } @media screen and (min-width: 1368px) and (max-width: 1680px) { section.features h1 {padding-top: 15vh;} section.features .row {max-width: 95%;padding-bottom: 10px;width: 95%;margin-left: 7%;padding-top: 10vh;} section.features .row .col {padding: 0 0px;margin-bottom: 50px;} section.features .row .col .text p {font-size: 13px;width: 100%;} section.features .row .col .text br{display:none!important;} } @media all and (max-width: 768px) { section.features h1 { font-family: "Roboto"; text-align: left; text-transform: inherit; font-size: 10vw; margin-right: 0; padding-top: 25px; margin-bottom: 15px; margin-left: 10vw; } section.features .subtitle { font-family: "Roboto"; text-align: left; font-size: 5vw; margin-bottom: 5vw; margin-right: 5vw; margin-left: 11vw; } section.features .slick-dots { background: transparent } section.features .row .col { margin-bottom: 35px } section.features .row .col .img { float: none; display: block; text-align: center; margin-right: 0 } section.features .row .col .img img { display: inline-block } section.features .row .col .text { float: none; width: 100%; text-align: center } section.features .row .col .text p { display: none } } @media all and (max-width: 479px) { section.features .row .col .text p.title { font-size: 14px } } /* SECTION 15 */ #section15.load-background { background: url("../img/brandstore/brandstore-bg.jpg") no-repeat center; background-size: cover; } .brandstore{font-family: "Roboto";} .brandstore .vorb-kommen{ color: #fff; font-size: 22px; position: absolute; top: 52vh; left: 30vw; } .brandstore a{ color: #fff; font-size: 15px; position: absolute; bottom: 4.5vh; left: 58vw; text-decoration: none; } .brandstore h3{ color: #fff; font-size: 20px; position: absolute; bottom: 27vh; left: 65vw; text-decoration: none; line-height: 27px; letter-spacing:5px; font-weight: 200; } .brandstore h3 span{ font-size: 24px; display:block; letter-spacing:3px; font-weight:bold; } .brandstore .brandstore-cont-right{ font-family: "Roboto"; color: #fff; width: 12vw; position: absolute; right: 14vw; bottom: 3vh; font-size: 14px; line-height: 24px; font-weight:200; } @media screen and (min-width: 1368px) and (max-width: 1680px) { .brandstore .vorb-kommen {font-size: 20px;top: 51vh;left: 28vw;} .brandstore h3 {bottom: 27vh;left:63vw;} .brandstore .brandstore-cont-right {width: 20vw;right: 6vw;bottom: 5vh;} .brandstore a {bottom: 5vh;left: 58vw;} } @media all and (max-width: 768px) { #section15{height:128vh!important;} #section15.load-background { background: url("../img/brandstore/brandstore-mob-bg.jpg") no-repeat center; background-size: cover; } .brandstore .vorb-kommen {font-size: 15px;top: 61vh;left: 29vw;} .brandstore .brandstore-cont-right {color: #000;width: 60vw;right: 10vw;bottom: 23vh;font-size: 15px;text-align: justify;} .brandstore h3 {color: #000;font-size: 22px;bottom: 53vh;left: 46vw;} .brandstore h3 span {font-size: 24px;color: #3face2;} .brandstore a {font-size: 16px;bottom: -15vh;left: 15vw;background-color: #3face2;padding: 5px 20px;} } @media all and (min-width: 320px) and (max-width: 480px) { #section15{height:135vh!important;} .brandstore .vorb-kommen {font-size: 15px;top: 64vh;left: 20vw;} .brandstore .brandstore-cont-right {width: 75vw;right: 5vw;bottom: 23vh;} .brandstore h3 {color: #000;font-size: 22px;bottom: 55vh;left: 42vw;} .brandstore .brandstore-cont-right a {right:0;position:absolute;} } @media all and (max-width: 319px) { #section15{height:135vh!important;} .brandstore .vorb-kommen {font-size: 15px;top: 64vh;left: 20vw;} .brandstore .brandstore-cont-right {width: 75vw;right: 5vw;bottom: 23vh;} .brandstore h3 {color: #000;font-size: 22px;bottom: 55vh;left: 42vw;} .brandstore a {font-size: 14px;bottom: 4vh;left: 35vw;padding: 5px 20px;} } /* SECTION 16 */ section.cat-light { background: url("../img/cat-light/bg.jpg") no-repeat center top; background-size: contain; min-height: 56.25vw; position: relative; background-color:#000; } @media all and (min-width: 768px) { section.cat-light br { display: none } } section.cat-light h1 { font-size: 30px; color: #fff; font-family: "Roboto"; margin-bottom: 12px; position: absolute; top: 35vh; left: 33vw; width: 34vw; } section.cat-light p { font-family: "Roboto"; color: #ffffff; font-size: 20px; position: absolute; width: 14vw; left: 43vw; top: 41vh; } section.cat-light .lights { background: url("../img/cat-light/bg_lights.png") no-repeat center top; background-size: contain; min-height: 56.25vw; position: absolute; z-index: 9; width: 100%; top: 0; left: 0; pointer-events: none; -webkit-transform: none !important } @media screen and (min-width: 1368px) and (max-width: 1680px) { section.cat-light h1 {top: 35vh;left: 25vw;width: 50vw;} section.cat-light p {width: 50vw;left: 25vw;top: 41vh;} } @media all and (max-width: 767px) { section.cat-light { height: 100vh; background-size: cover; background-position: 15% top } section.cat-light h1 { font-size: 7vw; text-align: right; margin-right: 25px; color: #ffffff; line-height: 1.2; margin-bottom: 15px; top: 17vh; left: 27vw; width: 70vw; } section.cat-light p { text-align: right; margin-right: 25px; color: #d4d4d4; font-size: 4vw; width: 60vw; left: 36vw; top: 35vh; } section.cat-light .lights { height: 100vh; background-size: cover; background-position: 15% top } } /* SECTION 17 */ section.ce-zert { background: url("../img/ce-zert/HX310s_CE.jpg") no-repeat center; background-size: cover } section.ce-zert .zert-cont{ width: 45vw; position: absolute; bottom: 10vh; left: 12vw; } section.ce-zert .zert-cont h2{ font-size:30px; line-height:1.6; font-family: "Roboto"; color:#000; width:60%; margin-bottom:4vh; padding-left:20px; } section.ce-zert .zert-cont p{ font-size:16px; font-family: "Roboto"; color:#000; line-height:1.7; padding-left:20px; } section.ce-zert .zert-cont img{ width: 90%; margin-top: 5vh; } @media screen and (min-width: 1368px) and (max-width: 1680px) { section.ce-zert .zert-cont h2 {line-height: 1.5;width: 80%;font-size: 28px;} section.ce-zert .zert-cont {width: 37vw;} } @media all and (max-width: 768px) { section.ce-zert {background: none;background-color: #fff;} section.ce-zert .zert-cont {width: 100vw;position: relative;bottom: -5vh;left: 0vw;} section.ce-zert .zert-cont h2 {font-size: 28px;width: 100%;margin-bottom: 4vh;padding-left: 20px;} section.ce-zert .zert-cont p {font-size: 16px;padding: 0 30px 0 20px;} section.ce-zert .zert-cont p br:first-child{display:none} section.ce-zert .zert-cont img {margin-bottom: 7vh;width: 40%;margin-top: 5vh;float: right;margin-right: 20px;} } @media screen and (min-width: 320px) and (max-width: 480px) { section.ce-zert .zert-cont h2 {font-size: 16px;} section.ce-zert .zert-cont p { font-size: 16px; position: absolute; top: 43vh; width: 60%; } } @media all and (max-width: 768px) { section.ce-zert .zert-cont h2 {font-size: 22px;} } /* SECTION 18 */ section.antrieb { background: url("../img/antrieb/antrieb-bg.jpg") no-repeat center; background-size: cover; } section.antrieb .antrieb-cont{ width:28vw; position:absolute; top:15vh; left:20vw; } section.antrieb .antrieb-cont h2{ font-size:30px; line-height:1.6; font-family: "Roboto"; color:#000; margin-bottom:4vh; } section.antrieb .antrieb-cont p{ font-size:16px; font-family: "Roboto"; color:#000; line-height:1.7; margin-bottom:5vh; } section.antrieb .antrieb-cont h3{ font-size:32px; font-family: "Roboto"; color:#000; line-height:1.6; text-align:right; } section.antrieb .antrieb-cont h3 span:first-child{ font-size:16px; margin-right:15px; } section.antrieb .antrieb-cont h3 span:last-child{ font-size:22px; } section.antrieb .antrieb-cont .Geschwindigkeit{padding-right:8px;} section.antrieb .antrieb-cont .Nennleistung {padding-right:25px;} @media screen and (min-width: 1368px) and (max-width: 1680px) { section.antrieb .antrieb-cont {width: 34vw;top: 15vh;left: 12vw;} } @media screen and (max-width: 768px) { section.antrieb {height:150vh!important;background: none;background-color: #fff;} section.antrieb .antrieb-cont {width: 100vw;position: absolute;top: 0vh;left: 0vw;} section.antrieb .antrieb-cont img{float:right;margin-top:10vh;max-width: 100%;} section.antrieb .antrieb-cont h2 {padding: 20px;margin-bottom: 10vh;} section.antrieb .antrieb-cont p {font-size:15px;padding: 20px;text-align: justify;margin-bottom:0;} section.antrieb .antrieb-cont .reichweite, section.antrieb .antrieb-cont .Geschwindigkeit, section.antrieb .antrieb-cont .Nennleistung { padding: 0 20px; color:#3face2; position:relative; font-weight:bold; } section.antrieb .antrieb-cont h3 span:first-child {float: left;line-height: 50px;color:#000;position:absolute;left:20px;top:7px;font-weight:200;} section.antrieb .antrieb-bottom {top: 63vh;} section.antrieb .ant-prog-1 .Leistungssteigerung {width: 75%;} section.antrieb .ant-prog-1 h4 {font-size: 32px;margin-top: -2px;width:5%;} section.antrieb .ant-prog-1 .Leistungssteigerung p {margin-left: 4vw;} section.antrieb .ant-prog-2 .verbesserte-e p {margin-left: 4vw;} section.antrieb .ant-prog-2 .verbesserte-e {width: 75%;float: left;} section.antrieb .ant-prog-1 {width: 60%;} section.antrieb .ant-prog-2 {width: 80%;} } @media screen and (min-width: 320px) and (max-width: 480px){ section.antrieb .antrieb-bottom {top: 70vh;} section.antrieb{height:170vh!important;} section.antrieb .antrieb-cont h2 {font-size: 24px;} section.antrieb .ant-prog-2 .verbesserte-e {width: 70%;} section.antrieb .ant-prog-1 .Leistungssteigerung {width: 52%;} section.antrieb .ant-prog-1 {width: 85%;} section.antrieb .ant-prog-1 .Leistungssteigerung p {font-size:12px;} .ant-prog-2 .verbesserte-e p {font-size:12px;} section.antrieb .antrieb-cont h3{font-size:22px;line-height:1.6;} section.antrieb .antrieb-cont h3 span:first-child{ font-size:14px; margin-right:15px; line-height: 25px; } section.antrieb .antrieb-cont h3 span:last-child{ font-size:16px; } } @media screen and (max-width: 319px) { section.antrieb{height:220vh!important;} section.antrieb .antrieb-cont h2 {font-size: 24px;} section.antrieb .ant-prog-2 .verbesserte-e {width: 70%;} section.antrieb .ant-prog-1 .Leistungssteigerung {width: 52%;} section.antrieb .ant-prog-1 {width: 85%;} section.antrieb .ant-prog-1 .Leistungssteigerung p {font-size:12px;} .ant-prog-2 .verbesserte-e p {font-size:12px;} } .fp-tooltip.right { right: 20px; background: #333; padding: 5px 10px; border-radius: 5px; top: -6px !important } .top-slider { overflow: hidden } .top-slider .bg { float: left } @media all and (min-width: 768px) { .top-slider .bg { max-height: 100vh !important } } @media all and (min-width: 1625px) { .top-slider .bg { width: 100% } } .top-slider .box { position: absolute; bottom: 0; right: 0 } .top-slider .box .box1, .top-slider .box .box2, .top-slider .box .box3, .top-slider .box .box4 { float: left; text-align: center; max-height: 95px; overflow: hidden } .top-slider .box .box1 { background: rgba(33, 194, 234, 0.7); padding: 15px 0; width: 215px } .top-slider .box .box1 h1 { font-family: "HelveticaNeueLTStd-ThCn"; color: #ffffff; font-size: 44px } .top-slider .box .box1 p { font-family: "HelveticaNeueLTStd-ThCn"; color: #ffffff; font-size: 22px; margin-top:-5px; } .price-box .price { font-family: "HelveticaNeueLTStd-ThCn"; color: #ffffff; font-size: 44px; } .top-slider .box .box2, .top-slider .box .box4 { background: rgba(0, 0, 0, 0.7); text-align: center; line-height: 95px; width: 215px; } .top-slider .box .box2 p, .top-slider .box .box4 p { font-family: "HelveticaNeueLTStd-ThCn"; color: #ffffff; font-size: 44px } .top-slider .box .box2 p a, .top-slider .box .box4 p a{ color: #ffffff; } .top-slider .box .box3 { background: rgba(33, 194, 234, 0.7); padding: 18px 0; width: 135px } section.music-bluetooth .fp-tableCell { vertical-align: top } section.music-bluetooth h1 { font-family: "HelveticaNeueLTStd-Cn"; color: #ffffff; font-size: 85px; text-transform: uppercase; text-align: left; margin-bottom: 50px; text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.8); padding-top: 100px; padding-left: 5vw } section.music-bluetooth p { font-family: "HelveticaNeueLTStd-Cn"; color: #ffffff; font-size: 30px; text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.8); width: 100%; text-align: left; position: absolute; bottom: 1vw; padding-left: 5vw } @media all and (min-width: 768px) { section.music-bluetooth .text1 { font-family: "HelveticaNeueLTStd-ThCn"; bottom: 44%; font-size: 2vw } section.music-bluetooth .text2 { font-family: "HelveticaNeueLTStd-ThCn"; bottom: 44%; font-size: 2vw; right: 2vw; left: auto; text-align: right } } @media all and (max-width: 767px) { section.music-bluetooth h1 { font-size: 15vw !important; padding-top: 15vw !important; font-family: "HelveticaNeueLTStd-Cn"; margin-bottom: 5vw; text-align: center; padding-left: 0 } section.music-bluetooth p { position: relative; bottom: auto !important; max-width: 100% !important; font-size: 4vw !important; text-align: center; padding: 0 18vw; left: 0 !important; line-height: 6vw } section.music-bluetooth p br { display: none } section.music-bluetooth p.text2 { position: absolute; bottom: 2vw !important } } section.emo-slider { position: relative; pointer-events: none } section.emo-slider .slider-nav { pointer-events: all } section.emo-slider .slick-slider { max-height: calc(100vh - 180px); overflow: hidden } section.emo-slider .slick-slider img { height: 100%; width: auto } section.emo-slider .slick-slider .box { position: absolute; right: 5vw; top: 10vw; background: rgba(255, 255, 255, 0.67); padding: 30px 25px; max-width: 35vw } section.emo-slider .slick-slider .box h1 { font-family: "HelveticaNeueLTStd-ThCn"; color: #3a3a3a; font-size: 5vw; text-transform: uppercase; text-align: right; margin-bottom: 30px } section.emo-slider .slick-slider .box p { font-family: "HelveticaNeueLTStd-Cn"; color: #3a3a3a; font-size: 1.6vw; text-align: center } section.emo-slider .slider-nav { background: #3a3a3a; width: 100% } @media all and (min-width: 768px) { section.emo-slider .slider-nav { left: 0 } } section.emo-slider .slider-nav .slick-list { padding: 15px } section.emo-slider .slider-nav .slick-list .slick-slide { outline: none } section.emo-slider .slider-nav .slick-list .slick-slide img { max-height: 150px; width: auto; outline: none } @media all and (max-width: 767px) { section.emo-slider .slider-nav .slick-list .slick-slide { text-align: center } section.emo-slider .slider-nav .slick-list .slick-slide img { display: inline-block } } @media all and (max-width: 767px) { section.emo-slider .slider-nav .slick-list .slick-slide { text-align: center } section.emo-slider .slider-nav .slick-list .slick-slide img { height: 30vw; max-height: 150px } } section.emo-slider .slick-prev { background: #3a3a3a url("../img/emo-slider/arrow-left.png") no-repeat center center; position: absolute; width: 100px; height: 167px; cursor: pointer; z-index: 99; top: 50%; left: 0; margin-top: -85px; border: none; outline: none; font-size: 0; color: transparent } @media all and (max-width: 479px) { section.emo-slider .slick-prev { zoom: 0.8 } } section.emo-slider .slick-next { background: #3a3a3a url("../img/emo-slider/arrow-right.png") no-repeat center center; position: absolute; width: 100px; height: 167px; cursor: pointer; z-index: 99; top: 50%; right: 0; margin-top: -85px; border: none; outline: none; font-size: 0; color: transparent } @media all and (max-width: 479px) { section.emo-slider .slick-next { zoom: 0.8 } } section.emo-slider .slick-slide { max-height: 900px; position: relative } @media all and (max-width: 767px) { section.emo-slider { height: auto !important } section.emo-slider .slick-slider { max-height: inherit !important } section.emo-slider .slick-slider img { width: auto; height: 130vw; max-width: inherit } section.emo-slider .slick-slider .box { left: 0; top: 0; max-width: 100%; right: auto; text-align: center; bottom: auto; padding: 5vw } section.emo-slider .slick-slider .box h1 { text-align: center; margin-top: 15vw; font-size: 12vw; font-family: "HelveticaNeueLTStd-Cn"; margin-bottom: 3vw } section.emo-slider .slick-slider .box p { text-align: center !important; font-size: 4vw } section.emo-slider .fp-tableCell { vertical-align: top; height: inherit !important } } /*#fp-nav,*/ #back-top { display: none !important } /* @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi) { body{border:4px solid red;} } */ /* Minimum aspect ratio */ @media only screen and (-webkit-min-device-pixel-ratio: 2){ #section1.intro .titles {top: 65%;left: 57%;} #section1.intro .features .feat-left .feat-imgs {margin-top: 47px;} #section1.intro .features .feat-left {margin-top: 39vh;width: 57%;} #section8 .musik-cont-overlay {width: 65%;padding: 30px 40px;} #section8 .musik-cont-overlay .musik-right span {font-size: 12px;} #section8 .musik-cont-overlay .musik-right {margin-top: 6.5vh;} #section9 .cat-tires-cont {width: 70vw;left: 40vw;top: 34vh;} #section9 .cat-tires-cont .cont2 {width: 50%;margin-top: 19vh;} #section9 .cat-tires-cont .cont2 p {width: 32%;} #section12 .safety-first-cont {width: 83vw;} #section12 .safety-first-cont .safety-first-left .self-balancing h3 {padding: 2vh 0;} #section12 .safety-first-cont .steuerung .steuerung-cont {top: 11vh;left: 20vw;width: 12vw;padding: 5px 15px 5px 25px;} #section15.load-background {background: url(../img/brandstore/brandstore-bg.jpg) no-repeat center;background-size: 100% 100%;} } /* @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 13/10), only screen and (min-resolution: 120dpi){ body{border:4px solid red;} } */