body {
		font-family : 'Catamaran', sans-serif;
		color : black;
		font-size : 16px;
	}
	
	#titolo {
		text-align : left;
		width : 100%;
		overflow : auto;
	}

	.logo {
		background-image : linear-gradient(white, #a7ae9e);
	}	
	
	.triangle {
		width : 0;
		height : 0;
		border-left : 35px solid transparent;
		border-right : 35px solid transparent;
		border-bottom : 35px solid #ffffff;
		padding-top : 30px;
		margin-left : 30px;
	}

	.squareserena {
		width : 100%;
		height : 54px;
	}

	.square {
		height : 70px;
		width : 70px;
		background-color : #ffffff;
		margin-left : 30px;
		float : left;
	}
	
	.logo #serena {
		color : white;
		font-size : 20px;
		float : left;
		margin-left : 20px;
		padding-top : 5px;
		text-align : center;
		line-height : 1.2;
	}	

	#menu {
		width : 100%;
		font-size : 18px;
		float : left;
	}
	
	#menucentrato {
		text-align : center;
		width : 816px;
		margin-left : auto;
		margin-right : auto;
	}

	ul#menu1 {
		list-style-type : none;
		padding : 0;
		width : auto;
	}

	ul#menu1 li {
		float : left;
		padding : 10px 35px 10px 35px;
		/*border:1px solid;*/
	}

	ul#menu1 li a:link, ul#menu1 li a:visited {
		display : block;
		color : black;
		text-align : center;
		text-decoration : none;
	}

	ul#menu1 li a:hover, ul#menu1 li a:active {
		color : #a7ae9e;
		text-decoration : none;
	}

	ul#menu1 #paginavisitata {
		font-size : 30px;
		font-family : 'The Girl Next Door', cursive;
		padding-top : 0;
	}

	ul#menu1 #paginavisitata a:link, ul#menu1 #paginavisitata a:visited {
		color : #a7ae9e;
	}

	#contenuto {
		text-align : left;
		width : 100%;
		overflow : auto;
	}
	
	#fraseindex {
		font-size : 28px;
		max-width : 890px;
		padding : 50px;
		text-align : left;
		margin-top : 30px;
		margin-left : auto;
		margin-right : auto;
		line-height : 1.5;
		font-family : 'The Girl Next Door', cursive;
	}
	
	.titoloprogetto {
		width : 25%;
		margin-top : 16px;
		font-size : 18px;
		float : left;
		padding : 30px;
	}
	
	#slideshow {
		margin-top : 16px;
		width : 60%;
		float : left;
	}
	
	#slideshow #puntini {
		margin-top : -20px;
	}
	

    /* ---------------------------- Stile slideshow ------------------------------------------------------------------------*/

	* {
		box-sizing : border-box;
	}
	
	#slideshow .mySlides {
		display : none;
		overflow : auto;
	}
	
	#slideshow img {
		vertical-align : middle;
	}
	
	#slideshow .immagini {
		max-width : 750px;
		max-height : 500px;
	}
	
	/* Slideshow container */
	#slideshow .slideshow-container {
	max-width : 750px;
	position : relative;
	margin : auto;
	text-align : center;
	}
	
	/* Next & previous buttons */
	#slideshow .prev, .next {
	cursor : pointer;
	position : absolute;
	top : 50%;
	width : auto;
	padding : 16px;
	margin-top : -22px;
	color : #999999;
	font-weight : bold;
	font-size : 18px;
	transition : 0.6s ease;
	border-radius : 0 3px 3px 0;
	user-select : none;
	}
	
	/* Position the "next button" to the right */
	#slideshow .next {
	right : -45px;
	border-radius : 3px 0 0 3px;
	}
	
	/* Position the "prev button" to the left */
	#slideshow .prev {
	left : -45px;
	border-radius : 3px 0 0 3px;
	}

	/* Caption text */
	#slideshow .text {
		color : #f2f2f2;
		font-size : 15px;
		padding : 8px 12px;
		position : absolute;
		bottom : 8px;
		width : 100%;
		text-align : center;
	}

	/* Number text (1/3 etc) */
	#slideshow .numbertext {
		display : none;
		color : #f2f2f2;
		font-size : 12px;
		padding : 8px 12px;
		position : absolute;
		top : 0;
	}

	/* The dots/bullets/indicators */
	#slideshow .dot {
		cursor : pointer;
		height : 10px;
		width : 10px;
		margin : 0 2px;
		background-color : #999999;
		border-radius : 50%;
		display : inline-block;
		transition : background-color 0.6s ease;
	}
	
	#slideshow .active, .dot:hover {
		background-color : black;
	}

	/* Fading animation */
	#slideshow .fade {
		animation-name : fade;
		animation-duration : 1.5s;
	}	
	
    @keyframes fade {from {opacity: .4} to {opacity: 1}}

    /* On smaller screens, decrease text size */
    @media only screen and (max-width: 300px) {
		.prev, .next,.text {font-size: 11px}
    }
	

	/* ------------------------------------ Fine stile slideshow -------------------------------------------------------*/
	
	
	.contatti {
		position : fixed;
		padding-top : 10px;
		bottom : 10px;
		text-align : center;
		width : 100%;
		overflow : auto;
		color : #999999;
		border-top : 2px solid;
		border-color : #a7ae9e;
	}
	
	#contattiprogetti {
		position : static;
	}
	
	
	#contattiPIVA {
		float : left;
		width : 28.5%;
	}
	#contatticell {
		float : left;
		width : 14%;
	}
	#contattimail {
		float : left;
		width : 23.5%;
	}
	#contatticre {
		float : left;
		width : 34%;
	}


	#fotoserena {
		margin-top : 30px;
		padding-top : 50px;
		padding-right : 30px;
		text-align : right;
		width : 30%;
		float : left;
	}
	
	#fotoserena img {
		max-width : 200px;
	}

	#chisono {
		width : 70%;
		max-width : 900px;
		padding : 50px;
		padding-right : 80px;
		font-size : 20px;
		text-align : justify;
		margin-top : 30px;
		margin-left : auto;
		margin-right : auto;
		line-height : 1.5;
		float : left;
	}
	
	#attivita {
		max-width : 450px;
		padding : 30px;
		font-size : 20px;
		text-align : justify;
		margin-top : 30px;
		margin-left : auto;
		margin-right : auto;
		line-height : 2;
		text-align : left;
	}
	
	#mappacontatti {
		max-width : 1000px;
		margin-left : auto;
		margin-right : auto;
	}

	#contatti2 {
		width : 38.5%;
		padding : 30px;
		padding-left : 60px;
		font-size : 20px;
		text-align : left;
		margin-top : 30px;
		line-height : 3;
		float : left;
		text-decoration : none !important ;
	}
	
	#mappa {
		width : 51.5%;
		margin-left : 10%;
		margin-top : 30px;
		margin-bottom : 30px;
		float : left;
	}
	#mappa .googlemap {
		width : 100%;
		height : 500px;
		border-style : none;
	}

	#concorsi img {
		vertical-align : middle;
	}

	#concorsi {
		margin-top : 16px;
		width : 100%;
		float : left;
		text-align : center;
		overflow : auto;
	}

	.fotoconcorsi {
		width : 50%;
		position : relative;
		float : left;
		text-align : center;
		overflow : auto;
		margin-bottom : 30px;
	}

	#progetti {
		margin-top : 16px;
		width : 100%;
		float : left;
		text-align : center;
		overflow : auto;
	}
	
	.fotoprogetti {
		width : 33.3%;
		position : relative;
		float : left;
		text-align : center;
		overflow : auto;
		margin-bottom : 30px;
	}
	
	.fotoconcorsi .immagini, .fotoprogetti .immagini {
		width : 90%;
		max-width : 550px;
		margin-left : auto;
		margin-right : auto;
		opacity : 1;
		display : block;
		height : auto;
		transition : 0.5s ease;
		backface-visibility : hidden;
	}
 
	.fotoconcorsi .centro, .fotoprogetti .centro {
		transition : 0.5s ease;
		opacity : 0;
		position : absolute;
		top : 50%;
		left : 50%;
		transform : translate(-50%,-50%);
		text-align : center;
	}
	
	#concorsi img:hover {
		opacity : 0.3;
	}
	
	#progetti img:hover {
		opacity : 0.3;
	}
	
	.fotoconcorsi:hover .immagini, .fotoprogetti:hover .immagini {
		opacity : 0.3;
	}
	
	.fotoconcorsi:hover .centro, .fotoprogetti:hover .centro {
		opacity : 1;
	}
	
	.centro .text {
		background-color : #a7ae9e;
		color : white;
		font-size : 16px;
		padding : 16px 32px;
	}

	@media only screen and (min-width: 1400px) {
	/* For bigger screens: */
	
		#fotoserena img {
			max-width : 250px;
		}
		
		#slideshow .slideshow-container {
			max-width : 750px;
		}
		
		#slideshow .immagini {
			max-width : 750px;
			max-height : 500px;
		}
		
		.fotoconcorsi .immagini {
			max-width : 800px;
		}
		
		#mappa {
			width : 61.5%;
			margin-left : 0%;
		}
		
		#mappa .googlemap {
			height : 550px;
		}
		
		#fraseindex {
			font-size : 30px;
			max-width : 946px;
		}
		
		.titoloprogetto {
			padding-left : 100px;
			width : 22%;
		}
		
		#slideshow {
			width : 56%;
		}
		
		.logo #serena {
			font-size : 22px;
			padding-top : 0;
		}
	}

	@media only screen and (max-height: 860px) {
	/* per schermi stretti*/
	
		#slideshow .slideshow-container {
			max-width : 550px;
		}
		
		#slideshow .immagini {
			max-width : 550px;
			max-height : 367px;
		}
		
		.fotoconcorsi .immagini {
			max-width : 580px;
		}
		
		#mappa .googlemap {
			height : 350px;
		}
	}

	@media only screen and (max-height: 700px) {
	/* per schermi stretti*/	
		
		#contatticoncorsi {
			position : static;
		}
		#contatticontatti {
			position : static;
		}
		#contattislideshow {
			position : static;
			margin-top : 30px;
		}
		#contattiattivita {
			position : static;
		}
	}

	@media only screen and (max-height: 600px) {
	/* per schermi stretti*/
	
		#contattiindex {
			position : static;
		}
		#contattichisono {
			position : static;
		}
	}

	@media only screen and (max-width: 1030px) {
	
		#contattiPIVA {
			width : 50%;
		}
		#contatticell {
			width : 50%;
		}
		#contattimail {
			width : 50%;
		}
		#contatticre {
			width : 50%;
		}

		.fotoconcorsi .immagini, .fotoprogetti .immagini {
		opacity : 1;
		}
	
		.fotoconcorsi .centro, .fotoprogetti .centro {
		opacity : 1;
		}

	}

	@media only screen and (max-width: 1000px) {
	
		#menucentrato {
			width : 684px;
		}
		
		ul#menu1 li {
			padding : 10px 24px 10px 24px;
		}
		
		#fotoserena {
			margin-top : 0;
			width : 40%;
			padding-top : 30px;
		}
		
		#chisono {
			margin-top : 0;
			width : 60%;
			padding : 30px;
			padding-right : 60px;
		}
		
		#attivita {
			margin-top : 0;
		}
		
		.fotoprogetti {
			width : 50%;
		}
		
		.titoloprogetto {
			width : 30%;
			padding-left : 10px;
		}
		
		#contatti2 {
			width : 38%;
			padding-left : 20px;
		}
		
		#mappa {
			width : 54%;
			margin-left : 8%;
		}
		
		#slideshow .slideshow-container {
			max-width : 470px;
		}
		
		#slideshow .immagini {
			max-width : 470px;
			max-height : 314px;
		}
	}

	@media only screen and (max-width: 800px) {
	/* For tablets: */
	
		body {
			font-size : 15px;
		}
		
		#contattiPIVA {
			width : 100%;
		}
		
		#contatticell {
			width : 100%;
		}
		
		#contattimail {
			width : 100%;
		}
		
		#contatticre {
			width : 100%;
		}
		
		#menu {
			font-size : 14px;
		}
		
		#menucentrato {
			width : 388px;
			margin-top : -25px;
		}
		
		ul#menu1 {
			height : 30px;
		}
		
		ul#menu1 li {
			padding : 8px 7px 8px 7px; /*border:1px solid;*/
		}
		
		ul#menu1 #paginavisitata {
			font-size : 22px;
			padding-top : 0;
			padding-bottom : 0;
		}
		
		#fotoserena {
			margin-top : 0;
			width : 28%;
			padding-top : 15px;
			padding-right : 15px;
		}
		
		#fotoserena img {
			max-width : 140px;
		}
		
		#chisono {
			margin-top : 0;
			width : 72%;
			padding : 15px;
			padding-top : 10px;
			padding-right : 20px;
		}
		
		#fraseindex {
			padding : 30px;
			margin-top : 0;
		}
		
		#attivita {
			padding-top : 10px;
			line-height : 1.8;
		}
		
		.fotoprogetti {
			width : 100%;
		}
		
		.fotoconcorsi {
			width : 100%;
		}
		
		.titoloprogetto {
			width : 100%;
			padding : 0 30px 0 30px;
			font-size : 14px;
			margin-top : 0;
		}
		
		#slideshow {
			width : 100%;
		}
		
		/* Position the "next button" to the right */
		#slideshow .next {
			right : -30px;
		}
		
		/* Position the "prev button" to the left */
		#slideshow .prev {
			left : -30px;
		}
		
		#slideshow .slideshow-container {
			max-width : 450px;
		}
		
		#slideshow .immagini {
			max-width : 450px;
			max-height : 300px;
		}
		
		#contatticoncorsi {
			position : static;
			overflow : auto;
		}
		
		#contatti2 {
			width : 100%;
			padding-left : 50px;
			padding-top : 0;
			line-height : 2;
		}
		
		#mappa {
			width : 88%;
			margin-left : 6%;
			margin-right : 6%;
			margin-top : 20px;
			margin-bottom : 10px;
		}
		
		#contatticontatti {
			position : static;
			overflow : auto;
		}
		
		#contattislideshow {
			position : static;
			overflow : auto;
			margin-top : 30px;
		}

	}

	@media only screen and (max-width: 500px) {
	/* For mobile phones: */
	
		#menu {
			font-size : 10px;
		}
		
		#menucentrato {
			width : 258px;
		}
		
		ul#menu1 {
			height : 28px;
		}
		
		ul#menu1 li {
			padding : 8px 4px 8px 4px; /*border:1px solid;*/
		}
		
		ul#menu1 #paginavisitata {
			font-size : 13px;
			padding-top : 5px;
			padding-bottom : 0;
		}
		
		#fraseindex {
			font-size : 26px;
			padding-top : 0;
		}
		
		#fotoserena {
			width : 100%;
			text-align : center;
			padding : 0;
		}
		
		#chisono {
			width : 100%;
			font-size : 16px;
			text-align:left;
		}
		
		#attivita {
			font-size : 16px;
		}
		
		#mappa {
			width : 90%;
			margin-left : 5%;
			margin-right : 5%;
			margin-top : 10px;
			margin-bottom : 5px;
		}
		
		#mappa .googlemap {
			height : 340px;
		}
		
		#contatti2 {
			font-size : 18px;
			padding-left : 30px;
		}
		
		.contatti {
			font-size : 13px;
		}
		
		#contattichisono {
			position : static;
		}
		
		/* Position the "next button" to the right */
		#slideshow .next {
			right : 0;
		}
		
		/* Position the "prev button" to the left */
		#slideshow .prev {
			left : 0;
		}
		
		#slideshow .dot {
			height : 8px;
			width : 8px;
			margin : 0 0;
		}
		
		#slideshow .slideshow-container {
			max-width : 380px;
		}
		
		#slideshow .immagini {
			max-width : 380px;
			max-height : 254px;
		}
		
		.triangle {
			width : 0;
			height : 0;
			border-left : 20px solid transparent;
			border-right : 20px solid transparent;
			border-bottom : 20px solid #ffffff;
			padding-top : 20px;
			margin-left : 15px;
		}
		
		.squareserena {
			width : 100%;
			height : 30px;
			margin-bottom : 20px;
		}
		
		.square {
			height : 40px;
			width : 40px;
			margin-left : 15px;
		}
		.logo #serena {
			font-size : 12px;
			float : left;
			margin-left : 10px;
			padding-top : 0;
		}
		
	}

	@media only screen and (max-width: 400px) {
		
		#slideshow .slideshow-container {
			max-width : 360px;
		}
		
		#slideshow .immagini {
			max-width : 360px;
			max-height : 240px;
		}
		
	}

	@media only screen and (max-width: 380px) {
		
		#slideshow .slideshow-container {
			max-width : 300px;
		}
		
		#slideshow .immagini {
			max-width : 300px;
			max-height : 200px;
		}
		
	}