@import url('fckeditor.css');
/* General
----------------------------------------*/
html {height: 100%; background:#fff url('../images/tile_dark.png');}

.left {float: left}
.right {float: right}
.clear {clear: both;}

#loading{position: fixed; bottom: 10px; right:10px; color:#666; font-size: 11px; display: none}

header .nav_h li { display: inline-block; margin-left: 48px; position: relative;}
header .nav_h { position: fixed; bottom:40px; left:50%; margin-left: -590px; display: none; z-index: 999; display: none}
header .nav li { display: inline-block; margin-left: 24px}
header .nav { position: fixed; bottom:40px; right:40px; display: none; z-index: 9999}

.nav_h .goto {background: url('../images/menu-sprite.png') no-repeat; width: 90px; height: 91px; display: block; padding: 0;}
.nav_h .goto span {opacity: 0;position: absolute; top: 0; left: 0; bottom: 0; right: 0;	background: url('../images/menu-sprite.png') no-repeat;	-webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -o-transition: opacity 0.5s;}

.nav_h .m1 {background-position: 0px 0px} .nav_h .m1 span {background-position: 0px -93px;}
.nav_h .m2 {background-position: -91px 0px} .nav_h .m2 span  {background-position: -91px -93px}
.nav_h .m3 {background-position: -182px 0px} .nav_h .m3 span  {background-position: -182px -93px}
.nav_h .m4 {background-position: -273px 0px} .nav_h .m4 span  {background-position: -273px -93px}
.nav_h .m5 {background-position: -364px 0px} .nav_h .m5 span  {background-position: -364px -93px}
.nav_h .m6 {background-position: -455px 0px} .nav_h .m6 span {background-position: -455px -93px}
.nav_h .m7 {background-position: -546px 0px} .nav_h .m7 span  {background-position: -546px -93px}
.nav_h .m9 {background-position: -636px 0px} .nav_h .m9 span  {background-position: -636px -93px}
.nav_h .goto:hover span {opacity: 1;}

.nav .goto {background: url('../images/menu2-sprite.png') no-repeat; width: 51px; height: 51px; display: block; padding: 0}
.nav .m1 {background-position: 0px 0px} .nav .m1.active, .nav .m1 span {background-position: 0px -52px} 
.nav .m2 {background-position: -52px 0px} .nav .m2.active, .nav .m2 span {background-position: -52px -52px}
.nav .m3 {background-position: -104px 0px} .nav .m3.active, .nav .m3 span {background-position: -104px -52px}
.nav .m4 {background-position: -156px 0px} .nav .m4.active, .nav .m4 span {background-position: -156px -52px}
.nav .m5 {background-position: -208px 0px} .nav .m5.active, .nav .m5 span {background-position: -208px -52px}
.nav .m6 {background-position: -260px 0px} .nav .m6.active, .nav .m6 span {background-position: -260px -52px}
.nav .m7 {background-position: -312px 0px} .nav .m7.active, .nav .m7 span {background-position: -312px -52px}
.nav .m9 {background-position: -364px 0px} .nav .m9.active, .nav .m9 span {background-position: -364px -52px}


#content-target {min-height: 100%; clear:both; height:inherit; width:inherit;}
section {min-height: 100%; clear:both; height:inherit; width:inherit; position: relative; background: url('../images/tile_dark.png')}
section.preto { background: url('../images/tile_light.png')}
section.azul {background-color: #1c1e3c;}
section.branco {background-color: #fff;}
section.laranja {background-color: #e75012;}
section.rosa {background-color: #f068b8;}
section.creme {background-color: #f38630;}

.cont {position: absolute; top:50%; margin-top:-260px; left: 50%; margin-left:-600px;width: 1200px; height: 450px; z-index: 2;}

#logo {width:500px; top:12%; left:50%; margin-left:-250px; position: fixed; z-index: 999}
#logo-peq a{width:180px; height:153px; background: url('../images/logo-mestredacor-peq.png');right: 40px; top: 20px; position: fixed; z-index: 999}
.intross {left:0; top:0; position: fixed; z-index: 900}

.resizable img{ width: 100%; height: 100%;}
#bg{ top:0; left:0; right:0; bottom: 0; width:100%; height:100%; overflow:hidden; background: #fff;}
.fixed {position: fixed;}

div.object {width:1280px; height:720px;}
div.object object{display:block;}

ul.dots li {padding-left: 20px; background: url('../images/dot.png') left 7px no-repeat; margin: 8px 0;}

.preto a{color:#e75012;}
.azul a{color:#f068b8;}

.icon {cursor: pointer;}

.nav-dot {position: fixed; right:15px; top:40%; z-index: 99999}
.nav-dot li a{background: url('../images/nav-dot.png')no-repeat; margin: 8px 0; width:15px;height: 15px; display: block; opacity: 0.4}

/*.icon {
	cursor: pointer;
	-webkit-transform: scale(.95);
	-moz-transform: scale(.95);
	-o-transform: scale(.95);
	-ms-transform: scale(.95);
	transform: scale(.9);
	-webkit-transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
	-o-transition: all 0.1s ease-in-out;
	-ms-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;

}
.icon:hover{
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}*/
.tpeq {font-size: 12px;}

/* Home - campanha
----------------------------------------*/
.campanha {min-height: 100%; clear:both; height:inherit; width:inherit; background: #1c1e3c; position: absolute; right: 0; left: 0; top:0; z-index: 1000; bottom: 0}
.down {width: 63px; height: 34px; background: url('../images/down.png'); position: absolute; bottom: 0; left: 50%; margin-left:-30px; display: block; z-index: 9999; cursor: pointer;}

/* Empresa
----------------------------------------*/
.mascote-empresa {position:fixed; bottom:-5px; left:0; z-index: 1}
.mascote-empresa2 {position:fixed; bottom:-5px; left:0; z-index: 1}
.mascote-empresa3 {position:absolute; bottom:-5px; left:0; z-index: 1}

.empresa {float:right; margin-right: 20px; width:530px; color:#26264a;}
.box_left {width:528px; float:left;}

.empresa .valores li {margin: 20px 0}

.empresa .sinonimo li {float: left; margin-right: 70px; margin-top: 50px}
.empresa .sinonimo li.last {margin-right: 0}
.empresa h3 {font-family: 'Open Sans', sans-serif; font-size:16px;color:#26264a; margin-top: 15px; text-align: center; text-transform: uppercase;}

.empresa-solidario {float: right; width:725px;}
.empresa-solidario img {margin-right: 20px; padding-bottom: 20px}
.empresa-solidario a {color:#26264a;}

/* CAROUSEL */
#carousel_historia {width: 570px; height: 400px; display: block; position: relative;}
#carousel_historia li {width:570px; height:400px; float: left; display: block; margin:10px 100px 10px 0; position: relative; text-align: justify;}
#carousel_historia li h2 {margin-bottom: 30px}

#prev {width:94px; height:94px; display:block; cursor:pointer; position: absolute; bottom:-60px; left:0;  background: url('../images/arrows_slide.png') 0px 0 no-repeat;}
#prev:active {opacity:0.5}

#next {width:94px; height:94px; display:block; cursor:pointer; position: absolute; bottom:-60px; left:138px; background: url('../images/arrows_slide.png') -94px 0px no-repeat;}
#next:active {opacity:0.5}

#prev.disabled, #next.disabled {opacity: 0.5; cursor: default;}

/* Marcas
----------------------------------------*/
.branco h1, .branco h2, .branco .cont {color: #26264a}
.block_marcas {width: 325px; float: left;}
.marcas {float: right; width:696px;}
.marcas a {color:#26264a;}

/* Clientes
----------------------------------------*/
.clientes {float: right; width:696px;}

/* Mestre Cor
----------------------------------------*/
.mestredecor h1 {color:#1c1e3c; font-size:20px; margin-bottom:20px;text-align: center;}
.mestredecor h2 {color:#1c1e3c; font-size: 33px; text-align: center;}
.mestredecor ul {text-align: center;}
.mestredecor li {float: left; width:200px; margin: 20px 15px 0 0; text-align: center; }
.mestredecor li.last {margin-right: 0}
.mestredecor li img {margin-top: 40px;}
.mestredecor #links {display: none}
.mestredecor #links a{display: block; color: #1c1e3c; text-decoration: none; margin: 20px 0; padding: 4px 8px;}
.mestredecor #links a:hover {color: #363964}

.mestredecor-left {float: right; width:696px;}

/* FORMS
----------------------------------------*/
.forms .row {width:100%; float:left;} .forms .row input[type="text"]{width:400px;}
.forms .col_1{width:275px; float:left;} .forms .col_1 input[type="text"]{width:140px;}
.forms .col_2{width:254px; float:left; } .forms .col_2 input[type="text"]{width:124px;}

.forms label{float:left; width:120px; font-size: 14px; margin-top: 3px}
.forms input[type="text"], .forms select, .forms textarea {font-family: 'Open Sans', sans-serif; border:none; font-size: 11px; margin-bottom: 10px; display: block; padding:4px; background:#ffffff; border:0px solid #000; float:left}
.forms select {font-style:italic; color:#666666}
.forms textarea {height:100px; overflow:auto; width:99%}
.forms input[type="submit"], .forms input[type="submit"]:hover {width:77px; height:26px; float:right; border:none; cursor:pointer; }

.enviar_btn{padding:5px 8px; background: #fa4700;  cursor:pointer; clear: both; display: block; float: right; border:0; color: #fff}
.enviar_btn:hover{background:#1a1a1a; color: #fff}

.forms input.error {background: #f9e3de url('../images/alert.png') right -1px no-repeat; border:1px solid #be0000}
.forms label.error{display: none !important}

.msgLoading {background:url(../images/loader.gif) no-repeat center; width:100%; height:350px; margin:0 auto}	
.formSuccess {background:url(../images/success_icon.png) no-repeat center; width:100%; height:180px; text-align:center; font-size:13px; padding-top:70px; line-height:24px; margin:0 auto}
.formErro {background:url(../images/error_icon.png) no-repeat center; width:100%; height:180px; text-align:center; padding-top:70px; font-size:13px; line-height:24px; margin:0 auto}


/* Serviços
----------------------------------------*/
.servicos li {float: left; margin: 20px 30px 0 0; text-align: center; cursor: pointer; padding: 10px;}
.servicos li:hover .icon {opacity: 0.7}
.servicos li h1 {font-size: 20px;margin-bottom: 15px;}
.servicos li h2 {font-size:33px;}
.servicos li.last {margin-right: 0}
.servicos li>div {width: 355px; margin-top: 20px; text-align: justify; font-size: 15px; height: 180px;}
.servicos li img {margin-top: 20px}

.servico-overlay {position: fixed;display: none; width: 100%;height: 100%; top: 0; left: 0; right:0; bottom:0; z-index: 1000;background: rgba(35,35,71,0.95) url('../images/tile_dark.png'); }
.servico-overlay-text {display: none; position: absolute; width: 100%;height: 100%;z-index: 1001; top: 0; left: 0; }
.servico {color: #fff;	margin: 40px auto;width: 1200px}
.close {position: fixed; right:20px;top:20px; background: url(../images/icon-close.png); width:53px; height:53px;;z-index: 1002;}
.icon-tit {margin-right: 30px; margin-top: 10px; float: left}
.fundo-entregas{position:absolute; top:0; left:0; right:0; bottom: 0; overflow: hidden;}
.seeh {clear: both; margin-top: 40px; float: left;}
.seeh h1 {font-size: 24px; margin-right: 40px; float: left;}
.seeh img {float: left; max-width: 100%}
.linha-cliente {float: right; margin-top: -140px; width: 315px; }
.linha-cliente p{margin-bottom: 20px}

.orcamento {top: 350px}
.orcamento_form {margin-top: 20px; display: table}
.orcamento_form .info { position: absolute; left: -60px}
.orcamento_form .info .left{width:24px;}
.orcamento_form .info .right{width:90%; margin-top: 40px}

.orcamento_form .colLeft {float:left; width:45%; font-size: 14px; position: relative}
.orcamento_form .colRight {float: right; width:45%;  position: relative}
.orcamento_form h3 {font-family: 'Open Sans', sans-serif; font-size:20px;color:#fff;font-weight: 300; margin-top: 30px}
.orcamento_form .area li{margin: 15px 10px; text-align: left;  width: 270px;}
.orcamento_form .area label {margin-left: 8px; float: right; width: 240px;}
.orcamento_form .area input {margin-top: 4px;}

.orcamento_form .divAreas>div {display: none;}
.orcamento_form .int-ext{float: left; width:100%;}
.orcamento_form .int-ext li{float: left; width: 235px}
.orcamento_form .int-ext li:first-child{margin-right: 65px}
.orcamento_form .int-ext li h3{margin-bottom: 20px}
.orcamento_form .int-ext li .row2 {float:left;}
.orcamento_form .int-ext li .row2 label{width: 100px}
.orcamento_form .int-ext li .row2 input{width: 80px}
.orcamento_form .metros {font-size: 10px; margin-left: 3px;}

.orcamento_form .preferencia li{display: block}
.orcamento_form .preferencia li{margin: 15px 10px; text-align: left; width:152px;}
.orcamento_form .preferencia label {padding-left: 8px; float: right;}
.orcamento_form .preferencia-outras li {width: 350px; padding-left: 10px}
.orcamento_form .preferencia-outras li.outras-txt input {width: 340px; margin-top: 10px; margin-left: 2px; display: none}
.orcamento_form .preferencia-outras label {float: right; width: 320px; font-size: 12px}
.orcamento_form .fotos {font-size: 12px; margin: 10px 0;}

input.file, textarea {border:0;
	padding: 3px;
	font-size: 12px;
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: #777;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px; margin-right: 6px}

.orcamento_form .send {clear:both; float:left; width:100%; text-align: center; margin: 50px 0 30px}

/* Franchising
----------------------------------------*/
.franchising {float:left; margin-right: 20px; width:530px;}
.formfranchising_right {float: right; margin-top: 256px}
.formfranchising_right textarea {width:406px !important; height: 180px !important}

/* Contactos
----------------------------------------*/
.up {width: 63px; height: 34px; background: url('../images/up.png'); position: absolute; top: 0; left: 50%; margin-left:-30px; display: block; z-index: 9999; cursor: pointer;}


.fundo-left{position:absolute; top:0; left:0; right:0; bottom: 0}
.fundo-left img {height: 100%; display: none;}

.fundo-right{position:absolute; top:0; left:30%; right:0; bottom: 0;overflow: hidden;}
.fundo-right img {height: 100%; float: right; width: 100%}

.contactos {float: right; color:#1c1e3c;}
.contactos a{text-decoration: none}
.contactos h2 {color:#1c1e3c;}
.contactos h2 span{display: block;font-size:40px; font-weight: 300;text-transform: none;margin-bottom: -5px; color:#1c1e3c;}
.contactus {background: url('../images/icon-mail.png'); width:51px; height: 51px; display: block; margin: 30px 0 0 30px}

.vermapa {position: absolute; right: 0; top:150px;}
.vergaleria {position: absolute; right:180px; top:330px; border-radius: 50%; width: 190px; height: 190px;cursor: pointer;
	box-shadow:
	inset 0 0 0 0 rgba(200,95,66, 0.4),
	inset 0 0 0 5px rgba(255,255,255,0.05),
	0 1px 2px rgba(0,0,0,0.1);

	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;

	border : 5px solid #00AEEF;
	transition : border 500ms ease-out; 
	-webkit-transition : border 500ms ease-out; 
	-moz-transition : border 500ms ease-out;
	-o-transition : border 500ms ease-out;   

}
.vergaleria:hover {border : 5px solid #EC008C;}

/* CAROUSEL - LOJAS */
#carousel_lojas {width: 570px; height: 800px; display: block; position: relative;}
#carousel_lojas li {width:570px; height:800px; float: left; display: block; margin:10px 0; position: relative;}
#carousel_lojas h2 {line-height: 60px; margin-bottom: 15px; font-size: 60px;}

#prev_loja {width:94px; height:94px; display:block; cursor:pointer; position: absolute; bottom:-120px; right:423px;  background: url('../images/arrows_slide.png') 0px 0 no-repeat;}
#prev_loja:active {opacity:0.5}

#next_loja {width:94px; height:94px; display:block; cursor:pointer; position: absolute; bottom:-120px; right:5px; background: url('../images/arrows_slide.png') -94px 0px no-repeat;}
#next_loja:active {opacity:0.5}



/* Media Queries
-------------------------------------------------------------- */
@media screen and (max-width: 1360px) {
	.clientes {float: right; width:600px; margin-top:100px; margin-right:20px;}
	.mascote-empresa2 img{width: 70%;}
	.marcas {width:600px; margin-top: 80px}
	.empresa-solidario {width:725px; margin-top: 80px; float:right;}
	.mestredecor-left {margin-top:70px;}
	.mestredecor li img {width: 110px}
	.empresa {margin-top:110px;}
	#lojas.ch-grid {float: left; margin-top:65px;}
	#prev {bottom: 0;}
	#next {bottom: 0;}

}
@media screen and (max-width: 1050px) {
	.cont {left: 50%; margin-left:-475px; width:950px;z-index: 2;}
	.mascote-empresa img{width: 60%; margin-left: 0px; margin-top: 0px}
	.mascote-empresa2 img{width: 60%; margin-left: 0px; margin-top: 0px}
	.mestrinho {width: 500px}
	.mestrinho img{width: 100%; margin-top: 50px}
	.box_left h1{font-size: 30px}
	.box_left h2{font-size: 60px}
	
	header .nav_h li {margin-left:20px;}
	header .nav_h {bottom: 30px;margin-left: -460px;}

	.mestredecor li h1{margin-top: 60px}
	.mestredecor li img {width: 110px}

	.block_marcas {width:290px;}
	.marcas {width:600px; margin-top: 90px; margin-right: 20px; }
	.empresa-solidario {width:670px; margin-top: 30px; margin-right:40px;}
	.mestredecor-left {width:600px; margin-top: 30px}

	.servicos {margin-top:65px;}
	.servicos li>div {width: 265px; margin-top: 20px; text-align: justify; font-size: 15px; height: 180px;}
	.icon-tit {margin-right: -10px}
	.seeh {width: 600px}
	.seeh img {width: 80%}
	.orcamento_form .info {top:60px;}

	.forms .franchising {width: 450px;}
	.forms .franchising label {width:110px;}
	.forms .row {width:100%; float:left;} .forms .row input[type="text"]{width:332px;}
	.forms .col_1{width:250px; float:left;} .forms .col_1 input[type="text"]{width:120px;}
	.forms .col_2{width:200px; float:left;} .forms .col_2 input[type="text"]{width:82px;}
	.formfranchising_right {margin-top: 214px;}
	.formfranchising_right textarea {width:306px !important;}

	#lojas.ch-grid {float: left; margin-top:65px; width: 700px;}
	#lojas.ch-grid li {margin:5px;}
	#carousel_lojas h2 {font-size: 40px;}
}


@media screen and (max-height: 768px){
	h1{font-size: 33px; margin-bottom: 6px}
	h2{font-size: 63px}
	.marcas img{width: 500px; height: 202px; margin-top:60px;}
	.marcas {font-size:14px;}
	.mestredecor li {width: 180px;}
	.mestredecor li img {width: 80px}

	.box_left {font-size: 14px}

	.icon-tit img{width: 80%}

	.formfranchising_right {margin-top: 214px;}
	.vermapa {top: 120px; right:-23px;}
	.vermapa img{width: 90%;}
	.vergaleria {width: 150px; height: 150px; top:290px; right:150px;}

	#next_loja { bottom:0px; right:5px;}
}
@media screen and (max-width: 830px){

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

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

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

}