.flip-card {
  background-color: transparent;
  width:150px; height:150px;
  border: none;
  perspective: 800px; /* Remove this if you don't want the 3D effect */
}

.flip-card-300 {
  background-color: transparent;
  width:250px; 
  height:250px;
  border: none;
  perspective: 800px; /* Remove this if you don't want the 3D effect */
}

.no-flip-card-eme {
    padding-top:10px; /*quando attiverò il pulsante: padding-top:20px;*/
    width:555px; 
    height:100px;   
    border:solid 12px #E62E26; 
    border-radius:20px;
    background: url("../img/icona-eme-trasp2.png") no-repeat center center
}

.no-flip-card-dia {
    padding-top:50px; 
    width:150px; 
    height:150px;
    border:solid 12px #A01916; 
    border-radius:20px;
    background: url("../img/icona-dia-trasp2.png") no-repeat center center
}

.no-flip-card-dip {
    padding-top:50px;
    width:150px; 
    height:150px;
    border:solid 12px #6F4193; 
    border-radius:20px;
    background: url("../img/icona-dip-trasp2.png") no-repeat center center
}

.no-flip-card-agg {
    padding-top:35px;
    width:150px; 
    height:150px;
    border:solid 12px #BC920D; 
    border-radius:20px;
    background: url("../img/icona-agg-trasp2.png") no-repeat center center
}

.no-flip-card-spe {
    padding-top:40px;
    width:150px; 
    height:150px;
    border:solid 12px #BE4694; 
    border-radius:20px;
    background: url("../img/icona-spe-trasp2.png") no-repeat center center
}

.no-flip-card-dia a, .no-flip-card-dip a, .no-flip-card-agg a, .no-flip-card-spe a {
    font-family: 'BenchNine', sans-serif; 
    font-size:1.7em; 
    text-transform: uppercase;
    margin-top: 20px;
    color: #000;
}

.no-flip-card-eme a {
    font-family: 'BenchNine', sans-serif; 
    font-size:3em; 
    text-transform: uppercase;
    color: #000;
}

.no-flip-card-eme a:hover, .no-flip-card-dia a:hover, .no-flip-card-dip a:hover, .no-flip-card-agg a:hover, .no-flip-card-spe a:hover {color:#666; text-decoration:none}

.flip-card-inner {
  	position: relative;
  	width: 100%;
  	height: 100%;
  	text-align: center;
  	transition: transform 0.8s;
  	transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner,
.flip-card-300:hover .flip-card-inner,
.flip-card-700:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

.flip-card-front {
  	background-color: #fff;
  	color: #000;
	font-family: 'BenchNine', sans-serif;  
	text-transform: uppercase;
}

.boxosp-front {font-size:3em; border:12px solid #A4A83B; border-radius:20px; background: url("../img/icona-osp-trasp.png") no-repeat center center}
.boxter-front {font-size:3em; border:12px solid #F19810; border-radius:20px; background: url("../img/icona-ter-trasp3.png") no-repeat center center}
.boxstr-front {font-size:2em; border:12px solid #5B5C1E; border-radius:20px; background: url("../img/icona-audit-trasp2.png") no-repeat center center}
.boxequ-front {font-size:2em; border:12px solid #6AC3C6; border-radius:20px; background: url("../img/icona-equ-trasp2.png") no-repeat center center}

.flip-card-front p {
  	margin-top:60px; /*90*/
	line-height:1em;
}

.flip-card-front p.small {
  	margin-top:50px; /*60*/
	line-height:1em;
}

.flip-card-back {
  	background-color: #fff;
  	color: black;
  	transform: rotateY(180deg);
	font-family: 'BenchNine', sans-serif; 
    border-radius:20px;
}

.flip-card-back p {
  	margin-top: 35px; /*50*/
	line-height:1em;
    font-size: 1.5em; /*1.7*/
}

.flip-card-back p.big {
  	margin-top: 50px; /*60*/
	line-height:1em;
    font-size: 2.3em; /*2.5*/
}

.flip-card-back p.big-ter {
  	margin-top: 35px; 
	line-height:1em;
    font-size: 2.3em; /*2.5*/
}

/*.flip-card-back p.link-unico {
  	margin-top: 60px;
	line-height:1em;
}*/

.boxosp-back {background:#A4A83B;}
.boxter-back {background:#F19810;}
.boxeme-back {background:#E62E26;} /*per ora non serve*/
.boxspe-back {background:#BE4694;}
.boxstr-back {background:#5B5C1E;}
.boxagg-back {background:#BC920D;} /*per ora non serve*/
.boxequ-back {background:#6AC3C6;}
.boxdia-back {background:#A01916} /*per ora non serve*/
.boxdip-back {background:#6F4193} /*per ora non serve*/

.boxcovid-back p a, .boxcovid-back p a:hover, .boxosp-back p a, .boxosp-back p a:hover, .boxter-back p a, .boxter-back p a:hover, .boxeme-back p a, .boxeme-back p a:hover, .boxspe-back p a, .boxspe-back p a:hover, .boxequ-back p a, .boxequ-back p a:hover, .boxdia-back p a, .boxdia-back p a:hover, .boxagg-back p a, .boxagg-back p a:hover, .boxstr-back p a, .boxstr-back p a:hover, .boxdip-back p a, .boxdip-back p a:hover {color: #FFF;}

.boxcovid-back p a.disattivo, .boxcovid-back p a.disattivo:hover, .boxosp-back p a.disattivo, .boxosp-back p a.disattivo:hover, .boxter-back p a.disattivo, .boxter-back p a.disattivo:hover, .boxeme-back p a.disattivo, .boxeme-back p a.disattivo:hover, .boxspe-back p a.disattivo, .boxspe-back p a.disattivo:hover, .boxequ-back p a.disattivo, .boxequ-back p a.disattivo:hover, .boxdia-back p a.disattivo, .boxdia-back p a.disattivo:hover, .boxagg-back p a.disattivo, .boxagg-back p a.disattivo:hover, .boxstr-back p a.disattivo, .boxstr-back p a.disattivo:hover, .boxdip-back p a.disattivo, .boxdip-back p a.disattivo:hover {text-decoration:none}
