/* Image map styles */

/* MF 09-02-2019: aggiunta classe .imageMapPlanimetria */
.imageMap, .imageMapPercorso, .imageMapIsolaRobotica, .imageMapServiziMkt, .imageMapContatti,
.imageMapCompetencePoint, .imageMapCompetencePoint5, .imageMapPlanimetria, .imageMapBtnIscrizione {
    width: 100%;
    position: relative;
    /*margin: 20px 0 100px 0;*/
}

    .imageMap img, .imageMapPercorso img, .imageMapIsolaRobotica img, .imageMapServiziMkt img, .imageMapContatti img, 
    .imageMapCompetencePoint img, .imageMapPlanimetria img, .imageMapBtnIscrizione img {
        display: block;
        width: 100%;
        border-radius: 20px;
    }

    .imageMap .hotspots, .imageMapPercorso .hotspots, .imageMapIsolaRobotica .hotspots, .imageMapServiziMkt .hotspots, .imageMapContatti .hotspots, 
    .imageMapCompetencePoint .hotspots, .imageMapCompetencePoint5 .hotspots, .imageMapPlanimetria .hotspots, .imageMapBtnIscrizione .hotspots {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        visibility: hidden;
    }

    .imageMap a, .imageMapPercorso a, .imageMapIsolaRobotica a, .imageMapServiziMkt a, .imageMapContatti a, 
    .imageMapCompetencePoint a, .imageMapCompetencePoint5 a, .imageMapPlanimetria a, .imageMapBtnIscrizione a {
        display: block;
        position: absolute;
        background: #000; /* MF 2019-12-06 il colore di default viene sovrascritto quando è presente un colore specifico per l'area della mappa */
        z-index: 100;
        opacity: 0.2;
        filter: alpha(opacity=20);
        border: 3px dashed #4568dc; /*solid transparent MF 2019-12-06 cambiato stile bordo, in modo da rendere più evidente l'area */
    }

    .imageMap a {
        border-radius: 10px;
    }

    .imageMap:hover .hotspots, .imageMapPercorso:hover .hotspots, .imageMapIsolaRobotica:hover .hotspots, .imageMapServiziMkt:hover .hotspots, .imageMapContatti:hover .hotspots, 
    .imageMapCompetencePoint:hover .hotspots, .imageMapCompetencePoint5:hover .hotspots, .imageMapPlanimetria:hover .hotspots, .imageMapBtnIscrizione:hover .hotspots {
        visibility: visible;
    }

#info .imageMap p strong, #info .imageMapPercorso p strong, #info .imageMapIsolaRobotica p strong, #info .imageMapServiziMkt p strong, #info .imageMapContatti p strong, 
#info .imageMapCompetencePoint p strong, #info .imageMapCompetencePoint5 p strong, #info .imageMapPlanimetria p strong, #info .imageMapBtnIscrizione p strong {
    display: block;
    padding: 0;
    margin: 0;
    font: bold 25px/30px 'latolight',sans-serif;
    color: #069;
}

#info .imageMap p, #info .imageMapPercorso p, #info .imageMapIsolaRobotica p, #info .imageMapServiziMkt p, #info .imageMapContatti p, 
#info .imageMapCompetencePoint p, #info .imageMapCompetencePoint5 p, #info .imageMapPlanimetria p, #info .imageMapBtnIscrizione p {
    padding: 0;
    margin: 0;
    font: normal 18px/22px 'latomedium', sans-serif;
    color: #444;
}

.imageMap b, .imageMapPercorso b, .imageMapIsolaRobotica b, .imageMapServiziMkt b, .imageMapContatti b, 
.imageMapCompetencePoint b, .imageMapCompetencePoint5 b, .imageMapPlanimetria b, .imageMapBtnIscrizione b {
    display: block;
    position: absolute;
    background: url(trans.gif);
    z-index: 200;
    opacity: 0.2;
    filter: alpha(opacity=20);
    padding: 1px;
    -webkit-transition: 0.75s;
    -moz-transition: 0.75s;
    -o-transition: 0.75s;
    transition: 0.75s;
}

.imageMap .hotspots div:hover b, .imageMapPercorso .hotspots div:hover b, .imageMapIsolaRobotica .hotspots div:hover b, .imageMapServiziMkt .hotspots div:hover b, .imageMapContatti .hotspots div:hover b,
.imageMapCompetencePoint .hotspots div:hover b, .imageMapCompetencePoint5 .hotspots div:hover b, .imageMapPlanimetria .hotspots div:hover b, .imageMapBtnIscrizione .hotspots div:hover b {
    width: 0;
    padding: 0;
}

.imageMap .hotspots div:hover p, .imageMapPercorso .hotspots div:hover p, .imageMapIsolaRobotica .hotspots div:hover p, .imageMapServiziMkt .hotspots div:hover p, .imageMapContatti .hotspots div:hover p,
.imageMapCompetencePoint .hotspots div:hover p, .imageMapCompetencePoint5 .hotspots div:hover p, .imageMapPlanimetria .hotspots div:hover p, .imageMapBtnIscrizione .hotspots div:hover p {
    display: block;
}

.imageMap .hotspots div:hover a, .imageMapPercorso .hotspots div:hover a, .imageMapIsolaRobotica .hotspots div:hover a, .imageMapServiziMkt .hotspots div:hover a, .imageMapContatti .hotspots div:hover a,
.imageMapCompetencePoint .hotspots div:hover a, .imageMapCompetencePoint5 .hotspots div:hover a, .imageMapPlanimetria .hotspots div:hover a, .imageMapBtnIscrizione .hotspots div:hover a {
    background: #fff;
    z-index: 100;
    opacity: 0.3;
    filter: alpha(opacity=30);
    border: 1px solid #000;
}

/*INIZIO imageMap*/
.imageMap a.p1 {
    left: 0; /*11%;*/
    top: 0;
    width: 50%;
    height: 50%;
}

.imageMap a.p2 {
    left: 51%;
    top: 0;
    width: 50%;
    height: 50%;
}

.imageMap a.p3 {
    left: 0;
    top: 51%;
    width: 50%;
    height: 50%;
}

.imageMap a.p4 {
    left: 51%;
    top: 51%;
    width: 50%;
    height: 50%;
}

.imageMap a + p {
    position: absolute;
    left: 0%;
    top: 102%;
    width: 100%;
    color: #000;
    display: none;
}

.imageMap p.par1 {
    left: 2%;
    top: 30%;
    width: 45%;
    height: 34%;
    text-align: justify;
    font-weight: bold;
}

.imageMap p.par2 {
    left: 70%;
    top: 30%;
    width: 45%;
    height: 34%;
    text-align: justify;
    font-weight: bold;
}

.imageMap p.par3 {
    left: 2%;
    top: 60%;
    width: 45%;
    height: 34%;
    text-align: justify;
    font-weight: bold;
}

.imageMap p.par4 {
    left: 70%;
    top: 70%;
    width: 45%;
    height: 34%;
    text-align: justify;
    font-weight: bold;
}

.imageMap b.b1 {
    left: 11%;
    top: 5%;
    width: 25%;
    height: 34%;
}

.imageMap b.b2 {
    left: 76%;
    top: 13%;
    width: 21%;
    height: 30%;
}

.imageMap b.b3 {
    left: 5%;
    top: 44%;
    width: 22%;
    height: 42%;
}

.imageMap b.b4 {
    left: 28%;
    top: 41%;
    width: 26.5%;
    height: 43%;
}
/*FINE imageMap*/

/*INIZIO imageMapPercorso*/
.imageMapPercorso a.p1 {
    left: 0; /*11%;*/
    top: 0;
    width: 50%;
    height: 50%;
    /*border-top-left-radius: 400px;
    border-bottom-right-radius: 50px;
    border-bottom-left-radius: 400px;
    border-top-right-radius: 400px;*/
}

.imageMapPercorso a.p2 {
    left: 50%;
    top: 0;
    width: 50%;
    height: 50%;
    /*border-top-left-radius: 400px;
    border-bottom-right-radius: 400px;
    border-bottom-left-radius: 50px;
    border-top-right-radius: 400px;*/
}

.imageMapPercorso a.p3 {
    left: 0;
    top: 50%;
    width: 50%;
    height: 50%;
    /*border-top-left-radius: 400px;
    border-bottom-right-radius: 400px;
    border-bottom-left-radius: 400px;
    border-top-right-radius: 50px;*/
}

.imageMapPercorso a.p4 {
    left: 50%;
    top: 50%;
    width: 50%;
    height: 50%;
    /*border-top-left-radius: 50px;
    border-bottom-right-radius: 400px;
    border-bottom-left-radius: 400px;
    border-top-right-radius: 400px;*/
}

.imageMapPercorso a.p1vert {
    left: 0%;
    top: 75%;
    width: 100%;
    height: 25%;
}

.imageMapPercorso a.p2vert {
    left: 0%;
    top: 50%;
    width: 100%;
    height: 25%;
}

.imageMapPercorso a + p {
    position: absolute;
    left: 0%;
    top: 102%;
    width: 100%;
    color: #000;
    display: none;
}

.imageMapPercorso p.par1 {
    left: 2%;
    top: 30%;
    width: 45%;
    height: 34%;
    text-align: justify;
    font-weight: bold;
}

.imageMapPercorso p.par2 {
    left: 70%;
    top: 30%;
    width: 45%;
    height: 34%;
    text-align: justify;
    font-weight: bold;
}

.imageMapPercorso p.par3 {
    left: 2%;
    top: 60%;
    width: 45%;
    height: 34%;
    text-align: justify;
    font-weight: bold;
}

.imageMapPercorso p.par4 {
    left: 70%;
    top: 70%;
    width: 45%;
    height: 34%;
    text-align: justify;
    font-weight: bold;
}
/*FINE imageMapPercorso*/

/*INIZIO imageMapIsolaRobotica*/
.imageMapIsolaRobotica a.p1 {
    left: 25%; /*11%;*/
    top: 5%;
    width: 22%;
    height: 27%;
    border-radius: 500px;
}

.imageMapIsolaRobotica a.p2 {
    left: 57%;
    top: 7%;
    width: 22%;
    height: 27%;
    border-radius: 500px;
}

.imageMapIsolaRobotica a.p3 {
    left: 67%;
    top: 46%;
    width: 22%;
    height: 27%;
    border-radius: 500px;
}

.imageMapIsolaRobotica a.p4 {
    left: 35%;
    top: 70%;
    width: 22%;
    height: 27%;
    border-radius: 500px;
}

.imageMapIsolaRobotica a.p5 {
    left: 10%;
    top: 37%;
    width: 22%;
    height: 27%;
    border-radius: 500px;
}

.imageMapIsolaRobotica a.p6 {
    left: 33%;
    top: 29%;
    width: 35%;
    height: 40%;
    border-radius: 500px;
}

.imageMapIsolaRobotica a + p {
    position: absolute;
    left: 0%;
    top: 102%;
    width: 100%;
    color: #000;
    display: none;
}
/*FINE imageMapIsolaRobotica*/

/*INIZIO imageMapServiziMkt*/
.imageMapServiziMkt a.p1 {
    left: 0; /*11%;*/
    top: 0;
    width: 50%;
    height: 50%;
}

.imageMapServiziMkt a.p2 {
    left: 50%;
    top: 0;
    width: 50%;
    height: 50%;
}

.imageMapServiziMkt a.p3 {
    left: 0;
    top: 50%;
    width: 50%;
    height: 50%;
}

.imageMapServiziMkt a.p4 {
    left: 50%;
    top: 50%;
    width: 50%;
    height: 50%;
}

.imageMapServiziMkt a + p {
    position: absolute;
    left: 0%;
    top: 102%;
    width: 100%;
    color: #000;
    display: none;
}

.imageMapServiziMkt p.par1 {
    left: 2%;
    top: 30%;
    width: 45%;
    height: 34%;
    text-align: justify;
    font-weight: bold;
}

.imageMapServiziMkt p.par2 {
    left: 70%;
    top: 30%;
    width: 45%;
    height: 34%;
    text-align: justify;
    font-weight: bold;
}

.imageMapServiziMkt p.par3 {
    left: 2%;
    top: 60%;
    width: 45%;
    height: 34%;
    text-align: justify;
    font-weight: bold;
}

.imageMapServiziMkt p.par4 {
    left: 70%;
    top: 70%;
    width: 45%;
    height: 34%;
    text-align: justify;
    font-weight: bold;
}
/*FINE imageMapServiziMkt*/

/*INIZIO imageMapContatti*/
.imageMapContatti a.p1 {
    left: -3%; /*11%;*/
    top: 0;
    width: 34%;
    height: 100%;
}

.imageMapContatti a.p2 {
    left: 32.2%;
    top: 0;
    width: 34.4%;
    height: 100%;
}

.imageMapContatti a.p3 {
    left: 67.7%;
    top: 0;
    width: 34%;
    height: 100%;
}

.imageMapContatti a + p {
    position: absolute;
    left: 0%;
    top: 102%;
    width: 100%;
    color: #000;
    display: none;
}

.imageMapContatti p.par1 {
    left: 2%;
    top: 30%;
    width: 45%;
    height: 34%;
    text-align: justify;
    font-weight: bold;
}

.imageMapContatti p.par2 {
    left: 70%;
    top: 30%;
    width: 45%;
    height: 34%;
    text-align: justify;
    font-weight: bold;
}

.imageMapContatti p.par3 {
    left: 2%;
    top: 60%;
    width: 45%;
    height: 34%;
    text-align: justify;
    font-weight: bold;
}
/*FINE imageMapServiziMkt*/

/*INIZIO imageMapCompetencePoint*/
@media screen and (min-width:1280px) /*PC*/
{
    .imageMapCompetencePoint a.p1 {
        left: 0;
        top: 0;
        width: 25%;
        height: 100%;
    }

    .imageMapCompetencePoint a.p2 {
        left: 25%;
        top: 0;
        width: 25%;
        height: 100%;
    }

    .imageMapCompetencePoint a.p3 {
        left: 50%;
        top: 0;
        width: 25%;
        height: 100%;
    }

    .imageMapCompetencePoint a.p4 {
        left: 75%;
        top: 0;
        width: 25%;
        height: 100%;
    }
}

@media (min-width: 640px) and (max-width: 1280px) /*tablet portrait e landscape*/
{
    .imageMapCompetencePoint a.p1 {
        left: 0;
        top: 0;
        width: 50%;
        height: 50%;
    }

    .imageMapCompetencePoint a.p2 {
        left: 50%;
        top: 0;
        width: 50%;
        height: 50%;
    }

    .imageMapCompetencePoint a.p3 {
        left: 0;
        top: 50%;
        width: 50%;
        height: 50%;
    }

    .imageMapCompetencePoint a.p4 {
        left: 50%;
        top: 50%;
        width: 50%;
        height: 50%;
    }
}

@media screen and (max-width: 640px) /*smartphone portrait e landscape*/
{
    .imageMapCompetencePoint a.p1 {
        left: 0;
        top: 0;
        width: 50%;
        height: 50%;
    }

    .imageMapCompetencePoint a.p2 {
        left: 50%;
        top: 0;
        width: 50%;
        height: 50%;
    }

    .imageMapCompetencePoint a.p3 {
        left: 0;
        top: 50%;
        width: 50%;
        height: 50%;
    }

    .imageMapCompetencePoint a.p4 {
        left: 50%;
        top: 50%;
        width: 50%;
        height: 50%;
    }
}
/*FINE imageMapCompetencePoint*/


/*INIZIO imageMapCompetencePoint5 usata per i 5 CP del 2020, per ora è usata solo da desktop, per cui non uso @media screen */
@media screen and (min-width:1280px) /*PC*/
{
    .imageMapCompetencePoint5 a.p1 {
        left: 0;
        top: 0;
        width: 20%;
        height: 100%;
    }

    .imageMapCompetencePoint5 a.p2 {
        left: 20%;
        top: 0;
        width: 20%;
        height: 100%;
    }

    .imageMapCompetencePoint5 a.p3 {
        left: 40%;
        top: 0;
        width: 20%;
        height: 100%;
    }

    .imageMapCompetencePoint5 a.p4 {
        left: 60%;
        top: 0;
        width: 20%;
        height: 100%;
    }

    .imageMapCompetencePoint5 a.p5 {
        left: 80%;
        top: 0;
        width: 20%;
        height: 100%;
    }
}
/*FINE imageMapCompetencePoint5 */


/*INIZIO imageMapPlanimetria: usata per planimetria 2019*/
.imageMapPlanimetria a.innovPoint {
    left: 2%; /*11%;*/
    top: 25%;
    width: 10%;
    height: 11%;
}

.imageMapPlanimetria a.sparkUp {
    left: 39%;
    top: 45%;
    width: 16%;
    height: 13%;
}

.imageMapPlanimetria a.schermi {
    left: 2%;
    top: 40%;
    width: 10%;
    height: 24%;
}

.imageMapPlanimetria a.compPoint1 {
    left: 17%;
    top: 0;
    width: 19%;
    height: 32%;
}

.imageMapPlanimetria a.compPoint2 {
    left: 40%;
    top: 0;
    width: 23%;
    height: 32%;
}

.imageMapPlanimetria a.compPoint3 {
    left: 17%;
    top: 73%;
    width: 20%;
    height: 28%;
}

.imageMapPlanimetria a.compPoint4 {
    left: 61%;
    top: 73%;
    width: 27%;
    height: 28%;
}

/* FINE imageMapPlanimetria*/


/*INIZIO imageMapPlanimetria_2020 */
.imageMapPlanimetria a.schermi_2020 { /*adattamento di a.schermi all'immagine 2020 */
    left: 1%;
    top: 31%;
    width: 10%;
    height: 24%;
}
/*compPoint1 e compPoint2 non hanno cambiato posizione */
.imageMapPlanimetria a.compPoint3_2020 { /*adattamento di a.compPoint3 all'immagine 2020 */
    left: 6%;
    top: 61%;
    width: 29%;
    height: 39%;
    border-top-left-radius: 30%;
}

.imageMapPlanimetria a.compPoint4_2020 { /*adattamento di a.compPoint4 all'immagine 2020 */
    left: 81%;
    top: 61%;
    width: 17%;
    height: 39%;
}

.imageMapPlanimetria a.DigitalGallery {
    /* MF 2019-10-07 - cambiata posizione della DigitalGallery e della SparkUp */
    /* MF 2019-12-06 - cambiata posizione della DigitalGallery e della SparkUp */
    left: 39%;
    top: 65%; /*53%*/
    width: 16%;
    height: 25%; /*21%*/
}

.imageMapPlanimetria a.sparkUp_2020 { /*adattamento di a.sparkUp all'immagine 2020 */
    /* MF 2019-10-07 - cambiata posizione della DigitalGallery e della SparkUp */
    /* MF 2019-12-06 - cambiata posizione della DigitalGallery e della SparkUp */
    left: 65%;
    top: 82%; /*67%*/
    width: 15%;
    height: 9%;
}

/*FINE imageMapPlanimetria_2020 */


/*
non realizzato per imageMapPlanimetria perché non viene usato per ora MF 09-02-2019
.imageMapContatti a + p {
    position: absolute;
    left: 0%;
    top: 102%;
    width: 100%;
    color: #000;
    display: none;
}

.imageMapContatti p.par1 {
    left: 2%;
    top: 30%;
    width: 45%;
    height: 34%;
    text-align: justify;
    font-weight: bold;
}

.imageMapContatti p.par2 {
    left: 70%;
    top: 30%;
    width: 45%;
    height: 34%;
    text-align: justify;
    font-weight: bold;
}

.imageMapContatti p.par3 {
    left: 2%;
    top: 60%;
    width: 45%;
    height: 34%;
    text-align: justify;
    font-weight: bold;
}*/
/*FINE imageMapServiziMkt*/

/* imageMapBtnIscrizione */
.imageMapBtnIscrizione a.p1 {
    right: 52%;
    bottom: 12%;
    width: 27%;
    height: 15%;
    border-radius: 50px;
}

.imageMapBtnIscrizione a.p2 {
    left: 52%;
    bottom: 12%;
    width: 27%;
    height: 15%;
    border-radius: 50px;
}

.imageMapBtnIscrizione a + p {
    position: absolute;
    left: 0%;
    top: 102%;
    width: 100%;
    color: #000;
    display: none;
}

@media screen and (max-width:860px) { /* mobile */
    .imageMapBtnIscrizione a.p1 {
        left: 19%;
        bottom: 20%;
        width: 63%;
        height: 10%;
        border-radius: 50px;
    }

    .imageMapBtnIscrizione a.p2 {
        left: 19%;
        bottom: 8%;
        width: 63%;
        height: 11%;
        border-radius: 50px;
    }
}
/* FINE imageMapBtnIscrizione */