@import url('https://fonts.googleapis.com/css2?family=IM+Fell+French+Canon&family=IM+Fell+Great+Primer:ital@1&display=block');

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}



:root { 
	--main-magenta: #5a1a19;
	--main-red-light: #802523;
	--main-red-bright: #f24643;
	--main-black: #1A1A1A;
	--main-white: #fdfdfd;
}

::selection {  background: var(--main-red-bright);}

* {	margin: 0;	padding: 0;}

html {height: 100%; font-display: block; }

header, nav, section, article, aside, footer {	display: block; }

body {
	color: var(--main-black);
	background-color: white;
	font-family: 'IM Fell French Canon', Georgia, cursive;
	font-size: 14pt;
	overflow: hidden;
	width: 100%; 
	min-width: 320px;
	height: 100%;
	margin: 0 auto;
	scrollbar-3dlight-color:var(--main-black);	
	scrollbar-arrow-color: var(--main-black);	
	scrollbar-face-color: var(--main-white);	
	scrollbar-darkshadow-color: var(--main-black);	
	scrollbar-highlight-color: var(--main-black);	
	scrollbar-shadow-color: var(--main-black);	
	scrollbar-track-color: var(--main-black);
	font-synthesis: style small-caps;
}

h1, h2, h3, h4, h5 {
	font-family: 'IM Fell Great Primer', Brush Script MT, cursive;
	text-shadow: 1px 1px #e2dcd3;
}

h1 {
	font-size: 4em;
	color: var(--main-magenta); 
}

h2 { 
	font-size: 2.2em;
	color: var(--main-red-light);
	margin: 20px 1em 1em 1em;
}

h4 { 
	font-size: 1.5em;
	padding: 2em 0 1em 0;
}

a {	
	outline: none;
	-webkit-transition: color 1s;     
	color: var(--main-black);
	text-decoration: none; 
} 

a:hover, a:active, a.active {
   text-decoration: underline;
   color: var(--main-red-bright);   
}

b, bold { font-weight: bolder; font-synthesis: weight;}

.thin {	font-weight: 400;}
strong { font-weight: 700; }
img { border: none;}
input {	vertical-align: middle;}

u { 
	text-decoration: none;
	border-bottom: 1px dotted rgba(51, 51, 51, 0.33);
	opacity: 1;
}

p {	
	margin: 0 0 .7em 0;
	padding: 0 2em;
	line-height: 1.5em;
	text-align: left;
	font-family: "Jost", sans-serif;
}

hr {    
	border: none;
    margin: 36px 0;
}

.icons {
	position:absolute; 
	height: 75px;
	transition: all .6s ease-in-out;
}

.icons:hover {
	opacity:0;

}
	
/*******************/

/* MAIN LAYOUT  */

#main {	
	width: auto;
	min-width: 400px;
	height: 100%;
	min-height: 600px;
	margin: 0 auto; 
	background-color: transparent; 
	overflow-x: hidden;
	overflow-y: auto;
	padding: 20px;
	animation: fadeIn 2s;
	display:block!important;
}

.flex-container {

	display: flex;
	
	justify-content: center; 
	align-items: center; 
	flex-direction: column; 
	flex-wrap: wrap; 

	background-color: #bbdefb;
	height: 100%;
	padding: 15px;
	gap: 5px;

}
	  		
	#main .box { 
		order:1;
		flex-grow:1;
		align-content: center;
		position:relative;
		z-index: 20;
	}
			
	.flex-container:first-child,  .flex-container:last-child {
		width: 100%;
		flex-grow:2;
	}
	
	.box {
		min-height: 66vh;
		width: 100%;
		padding-top: 1em;
		margin-bottom: 30px;
		display: inline-block;
		text-align: center;
	}

		.box div {
			width: 45%;
		}

		.box div img{
			object-fit: cover;
			width: 50%;
			border-radius: 50%;
			transition: all .6s ease-in-out;
			filter: blur(3px) grayscale(90%);
		}

		.box:hover div img{
			filter: none;
		}

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

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

		.left p{
			padding: 0 2em 0 50%;

		}
			
		.right p{
			padding: 0 50% 0 2em;
		}


	.box:first-of-type, .box:last-of-type{
		min-height: 95vh!important;
		width: 100%;
		min-width: 600px; 
		margin-bottom: 4em;
		padding: 0;
		padding-top: 5%;
		float:none;
		text-align: center;
	}
	
	.mask {
	  display: inline-block;
	  width: 45%!important;
	  border-radius: 50%;
	  overflow: hidden;
	}

	/*** ELEMENTS ***/

	#home {
		background-image: url('imgs/bg.webp');
		background-size: cover;
		background-position: center;
	} 

	.header, #menu a {
		color: var(--main-white);
		text-shadow: 1px 1px var(--main-black);
	}

	#lang_menu {
		width: 100%;
		margin: 0 auto;
		text-align: center;
		display: flex;
		justify-content: center;
		gap: 10px;
	}

	.lang_link {
		display: flex;
		align-items: center;
		justify-content: center;
		text-decoration: none;
		text-transform: uppercase;
		padding: 8px 0;
		width: 75px; 
		color: #fff;
		background: rgba(84,199,251,0.2);
		position: relative;
		overflow: hidden;
		transition: all 0.3s ease;
		border-radius: 4px;
		font-size: 14px; 
	}

	.lang_link:before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		transition: all 0.3s ease;
		z-index: 1;
	}

	.lang_link[href$="#"] {
		background: rgba(84,199,251,1);
	}

	.lang_link[href*=".net/"]:before {
		background: linear-gradient(90deg, #009246 33%, #fff 33%, #fff 66%, #ce2b37 66%);
	}

	.lang_link[href$="/en"]:before {
		background: linear-gradient(90deg, #012169 45%, #012169 50%, #c60b1e 50%, #c60b1e 50%);
	}
		
	.lang_link[href*="/es"]:before {
		background: linear-gradient(90deg, #c60b1e 33%, #ffc400 33%, #ffc400 66%, #c60b1e 66%);
	}

	.lang_link[href*="/de"]:before {
		background: linear-gradient(90deg, #000 33%, #dd0000 33%, #dd0000 66%, #ffce00 66%);
	}

	.lang_link[href*="/fr"]:before {
		background: linear-gradient(90deg,  #012169 33%, #fff 33%, #fff 66%, #ce2b37 66%);
	}

	.lang_link:hover {
		color: black;
		background: white;
	}

	.lang_link:hover:before {
		left: 0;
		opacity: 0.2;
	}

	.lang_link {
		position: relative;
		z-index: 2;
	}

	#title_name {
		margin-top: 4.5%;
		text-shadow: 2px 3px var(--main-red-light);
	}

	#icon-circus-img {
		width: 9em;
		height: auto;
	}

	#icon-circus-img:hover{
		opacity: 0.7;
	}

	.menu {
		margin: 40px auto;
		letter-spacing: .2em;
		font-family: "Jost", sans-serif;
	}
	
	.menu a {
	  display: block;
	  font-weight: normal;
	  margin: 5px;
	}

/***
#laboratori {
	background: var(--main-red-light);
	color: var(--main-white);
}
#laboratori a {color: var(--main-white); text-decoration: underline;}
#didattica a { text-decoration: underline;	}

#performance {
	background: var(--main-black);
	color: wheat;
}

#performance a {color: wheat; }

**/



#laboratori-header, #performance-header, #didattica-header {
	/* text-shadow: 1px 1px var(--main-red-bright)!important; */
	margin-top: 40px;
}

#referenze-header {
	color: steelblue;
}

#laboratori-header {
	color: brown;
}

#performance-header {
	color: black;
}

#didattica-header {
	color: royalblue;
}
	
	#lang {
		opacity:0.6;
		font-size: .75em;
		color: #802523;
	}
	
	#copyright {
		width: 100%;
		margin: .5em 1em;
		font-size: .6em;
		opacity: .8;
	}


/*** MEDIA QUERIES ***/

@media screen and (max-width: 1280px) {
    .box div img{
		width: 75%;
	}
}


@media screen and (max-width: 1090px) {
	
	
	body {
		font-size: 2.8em;
		text-align: center;
	}
	
	p {	
		text-align: center;
	}
	
	h1 {
		font-size: 2.2em;
		margin-bottom: .5em;
	}
	
	h2 {
		margin: 20px 0em 1em 0em;
	}
	
	#main .box {
		margin-bottom: 10vh;
	}

	#main, .box:first-of-type {
		min-width: 320px;
	}
	
	.box, #home {
		padding: 0;
	}
	
	#menu {
		font-size: .9em;
		margin-top: 0em;
		margin-bottom: 1.5em;
	}
	
	#lang_menu{
		position: absolute;
		bottom: -1.5em;	
	}
	
	.lang_link{
		width: 20%;
		font-size: .5em;
		background: rgba(84,199,251,0.5);
	}
	
	#title_name {
		margin-top: 13vh;
	}
	
	#icon-circus-img {
		width: 6em;
	}
	
	/*
	#contact_link {
		color: var(--main-magenta) !important;
		text-shadow: 1px 1px var(--main-white) !important;
	}
	*/
	
	.box, .left, .right, #home {
		text-align: center;
	}
	
	.left p, .right p {
		padding: 0 2em;
	}
	
	.box div img{
		filter: none;
		width: 70%;
		margin: 1em 0;
	}
	
	.left, .right, .box div, #home{
		float: none;
		width: 100%;
	}
	
	.box:first-of-type, .box:last-of-type{
		min-width: 100%; 
	}
	
	#lang {
		font-size: .5em;
	}
	
	#copyright {
		font-size: .2em;
	}
}

@media (hover: none) {
	.box div img{
		filter: none;
	}
	
	#main {
		opacity:1!important;
	}
}