@charset "UTF-8";
/* CSS Document */

/* MacBook or PC*/
@media (min-width: 1200px) {

	/* Structure > 1200px */
	#wrapper 		{width: 1170px;margin: 0 auto;}
	#header 		{width: 1130px;float:left;padding: 20px 20px 20px 20px;} 
	#mainmenu		{float: right; padding: 0px 0px 10px 0px;} /*background-image: -webkit-gradient(linear, right top, left top, from(rgba(255, 255, 255, 1.0)), to(rgba(255, 255, 255, 0.0)));*/
	#main 			{width: 1130px;float:left;padding: 20px 20px 20px 20px;}
	
	.container { width: 1170px; }
	.contenuto { padding: 0px 10px 0px 10px;}
	
	/* work */
	.work { width: 100%; margin-bottom: 70px; overflow: hidden; }
	.work img { max-width: 100%; height: auto; }
	.foto { float: left; width: 40%; margin-left: 150px; }
	.testo { float: left; width: 40%; padding-top: 100px; }
	.fotodx { float: right; width: 40%; }
	.testodx { float: left; width: 40%; padding-top: 100px; margin-left: 180px; }

}

/* iPad or tablet*/
@media (min-width: 768px) and (max-width: 980px) {

	/* Structure 768 to 1000 */
	#wrapper 		{width: 100%;margin: 0 auto;}
	#header 		{width: 100%;float:left;padding: 20px 20px 20px 20px; background-image: -webkit-gradient(linear, right top, left top, from(rgba(98, 125, 138, 1.0)), to(rgba(98, 125, 138, 0.5)));} 
	#mainmenu		{width: 100%; height: 100vh; float: right; display:none; margin-top: -106px; background-color: #607D8B; opacity: 1.0;}
	#mainmenu a		{color: #FFFFFF; font-size: 30px;}
	#mainmenu ul li {float: none;margin: 10px 10px 0px -40px;}
	#main 			{width: 100%;float:left;padding: 20px 20px 20px 20px;}
	
	.container { width: auto;}
	.contenuto { padding: 0px 10px 0px 10px;}
	.btn-responsive-menu {display:block;}
	.box-intro { height: 100vh; width: auto;}
	.box-intro h1 { font-size: 90px;}
	.top-bar {margin-top: 30px;}
	
	/* about */
	.social-ul li { margin: 0px 13px 20px 13px; float: left; }
	
	/* work */
	.work { width: 100%; margin-bottom: 70px; overflow: hidden; }
	.work img { max-width: 100%; height: auto; }
	.foto { float: right; width: 100%; margin-left: 0px; }
	.testo { float: left; width: 100%; padding-top: 0px; }
	.fotodx { float: right; width: 100%; }
	.testodx { float: left; width: 100%; padding-top: 0px; margin-left: 0px; }
	
	.testo { float: left; width: 100%; padding: 0px 10px 0px 10px; margin-left: 0px; }
	
}

/* iPhone or smartphone*/
@media (max-width: 767px) {

	/* Structure  < 767 */
	#wrapper 		{width: 100%; margin: 0 auto;}
	#header 		{width: 100%; padding: 20px 0 20px 0px; background-image: -webkit-gradient(linear, right top, left top, from(rgba(98, 125, 138, 1.0)), to(rgba(98, 125, 138, 0.5)));} 
	#mainmenu		{width: 100%; height: 100vh; float: right; display:none; background-color: #607D8B; opacity: 1.0; /* margin-top: -106px; background-image: -webkit-gradient(linear, right top, left top, from(rgba(98, 125, 138, 1.0)), to(rgba(98, 125, 138, 0.5)));*/}
	#mainmenu a		{color: #FFFFFF; font-size: 30px;}
	#mainmenu ul li {float: none;margin: 10px 10px 0px -40px;}
	#main 			{width: 100%;float:left;padding: 20px 0 0 0;}
	
	.container { width: auto;}
	.contenuto { padding: 0px 10px 0px 10px;}
	.btn-responsive-menu {display:block;}
	.box-intro { height: 100vh; width: auto;}
	.box-intro h1 { font-size: 50px;}
	.top-bar h1 { font-size: 60px;}
	
	/* about */
	.social-ul li { margin: 0px 13px 20px 13px; float: left; }
	
	/* work */
	.nome_progetto { line-height: 50px;}
	.work { width: 100%; margin-bottom: 70px; overflow: hidden; }
	.work img { max-width: 100%; height: auto; }
	.foto { float: right; width: 100%; margin-left: 0px; }
	.testo { float: left; width: 100%; padding-top: 0px; }
	.fotodx { float: right; width: 100%; }
	.testodx { float: left; width: 100%; padding: 0px 10px 0px 10px; margin-left: 0px; }
	
	.testo { float: left; width: 100%; padding: 0px 10px 0px 10px; margin-left: 0px; }
		
}