/*
 Project Name: Genial Móveis
 Theme Name: Default
 Author: Digisoft Informática
 URI: www.genialmoveis.com.br 

 Sumary:
 [ 1 - Commons ]
 [ 2 - Header ]
 [ 3 - Banner ]
 [ 4 - Footer ]
 [ 5 - Forms ]
*/


/*************************
 1- Commons
**************************/

a, a:hover {text-decoration: none;}

body {
	color: #000;
	font-family: 'Lato', sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 20px;
	margin: 0 auto;
	padding: 0px;
	text-align: left;
	top: 0px;
}

h1, h2, h3, h4, h5, h6 {font-family: 'Lato', sans-serif; font-weight: 300;}
h1 {color: #FFF; font-size: 3.75em;}

h2, h3 {font-size: 1.875em;}
h2 {color: #FFF; width: 820px;}
h3 {color: #333; display: block; line-height: 1.1; margin: 0px auto 30px; max-width: 900px; position: relative; text-align: center;}

p {color: #000; font-size: 1em;}
p.small {line-height: 1.3; margin: 0 auto; max-width: 750px; text-align: center;}

.bg-tex {background: url(../img/bg-body.png) center top repeat;}

/*a, a:hover, div, div:hover, span, span:hover, p, p:hover, img, img:hover, li, li:hover {-webkit-transition: all 1s ease;  -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease;}*/

.tcell {display: table-cell; vertical-align: middle;}
.tcell p.title {font-size: 1.875em; margin-bottom: 7px;}
.tcell p {font-size: 1.3em; line-height: 1.3em; text-align: center;}
.tcell .ad-mar-top {margin: 40px 0px 0px 0px;}

@media screen and (max-width: 1920px) {
	body {font-size: 20px; font-weight: 300; line-height: 24px;}
	p.small {max-width: 1300px;}
	h2 {width: 1200px;}
	h3 {max-width: 1200px;}
}
@media screen and (max-width: 1370px) {
	body {font-size: 16px; font-weight: 300; line-height: 21px;}
	p.small {max-width: 750px;}
	h2 {width: 820px;}
	h3 {max-width: 900px;}
}
@media screen and (max-width: 980px) {
	body {font-size: 18px; font-weight: 300; line-height: 24px;}
}


/*************************
 2- Header
**************************/


.container-header {display: table; height: 750px; position: relative; width: 100%;}
.container-header .tcell {vertical-align: top;}
.header-who {background: url(../img/header-who.jpg) top center no-repeat; background-size: cover;}
.header-contact {background: url(../img/header-contact.png) top center no-repeat; background-size: cover; height: 1000px;}
.header-contact h2 {max-width: 600px;}
.header-portifolio {background: url(../img/header-portifolio.jpg) center top no-repeat; background-size: cover; min-width: 980px;}

h1 {margin: 260px 0px 50px; position: relative; text-align: center;}
h2 {line-height: 1.1em; margin: 0px auto; position: relative; text-align: center;}

.arrow-header {
	background: transparent url(../img/arrow-header.png) 0px 0px no-repeat;	display: block; height: 29px; margin: 50px auto; text-align: center; width: 56px;	
	animation: 3s linear 0s normal none infinite fadeinoutbutton;
    -ms-animation: 3s linear 0s normal none infinite fadeinoutbutton; 
    -o-animation: 3s linear 0s normal none infinite fadeinoutbutton; 
	-webkit-animation-name: fadeinoutbutton;
	-webkit-animation-duration: 3s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-delay: 0s;
	-webkit-animation-iteration-count: infinite;
}

@-moz-keyframes fadeinoutbutton {0%{opacity: 0;} 50%{opacity: 1;} 100%{opacity: 0;}}
@-webkit-keyframes fadeinoutbutton{0%{opacity: 0;} 50%{opacity: 1;} 100%{opacity: 0;}}    
@-o-keyframes fadeinoutbutton{0%{opacity: 0;} 50%{opacity: 1;} 100%{opacity: 0;}}   
@-ms-keyframes fadeinoutbutton{0%{opacity: 0;} 50%{opacity: 1;} 100%{opacity: 0;}}


/* Menu */
.container-main-nav {background-color: transparent; height: 87px; left: 0px; position: fixed; top: 0px; width: 100%; z-index: 999;}

.container-main-nav .name-section {color: #FFF; font-size: 1.5em; float: right; margin: 33px;}

.logo-nav {background-image: url(../img/logo-nav.png); background-position: 0px 0px; float: left; height: 63px; margin: 13px 0px 0px 12px; position: relative; width: 321px;}

.btn {background-color: #ED1C35; cursor: pointer; height: 87px; width: 94px;}
#btn-fb, #btn-go {background-color: transparent; background-image: url(../img/px-btn.png); background-repeat: repeat; display: none; position: fixed; z-index: 999;}

.btn-main-nav {background: #ED1C35 url(../img/icon-main-nav.png) 21px 26px no-repeat; float: right; top: 0px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease;}
.btn-main-nav:hover {background-color: #E70A20;}

#btn-fb {top: 88px;}
/*#btn-fb span {background: transparent url(../img/icon-nav-fb.png) center no-repeat; display: table-cell; height: 29px; text-align: center; vertical-align: middle; width: 15px;}*/

#btn-go {top: 176px;}
/*#btn-go span {background: transparent url(../img/icon-nav-go.png) center no-repeat; display: table-cell; height: 28px; text-align: center; vertical-align: middle; width: 28px; top: 174px;}*/

#btn-fb i, #btn-go i {color: #FFF; display: table-cell; height: 29px; text-align: center; vertical-align: middle; width: 15px;}

ul#main-nav {/*display: none;*/ height: 353px; left: -500px; list-style: none; position: fixed; top: 0px; width: 229px; z-index: 999;}
#main-nav li {background-color: #ED1C35; display: table; height: 87px; margin: 0px 0px 1px 0px; width: 229px;-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease;}
#main-nav li:hover {background-color: #DC0A1A;/*#E70A20;*/}

#main-nav li a {color: #FFF; display: table-cell; font-size: 30px; text-align: center; text-decoration: none; vertical-align: middle;}


ul#nav-portifolio {height: 194px; left: -200px; list-style: none; opacity: 0; overflow: hidden; position: fixed; top: -200px; z-index: 999; width: 140px;}
ul#nav-portifolio li {background-color: #000; display: table; height: 38px; margin: 0px 0px 1px 46px; width: 140px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease;}
ul#nav-portifolio li:hover {background-color: #ED1C35; margin: 0px 0px 1px 0px; }
ul#nav-portifolio li a {color: #FFF; display: table-cell; font-size: 14px; padding-left: 10px; vertical-align: middle;}

/**/



/*************************
 3 - Content
**************************/

/*Home*/
#container-photos {background-color: #000; height: 0px; position: fixed; width: 1024px;}

#wrapper-logo {height: 440px; opacity: 0; position: absolute; width: 930px;}
#logo-home {background:url(../img/logo-home.png) center no-repeat; background-size: contain; height: 184px; margin-bottom: 80px; position: absolute; width: 100%;}
#wrapper-logo h1 {font-size: 1.875em; line-height: 1em; text-align: center;}
#wrapper-logo h1 span {color: #EC1B34;}

/*who*/
.box-p {display: table; height: 363px; width: 100%;}

.who-photos {height: 300px; list-style: none;}
.who-photos li {float: left; height: 300px; width: 33%;}
.who-photos li.st {background-image: url(../img/who-photo-1.jpg); background-size: cover;}
.who-photos li.nd {background-image: url(../img/who-photo-2.jpg); background-size: cover; width: 34% !important;}
.who-photos li.rd {background-image: url(../img/who-photo-3.jpg); background-size: cover;}
.link-port {min-height: 484px;}

.lnks-to-port {height: 242px; list-style: none; width: 100%;}
.lnks-to-port li {float: left; display: table; height: 192px; position: relative; width: 20%;}
.lnks-to-port li a > div {display: table; height: 192px; position: absolute; width: 100%;}
.lnks-to-port li div.color {background-color: #ED1C35; cursor: pointer; filter: alpha(opacity=90); opacity: 0.9; position: absolute; z-index:998; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease;}
.lnks-to-port li div.color:hover {filter: alpha(opacity=80); opacity: 0.8;}
.lnks-to-port li div.color .cnt {display: table-cell; height: 31px; text-align: center; vertical-align: middle; width: 100%;}
.cnt > div.genial {background: url(../img/icon-genial-port.png) 0px 0px no-repeat; display: inline-block; height: 31px; margin-right: 10px; vertical-align: top; width: 33px;}
.cnt > span {color: #FFF; display: inline-block; font-size: 1.2em; margin-top: 6px;}

.lnks-to-port li a > div.photo {background-size: cover !important; display: block; overflow: hidden;}
.lnks-to-port li a > div.photo img {height: 100%; width: 100%; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease;}
.lnks-to-port li a:hover > div.photo img {height: 103%; width: 103%;}

.lnks-to-port li.ad-mar-top {margin-top: 50px;}

a.lnks-to-port {display: block; height: 67px; margin: 0 auto; width: 307px;}
span.lnks-to-port {border: #ED1C35 1px solid; display: table; height: 65px; margin: 0 auto; margin-top: 85px; position: relative; width: 305px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease;}
span.lnks-to-port:hover {background-color: #ED1C35; cursor: pointer;}
span.lnks-to-port p {display: table-cell; text-align: center; vertical-align: middle;}
a:hover p {color: #FFF;}


/* contact */
.box-info-contact {background-image: url(../img/bg-red-contact.jpg); background-position: center top; background-size: cover; height: 600px;}
.box-info-contact p {color: #FFF;}

#map {background-color: #000; height: 500px; width: 100%;}


/* portifolio */
.container-content-portifolio {background: url(../img/bg-body.png) center top repeat; min-width: 980px; padding-bottom: 100px;	width: 100%;}
.container-content-portifolio .right {float: right !important;}

.container-section-portifolio {
/*	background: url(../img/bg-body.png) center top repeat;*/
	border-left: #D9041A 4px solid;	margin-bottom: 16px; min-height: 484px; max-width: 1128px; padding: 120px 0px 0px 47px;}

.title-section {float: left; height: 510px; margin: -120px 10px 10px 0px; /*vertical-align: top;*/ width: 272px;}
.title-section div {background-color: #D9041A ; display: table; height: 190px; width: 272px;}
.title-section div span {color: #FFF; display: table-cell; font-size: 1.5em; text-align: center; vertical-align: middle;}
.title-section p {margin: 20px 0px 0px 0px; padding: 5px;}


/* portifolio - effect on photo */
.box-photo-port {background-color: #CCC; float: left; height: 190px; margin: 0px 10px 10px 0px; overflow: hidden; width: 272px;}
.box-photo-port .over-shadow {background: transparent url(../img/over-shadow.png) 0px 0px no-repeat; height: 190px;  opacity: 0; filter: alpha(opacity=0); position: absolute; width: 272px;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease; 
	-o-transition: all 1s ease; 
	-ms-transition: all 1s ease; 
	transition: all 1s ease;
}
.box-photo-port img {height: 190px; width: 272px;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease; 
	-o-transition: all 1s ease; 
	-ms-transition: all 1s ease; 
	transition: all 1s ease;
}
.box-photo-port:hover img {height: 197px; width: 282px;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease; 
	-o-transition: all 1s ease; 
	-ms-transition: all 1s ease; 
	transition: all 1s ease;
}
.box-photo-port:hover .over-shadow {
	filter: alpha(opacity=90);
	opacity: 1;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease; 
	-o-transition: all 1s ease; 
	-ms-transition: all 1s ease; 
	transition: all 1s ease;
}
/*  */
#corporativos {min-height: 400px;}
#banheiros {min-height: 600px; /*3 linhas de imagens */}
#cozinhas {min-height: 1000px;}
#dormitorios {min-height: 1200px;}
#salas {min-height: 800px;}

@media screen and (max-width: 1200px) {
	.container-section-portifolio {max-width: 846px;}
	#corporativos {min-height: 600px;}
	#cozinhas {min-height: 1200px;}
	#dormitorios {min-height: 1600px;}
	#salas{min-height: 1000px;}
}





/*************************
 4 - Footer
**************************/

.box-msg-phone {background-image: url(../img/footer-phone.jpg); background-position: center center; background-size: cover; background-repeat: no-repeat; display: table; height: 450px; width: 100%;}
.box-msg-phone div {display: table-cell; vertical-align: middle;}
.box-msg-phone p {color: #FFF; font-size: 1.2em; line-height: 1.3em; text-align: center; text-shadow: 1px 1px #666;}
.msg-in-port {background: url(../img/footer-portifolio.jpg) center top no-repeat; background-size: cover; height: 250px;}

.box-msg-phone p:first-of-type {font-size: 1.875em; line-height: 2em; /*margin: 170px 0px 0px;*/}
#credits {background-color: #222; display: table; height: 73px; width: 100%;}
#credits p {color: #FFF; font-size: 0.9em; /*margin-top: 28px;*/text-align: center;}
#credits a {color: #666; font-size: 0.9em; font-style: italic; float: right; left: 800px; margin: 25px 20px 0px 0px; position: absolute;}

/*************************
 5 - Forms
**************************/

#f-contact {display: block; margin: 50px auto 0px; width: 637px;}

#f-contact input, #f-contact textarea {background-color: #111; border: 2px solid #ED1C35; border-radius: 0px; color: #FFF; display: block; font-size: 1.3em; font-family: 'Lato', sans-serif; font-weight: 300;	height: 50px; margin: 0px 0px 17px; padding: 0px 15px; width: 603px;}
#f-contact input.phone {width: 230px;}

#f-contact textarea{height: 105px; max-height: 105px; max-width: 603px; min-height: 105px; min-width: 603px; padding: 15px 15px;}

#f-contact button {background-color: #ED1C35; border: medium none;  border-radius: 0px; display: block; color: #FFF; font-size: 1.3em; font-family: 'Lato', sans-serif; font-weight: 300; height: 50px; margin: 0px auto; width: 637px; 
	-webkit-transition: all 1s ease;   
	-moz-transition: all 1s ease; 
	-o-transition: all 1s ease; 
	-ms-transition: all 1s ease; 
	transition: all 1s ease;
}
#f-contact button:hover {background-color: #D9041A; cursor: pointer;}

#f-contact input::-webkit-input-placeholder {color: #FFF;}
#f-contact input:-moz-placeholder {color: #FFF;}
#f-contact input::-moz-placeholder {color: #FFF;}
#f-contact input:-ms-input-placeholder {color: #FFF;}