#content-body{
 	 min-height: 100vh;
  
}
#ui--content-page{
 
}

/* ==== ==== ==== Image gall  ==== ==== ==== */


.img_wrp{
    position: relative;
    overflow: hidden; 
    height: auto;  
   text-align: center; 
}

.img_wrp img{
	display: none;
	width: auto;
	margin-left: auto; 
	margin-right: auto;  
}

 
#nav_main{
	position: absolute;
	z-index:10;
	top:10px;
	right: 12%;
}
#nav_main a{
	font-weight: 800;
	color: white;
  	font-size: calc(22px + 3vw); 
	line-height: 1em;
}

.ui-body{ 
}
  
.ui-page{
	position: relative;
	padding-bottom: 100px; 
	text-align: center;
	 
	overflow: hidden; 
	margin: auto;   
}

.boxes {
	text-align: center; 
}

.boxes > div{
	margin: auto; 
 
}
.boxes > div:nth-child(1){ 
	margin-top: 0px;
	margin-bottom:  0px;  
   
}
 
  .boxes > div:nth-child(2){ 
	margin-top: 80px;
 
}  

.boxes ._imgw{
	position: relative;
	margin: auto;  
}
 

.boxes ._imgw .btnm.btn-picture-full{
    display: none; /* temporary */
	position: absolute;
	right:10px;
	bottom: 10px;
}
.boxes ._imgw .btnm.btn-picture-full > div{
	padding: 0px;
	min-width: 30px;
	min-height: 30px;
	background-color: #00d796;
	color:white;
}

.boxes ._imgw .btnm.btn-picture-credit{ 
	position: absolute;
	right:10px;
	bottom: 10px;
}
.boxes ._imgw .btnm.btn-picture-credit > div{
	padding: 0px;
	padding-left: 6px;
	padding-right: 6px;
	min-width: 20px;
	min-height: 18px;
	font-size: 8px;
	background-color: rgb(0, 0, 0, 0.4);
	color: white;
}
.boxes ._imgw .btnm.btn-picture-credit span{
	display: none;
}


/*.boxes ._imgw .btnm{
	position: absolute;
	right:10px;
	bottom: 10px;
}
.boxes ._imgw .btnm > div{
	padding: 0px;
	min-width: 30px;
	min-height: 30px; 
	color:white;
}*/


.boxes ._imgw img{ 
	margin: auto;
}
	




.box-title-main{
	position: absolute;
	z-index: 2;
	left:5%;
/*	top: 40%;  */  
}
.box-title-main > div{
	font-weight: 800;	 
}

 
.boxes ._imgt{
	margin-top: 16px;
	font-size:   calc(16px + 2vw);
	line-height:  1.2em  ;	
	font-weight: 700;	  
	padding-left:4%;
	padding-right:4%;  
}

 

.boxes .box-wrp ._imgw,
.boxes .box-wrp ._imgt{
	/*max-width: 1600px; */
	margin: auto;
	margin-top: 100px;
	line-height: 1.2em;
}
.boxes ._imgt > div{
	line-height:  1.8em ;		
}
 

/*

.boxes ._imgt > div{
	font-weight: 200;	
	margin-top: 6px;
	font-size: 15px;
	line-height: calc(1.4em );	
	border-left: 1px solid #a5a7b3;
	border-right: 1px solid #a5a7b3; 
	padding-left: 10px;
	padding-right: 10px;
}
.boxes ._imgt .btnm > div{
	font-size: 12px;
	font-weight: 700;
}
*/

 
	/* ==== ==== ==== Section image / text  ==== ==== ==== */
	
 
	.box-wrp-b1 ._imgw,
	.box-wrp-b2 ._imgw,
	.box-wrp-b3 ._imgw,
	.box-wrp-b4 ._imgw{ 
		padding-top: 30px;
		padding-bottom: 30px;
		padding-left: 5%;
		padding-right: 5%;
	}
	
	
	.box-wrp-b1 ._imgw{
		background-color: #dfe6eb;	
	}	
	
	.box-wrp-b2 ._imgw{
		background-color: transparent;;	
	}	
 
	 .box-wrp-b3 ._imgw{
		padding-top: 80px;
		padding-bottom: 80px;
		background-color: yellow;	
	}	
	
	.boxes .box-wrp-b4   ._imgw{ 
		margin-top:  40px;
		padding-bottom:   20px; 
	}	
	.boxes .box-wrp-b4 ._imgt{ 
		padding-top: 0px;
		margin-top: 0px;		
	}
		
	.box-wrp-b1 section,
	.box-wrp-b2 section{
		margin: auto; 
	}

	.box-wrp-b1 section img,
	.box-wrp-b2 section img{
		width: 100%;
		height: auto;
		max-width: 650px;
	}
	
		.box-wrp-b1 ._imgw > section ._left{ 
			text-align: right;
			padding: 0px;
			padding-right: 3%; 
		}
 	
		.box-wrp-b1 ._imgw > section ._right{ 
			text-align: left;
			padding: 0px;
			padding-left: 3%;  
		}
 
		.box-wrp-b2 ._imgw > section ._left{ 
			text-align: right;
			padding: 0px;
			padding-right: 3%; 
		}
 	
		.box-wrp-b2 ._imgw > section ._right{ 
			text-align: left;
			padding: 0px;
			padding-left: 3%;  
		}		
 
	 	.box-wrp-b3 ._imgw  {
	 		font-size: calc(30px + 1.8vw); 
	 	}
	 	.box-wrp-b4 ._imgw  {
	 		font-size: calc(20px + 1.1vw); 
	 		font-weight: 700;
	 	}
		.box-wrp-b4 ._imgt div{
			font-size: calc(12px + 0.5vw); 
			line-height: 1.4em;
		}

	
	.box-wrp-b1 .article__a h4,
	.box-wrp-b2 .article__a h4{
		font-size: calc(30px + 1.8vw); 
		text-transform:uppercase;
		line-height:1em;
		font-weight: 800; 
		margin: 0px;
		
	}
	.box-wrp-b1 .article__a h5,
	.box-wrp-b2 .article__a h5{
		font-size: calc(26px + 1.8vw); 
		text-transform:uppercase;
		line-height:1em;
		font-weight: 200; 
		margin: 0px;
	}	
	
	.box-wrp-b1 .article__a p,
	.box-wrp-b2 .article__a p{
		font-size: calc(12px + 0.2vw); 
		line-height: 1.6em;
		max-width: 700px;
	}
	
	.box-wrp-b2 .article__a p{
		margin-left: auto;
		margin-right: 0px;
	}
	
	.box-wrp-b1 .article__a .btnm,
	.box-wrp-b2 .article__a .btnm{
		margin-top: 20px;
	} 
	
 






/* ==== ==== ==== Menu Top  ==== ==== ==== */
 

.ui-menu{ 
	position: fixed; 
	/*width:100%;*/
	z-index: 10;
 	/*background-color: rgba(255,255,255,0.9); */
	/*height: 60px; */
	top: 10px; 
	left: 5%;
	background-color: black;
	  width: 20%;
	  height: auto;
	  max-width: 150px;
	  max-height: 150px;
}


 
 .ui-menu ._logo a{ 
 }
 
.ui-menu ._logo img{
	  width: 200%;
	  height: auto;
	}

 

.ui-menu-side{
	position: fixed;
	/*display: none;*/
	top: 0px; 
	left:   var(--left); 
	z-index: 12;
	width: var(--width);
	height: 100vh; 
}

.ui-menu-side ._wrap{ 
   overflow: hidden;
	height: inherit;  
}

 
.ui-menu-side ._wrap.scroll_show{
	overflow: auto;
}



.ui-menu-side ._wrap,
.ui-menu-body-background{
	background-color: #373a43;
}

.ui-menu-side ._wrp{ 
	position: relative;   
	height: 100%; 
	text-align: right; 
} 

.btn-side-close{
	position: fixed; 
	z-index: 20; 
	top:10px;
	right: 12px; 
	opacity: 0;
	/*display: none;*/ 
}
.btn-side-close > div{ 
	padding: 0px;
	min-width: 30px;
	min-height: 30px;
	background-color: #00d796; 
	border-radius: inherit; 
	letter-spacing: 0px;
}

.btn-side-close > div:hover{ 
	background-color: #00d4d7; 
}

.btn-side-close > div:before{ 
	position: absolute; 
	font-family: "font-sf"; 
	content: '\E815';
	font-size: 24px;  
	color:white;   
	font-weight: 100;  
	line-height: 30px; 
	text-align: center;
	vertical-align: middle;
}
 



.ui-menu-side nav{ 
	position: absolute;
	z-index:10;
	top:100px;
	right: 16%;
	left: auto; 
	text-align: right;  
	margin-bottom:300px; 
	padding-right: 20px;
}
.ui-menu-side nav > div{   
	margin-bottom:  calc(20px + 2vh);
}
 

.ui-menu-side ._wrp ._bg{
	position: absolute;
	top:100px;
	left: auto;
	bottom: 0px;
	right: 20%;
	width: 100%;
	height: calc(100% + 300px);
 
/*	background-image: url("../files/images/_IMG3273_2.jpg");
	background-repeat: no-repeat; 
	background-position: top right;*/
}
.ui-menu-side ._wrp nav .btnm{  
}



.ui-menu-side ._wrp nav .btnm > div{
	 padding:0px; 
	 line-height: 1em;
	background-color: transparent;
	color:white; 
}

.ui-menu-side ._wrp nav .btnm > div:after{
 
	 font-family: "font-sf"; 
	 content: '\E802';
	 font-size: 20px; 
	 line-height: 1em;
	 padding: 0px; 
	 color: white;  
	 margin-left: 18px;
	font-weight: normal;  
	vertical-align: middle;
}
 
.ui-menu-side ._wrp nav a > div   {  
	font-weight: 900;
	font-size:  calc(26px + 1vw)  ; 
	text-transform: none ; 
}

 
.ui-menu-side nav .btnm.btn-letstalk > div{
	font-weight: 500;
	font-size: calc(14px + 0.5vw)  ; 
}



#picture{
	padding : 1% 3%;  
}

#picture img{
 	width: auto;
	max-width: 100%; 
}


 
 

#banner-1{
	background-color: #363943; 
	padding: 60px 7% 40px 7%; 
	text-align:center;
	background-image: url(../files/images/stefano-ferrari-interior-1.jpg);
	background-repeat: no-repeat; 
	background-size: 600px auto;
	background-position: right top;
}
#banner-1 p{
	font-size: calc(18px + 0.5vw);
	color: white;
	font-weight: 800;
	text-align: left;
	letter-spacing: 8px;
}



 
 .banner{
	padding-left: 10%;
	padding-right: 10%;
	text-align: center;
}


#banner-2{ 
	padding:  0px 7% ;
	text-align: center;

}
 
 
#banner-2 p 
#banner-3 p {
	max-width: 900px; 
	margin: auto;
	font-weight: 400; 
}


  #banner-3 { 
	text-align: center;
  }

  #banner-3 h2{
 	font-weight: 200;
 	font-size: calc(20px + 1.5vw);  
 }
 





#content-contact,
#content-offer,
#content-about,
#content-letstalk{ 
	padding-top: 120px; 
}



#content-contact #banner-1,
#content-offer #banner-1, 
#content-about #banner-1,
#content-letstalk  #banner-1{
 	margin-bottom: 50px;
} 

 
#content-contact #banner-2,
#content-offer #banner-2,
#content-offer #banner-3,
#content-about #banner-2,
#content-about #banner-3,
#content-letstalk  #banner-2{
	padding-left:10%;
	padding-right:10%;
	max-width: 1400px; 
} 

 

  
#content-contact ._title_address{
	font-weight:600;
	margin-top: 30px;
	font-size: 0.8em;
}

 
.data #banner-2 p{
	max-width: 1200px;
}

.data #banner-3{
	max-width: 1600px;
	text-align: left;
	padding: 2%;
}
#content-offer #banner-3 article{
	padding-left: 4%;
	padding-right: 4%;
	
}
 

.data #banner-3 h2 {
	font-weight: 200; 
	font-size: 2.4em; 
	margin-top: 30px;  
	padding-bottom: 10px;
	color: rgba(0, 0, 0, 0.6);
 
}
#content-offer #banner-3 h2:nth-child(1){ 
	margin-top: 20px;
} 
 
#content-offer #banner-3 h3{
	color: #007355;
	margin-top: 1%; 
	padding-bottom: 4px;
	font-weight: 600; 
	font-size: 1.3em; 
}

#content-offer #banner-3 ul{
	padding: 2% 6%; 
	max-width: 1000px
}
#content-offer #banner-3 li{
	margin-bottom: 10px;
}

#content-contact address{
	 font-style: normal;
	 margin-top: 10px; 
}


#content-picture-full-box{
	position: fixed;
	z-index: 20;
	bottom:0px;
	width: 100vw; 
	background-color: black;
}


.ui-menu-bottom{
	margin-top: 200px; 
	text-align: center;
}
.ui-menu-bottom nav{
	margin: auto;
}


#content-page-projects .ui-menu-bottom{
    margin-top: 0px; 
}


#ui_popup_credits.ui_popup{ 
  	top: auto;
  	left:0px;
  	margin-left: 0px;
  	width: 100%; 
	background-color: black;
	height: 80px;
   bottom: -80px; 
	
}

#ui_popup_credits.ui_popup_show{
	animation: ui_popup__credit_anim_show 0.3s ease-in-out forwards;
}

@keyframes ui_popup__credit_anim_show {
    from {bottom: -80px;  }
    to {bottom: 0px;}
}

#ui_popup_credits.ui_popup_remove{
	animation: ui_popup__credit_anim_remove 0.3s ease-in-out forwards;
}
 
@keyframes ui_popup__credit_anim_remove {
    from {bottom:  0px;  }
    to {bottom: -80px;}
}

.ui-footer{
	margin-top:160px;
	background-color: black;
	min-height:250px;
	padding: 20px 6% 40px 4% ; 
}

.ui-footer ._wrap{
	max-width: 1200px;
	margin: auto;	
}

.ui-footer * {
	color: white;
}

.ui-footer ._left{
		width: 25%;
}
.ui-footer ._right{
	width: 75%;
	font-size: 18px;
	font-weight: 800;
	
}
.ui-footer  ._right nav{
	margin-top: 2%;
	margin-bottom: 40px;
}

.ui-footer  ._right nav .btnm > div{
	font-size: 14px;
	font-weight: 900;
	color: #b5bcc8;
	min-height: 26px;
	padding-left: 8px;
	padding-right: 8px;
}

.ui-footer ._logo_sf img{
	  max-width: 160px; 
	  width:100%;
	  height: auto;
	}

.ui-footer ._row_logos{
	text-align: right;
}
.ui-footer ._row_logos ._logo_arb,
.ui-footer ._row_logos ._logo_riba{
	display: inline-block; 
 	vertical-align: middle;
 	margin-left: 10%;
 	margin-bottom: 10px;
}
.ui-footer ._row_logos ._logo_arb img{
	  max-width: 120px; 
	  width:100%;
	  height: auto;
}

.ui-footer ._row_logos ._logo_riba img{
	  max-width: 110px; 
	  width:100%;
	  height: auto;
}

.ui-footer ._copyrights{ 
	padding: 2% 4%;
	font-size: 13px; 
	color: #b5bcc8;
}
.ui-footer ._copyrights b{
	font-weight: 800;
	font-size: 13px; 
	color: rgba(0, 215, 150, 0.8);
}

@media screen and (max-width: 900px) { 
	
	.box-title-main{ 
  		margin:auto;  
  		text-align: center;
		left: 0;
		right: 0; 
	}
	.box-title-main > div{
		display: inline-block;
  		margin:auto;  
	}
 
}
 
	.box-title-main{ 
		top: 500px;     
	}

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

	.box-title-main{ 
		top: 400px;     
	}

}

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

	.box-title-main{ 
		top: 300px;     
	}
	
	

	
	
}

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

	.box-title-main{ 
		top: 230px;     
	}
	.box-wrp-b1 ._imgw > section ._left,
	.box-wrp-b2 ._imgw > section ._left{
 		display: block; 
		padding: 0px; 
		width:100%;
		margin: auto;
		max-width: 500px;
		padding-bottom: 10px;
	}
 	
	.box-wrp-b1 ._imgw > section ._right,
	.box-wrp-b2 ._imgw > section ._right{
	 
 		display: block;
		text-align: left;
		padding: 0px; 
		width:100%;
		margin: auto;
		max-width: 500px;
	}	


	.box-wrp-b2 ._imgw > section ._left{
 	 
		padding-bottom: 30px;
	}
 	
	.box-wrp-b2 ._imgw > section ._right{
	  
	}	
	
}


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

	.box-title-main{ 
		top: 180px;    
	}

 
	.ui-footer ._row_logos > div{  
	 	padding-right: 10px;  
	}
	
	.ui-footer ._copyrights{
		padding: 20px;
	}
	.ui-footer ._copyrights, .ui-footer ._copyrights b{  
		font-size: 11px;  
	}	

	
}