body {

    width: 97%;

    font-family:  Verdana;

    color: #000000;

    margin: auto; 

    background-image: url("../imagesCSS/back_lgt.jpg");

 background-color: #cccccc;

 }

h1 {

    background-color: #efefef;

    margin: 1% 0 1%;

    padding: 1%;}

h2 {

    text-align: center;

    padding: 10px;}

h3 {

    font-family:  Verdana;

	color: #FFFF00;

    text-align: center;

    padding: 10px;}

p {

    width: auto;

    margin: auto;

    }

    

.feature{

    width: 97%;

    padding: 10px;

    margin: auto;

    }

    

hr { 

    border: 0;

    width: 100%;

    color: #000000;

    background-color: #000000;

    height: 1px;

    }  



  

  /* reset stili */



ul  {

    margin: 0;

    padding: 0;

    list-style-type: none;

    }



/* lista orizzontale */



#menu li {

    display: inline-block;

    position: RELATIVE;

    }



/* menu */



#menu {

    width: 100%;

    background-color: ##2F4999;

    background: -moz-linear-gradient(#2F4999, #111); /* firefox*/

    background: linear-gradient(#2F4999, #111);

    border: 2px solid #222;

    border-radius: 5px;

    box-shadow: 5px 5px 20px #2F4999;

    text-align: center;

    }



/* links */



li a {

    display: block;

    padding: 10px 10px;

    width: 110px;

    color: #FFFFFF;

    text-transform: none;

    font: bold 0.95em Verdana,Helvetica,sans-serif;

    text-decoration: none;

    text-shadow: 0 1px #0000FF;

    border-right: 2px solid #0000FF;

    box-shadow: 2px 0 #2F4999;

    border: none;

    border-radius: 6px

    }



/* rimuoviamo il bordo e l'ombreggiatura dall'ultimo link del menu*/



#donate {

    border: none;

    box-shadow: none;  

    }



/* links hover */



a:hover {

    color: #FFFF00;

    }

/* sub menu */



#menu li .hidden {

    display: block;

    position: absolute;

    top: 100px;

    left: 0;

    background-color: black;

    opacity: 0;

    visibility: hidden;

    z-index: 1000;

    }



/* links sub menu */



#menu li .hidden li a {

    width: 100px;

    border-bottom: 1px solid #202020;

    border-right: none;

    box-shadow: none;

}

/* menu hover */



#menu li:hover .hidden {

    margin-top: -65px;

    opacity: 1;

    -webkit-transition: all 0.5s ease; /* safari and chrome */

    -moz-transition: all 0.5s ease; /* firefox */

    -o-transition: all 0.5s ease; /* opera */

    transition: all 0.5s ease;

    visibility: visible;

    }

@media only screen and (max-width: 768px) {

  

#menu {

    background: none;

    border: none;

    border-radius: 3;  

    box-shadow: 5px 5px 10px #777;

    text-align: center;

    display: none;  

}

  

/* rendiamo gli elementi dei menu elementi di blocco */  

  

ul li {

    display: block;

    }

  

/* impostiamo la larghezza massima per gli elementi dei menu e i links */  

  

ul li, ul li a {

    padding-right: 0;

    padding-left: 0;

    width: 100%;

    }

  

#menu li .hidden li, #menu li .hidden li a {

    width: 100%;

    }



/* rendiamo visibili gli elementi del sub menu solo al passaggio del mouse */  

  

#menu li .hidden li {

    display: none;

    }

 

#menu li:hover .hidden li {

    display: block;

    }  



/* aumentiamo la grandezza dei links */ 

  

li a {

    font: bold 0.9em Verdana, sans-serif;

    } 

  

/* resettiamo la posizione degli elementi del menu */  

  

#menu li {

    position: static;

    }  

  

/* resettiamo la posizione del sub menu e lo rendiamo visibile */  



#menu li .hidden {

    position: static;

    opacity: 1;

    visibility: visible;

    }

  

/* rimuoviamo bordo e ombreggiatura dai links del menu */

  

#menu li a {

    border: none;

    box-shadow: 10px 10px 40px #777;  

}  

  

/* nessuna animazione al passaggio del mouse */  

  

#menu li:hover .hidden {

    margin: 0;

    } 

  

/* rimuoviamo il bordo dai links del sub menu */  

  

#menu li .hidden li a {

    border: none;

    }

  

/*diamo un colore di sfondo agli elementi del menu e del sub menu */

  

#menu li {

    background-color: #0000FF;

    }

  

#menu li .hidden li {

    background-color:#0000FF;

    } 

    

    }



/* diamo uno stile al pulsante del menu e nascondiamolo */



.showMenu {

    padding: 10px 80;

    color: yellow;

    background: #0000FF;

    text-align: center;

    display: none;

    }

/* nascondiamo il checkbox */



input[type=checkbox]{

    display: none;

    }



/* mostriamo il menu quando il checkbox viene selezionato */



input[type=checkbox]:checked ~ #menu {

    display: block;

    }

/* mostriamo il pulsante del menu */

        

.showMenu {

    display: block;

    }



.column1of2 {

    float: left;

    width: 46%;

    margin: 1%;}

.column2of2 {

    float: left;

    width: 46%;

    margin: 1%;}

    

/* Slideshow container */

.slideshow-container {

  max-width: 1000px;

  position: relative;

  margin: auto;

}



/* Caption text */

.text {

  color: #f2f2f2;

  font-size: 15px;

  padding: 8px 12px;

  position: absolute;

  bottom: 8px;

  width: 100%;

  text-align: center;

}



/* Number text (1/3 etc) */

.numbertext {

  color: #f2f2f2;

  font-size: 12px;

  padding: 8px 12px;

  position: absolute;

  top: 0;

}



/* The dots/bullets/indicators */

.dot {

  height: 10px;

  width: 10px;

  margin: 0 2px;

  background-color: #bbb;

  border-radius: 50%;

  display: inline-block;

  transition: background-color 0.6s ease;

}



.active {

  background-color: #2F4999;

box-shadow: 2px 0 #FFFF00;

}



/* Fading animation */

.fade {

  -webkit-animation-name: fade;

  -webkit-animation-duration: 1.5s;

  animation-name: fade;

  animation-duration: 1.5s;

}



@-webkit-keyframes fade {

  from {opacity: .4} 

  to {opacity: 1}

}



@keyframes fade {

  from {opacity: .4} 

  to {opacity: 1}

}



/* On smaller screens, decrease text size */

@media only screen and (max-width: 300px) {

  .text {font-size: 11px}

}





.footer {

position: absolute;

bottom: 0;

left: 0;

width: 100%;

background-color: #2F4999;

}



/* 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%;

}