*, html { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -o-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: 0; padding: 0; outline: none; word-break: break-word; } *::before, *::after, html::before, html::after { -webkit-box-sizing: border-box; box-sizing: border-box; } a, a:visited, a:hover { text-decoration: none; } ul { list-style-type: none; } audio, canvas, iframe, img, svg, video { vertical-align: middle; } fieldset { border: 0; margin: 0; padding: 0; } textarea { resize: vertical; } select { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; border-radius: 0px; } select::-ms-expand { /* for IE 11 */ display: none; border: none; border-radius: 0px; } input[type=date]::-webkit-inner-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; display: none; } ::-webkit-input-placeholder, :-moz-placeholder, ::-moz-placeholder, :-ms-input-placeholder { color: #E2E2E2; } /** * Owl Carousel v2.2.0 * Copyright 2013-2016 David Deutsch * Licensed under MIT (https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE) */ /* * Owl Carousel - Core */ .owl-carousel, .owl-carousel .owl-item { display: none; width: 100%; -webkit-tap-highlight-color: transparent; /* position relative and z-index fix webkit rendering fonts issue */ position: relative; z-index: 1; } .owl-stage { position: relative; -ms-touch-action: pan-Y; } .owl-stage:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .owl-stage-outer { position: relative; overflow: hidden; /* fix for flashing background */ -webkit-transform: translate3d(0px, 0px, 0px); } .owl-item { position: relative; min-height: 1px; float: left; -webkit-backface-visibility: hidden; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } .owl-nav.disabled, .owl-dots.disabled { display: none; } .owl-nav .owl-prev, .owl-nav .owl-next, .owl-dot { cursor: pointer; cursor: hand; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel.owl-loaded { display: block; } .owl-carousel.owl-loading { opacity: 0; display: block; } .owl-carousel.owl-hidden { opacity: 0; } .owl-carousel.owl-refresh .owl-item { visibility: hidden; } .owl-carousel.owl-drag .owl-item { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel.owl-grab { cursor: move; cursor: -webkit-grab; cursor: grab; } .owl-carousel.owl-rtl { direction: rtl; } .owl-carousel.owl-rtl .owl-item { float: right; } /* No Js */ .no-js { display: block; } /* * Owl Carousel - Animate Plugin */ .animated { -webkit-animation-duration: 1000ms; animation-duration: 1000ms; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .owl-animated-in { z-index: 0; } .owl-animated-out { z-index: 1; } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } /* * Owl Carousel - Auto Height Plugin */ .owl-height { -webkit-transition: height 250ms ease-in-out; transition: height 250ms ease-in-out; } /* * Owl Carousel - Lazy Load Plugin */ .owl-item .owl-lazy { opacity: 0; -webkit-transition: opacity 400ms ease; transition: opacity 400ms ease; } .owl-item img.owl-lazy { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } /* * Owl Carousel - Video Plugin */ .owl-video-wrapper { position: relative; height: 100%; background: #000; } .owl-video-play-icon { position: absolute; height: 80px; width: 80px; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; background: url("owl.video.play.png") no-repeat; cursor: pointer; z-index: 1; -webkit-backface-visibility: hidden; transition: -webkit-transform 100ms ease; -webkit-transition: -webkit-transform 100ms ease; transition: transform 100ms ease; transition: transform 100ms ease, -webkit-transform 100ms ease; } .owl-video-play-icon:hover { -webkit-transform: scale(1.3, 1.3); transform: scale(1.3, 1.3); } .owl-video-playing .owl-video-tn, .owl-video-playing .owl-video-play-icon { display: none; } .owl-video-tn { opacity: 0; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: contain; -webkit-transition: opacity 400ms ease; transition: opacity 400ms ease; } .owl-video-frame { position: relative; z-index: 1; height: 100%; width: 100%; } /*! * animate.css -http://daneden.me/animate * Version - 3.5.2 * Licensed under the MIT license - http://opensource.org/licenses/MIT * * Copyright (c) 2017 Daniel Eden */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } .animated.bounceIn, .animated.bounceOut, .animated.flipOutX, .animated.flipOutY { -webkit-animation-duration: 0.75s; animation-duration: 0.75s; } @-webkit-keyframes bounce { 20%, 53%, 80%, from, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } } @keyframes bounce { 20%, 53%, 80%, from, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%, 43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom; } @-webkit-keyframes flash { 50%, from, to { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 50%, from, to { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } @-webkit-keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes pulse { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @-webkit-keyframes shake { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } @keyframes shake { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } .shake { -webkit-animation-name: shake; animation-name: shake; } @-webkit-keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } .headShake { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-name: headShake; animation-name: headShake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } @keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } .swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .tada { -webkit-animation-name: tada; animation-name: tada; } @-webkit-keyframes wobble { from { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: none; transform: none; } } @keyframes wobble { from { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: none; transform: none; } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes jello { 11.1%, from, to { -webkit-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.39062deg) skewY(0.39062deg); transform: skewX(0.39062deg) skewY(0.39062deg); } 88.8% { -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); transform: skewX(-0.19531deg) skewY(-0.19531deg); } } @keyframes jello { 11.1%, from, to { -webkit-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.39062deg) skewY(0.39062deg); transform: skewX(0.39062deg) skewY(0.39062deg); } 88.8% { -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); transform: skewX(-0.19531deg) skewY(-0.19531deg); } } .jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes bounceIn { 20%, 40%, 60%, 80%, from, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bounceIn { 20%, 40%, 60%, 80%, from, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { 60%, 75%, 90%, from, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInDown { 60%, 75%, 90%, from, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: none; transform: none; } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 60%, 75%, 90%, from, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInLeft { 60%, 75%, 90%, from, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } to { -webkit-transform: none; transform: none; } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 60%, 75%, 90%, from, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInRight { 60%, 75%, 90%, from, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } to { -webkit-transform: none; transform: none; } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { 60%, 75%, 90%, from, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInUp { 60%, 75%, 90%, from, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } from { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDownBig { from { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeftBig { from { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRightBig { from { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUpBig { from { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes fadeOutDownBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes fadeOutLeftBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes fadeOutRightBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes fadeOutUpBig { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); transform: perspective(400px) scale3d(0.95, 0.95, 0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); transform: perspective(400px) scale3d(0.95, 0.95, 0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @keyframes flipOutX { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } @keyframes flipOutY { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } @-webkit-keyframes lightSpeedIn { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } to { -webkit-transform: none; transform: none; opacity: 1; } } @keyframes lightSpeedIn { from { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } to { -webkit-transform: none; transform: none; opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { from { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } @keyframes lightSpeedOut { from { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateIn { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateOut { from { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } @keyframes rotateOut { from { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } @keyframes rotateOutDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } @keyframes rotateOutUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } @keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } .hinge { -webkit-animation-name: hinge; animation-name: hinge; } @-webkit-keyframes jackInTheBox { from { opacity: 0; -webkit-transform: scale(0.1) rotate(30deg); transform: scale(0.1) rotate(30deg); -webkit-transform-origin: center bottom; transform-origin: center bottom; } 50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 70% { -webkit-transform: rotate(3deg); transform: rotate(3deg); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes jackInTheBox { from { opacity: 0; -webkit-transform: scale(0.1) rotate(30deg); transform: scale(0.1) rotate(30deg); -webkit-transform-origin: center bottom; transform-origin: center bottom; } 50% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 70% { -webkit-transform: rotate(3deg); transform: rotate(3deg); } to { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } .jackInTheBox { -webkit-animation-name: jackInTheBox; animation-name: jackInTheBox; } @-webkit-keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes rollIn { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: none; transform: none; } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } @-webkit-keyframes rollOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } @keyframes rollOut { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } @-webkit-keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; } @-webkit-keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; } @-webkit-keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; } @-webkit-keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } @-webkit-keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } @keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } .zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft; } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } .zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight; } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; } @-webkit-keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInDown { from { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInLeft { from { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInRight { from { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } @-webkit-keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } @-webkit-keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes slideOutLeft { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes slideOutRight { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes slideOutUp { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } .switchcookie { background-color: rgb(27, 60, 86); color: #ffffff; padding: 16px 0 0 16px; width: 100%; max-width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; position: fixed; bottom: 0; left: 0; right: 0; -webkit-transition: all 200ms ease; transition: all 200ms ease; z-index: 9999; } .switchcookie * { z-index: 9999; position: relative; } .switchcookie p { color: currentColor; } .switchcookie p, .switchcookie a { margin: 0 16px 16px 0 !important; } @media only screen and (min-width: 640px) { .switchcookie { padding: 48px 0 0 48px; } .switchcookie p, .switchcookie a { margin: 0 48px 48px 0 !important; } } @media only screen and (min-width: 1200px) { .switchcookie { padding: 48px 0 0 96px; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .switchcookie p, .switchcookie a { margin: 0 96px 48px 0 !important; } } .switchcookie p { width: auto; text-align: center; padding: 0 !important; } .switchcookie.disabled { opacity: 0; -webkit-transform: translateY(100%); transform: translateY(100%); pointer-events: none; } .button { border: 0px; font-family: "Poppins", sans-serif; font-size: 12px; line-height: 1.4em; font-weight: 700; background: #ffffff; color: #212121; display: inline-block; position: relative; width: auto; padding: 12px 16px; text-align: center; -webkit-transition: all 250ms ease; transition: all 250ms ease; margin: 0; text-transform: uppercase; min-width: 200px; width: auto; max-width: 100%; } .button #text { z-index: 10; } .button.cn-button { padding: 12px 76px 12px 16px !important; } .button:hover { cursor: pointer; background-color: transparent; } .button:hover::before { left: -20px; opacity: 0; } .button::before { position: absolute; height: 100px; right: -40px; left: calc(100% - 60px); top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); border-radius: 50%; -webkit-transition: left 250ms ease, opacity 100ms ease; transition: left 250ms ease, opacity 100ms ease; } .button::after { content: ""; background-image: url("../img/icon/arrow/black.svg"); background-position: center; background-size: contain; background-repeat: no-repeat; position: absolute; left: calc(100% - 60px); top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); height: 16px; width: 60px; } .button--green-blue, .ginput_container_fileupload .gform_fileupload_multifile .gform_drop_area button { background-color: rgb(117, 131, 47); color: white; overflow: hidden; padding: 12px 76px 12px 16px; } .button--green-blue::before, .ginput_container_fileupload .gform_fileupload_multifile .gform_drop_area button::before { content: ""; background-color: rgb(27, 60, 86); } .button--green-blue::after, .ginput_container_fileupload .gform_fileupload_multifile .gform_drop_area button::after { content: ""; background-image: url("../img/icon/arrow/white.svg"); color: #ffffff; } .button--green-blue:hover, .ginput_container_fileupload .gform_fileupload_multifile .gform_drop_area button:hover { background-color: rgb(27, 60, 86); } .button--read-more { margin: 0 0 0 auto; justify-self: flex-end; background-color: transparent; padding: 12px 76px 12px 0px; color: rgb(117, 131, 47); min-width: 0; width: -webkit-max-content; width: -moz-max-content; width: max-content; } .button--read-more::after { background-image: url("../img/icon/arrow/secondary.svg"); } .button--blue-white { background-color: rgb(27, 60, 86); color: #ffffff; overflow: hidden; padding: 12px 60px 12px 16px; } .button--blue-white::before { content: ""; background-color: #ffffff; } .button--blue-white::after { content: ""; color: rgb(27, 60, 86); } .button--blue-white:hover { color: #212121; background-color: #ffffff; } .button--green-white { background-color: rgb(117, 131, 47); color: white; overflow: hidden; padding: 12px 60px 12px 16px; } .button--green-white::before { content: ""; background-color: #ffffff; } .button--green-white::after { content: ""; color: rgb(27, 60, 86); } .button--green-white:hover { color: #212121; background-color: #ffffff; } div.buttons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } div.buttons a { margin: auto; } div.buttons a + a { margin-top: 20px; } @media only screen and (min-width: 1200px) { div.buttons { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } div.buttons a { margin-left: auto; margin-right: 0; } div.buttons a + a { margin-top: 0; margin-left: 20px; } } .slider { opacity: 0; -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; height: 0px; position: relative; width: 100%; } .slider.owl-loaded { opacity: 1; height: auto; } .slider .owl-nav { position: absolute; bottom: 20px; left: 0; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); width: 100%; pointer-events: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-left: 20px; padding-right: 20px; } @media only screen and (min-width: 1200px) { .slider .owl-nav { width: 50%; left: 50%; } } @media only screen and (min-width: 640px) { .slider .owl-nav { padding-left: 40px; padding-right: 40px; } } @media only screen and (min-width: 1200px) { .slider .owl-nav { padding-left: 80px; padding-right: 80px; } } .slider .owl-nav.disabled { display: none; } .slider .owl-nav .owl-prev, .slider .owl-nav .owl-next { min-width: 0; width: 50px; height: 50px; border-radius: 0; font-size: 20px; pointer-events: auto; background-color: rgb(117, 131, 47); border-radius: 50%; margin: auto; margin-left: 0; margin-bottom: 0; padding: 0 !important; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .slider .owl-nav .owl-prev:nth-child(2), .slider .owl-nav .owl-next:nth-child(2) { margin-left: auto; margin-right: 0; } .slider .owl-nav .owl-prev i, .slider .owl-nav .owl-next i { font-size: 20px; text-shadow: none !important; color: #ffffff !important; font-weight: 400; -webkit-transition: color 250ms ease-in-out; transition: color 250ms ease-in-out; border: none; margin: auto; } .slider .owl-nav .owl-prev:hover, .slider .owl-nav .owl-next:hover { background-color: rgb(27, 60, 86); } .slider .owl-nav .owl-prev:hover i, .slider .owl-nav .owl-next:hover i { color: #ffffff !important; } .slider .owl-dots { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; pointer-events: none; } .slider .owl-dots.disabled { display: none; } .slider .owl-dots .owl-dot { display: -webkit-box; display: -ms-flexbox; display: flex; height: 20px; width: 20px; border: none; position: relative; pointer-events: all; -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; background-color: transparent; padding: 0; margin: 0; min-width: 20px; } .slider .owl-dots .owl-dot + * { margin-left: 20px; } .slider .owl-dots .owl-dot span { height: 20px; width: 20px; margin: auto; background-color: #ffffff; } .slider .owl-dots .owl-dot.active span { background-color: rgb(27, 60, 86); } html { background: rgb(27, 60, 86); } html, body { max-width: 100%; overflow-x: hidden; } body { font-family: "Poppins", sans-serif; color: #000000; letter-spacing: 0.6px; background-color: #ffffff; font-size: 16px; line-height: 1.6; font-weight: 400; } body.active { overflow: hidden; } body.no-scroll { overflow: hidden; } main { position: relative; margin: 0; overflow: hidden; min-height: 100vh; } main.header-margin { margin: 0; } article { position: relative; z-index: 1; } article.flex { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } article.flex h1, article.flex h2, article.flex h3 { width: 100%; } section { padding-left: 20px; padding-right: 20px; } @media only screen and (min-width: 640px) { section { padding-left: 40px; padding-right: 40px; } } @media only screen and (min-width: 1200px) { section { padding-left: 80px; padding-right: 80px; } } section:not(.hero):not(.top):not(.bottom):not(.hero-small) .wrapper { opacity: 0; -webkit-transform: translateY(200px); transform: translateY(200px); -webkit-transition: opacity 300ms ease, -webkit-transform 300ms ease; transition: opacity 300ms ease, -webkit-transform 300ms ease; transition: opacity 300ms ease, transform 300ms ease; transition: opacity 300ms ease, transform 300ms ease, -webkit-transform 300ms ease; } @media only screen and (min-width: 1200px) { section:not(.hero):not(.top):not(.bottom):not(.hero-small) .wrapper { -webkit-transition-delay: 100ms; transition-delay: 100ms; -webkit-transition-duration: 600ms; transition-duration: 600ms; } } section:not(.hero):not(.top):not(.bottom):not(.hero-small) .wrapper.in-view { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } .wrapper { width: 100%; max-width: 1600px; margin: 0 auto; } .row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; } .row > .column { width: 100%; } .row > .column + .column { margin-top: 40px; } @media only screen and (min-width: 1200px) { .row > .column { width: calc(50% - 40px); } .row > .column + .column { margin-top: 0; } .row > .column:nth-of-type(2n-1) { margin-right: 80px; } } div.wysiwyg { margin: 80px auto; --spacing: 40px; } div.wysiwyg > * { max-width: 800px; margin-left: auto; margin-right: auto; margin-bottom: var(--spacing) !important; margin-top: 0; } div.wysiwyg > *:last-child() { margin-bottom: 0 !important; } div.wysiwyg h3 { margin-bottom: 0 !important; } div.wysiwyg h2, div.wysiwyg h3 { text-align: center; padding-bottom: 0; } div.wysiwyg p { padding: 0; } div.wysiwyg a { position: relative; font-style: italic; color: #212121; } div.wysiwyg a::before { content: ""; position: absolute; bottom: -2px; height: 2px; left: -5px; right: -5px; background-color: rgb(27, 60, 86); z-index: -1; -webkit-transition: height 250ms ease; transition: height 250ms ease; } div.wysiwyg a:hover::before { height: calc(1em + 8px); } div.wysiwyg ul li { position: relative; padding-left: 2em; } div.wysiwyg ul li::before { content: ""; position: absolute; background-color: rgb(27, 60, 86); left: 0.5em; top: 0.75em; height: 0.5em; width: 0.5em; } h1 { color: #000000; font-size: 28px; line-height: 1.4; font-family: "Poppins", sans-serif; font-weight: 300; padding: 0 0 40px 0; text-transform: uppercase; } @media only screen and (min-width: 640px) { h1 { font-size: 44px; } } h2 { font-size: 24px; font-weight: 400; color: rgb(27, 60, 86); line-height: 1.2; text-transform: uppercase; padding: 0; max-width: -webkit-max-content; max-width: -moz-max-content; max-width: max-content; width: 100%; text-align: center; } @media only screen and (min-width: 640px) { h2 { font-size: 32px; } } h2.light { color: #ffffff; } h2:empty { display: none; } h2 strong { font-weight: 700; } h3 { font-size: 18px; font-weight: 700; color: rgb(117, 131, 47); line-height: 1.2; text-transform: uppercase; padding: 0; } @media only screen and (min-width: 640px) { h3 { font-size: 20px; } } p { color: #212121; font-family: "Poppins", sans-serif; line-height: 1.6; letter-spacing: 0.4px; font-weight: 400; padding: 0; max-width: 800px; font-size: 16px; } p b { font-family: inherit; } p:empty { display: none; } p.dotdotdot { opacity: 0; -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } p.dotdotdot.loaded { opacity: 1; } p a, p a:visited, p a:active, p a:focus { color: rgb(117, 131, 47); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } p a:hover { color: #535d22; } .content__block .content__content img { height: 300px; width: 300px; border-radius: 50%; } .content__block .content__content h1, .content__block .content__content h2, .content__block .content__content h3, .content__block .content__content h4, .content__block .content__content p { color: #212121; } blockquote { color: rgb(27, 60, 86); position: relative; padding: 20px 20px 0 20px; font-size: 28px; line-height: 1.8; font-style: italic; border-left: 2px solid rgb(117, 131, 47); margin: 0 0 40px 0; } @media only screen and (min-width: 640px) { blockquote { padding: 40px 40px 0px 20px; } } @media only screen and (min-width: 1200px) { blockquote { padding: 40px 80px 0px 80px; } } blockquote::before { content: "\f10e"; top: 0; right: 0; font-family: "Font Awesome 5 Pro"; font-weight: 900; font-size: 28px; position: absolute; width: 40px; height: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: rgb(117, 131, 47); } @media only screen and (min-width: 1200px) { blockquote::before { font-size: 20px; } } @media only screen and (min-width: 640px) { blockquote::before { font-size: 16px; } } img { width: 100%; height: auto; } strong { font-weight: 600; } #cookie-notice { background: transparent !important; } .cookie-notice-container { font-family: "Poppins", sans-serif; font-size: 16px; line-height: 2; font-weight: 400; color: #ffffff; background: #000000 !important; padding: 0 20px; } .cookie-notice-container span { padding: 20px; margin: 0 !important; } .cookie-notice-container .button { margin: 20px !important; -webkit-transition: none; transition: none; } .loading { opacity: 0; -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .loading.page-loaded { opacity: 1; } ::-webkit-input-placeholder { color: #959595; opacity: 1; } ::-moz-placeholder { color: #959595; opacity: 1; } :-ms-input-placeholder { color: #959595; opacity: 1; } ::-ms-input-placeholder { color: #959595; opacity: 1; } ::placeholder { color: #959595; opacity: 1; } ::-moz-selection { background: rgb(200, 200, 200); text-shadow: none; } ::selection { background: rgb(200, 200, 200); text-shadow: none; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-transition: background-color 5000s ease-in-out 0s; transition: background-color 5000s ease-in-out 0s; } .header { height: 100px; max-height: 100px; margin: auto; position: relative; z-index: 300; background-color: #ffffff; background-color: transparent; padding-left: 20px; padding-right: 20px; -webkit-transition: background-color 100ms ease, -webkit-box-shadow 150ms ease; transition: background-color 100ms ease, -webkit-box-shadow 150ms ease; transition: background-color 100ms ease, box-shadow 150ms ease; transition: background-color 100ms ease, box-shadow 150ms ease, -webkit-box-shadow 150ms ease; position: absolute; top: 0; left: 0; width: 100%; } @media only screen and (min-width: 640px) { .header { padding-left: 40px; padding-right: 40px; } } @media only screen and (min-width: 1200px) { .header { padding-left: 80px; padding-right: 80px; } } .header .wrapper { height: 100%; max-height: 100px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; position: relative; } .header .wrapper .logo { min-height: 80px; width: auto; height: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #ffffff; } .header .wrapper .logo__image { display: inline-block; margin: auto; } .header .wrapper .logo__image img { height: auto; max-height: 40px; width: auto; position: relative; } .header .wrapper .contact { height: auto; margin: auto auto auto 40px; display: none; } @media only screen and (min-width: 1600px) { .header .wrapper .contact { display: block; } } .header .wrapper .contact a { color: rgb(117, 131, 47); font-size: 14px; } .header .wrapper .contact a + a { margin-left: 20px; } .header .wrapper .desktop-menu { height: auto; width: auto; margin: auto 0 auto 40px; display: none; } @media only screen and (min-width: 1600px) { .header .wrapper .desktop-menu { display: -webkit-box; display: -ms-flexbox; display: flex; } } .header .wrapper .desktop-menu ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .header .wrapper .desktop-menu ul li { width: auto; } .header .wrapper .desktop-menu ul li + li::before { content: ""; position: absolute; border-left: solid rgba(255, 255, 255, 0.2) 1px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); height: 8px; color: #ffffff; } .header .wrapper .desktop-menu ul a { position: relative; color: white; font-weight: 400; -webkit-transition: color 250ms ease; transition: color 250ms ease; text-transform: uppercase; letter-spacing: 2px; font-size: 12px; padding: 20px 20px; } .header .wrapper .desktop-menu ul a:hover, .header .wrapper .desktop-menu ul a .active { text-decoration: underline; } .header .wrapper .desktop-menu ul li.current-menu-item a { font-weight: 700; } .header:not(.Home), .header.scrolled { position: fixed; background-color: #ffffff; -webkit-box-shadow: 0px 9px 17px 2px rgba(0, 0, 0, 0.1); box-shadow: 0px 9px 17px 2px rgba(0, 0, 0, 0.1); } .header:not(.Home) .desktop-menu li::before, .header.scrolled .desktop-menu li::before { border-color: rgba(27, 60, 86, 0.2) !important; } .header:not(.Home) .desktop-menu a, .header.scrolled .desktop-menu a { color: rgb(27, 60, 86) !important; } .sub-menu { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; pointer-events: none; opacity: 0; z-index: -999; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-right: 0; } @media only screen and (min-width: 640px) { .sub-menu { opacity: 1; pointer-events: all; z-index: 1; } } .sub-menu__container { display: -webkit-box; display: -ms-flexbox; display: flex; height: 120px; padding: 0; } .sub-menu__button { margin: 0 0 0 10px; height: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .sub-menu__button:first-of-type { margin: 0; } .sub-menu__button a { color: #ffffff; -webkit-transition: 0.25s color ease-in-out !important; transition: 0.25s color ease-in-out !important; white-space: nowrap; overflow: hidden; } .sub-menu__button a::before { font-family: "Font Awesome 5 Pro"; font-weight: 300; font-size: 20px; margin: 10px; -webkit-transition: 0.25s all ease-in-out; transition: 0.25s all ease-in-out; } .sub-menu__button a:hover { cursor: pointer; color: rgb(27, 60, 86); } .sub-menu__button a:hover::before { color: rgb(27, 60, 86); } .sub-menu__button--phone a { white-space: nowrap; overflow: hidden; } .sub-menu__button--phone a::before { content: none; } .sub-menu__button--phone a:hover { color: rgb(117, 131, 47); } .sub-menu__button--support a { max-width: 40px; white-space: nowrap; overflow: hidden; } .sub-menu__button--support a::before { content: "\f590"; font-size: 24px; color: transparent !important; background-image: url("../img/headset.svg"); background-size: contain; background-position: center; background-repeat: no-repeat; width: 50px; height: 50px; } .sub-menu__button--support a:hover::before { background-image: url("../img/headset-secondary.svg"); } .sub-menu__button--mail a { max-width: 40px; white-space: nowrap; overflow: hidden; } .sub-menu__button--mail a::before { content: "\f0e0"; } .sub-menu__button--search a { max-width: 40px; white-space: nowrap; overflow: hidden; } .sub-menu__button--search a::before { content: "\f002"; } @media only screen and (min-width: 640px) { .sub-menu__button a { max-width: 40px; } .sub-menu__button--phone a::before { content: "\f095"; } } @media only screen and (min-width: 1200px) { .sub-menu__button a { max-width: -webkit-max-content; max-width: -moz-max-content; max-width: max-content; -webkit-transition: max-width 150ms 100ms ease-in-out; transition: max-width 150ms 100ms ease-in-out; } .sub-menu__button--phone a::before { content: none; } } .sub-menu a:hover::before { color: rgb(117, 131, 47); } .sub-menu.active { pointer-events: all; -webkit-animation: show-menu 0.5s ease-in-out forwards; animation: show-menu 0.5s ease-in-out forwards; top: 0px; position: fixed; } .sub-menu.active a { max-width: 40px; } .sub-menu.active a:hover::before { color: rgb(27, 60, 86); } .sub-menu.active .sub-menu__button--phone > a::before { content: "\f095"; } .sub-menu.active .sub-menu__button--support > a:hover::before { background-image: url("../img/headset-primary.svg"); } @media only screen and (min-width: 640px) { .sub-menu.active { left: auto; right: 80px; } } @media only screen and (min-width: 1200px) { .sub-menu.active a { max-width: 40px; } } @-webkit-keyframes show-menu { 0% { opacity: 0; } 40% { opacity: 0; z-index: 1; } 60% { opacity: 0; z-index: 1; } 100% { opacity: 1; z-index: 3; } } @keyframes show-menu { 0% { opacity: 0; } 40% { opacity: 0; z-index: 1; } 60% { opacity: 0; z-index: 1; } 100% { opacity: 1; z-index: 3; } } .main-menu { position: fixed; top: 0; right: -100%; height: 100%; background: rgb(27, 60, 86); z-index: 501; width: 100%; overflow-y: auto; -webkit-transition: 0.25s right ease-in-out; transition: 0.25s right ease-in-out; } @media only screen and (min-width: 640px) { .main-menu { width: 400px; } } .main-menu .main-menu__container { width: 100%; overflow: hidden; min-height: 100%; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 20px; } .main-menu .main-menu__container li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; right: -100%; -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .main-menu .main-menu__container li a { font-size: 16px; line-height: 2; padding: 10px 0; display: inline-block; color: rgba(255, 255, 255, 0.5); -webkit-transition: 0.25s all ease-in-out; transition: 0.25s all ease-in-out; text-transform: uppercase; } .main-menu .main-menu__container li a:hover { color: #ffffff; } .main-menu .main-menu__container li.current-menu-item > a, .main-menu .main-menu__container li.current-menu-parent > a, .main-menu .main-menu__container li.current-menu-ancestor > a { color: #ffffff; } .main-menu .main-menu__container li ul.sub-menu { display: none; } .main-menu .contact-info { margin: 0 20px; height: 100px; margin-bottom: -120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .main-menu .contact-info a { color: #ffffff; font-weight: 300; } .main-menu.active { right: 0; } .main-menu.active:after { right: 0; } .main-menu.active .main-menu__container li { right: 0; } .search-form { position: fixed; top: 0; left: 0px; width: 100%; height: 100%; background: rgb(117, 131, 47); -webkit-transition: 0.25s all ease-in-out 0.5s; transition: 0.25s all ease-in-out 0.5s; opacity: 0; visibility: hidden; z-index: 999; } .search-form:after { content: ""; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-image: url(../img/radar-background.png); background-size: 600px; background-position: bottom right; background-repeat: no-repeat; z-index: -1; opacity: 0.2; -webkit-transition: 0.5s right ease-in-out; transition: 0.5s right ease-in-out; } .search-form.active { opacity: 1; visibility: visible; -webkit-transition: 0.25s all ease-in-out; transition: 0.25s all ease-in-out; } .search-form form { position: relative; width: calc(100% - 40px); left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); pointer-events: auto; display: -webkit-box; display: -ms-flexbox; display: flex; border-radius: 25px; background: #ffffff; max-width: 480px; } .search-form form .searchinput-container { width: calc(100% - 50px); } .search-form form .searchinput-container .searchinput { height: 50px; width: 100%; background: transparent; border: none; font-family: "Poppins", sans-serif; font-size: 16px; line-height: 50px; border-radius: 25px 0 0 25px; font-weight: 400; color: #000000; padding: 0 20px; } .search-form form .searchsubmit-container { position: relative; width: 50px; height: 50px; background: rgb(27, 60, 86); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; border-radius: 25px; } .search-form form .searchsubmit-container::after { content: "\f002"; position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; line-height: 50px; text-align: center; font-family: "Font Awesome 5 Pro"; font-weight: 400; font-size: 20px; pointer-events: none; color: #ffffff; } .search-form form .searchsubmit-container .searchsubmit { margin: 0; width: 100%; height: 100%; background: transparent; position: relative; -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; border: none; } .search-form form .searchsubmit-container .searchsubmit:hover { cursor: pointer; } .search-form form .searchsubmit-container:hover { background: #0f212f; } .close-button, .menu-button { border-radius: 0%; width: 50px; height: 50px; margin: 26px 0 26px auto; position: relative; z-index: 998; top: 0px; border-radius: 50%; -webkit-transition: -webkit-transform 0.25s ease; transition: -webkit-transform 0.25s ease; transition: transform 0.25s ease; transition: transform 0.25s ease, -webkit-transform 0.25s ease; background-color: rgb(27, 60, 86); } @media only screen and (min-width: 1600px) { .close-button, .menu-button { display: none; } } .close-button a, .menu-button a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 30px; height: 100%; pointer-events: none; overflow: hidden; margin: auto; -webkit-transition: -webkit-transform 0.25s ease; transition: -webkit-transform 0.25s ease; transition: transform 0.25s ease; transition: transform 0.25s ease, -webkit-transform 0.25s ease; } .close-button a span, .menu-button a span { height: 2px; margin: 3px 0; width: 100%; -webkit-transition: 0.25s all ease-in-out; transition: 0.25s all ease-in-out; position: relative; background: #ffffff; border-radius: 2px; } .close-button a span:nth-child(3), .menu-button a span:nth-child(3) { margin-top: -5px; } .close-button.active, .menu-button.active { border-color: rgb(27, 60, 86); background-color: #ffffff; } .close-button.active a span, .menu-button.active a span { background: rgb(27, 60, 86); opacity: 0; } .close-button.active a span:nth-child(2), .close-button.active a span:nth-child(3), .menu-button.active a span:nth-child(2), .menu-button.active a span:nth-child(3) { -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 15px 1px; transform-origin: 15px 1px; opacity: 1; } .close-button.active a span:nth-child(3), .menu-button.active a span:nth-child(3) { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .close-button.active:hover a span, .menu-button.active:hover a span { background-color: #212121; } .close-button.active::before, .menu-button.active::before { opacity: 1; } .close-button.background::before, .close-button.scroll::before, .menu-button.background::before, .menu-button.scroll::before { opacity: 1; } .close-button:hover, .menu-button:hover { cursor: pointer; } .close-button:hover span, .menu-button:hover span { background: #212121; } .close-button { z-index: 999; } .scroll-top-button { width: 40px; height: 40px; position: relative; z-index: 0; position: fixed; right: 24px; margin: 40px 0; top: auto; bottom: 0; opacity: 0; pointer-events: none; -webkit-transition: opacity 0.25s ease-in-out, background-color 0.25s ease-in-out; transition: opacity 0.25s ease-in-out, background-color 0.25s ease-in-out; } .scroll-top-button.show { opacity: 1; pointer-events: all; } .scroll-top-button.show a { pointer-events: all; } .scroll-top-button a { display: block; width: 100%; height: 100%; pointer-events: none; overflow: hidden; } .scroll-top-button a:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transform: rotate(45deg); transform: rotate(45deg); background: #486043; } .scroll-top-button a::after { content: "\f176"; display: block; position: relative; width: 100%; height: 100%; text-align: center; line-height: 40px; font-family: "Font Awesome 5 Pro"; font-weight: 400; font-size: 16px; color: #ffffff; -webkit-transition: 0.5s all ease-in-out; transition: 0.5s all ease-in-out; } .scroll-top-button:hover { cursor: pointer; } section.hero { --min-height: 500px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; z-index: 0; overflow: hidden; padding: 0 !important; width: 100%; min-height: var(--min-height); background-color: rgb(238, 238, 238); } section.hero::before { content: ""; position: absolute; top: 0; left: 0; height: 100px; width: 100%; background-color: #ffffff; } section.hero .logo { display: block; position: absolute; top: 290px; right: 40px; height: 100px; width: 100px; z-index: 21; background-color: #ffffff; border-radius: 50%; background-image: url("../img/icon.svg"); background-size: 60%; background-position: center; background-repeat: no-repeat; } @media only screen and (min-width: 640px) { section.hero .logo { top: 500px; height: 200px; width: 200px; } } @media only screen and (min-width: 1200px) { section.hero .logo { top: auto; right: auto; bottom: 160px; left: 50%; height: 200px; width: 200px; -webkit-transform: translateX(-50%); transform: translateX(-50%); } } section.hero .hero__slider { height: 100%; width: 100%; } section.hero .hero__slider .slider { position: relative; height: 100%; width: 100%; } section.hero .hero__slider .slider .owl-stage { min-height: var(--min-height); height: 100vh; width: 100%; } section.hero .hero__slider .slider .owl-dots { display: none !important; } section.hero .hero__slider .slider__container { margin-top: 100px; position: relative; } @media only screen and (min-width: 1200px) { section.hero .hero__slider .slider__container { margin-top: 0; position: absolute; top: 0; left: 0; height: 100vh; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; overflow: hidden; } } section.hero .hero__slider .slider__container .row { width: 100%; } section.hero .hero__slider .slider__container .slider__image { position: relative; height: 240px; width: 100%; background-size: cover; } @media only screen and (min-width: 640px) { section.hero .hero__slider .slider__container .slider__image { height: 500px; } } @media only screen and (min-width: 1200px) { section.hero .hero__slider .slider__container .slider__image { position: absolute; bottom: 80px; left: 40%; height: calc(100vh - 80px); height: 1200px; width: 1400px; border-radius: 50% 50% 50% 50%; background-size: cover; background-position: top right; background-repeat: no-repeat; overflow: hidden; } section.hero .hero__slider .slider__container .slider__image::before { content: ""; position: absolute; height: calc(100vh - 80px); right: 0; bottom: 0; left: 0; background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(27, 60, 86)), color-stop(40%, transparent)); background-image: linear-gradient(rgb(27, 60, 86) 0%, transparent 40%); } } section.hero .hero__slider .slider__container .content { padding: 40px; padding-left: 20px; padding-right: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } @media only screen and (min-width: 640px) { section.hero .hero__slider .slider__container .content { padding-left: 40px; padding-right: 40px; } } @media only screen and (min-width: 1200px) { section.hero .hero__slider .slider__container .content { padding-left: 80px; padding-right: 80px; } } @media only screen and (min-width: 1200px) { section.hero .hero__slider .slider__container .content { position: absolute; left: 50%; top: 50%; width: 1600px; max-width: 100%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } section.hero .hero__slider .slider__container .content span { margin-bottom: 40px; text-transform: uppercase; font-weight: 700; color: rgb(200, 200, 200); } section.hero .hero__slider .slider__container .content span:empty { display: none; } section.hero .hero__slider .slider__container .content h2 { text-align: left; font-size: 28px; font-weight: 400; color: rgb(27, 60, 86); text-transform: uppercase; } @media only screen and (min-width: 640px) { section.hero .hero__slider .slider__container .content h2 { font-size: 36px; } } @media only screen and (min-width: 1200px) { section.hero .hero__slider .slider__container .content h2 { font-size: 44px; } } section.hero .hero__slider .slider__container .content h2 strong { font-weight: 700; color: rgb(117, 131, 47); } section.hero .hero__slider .slider__container .content .buttons { margin-top: 40px; } section.hero .hero__slider .slider__container .content .buttons:empty { display: none; } section.hero div.social { width: 100%; height: 32px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; justify-self: flex-start; margin-top: 40px; margin-left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; } section.hero div.social.desktop { display: none; } @media only screen and (min-width: 1200px) { section.hero div.social { position: absolute; left: calc(50% + 80px); bottom: 80px; width: 1600px; max-width: 100%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } section.hero div.social.desktop { display: -webkit-box; display: -ms-flexbox; display: flex; } section.hero div.social.mobile { display: none; } } section.hero div.social p { color: rgb(27, 60, 86); padding: 0; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; font-size: 14px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } section.hero div.social a { width: 32px; height: 32px; background-size: 50%; background-position: center; background-repeat: no-repeat; -webkit-transition: opacity 250ms ease; transition: opacity 250ms ease; opacity: 0.5; } section.hero div.social a:hover { opacity: 0.7; } section.hero div.social a.facebook { background-image: url("../img/icon/facebook/secondary.svg"); background-size: 40%; } section.hero div.social a.twitter { background-image: url("../img/icon/twitter/secondary.svg"); } section.hero div.social a.instagram { background-image: url("../img/icon/instagram/secondary.svg"); } section.hero div.social a.linkedin { background-image: url("../img/icon/linkedin/secondary.svg"); } section.hero div.social a.youtube { background-image: url("../img/icon/youtube/secondary.svg"); } section.hero div.social * + * { margin-left: 16px; } section.hero-small { position: relative; margin-top: 100px; background-color: rgb(238, 238, 238); background-size: cover; background-position: center; background-repeat: no-repeat; margin-bottom: 50px; padding: 0; } @media only screen and (min-width: 640px) { section.hero-small { margin-bottom: 100px; } } @media only screen and (min-width: 1200px) { section.hero-small { padding-left: 20px; padding-right: 20px; } } @media only screen and (min-width: 1200px) and (min-width: 640px) { section.hero-small { padding-left: 40px; padding-right: 40px; } } @media only screen and (min-width: 1200px) and (min-width: 1200px) { section.hero-small { padding-left: 80px; padding-right: 80px; } } section.hero-small div.image { position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-color: rgb(27, 60, 86); background-position: center; background-size: cover; background-repeat: no-repeat; z-index: 1; overflow: hidden; } @media only screen and (min-width: 1200px) { section.hero-small div.image { position: absolute; top: 0; right: 0; bottom: 0; width: 60%; } section.hero-small div.image::after { content: ""; } } section.hero-small div.image::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(27, 60, 86)), color-stop(40%, transparent)); background-image: linear-gradient(rgb(27, 60, 86) 0%, transparent 40%); opacity: 0.4; } section.hero-small div.image::after { position: absolute; left: -100px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); height: 120vw; width: 120vw; border: 100px solid rgb(238, 238, 238); border-radius: 50%; z-index: 3; } section.hero-small .wrapper { height: 300px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; z-index: 2; overflow: hidden; } @media only screen and (min-width: 640px) { section.hero-small .wrapper { height: 420px; } } section.hero-small .wrapper h1 { position: relative; text-align: left; font-size: 28px; font-weight: 400; color: rgb(27, 60, 86); line-height: 1.2; text-transform: uppercase; z-index: 3; padding-left: 20px; } @media only screen and (min-width: 640px) { section.hero-small .wrapper h1 { font-size: 36px; padding-left: 40px; max-width: 40%; } } @media only screen and (min-width: 1200px) { section.hero-small .wrapper h1 { font-size: 44px; padding-left: 0; } } section.hero-small .wrapper h1 strong { font-weight: 700; color: rgb(117, 131, 47); } section.hero-small .wrapper h1::before { content: ""; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: -40px; width: 200%; height: 600px; border-radius: 50%; background-color: rgb(238, 238, 238); z-index: -1; } @media only screen and (min-width: 640px) { section.hero-small .wrapper h1::before { height: 840px; } } @media only screen and (min-width: 1200px) { section.hero-small .wrapper h1::before { content: none; } } section.hero-small .logo { display: block; position: absolute; bottom: 0; left: 50%; height: 100px; width: 100px; z-index: 21; background-color: #ffffff; border-radius: 50%; background-image: url("../img/icon.svg"); background-size: 60%; background-position: center; background-repeat: no-repeat; -webkit-transform: translate(-50%, 50%); transform: translate(-50%, 50%); } @media only screen and (min-width: 640px) { section.hero-small .logo { height: 200px; width: 200px; } } section.map { width: 100%; margin: 0 auto 80px; padding: 0; } section.map .wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; } section.map .map__container { width: 100%; height: auto; min-height: 300px; } @media only screen and (min-width: 1200px) { section.map .map__container { width: 50%; margin-bottom: 0; } } section.map .map__container > div { min-height: calc(100% + 40px); } section.map .info { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; padding: 80px; padding-left: 20px; padding-right: 20px; background-color: rgb(238, 238, 238); } @media only screen and (min-width: 640px) { section.map .info { padding-left: 40px; padding-right: 40px; } } @media only screen and (min-width: 1200px) { section.map .info { padding-left: 80px; padding-right: 80px; } } @media only screen and (min-width: 1200px) { section.map .info { width: 50%; } } @media only screen and (min-width: 1200px) { section.map .info { margin-bottom: 0; } } section.map .info span { display: block; width: 100%; } section.map .info span + span { margin-top: 40px; } section.map .info span p { width: 100%; text-align: left; } section.map .info span:not(.black) { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } section.map .info span:not(.black) p { margin: 0 auto; padding: 0; font-weight: 700; color: #212121; } section.map .info span.black { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; color: rgb(27, 60, 86); } section.map .info span.black a { color: currentColor; font-weight: 700; -webkit-transition: color 250ms ease; transition: color 250ms ease; width: 100%; display: block; } section.map .info span.black a:hover { color: rgb(117, 131, 47); } section.intro { padding: 80px 0 0; position: relative; padding-left: 20px; padding-right: 20px; } @media only screen and (min-width: 640px) { section.intro { padding-left: 40px; padding-right: 40px; } } @media only screen and (min-width: 1200px) { section.intro { padding-left: 80px; padding-right: 80px; } } section.intro .wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } section.intro .wrapper div.title { border-right: solid rgb(27, 60, 86) 1px; width: 100%; padding-right: 40px; padding-bottom: 40px; margin-left: auto; margin-right: auto; margin-right: -1px; } @media only screen and (min-width: 640px) { section.intro .wrapper div.title { margin-right: 0; width: -webkit-max-content; width: -moz-max-content; width: max-content; max-width: 50%; } } @media only screen and (min-width: 1200px) { section.intro .wrapper div.title { padding-right: 80px; } } section.intro .wrapper div.title span { display: block; text-align: right; margin-bottom: 40px; text-transform: uppercase; font-weight: 700; color: rgb(117, 131, 47); } section.intro .wrapper div.title span:empty { display: none; } section.intro .wrapper div.title h1 { font-size: 24px; line-height: 1.2; color: rgb(27, 60, 86); text-align: right; width: auto; margin-left: auto; } @media only screen and (min-width: 640px) { section.intro .wrapper div.title h1 { font-size: 32px; } } section.intro .wrapper div.text { width: 100%; padding-top: 40px; } @media only screen and (min-width: 640px) { section.intro .wrapper div.text { padding-left: 40px; width: 50%; } section.intro .wrapper div.text p { max-width: 400px; margin-right: auto; } } @media only screen and (min-width: 1200px) { section.intro .wrapper div.text { padding-left: 80px; } } section.services { position: relative; padding: 80px 0 0; padding-left: 20px; padding-right: 20px; } @media only screen and (min-width: 640px) { section.services { padding-left: 40px; padding-right: 40px; } } @media only screen and (min-width: 1200px) { section.services { padding-left: 80px; padding-right: 80px; } } section.services .wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } section.services .wrapper > h2 { padding-bottom: 40px; } section.services .wrapper > h2:empty { display: none; } section.services .wrapper > div.wysiwyg { margin-top: 0; margin-bottom: 0; } section.services .wrapper h2, section.services .wrapper div.wysiwyg { text-align: left; } @media only screen and (min-width: 640px) { section.services .wrapper h2, section.services .wrapper div.wysiwyg { text-align: center; } } div.services { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 80px !important; } div.services .service { background-color: rgb(117, 131, 47); padding: 80px 40px; width: 100%; margin-bottom: 80px; color: white; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media only screen and (min-width: 1200px) { div.services .service { width: calc(33.3333% - 53.3333px); } div.services .service:not(:nth-of-type(3n)) { margin-right: 80px; } } div.services .service.alt { background-color: rgb(27, 60, 86); } div.services .service.alt div.image { background-image: url("../img/icon-white-green.svg"); } div.services .service.alt span { text-align: center; } div.services .service.alt span a { color: #ffffff; font-weight: 600; } div.services .service *:not(a) { margin-bottom: 0; padding-bottom: 0; } div.services .service *:not(:last-child) { margin-bottom: 40px; } div.services .service .image { width: 80px; height: 80px; background-position: center; background-repeat: no-repeat; background-size: contain; } div.services .service h3 { color: currentColor; text-align: center; margin-bottom: 20px !important; } div.services .service p { color: currentColor; text-align: center; } div.services .service a { margin-top: auto; margin-bottom: 0; } div.services .service:nth-of-type(n+4) { display: none; } div.services.centered .service:nth-of-type(1) { margin-left: auto; } div.services.centered .service:nth-of-type(2) { margin-right: auto; } #homepage section.services .wrapper > h2, #homepage section.services .wrapper > div.wysiwyg, #service section.services .wrapper > h2, #service section.services .wrapper > div.wysiwyg { display: none; } #homepage section.services div.services, #service section.services div.services { margin-top: 0 !important; } section.projects { position: relative; background-color: rgb(238, 238, 238); } section.projects::before { content: ""; position: absolute; top: -10px; bottom: auto; height: 180px; left: 20px; width: 50vw; background-image: url("../img/moon/secondary.svg"); background-size: contain; background-position: left; background-repeat: no-repeat; pointer-events: none; } @media only screen and (min-width: 640px) { section.projects::before { height: 220px; } } @media only screen and (min-width: 1200px) { section.projects::before { left: 80px; height: auto; bottom: -90px; } } section.projects .wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 40px 0; } @media only screen and (min-width: 1200px) { section.projects .wrapper { padding: 80px 0; margin-bottom: 160px; } } section.projects .wrapper .title { width: 100%; } @media only screen and (min-width: 1200px) { section.projects .wrapper .title { width: calc(33.3333% - 53.3333px); } section.projects .wrapper .title + * { margin-left: 80px; } } section.projects .wrapper .project { width: 100%; } section.projects .wrapper .project:nth-child(2) { margin-bottom: 40px; } @media only screen and (min-width: 640px) { section.projects .wrapper .project { margin-bottom: 0; width: calc(50% - 40px); } section.projects .wrapper .project:nth-child(2) { margin-bottom: 0; } section.projects .wrapper .project + * { margin-left: 80px; } } @media only screen and (min-width: 1200px) { section.projects .wrapper .project { width: calc(33.3333% - 53.3333px); } } section.projects .wrapper .title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 80px; margin-left: 80px; } @media only screen and (min-width: 1200px) { section.projects .wrapper .title { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-bottom: 0; margin-left: 0; } } @media only screen and (min-width: 1600px) { section.projects .wrapper .title { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } @media only screen and (min-width: 1900px) { section.projects .wrapper .title { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } } section.projects .wrapper .title h2 { width: -webkit-max-content; width: -moz-max-content; width: max-content; text-align: left; color: rgb(27, 60, 86); font-weight: 400; } section.projects .wrapper div.project { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } section.projects .wrapper div.project span { width: 100%; margin-bottom: 20px; font-size: 18px; color: rgb(27, 60, 86); font-weight: 300; } section.projects .wrapper div.project div.image { width: 100%; height: 0; padding-bottom: 60%; background-size: cover; background-position: center; background-repeat: no-repeat; } section.projects .wrapper div.project img { width: 100%; } section.projects .wrapper div.project a { margin: 20px 0 0 auto; } section.projects-service { padding: 0; padding-left: 20px; padding-right: 20px; } @media only screen and (min-width: 640px) { section.projects-service { padding-left: 40px; padding-right: 40px; } } @media only screen and (min-width: 1200px) { section.projects-service { padding-left: 80px; padding-right: 80px; } } section.projects-service .wrapper .project { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-bottom: 80px; padding-top: 80px; border-bottom: 1px solid rgb(200, 200, 200); } section.projects-service .wrapper .project + .project { padding-top: 80px; } section.projects-service .wrapper .project img { background-color: rgb(27, 60, 86); width: 100%; height: auto; } @media only screen and (min-width: 640px) { section.projects-service .wrapper .project img { width: calc(50% - 40px); } } section.projects-service .wrapper .project div.content { width: 100%; } @media only screen and (min-width: 640px) { section.projects-service .wrapper .project div.content { width: calc(50% - 40px); } } section.projects-service .wrapper .project div.content h3 { margin-top: 20px; margin-bottom: 20px; } section.projects-service .wrapper .project div.content .wysiwyg { margin: 0 auto; } @media only screen and (min-width: 640px) { section.projects-service .wrapper .project:nth-child(2n) img { margin-left: 80px; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } } @media only screen and (min-width: 640px) { section.projects-service .wrapper .project:nth-child(2n) div.content { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } } @media only screen and (min-width: 640px) { section.projects-service .wrapper .project:nth-child(2n-1) div.content { margin-left: 80px; } } section.facts { padding: 80px 0 0; padding-left: 20px; padding-right: 20px; } @media only screen and (min-width: 640px) { section.facts { padding-left: 40px; padding-right: 40px; } } @media only screen and (min-width: 1200px) { section.facts { padding-left: 80px; padding-right: 80px; } } section.facts .wrapper { max-width: none; padding-bottom: 80px; border-bottom: 1px solid rgb(200, 200, 200); } section.facts h2 { margin: auto; margin-bottom: 40px; } section.facts p { margin: auto; text-align: center; } section.facts p strong { color: rgb(117, 131, 47); font-weight: 700; } section.facts div.list { width: 800px; max-width: 100%; margin: 40px auto 0; } section.facts div.list div.item { --icon-size: 32px; padding: 20px 0; line-height: 1.2; position: relative; text-align: center; font-weight: 600; font-size: 18px; border-bottom: solid rgb(117, 131, 47) 1px; } section.facts div.list div.item:last-child { border-bottom: none; } section.reviews { background-color: rgb(117, 131, 47); color: #212121; padding: 80px; padding-left: 20px; padding-right: 20px; position: relative; overflow: hidden; background-size: 80vw; background-position: center calc(100% - 80px); background-repeat: no-repeat; } @media only screen and (min-width: 640px) { section.reviews { padding-left: 40px; padding-right: 40px; } } @media only screen and (min-width: 1200px) { section.reviews { padding-left: 80px; padding-right: 80px; } } @media only screen and (min-width: 640px) { section.reviews { background-image: url("../img/moon/white-transparent-flipped.svg"); } } section.reviews::before, section.reviews::after { position: absolute; pointer-events: none; height: 100px; width: 100px; background-size: contain; background-position: center; background-repeat: no-repeat; } @media only screen and (min-width: 1200px) { section.reviews::before, section.reviews::after { content: ""; } } section.reviews::before { top: 80px; left: 80px; background-image: url("../img/quote/white-transparent.png"); } section.reviews::after { right: 80px; bottom: 80px; background-image: url("../img/quote/white-transparent-2.png"); } section.reviews * { z-index: 2; } section.reviews .wrapper .row { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } section.reviews .wrapper .row .column.title { min-height: 100%; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 80px; position: relative; } section.reviews .wrapper .row .column.title .icon { width: 120px; height: 120px; background-color: rgb(27, 60, 86); background-image: url("../img/like/white.svg"); background-size: 60px; background-position: center; background-repeat: no-repeat; border-radius: 50%; margin: 0 auto 40px; } section.reviews .wrapper .row .column.title h2 { text-align: center; margin: 0 auto; color: white; } section.reviews .wrapper .row .column.reviews__slider { width: 100%; } section.reviews .wrapper .row .column.reviews__slider .owl-stage { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } section.reviews .wrapper .row .column.reviews__slider .slider__container { padding-left: 4px; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } section.reviews .wrapper .row div.owl-dots { width: auto; height: auto; margin-top: 80px; } section.reviews .wrapper .row div.owl-nav { display: none; } .review div.image { height: 100px; width: 100px; border-radius: 50%; background-color: rgb(27, 60, 86); background-size: cover; background-position: center; } .review p { line-height: 1.6; font-size: 16px; color: white; } @media only screen and (min-width: 640px) { .review p { margin-left: 140px; } } .review p.review { margin-top: 20px; } @media only screen and (min-width: 640px) { .review p.review { margin-top: -60px; } } .review p.name { margin-top: 40px; font-weight: 700; } section.references { padding: 80px; padding-left: 20px; padding-right: 20px; } @media only screen and (min-width: 640px) { section.references { padding-left: 40px; padding-right: 40px; } } @media only screen and (min-width: 1200px) { section.references { padding-left: 80px; padding-right: 80px; } } section.references .wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; } section.references .wrapper h2 { margin: auto auto auto 0; padding-right: 40px; text-align: left; font-size: 20px; width: 50%; } @media only screen and (min-width: 960px) { section.references .wrapper h2 { width: 35%; font-size: 28px; } } @media only screen and (min-width: 1200px) { section.references .wrapper h2 { width: 25%; font-size: 36px; } } section.references .wrapper div.references__slider { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 50%; } @media only screen and (min-width: 960px) { section.references .wrapper div.references__slider { width: 65%; } } @media only screen and (min-width: 1200px) { section.references .wrapper div.references__slider { width: 75%; } } section.references .wrapper .slider { margin: auto; } section.references .wrapper .slider__container { border-left: 1px solid rgb(200, 200, 200); margin: auto; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 20px; height: 200px; } @media only screen and (min-width: 1200px) { section.references .wrapper .slider__container { padding: 40px; } } section.references .wrapper .slider__container img { max-height: 100%; max-width: 100%; height: auto; width: auto; margin: auto; } section.vacancies { padding: 80px; padding-left: 20px; padding-right: 20px; position: relative; overflow: hidden; background-color: rgb(238, 238, 238); } @media only screen and (min-width: 640px) { section.vacancies { padding-left: 40px; padding-right: 40px; } } @media only screen and (min-width: 1200px) { section.vacancies { padding-left: 80px; padding-right: 80px; } } section.vacancies .wrapper .row .column { width: 100%; margin-right: 0 !important; } section.vacancies .wrapper .row .column.info { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; margin-bottom: 40px; } section.vacancies .wrapper .row .column.info .icon { width: 120px; height: 120px; background-color: rgb(27, 60, 86); background-image: url("../img/arm/white.svg"); background-size: 60px; background-position: center; background-repeat: no-repeat; border-radius: 50%; margin: 0 auto 40px 0; } section.vacancies .wrapper .row .column.info h2 { text-align: left; color: #212121; font-weight: 700; text-transform: initial; margin-bottom: 40px; } @media only screen and (min-width: 640px) { section.vacancies .wrapper .row .column.info { width: calc(40% - 40px); } } section.vacancies .wrapper .row .column.vacancies { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } @media only screen and (min-width: 640px) { section.vacancies .wrapper .row .column.vacancies { width: calc(60% - 40px); margin-left: 80px; } } section.vacancies .wrapper .row .column.vacancies h2 { margin-bottom: 40px; color: rgb(27, 60, 86); font-weight: 700; } section.vacancies .wrapper .row .column.vacancies a.button { margin-top: 40px; margin-left: auto; margin-right: 0; -ms-flex-item-align: end; align-self: flex-end; } .vacancy { display: block; position: relative; width: 100%; height: auto; background-color: transparent; -webkit-transition: background-color 250ms ease; transition: background-color 250ms ease; } .vacancy + .vacancy { margin-top: 40px; } .vacancy h3 { color: #212121; line-height: 1.6; font-weight: 700; font-size: 16px; -webkit-transition: color 250ms ease; transition: color 250ms ease; padding-bottom: 0; margin-bottom: 0px; text-transform: initial; } .vacancy p { height: 30px; width: 100%; overflow: hidden; padding: 0; margin-bottom: 20px; display: block !important; } section.form { --bg: #f9f9f9; --fg: rgb(117, 131, 47); --bg-alt: #fff; --fg-alt: #333; background-color: rgb(238, 238, 238); padding: 80px; padding-left: 20px; padding-right: 20px; position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; } @media only screen and (min-width: 640px) { section.form { padding-left: 40px; padding-right: 40px; } } @media only screen and (min-width: 1200px) { section.form { padding-left: 80px; padding-right: 80px; } } section.form .wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } section.form .wrapper .card { padding: 80px; padding-left: 20px; padding-right: 20px; max-width: 900px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: rgba(255, 255, 255, 0.8); } @media only screen and (min-width: 640px) { section.form .wrapper .card { padding-left: 40px; padding-right: 40px; } } @media only screen and (min-width: 1200px) { section.form .wrapper .card { padding-left: 80px; padding-right: 80px; } } section.form .wrapper .card .logo { height: 100px; width: 100px; background-image: url("../img/icon.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; margin-bottom: 40px; } section.form .wrapper .card h2 { margin-bottom: 40px; min-width: 100%; color: rgb(117, 131, 47); } section.form .wrapper .card p { text-align: left; margin-bottom: 40px; } @media only screen and (min-width: 640px) { section.form .wrapper .card p { text-align: center; } } section.form .wrapper .card .form { width: 100%; max-width: none; margin: 0; } section.form .wrapper .card .form .gform_footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } section.form .wrapper .card .form .gform_footer button[type=submit] { width: 200px; } section.people { padding: 80px; padding-left: 20px; padding-right: 20px; background-color: rgb(238, 238, 238); } @media only screen and (min-width: 640px) { section.people { padding-left: 40px; padding-right: 40px; } } @media only screen and (min-width: 1200px) { section.people { padding-left: 80px; padding-right: 80px; } } section.people .wrapper h2 { text-align: center; margin: auto; } section.people .wrapper div.people { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; } section.people .wrapper div.people div.single { margin-top: 80px; width: 100%; } @media only screen and (min-width: 1000px) { section.people .wrapper div.people div.single { margin-left: 80px; width: calc(50% - 40px); } section.people .wrapper div.people div.single:nth-of-type(2n - 1) { margin-left: 0px; } } @media only screen and (min-width: 1600px) { section.people .wrapper div.people div.single { margin-left: 80px; width: calc(33.33333% - 53.3333px); } section.people .wrapper div.people div.single:nth-of-type(2n - 1) { margin-left: 80px; } section.people .wrapper div.people div.single:nth-of-type(3n - 2) { margin-left: 0px; } } section.people .wrapper div.people div.single .person { margin-bottom: 0; } section.people .wrapper div.people div.single .review { padding: 20px 0; background-color: #ffffff; } section.people .wrapper div.people div.single .review p { color: #212121 !important; margin-left: 20px !important; } section.people .wrapper div.people div.single .review * + * { margin-top: 10px; } section.people .wrapper div.people div.single .review a.phone, section.people .wrapper div.people div.single .review a.email, section.people .wrapper div.people div.single .review a.linkedin { position: relative; padding-left: 60px; width: 100%; display: block; color: rgb(117, 131, 47); } section.people .wrapper div.people div.single .review a.phone::before, section.people .wrapper div.people div.single .review a.email::before, section.people .wrapper div.people div.single .review a.linkedin::before { content: ""; position: absolute; left: 20px; top: 0; height: 20px; width: 20px; background-size: contain; background-position: center; background-repeat: no-repeat; } section.people .wrapper div.people div.single .review a.phone::before { background-image: url("../img/icon/phone.svg"); } section.people .wrapper div.people div.single .review a.email::before { background-image: url("../img/icon/mail.svg"); } section.people .wrapper div.people div.single .review a.linkedin::before { background-image: url("../img/icon/linkedin/grey.svg"); } .person { --image-size: 100px; position: relative; background-color: rgb(27, 60, 86); margin-bottom: 40px; height: 100px; padding: 20px 20px 20px 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .person div.image { position: absolute; left: 0; top: 0; height: var(--image-size); width: var(--image-size); background-color: rgb(27, 60, 86); background-size: cover; background-position: center; background-repeat: no-repeat; } .person p { color: currentColor; color: white; padding: 0; padding-left: 140px; line-height: 1.2; font-size: 13px; } .person p.name { font-weight: 700; } @media only screen and (min-width: 640px) { .person p { font-size: 16px; } } section.news { padding: 80px 0; padding-left: 20px; padding-right: 20px; } @media only screen and (min-width: 640px) { section.news { padding-left: 40px; padding-right: 40px; } } @media only screen and (min-width: 1200px) { section.news { padding-left: 80px; padding-right: 80px; } } section.news .wrapper h2 { color: rgb(27, 60, 86); font-weight: 600; text-align: center; width: 100%; margin: 0 auto 40px; } section.news .wrapper .news { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; } section.news .wrapper .news .news-item { width: 100%; margin-bottom: 40px; position: relative; background-color: rgb(117, 131, 47); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } section.news .wrapper .news .news-item.facebook { background-color: rgb(27, 60, 86); } @media only screen and (min-width: 640px) { section.news .wrapper .news .news-item { margin-right: 40px; width: calc(50% - 20px); } section.news .wrapper .news .news-item:nth-child(2n) { margin-right: 0; } } @media only screen and (min-width: 1200px) { section.news .wrapper .news .news-item { width: calc(33.3333% - 27px); } section.news .wrapper .news .news-item:nth-child(2n) { margin-right: 40px; } section.news .wrapper .news .news-item:nth-child(3n) { margin-right: 0; } } section.news .wrapper .news .news-item .image { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; background-color: rgb(117, 131, 47); background-size: cover; background-position: center; background-repeat: no-repeat; -webkit-transition: width 250ms ease; transition: width 250ms ease; overflow: hidden; } section.news .wrapper .news .news-item div.content { padding: 40px; padding-left: 20px; padding-right: 20px; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media only screen and (min-width: 640px) { section.news .wrapper .news .news-item div.content { padding-left: 40px; padding-right: 40px; } } @media only screen and (min-width: 1200px) { section.news .wrapper .news .news-item div.content { padding-left: 80px; padding-right: 80px; } } section.news .wrapper .news .news-item div.content *:not(last-child) { margin-bottom: 40px; } section.news .wrapper .news .news-item p.date { color: #ffffff; font-weight: 700; font-size: 14px; text-align: center; } section.news .wrapper .news .news-item p.text { color: #ffffff; text-align: center; } section.news .wrapper .news .news-item span.button { margin-top: auto; } section.news .wrapper .news .news-item:hover .image::after { opacity: 0.2; } section.news.facebook .wrapper .news .news-item { background-color: rgb(27, 60, 86); } #vacancies section.news, #news section.news { padding-top: 0; } section.news-single { margin: 100px auto 0; } section.news-single .wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } section.news-single img { margin: auto; background-color: rgb(27, 60, 86); width: 100%; max-width: 960px; } section.news-single .image { display: block; width: 100%; max-width: 960px; height: auto; padding-bottom: 56.25%; margin: auto; background-color: rgb(27, 60, 86); background-size: cover; background-position: center; } section.news-single h1 { text-transform: initial; width: 100%; max-width: 800px; margin: 40px auto; padding: 0; font-size: 20px; } @media only screen and (min-width: 640px) { section.news-single h1 { font-size: 28px; } } section.news-single span.date { display: block; width: 100%; max-width: 800px; margin: 0 auto 20px; font-weight: 700; } section.news-single .content { width: 100%; max-width: 800px; margin: auto; } * section.news-single .content * { margin-top: 20px; } section.news-single div.wysiwyg h2, section.news-single div.wysiwyg h3 { text-align: left; } #vacancy section.news-single { margin-bottom: 80px; } section.news.vac .wrapper .news { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .wrapper .news .vacancy { display: block; width: 800px; max-width: 100%; margin-left: auto; margin-right: auto; } .wrapper .news .vacancy p { height: 80px; } section.simple { padding-top: 80px; padding-bottom: 80px; position: relative; } section.simple#haaxmanmethode .wrapper { border-bottom: 1px solid rgb(200, 200, 200); padding-bottom: 80px !important; margin-bottom: 0 !important; } section.simple div.service { display: none; } section.simple h2 { margin: auto; max-width: 800px; text-align: left; padding-bottom: 40px; } section.simple h2:empty { display: none; } section.simple div.wysiwyg { margin-top: 0; margin-bottom: 0; } section.simple div.wysiwyg p, section.simple div.wysiwyg h3 { text-align: left; } #service section.simple:not(.simple-text-image) { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; padding: 0; margin-top: -50px; } @media only screen and (min-width: 640px) { #service section.simple:not(.simple-text-image) { margin-top: -100px; } } #service section.simple:not(.simple-text-image) div.service { padding: 40px; background-color: rgb(117, 131, 47); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; } @media only screen and (min-width: 1200px) { #service section.simple:not(.simple-text-image) div.service { width: 33.3333%; } } #service section.simple:not(.simple-text-image) div.service div.icon { height: 100px; width: 100px; background-size: contain; background-position: center; background-repeat: no-repeat; -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); margin: auto auto 40px; } #service section.simple:not(.simple-text-image) div.service h2 { text-align: center; margin: 0 auto auto; padding: 0; color: white; } #service section.simple:not(.simple-text-image) div.wrapper { margin: 50px auto; padding: 80px; padding-left: 20px; padding-right: 20px; width: 100%; } @media only screen and (min-width: 640px) { #service section.simple:not(.simple-text-image) div.wrapper { padding-left: 40px; padding-right: 40px; } } @media only screen and (min-width: 1200px) { #service section.simple:not(.simple-text-image) div.wrapper { padding-left: 80px; padding-right: 80px; } } @media only screen and (min-width: 640px) { #service section.simple:not(.simple-text-image) div.wrapper { margin: 100px auto; } } @media only screen and (min-width: 1200px) { #service section.simple:not(.simple-text-image) div.wrapper { width: 66.6667%; } } section.simple.simple-image-title { background-color: rgb(238, 238, 238); padding: 0; } section.simple.simple-image-title::before { content: none; } section.simple.simple-image-title .wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; max-width: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } section.simple.simple-image-title .image { width: 100%; height: 100%; min-height: 300px; background-color: rgb(117, 131, 47); background-size: cover; background-position: center; background-repeat: no-repeat; } @media only screen and (min-width: 640px) { section.simple.simple-image-title .image { width: 50%; min-height: 420px; } } section.simple.simple-image-title h2 { margin: 40px; } @media only screen and (min-width: 640px) { section.simple.simple-image-title h2 { max-width: calc(50% - 80px); } } section.simple.simple-text-image { position: relative; padding: 0; padding-left: 20px; padding-right: 20px; } @media only screen and (min-width: 640px) { section.simple.simple-text-image { padding-left: 40px; padding-right: 40px; } } @media only screen and (min-width: 1200px) { section.simple.simple-text-image { padding-left: 80px; padding-right: 80px; } } @media only screen and (min-width: 1200px) { section.simple.simple-text-image { padding: 80px; } } section.simple.simple-text-image::before { position: absolute; top: 0; bottom: 0; left: 80px; width: 50%; background-image: url("../img/moon/primary.svg"); background-size: contain; background-position: center; background-repeat: no-repeat; } @media only screen and (min-width: 1200px) { section.simple.simple-text-image::before { content: ""; } } section.simple.simple-text-image .column { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } section.simple.simple-text-image .wysiwyg { width: 100%; margin-bottom: 0; } section.simple.simple-text-image a { margin: 40px auto !important; } section.simple.simple-text-image .image { width: 100%; height: 100%; min-height: 300px; background-color: rgb(117, 131, 47); background-size: cover; background-position: center; background-repeat: no-repeat; } @media only screen and (min-width: 640px) { section.simple.simple-text-image .image { min-height: 420px; } } #service section.simple.simple-text-image { background-color: rgb(238, 238, 238); padding: 80px 0; padding-left: 20px; padding-right: 20px; } @media only screen and (min-width: 640px) { #service section.simple.simple-text-image { padding-left: 40px; padding-right: 40px; } } @media only screen and (min-width: 1200px) { #service section.simple.simple-text-image { padding-left: 80px; padding-right: 80px; } } #service section.simple.simple-text-image::before { content: none; } #service section.simple.simple-text-image .column { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } #service section.simple.simple-text-image .column .wysiwyg p { text-align: left; } #service section.simple.simple-text-image .column:nth-of-type(1) { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } #service section.simple.simple-text-image .column:nth-of-type(2) { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } #service section.simple.simple-text-image .column:nth-of-type(2n-1) { margin-right: 0px; } #service section.simple.simple-text-image .column:nth-of-type(2n) { margin-top: 0; margin-bottom: 40px; } @media only screen and (min-width: 1200px) { #service section.simple.simple-text-image .column:nth-of-type(2n) { margin-bottom: 0; margin-right: 80px; } } section.simple.simple-title-facts { padding-bottom: 80px; } section.simple.simple-title-facts::before { content: none; } section.simple.simple-title-facts .wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } section.simple.simple-title-facts h2 { margin: 40px; } @media only screen and (min-width: 640px) { section.simple.simple-title-facts h2 { max-width: calc(50% - 80px); } } section.simple.simple-title-facts div.list { width: 100%; } @media only screen and (min-width: 640px) { section.simple.simple-title-facts div.list { padding-left: 80px; width: 50%; } } section.simple.simple-title-facts div.list p { font-size: 18px; margin-bottom: 20px; } section.simple.simple-title-facts div.list div.item { --icon-size: 32px; padding: 14px; line-height: 1.2; padding-left: calc(var(--icon-size) + 20px); position: relative; font-size: 18px; } section.cta { padding: 40px; padding-left: 20px; padding-right: 20px; background-color: rgb(27, 60, 86); background-size: 100px; background-position: calc(100% - 80px) center; background-repeat: no-repeat; } @media only screen and (min-width: 640px) { section.cta { padding-left: 40px; padding-right: 40px; } } @media only screen and (min-width: 1200px) { section.cta { padding-left: 80px; padding-right: 80px; } } @media only screen and (min-width: 1200px) { section.cta { background-image: url("../img/icon-white-transparent.svg"); } } section.cta h2, section.cta h3 { width: 100%; margin: auto; text-align: center; } section.cta h2 { font-weight: 700; color: #ffffff; padding-bottom: 10px; } section.cta h3 { font-size: 18px; color: rgb(117, 131, 47); font-weight: 600; text-transform: initial; } section.cta h3 a { color: inherit; -webkit-transition: color 250ms ease; transition: color 250ms ease; } section.cta h3 a:hover { color: #ffffff; } section.haaxman-methode { padding: 80px; padding-left: 20px; padding-right: 20px; background-color: rgb(238, 238, 238); } @media only screen and (min-width: 640px) { section.haaxman-methode { padding-left: 40px; padding-right: 40px; } } @media only screen and (min-width: 1200px) { section.haaxman-methode { padding-left: 80px; padding-right: 80px; } } section.haaxman-methode .wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } section.haaxman-methode .wrapper .circle { display: none; display: -webkit-box; display: -ms-flexbox; display: flex; width: 240px; padding-bottom: 240px; margin: 0 auto 40px; position: relative; height: 0; border-radius: 50%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: rgb(117, 131, 47); } @media only screen and (min-width: 640px) { section.haaxman-methode .wrapper .circle { width: 50%; padding-bottom: 50%; margin-bottom: 0; } } @media only screen and (min-width: 1200px) { section.haaxman-methode .wrapper .circle { width: 25%; padding-bottom: 25%; } } section.haaxman-methode .wrapper .circle h2 { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: white; margin: auto; padding: 0; font-weight: 300; } section.haaxman-methode .wrapper .circle h2 strong { font-weight: 700; } section.haaxman-methode .wrapper .content { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media only screen and (min-width: 640px) { section.haaxman-methode .wrapper .content { width: 50%; padding-left: 40px; } } @media only screen and (min-width: 1200px) { section.haaxman-methode .wrapper .content { width: 75%; } } section.haaxman-methode .wrapper .content h2 { margin-bottom: 20px; font-weight: 700; } section.haaxman-methode .wrapper .content .wysiwyg { margin: 20px auto 40px; } section.files .wrapper { border-top: 1px solid rgb(200, 200, 200); padding: 80px 0 !important; } section.files .wrapper h3 { text-align: center; padding-bottom: 40px; } @media only screen and (min-width: 1200px) { section.files .wrapper h3 { text-align: left; } } section.files .wrapper div.buttons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } section.files .wrapper div.buttons a { margin: auto; } section.files .wrapper div.buttons a + a { margin-top: 20px; } @media only screen and (min-width: 1200px) { section.files .wrapper div.buttons { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } section.files .wrapper div.buttons a { margin: 0 !important; } section.files .wrapper div.buttons a + a { margin-top: 0; margin-left: 20px !important; } } div.gallery { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; background-color: rgb(117, 131, 47); color: white; } div.gallery img, div.gallery a { width: 50%; height: auto; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 100ms ease; transition: -webkit-transform 100ms ease; transition: transform 100ms ease; transition: transform 100ms ease, -webkit-transform 100ms ease; z-index: 1; } div.gallery img img, div.gallery a img { width: 100%; height: 100%; } form ::-webkit-input-placeholder, .ginput_container ::-webkit-input-placeholder { display: block; width: 100%; color: inherit; position: relative; z-index: 1; border: none; font-family: inherit; font-size: inherit; } form ::-moz-placeholder, .ginput_container ::-moz-placeholder { display: block; width: 100%; color: inherit; position: relative; z-index: 1; border: none; font-family: inherit; font-size: inherit; } form :-ms-input-placeholder, .ginput_container :-ms-input-placeholder { display: block; width: 100%; color: inherit; position: relative; z-index: 1; border: none; font-family: inherit; font-size: inherit; } form ::-ms-input-placeholder, .ginput_container ::-ms-input-placeholder { display: block; width: 100%; color: inherit; position: relative; z-index: 1; border: none; font-family: inherit; font-size: inherit; } form input, form label, form legend, form select, form textarea, form ::placeholder, .ginput_container input, .ginput_container label, .ginput_container legend, .ginput_container select, .ginput_container textarea, .ginput_container ::placeholder { display: block; width: 100%; color: inherit; position: relative; z-index: 1; border: none; font-family: inherit; font-size: inherit; } form input, form select, form textarea, .ginput_container input, .ginput_container select, .ginput_container textarea { display: block; width: 100%; color: inherit; position: relative; z-index: 1; border: none; font-family: inherit; font-size: inherit; padding: 1rem 1rem; height: 3rem; line-height: 1.4; background-color: var(--bg-alt); color: var(--fg-alt); } form textarea, .ginput_container textarea { min-height: 12rem; } form select, .ginput_container select { cursor: pointer; } .gfield_label { font-weight: 600; color: rgb(27, 60, 86) !important; } .gfield_description { font-size: 0.9rem; } .gsection_description { white-space: wrap; } .ginput_container_select, .select-container { position: relative; } .ginput_container_select::after, .select-container::after { content: ""; position: absolute; top: 0; right: 0; height: 100%; aspect-ratio: 1/1; -webkit-mask-image: url("../img/icon/caret.svg"); mask-image: url("../img/icon/caret.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 1rem 1rem; mask-size: 1rem 1rem; background-color: var(--fg); z-index: 2; pointer-events: none; } .ginput_container_select select, .select-container select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 3rem; line-height: 1; } .ginput_container_checkbox .gchoice, .ginput_container_radio .gchoice, .ginput_container_consent .gchoice, .checkbox-container .gchoice, .radio-container .gchoice { height: 3rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .ginput_container_checkbox label, .ginput_container_radio label, .ginput_container_consent label, .checkbox-container label, .radio-container label { position: relative; padding: 0 0 0 2rem; font-size: 16px; font-weight: 400; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .ginput_container_checkbox label::before, .ginput_container_checkbox label::after, .ginput_container_radio label::before, .ginput_container_radio label::after, .ginput_container_consent label::before, .ginput_container_consent label::after, .checkbox-container label::before, .checkbox-container label::after, .radio-container label::before, .radio-container label::after { content: ""; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 0; width: 24px; height: 24px; background-color: var(--bg); border: 1px solid var(--fg); border-radius: 2px; pointer-events: none; z-index: 1; border-radius: 2px; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } .ginput_container_checkbox label::after, .ginput_container_radio label::after, .ginput_container_consent label::after, .checkbox-container label::after, .radio-container label::after { content: ""; -webkit-mask-image: url("../img/icon/check-solid.svg"); mask-image: url("../img/icon/check-solid.svg"); -webkit-mask-size: 0; mask-size: 0; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; background-color: transparent; } .ginput_container_checkbox input, .ginput_container_radio input, .ginput_container_consent input, .checkbox-container input, .radio-container input { display: none; } .ginput_container_checkbox input:checked + label::before, .ginput_container_radio input:checked + label::before, .ginput_container_consent input:checked + label::before, .checkbox-container input:checked + label::before, .radio-container input:checked + label::before { background-color: var(--fg); } .ginput_container_checkbox input:checked + label::after, .ginput_container_radio input:checked + label::after, .ginput_container_consent input:checked + label::after, .checkbox-container input:checked + label::after, .radio-container input:checked + label::after { background-color: var(--bg); -webkit-mask-size: 16px; mask-size: 16px; } .ginput_container_radio .gchoice label::before, .ginput_container_radio .gchoice label::after, .radio-container .gchoice label::before, .radio-container .gchoice label::after { border-radius: 50%; } .ginput_container_consent { height: 48px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .ginput_container_fileupload { background-color: var(--bg-alt); } .ginput_container_fileupload .gform_fileupload_multifile { padding: 1rem; } .ginput_container_fileupload .gform_fileupload_multifile .gform_drop_area { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 1rem; } .ginput_container_fileupload .gform_fileupload_multifile .gform_drop_area button { margin-right: auto; } .ginput_container_fileupload .gfield_description { display: inline-block; padding: 0 1rem 1rem 1rem; } .ginput_preview_list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 0.5rem; padding: 1rem; } .ginput_preview_list > div { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 1rem; } .gfield_required_asterisk { color: #ff003c; padding-left: 0.5ch; } .gform-body { container-type: inline-size; } .gform-body .gform_fields { display: grid; gap: 1rem; grid-template-columns: repeat(12, 1fr); } @media only screen and (min-width: 640px) { .gform-body .gform_fields { grid-template-columns: repeat(12, 1fr); } } @media only screen and (min-width: 1200px) { .gform-body .gform_fields { grid-template-columns: repeat(12, 1fr); gap: 2rem; } } .gform-body .gform_fields .gfield { grid-column: span 12; width: 100%; } .gform-body .gform_fields .gfield--width-full { grid-column: span 12; } .gform-body .gform_fields .gfield--width-half { grid-column: span 12; } @media only screen and (min-width: 640px) { .gform-body .gform_fields .gfield--width-half { grid-column: span 6; } } .gform-body .gform_fields .gfield--width-third { grid-column: span 12; } @media only screen and (min-width: 640px) { .gform-body .gform_fields .gfield--width-third { grid-column: span 4; } } .gform-body .gform_fields .gfield--width-quarter { grid-column: span 12; } @media only screen and (min-width: 640px) { .gform-body .gform_fields .gfield--width-quarter { grid-column: span 6; } } @media only screen and (min-width: 1200px) { .gform-body .gform_fields .gfield--width-quarter { grid-column: span 3; } } .gform_footer, .gform_page_footer { margin-top: 1rem; position: relative; text-align: right; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .gform_footer .button, .gform_page_footer .button { position: relative !important; } .gform_footer .button:last-of-type, .gform_page_footer .button:last-of-type { margin-left: auto; } .gform_footer .gform_ajax_spinner, .gform_page_footer .gform_ajax_spinner { position: absolute; top: 50%; right: 4px; height: calc(3rem - 8px); width: calc(3rem - 8px); border-radius: 100vw; left: auto; z-index: 3; border: 4px solid var(--button-accent); background-color: var(--button-accent); -webkit-transform: translate(8px, -50%) scale(1.4); transform: translate(8px, -50%) scale(1.4); border-color: var(--bg); -o-object-fit: scale-down; object-fit: scale-down; } .gform_validation_errors { margin-bottom: 1rem; } .gform_validation_errors h2 { background-color: #ff003c; color: #ffffff; padding: 1rem; width: -webkit-max-content; width: -moz-max-content; width: max-content; max-width: 100%; } .gfield.gfield_error input, .gfield.gfield_error select, .gfield.gfield_error textarea { border: solid 2px #ff003c; } .gfield_validation_message { display: none; position: relative; background-color: #ff003c; color: #ffffff; font-size: 16px; width: -webkit-max-content; width: -moz-max-content; width: max-content; max-width: 100%; } .gfield--type-honeypot, .gform_required_legend { display: none; } footer section.top { position: relative; background-color: rgb(27, 60, 86); height: auto; min-height: 150px; width: 100%; } footer section.top .wrapper { min-height: 150px; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; } footer section.top .wrapper div.logo { margin: 20px auto 0; width: 300px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; pointer-events: none; } @media only screen and (min-width: 1200px) { footer section.top .wrapper div.logo { margin: 0 auto 0 0; } } footer section.top .wrapper div.logo img { margin: auto; max-width: 280px; max-height: 80px; height: auto; width: auto; } footer section.top .wrapper div.social { width: 100%; height: 100px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; justify-self: flex-end; margin-left: auto; display: -webkit-box; display: -ms-flexbox; display: flex; } @media only screen and (min-width: 1200px) { footer section.top .wrapper div.social { width: auto; } } footer section.top .wrapper div.social p { color: #ffffff; padding: 0; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; font-size: 14px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } footer section.top .wrapper div.social a { width: 32px; height: 32px; background-size: 60%; background-position: center; background-repeat: no-repeat; -webkit-transition: opacity 250ms ease; transition: opacity 250ms ease; opacity: 1; } footer section.top .wrapper div.social a:hover { opacity: 0.7; } footer section.top .wrapper div.social a.facebook { background-image: url("../img/icon/facebook/white.svg"); background-size: 40%; } footer section.top .wrapper div.social a.twitter { background-image: url("../img/icon/twitter/white.svg"); } footer section.top .wrapper div.social a.instagram { background-image: url("../img/icon/instagram/white.svg"); } footer section.top .wrapper div.social a.linkedin { background-image: url("../img/icon/linkedin/white.svg"); } footer section.top .wrapper div.social a.youtube { background-image: url("../img/icon/youtube/white.svg"); } footer section.top .wrapper div.social * + * { margin-left: 20px; } footer section.bottom { background-color: rgb(117, 131, 47); min-height: 50px; width: 100%; } footer section.bottom .wrapper { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-top: 20px; padding-bottom: 20px; } @media only screen and (min-width: 1200px) { footer section.bottom .wrapper { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } } footer section.bottom .wrapper .privacy { margin-bottom: 20px; } @media only screen and (min-width: 1200px) { footer section.bottom .wrapper .privacy { margin-bottom: 0; } } footer section.bottom .wrapper .privacy a { color: rgb(200, 200, 200); font-weight: 700; -webkit-transition: color 250ms ease; transition: color 250ms ease; } footer section.bottom .wrapper .privacy a:hover { color: rgb(27, 60, 86); } footer section.bottom .wrapper .privacy a + * { margin-left: 20px; } @media only screen and (min-width: 640px) { footer section.bottom .wrapper .privacy a + * { margin-left: 40px; } } footer section.bottom .wrapper .privacy ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media only screen and (min-width: 1200px) { footer section.bottom .wrapper .privacy ul { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } } footer section.bottom .wrapper .privacy ul li:not(:last-of-type) { margin-right: 20px; } footer section.bottom .wrapper .credits { color: rgb(200, 200, 200); text-align: center; } footer section.bottom .wrapper .credits a { color: rgb(200, 200, 200); font-weight: 700; -webkit-transition: color 250ms ease; transition: color 250ms ease; } footer section.bottom .wrapper .credits a:hover { color: rgb(27, 60, 86); }