/* ==========================================================================
   R.A.C.I. - STILI AGGIUNTIVI PER LE PAGINE FOTO (Vetture ed Eventi)
   Si carica DOPO raci.css. Prima queste regole erano in una seconda
   versione di css/styleSS.css copiata in ogni cartella foto.
   ========================================================================== */

h3 {
    font-family:  Verdana;
	color: #FFFF00;
    text-align: center;
    padding: 10px;}


/* nelle pagine foto i pulsanti del menu sono piu' larghi */
li a {
    width: 110px;
    }
#menu {
    --raci-btn: 110px;   /* larghezza pulsanti per il menu che si adatta */
    }

/* 3D rollingslide */ 

#rollingslide {
	margin: 50 auto;
	width: 80%;
	box-sizing: border-box;
}


.sub-heading {
	padding-top: 50px;
	font-size: 18px;
} .sub-heading-two {
	font-size: 15px;
} .sub-heading-three {
	font-size: 13px;
} .sub-heading-four {
	font-size: 11px;
} .sub-heading-five {
	font-size: 9px;
} .sub-heading-six {
	font-size: 7px;
} .sub-heading-seven {
	font-size: 5px;
} .sub-heading-eight {
	font-size: 3px;
} .sub-heading-nine {
	font-size: 1px;
}

.entire-content {
	margin: auto;
	width: 170px;
	perspective: 800px;
	position: relative;
	padding-top: 10px;
}

.cnt-crl {
	width: 100%;
	position: absolute;
	float: left;
	animation: rotar 25s infinite linear;
	transform-style: preserve-3d;
}

.cnt-crl:hover {
	animation-play-state: paused;
	cursor: pointer;
}

.cnt-crl figure {
	width: 130%;
	height: 150px;
	border: 2px solid #2F4999;
	overflow: hidden;
	position: absolute;
	background: #F5FDE2;
    text-align: center;
    color: #2F4999;
}

.cnt-crl figure:nth-child(1) {
	transform: rotateY(0deg) translateZ(320px); 
} .cnt-crl figure:nth-child(2) {
	transform: rotateY(51deg) translateZ(320px); 
} .cnt-crl figure:nth-child(3) {
	transform: rotateY(102deg) translateZ(320px); 
} .cnt-crl figure:nth-child(4) {
	transform: rotateY(153deg) translateZ(320px); 
} .cnt-crl figure:nth-child(5) {
	transform: rotateY(204deg) translateZ(320px); 
} .cnt-crl figure:nth-child(6) {
	transform: rotateY(255deg) translateZ(320px); 
} .cnt-crl figure:nth-child(7) {
	transform: rotateY(306deg) translateZ(320px); 
} .cnt-crl figure:nth-child(8) {
	transform: rotateY(357deg) translateZ(320px); 
} .cnt-crl figure:nth-child(9) {
	transform: rotateY(320deg) translateZ(320px); 
} .cnt-crl figure:nth-child(10) {
	transform: rotateY(360deg) translateZ(320px); 
} 

.rollinshw {
    position: absolute;
    box-shadow: 0px 0px 20px 0px #2F4999;
    border-radius: 3px;
}

.cnt-crl img {
	image-rendering: auto;
	transition: all 700ms;
	width: 100%;
	height: 100%;
}

.cnt-crl img:hover {
	transform: scale(1.7);
	transition: all 700ms;
}

@keyframes rotar {
	from {
		transform: rotateY(360deg);
	} to {
		transform: rotateY(0deg);
	}
}

* {
box-sizing: border-box;
}

.row > .column {
padding: 0 8px;
}

.row:after {
content: "";
display: table;
clear: both;
}

.column {
float: left;
width: 20%;
}

.col11 {
float: left;
width: 10%;
}



/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 0px;
left: 80px;
top: 0;
width: 70%;
height: 100%;
overflow: auto;
background-color: black;
border-radius: 20px;
box-shadow: 5px 20px 20px #2F4999;
}

/* Modal Content */
.modal-content {
position: relative;
align center;
background-color: black;
padding: 0;
width: 100%;
max-width: 1200px;

}

/* The Close Button */
.close {
color: #FFFF00;
position: 5;
top: 140px;
right: 55px;
font-size: 35px;
font-weight: bold;
text-shadow: 2px 2px 4px #2F4999;
}

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

.mySlides {
display: none;
}

.cursor {
cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: #2F4999;
text-shadow: 2px 2px 4px #FFFF00;
font-weight: bold;
font-size: 40px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
font-family:  Verdana;
color: #2F4999;
text-shadow: 1px 1px 2px #FFFF00;
font-weight: bold;
font-size: 20px;
padding: 8px 12px;
position: absolute;
top: 0;
}

img {
margin-bottom: -4px;
}

.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
top: 0;
font-family:  Verdana;
color: #2F4999;
font-weight: bold;
}

.demo {
opacity: 0.6;
}

.acti22,
.demo:hover {
opacity: 1;
}

img.hover-shadow {
transition: 0.3s;
}

.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

h4 {
   position: absolute;
	font-family:  Verdana;
	color: #FFFF00;
	text-shadow: 1px 1px 2px #2F4999;
	font-weight: bold;
	font-size: 30px;
   padding:10px;       
   top: 10px;
   left: 20;
   width: 100%;
}