@charset "utf-8";

@media only screen and (max-width: 479px){
	
*{margin: 0;padding: 0;box-sizing: border-box;}
h1{font-size: 54px; font-weight: 700;font-family: 'Roboto'}
h2,h3{font-family: 'Roboto'}
p{color:#fff;font-size: 16px;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: 90%;margin-left: auto;margin-right: auto}
	
#header{
	position: fixed;
	float: left;
	width: 90%;
	margin-top: 24px;
	z-index: 9999
	}
	
	#header_w{
	position: fixed;
	float: left;
	width: 90%;
	margin-left: 5%;
	margin-top: 24px;
	z-index: 9999
	}
	
#logo_header{position: relative;float: left;width: 90px}
#logo_header h1{font-size: 18px;}
	#logo_header br{margin-bottom: -12px}
#logo_header span{font-size: 14px; font-weight: 400;line-height: 16px;}
#logo_header h2{font-size: 18px;}
#nav_bar_header{float: right;position: relative}
	
.nav-menu{
	position: relative;
	float: right;
	width: 160px;
	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: 18px}

#intro{
	position: relative;
	float: left;
	width: 100%;
	margin-top: 120px;

}
	#intro_img{
		position: relative;
		float: left;
		width: 66%;
		margin-left: 11.5%
	}
	
	#intro_img img{
		width: 100%;
		   -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{
		display: none
	}
	#intro_text_second{
		margin-bottom: 100px
	}
	
	#intro_text a{font-weight: 700;text-decoration: underline;}
	
	#title_amazing{
		position: relative;
		float: left;
		width: 100%;
		margin-top: 0px;
		margin-bottom: 50px;
		
	}
	#amazing1{
		position: relative;
		float: left;
		width: 100%;
		font-size: 42px;
		color: #fff;
		font-family: 'Roboto';
		font-weight: 700;
		line-height: 60px;
		
	}
	
	#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: left;
		width: 100%;
		font-size: 64px;
		line-height: 90px;
		font-family: 'Roboto';
		color: #FA3E3E;
		box-sizing: content-box;
		margin-top: 20px;
	}
	#project{
		position: relative;
		float: left;
		width: 100%;
		margin-bottom: 60px
	}
	#title_project{position: relative;float: left;width: 100%}
	#title_project_work{position: relative;float: left;width: 100%}
	#title_project h3{
		position: relative;
		float: left;
		font-family: 'Roboto';
		font-size: 18px;
		font-weight: 400;
		color: #fff;
	}
	#title_project_work h3{
		position: relative;
		float: left;
		width: auto;
		font-family: 'Roboto';
		font-size: 90px;
		line-height: 90px;
		font-weight: 700;
		color: #fff;
	}
	
	#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: auto;
		margin-bottom: 90px;
		background-color: #333;
		box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.25)
	}
	#falegnameriasparvieri{
		position: relative;
		float: right;
		width: 100%; 
		height: auto;
		margin-bottom: 90px;
		background-color: #333;
		box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.25)
	}
	#nessunopertutti{
		position: relative;
		float: left;
		width: 100%;
		height: auto;
		margin-bottom: 90px;
		background-color: #333;
		box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.25)
	}
	#termoassistenzacocci{
		position: relative;
		float: right;
		width: 100%;
		margin-bottom: 180px;
		height: auto;
		background-color: #333;
		box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.25)
	}
	.right{float: right;}
	
	#trovaildragone img{width: 100%; position: relative;float: left;margin-bottom: 15px;transition: 700ms}
	#falegnameriasparvieri img{width: 100%; position: relative;float: right;margin-bottom: 15px;transition: 700ms}
	#nessunopertutti img{width: 100%; position: relative;float: left;margin-bottom: 15px;transition: 700ms}
	#termoassistenzacocci img{width: 100%; position: relative;float: right;margin-bottom: 15px;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:12px;}
	.open-pr h3{font-size: 32px;line-height: 48px;font-weight: 700;color: #fff;margin-top: 15px}
	.open-pr p{font-size: 18px;font-weight: 400;line-height: 55px;color: #fff}
	
	.button-pr{
		position: relative;
		float: left;
		width: 120px;
		height: 40px;
		margin-bottom: 35px;
		padding: 10px 0px 10px 20px;
		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);
	}
	
	#section-count{
		position: relative;
		float: left;
		width: 100%;
		margin-bottom: 45px;
		height: auto;
		
	}
	#contatore{
		position: relative;
		float: left;
		width: 100%;
		height: 80px;
		background-color: #1A936F;
		text-align: center;
		/*padding-top: 320px;*/
	}
	
	.counter{margin-top: 18px; text-align: center;font-size: 36px;color: #fff;font-family: 'Roboto';}
	
	#contatore-img{
		position: relative;
		float: left;
		width: 100%;
		
	}
	
	#contatore-img img{width: 100%}
	
	#next_prev{
		position: relative;
		float: left;
		width: 82%;
		margin-left: 9%;
		margin-bottom: 150px
	}
	
	.next_prev_prj{
		position: relative;
		float: left;
		width: 50%;
		height: 120px;
		padding-left: 12px;
		padding-top: 12px;
		box-sizing: border-box;
	}
	
	.next_prev_prj:hover{
		background-color: #FA3E3E
	}
	
	.next_prev_prj h4{
		color: #fff;
		font-size: 14px;
		font-weight: 400;
		font-family: 'Roboto';
	}
	.next_prev_prj h3{
		color: #fff;
		font-size: 14px;
		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: 90%;
		margin-left: auto;
		margin-right: auto;
		
	}
	
	#contact_img{
		position: absolute;
		left:0px;
		top: -90px;
		width: 140px;
		margin-left: 4%;
		z-index: 10
	}
	#contact_img img{
		width: 100%;
	}
	
	#contact_title{
		position: absolute;
		left: 140px;
		top: -60px;
		z-index: 10
		
	}
	#contact_title h3{
		font-size: 42px;
		font-weight: 700;
		color: #fff;
		font-family: 'Roboto';
		padding-top: 25px;
		
	}
	#contact_section{
		position: relative;
		float: left;
		width: 100%;
		height: 370px;
		background-color: #FA3E3E;
	}
	#footer_about{
		position: relative;
		float: left;
		width: 100%;
		height: 370px;
		background-color: #333333;
	}
	
	
	#footer_menu{
		position: relative;
		float: left;
		width: 100%;
		margin-left: 0%;
		margin-top: 80px;
		
	}
	
	#contact_text{
		position: relative;
		float: left;
		width: 80%;
	}
	
	#contact_text p {
		font-size: 16px;
		font-weight: 400;
		line-height: 28px
	}
	
	#contact_btn{
		position: relative;
		float: left;
		width: 200px;
		margin-right: 400px;
		margin-bottom: 10px
	
	}
	
	#get_in_touch{
		width: 200px;
		background-color: #333333;
		border: none;
		height: 55px;
		margin-top: 15px;
		cursor: pointer
	}
	#get_in_touch_about{
		width: 200px;
		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: 100px;
		padding-top: 25px;
		box-sizing: border-box;
		margin-top: 10px

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

	#copied{
		position: absolute;
		left: 0;
		top: 15px;
		width: 200px;
		height: 55px;
		background-color: #FA3E3E;
		font-family: 'Roboto';
		border: none;
		z-index: 999;
}
	#copied_about{
		position: absolute;
		left: 0;
		top: 15px;
		width: 200px;
		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: 200px;
		padding-left: 5%;
		box-sizing: border-box;
		height: auto;
		background-color: #FA3E3E;
		color: #fff;
		margin-bottom: 40px
	}
	#name_project h1{width: 85%;margin-bottom: 15px;font-size: 38px}
	#name_project p{margin-bottom: 40px;}
	#intro_lavoro{
		position: relative;
		float: left;
		width: 100%;
		margin-bottom: 80px;
	}
	
	.foto_grande{
		position: relative;
		float: left;
		width: 100%;
		margin-bottom: 45px
	}
	
	.foto_grande img{
		width: 100%;
	}
	
	.thumb_foto{
		position: relative;
		float: left;
		width: 100%;
		margin-bottom: 45px;
	
	}
	
	.thumb_foto img{
		position: relative;
		float: left;
		width: 100%;
	
	}
	
	.second_thumb{margin-top: 45px}
	/*------ sezione about --------*/
	.intro_about{
		position: relative;
		float: left;
		width: 100%;
		margin-top: 180px;
		margin-bottom: 35px
	}
	.intro_about h1{
		position: relative;
		float: left;
		width: 100%;
		font-size: 54px;
		line-height: 64px;
		color: #333333;
		font-weight: 700
	}
	.intro_about h1 span{
		color: #FFFFFF
	}
	
	.right_comment{
		display: none
	}
	
	
	#second_about{
		position: relative;
		float: left;
		width: 100%;
		height: auto;
		margin-top: -70px;
		z-index: 888
	}
	#text_about{
		position: relative;
		float: left;
		width:100%;
		padding-top: 50px;
		
	}
	
	#about_me_ph{
		position: relative;
		float: left;
		width: 100%;
		margin-top: 0px;
		margin-left: 0;
		margin-right: 0px
	}
	#about_me_ph img{width: 100%}
	#hello{padding-top: 0;position: relative;float: right}
	
	.intro_about h2{
		position: relative;
		float: left;
		width: 100%;
		font-size: 54px;
		line-height:64px;
		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: 100%;
		font-size: 54px;
		line-height: 64px;
		font-weight: 700;
		color: #FFFFFF;
	}
	#background{
		position: relative;
		float:left;
		width: 100%;
		margin-top: 0px;
		margin-bottom: 100px;
	}
	#background img{
		position: relative;
		float: left;
		width: 100%;
		/*margin-left: 355px*/
	}
	#background p{
		position: relative;
		float: right;
		width: 100%;
		margin-right: 0px;
		margin-top: 12px;
		font-size: 18px;
		line-height: 24px
	}
	#background p strong{font-weight: 400;}
	#background p a{color: #333333; font-weight: 700;text-decoration: underline;}
	
	.other_info{
		position: relative;
		float: left;
		width: 100%;
		height: auto;
		margin-bottom: 260px;
		margin-right: 0
	}
	
	#foto_me{position: relative;float: left;width: 100%;margin-top: 05px}
	#foto_me img{width: 100%;}
	
	#oi_text{
		position: relative;
		float: left;
		width: 100%;
		padding-left: 0px;
		box-sizing: border-box
	}
	
	#oi_text p a{color: #333333; font-weight: 700;text-decoration: underline;}
	#oi_text p a:hover{color: #fff; font-weight: 700;text-decoration: line-through;text-decoration-color: #333333;text-decoration-style: double}
	
}