@charset "utf-8";

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

*{margin: 0;padding: 0;box-sizing: border-box;}
h1{font-size: 90px; font-weight: 700;font-family: 'Roboto'}
h2,h3{font-family: 'Roboto'}
p{color:#fff;font-size: 18px;line-height: 28px;font-family: 'Roboto';margin-bottom: 24px}
a,button{color: #fff;font-size: 18px;font-weight: 400; text-decoration: none;font-family: 'Roboto', sans-serif;}
	
body{background-color: #333;}
	
#container{width: 1224px;margin-left: auto;margin-right: auto;}
	
#header{
	position: fixed;
	float: left;
	width: 1224px;
	margin-left: 0%;
	margin-top: 46px;
	z-index: 9999
	}	
	
#header_w{
	position: fixed;
	float: left;
	width: 100%;
	padding-left: 5%;
	padding-right: 5%;
	margin-top: 46px;
	background-color: transparent;
	z-index: 9999
	}
	
#logo_header{position: relative;float: left;}
#logo_header h1{font-size: 20px;}
#logo_header span{font-size: 14px; font-weight: 400;line-height: 16px}
#logo_header h2{font-size: 20px;}
#nav_bar_header{float: right;position: relative}
	
.nav-menu{
	position: relative;
	float: right;
	width: 184px;
	height: 65px;
	display: flex;
	justify-content: space-between;
	box-sizing: border-box;
}

.menu-items{display: inline-block;}
.menu-items a {text-decoration: none;padding: 15px; font-weight: 700;font-size: 20px}

#intro{
	position: relative;
	float: left;
	margin-left: 71px;
	margin-top: 150px
}
	#intro_img{
		position: relative;
		float: left;
		padding-left: 414px
	}
	
	#intro_img img{
		width: 190px;
		   -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }}
	
	
	strong{font-weight: 400}
	
	#intro_text{
		position: relative;
		float: left;
		margin-left: 24px;
		width: 494px;
		padding-top: 20px
	}
	#intro_text a{font-weight: 700;text-decoration: underline;}
	
	
	/*clear mobile*/
	#intro_text_second{display: none}
	
	#title_amazing{
		position: relative;
		float: left;
		width: 90%;
		margin-left: 5%;
		margin-bottom: 260px;
	}
	#amazing1{
		position: relative;
		float: left;
		width: 780px;
		font-size: 120px;
		color: #fff;
		font-family: 'Roboto';
		font-weight: 700;
		line-height: 160px;
		
	}
	
	#amazing1 span{
		color: #333;
		text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
	}
	#amazing2{
		position: relative;
		float: right;
		font-size: 60px;
		line-height: 90px;
		font-family: 'Roboto';
		color: #FA3E3E;
		padding-top: 40px;
		box-sizing: content-box;
	}
	#project{
		position: relative;
		float: left;
		width: 90%;
		margin-left: 5%;
		margin-bottom: 160px
	}
	
	#title_project h3{
		position: relative;
		float: left;
		width: 600px;
		font-family: 'Roboto';
		font-size: 18px;
		font-weight: 400;
		color: #fff;
		margin-right: 24px;
	}
	#title_project_work h3{
		position: relative;
		float: left;
		width: 200px;
		font-family: 'Roboto';
		font-size: 180px;
		line-height: 160px;
		font-weight: 700;
		color: #fff;
		margin-right: 24px;
	}
	
	#title_project_work h3 span{
		color: #333;
		text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
	}
	
	#lavori{
		position: relative;
		float: left;
		width: 100%;
	}
	#trovaildragone{
		position: relative;
		float: left;
		display: block;
		width: 100%;
		height: 434px;
		margin-bottom: 150px;
		background-color: #333;
		box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.25)
	}
	#falegnameriasparvieri{
		position: relative;
		float: right;
		width: 100%; 
		margin-bottom: 150px;
		background-color: #333;
		box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.25)
	}
	#nessunopertutti{
		position: relative;
		float: left;
		width: 100%;
		margin-bottom: 150px;
		background-color: #333;
		box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.25)
	}
	#termoassistenzacocci{
		position: relative;
		float: right;
		width: 100%;
		margin-bottom: 150px;background-color: #333;
		box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.25)
	}
	.right{float: right;}
	
	#trovaildragone img{position: relative;float: left;margin-right: 40px;transition: 700ms}
	#falegnameriasparvieri img{position: relative;float: right;margin-left: 40px;transition: 700ms}
	#nessunopertutti img{position: relative;float: left;margin-right: 40px;transition: 700ms}
	#termoassistenzacocci img{position: relative;float: right;margin-left: 40px;transition: 700ms}
		
	#trovaildragone img:hover{transform: scale(103%);box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.5)}
	#falegnameriasparvieri img:hover{transform: scale(103%);box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.5)}
	#nessunopertutti img:hover{transform: scale(103%);box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.5)}
	#termoassistenzacocci img:hover{transform: scale(103%);box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.5)}

	
	.open-pr{ padding:40px;}
	.open-pr h3{font-size: 45px;line-height: 56px;font-weight: 700;color: #fff}
	.open-pr p{font-size: 18px;font-weight: 400;line-height: 90px;color: #fff}
	
	.button-pr{
		position: absolute;
		bottom: 35px;
		width: 150px;
		height: 50px;
		padding: 15px;
		color: #fff;
		background-color: #333;
		border-radius: 35px;
		box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.45);
		transition: 400ms 
	}
	.button-pr:hover{
		box-shadow: 0px 2px 10px 0px rgba(255,255,255,1);
		bottom: 37px;
	}
	
	#section-count{
		position: relative;
		float: left;
		width: 100%;
		margin-bottom: 90px;
		height: 730px;
		display: flex;
		justify-content: space-between
	}
	#contatore{
		position: relative;
		float: left;
		height: 730px;
		width: 185px;
		background-color: #1A936F;
		
		text-align: center;
		/*padding-top: 320px;*/
	}
	
	.counter{margin-top: 350px; text-align: center;font-size: 72px;color: #fff;font-family: 'Roboto';transform: rotate(270deg);}
	
	#contatore-img{
		position: relative;
		float: left;
		height: 730px;
	}
	#contatore-img img{width: 100%}
	
	#next_prev{
		position: relative;
		float: left;
		width: 832px;
		margin-left: 19%;
		margin-bottom: 150px
	}
	
	.next_prev_prj{
		position: relative;
		float: left;
		width: 416px;
		height: 215px;
		padding-left: 24px;
		padding-top: 24px;
		box-sizing: border-box;
	}
	
	.next_prev_prj:hover{
		background-color: #FA3E3E
	}
	
	.next_prev_prj h4{
		color: #fff;
		font-size: 18px;
		font-weight: 400;
		font-family: 'Roboto';
	}
	.next_prev_prj h3{
		color: #fff;
		font-size: 45px;
		font-weight: 700;
		font-family: 'Roboto';
	}
	
	
	#footer{
		position: relative;
		float: left;
		width: 100%;
		background-color: #FA3E3E;
	}
	
	#footer_ab{
		position: relative;
		float: left;
		width: 100%;
		background-color: #333333;
	}
	
	#contain_footer{
		width: 1224px;
		margin-left: auto;
		margin-right: auto;
		
	}
	#contact_img{
		position: absolute;
		left:30px;
		top: -110px;
		width: 223px;
		margin-left: 5%;
		z-index: 10
	}
	#contact_img img{
		width: 223px;
	}
	
	#contact_title{
		position: absolute;
		left: 280px;
		top: -90px;
		z-index: 10
		
	}
	#contact_title h3{
		font-size: 90px;
		font-weight: 700;
		color: #fff;
		font-family: 'Roboto';
		padding-top: 25px;
		
	}
	#contact_section{
		position: relative;
		float: left;
		width: 100%;
		height: 280px;
		background-color: #FA3E3E;
	}
	#footer_about{
		position: relative;
		float: left;
		width: 100%;
		height: 280px;
	}
	
	
	#footer_menu{
		position: relative;
		float: left;
		width: 76%;
		margin-left: 12%;
		margin-top: 120px;
		display: flex;
		justify-content: space-between;
	}
	
	#contact_text{
		position: relative;
		float: left;
		width: 288px;
	}
	
	#contact_text p {
		font-size: 18px;
		font-weight: 400;
		line-height: 28px
	}
	
	#contact_btn{
		position: relative;
		float: left;
		width: 288px;
	
	}
	
	#get_in_touch{
		width: 288px;
		background-color: #333333;
		border: none;
		height: 55px;
		margin-top: 15px;
		cursor: pointer
	}
	#get_in_touch_about{
		width: 288px;
		background-color: #FA3E3E;
		border: none;
		height: 55px;
		margin-top: 15px;
		cursor: pointer
	}
	
	#contact_social{
		position: relative;
		float: left;
		display: flex;
		justify-content: space-between;
		width: 184px;
		padding-top: 25px;
		box-sizing: border-box;

	}
	
	#contact_social img{
		width: 35px;
		height: 35px;
	}

	#copied{
		position: absolute;
		left: 0;
		top: 15px;
		width: 288px;
		height: 55px;
		background-color: #FA3E3E;
		font-family: 'Roboto';
		border: none;
		z-index: 999;
}
	#copied_about{
		position: absolute;
		left: 0;
		top: 15px;
		width: 288px;
		height: 55px;
		background-color: #333;
		font-family: 'Roboto';
		border: none;
		z-index: 999;
}
	
	/*------ sezione lavori --------*/
	
	#name_project{
		position: relative;
		float: left;
		width: 100%;
		padding-top: 255px;
		padding-left: 5%;
		box-sizing: border-box;
		height: 470px;
		background-color: #FA3E3E;
		color: #fff;
		margin-bottom: 40px
	}
	
	#intro_lavoro{
		position: relative;
		float: left;
		width: 500px;
		margin-left: 700px;
		margin-bottom: 150px;
	}
	
	.foto_grande{
		position: relative;
		float: left;
		width: 100%;
		margin-bottom: 90px
	}
	
	.foto_grande img{
		width: 100%;
	}
	
	.thumb_foto{
		position: relative;
		float: left;
		width: 100%;
		margin-bottom: 90px;
		display: flex;
		justify-content: space-between;
	}
	
	.thumb_foto img{
		width: 560px;
	}
	
	/*------ sezione about --------*/
	.intro_about{
		position: relative;
		float: left;
		width: 100%;
		margin-top: 180px;
	}
	.intro_about h1{
		position: relative;
		float: left;
		width: 1010px;
		font-size: 180px;
		line-height: 165px;
		color: #333333;
		font-weight: 700
	}
	.intro_about h1 span{
		color: #FFFFFF
	}
	
	.right_comment{
		position: relative;
		float: left;
		width: 100px;
		margin-top: 50px;
		margin-left: 24px;
		font-size: 18px;
		font-weight: 700
	}
	.right_comment p {color: #333333;font-family: 'Roboto';line-height: 42px}
	
	#second_about{
		position: relative;
		float: left;
		width: 100%;
		height: 400px;
		margin-top: -70px;
		z-index: 888
	}
	#text_about{
		position: relative;
		float: left;
		width: 495px;
		padding-top: 210px;
		
	}
	
	#about_me_ph{
		position: relative;
		float: left;
		width: 350px;
		margin-left: 80px;
		margin-right: 80px
	}
	#about_me_ph img{width: 350px}
	#hello{position: relative;padding-top: 100px;padding-left: 12px;float: left}
	
	.intro_about h2{
		position: relative;
		float: left;
		width: 1010px;
		font-size: 150px;
		line-height: 165px;
		font-weight: 700;
		color: #FA3E3E;
		text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
	}
	.intro_about h3 {
		position: relative;
		float: left;
		width: 1010px;
		font-size: 150px;
		line-height: 165px;
		font-weight: 700;
		color: #FFFFFF;
	}
	#background{
		position: relative;
		float:left;
		width: 100%;
		margin-top: 100px;
		margin-bottom: 180px;
	}
	#background img{
		position: relative;
		float: left;
		width: 360px;
		/*margin-left: 355px*/
	}
	#background p{
		position: relative;
		float: right;
		width: 450px;
		margin-right: 15px;
		margin-bottom: 32px
	}
	#background p strong{font-weight: 400}
	#background p a{color: #333333; font-weight: 700;text-decoration: line-through}
	#background p a:hover{color: #fff; font-weight: 700;text-decoration: underline;text-decoration-color: #333333;text-decoration-style: double}
	
	.other_info{
		position: relative;
		float: left;
		padding-left:211px;
		width: 100%;
		height: auto;
		margin-bottom: 260px;
		margin-right: 200px
	}
	
	#foto_me{position: relative;float: left;width: 285px;margin-top: 25px}
	#foto_me img{width: 285px;}
	
	#oi_text{
		position: relative;
		float: left;
		width: 288px;
		padding-left: 24px;
		box-sizing: border-box;
		margin-right: 224px
			
	}
	
	#oi_text p a{color: #333333; font-weight: 700;text-decoration: line-through;}
	#oi_text p a:hover{color: #fff; font-weight: 700;text-decoration: underline;text-decoration-color: #333333;text-decoration-style: double}
	
}