@font-face {
  font-family: "SkodaNext";
  font-weight: bold;
  font-style: normal;
  /* src: url(../fonts/skodaNext/SKODANext-bold.otf); */
  src: url(../fonts/skodaNext/SKODANext-Bold.ttf) format("truetype");
}
@font-face {
  font-family: "Almoni-neue";
  font-style: Demi;
  font-weight: 300;
  src: url(../fonts/almoni-neue/almoni-neue-aaa-300.eot);
  src: url(../fonts/almoni-neue/almoni-neue-aaa-300.eot?#iefix)
    format("embedded-opentype");
  src: url(../fonts/almoni-neue/almoni-neue-aaa-300.woff) format("woff");
  src: url(../fonts/almoni-neue/almoni-neue-aaa-300.ttf) format("truetype");
}

@font-face {
  font-family: "Almoni-neue";
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/almoni-neue/almoni-neue-aaa-400.eot);
  src: url(../fonts/almoni-neue/almoni-neue-aaa-400.eot?#iefix)
    format("embedded-opentype");
  src: url(../fonts/almoni-neue/almoni-neue-aaa-400.woff) format("woff");
  src: url(../fonts/almoni-neue/almoni-neue-aaa-400.ttf) format("truetype");
}

@font-face {
  font-family: "Almoni-neue";
  font-style: Bold;
  font-weight: 700;
  src: url(../fonts/almoni-neue/almoni-neue-aaa-700.eot);
  src: url(../fonts/almoni-neue/almoni-neue-aaa-700.eot?#iefix)
    format("embedded-opentype");
  src: url(../fonts/almoni-neue/almoni-neue-aaa-700.woff) format("woff");
  src: url(../fonts/almoni-neue/almoni-neue-aaa-700.ttf) format("truetype");
}

@font-face {
  font-family: "Almoni-neue";
  font-style: ExtraBold;
  font-weight: 900;
  src: url(../fonts/almoni-neue/almoni-neue-aaa-900.eot);
  src: url(../fonts/almoni-neue/almoni-neue-aaa-900.eot?#iefix)
    format("embedded-opentype");
  src: url(../fonts/almoni-neue/almoni-neue-aaa-900.woff) format("woff");
  src: url(../fonts/almoni-neue/almoni-neue-aaa-900.ttf) format("truetype");
}

* {
  box-sizing: border-box;
  outline: none;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: "Almoni-neue", Arial, Helvetica, sans-serif;
  direction: rtl;
  outline: none;
}

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  /* change if the mask should have another color then white */
  z-index: 9999;
  /* makes sure it stays on top */
}

#status {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  /* centers the loading animation horizontally one the screen */
  top: 50%;
  /* centers the loading animation vertically one the screen */
  background-image: url(https://raw.githubusercontent.com/niklausgerber/PreLoadMe/master/img/status.gif);
  /* path to your loading animation */
  background-repeat: no-repeat;
  background-position: center;
  margin: -100px 0 0 -100px;
  /* is width and height divided by two */
}

#main {
  width: 100%;
  height: 100%;
  position: absolute;
  /* overflow: hidden; */
}
header {
  position: fixed;
  background: black;
  width: 100%;
  height: 9%;
  display: flex;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: space-between;
  -webkit-align-content: space-between;
  align-content: space-between;
  padding: 1.4% 1.4% 1.4% 0;
  z-index: 9999;
}
header a img {
  width: 85.3%;
}
header a {
  width: 12.3%;
}
.contactBtn {
  background: #39b54a;
  color: white;
  width: 7%;
  font-size: 1vw;
  padding: 0.3%;
  text-align: center;
  cursor: pointer;
  opacity: 0;
}

#contactBtnChild {
  background: #39b54a;
  color: white;
  width: 34%;
  font-size: 1vw;
  padding: 3.4%;
  text-align: center;
  cursor: pointer;
}
#arrow {
  position: absolute;
  width: 4%;
  right: 2%;
  bottom: 21%;
}
.title {
  text-align: center;
  width: 100%;
}
/* #price {
    width: 19%;
    left: 13%;
    top: 49%;
    position: absolute;
} */
#skoda {
  width: 45%;
  margin: 9.1% 5% 0% 0;
  /* display: none; */
}
#slogan {
  width: 75%;
  margin-top: 9.2%;
  margin-right: 71%;
}

#carContainer {
  display: block;
  margin: -11.8% 32%;
  width: 39%;
}

#car {
  width: 100%;
}

.textArea {
  width: 100%;
  height: 26%;
  background: #262425;
  bottom: 0;
  position: absolute;
  color: white;
}

#rightText {
  width: 15%;
  position: absolute;
  right: 5%;
  bottom: 32%;
}
#leftText {
  width: 25%;
  position: absolute;
  left: 0.5%;
  bottom: 41%;
  line-height: 0.8vh;
}
#firstP {
  font-size: 1.6vw;
  line-height: 0;
}
#secondP {
  font-size: 1.2vw;
  line-height: 0;
}
.textAreaBottom {
  color: white;
  position: absolute;
  bottom: 6%;
  right: 3%;
  font-size: 1.5vw;
}

#txtbottom {
  padding: 0.5vw 1vw;

  display: flex;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  justify-content: space-between;
  align-items: center;
  /* -webkit-box-align: center;
    -moz-box-align: center; */
  -ms-flex-align: center;
  -webkit-align-items: center;
  max-height: 100px;
  transition: opacity 500ms linear;
  transform: translateZ(0);
}

#txtbottom.close {
  opacity: 0;
}

.underline {
  text-decoration: underline;
}

.underline2 {
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}
.pol {
  color: white;
  width: 1.3vw;
  line-height: 1.4;
  text-align: center;
  display: inline-block;
}

.safety-6 {
  background: #1b6eb7;
}

.safety-7 {
  background: #416fb6;
}

.zihum-3 {
  background: #009900;
  color: black;
}

.zihum-7 {
  background: #d4c927;
  color: black;
}

.zihum-8 {
  background: #f9ec00;
  color: black;
}

.zihum-9 {
  background: #ffc91a;
  color: black;
}

.zihum-10 {
  background: #eb8021;
  color: black;
}

.zihum-11 {
  background: #e75a24;
  color: black;
}

.zihum-12 {
  background: #eb1d20;
  color: black;
}

.zihum-13 {
  background: #bc171d;
  color: black;
}

.zihum-14 {
  background: #960a13;
  color: black;
}

#pollutionImage {
  cursor: pointer;
  display: block;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  width: 100%;
  transition: opacity 500ms linear;
}

#pollutionImage.open {
  max-height: 90vh;
  opacity: 1;
  position: relative;
  display: block;
}

#pollutionImage img {
  width: 100%;
  margin-bottom: 1%;
}

#pollution {
  cursor: pointer;
}

#thanku {
  font-size: 2.3vw;
  margin: 1vw 0;
  display: none;
  font-weight: bold;
}

#video {
  width: 100vw;
  min-height: 84vh;
  margin: 0 auto;
  background-image: url(../images/bgf.jpg);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

#video2 {
  width: 100vw;
  min-height: 100vh;
  margin: 0 auto;
  overflow: hidden;
}

#overflow {
  z-index: -1;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: absolute;
  top: 0;
  background: black;
}

.formArea {
  padding-top: 20vh;
  width: 100%;
  height: 100%;
  display: flex;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  justify-content: flex-end;
  position: fixed;
  z-index: 9999;
  top: 0;
  right: 0;
  background: rgba(38, 36, 37, 0.75);
  display: none;
}

#close {
  position: absolute;
  top: 12%;
  right: 2%;
  width: 2.5%;
  cursor: pointer;
}

.form {
  width: 25.7vw;
  color: white;
  margin: auto;
  text-align: center;
  padding: 1vw 1vw 0 1vw;
}

.formTitle {
  font-size: 2.2vw;
  margin-bottom: 0.9vw;
  color: #39b54a;
  line-height: 3vh;
}

form#mainForm {
  width: 100%;
  margin: 1.2vw auto;
}

input[type="text"] {
  display: block;
  width: 100%;
  font-family: "Almoni-neue", Arial, Helvetica, sans-serif;
  color: #707070;
  text-align: center;
  border: 0;
  margin-bottom: 1vw;
  font-size: 1.3vw;
  padding: 0.5vw 0 0.4vw;
}

::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #707070;
}
::-moz-placeholder {
  /* Firefox 19+ */
  color: #707070;
}
:-ms-input-placeholder {
  /* IE 10+ */
  color: #707070;
}
:-moz-placeholder {
  /* Firefox 18- */
  color: #707070;
}

button[type="submit"] {
  width: 100%;
  color: black;
  border: 1px solid #39b54a;
  background: #39b54a;
  font-size: 1.3vw;
  font-weight: bold;
  font-family: "Almoni-neue", Arial, Helvetica, sans-serif;
  padding: 0.5vw 0 0.55vw;
  cursor: pointer;
  transition: color 250ms linear, background 250ms linear;
}

button[type="submit"]:hover {
  background: black;
  color: #39b54a;
}

#mainForm > div:nth-child(6) > label > a {
  color: white;
}

.checkboxInput {
  display: flex;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  justify-content: flex-start;
  align-items: center;
  /* -webkit-box-align: center;
    -moz-box-align: center; */
  -ms-flex-align: center;
  -webkit-align-items: center;
  margin-bottom: 1vw;
}

.checkboxInput label {
  font-size: 1.435vh;
  text-align: right;
}

footer {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  background: white;
  color: black;
  font-size: 0.8vw;
  z-index: 9999;
}

/* Slider */

/* SLIDER */
.slider-container {
  width: 100%;
  display: block;
  margin: auto;
  height: 45vh;
}
.slider {
  width: 100%;
  display: block;
  margin: 0 auto;
  height: 45vh;
}
.slide {
  width: 100%;
  display: block;
  height: 45vh;
}

.sliderHolder {
  width: 50%;
  height: 45vh;
}

.permanentPic {
  width: 50%;
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
#permanentPic2 {
  background-image: url("./../images/performance/1.jpg");
}
#permanentPic3 {
  background-image: url("./../images/safety/1.jpg");
}
#permanentPic4 {
  background-image: url("./../images/design/1.jpg");
}
#permanentPic5 {
  background-image: url("./../images/ivzur/1.jpg");
}
#permanentPic6 {
  background-image: url("./../images/colors/1.jpg");
}
.floor1 {
  height: 100%;
  width: 100%;
  position: relative;
}
.floor {
  margin: 0;
  width: 100%;
  display: flex;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  border-bottom: 20px solid #373737;
}

#open-terms {
  cursor: pointer;
}

.terms {
  padding: 0.5rem 1%;
  font-size: 1.1rem;
  display: none;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  cursor: pointer;
  background: white;
  z-index: 1;
}