@font-face {
    font-family: "Syncopate local";
    src: url('../fonts/Syncopate-Regular.woff') format('woff'),
         url('../fonts/Syncopate-Regular.ttf') format('truetype');/* Fallback */
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Syncopate local";
    src: url('../fonts/Syncopate-Bold.woff') format('woff'),
         url('../fonts/Syncopate-Bold.ttf') format('truetype');/* Fallback */
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: "Caveat local";
    src: url('../fonts/Caveat-VariableFont_wght.woff') format('woff'),
         url('../fonts/Caveat-VariableFont_wght.ttf') format('truetype');/* Fallback */
    font-weight: 400;
    font-style: normal;
}

html,body{
	height:100%;
	width:100%;
	font-size:18px;
	font-weight: 400;
	margin:0px;
	padding:0px;
	background-color: #fed;
	scroll-behavior:smooth;}
	
div{position:relative;
	display:block;
	width:100%}
h1,h2,h3,h4,p{
	font-size:inherit;
	text-decoration:none;
	font-weight:normal;
	margin:0;
	padding:0;}
hr{
	border: 1px solid #aaa;
	margin: 5px 0;
	opacity: 0.5;
}
a{
	text-decoration:none;
	color:inherit;
	vertical-align:inherit;}
a:hover{
	text-decoration:none;
	opacity:0.6;
	color:inherit;
	transition: 0.3s;}
.link{
	cursor:pointer;}
.link:hover{
	text-decoration:none;
	opacity:0.6;
	transition: 0.3s;}

.XS{
	font-size:0.7rem;
	line-height:1rem;}
.S{
	font-size:0.7rem;
	line-height:1rem;
	}
.M{
	font-size:1rem;}
.L{
	font-size:1.25rem;}
.XL{
	font-size:1.5rem;}
.XXL{
	font-size:2rem;}
	
.segoe{
	font-family: "Segoe UI", "Verdana", sans-serif;}
.syncopate{
	font-family: "Syncopate", "Syncopate local", sans-serif;}
.caveat{
	font-family: "Caveat", "Caveat local", sans-serif;}

.maiusc{
	font-variant:small-caps;
}
.grey{
	color:#333;}
.lightgrey{
	color:#777;}
.bluegrey{
	color:#789;}

.left{
	text-align: left;}
.right{
	text-align: right;}
.center{
	text-align: center;}

.bold{
	font-weight: bold;}

.rotate{
	transform: rotate(-5deg);
	text-align: left;
    position: relative;
    top: -10px;}

.hidden{
	position:fixed;
	/*display:none;*/
	visibility:hidden;
	opacity:0;
	width:0;
	height:0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
	transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;}
/* classe per i bottoni */
.invisible {
    display: none !important;
}
div#container{
	position:relative;
	display:block;
	width:100%;
	min-height:100%;
	height:auto;
	padding: 0 6%;
	box-sizing:border-box;
	margin-bottom:-80px;
	z-index:3;
	font-size:0;}
div#fillerBottom{
	position:relative;
	display:block;
	height:130px;}
div#footer{
	position:relative;
	display:block;
	line-height:80px;
	height:auto;
	text-align:center;
	clear:both;
	z-index:3;
	color:#ffffff;
	background-color:RGBA(50, 100, 150, 0.5);
	box-sizing:border-box;}
div#footer .powered{
	position:absolute;
	top:5px;
	right:10px;
	width:auto;
	opacity:0.8;}

.title{
	position:relative;
	display:inline-block;
	width:100%;
	font-family: "Syncopate", "Syncopate local", sans-serif;
	font-size:3.5rem;
	font-weight: 400;
	font-style: normal;
	font-variant:small-caps;
	color:#333;
	text-align:center;
	margin: 20px 0 85px 0;}

#andrea{
	position:relative;
	display:block;
	top:0px;
	width:auto;
	height:auto;}
.imgAndrea{
	height:120px;
	width:auto;
	border:none;}
#logo{
	position:absolute;
	z-index:2;
	top:35px;
	left:0;
	width:100%;
	height:auto;
	text-align:center;
	opacity:0.5;}
.imgLogo{
	height:85px;
	width:auto;
	border:none;}

.box{
	position:relative;
	display:inline-block;
	height: auto; 
	width:31%;
	margin: 10px 2% 10px 0;
	box-shadow:2px 2px 6px rgba(0,0,0,0.6);
	padding: 15px 25px;
	box-sizing:border-box;
	white-space: normal;
	word-wrap: break-word;
	overflow: hidden;
	vertical-align:top;
	background: linear-gradient(to bottom, RGBA(255, 255, 255, 1), RGBA(255, 255, 255, 0.7));
	text-align:center;
	border-radius: 0 30px;}
.box:hover{
	box-shadow:3px 3px 4px rgba(0,0,0,0.6);
	/*top:1px;
	left:1px;
	background-color:RGBA(255,255,255,0.2);*/
	transition: 0.3s;}

.ratio_16_9{
	position:relative;
	display:inline-block;
	width:100%;
	aspect-ratio: 16 / 9;}

.box_foreground{
	position:fixed;
	z-index:5;
	top:5%;
	left:25%;
	font-size:0;
	width:50%;
	height:80%;
	overflow-y:scroll;
	padding:3%;
	box-sizing:border-box;
	background: linear-gradient(to right, RGBA(255, 255, 255, 1), RGBA(240, 240, 240, 0.9));
	box-shadow:2px 2px 6px rgba(0,0,0,0.6);
	visibility: visible;
    opacity: 1;
	border-radius: 0 0 0 30px;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;}
.box_close{
	position:absolute;
	z-index:5;
	top:10px;
	right:15px;
	width:auto;
	height:auto;
	font-size:50px;
	}
.box_foreground_bg{
	position:fixed;
	z-index:4;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	cursor:pointer;
	background-color:#000;
    opacity: 0.4;}
	
.section_title{
	position:relative;
	display:inline-block;
	margin-left:10%;
	width:80%;
	text-align:center;}
	
div#sfondo{
	position:fixed;
	display:block;
	z-index:1;
	top:0px;
	left:0px;
	height:100%;
	width:100%;
	box-sizing:border-box;
	opacity:0.6;
	overflow:hidden;
	border-radius:50%;}
div#sfondo_sfondo{
	position:fixed;
	display:block;
	z-index:0;
	top:0px;
	left:0px;
	height:100%;
	width:100%;
	box-sizing:border-box;
	opacity:0.4;}
.imgSfondo{
	height:100%;
	width:100%;
	border:none;}

/* PULSANTI */
.player_btn{
	position:relative;
	display:inline-block;
	padding:5px;
	box-sizing:border-box;
	margin: 10px 0;
	width: 30%;
	text-align:center;
	border-radius: 50%;
	cursor:default;
	vertical-align:middle;
	background-color:RGBA(50,100,150,0.3);
	box-shadow:2px 2px 4px rgba(50,100,150,0.3);}
.player_btn:hover{
	cursor:pointer;
	box-shadow:2px 2px 3px rgba(50,100,150,0.4);}
.player_btn:active{
	box-shadow:1px 1px 2px rgba(50,100,150,0.7);}
.img_btn{
	height:20px;
	width:25px;/*heigth: track = track_name = img_btn = bar*/
	border:none;
	vertical-align:middle;}
.img_btn:hover{
	opacity:0.7}

.track{
	position:relative;
	height:10px;
	width:100%;
	font-size:0;
	text-align:left;
	vertical-align:middle;
	box-sizing:border-box;}
.bar{
	position:relative;
	display:inline-block;
	height:10px;
	width:0%;
	font-size:0;
	background-color:#789;
	opacity:0.7;}
.bar_bg{
	background-color:#ddd;}

/* ESPANDI SEZIONE */
.img_down_btn {
	height:20px;
	width:60px;
	border:none;
	vertical-align:middle;
	opacity: 0.6;
}

/* PREVIOUS da usare se i video dovessere aumentare*/
.img_prev_btn {
  transform: scaleX(-1);
}

/* MODULO CONTATTI */
input, textarea{
	width:100%;
	margin: 10px 0;
	padding: 5px;
	box-sizing:border-box;
	}

/* RESPONSIVENESS */
/* rem (root em) si riferisce alla dimensione del font dell'elemento radice (<html>)*/
/* Per schermi tra 1200px e 1600px */
@media (max-width: 1600px){
	html,body{
		font-size:17px;}
	div#container{
		padding: 0 5%;
		margin-bottom:-70px;}
	#andrea{
		left:5%;}
	div#fillerBottom{
		height:85px;}
	div#footer{
		line-height:70px;}
	.title{
		margin: 15px 0 75px 0;}
	.box{}
	.box_foreground{
		left:20%;
		width:60%;}
	div#sfondo{}
	}
/* Per schermi tra 990px e 1200px */
@media (max-width: 1200px) {
	html,body{
		font-size:16px;}
	div#container{
		padding: 0 3%;}
	div#fillerBottom{}
	.title{
		font-size:3rem;
		margin: 10px 0 60px 0;}
	.box{
		padding:10px 20px;
		margin: 5px 1% 5px 0;
		width:32%;}
	.box_16_9{
		padding:10px 20px;
		margin: 5px 1% 5px 0;
		width:32%;
		height: calc(32vw * 9 / 16);}
	.rotate{
		top: -6px;
		margin-bottom:4px;}
	.box_foreground{
		left:15%;
		width:70%;}
	#logo{
		top:25px;}
	.imgLogo{
		height:75px;}
	div#sfondo{}
	}

/* Per schermi tra 768px e 990px */
@media (max-width: 990px) {
	html,body{}
	div#container{
		padding: 0 0 0 2%;}
	div#fillerBottom{}
	div#footer{
		line-height:initial;
		min-height: 70px;
		padding: 20px 10px;
	}
	div#footer .powered{
		position:relative;
		top:5px;
		right:initial;
		margin-top:10px;}
	.box{
		width:48%;
		margin:25px 2% 0 0;}
	.box_16_9{
		min-height: 200px;}
	.box_foreground{
		left:10%;
		width:80%;}
	}

/* Per schermi sotto i 766pxo */
@media (max-width: 767px) {
	html,body{
		font-size:15px;
		line-height:1.4;}
	H2{
		text-align:center;}
	div#container{
		padding: 0 1%;}
	div#fillerBottom{
		height:100px;}
	.title{
		font-size:2rem;
		margin: 20px 0 50px 0;}
	#logo{
		top:0px;
		opacity:0.3;}
	.box{
		min-height:130px;
		height: auto; 
		width:100%;
		padding:5px 20px;
		margin: 10px 0;}
	.box_16_9{
		width:100%;
		height: calc(100vw * 9 / 16);
		padding:5px 20px;
		margin: 10px 0;}
	.box_foreground{
		left:5%;
		width:90%;}
	div#sfondo{
		opacity:0.3;}
	}
/* Per schermi sotto i 600pxo */
@media (max-width: 600px) {
	.XS{
		font-size:0.7rem;}
	.S{
		font-size:0.75rem;}
	.M{
		font-size:1rem;}
	.L{
		font-size:1.2rem;}
	.XL{
		font-size:1.3rem;}
	.XXL{
		font-size:1.5rem;}
	div#container{
		padding: 0 1%;}
	div#fillerBottom{
		height:100px;}
	.title{
		font-size:1.8rem;}
	.box_foreground{
		left:2%;
		width:96%;}
	}
/* Modalità verticale */
@media (orientation: portrait) {
	}