@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,600');
@import url('https://fonts.googleapis.com/css?family=Libre+Baskerville');
.clear { clear:both; }

*{ box-sizing:border-box; }


body{	
	margin:0;
	font-family:Montserrat;
	font-weight:300;
}

img{
	max-width:100%;
	height:auto;
}

.testata{ 
	width:100%;
	background-image:url(../images/cerchirossi.svg);
	background-size:cover;
	height:100vh;
	background-repeat:no-repeat;
}

.hamb{
	width:100%;
	text-align:center;
	position:fixed;
	top:0px;
	left:50%;
	transform:translate(-50%);
	z-index:1;
	padding-top:50px;
	background-color:white;
}

.hamb img{
	width:7%;
}

.hamb1{
	display:none;	
}

.hamb1 img{
	display:none;
}

#beta {
	display:none;
}

.menu{
	width:100%;
	padding:0;		
	text-align:center;
	position:fixed;
	top:0;
	left:-2000px;
	right:0;
	z-index:1;
	background-color:white;
	text-align:center;
	/*position:sticky;
	top:0; carino se voglio che il menu scorra 
	fino in cima nel caso fosse centrale e poi si blocchi*/
}

.menu a {
	padding:1px 7px;
	text-decoration:none;
	color:black;
	display:inline-block;
	font-size:70%;
}

.menu a:hover {
	color:red;
}

.menu li {
	display:inline-block;
}

.menu ul {
	margin-left:-40px;
}

.yayoi{
	width:50%;
	position:absolute;
	top:0;
	left:50%;
	transform:translate(-50%);
	/* border:1px solid black;	 */
	background-color:rgba(255,255,255,0.7);
	text-align:center;
	padding-bottom:400px;
	font-size:120%;	
	font-family:Libre Baskerville;
}

.yayoi2{
	width:100%;
	position:absolute;
	top:350px;
	left:50%;
	transform:translate(-50%);
	font-size:90%;
}

.yayoi img{
	position:absolute;
	top:400px;
	left:50%;
	transform:translate(-50%);
	width:7%;
}

.yayoi p{
	position:absolute;
	top:80px;
	left:50%;
	transform:translate(-50%);
	font-size:200%;
}


.bianco{
	width:100%;
	height:80px;
}

.about{
	background: rgb(200,31,26);
	background: -moz-linear-gradient(top, rgba(200,31,26,1) 0%, rgba(255,255,255,1) 100%);
	background: -webkit-linear-gradient(top, rgba(200,31,26,1) 0%,rgba(255,255,255,1) 100%);
	background: linear-gradient(to bottom, rgba(200,31,26,1) 0%,rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c81f1a', endColorstr='#ffffff',GradientType=0 );
	/* border:1px solid black; */
}

.about img{
	width:100%;	
	position:relative;
	top:0; 
	left:50%; 
	transform:translate(-50%);
}

.about p{
	padding: 10px 30px;
	font-size:90%;
	text-align:justify;
}	

.corsivo{
	text-align:center;
	padding:30px;
	color:white;
	font-size:70%;
	font-style:italic;
	margin-top:50px;
}

.barra{
	width:100%;
	height:51px;
	/* background-color:red; */
	background-image:url(../images/barra.svg);
	background-repeat:repeat-x;
	margin-top:90px;
}

.titoloopere{ 
	width:100%;
	text-align:left;
	padding-left:30px;
	font-size:140%;
	font-weight:400;
	color:red;
	font-family:Libre Baskerville;
} 

.testoopere p {
	padding: 10px 30px;
	font-size:90%;
	text-align:justify;
}

.galleria{
	width:100%;
	/* border:1px solid black;	 */
	display:inline-block;
	padding:30px;
}

.galleria img{
	width:50%;
	border-radius:50%;
	float:left;
	padding:5px;
}

.anteprimacollaborazioni{
	background-image:url(../images/sfondocollaborazioni.svg);
	background-attachment:no-repeat;
	background-size:cover;
	height:100vh;
	width:100%;
	margin-bottom:-150px;	
	padding:30px;
	text-align:justify;
	font-size:90%;
}


.marc p,
.lewis p,
.peter p,
.jud p,
.ruy p{
	padding:0 30px;
	text-align:justify;
	padding-top:20px;
	font-size:90%;
}

/* inizio java */
#galleriacollaborazioni {  
	display:none;
	width:100%;	
}

#galleriacollaborazioni p{
	width:100%;
	margin-top:0;
}

#galleriacollaborazioni img{
	width:100%;
}

.periodo{
	width:100%;
	min-height:300px;
}

.bottonicollaborazioni{
	/* border: 1px solid red; */
	margin:15px 0;
	text-align:center;
}

.btn {	
    font-family:Montserrat;    
	font-size:90%;
	font-weight:400;
    text-decoration:none;
    cursor:pointer;
    display:inline-block;
    line-height:normal;
    padding:10px 5px;
    margin:0;
    height:auto;
	border:0;
    vertical-align: middle;
    /* -webkit-appearance: none; */
    /* color: #555; */
    background-color: rgba(0, 0, 0, 0);
}

.btn:hover {
  text-decoration: none;
}

.btn:focus {
  outline: none;
  /* border-color: var(--darken-2); */
  box-shadow: 0 0 0 3px var(--darken-3);
  background-color:rgba(230,230,230,1);
}

/*::-moz-focus-inner {
  border: 0;
  padding: 0;
}
 fine java */

.frecciasu{
	 /* background-color:pink; */
	 /* border:1px solid black; */
	 width:100%;
	 text-align:center;
	 margin-top:100px;
}
 
.frecciasu img{
	width:5%;
}

.mostre{
	width:100%;
	text-align:center;
	/* border:1px solid black; */
	background-image:url(../images/cerchirossi.svg);
	background-size:cover;
	background-repeat:no-repeat;
}

.titoloeventi{
	width:100%;
	text-align:center;
	font-size:140%;
	font-weight:400;
	color:red;
	font-family:Libre Baskerville;
	margin-bottom:30px;
}

/* inizio ballon */
.balloneventi img {
	width:100%;
}
	
.balloneventi{	
	display:inline-block;
	width:140px;
	height:140px;
	border-radius:50%;
	box-shadow: 7px 7px 10px #500;
	position:relative;
	margin:10px 5px;
}
	
.testoeventi{
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	transition:0.5s;
	background-color:white;
	border-radius:50%;
	cursor:pointer;
}
	
.balloneventi p{
	font-size:70%;
	margin-top:20px;	
}
	
.balloneventi b{
	font-size:120%;
}
	
.balloneventi .testoeventi {opacity:0;}
.balloneventi:hover .testoeventi {opacity:1;}
	
/* fine ballon */

.eventipassati{
	width:100%;
	text-align:center;
	margin-top:100px;
}
	
.eventipassati img{
	width:30%;
}
	
.eventipassati a{
	text-decoration:none;
	color:red;
	font-family:Montserrat;
	font-size:90%;
}
	
.galleriaeventi{
	width:50px;
	height:50px;
	display:inline-block;
}

.galleriaeventi::before{
	display:none;
}
.galleriaeventi::after{
	display:none;
}

.ballon{
	width:100%;
	text-align:center;
	margin:30px 0;
}

	
/* inizio form */
.modulo {
    max-width: 600px;
    padding:20px;
    border:1px solid rgba(153,153,153,1);
    border-radius:15px;
    margin:auto;
    overflow:hidden;
	background-color:white;
    }

.modulo,
.modulo textarea,
.modulo input{
    font-family:Montserrat;
    font-size:90%;
    color:black;    
    }
    
.modulo input[type=text],
.modulo input[type=email],
.modulo input[type=number],
.modulo input[type=file],
.modulo input[type=tel],
.modulo input[type=password],
.modulo textarea{
    width:100%;
    display:block;
    outline:none;
    padding:10px;
    border:0;
    border-bottom:1px solid rgba(153,153,153,1);
    background-color:rgba(153,153,153,0.05);
    }    

.modulo input[type=text]:focus,
.modulo input[type=email]:focus,
.modulo input[type=number]:focus,
.modulo input[type=file]:focus,
.modulo input[type=tel]:focus,
.modulo input[type=password]:focus,
.modulo textarea:focus{
    background-color:rgba(153,153,153,0.1);
    }    

.modulo textarea{ min-height:50px ; resize:vertical;}

.modulo input[type=submit],
.modulo button{
    background-color:transparent;
    border:1px solid rgba(153,153,153,1);
    padding:12px 15px;
    float:right;
    color: rgba(153,153,153,1);
    transition:0.3s;
    }
.modulo input[type=submit]:hover,
.modulo button:hover{
    background-color: rgba(0,0,0,1); 
    color: white ;
    }

.modulo .box50{
    width:50%;
    padding:10px;
    float:left;
    }
.modulo .box100{
    width:100%;
    padding:10px;
    clear:both;
    }
/* fine form */

.newsletter{
	width:100%;
	padding:10px;
	background: rgb(229,229,229);
	background: -moz-linear-gradient(top, rgba(229,229,229,1) 0%, rgba(255,255,255,1) 100%);
	background: -webkit-linear-gradient(top, rgba(229,229,229,1) 0%,rgba(255,255,255,1) 100%);
	background: linear-gradient(to bottom, rgba(229,229,229,1) 0%,rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#ffffff',GradientType=0 );
	}

.aggiornato{
	width:100%;
	text-align:center;
	font-size:90%;
	padding:30px;
}
 
.info {	
	width:100%;	
	text-align:center;
	background-color:white;
	margin:10px 0;
	}

.info img{	
	width:8%;	
	}


@media ( min-width : 768px ){
	
	.menu a {
	padding:1px 15px;
	font-size:80%;
	}

	.hamb{
	display:none;	
	}

	.hamb img{
	display:none;		
	}
	
	.hamb1{
	width:30%;
	text-align:left;
	position:fixed;
	top:0;
	left:20px;
	z-index:2;
	padding:13px 0;	
	display:inline;	
	}

	.hamb1 img{
	display:inline;
	width:10%;
	}
	
	#epsilon {
	display:none;
	}
	
	.yayoi{
	width:30%;
	}

	.yayoi2{
	top:400px;
	font-size:100%;
	}

	.yayoi img{
	top:450px;
	}

	.yayoi p{
	font-size:250%;
	}

	.bianco{
	width:100%;
	height:80px;
	}
	
	.about img{
	width:60%;	
	}
	
	.about p{
	padding: 20px 70px;
	font-size:100%;
	line-height:130%;
	}	

	.corsivo{
	padding:70px;
	font-size:100%;
	line-height:130%;
	}

	.titoloopere{ 
	width:100%;
	text-align:left;
	padding-left:70px;
	font-size:150%;
	font-weight:400;
	color:red;
	font-family:Libre Baskerville;
	} 

	.testoopere p {
	padding: 10px 70px;
	font-size:100%;
	text-align:justify;
	line-height:130%;
	}
	
	.galleria{
	padding-left:70px;
	padding-right:70px;	
	}
	
	.galleria img{
	width:33%;
	padding:20px;
	}
	
	
	.anteprimacollaborazioni{
	padding:70px;
	font-size:100%;
	line-height:130%;
	}

	.marc p,
	.lewis p,
	.peter p,
	.jud p,
	.ruy p{
	padding:0 70px;
	font-size:100%;
	padding-top:40px;
	line-height:130%;
	}

	.btn {	
	font-size:100%;
    padding:15px 13px;
	}
 
	.frecciasu{
	 margin-top:0;
	}

	.frecciasu img{
	width:3%;
	}

	.titoloeventi{
	font-size:150%;
	}

/* inizio ballon */
	
	.balloneventi{	
	width:160px;
	height:160px;
	margin:10px 15px;
	}
	
	.balloneventi p{
	font-size:80%;	
	}
	
	.balloneventi b{
	font-size:120%;
	}
	
/* fine ballon */

	.eventipassati{
	margin-top:70px;
	}
	
	.eventipassati img{
	width:20%;
	}
	
	.eventipassati a{
	font-size:100%;
	}
	
	.galleriaeventi{
	width:100px;
	height:100px;
	padding-left:10px;
	}

	.ballon{
	width:100%;
	text-align:center;
	margin:30px 0;
	}

	.aggiornato{
	padding:30px 70px;
	}

	.info img{	
	width:4%;	
	}
	
}


@media ( min-width : 1200px ){
	
	.menu a {
	padding:1px 20px;
	font-size:100%;
	}
	
	.hamb1{
	padding:10px 0;	
	}

	.hamb1 img{
	width:7%;
	}

	.yayoi{
	width:30%;
	padding-bottom:650px;
	}

	.yayoi2{
	top:580px;
	font-size:150%;
	}

	.yayoi img{
	top:650px;
	}

	.yayoi p{
	top:80px;
	font-size:400%;
	}

	.about p {
	font-size:100%;
	line-height:140%;
	padding:50px 170px;
	}
	
	.corsivo{
	font-size:100%;
	padding:50px 170px;
	}
	
	.titoloopere{ 
	padding-left:170px;
	font-size:230%;
	} 

	.testoopere p {
	padding: 10px 170px;
	font-size:100%;
	line-height:140%;
	}

	.galleria{
	padding-left:170px;
	padding-right:170px;	
	}
	
	.galleria img{
	width:16.6%;
	}
	
	.anteprimacollaborazioni{
	padding:50px 170px;
	font-size:100%;
	line-height:140%;
	}

	.marc p,
	.lewis p,
	.peter p,
	.jud p,
	.ruy p{
	padding:0 70px;
	font-size:100%;
	padding-top:50px;
	line-height:140%;
	}
	
	#galleriacollaborazioni {  
	display:none;
	width:100%;	
	}

	#galleriacollaborazioni p{
	float:right;
	width:50%;
	margin-top:0;
	padding:50px 60px;
	}

	#galleriacollaborazioni img{
	float:left;	
	width:50%;
	}
	
	.btn {	
	font-size: 100%;
    padding:20px 30px;
	}
 
	.frecciasu{
	display:none;
	}

	.titoloeventi{
	font-size:230%;
	margin-top:100px;
	}
	
	/* inizio ballon */	
	.balloneventi{
	width:180px;
	height:180px;
	margin:10px 30px;
	}
	
	.balloneventi p{
	font-size:80%;
	margin-top:40px;
	}
	
	.balloneventi b{
	font-size:150%;
	}
	
/* fine ballon */

	.eventipassati{
		width:100%;
		margin-top:100px;
	}
	
	.eventipassati img{
		width:10%;
	}
	
	
	.musei{
	width:100%;

	}
	
	.info img{	
	width:2%;	
	}
		
	.galleriaeventi {	
	width:150px;
	height:150px;
	margin-top:70px;
	display:inline-block;
	}
		
	.galleriaeventi img{
	padding-left:20px;
	}
	
	.ballon{
	width:100%;
	text-align:center;
	}
	
	.galleriaeventi::before{
	display:inline-block;
	}
	
	.galleriaeventi::after{
	display:inline-block;
	}
	
	
	
	
	
/* galleria esterna	 */
	
	.galleriaesterna{
	width:180px;
	height:180px;
	border-radius:50%;
	cursor:pointer;
	display:inline-block;
	}
	
	.galleriaesterna img {
	width:100%;
	padding:10px;
	}

	.galleriaesterna:hover {transform: scale(1.1);}
	
	.menu1{
	width:100%;
	padding:0;		
	text-align:center;
	position:fixed;
	top:0;
	left:0;
	right:0;
	z-index:1;
	text-align:center;
	padding:35px 0;
}

.menu1 a {
	padding:1px 25px;
	text-decoration:none;
	color:white;
	display:inline-block;
	font-size:120%;
	font-weight:400;
}

.menu1 a:hover {
	color:red;
}

.menu1 li {
	display:inline-block;
}

.menu1 ul {
	margin-left:-40px;
}


}