/* BASIC SETTINGS */
* {padding:0; margin:0; font-family: "futura", Arial;}
*:focus {outline:none;}
::selection {background-color:#333; color:white;}
img {border:0; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none;}

html, body {width:100%; height:100%; font-size:16px; line-height:18px; -webkit-font-smoothing: antialiased; min-width: 1000px; min-height: 640px;}
body {overflow:hidden;/* overflow-y:scroll; */ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-text-size-adjust: 100%; translateZ(0); }

p, label {font-size:13px; line-height: 20px; color: #a5a5a5; text-align: justify;}
textarea {resize:none; overflow: hidden;}
article .box, img {translateZ(0);}

/* ASIDE, HEADER, MENU, FOOTER */
aside {width: 230px; height: 100%; position: fixed; top: 0; left: 0; min-height: 640px;}

aside header {width: 170px; margin-left: 30px; height: 270px; position: absolute; top: 0; background: url(../img/logo.jpg) no-repeat; z-index: 9;}
aside header a, article#home a {width: 100%; height: 100%; display: block;}

aside {display: table;}
aside nav {width: 80px; max-width: 80px; margin-left: 150px; position: relative; padding: 147px 0 40px 0; display: table-cell; vertical-align: middle;}
aside nav ul {list-style: none;}
aside nav.cn ul li {text-align:left;}
aside nav.cn ul li a {letter-spacing: 0px;}
aside nav li {text-align: center; min-height: 30px;}
aside nav li a {font-family: 'futura'; font-size: 18px; line-height: 32px; width: 100%; display:block; max-width: 80px; height: 27px;}
aside nav li a.video {letter-spacing: 7px;}
aside nav li a.staff {letter-spacing: 8px;}
aside nav li a.about {letter-spacing: 5px;}
aside nav li a.products {letter-spacing: -1px;}
aside nav li a.info {letter-spacing: 12px;}
aside nav li a.blog {letter-spacing: 10px;}
aside nav a.active, aside nav li a:hover, aside nav li li.active a, aside nav li li:hover a {color: #606060; border-bottom: 2px solid #606060; text-decoration: none;}

aside nav li ul {margin-top: 15px; display: none;}
aside nav li ul.open {display: block;}
aside nav li li {text-align: left; cursor: pointer; height: 25px; min-height: 0;}
aside nav li li a {font-size: 11px; line-height: 13px; height: auto; padding-bottom: 2px;}
aside nav li li.btResidential {letter-spacing: 2px;}
aside nav li li.btCommercial {letter-spacing: 1px;}

footer{width: 170px; position: absolute; left: 30px; bottom: 20px;}

footer #lng {float: left;}
footer #lng a {margin: 0 4px 0 0; float: left; text-align: left; font-size: 14px; line-height: 15px;}
footer #social {float: right; display: block;}
footer #social a {float: left; margin-left: 2px;}
footer #social img {display: block;}

footer p {
	font-size: 11px;
	line-height: 13px;
	margin-top: 3px;
	padding-top: 6px;
	border-top: 1px solid #a5a5a5;
	text-align: center;
}
footer p span {font-size: 9px;}
footer a {display: inline;}

/* SECTIONS */
section {position: absolute; left: 230px; overflow-y:auto; -webkit-overflow-scrolling: touch;}
section, #spinner {right: 0; top: 0; bottom: 0;}
#spinner {position: fixed; left:0; display: none; z-index: 10; background:url(../img/overlayHack.png) repeat;}
#spinnerOverlay {position: absolute;top:0; left: 230px; right:0; bottom: 0; background:url(../img/overlayWhite.png) repeat;}
.spinner {position:absolute !important; top: 50%; left: 50%;}

article {width: 100%; height: 100%;/* overflow: hidden;*/}
article .overlay {width: 100%; height: 100%; background: #000; position: relative; cursor: pointer; background: url(../img/overlay.png) repeat;/* display: none;*/ opacity: 0; }
article .overlay:hover {
	opacity: 1;
}
article .overlayTable {width: 100%; height: 100%; display: table;}
article .overlay h2 {font-size: 14px; display: table-cell; vertical-align: middle; text-align: center; text-transform: uppercase;}

/* HOME */
#home {overflow: hidden!important;}
#home .box {position: relative;}
#home .box img {position: absolute;}

article .box {height: 50%; overflow: hidden; background-position: center center; background-size: cover;}
article .box h2 {color: white;position:relative;}
article .box h2 span {position:absolute;font-size:0.8em;margin:14px 0 0 -24px}
article .box.left {float: left;}
article .box.right {float: right;}
article .uffici, article .esterni {width: 35%;}
article .residenziale, article .commerciale {width: 65%;}
article .progetti {width:100%;height: 100%!important;}

article .residenziale, article .uffici, article .commerciale, article .esterni, article .progetti {
	background-repeat: no-repeat;
}

article .progetti {
	background-image: url(../img/homepage.jpg);
}
article .residenziale {
	background-image: url(../img/residenziale.jpg);
}
article .uffici {
	background-image: url(../img/uffici.jpg);
}
article .commerciale {
	background-image: url(../img/commerciale.jpg);
}
article .esterni {
	background-image: url(../img/esterni.jpg);
}

iframe {width: 50%; height: 50%;}


/* PROJECTS */
#progetti {height: auto;}
.wrapperThumb .box {
	width: 25%;
	float: left;
	cursor: pointer;
	background-size: 100% 100% !important;
}

.anim750 {
	-webkit-transition: opacity .75s;
	-moz-transition: opacity .75s;
	-o-transition: opacity .75s;
	-ms-transition: opacity .75s;
	transition: opacity .75s;
}

.anim300 {
	-webkit-transition: all .30s;
	-moz-transition: all .30s;
	-o-transition: all .30s;
	-ms-transition: all .30s;
	transition: all .30s;
}

.hide {
	opacity: 0 !important;
}

.show {
	opacity: 1 !important;
}

/* About */
#about h1 {font-size: 2.5em; line-height: 0.5em}
#about h2 {line-height: 1.1em}
#about p {font-size: 1em}
#about .flex-container 
{
	display: flex; 
	flex-flow: row wrap; 
	justify-content: space-around;
}
#about .column {max-width: 210px}
#about .whatwedobg 
{
	background: url('../img/whatwedo.jpg') center no-repeat; 
	width: 100%; 
	height: 28em;
}

/* SLIDER */
#sliderWrapper {width: 100%; position: absolute; top: 0; left: 0; bottom: 0; background: white; display: none;}

#sliderWrapper header {width: 100%; height: 20px; padding: 20px 0; position: absolute; top: 0; left: 0;}
#sliderWrapper header h2 {font-size: 14px; line-height: 20px; text-align: center; text-transform: uppercase;}
#sliderWrapper header h2 span.subtitle {margin-left:10px;font-size:1.2em;text-transform:none;font-weight:bold;line-height:20px;}
#sliderWrapper header .close {width: 61px; height: 60px; position: absolute; top: 0px; right: 0px; background: url(../img/close.png) no-repeat; cursor: pointer;}

#sliderWrapper header h3 {position:absolute;bottom:0;left:0;font-size:13px;width:100%;text-align:center;font-weight:normal;}
#sliderWrapper header h3 a {font-weight:bold;}

#sliderWrapper section {position: absolute; top: 60px; left: 0; right: 33px; bottom: 60px; overflow: hidden;}
#sliderWrapper section img {position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; cursor: pointer; /*display: none;*/}
#sliderWrapper section img.vertical{height: 100%;}
#sliderWrapper section img.horizontal{width: 100%;}


#sliderWrapper .wrapperImg {position: relative; width: 100%; height: 100%; float: left; overflow: hidden;}
#sliderWrapper .wrapperSliderImage {position:absolute; top: 0; left: 0; right: 0; bottom: 0;}
#debug {position: absolute; top: 20px; right: 20px; width: 100px; height: 100px; padding-top: 20px; background: #000; color: #FFF;}

#sliderWrapper footer {width: auto; height: 20px; padding: 20px 0; position: absolute; bottom: 0; left: 0; text-align: center; right: 33px;}
#sliderWrapper footer nav {position: relative; display:inline-block;}
#sliderWrapper footer nav ul {list-style: none;}
#sliderWrapper footer nav li {width: 20px; height: 18px; margin: 0 4px; display: block; float: left; font-family: 'futura', Arial; font-size: 12px; line-height: 18px; color: #a5a5a5; font-weight: normal; cursor: pointer;}
#sliderWrapper footer nav li.active {background: #a5a5a5; color: white;}
#sliderWrapper footer nav .arrow {width: 7px; height: 14px; margin: 2px 0; position: absolute; background: url(../img/arrow.png) no-repeat 100%; cursor: pointer;}
#sliderWrapper footer nav .arrow.left {left:-20px; background-position: left;}
#sliderWrapper footer nav .arrow.right {right: -20px; background-position: right;}

/* CENTER CONTENT */
.centerContent {display: table; width: 75%; margin: auto;}
.centerContent a {color:#606060;}
.wrapperCenterContent {display: table-cell; vertical-align: middle; padding-right: 33px;}
.staffImg {width: 33%; float: left;}

.centerContent #staffTop {width: 100%; height: 28%; background-image: url(../img/fabio.jpg); background-size: cover; background-position: center center;}
.centerContent .box {width:25%; height: auto; float: left;}
#wrapperBio {margin-top: 20px; display: none;}
#wrapperBio p {margin-bottom: 20px;}
#wrapperBio a {font-size:13px; line-height: 20px; display:block;}
#about * {margin: 1em 0 1em 0;}

#info.centerContent {
	width:100%;
}

#info .wrapperCenterContent {
	width: 100%;
	vertical-align: top;
	padding-right: 0;
}

#map {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 500px;
	right: 0px;
}

#wrapperInfo {
	margin:30px 0 30px 105px;
}

#wrapperForm {
	width: 100%;
	max-height:500px;
	height: 500px;
	position: absolute;
	bottom: 0;
	left: 0;
}

#form {
	width: 650px;
	margin: auto;
}

#form label {
	width:90px;
	float: left;
	text-align: right;
}

#wrapperMessage {
	width:546px;
	margin-bottom: 10px;
	float: right;
}

#wrapperMessage p {
	display:inline;
}

#wrapperMessage #success, #wrapperMessage #error, #wrapperMessage #error2, #wrapperMessage #load {
	display: none;
}

#form input, #form textarea {
	width: 540px;
	float:right;
	padding: 2px;
	height: 20px;
	line-height: 20px;
	border: 1px solid #CCC;
}

.wrapperInput {
	margin-bottom: 10px;
}

#form textarea {
	height: 150px;
}

input#send {
	background: #a5a5a5;
	color: #fff;
	border:none;
	width: 150px;
	height: 30px;
	float: right;
	margin-bottom: 0;
}

#error, #error2 {
	color: #C00;
}


@media screen and (max-height:700px) {
	p, #wrapperBio a {font-size: 12px; line-height: 16px;}
	article .box h2 span {margin-top:0px;right:10px;}
}

@media screen and (min-width:1650px) {
	/*.centerContent {width:1200px;}*/
}

/* RESET CLASS */
.clear {clear: both;}
.noBR {border-right: 0 !important;}
.noMR {margin-right: 0 !important;}
.left {float:left;}
.right {float:right;}
.textRight {text-align: right;}

/* FONTS */
a, p, h1, h2, h3 {font-family: 'futura', Arial; text-decoration: none; color: #a5a5a5; font-weight: normal;}
a:hover {color: #606060; text-decoration: none;}