.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.animated.infinite {
  animation-iteration-count: infinite;
}

.animated.hinge {
  animation-duration: 2s;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-30px);
  }

  60% {
    transform: translateY(-15px);
  }
}

.bounce {
  animation-name: bounce;
}

@keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

.flash {
  animation-name: flash;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

.pulse {
  animation-name: pulse;
}

@keyframes rubberBand {
  0% {
    transform: scale(1);
  }

  30% {
    transform: scaleX(1.25)scaleY(.75);
  }

  40% {
    transform: scaleX(.75)scaleY(1.25);
  }

  60% {
    transform: scaleX(1.15)scaleY(.85);
  }

  100% {
    transform: scale(1);
  }
}

.rubberBand {
  animation-name: rubberBand;
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }

  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px);
  }

  20%, 40%, 60%, 80% {
    transform: translateX(10px);
  }
}

.shake {
  animation-name: shake;
}

@keyframes swing {
  20% {
    transform: rotate(15deg);
  }

  40% {
    transform: rotate(-10deg);
  }

  60% {
    transform: rotate(5deg);
  }

  80% {
    transform: rotate(-5deg);
  }

  100% {
    transform: rotate(0);
  }
}

.swing {
  transform-origin: top;
  animation-name: swing;
}

@keyframes tada {
  0% {
    transform: scale(1);
  }

  10%, 20% {
    transform: scale(.9)rotate(-3deg);
  }

  30%, 50%, 70%, 90% {
    transform: scale(1.1)rotate(3deg);
  }

  40%, 60%, 80% {
    transform: scale(1.1)rotate(-3deg);
  }

  100% {
    transform: scale(1)rotate(0);
  }
}

.tada {
  animation-name: tada;
}

@keyframes wobble {
  0% {
    transform: translateX(0%);
  }

  15% {
    transform: translateX(-25%)rotate(-5deg);
  }

  30% {
    transform: translateX(20%)rotate(3deg);
  }

  45% {
    transform: translateX(-15%)rotate(-3deg);
  }

  60% {
    transform: translateX(10%)rotate(2deg);
  }

  75% {
    transform: translateX(-5%)rotate(-1deg);
  }

  100% {
    transform: translateX(0%);
  }
}

.wobble {
  animation-name: wobble;
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(.3);
  }

  50% {
    opacity: 1;
    transform: scale(1.05);
  }

  70% {
    transform: scale(.9);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.bounceIn {
  animation-name: bounceIn;
}

@keyframes bounceInDown {
  0% {
    opacity: 0;
    transform: translateY(-2000px);
  }

  60% {
    opacity: 1;
    transform: translateY(30px);
  }

  80% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

.bounceInDown {
  animation-name: bounceInDown;
}

@keyframes bounceInLeft {
  0% {
    opacity: 0;
    transform: translateX(-2000px);
  }

  60% {
    opacity: 1;
    transform: translateX(30px);
  }

  80% {
    transform: translateX(-10px);
  }

  100% {
    transform: translateX(0);
  }
}

.bounceInLeft {
  animation-name: bounceInLeft;
}

@keyframes bounceInRight {
  0% {
    opacity: 0;
    transform: translateX(2000px);
  }

  60% {
    opacity: 1;
    transform: translateX(-30px);
  }

  80% {
    transform: translateX(10px);
  }

  100% {
    transform: translateX(0);
  }
}

.bounceInRight {
  animation-name: bounceInRight;
}

@keyframes bounceInUp {
  0% {
    opacity: 0;
    transform: translateY(2000px);
  }

  60% {
    opacity: 1;
    transform: translateY(-30px);
  }

  80% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(0);
  }
}

.bounceInUp {
  animation-name: bounceInUp;
}

@keyframes bounceOut {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(.95);
  }

  50% {
    opacity: 1;
    transform: scale(1.1);
  }

  100% {
    opacity: 0;
    transform: scale(.3);
  }
}

.bounceOut {
  animation-name: bounceOut;
}

@keyframes bounceOutDown {
  0% {
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    transform: translateY(-20px);
  }

  100% {
    opacity: 0;
    transform: translateY(2000px);
  }
}

.bounceOutDown {
  animation-name: bounceOutDown;
}

@keyframes bounceOutLeft {
  0% {
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    transform: translateX(20px);
  }

  100% {
    opacity: 0;
    transform: translateX(-2000px);
  }
}

.bounceOutLeft {
  animation-name: bounceOutLeft;
}

@keyframes bounceOutRight {
  0% {
    transform: translateX(0);
  }

  20% {
    opacity: 1;
    transform: translateX(-20px);
  }

  100% {
    opacity: 0;
    transform: translateX(2000px);
  }
}

.bounceOutRight {
  animation-name: bounceOutRight;
}

@keyframes bounceOutUp {
  0% {
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    transform: translateY(20px);
  }

  100% {
    opacity: 0;
    transform: translateY(-2000px);
  }
}

.bounceOutUp {
  animation-name: bounceOutUp;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeIn;
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeInDown {
  animation-name: fadeInDown;
}

@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    transform: translateY(-2000px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeInDownBig {
  animation-name: fadeInDownBig;
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.fadeInLeft {
  animation-name: fadeInLeft;
}

@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    transform: translateX(-2000px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.fadeInLeftBig {
  animation-name: fadeInLeftBig;
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.fadeInRight {
  animation-name: fadeInRight;
}

@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    transform: translateX(2000px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.fadeInRightBig {
  animation-name: fadeInRightBig;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeInUp {
  animation-name: fadeInUp;
}

@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    transform: translateY(2000px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeInUpBig {
  animation-name: fadeInUpBig;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

.fadeOut {
  animation-name: fadeOut;
}

@keyframes fadeOutDown {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(20px);
  }
}

.fadeOutDown {
  animation-name: fadeOutDown;
}

@keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(2000px);
  }
}

.fadeOutDownBig {
  animation-name: fadeOutDownBig;
}

@keyframes fadeOutLeft {
  0% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(-20px);
  }
}

.fadeOutLeft {
  animation-name: fadeOutLeft;
}

@keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(-2000px);
  }
}

.fadeOutLeftBig {
  animation-name: fadeOutLeftBig;
}

@keyframes fadeOutRight {
  0% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(20px);
  }
}

.fadeOutRight {
  animation-name: fadeOutRight;
}

@keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(2000px);
  }
}

.fadeOutRightBig {
  animation-name: fadeOutRightBig;
}

@keyframes fadeOutUp {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}

.fadeOutUp {
  animation-name: fadeOutUp;
}

@keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-2000px);
  }
}

.fadeOutUpBig {
  animation-name: fadeOutUpBig;
}

@keyframes flip {
  0% {
    animation-timing-function: ease-out;
    transform: perspective(400px)translateZ(0)rotateY(0)scale(1);
  }

  40% {
    animation-timing-function: ease-out;
    transform: perspective(400px)translateZ(150px)rotateY(170deg)scale(1);
  }

  50% {
    animation-timing-function: ease-in;
    transform: perspective(400px)translateZ(150px)rotateY(190deg)scale(1);
  }

  80% {
    animation-timing-function: ease-in;
    transform: perspective(400px)translateZ(0)rotateY(360deg)scale(.95);
  }

  100% {
    animation-timing-function: ease-in;
    transform: perspective(400px)translateZ(0)rotateY(360deg)scale(1);
  }
}

.animated.flip {
  backface-visibility: visible;
  -ms-backface-visibility: visible;
  animation-name: flip;
}

@keyframes flipInX {
  0% {
    opacity: 0;
    transform: perspective(400px)rotateX(90deg);
  }

  40% {
    transform: perspective(400px)rotateX(-10deg);
  }

  70% {
    transform: perspective(400px)rotateX(10deg);
  }

  100% {
    opacity: 1;
    transform: perspective(400px)rotateX(0);
  }
}

.flipInX {
  animation-name: flipInX;
  backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
}

@keyframes flipInY {
  0% {
    opacity: 0;
    transform: perspective(400px)rotateY(90deg);
  }

  40% {
    transform: perspective(400px)rotateY(-10deg);
  }

  70% {
    transform: perspective(400px)rotateY(10deg);
  }

  100% {
    opacity: 1;
    transform: perspective(400px)rotateY(0);
  }
}

.flipInY {
  animation-name: flipInY;
  backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
}

@keyframes flipOutX {
  0% {
    opacity: 1;
    transform: perspective(400px)rotateX(0);
  }

  100% {
    opacity: 0;
    transform: perspective(400px)rotateX(90deg);
  }
}

.flipOutX {
  animation-name: flipOutX;
  backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
}

@keyframes flipOutY {
  0% {
    opacity: 1;
    transform: perspective(400px)rotateY(0);
  }

  100% {
    opacity: 0;
    transform: perspective(400px)rotateY(90deg);
  }
}

.flipOutY {
  animation-name: flipOutY;
  backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
}

@keyframes lightSpeedIn {
  0% {
    opacity: 0;
    transform: translateX(100%)skewX(-30deg);
  }

  60% {
    opacity: 1;
    transform: translateX(-20%)skewX(30deg);
  }

  80% {
    opacity: 1;
    transform: translateX(0%)skewX(-15deg);
  }

  100% {
    opacity: 1;
    transform: translateX(0%)skewX(0);
  }
}

.lightSpeedIn {
  animation-name: lightSpeedIn;
  animation-timing-function: ease-out;
}

@keyframes lightSpeedOut {
  0% {
    opacity: 1;
    transform: translateX(0%)skewX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(100%)skewX(-30deg);
  }
}

.lightSpeedOut {
  animation-name: lightSpeedOut;
  animation-timing-function: ease-in;
}

@keyframes rotateIn {
  0% {
    transform-origin: center;
    opacity: 0;
    transform: rotate(-200deg);
  }

  100% {
    transform-origin: center;
    opacity: 1;
    transform: rotate(0);
  }
}

.rotateIn {
  animation-name: rotateIn;
}

@keyframes rotateInDownLeft {
  0% {
    transform-origin: 0 100%;
    opacity: 0;
    transform: rotate(-90deg);
  }

  100% {
    transform-origin: 0 100%;
    opacity: 1;
    transform: rotate(0);
  }
}

.rotateInDownLeft {
  animation-name: rotateInDownLeft;
}

@keyframes rotateInDownRight {
  0% {
    transform-origin: 100% 100%;
    opacity: 0;
    transform: rotate(90deg);
  }

  100% {
    transform-origin: 100% 100%;
    opacity: 1;
    transform: rotate(0);
  }
}

.rotateInDownRight {
  animation-name: rotateInDownRight;
}

@keyframes rotateInUpLeft {
  0% {
    transform-origin: 0 100%;
    opacity: 0;
    transform: rotate(90deg);
  }

  100% {
    transform-origin: 0 100%;
    opacity: 1;
    transform: rotate(0);
  }
}

.rotateInUpLeft {
  animation-name: rotateInUpLeft;
}

@keyframes rotateInUpRight {
  0% {
    transform-origin: 100% 100%;
    opacity: 0;
    transform: rotate(-90deg);
  }

  100% {
    transform-origin: 100% 100%;
    opacity: 1;
    transform: rotate(0);
  }
}

.rotateInUpRight {
  animation-name: rotateInUpRight;
}

@keyframes rotateOut {
  0% {
    transform-origin: center;
    opacity: 1;
    transform: rotate(0);
  }

  100% {
    transform-origin: center;
    opacity: 0;
    transform: rotate(200deg);
  }
}

.rotateOut {
  animation-name: rotateOut;
}

@keyframes rotateOutDownLeft {
  0% {
    transform-origin: 0 100%;
    opacity: 1;
    transform: rotate(0);
  }

  100% {
    transform-origin: 0 100%;
    opacity: 0;
    transform: rotate(90deg);
  }
}

.rotateOutDownLeft {
  animation-name: rotateOutDownLeft;
}

@keyframes rotateOutDownRight {
  0% {
    transform-origin: 100% 100%;
    opacity: 1;
    transform: rotate(0);
  }

  100% {
    transform-origin: 100% 100%;
    opacity: 0;
    transform: rotate(-90deg);
  }
}

.rotateOutDownRight {
  animation-name: rotateOutDownRight;
}

@keyframes rotateOutUpLeft {
  0% {
    transform-origin: 0 100%;
    opacity: 1;
    transform: rotate(0);
  }

  100% {
    transform-origin: 0 100%;
    opacity: 0;
    transform: rotate(-90deg);
  }
}

.rotateOutUpLeft {
  animation-name: rotateOutUpLeft;
}

@keyframes rotateOutUpRight {
  0% {
    transform-origin: 100% 100%;
    opacity: 1;
    transform: rotate(0);
  }

  100% {
    transform-origin: 100% 100%;
    opacity: 0;
    transform: rotate(90deg);
  }
}

.rotateOutUpRight {
  animation-name: rotateOutUpRight;
}

@keyframes slideInDown {
  0% {
    opacity: 0;
    transform: translateY(-2000px);
  }

  100% {
    transform: translateY(0);
  }
}

.slideInDown {
  animation-name: slideInDown;
}

@keyframes slideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-2000px);
  }

  100% {
    transform: translateX(0);
  }
}

.slideInLeft {
  animation-name: slideInLeft;
}

@keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(2000px);
  }

  100% {
    transform: translateX(0);
  }
}

.slideInRight {
  animation-name: slideInRight;
}

@keyframes slideOutLeft {
  0% {
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(-2000px);
  }
}

.slideOutLeft {
  animation-name: slideOutLeft;
}

@keyframes slideOutRight {
  0% {
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(2000px);
  }
}

.slideOutRight {
  animation-name: slideOutRight;
}

@keyframes slideOutUp {
  0% {
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-2000px);
  }
}

.slideOutUp {
  animation-name: slideOutUp;
}

@keyframes slideInUp {
  0% {
    opacity: 0;
    transform: translateY(2000px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.slideInUp {
  animation-name: slideInUp;
}

@keyframes slideOutDown {
  0% {
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(2000px);
  }
}

.slideOutDown {
  animation-name: slideOutDown;
}

@keyframes hinge {
  0% {
    transform-origin: 0 0;
    animation-timing-function: ease-in-out;
    transform: rotate(0);
  }

  20%, 60% {
    transform-origin: 0 0;
    animation-timing-function: ease-in-out;
    transform: rotate(80deg);
  }

  40% {
    transform-origin: 0 0;
    animation-timing-function: ease-in-out;
    transform: rotate(60deg);
  }

  80% {
    transform-origin: 0 0;
    opacity: 1;
    animation-timing-function: ease-in-out;
    transform: rotate(60deg)translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(700px);
  }
}

.hinge {
  animation-name: hinge;
}

@keyframes rollIn {
  0% {
    opacity: 0;
    transform: translateX(-100%)rotate(-120deg);
  }

  100% {
    opacity: 1;
    transform: translateX(0)rotate(0);
  }
}

.rollIn {
  animation-name: rollIn;
}

@keyframes rollOut {
  0% {
    opacity: 1;
    transform: translateX(0)rotate(0);
  }

  100% {
    opacity: 0;
    transform: translateX(100%)rotate(120deg);
  }
}

.rollOut {
  animation-name: rollOut;
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    transform: scale(.3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  animation-name: zoomIn;
}

@keyframes zoomInDown {
  0% {
    opacity: 0;
    animation-timing-function: ease-in-out;
    transform: scale(.1)translateY(-2000px);
  }

  60% {
    opacity: 1;
    animation-timing-function: ease-out;
    transform: scale(.475)translateY(60px);
  }
}

.zoomInDown {
  animation-name: zoomInDown;
}

@keyframes zoomInLeft {
  0% {
    opacity: 0;
    animation-timing-function: ease-in-out;
    transform: scale(.1)translateX(-2000px);
  }

  60% {
    opacity: 1;
    animation-timing-function: ease-out;
    transform: scale(.475)translateX(48px);
  }
}

.zoomInLeft {
  animation-name: zoomInLeft;
}

@keyframes zoomInRight {
  0% {
    opacity: 0;
    animation-timing-function: ease-in-out;
    transform: scale(.1)translateX(2000px);
  }

  60% {
    opacity: 1;
    animation-timing-function: ease-out;
    transform: scale(.475)translateX(-48px);
  }
}

.zoomInRight {
  animation-name: zoomInRight;
}

@keyframes zoomInUp {
  0% {
    opacity: 0;
    animation-timing-function: ease-in-out;
    transform: scale(.1)translateY(2000px);
  }

  60% {
    opacity: 1;
    animation-timing-function: ease-out;
    transform: scale(.475)translateY(-60px);
  }
}

.zoomInUp {
  animation-name: zoomInUp;
}

@keyframes zoomOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0;
    transform: scale(.3);
  }

  100% {
    opacity: 0;
  }
}

.zoomOut {
  animation-name: zoomOut;
}

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    animation-timing-function: linear;
    transform: scale(.475)translateY(-60px);
  }

  100% {
    opacity: 0;
    transform-origin: bottom;
    transform: scale(.1)translateY(2000px);
  }
}

.zoomOutDown {
  animation-name: zoomOutDown;
}

@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    animation-timing-function: linear;
    transform: scale(.475)translateX(42px);
  }

  100% {
    opacity: 0;
    transform-origin: 0;
    transform: scale(.1)translateX(-2000px);
  }
}

.zoomOutLeft {
  animation-name: zoomOutLeft;
}

@keyframes zoomOutRight {
  40% {
    opacity: 1;
    animation-timing-function: linear;
    transform: scale(.475)translateX(-42px);
  }

  100% {
    opacity: 0;
    transform-origin: 100%;
    transform: scale(.1)translateX(2000px);
  }
}

.zoomOutRight {
  animation-name: zoomOutRight;
}

@keyframes zoomOutUp {
  40% {
    opacity: 1;
    animation-timing-function: linear;
    transform: scale(.475)translateY(60px);
  }

  100% {
    opacity: 0;
    transform-origin: top;
    transform: scale(.1)translateY(-2000px);
  }
}

.zoomOutUp {
  animation-name: zoomOutUp;
}

.owl-carousel .owl-wrapper:after {
  content: ".";
  clear: both;
  visibility: hidden;
  height: 0;
  line-height: 0;
  display: block;
}

.owl-carousel {
  -ms-touch-action: pan-y;
  width: 100%;
  display: none;
  position: relative;
}

.owl-carousel .owl-wrapper {
  display: none;
  position: relative;
  -webkit-transform: translate3d(0, 0, 0);
}

.owl-carousel .owl-wrapper-outer {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.owl-carousel .owl-wrapper-outer.autoHeight {
  -o-transition: height .5s ease-in-out;
  transition: height .5s ease-in-out;
}

.owl-carousel .owl-item {
  float: left;
}

.owl-controls .owl-page, .owl-controls .owl-buttons div {
  cursor: pointer;
}

.owl-controls {
  -webkit-user-select: none;
  user-select: none;
  -khtml-user-select: none;
  -webkit-tap-highlight-color: #0000;
}

.owl-carousel .owl-wrapper, .owl-carousel .owl-item {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
}

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  color: red;
}

.clear {
  clear: both;
  height: 0;
  line-height: 0;
}

a {
  color: #010101;
  outline: none;
  text-decoration: none;
  transition: all .6s;
}

img {
  width: auto;
  height: auto;
}

a:focus, img:focus, button:focus, .btn:focus {
  outline: none;
}

::selection {
  color: #fff;
  text-shadow: none;
  background-color: #548f3f;
}

@font-face {
  font-family: "Raleway", sans-serif;
}

header.header-top, header.header-top figure {
  height: 100%;
  position: relative;
}

header.header-top .container {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

header.header-top .navbar-fixed-top {
  background-color: #000;
  padding: 5px 0;
}

header.header-top .navbar-fixed-top .container {
  padding-top: 0;
  position: static;
}

header.header-top .navbar-fixed-top h1 img {
  width: 30%;
}

header.header-top .navbar-fixed-top nav {
  padding-top: 7px;
}

header.header-top section {
  z-index: 2;
  background: #0000004d;
  padding: 0 20px 40px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

header.header-top section h2 {
  font-size: clamp(32px, 10vw, 44px);
  font-weight: 400;
  line-height: 1.2;
}

header.header-top section p {
  padding-top: 15px;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.2;
}

header.header-top section a {
  color: inherit;
  text-decoration: none !important;
}

header.header-top section a.button-header {
  text-align: center;
  color: #fff;
  text-transform: uppercase;
  background-color: #548f3f;
  border-radius: 4px;
  margin: 0 auto;
  padding: 0 53px;
  font-size: 16px;
  font-weight: 400;
  line-height: 63px;
  display: inline-block;
}

header.header-top section a.button-header:hover {
  background-color: #5ea246;
  text-decoration: none;
}

header.header-top hgroup nav ul > li:hover a, header.header-top hgroup nav ul > li.active a, header.header-top hgroup nav ul > li.active:hover a {
  border-color: #548f3f;
  color: #fff !important;
  background-color: #0000 !important;
}

header.header-top section h2, header.header-top section p {
  color: #fff;
}

header.header-top section a.video-button i {
  padding-left: 10px;
}

header.header-top section a.video-button:hover {
  border-color: #548f3f;
}

.top-pan {
  background-color: #f7f7f8;
  overflow: hidden;
}

.top-pan ul {
  justify-content: space-between;
  align-items: center;
  gap: min(5vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.top-pan li {
  margin: 0;
  padding: 40px 0;
}

.top-pan img {
  max-width: 100%;
  height: 50px;
  display: block;
}

header.title-page h4 {
  color: #71717c;
  text-transform: uppercase;
  font-size: 19px;
  font-weight: 600;
  line-height: 20px;
}

header.title-page h4:after {
  content: "";
  background-color: #548f3f;
  width: 79px;
  height: 2px;
  margin: 17px auto 0;
  display: block;
}

header.title-page h2 {
  color: #000;
  padding-top: 2px;
  font-size: 31px;
  font-weight: 600;
  line-height: 36px;
}

.section-one {
  padding-top: 60px;
}

.section-one article {
  padding-top: 36px;
}

.section-one article p {
  color: #5e5e64;
  font-size: 15px;
  font-weight: 500;
  line-height: 27px;
}

ul.four-box-pan {
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  margin: 81px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  overflow: hidden;
}

.four-box-pan li {
  flex: 0 0 28%;
}

.four-box-pan li h5 {
  text-transform: uppercase;
  color: #000;
  padding-top: 26px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.four-box-pan li p {
  color: #5e5e64;
  padding-top: 5px;
  font-weight: 500;
  line-height: 27px;
}

@media (max-width: 600px) {
  .four-box-pan li {
    flex: 45%;
  }
}

.four-box-pan figure {
  background-color: #548f3f;
  border-radius: 100%;
  width: 98px;
  height: 98px;
  margin: 0 auto;
  display: block;
  position: relative;
}

.four-box-pan figure svg {
  width: 40px;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.four-box-pan figure svg path {
  fill: #fff;
}

ul.style-ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.style-ul > li {
  padding-bottom: 10px;
}

ul.style-ul > li:before {
  content: url("angle-right.31f0d1c3.svg");
  background-size: cover;
  width: 16px;
  height: 16px;
  padding-right: 9px;
  display: inline-block;
}

.section-two {
  background-color: #f7f7f8;
  overflow: hidden;
}

.section-two section figure {
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  min-height: 550px;
}

.section-two section .text-square {
  padding: 60px 40px 20px;
}

@media (max-width: 1000px) {
  .section-two section .text-square {
    padding-top: 30px;
    padding-left: 7%;
    padding-right: 30px;
  }
}

.section-two section .text-square h2 {
  color: #000;
  padding-bottom: 12px;
  font-size: 31px;
  font-weight: 300;
  line-height: 36px;
}

.section-two section .text-square p {
  color: #5e5e64;
  padding-bottom: 17px;
  font-weight: 500;
  line-height: 27px;
  display: block;
}

.section-two section .text-square p a {
  display: inline-block;
}

@media (max-width: 767px) {
  .section-two section {
    flex-direction: column;
    display: flex;
  }

  .section-two section .hide-in-mobile {
    display: none;
  }

  .section-two section figure {
    min-height: 300px;
  }
}

.slider-pan {
  background: #cedae2;
  padding: 60px 40px 90px;
}

.slider-pan article {
  flex-direction: column;
  height: 100%;
  padding: 0 30px;
  font-size: 21px;
  font-weight: 400;
  line-height: 36px;
  display: flex;
}

.slider-pan article picture {
  aspect-ratio: 300 / 225;
  justify-content: center;
  align-items: center;
  display: flex;
}

.slider-pan article picture img {
  mix-blend-mode: multiply;
  max-width: 300px;
}

.slider-pan article h3 {
  margin-bottom: 20px;
}

.slider-pan article p {
  font-size: .7em;
  line-height: 1.5;
}

.slider-pan article .top-content {
  margin-bottom: 10px;
}

.slider-pan article .button-wrapper {
  line-height: initial;
  margin-top: auto;
  display: block;
}

.slider-pan article .button-wrapper a {
  display: inline-block;
}

.slider-pan header {
  padding-top: 38px;
}

.slider-pan header h5 {
  text-transform: uppercase;
  color: #000;
  padding-bottom: 8px;
  font-weight: 700;
}

.slider-pan img {
  width: 100%;
}

.slider-pan .owl-wrapper-outer {
  overflow: visible !important;
}

.slider-pan #owl-slider {
  padding-top: 40px;
}

.slider-pan #owl-slider .owl-wrapper {
  display: flex !important;
}

.slider-pan .owl-buttons {
  display: none;
}

.slider-pan .owl-pagination {
  text-align: center;
  padding-top: 18px;
}

.slider-pan .owl-pagination .owl-page {
  background-color: #c9c9c9;
  border-radius: 100%;
  width: 9px;
  height: 9px;
  margin: 0 3px;
  display: inline-block;
}

.slider-pan .owl-pagination .owl-page.active {
  background-color: #548f3f;
}

.slider-pan section header h5, .slider-pan article header h6 {
  margin: 0;
  padding: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 16px;
}

.section-three {
  background-color: #548f3f;
  padding-top: 60px;
  padding-bottom: 156px;
}

.section-three header.title-page {
  padding-bottom: 83px;
}

.section-three header.title-page h4:after {
  background-color: #fff;
}

.section-three header.title-page h4, .section-three header.title-page h2 {
  color: #fff;
}

.section-four {
  background-color: #f7f7f8;
  padding-top: 86px;
  padding-bottom: 102px;
}

.section-four header.title-page {
  padding-bottom: 63px;
}

.section-five form input::-webkit-input-placeholder {
  color: #fff;
}

.section-five form input::placeholder {
  color: #fff;
}

.section-five form input:-ms-input-placeholder {
  color: #fff;
}

.section-five form input:-moz-placeholder {
  color: #fff;
}

.error_message {
  color: #e84d49;
}

.subscribe-form #success_page h3, .subscribe-form #success_page p, #success_page h3, #success_page p {
  color: #185005;
}

.contact-form input, .contact-form textarea {
  transition: all .8s;
}

.contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea {
  color: #8f8f8f;
  border: 1px solid #dbdbdb;
  outline: none;
  width: 100%;
  height: 70px;
  padding: 0 20px;
  font-size: 16px;
  line-height: 17px;
  display: block;
}

.contact-form input[type="text"]:focus, .contact-form input[type="email"]:focus, .contact-form textarea:focus {
  background-color: #f2f1f1;
}

.contact-form .contact-form-message {
  color: #fff;
}

#kontakt {
  background-color: #548f3f;
  padding-top: 60px;
  padding-bottom: 49px;
  position: relative;
}

#kontakt h2, #kontakt h3, #kontakt h4, #kontakt p, #kontakt a {
  color: #fff;
}

#kontakt a {
  text-decoration: underline;
}

#kontakt h4:after {
  background-color: #fff;
}

@media (max-width: 768px) {
  #kontakt {
    padding-top: 60px;
    padding-bottom: 40px;
  }
}

#kontakt:after {
  content: "";
  opacity: 0;
  visibility: hidden;
  background: #fff;
  width: 100%;
  height: 100%;
  transition: all .3s;
  position: absolute;
  top: 0;
  left: 0;
}

#kontakt.sending:after {
  opacity: .6;
  visibility: visible;
}

#kontakt .contact-form-message {
  opacity: 0;
  align-items: center;
  padding: 10px 20px;
  transition: all .6s;
  display: flex;
}

#kontakt .contact-form-message p {
  margin: 0;
}

#kontakt .contact-form-message.error, #kontakt .contact-form-message.success {
  opacity: 1;
}

#kontakt .contact-form-message.error {
  background: #fe3939;
}

#kontakt .contact-form-message.success {
  background: #2c6a16;
}

.map-wrapper {
  width: 100%;
  height: 318px;
}

.map-wrapper #surabaya {
  width: 100%;
  height: 100%;
}

.footer {
  background-color: #333;
  padding: 50px 0;
}

.footer > .container {
  flex-direction: column;
  gap: 30px;
  display: flex;
}

.footer > .container:before, .footer > .container:after {
  content: none;
}

.footer *, .footer a:hover {
  color: #fff;
}

.footer .footer-content {
  justify-content: center;
  gap: 40px;
  display: flex;
}

.footer .footer-content .align-center {
  align-self: center;
}

@media (max-width: 600px) {
  .footer .footer-content.singles-on-mobile {
    flex-wrap: wrap;
    gap: 20px;
  }

  .footer .footer-content.singles-on-mobile .column {
    width: 100%;
  }
}

.footer svg {
  width: 50px;
}

.footer svg path {
  fill: #fff;
  transition: all .3s;
}

.footer svg:hover path {
  fill: #316ff6;
}

.footer .centered-content {
  justify-content: center;
  align-items: center;
  display: flex;
}

.footer .certs {
  flex-wrap: wrap;
}

.footer .certs img {
  width: 100%;
}

.footer .certs .mhkyl-10-years img {
  max-width: 130px;
}

.footer .certs .lanets-entreprenor img {
  max-width: 140px;
}

.footer .certs .uc-sigill img {
  max-width: 170px;
  margin-bottom: -30px;
}

.parallax-window {
  height: 100vh;
}

.contact-form {
  max-width: 600px;
  margin: auto;
}

.contact-form input[type="email"] {
  border-left: none;
}

.contact-form input::-webkit-input-placeholder {
  color: #8f8f8f;
}

.contact-form input::placeholder {
  color: #8f8f8f;
}

.contact-form input:-ms-input-placeholder {
  color: #8f8f8f;
}

.contact-form .col-lg-6 {
  padding: 0;
}

.contact-form textarea {
  border-top: none;
  height: 130px;
  padding-top: 15px !important;
}

.contact-form input[type="submit"] {
  text-transform: uppercase;
  color: #5e5e64;
  text-align: center;
  background-color: #fff;
  border: none;
  border-radius: 3px;
  height: 63px;
  margin: 20px auto;
  padding: 0 53px;
  font-size: 16px;
  display: block;
}

.contact-form input[type="submit"]:hover {
  opacity: .8;
}

.contact-form .gdpr-checkbox {
  color: #fff;
  cursor: pointer;
  align-items: center;
  margin-top: 20px;
  font-size: .8em;
  font-weight: 400;
  line-height: 1.2;
  display: flex;
}

.contact-form .gdpr-checkbox input {
  margin: 0 10px 0 0;
}

header .container {
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  width: 100%;
  margin: 0;
  padding: 20px;
  display: flex;
}

header .container:before, header .container:after {
  content: none;
}

@media (max-width: 1000px) {
  header .container h1 {
    text-align: center;
    width: 100%;
    font-size: 5vw;
  }

  header .container .logo {
    width: 100px;
  }
}

@media (max-width: 550px) {
  header .container h1 {
    font-size: 4vw;
  }
}

header h1 {
  color: #111;
  letter-spacing: 1.5px;
  margin: 0;
  font-weight: 500;
}

header .logo {
  width: 150px;
  height: auto;
}

.centered-textbox {
  max-width: 800px;
  margin: auto;
}

iframe {
  width: 100%;
  display: block;
}

.text-center {
  text-align: center;
}

.mt-space {
  margin-top: 40px;
}

.btn-contact {
  text-transform: uppercase;
  background: #548f3f;
  padding: 15px 20px;
  color: #fff !important;
  text-decoration: none !important;
}

.btn-contact.blue {
  background: #01a0e4;
}

.btn-contact:hover {
  opacity: .85;
}

.cert-image {
  width: 150px;
}

.wasa-kredit-section {
  background: #cedae2;
  margin-top: 80px;
  padding: 20px;
  display: flex;
}

.wasa-kredit-section > .column {
  width: 50%;
  padding: 40px 20px;
}

.wasa-kredit-section .wasa-kredit-logo {
  width: 100%;
  max-width: 510px;
  margin-bottom: 40px;
}

.wasa-kredit-section .right {
  font-size: 1.3em;
}

@media (max-width: 768px) {
  .wasa-kredit-section {
    flex-wrap: wrap;
  }

  .wasa-kredit-section > .column {
    width: 100%;
    padding: 20px;
  }

  .wasa-kredit-section .left {
    order: 3;
  }
}

#wilfa-banner img {
  width: 100%;
}

#campaign {
  display: flex;
}

@media (max-width: 600px) {
  #campaign {
    flex-wrap: wrap;
  }

  #campaign > * {
    min-width: 100%;
  }
}

.campaign-container {
  text-align: center;
  box-sizing: border-box;
  color: #333;
  background: #90e09e;
  flex: 1;
  padding: 30px 20px;
  font-size: 1.6rem;
  line-height: 1;
  box-shadow: 0 0 10px #0000001a;
}

.campaign-container:last-child {
  background: #82bbd0;
}

.campaign-container h3 {
  color: #d70000;
  margin: 0 0 20px;
  padding-bottom: 0;
  font-size: 24px;
  font-weight: 600;
}

.campaign-container small {
  font-size: .7em;
  display: block;
}

.campaign-container .name {
  color: #333;
  margin-bottom: 10px;
  font-size: 1.3em;
  font-weight: bold;
}

.campaign-container .info {
  margin-bottom: 10px;
}

.campaign-container .location {
  margin-bottom: 15px;
}

.campaign-container .price {
  color: #d70000;
  margin: 10px 0;
  font-size: 20px;
  font-weight: bold;
}

.campaign-container .inkl-exkl {
  font-style: italic;
}

.campaign-container .warranty {
  margin-top: 10px;
  font-size: 16px;
  font-weight: bold;
}

/*# sourceMappingURL=app.css.map */