/* CSS Document */

	@charset "UTF-8";


/* Font Cronos Pro */

	@font-face 
	{
		font-family: CronosPro;
		font-weight:500;
		src: url('font/CronosPro-Regular.woff') format('woff');
	}

	@font-face 
	{
		font-family: CronosPro;
		font-weight:600;
		src: url('font/CronosPro-Semibold.woff') format('woff');
	}

	@font-face 
	{
		font-family: CronosPro;
		font-weight:700;
		src: url('font/CronosPro-Bold.woff') format('woff');
	}

	@font-face 
	{
		font-family	: CronosProItalic;
		src: url('font/CronosPro-Italic.woff') format('woff');
	}



/* Typography */

	h1 {
		font-size: 40px;
		font-weight: 600;
		color: #000000;
		line-height: 42px;
		margin-bottom: 16px;
	}

	h2 {
		font-size: 24px;
		font-weight: 400;
		color: #818285;
		line-height: 26px;
	}

	p {
		font-size: 18px;
		margin-top: 10px;
	}

	strong {
		color: inherit;
		font-weight: 600;
		font-size: inherit;
	}

	.section-title {
		position: relative;
		top: 46%;
		font-size: 32px;
		font-weight: 600;
		color: #FFFFFF;
		line-height: 36px;
		text-shadow: 0px 0px 6px rgba(0,0,0,0.6);
	}



/* Header/Menu */

	header {
		width: 100%;
		height: 130px;
		position: fixed;
		background-image: url(../img/header_onda.svg);
		background-repeat: no-repeat;
		background-position: center -31px;
		background-size: 2560px 144px;
		-webkit-filter: drop-shadow(3px 3px 6px rgba(0,0,0,0.1));
		z-index: +1;
		opacity: 0.98;
	}

	.header-container {
		max-width: 950px;
		height: 90px;
		margin: 0 auto;
		padding: 0px 20px 0px 20px;
	}

	.logo {
		width: 180px;
		height: 55px;
		margin-top: 17px;
	}

	.menu-panel {
		margin-top: 7px;
		display: inline-block;
		text-align: right;
		float: right;
	}

	.menu-panel li {							
		display: inline-block;
	}

	.menu-panel li a {
		font-size:16px;
		font-weight: 600;
		margin-left: 16px;
	}

	.menu-panel a:hover {
		color: #818285;

	}

	.menu-icon {
		display: none;
	}



/* Slider*/ 

	.banner, 
	.slide1, 
	.slide2, 
	.slide3, 
	.slide4   {
		width: 100%;
		height: 700px;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		-webkit-filter: drop-shadow(3px 3px 6px rgba(0,0,0,0.1));
	}


	.slide1 {
		background-image: url(../img/tessile.jpg)
	}

	.slide2 {
		background-image: url(../img/energia.jpg)
	}

	.slide3 {
		background-image: url(../img/cinema.jpg)
	}

	.slide4 {
		background-image: url(../img/informatica.jpg)
	}

	.slider {overflow:hidden; position:relative;}
	.slider div{ position:absolute; animation:fling-minislide 20s infinite; opacity:0; width: 100%; height: 700px;}

	@keyframes fling-minislide {25%{opacity:1;} 40%{opacity:0;}} 
	.slider div:nth-child(4){animation-delay:0s;}
	.slider div:nth-child(3){animation-delay:5s;}
	.slider div:nth-child(2){animation-delay:10s;}
	.slider div:nth-child(1){animation-delay:15s;}



/* Content */ 

	.content  {
		width: 100%;
		padding: 140px 0px;
	}
	
	.box-big {
		max-width: 100%;
		height: auto;
		margin: 0px auto;
		text-align: center;
		padding: 0px;
	}

	.box-medium {
		max-width: 900px;
		height: auto;
		margin: 0px auto;
		text-align: center;
		padding: 0px 60px;
	}

	.white {
		background-color: #ffffff;
	}

	.grey {
		background-color: #f5f5f5;
	}

	.black {
		background-color: #000000;
	}



/* Sezioni */

	.section {
		width: 300px;
		height: 300px;
		display: inline-block;
		text-align: center;
		margin: 20px 20px;
		border-radius: 50%;
		-webkit-filter: drop-shadow(3px 3px 6px rgba(0,0,0,0.1));
	}

	.section:hover {
		background-size: 300%;
	}


	.tessile {
		background: url(../img/tessile.jpg) no-repeat center center;
		background-size: cover;
	}

	.cinema {
		background: url(../img/cinema.jpg) no-repeat center center;
		background-size: cover;
	}

	.energia {
		background: url(../img/energia.jpg) no-repeat center center;
		background-size: cover;
	}

	.informatica {
		background: url(../img/informatica.jpg) no-repeat center top;
		background-size: cover;
	}



/* Partners */

	#partners {
		max-width: 940px;
		padding: 0px 20px 0px 20px;
	}

	.partner {
		width: 235px;
		height: 120px;
		display: inline-block;
	}

	#lafonte {
		background: url(../img/lafonte.png) no-repeat center center;
	}

	#bellosguardo {
		background: url(../img/bellosguardo.png) no-repeat center center;
	}

	#puraenergie {
		background: url(../img/puraenergie.png) no-repeat center center;
	}

	#cleviria {
		background: url(../img/cleviria.png) no-repeat center center;
	}



/* Footer */

	footer {
		width: 100%;
		height: 70px;
		background-color: #000000;
	}

	.footer-container {
		max-width: 940px;
		height: 70px;
		margin: 0 auto;
		padding: 0px 20px;
	}

	.copyright {
		display: inline-block;
		position: relative;
		width: 430px;
		height: 40px;
		font-size:12px;
		font-weight: 600;
		line-height: 14px;
		top: 22px;
		color: #ffffff;
		float: left;
}

	.supporter {
		display: inline-block;
		position: relative;
		width: 200px;
		height: 70px;
		font-size:12px;
		font-weight: 600;
		color: #ffffff;
		float: right;
	}

	.spesdocet {
		width: 120px;
		height: 40px;
		background-image: url(../img/spesdocet_logo.png);
		background-size: cover;
		display: inline-block;
		position: relative;
		top:18px;
	}



/* Tablet 2560 */

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

	.partner {
		width:  25%;
		height: 100px;
		margin: 10px 0px 10px 0px;
		}
		
	.section {
		width: 420px;
		height: 420px;
		}
	}



/* Tablet 1280 */

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

	.section {
		width: 390px;
		height: 390px;
		}
	}



/* Tablet 1024 */

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

	.section {
		width: 340px;
		height: 340px;
		}
	}



/* Tablet 768 */

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

		
	header {
		background-image: none;
		background-color: #ffffff;
		height: 90px;
	}
		
	.logo {
		width: 165px;
		height: 50px;
		margin-top: 24px;
		}
		

	#main_nav {
		width: 100%;
		display: none;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		background-color: #ffffff;
		z-index: +1;
	}

	#main_nav:target {
		display: block;
		z-index: +1;
	}
		

		
	.menu-panel {
		display: block;
		width: 100%;
		margin-top: 0;
		padding-top: 60px;
	}
		
	.menu-panel li {
		display: block;
		text-align: center;
		float: left;		
		width: 100%;
		height: 70px;
	}
		
	.menu-panel li a{
		font-size: 40px;
	}	

	.menu-icon {
		text-align: right;
		display: block;
		position: absolute;
		right: 20px;
		overflow: hidden;
		width: 32px;
		height: 32px;
		background-image: url(../img/menu.svg);
		top: 34px;
	}
		
	#close {
		background-color: #000000;
		background-image: url(../img/close.svg);
		border-radius: 50%;
		}
		
	.section {
		width: 320px;
		height: 320px;
		}
		
	.partner {
		width: 50%;
		height: 100px;
		margin: 20px 0px 20px 0px;
		}
	}



/* Mobile 480 */

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

	.banner {
		width: 100%;
		height: 450px;
	}
		
	.slide1   {
		background-position: center right;
		}
		
	.box-medium {
		padding: 0px 30px;
		}
	
	.partner {
		width: 100%;
		height: 70px;
		margin: 10px 0px 10px 0px;
		}
		
	footer {
		height:136px;
		}	
		
	.copyright {
		width: 100%;
		height: auto;
		text-align: center;
		}

	.supporter {
		float: left;
		width: 100%;
		text-align: center;
		margin-top: 20px;
		}
	}