*{
    margin:0;
    padding:0;
}
.container {
    max-width: 1026px;
    margin: 0 auto;
}

.photo-container{
    display: block;
    position: relative;
    margin:20px auto 20px;
}

.photo-container img{
    display: block;
    width:100%;
    height: auto;
}
#img2{padding-top:100px;    margin-bottom: 100px;}

/*dettagli foto sopra*/
.dettaglio{display: block;width: auto;position: absolute;}
.dettaglio .info{box-shadow:0px 0px 10px rgba(0,0,0,0.65);background:#fff;border: 2px solid #fff;border-top-left-radius: 7px;border-bottom-right-radius: 7px;overflow:hidden;height:34px;transition: 0.5s;max-width: 150px}
.dettaglio .info:hover{height:auto;}
.dettaglio .info.long{height:auto;}

.dettaglio .info span.title{font-weight: bolder;background: #b3b3b3;color:#fff;border:2px solid #fff;padding:4px 10px;border-top-left-radius: 6px;border-bottom-right-radius: 6px;display: block;text-align: center;}
.dettaglio .info ul li{list-style: none;padding:4px;font-size:1em;}
.dettaglio .info a.yt{display: block;width:40px;height:28px;background-image:url(../images/yt.png);margin:5px auto;}
.dettaglio .info a.goDown{display: block;width:40px;height:28px;background-image:url(../images/goDown.png);margin:5px auto;}
.dettaglio .info span.lookIt{font-size: 0.4em;text-align: center;display: block;}

.dettaglio span.icona{display: block;width:106px;height:70px;margin:0 auto;}

.dettaglio.sicurezza{top: 27%;left: 4%;}
.dettaglio.sicurezza span.icona{background-image: url(../images/ico1.png);}

.dettaglio.funzionalita{top: 5%;left: 23%;}
.dettaglio.funzionalita span.icona{background-image: url(../images/ico2.png);}

.dettaglio.utilita{top: 5%;left: 66%;}
.dettaglio.utilita span.icona{background-image: url(../images/ico3.png);}

.dettaglio.emergenza{top: 29%;left: 84%;}
.dettaglio.emergenza span.icona{background-image: url(../images/ico4.png);}


.dettaglio.navigatore{top: 10%;left: 44%;}
.dettaglio.navigatore span.icona{background-image: url(../images/ico7.png);}


/*dettagli foto sotto*/
.dettaglio2{display: block;width: auto;position: absolute;}
.dettaglio2 .info{box-shadow:0px 0px 10px rgba(0,0,0,0.65);background:#fff;border: 2px solid #fff;border-top-left-radius: 7px;border-bottom-right-radius: 7px;overflow:hidden;height:52px;transition: 0.5s;max-width: 150px}
.dettaglio2 .info:hover{height:auto;}
.dettaglio2 .info.long{height:auto;}

.dettaglio2 .info span.title{font-weight: bolder;background: #b3b3b3;color:#fff;border:2px solid #fff;padding:4px 10px;border-top-left-radius: 6px;border-bottom-right-radius: 6px;display: block;text-align: center;}
.dettaglio2 .info ul li{list-style: none;padding:4px;font-size: 1em;}
.dettaglio2 .info a.yt{display: block;width:40px;height:28px;background-image:url(../images/yt.png);margin:5px auto;}
.dettaglio2 .info span.lookIt{font-size: 0.4em;text-align: center;display: block;}

.dettaglio2 span.icona{display: block;width:106px;height:70px;margin:0 auto;}

.dettaglio2.cav{top: 41%;left: 2%;}
.dettaglio2.cav span.icona{background-image: url(../images/ico5.png);}

.dettaglio2.funzioni-display{top: 18%;left: 32%;}
.dettaglio2.funzioni-display span.icona{background-image: url(../images/ico6.png);}

.dettaglio2.navigatore{top: 18%;left: 53%;}
.dettaglio2.navigatore span.icona{background-image: url(../images/ico7.png);}

.dettaglio2.all-grip{top: 49%;left: 70%;}
.dettaglio2.all-grip span.icona{background-image: url(../images/ico8.png);}

.dettaglio2.cambio{top: 74%;left: 72%;}
.dettaglio2.cambio span.icona{background-image: url(../images/ico9.png);}



img.imgMobile{display: none;}

/*css per iframe popup video*/
#popUpVideo{overflow:hidden; margin:10px;}
#popUpVideo .video-container{display: block;width:60%; float:left;}
#popUpVideo .info-video{display: block;width:35%; float:left; padding:0 2%;font-family: 'Open Sans', Arial, sans-serif;}
.info-video h3{font-size: 18px;}
.info-video li{font-size: 14px;line-height: 16px;}
.info-video p{font-size: 14px;line-height: 16px;}
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }





@media (max-width:768px){
    .photo-container img{display: none;}
    img.imgMobile{display: block;}  
    #popUpVideo{overflow:hidden; height:auto;}
    #popUpVideo .video-container{display: block;width:90%; float:none; margin:0 auto 10px !important;}
    #popUpVideo .info-video{display: block;width:90%; float:none; margin:0 auto 30px;}
    
    .dettaglio.sicurezza{top: 15%;left: 5%;}
	.dettaglio.funzionalita{top: 65%;left: 5%;}
	.dettaglio.navigatore{top: 10%;left: 40%;}
	.dettaglio.utilita{top: 15%;left: 77%;}
	.dettaglio.emergenza{top: 65%;left: 77%;}
    
}


@media (max-width:480px){
	
	.dettaglio.sicurezza{top: 2%;left: 2%;}
	.dettaglio.funzionalita{top: 70%;left: 5%;}
	.dettaglio.navigatore{top: 13%;left: 32%;}
	.dettaglio.utilita{top: 2%;left: 67%;}
	.dettaglio.emergenza{top: 70%;left: 63%;}
	
    /*.dettaglio.funzionalita {
      top: 1%;    
      left: 1%;
    }
    .dettaglio.utilita {
        top: 1%;
        left: 48%;
    }
    .dettaglio.sicurezza {
        top: 63%;
        left: 6%;
    }
    .dettaglio.emergenza {
        top: 63%;
        left: 57%;
    }*/
    .dettaglio2.funzioni-display {
        top: -11%;
        left: 1%;
    }
    .dettaglio2.navigatore {
         top: -11%;
        left: 48%;
    }
    .dettaglio2.cav {
        top: 50%;
        left: 1%;
    }
    .dettaglio2.cambio {
        top: 51%;
        left: 63%;
    }
    .dettaglio2.all-grip {
         top: 81%;
        left: 32%;
    }   
}