/* font converted using font-converter.net. thank you! */
@font-face {
  font-family: "SKODANext-Black";
  src: url("../fonty/SKODANext-Black.eot"); /* IE9 Compat Modes */
  src: url("../fonty/SKODANext-Black.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonty/SKODANext-Black.otf") format("opentype"), /* Open Type Font */
    url("../fonty/SKODANext-Black.svg") format("svg"), /* Legacy iOS */
    url("../fonty/SKODANext-Black.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../fonty/SKODANext-Black.woff") format("woff"), /* Modern Browsers */
    url("../fonty/SKODANext-Black.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}


/* font converted using font-converter.net. thank you! */
@font-face {
  font-family: "SKODANext-Light";
  src: url("../fonty/SKODANext-Light.eot"); /* IE9 Compat Modes */
  src: url("../fonty/SKODANext-Light.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonty/SKODANext-Light.otf") format("opentype"), /* Open Type Font */
    url("../fonty/SKODANext-Light.svg") format("svg"), /* Legacy iOS */
    url("../fonty/SKODANext-Light.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../fonty/SKODANext-Light.woff") format("woff"), /* Modern Browsers */
    url("../fonty/SKODANext-Light.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}


/* font converted using font-converter.net. thank you! */
@font-face {
  font-family: "SKODANext-Regular";
  src: url("../fonty/SKODANext-Regular.eot"); /* IE9 Compat Modes */
  src: url("../fonty/SKODANext-Regular.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonty/SKODANext-Regular.otf") format("opentype"), /* Open Type Font */
    url("../fonty/SKODANext-Regular.svg") format("svg"), /* Legacy iOS */
    url("../fonty/SKODANext-Regular.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../fonty/SKODANext-Regular.woff") format("woff"), /* Modern Browsers */
    url("../fonty/SKODANext-Regular.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}


 body {
  background: transparent;
  }
  
  #main{
    position: relative;
   // display: none;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
        // background-color: rgba(0,0,0,0.5);
    z-index: 2;
    text-align: left;
   // cursor: pointer;
}

#logo_skoda {
position: absolute; 
top: 4%; 
left: 3.4%;
}

#vrs {
position: absolute; 
top: 10%; 
left: 82%;
}

#skoda-nadpis {
position: absolute; 
top: 4%; 
left: 62%;
 font-family: "SKODANext-Light", Arial, Helvetica;
 font-size: 18px;
}

#kodiaq-nadpis {
position: absolute; 
top: 6%; 
left: 55%;
 font-family: "SKODANext-Black", Arial, Helvetica;
 font-size: 45px;
}

#tdi {
position: absolute; 
top: 17%; 
left: 45%;
 font-family: "SKODANext-Light", Arial, Helvetica;
 font-size: 18px;
}

#diesel-engine {
position: absolute; 
top: 18%; 
left: 3.4%;
 font-family: "SKODANext-Black", Arial, Helvetica;
 font-size: 14px;
}

#z1 {
position: absolute; 
font-family: "SKODANext-Black", Arial, Helvetica;
top: 23%; 
left: 3.4%;
 font-size: 14px;
 color: #0053b3;
}

#zp1 {
position: absolute; 
font-family: "SKODANext-Regular", Arial, Helvetica;
top: 23%; 
left: 5.4%;
 font-size: 13px;
 color: #000;
 width: 150px;
 line-height: 18px;
}

#z2 {
position: absolute; 
font-family: "SKODANext-Black", Arial, Helvetica;
top: 63%; 
left: 3.4%;
 font-size: 14px;
 color: #0053b3;
}

#zp2 {
position: absolute; 
font-family: "SKODANext-Regular", Arial, Helvetica;
top: 63%; 
left: 5.4%;
 font-size: 13px;
 color: #000;
 width: 150px;
  line-height: 18px;
}


#motor {
position: absolute; 
top: 32%; 
left: 27%;
}

#motor2 {
position: absolute; 
   display: none;
top: 32%; 
left: 27%;
/*
 -webkit-animation: 4s ease 0s normal forwards 1 fadein;
    animation: 4s ease 0s normal forwards 1 fadein;
         -webkit-animation-iteration-count: 1;
         */

}


 /*
@keyframes fadein{
    0% { opacity:1; }
    66% { opacity:0.5; }
    100% { opacity:0; }
}

@-webkit-keyframes fadein{
    0% { opacity:1; }
    66% { opacity:0.5; }
    100% { opacity:0; }
}
*/


#m1 {
position: absolute; 
   display: none;
top: 28.3%; 
left: 41%;
     -webkit-animation: mymove1 3s infinite; /* Safari 4.0 - 8.0 */
    animation: mymove1 3s infinite;
     -webkit-animation-iteration-count: 1;
     animation-timing-function: linear;
         animation-iteration-count: 1;
    

}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove1 {
    from {top: 38.3%;}
    to {top: 28.3%;}
}

/* Standard syntax */
@keyframes mymove1 {
    from {top: 38.3%;}
    to {top: 28.3%;}
}

#m2 {
position: absolute; 
   display: none;
top: 43.7%; 
left: 28.7%;
    -webkit-animation: mymove2 3s infinite; /* Safari 4.0 - 8.0 */
    animation: mymove2 3s infinite;
    
     -webkit-animation-iteration-count: 1;
          animation-timing-function: linear;
              animation-iteration-count: 1;

}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove2 {
    from {left: 38.7%;}
    to {left: 28.7%;}
}

/* Standard syntax */
@keyframes mymove2 {
    from {left: 38.7%;}
    to {left: 28.7%;}
}

#m3 {
position: absolute; 
   display: none;
top: 41.6%; 
left: 39%;
    -webkit-animation: mymove3 3s infinite; /* Safari 4.0 - 8.0 */
    animation: mymove3 3s infinite;
     -webkit-animation-iteration-count: 1;
          animation-timing-function: linear;
              animation-iteration-count: 1;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove3 {
    from {left: 49%;}
    to {left: 39%;}
 i 
}

/* Standard syntax */
@keyframes mymove3 {
    from {left: 49%;}
    to {left: 39%;}

}   


#m4 {
position: absolute; 
   display: none;
top: 65.1%; 
left: 33.8%;
    -webkit-animation: mymove 3s infinite; /* Safari 4.0 - 8.0 */
    animation: mymove 3s infinite;
     -webkit-animation-iteration-count: 1;
         animation-timing-function: linear;
             animation-iteration-count: 1;
    
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
    from {top: 55.1%;}
    to {top: 65.1%;}
 
}

/* Standard syntax */
@keyframes mymove {
    from {top: 55.1%;}
    to {top: 65.1%;}

}    


#m5 {
position: absolute; 
   display: none;
top: 38%; 
left: 46.9%;
   -webkit-animation: mymove5 3s infinite; /* Safari 4.0 - 8.0 */
    animation: mymove5 3s infinite;
     -webkit-animation-iteration-count: 1;
         animation-timing-function: linear;
             animation-iteration-count: 1;
}


/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove5 {
    from {top: 48%;}
    to {top:  38%;}
}

/* Standard syntax */
@keyframes mymove5 {
    from {top: 48%;}
    to {top:  38%;}
}

#m6 {
position: absolute; 
   display: none;
top: 47.4%; 
left: 47.1%;
     -webkit-animation: mymove6 3s infinite; /* Safari 4.0 - 8.0 */
    animation: mymove6 3s infinite;
     -webkit-animation-iteration-count: 1;
         animation-timing-function: linear;
             animation-iteration-count: 1;
}


/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove6 {
    from {top: 57.4%;}
    to {top:  47.4%;}
}

/* Standard syntax */
@keyframes mymove6 {
    from {top: 57.4%;}
    to {top:  47.4%;}
}

#m7 {
position: absolute; 
   display: none;
top: 54%; 
left: 47.1%;
    -webkit-animation: mymove7 3s infinite; /* Safari 4.0 - 8.0 */
    animation: mymove7 3s infinite;
     -webkit-animation-iteration-count: 1;
         animation-timing-function: linear;
         
          animation-iteration-count: 1;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove7 {
    from {top: 44%;}
    to {top:  54%;}
}

/* Standard syntax */
@keyframes mymove7 {
    from {top: 44%;}
    to {top:  54%;}
}


#m8 {
position: absolute; 
   display: none;
top: 64.4%; 
left: 47.1%;
    -webkit-animation: mymove8 3s infinite; /* Safari 4.0 - 8.0 */
    animation: mymove8 3s infinite;
     -webkit-animation-iteration-count: 1;
         animation-timing-function: linear;
             animation-iteration-count: 1;
}


/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove8 {
    from {top: 54.4%;}
    to {top:  64.4%;}
}

/* Standard syntax */
@keyframes mymove8 {
    from {top: 54.4%;}
    to {top:  64.4%;}
}


#m9 {
position: absolute; 
   display: none;
top: 82%; 
left: 47.1%;
    -webkit-animation: mymove9 3s infinite; /* Safari 4.0 - 8.0 */
    animation: mymove9 3s infinite;
     -webkit-animation-iteration-count: 1;
         animation-timing-function: linear;
             animation-iteration-count: 1;
}



/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove9 {
    from {top: 75%;}
    to {top: 82%;}
}

/* Standard syntax */
@keyframes mymove9 {
    from {top: 75%;}
    to {top: 82%;}
}

#m10 {
position: absolute; 
   display: none;
top: 53.8%; 
left: 62%;
    -webkit-animation: mymove10 3s infinite; /* Safari 4.0 - 8.0 */
    animation: mymove10 3s infinite;
     -webkit-animation-iteration-count: 1;
         animation-timing-function: linear;
             animation-iteration-count: 1;

}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove10 {
    from {left: 52%;}
    to {left: 62%;}
}

/* Standard syntax */
@keyframes mymove10 {
    from {left: 52%;}
    to {left: 62%;}
}



#m11 {
position: absolute; 
   display: none;
top: 68.4%; 
left: 62%;
    -webkit-animation: mymove11 3s infinite; /* Safari 4.0 - 8.0 */
    animation: mymove11 3s infinite;
     -webkit-animation-iteration-count: 1;
         animation-timing-function: linear;
             animation-iteration-count: 1;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove11 {
    from {left: 52%;}
    to {left: 62%;}
}

/* Standard syntax */
@keyframes mymove11 {
    from {left: 52%;}
    to {left: 62%;}
}

#m12 {
position: absolute; 
   display: none;
top: 31.6%; 
left: 56%;
     -webkit-animation: mymove12 3s infinite; /* Safari 4.0 - 8.0 */
    animation: mymove12 3s infinite;
     -webkit-animation-iteration-count: 1;
         animation-timing-function: linear;
             animation-iteration-count: 1;
}


/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove12 {
    from {left: 46%;}
    to {left: 56%;}
}

/* Standard syntax */
@keyframes mymove12 {
    from {left: 46%;}
    to {left: 56%;}
}




#p1 {
position: absolute; 
   display: none;
top: 34.1%; 
left: 3.4%;
 font-family: "SKODANext-Regular", Arial, Helvetica;
     font-size: 15px;
     line-height: 18px;
}

#p2 {
position: absolute; 
   display: none;
top: 50%; 
left: 3.4%;
 font-family: "SKODANext-Regular", Arial, Helvetica;
     font-size: 15px;
     line-height: 18px;
     width: 160px;
}

#p3 {
position: absolute; 
   display: none;
top: 44%; 
left: 3.4%;
 font-family: "SKODANext-Regular", Arial, Helvetica;
     font-size: 15px;
     line-height: 18px;
}

#p4 {
position: absolute; 
   display: none;
top: 75%; 
left: 3.4%;
 font-family: "SKODANext-Regular", Arial, Helvetica;
     font-size: 15px;
     line-height: 18px;
          width: 170px;
}


#p5 {
position: absolute; 
   display: none;
top: 42.2%; 
left: 77%;
 font-family: "SKODANext-Regular", Arial, Helvetica;
     font-size: 15px;
     line-height: 18px;
          width: 135px;
          text-align: right;
}

#p6 {
position: absolute; 
   display: none;
top: 50%; 
left: 77%;
 font-family: "SKODANext-Regular", Arial, Helvetica;
     font-size: 15px;
     line-height: 18px;
          width: 135px;
          text-align: right;
}


#p7 {
position: absolute; 
   display: none;
top: 57%; 
left: 77%;
 font-family: "SKODANext-Regular", Arial, Helvetica;
     font-size: 15px;
     line-height: 18px;
          width: 135px;
          text-align: right;
}

#p8 {
position: absolute; 
   display: none;
top: 71%; 
left: 3.4%;
 font-family: "SKODANext-Regular", Arial, Helvetica;
     font-size: 15px;
     line-height: 18px;
     width: 120px;
}


#p9 {
position: absolute; 
   display: none;
top: 85%; 
left: 74%;
 font-family: "SKODANext-Regular", Arial, Helvetica;
     font-size: 15px;
     line-height: 18px;
          width: 145px;
          text-align: right;
}

#p10 {
position: absolute; 
   display: none;
top: 62%; 
left: 77%;
 font-family: "SKODANext-Regular", Arial, Helvetica;
     font-size: 15px;
     line-height: 18px;
          width: 135px;
          text-align: right;
}



#p11 {
position: absolute; 
   display: none;
top: 76%; 
left: 77%;
 font-family: "SKODANext-Regular", Arial, Helvetica;
     font-size: 15px;
     line-height: 18px;
          width: 135px;
          text-align: right;
}

#p12 {
position: absolute; 
   display: none;
top: 34%; 
left: 77%;
 font-family: "SKODANext-Regular", Arial, Helvetica;
     font-size: 15px;
     line-height: 18px;
          width: 135px;
          text-align: right;
}

#l1 {
position: absolute; 
   display: none;
background-color: #0780c7;
height: 2px;
width: 290px;
left: 3.4%;
top: 32%;

}

#l2 {
position: absolute; 
display: none;
background-color: #0780c7;
height: 2px;
width: 190px;
left: 3.4%;
top: 48%;

}

#l3 {
position: absolute; 
display: none;
background-color: #0780c7;
height: 2px;
width: 277px;
left: 3.4%;
top: 42%;

}

#l4 {
position: absolute; 
display: none;
background-color: #0780c7;
height: 2px;
width: 212px;
left: 3.4%;
top: 73%;

}

#l5 {
position: absolute; 
display: none;
background-color: #0780c7;
height: 2px;
width: 276px;
left: 56%;
top: 40.5%;

}

#l6 {
position: absolute; 
display: none;
background-color: #0780c7;
height: 2px;
width: 276px;
left: 56%;
top: 48%;

}

#l7 {
position: absolute; 
display: none;
background-color: #0780c7;
height: 2px;
width: 276px;
left: 56%;
top: 55%;

}


#l8 {
position: absolute; 
display: none;
background-color: #0780c7;
height: 2px;
width: 305px;
left: 3.4%;
top: 68%;

}


#l9 {
position: absolute; 
display: none;
background-color: #0780c7;
height: 2px;
width: 285px;
left: 53%;
top: 83%;

}



#l10 {
position: absolute; 
display: none;
background-color: #0780c7;
height: 2px;
width: 185px;
left: 70%;
top: 59.8%;

}

#l11 {
position: absolute; 
display: none;
background-color: #0780c7;
height: 2px;
width: 185px;
left: 70%;
top: 74.4%;

}



#l12 {
position: absolute; 
display: none;
background-color: #0780c7;
height: 2px;
width: 254px;
left: 59%;
top: 32%;

}








#ht1 {
position: absolute; 
top: 40.5%; 
left: 31%;
width: 50px;
height: 50px;
z-index:2

}

#ht2 {
position: absolute; 
top: 47%; 
left: 47%;
width: 50px;
height: 50px;
z-index:2
}

#ht3 {
position: absolute; 
top: 38.2%; 
left: 61%;
width: 70px;
height: 118px;
z-index:2
}

#ht4 {
position: absolute; 
top: 65%; 
left: 38%;
width: 93px;
height: 64px;
z-index:2
}


#shape1 {
position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    top: 60%;
    left: 24%;
        // background-color: rgba(0,0,0,0.5);
   z-index: 3;
    cursor: pointer;
    }
    
    #shape2 {
position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    top: 48%;
    left: 57.5%;
        // background-color: rgba(0,0,0,0.5);
      z-index: 3;
    cursor: pointer;
    }
    
    
        #shape3 {
position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    top: 41.4%;
    left: 63%;
        // background-color: rgba(0,0,0,0.5);
   z-index: 3;
    cursor: pointer;
    }
    
    
     #shape4 {
position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    top: 60%;
    left: 38%;
        // background-color: rgba(0,0,0,0.5);
    z-index: 3;
    cursor: pointer;
    }
    
    

    
    #shape-text-1 {
position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    top: 65%;
    left: 24%;
  //  right: 34%;
        // background-color: rgba(0,0,0,0.5);
     z-index: 4;
    cursor: pointer;
    }
    
       #shape-text-2 {
position: absolute;
    display: none;
    width: 100%;
    height: 100%;
top: 50.5%;
    left: 57.5%;
   //  right: 22%;
        // background-color: rgba(0,0,0,0.5);
    z-index: 4;
    cursor: pointer;
    }
    
    
           #shape-text-3 {
position: absolute;
    display: none;
    width: 100%;
    height: 100%;
top: 48%;
    left: 63%;
   //  right: 22%;
        // background-color: rgba(0,0,0,0.5);
  z-index: 4;
    cursor: pointer;
    }
    
    
        #shape-text-4 {
position: absolute;
    display: none;
    width: 100%;
    height: 100%;
top: 66%;
    left: 38%;
   //  right: 22%;
        // background-color: rgba(0,0,0,0.5);
    z-index: 4;
    cursor: pointer;
    }
    
        #close1 {
position: absolute;
    display: none;
    width: 100%;
    height: 100%;
  top: 62%;
    left: 55%;
        // background-color: rgba(0,0,0,0.5);
    z-index: 5;
    cursor: pointer;
    width:14px;
    }
    
        
        #close2 {
position: absolute;
    display: none;
    width: 100%;
    height: 100%;
     top: 50%;
    left: 89%;
        // background-color: rgba(0,0,0,0.5);
    z-index: 5;
    cursor: pointer;
    width:14px;
    }
    
            #close3 {
position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    top: 43%;
    left: 94%;
        // background-color: rgba(0,0,0,0.5);
    z-index: 5;
    cursor: pointer;
    width:14px;
    }
    
    
                #close4 {
position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    top: 62%;
    left: 69%;
        // background-color: rgba(0,0,0,0.5);
    z-index: 5;
    cursor: pointer;
    width:14px;
    }
    
    p.shapep {
   max-width: 220px; 
   color: #fff;
   margin-left: 6px;
     font-family: "SKODANext-Regular", Arial, Helvetica;
     font-size: 14.5px;
     line-height: 18px;
    }
    
    
    .hotspot-active {
 background-image: url("../img/hotspot-aktivni.png");
   background-color: transparent;
   background-repeat: no-repeat;
         width: 50px;
      height: 50px;

}




.hotspot:hover {
 background-image: url("../img/hotspot-aktivni.png");
   background-color: transparent;
   background-repeat: no-repeat;
         width: 50px;
      height: 50px;

}

.hotspot {
 background-image: url("../img/hotspot.png");
   background-color: transparent;
      background-repeat: no-repeat;
      width: 50px;
      height: 50px;

}



.hotspot2:hover {
 background-image: url("../img/hotspot2-aktivni.png");
   background-color: transparent;
   background-repeat: no-repeat;
         width: 70px;
      height: 118px;

}

.hotspot2 {
 background-image: url("../img/hotspot2.png");
   background-color: transparent;
      background-repeat: no-repeat;
      width: 70px;
      height: 118px;

}


.hotspot3:hover {
 background-image: url("../img/hotspot3-aktivni.png");
   background-color: transparent;
   background-repeat: no-repeat;
         width: 93px;
      height: 64px;

}

.hotspot3 {
 background-image: url("../img/hotspot3.png");
   background-color: transparent;
      background-repeat: no-repeat;
      width: 93px;
      height: 64px;

}

.w3-animate-fading{animation:fading 6s infinite}@keyframes fading{20%{opacity:20}50%{opacity:1}100%{opacity:20}}

#deconstruction {
position: absolute; 
top: 85%; 
left: 3.4%;
 font-family: "SKODANext-Regular", Arial, Helvetica;
 font-size: 14px;
    z-index: 4;
}

#reconstruction {
position: absolute; 
    display: none;
top: 85%; 
left: 3.4%;
 font-family: "SKODANext-Regular", Arial, Helvetica;
 font-size: 14px;
}

.desetvpravo {
margin-right: 30px;
}

button#deconstruction.pulse {
-webkit-animation: pulse 1.3s infinite;
}

button#deconstruction.pulse, button#reconstruction.pulse {
animation: pulse 1s infinite;
}

@keyframes pulse
{
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.1);
  }
  100% {
    box-shadow: 0 0 0 35px rgba(0, 0, 0, 0);
  }
}

.btn-primary {
    color: #fff;
    background-color: #2f85c6;
    border-color: #2f85c6;
}




.deset {
margin-top: 10px;
}

#pb1 {
position: absolute; 
top: 40.5%; 
left: 31%;
width: 50px;
height: 50px;
background: transparent;
border-radius: 50%;


}

#pb2 {
position: absolute; 
top: 47%; 
left: 47%;
width: 50px;
height: 50px;
background: transparent;
border-radius: 50%;


}

#pb3 {
position: absolute; 
top: 64.5%; 
left: 38.3%;
width: 50px;
height: 50px;
background: transparent;
border-radius: 50%;


}

#pb4 {
position: absolute; 
top: 68.7%; 
left: 44%;
width: 50px;
height: 50px;
background: transparent;
border-radius: 50%;


}

#pb5 {
position: absolute; 
top: 38%; 
left: 61.7%;
width: 50px;
height: 50px;
background: transparent;
border-radius: 50%;


}

#pb6 {
position: absolute; 
top: 52%; 
left: 63.5%;
width: 50px;
height: 50px;
background: transparent;
border-radius: 50%;


}

.pulse-hotspot  {
animation: pulseb 1s infinite;
}

@keyframes pulseb
{
  0% {
    box-shadow: 0 0 0 0px rgba(0, 92, 191, 0.9);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(0, 92, 191, 0);
  }
}