body {
	background: #f6f6f6;
  font-family: Poppins;
  color: #2b2a38;
  margin-bottom: 100px;
}

.contentBox{
  max-width: 1300px;
  padding-bottom: 50px;
  background: white;
  margin: 0 auto;
  margin-top: 100px;
  border-radius: 10px;
  border-top: 8px solid #00a3fa;}

.contentBox h1{
  font-weight: 400;
  font-size: 25px;
  padding-top: 20px;
  padding-left: 36px;
  margin-bottom: -30px;
}

/* external css: flickity.css */

.carousel {
  background: #EEE;
  width: 800px;
  height: 353px;
}

.carousel-cell {
  width: 66%;
  height: 353px;
  background: #8C8;
  border-radius: 5px;
}

/* cell number */
.carousel-cell:before {
  display: block;
  text-align: center;
  line-height: 200px;
  font-size: 80px;
  color: white;

}

.carousel-nav > .carousel-cell {
  margin-right: 50px;
}

.carousel-cell {
  opacity: 0.2;
}

.carousel-cell.is-selected{
  opacity: 1;
} 

.carousel-cell.is-previous {
 opacity: 0.2;
}

.carousel-cell.is-next {
  opacity: 0.2;
}

.carousel-nav .carousel-cell {
  height: 80px;
  width: 100px;
}

.carousel-nav .carousel-cell:before {
  font-size: 50px;
  line-height: 80px;
}

.carousel-nav .carousel-cell.is-nav-selected {
  opacity: 1;
}

.carousel img{
  width: 528px;
}

.prviRed{
  display: flex;
  justify-content: space-around;
}

.infoBox{
  margin-top: 20px;
  width: 351px;
  height: 351px;
  background-color: #fff;
}

.naslov{
  width: 60%;
}

.naslov h1{
  font-size: 35px;
  font-weight: 600;
  color: #2b2a38;
}

.naslovnaTraka{
  display: flex;
  justify-content: space-between;
}

.akcije{
  margin-top: 50px;
  margin-right: 50px;
}

.naslov hr{
  border: 0.6px solid #ddd;
  margin-top: 50px;
  width: 165%;
}

.tdInfo{
  display: flex;
}

.tdInfo p{
  margin: 0;
  margin-left: 20px;
  font-size: 1.2em;
  font-weight: 300;
}

.tdInfo{
  margin-top: 10px;
}

button{
   width: 152px;
  height: 41px;
  mix-blend-mode: undefined;
  border-radius: 5px;
  background-color: #00a3fa;
  border: 0;
  line-height: 2;
  border-radius: 19.5px;
  letter-spacing: 0.1px;
  text-align: center;
  color: #ffffff;
  cursor: pointer;
  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;
  font-family: Poppins;
}

.drugiRed{
  display: flex;
}

.carInfo{
  width: 796px;
  border: 2px solid #f6f6f6;
  margin-left: 82px;
}

.tabele{
  display: flex;
  justify-content: space-around;
}

.meinunfallauto-previewDamage__car path {
    cursor: pointer;
    fill: #fff;
    stroke: #00a3fa;
    stroke-width: 2px;
}

.cont{
  display: flex;
}

.handlerInfo{
  border: 0.6px solid #ddd;
  padding-bottom: 20px;
  border-radius: 10px;
}

.carDamage{
  width: 370px;
}

.meinunfallauto-previewDamage__car{
  padding-top: 20px;
}

.handlerInformacije{
  margin-top: 40px;
  border: 0.6px solid #ddd;
}

.lijevo{
  width: 69.6%; margin-left: -20px
}

.slajder{
  margin-left: 60px; margin-top: 32px
}

.specialBox{
  display: flex; justify-content: space-around; height: 300px;
}

.allInOneTable{
  display: none;
  visibility: hidden;
}


.airbagovi{
  margin-top: 30px; display: flex; justify-content: center;
}

.specijalBox{
display: flex; justify-content: space-around; height: 300px;
}

.tabelaNekaDruga{
  visibility: hidden;
  display: none;
}

.smanjiDisp{
  display: flex; justify-content: center; margin-top: 30px;
}

.specijalniBut{
  box-shadow: 0 0 0pt 5px #bde7fe; margin-top: 50px;
              width: 200px; height: 50px; font-size: 16px
}

.kolaOvaMoja{
  width: 397px;
}

.specijalBox, .specijalBoxLinija, .handlerCopy, .sakrijHandlera{
  display: none;
  visibility: hidden;
}

.dodajTop{
  margin-top: 50px;
}

.airbagIkona{
    width: 35px; 
    height: 35px;
    margin-top: 15px; 
    margin-right: 15px
  }


.alemBox{
  display: none;
  visibility: hidden;
}


@media only screen and (max-width: 1336px) {
  .contentBox{
    max-width: 1200px;
  }
  .carousel{
    width: 700px;
  }
  .carousel-cell img{
    width: 462px;
    height: 353px;
  }
  .carInfo{
    width: 696px;
    margin-left: 97px
  }
  .lijevo{
    margin-left: -50px;
  }
}

@media only screen and (max-width: 1218px) {
  .desno{
    display: none;
    visibility: hidden;
  }
  .airbagIkona{
    width: 35px; 
    height: 35px;
    margin-top: 15px; 
    margin-left: 15px
  }
  .lijevo{
    width: 100%;
  }
  .carInfo{
    margin: 0 auto;
  }
  .slajder{
    margin-left: 0;
  }
  .lijevo{
    margin: 0 auto;
  }
   .carousel{
    width: 700px;
  }
  .handlerInfo{
    border: 0;
  }
.specijalBoxLinija{
  display: flex;
  visibility: visible;
}
.handlerCopy, .sakrijHandlera,  .specijalBox{
  visibility: visible;
  display: block;
}

.dodajTop{
  margin-top: 0px;
}
.alemBox{
  display: block;
  visibility: visible;
}

 }

 @media only screen and (max-width: 810px) {
  .naslovnaTraka{
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
  }
  .akcije{ margin-right: 0 }
}



 @media only screen and (max-width: 730px) {
    .carousel{
    width: 500px;
    height: 253px;
  }
   .carousel-cell{
    height: 253px
   }
  .carousel-cell img{
    width: 330px;
    height: 253px;
  }
  .carInfo{
    width: 495px;
  }
  .specialBox{
    flex-direction: column;
  }
  .tabelaInfo{
    height: 100%;
    width: 100%;
  }
  .naslov{
    width: 495px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 60px;
  }
  .tabelaInfo{
    display: none;
    visibility: hidden;
}

.specialBox{
  height: 100px;
  border: 0;
}
.sakrij1, .sakrij2{
    display: none;
    visibility: hidden;
  }
  .specijalBox{
    height: 200px;
    margin: 0 auto;
  }
   .allInOneTable{
    display: flex;
    visibility: visible;
  }

  .sakrijIOvu{
    display: none;
    visibility: hidden;
  }

  .tabelaNekaDruga{
    display: flex;
    visibility: visible;
  }

  .contentBox h1{
    margin-bottom: 0;
    padding-top: 0;
  }
}


 @media only screen and (max-width: 523px) {
  .contentBox{
    max-width: 500px;
  }
  .carousel{
    width: 360px;
    height: 160px;
  }
  .carousel-cell{
    height: 160px;
  }
  .carousel-cell img{
    width: 238px;
    height: 160px;
  }
  .carousel-nav{
    display: none;
    visibility: hidden;
  }
  .flickity-viewport{
    height: 120px;
  }
  .smanjiDisp{
    display: block;
  }
  .specijalniBut{
    width: 150px;
    height: 40px;
    font-size: 14px;
    margin-left: 26px;
  }
  .naslov{
    margin-bottom: 10px;
    margin-top: -30px;
  }
  .slajder{
    margin-top: 50px;
  }

  .kolaOvaMoja svg{
    margin-top: 80px;
    margin-bottom: 80px;
    transform: rotate(90deg);
    height: 180px;
  }

  .naslov{
    margin-top: 20px
  }
 
}


 @media only screen and (max-width: 461px) {
  .contentBox{
    max-width: 360px;
  }
  .infoBox{
    width: 200px;
  }
  .carInfo {
    width: 360px;
}
.carDamage, .kolaOvaMoja{
  width: 320px;
}
.kolaOvaMoja svg{
  width: 350px;
}

}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 335px; /* Could be more or less, depending on screen size */
   
}

/* The Close Button */
.close {
  display: block;
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}


select{
      -ms-flex-item-align: center; 
      -ms-grid-row-align: center; 
      align-self: center; 
      width: 340px; 
      height: 49px; 
      outline: none; 
      border-radius: 5px; 
      background-color: #ffffff;
       border: solid 1px #dddddd; 
       padding-left: 21px; 
       font-family: Poppins; 
       font-size: 15px; 
       margin: 0; 
       -webkit-box-sizing: border-box; 
       box-sizing: border-box;
       -webkit-appearance: none; 
       -moz-appearance: none; 
       background: url(https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #fff; 
       background-size: 12px; 
       background-position-x: 305px;
  }
  input{
      -ms-flex-item-align: center; 
      -ms-grid-row-align: center; 
      align-self: center; 
      width: 340px; 
      height: 49px; 
      outline: none; 
      border-radius: 5px; 
      background-color: #ffffff;
       border: solid 1px #dddddd; 
       padding-left: 21px; 
       font-family: Poppins;
       font-size: 15px; 
       margin: 0; 
       -webkit-box-sizing: border-box; 
       box-sizing: border-box;
       -webkit-appearance: none; 
       -moz-appearance: none; 
       background-size: 12px; 
       background-position-x: 305px;
  }
  label {
    height: 9px;
    mix-blend-mode: undefined;
    font-family: Poppins;
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    line-height: 1;
    letter-spacing: 0.6px;
    text-align: left;
    color: #7a7a7a;
    color: black;
  }


  input[type="checkbox"] { display: none; }

input[type="checkbox"] + label {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 20px;
   font-family: Poppins;
    font-size: 14px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

input[type="checkbox"] + label:last-child { margin-bottom: 0; }

input[type="checkbox"] + label:before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border: 1px solid #00a3fa;
  position: absolute;
  left: 0;
  top: 5px;
  opacity: .6;
  -webkit-transition: all .12s, border-color .08s;
  -o-transition: all .12s, border-color .08s;
  transition: all .12s, border-color .08s;
}

input[type="checkbox"]:checked + label:before {
  width: 10px;
  top: 0px;
  left: 5px;
  border-radius: 0;
  opacity: 1;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
      transform: rotate(45deg);
}