@import "cssreset.css";

/********PC E NOTEBOOK**************/
#toTop{z-index:1000; bottom: 30px; color: #e55759;  cursor: pointer; display: none;  padding: 5px;  position: fixed; right: 10px;  width: 59px; height:59px; }
#topo{ width:100%; border-top:2px #ec6224 solid; padding:5px;  }
#logo{ float:left; position:relative; width:245px; margin:5px;}
#menu{ float:left; position:relative; }
.nav{ margin:0 auto; position:relative; width:100%;}
#banner{ position:relative; max-width:990px; height:auto; margin-bottom:5px;}
#banner img{border:1px #DFDFDF solid; padding:2px;  border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; -o-border-radius:5px; -ms-border-radius:5px;}
.owl-pagination{ margin-top:-10px; z-index:1000!important}
.menu-mobile, .label-menu{ display:none}
#tel{ position:absolute; right:10px; top:5px; font-family: 'oswaldlight'; font-size:15px; color:#ffa000}
.link { float:left; margin:40px 5px 5px 55px; padding:5px; position:relative; text-align:center; font-family: 'oswaldlight'; color:#333; width:60px; font-size:15px; height:60px }
.link:hover{ border-bottom:2px #ffa104 solid; text-decoration:none}

.box, .box2{ float:left; position:relative; width:48%; padding:8px; min-height:150px; line-height:20px; text-align:justify; margin:5px;}
.box img{ float:left; width:210px; padding:2px; margin:5px; border:1px #ccc solid; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -o-border-radius:2px; -ms-border-radius:2px;}

.box2 img{ float:left; width:190px; padding:2px; margin:5px; border:1px #ccc solid; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -o-border-radius:2px; -ms-border-radius:2px;}

.btbox{ float:left; font-family: 'oswaldlight'; background:#1195df; color:#fff; padding:5px; text-align:center; width:100%; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; -o-border-radius:5px; -ms-border-radius:5px; font-size:17px; border:1px #DDD solid}
.btbox:hover{ background:#333; color:#fff; text-decoration:none; cursor:pointer}


.titulo{ float:left; width:100%; padding:5px; border-bottom:1px #ccc dashed; font-family: 'oswaldlight'; font-size:20px; color:#ffa000; text-transform:uppercase}
.titblue{font-family: 'oswaldlight'; font-size:15px; color:#005587}

#produtos{ float:left; width:100%; padding:5px; min-height:100px;}
#produtos img{ width:100%; margin:5px 0 5px 0;}

.prods{ width:135px; margin:5px 5px 5px 20px; padding:5px; float:left; font-family: 'oswaldlight'; font-size:15px; color:#333; text-align:center; border:1px #fff dashed;}
.prods:hover{ border:1px #ccc dashed; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -o-border-radius:2px; -ms-border-radius:2px;padding:5px;  }
.prods a:hover{color:#ffa415; text-decoration:none}

.product{ width:22%; margin:5px 5px 5px 20px; padding:5px; float:left; font-family: 'oswaldlight'; font-size:15px; color:#333; text-align:center; border:1px #fff dashed;}
.product:hover{ border:1px #ccc dashed; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -o-border-radius:2px; -ms-border-radius:2px;padding:5px;  }
.product a:hover{color:#ffa415; text-decoration:none}

.destaques{width:46%; min-height:200px; margin:10px; padding:5px; float:left; font-size:12px; color:#333;}
.destaques span{ text-transform:uppercase}
.destaques img{ float:left; margin:5px; width:200px; border:1px #ccc solid;  border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -o-border-radius:2px; -ms-border-radius:2px;}


#rodape{ background-color:#118ed6; width:100%; min-height:40px; padding:10px; min-height:40px; float:left; font-size:10px; color:#fff; text-align:center}

#conteudo{ width:100%; padding:2px; line-height:23px; font-size:13px;}
.foto-empresa{ width:350px; float:left; margin:10px; padding:2px; border:1px #ccc solid; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -o-border-radius:2px; -ms-border-radius:2px;}

#servicos{ width:100%; float:left; padding:10px;}
#servicos img{ width:250px; float:left; margin:5px; margin:10px; padding:2px; border:1px #ccc solid; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -o-border-radius:2px; -ms-border-radius:2px;}

.clientes{ float:left; width:100%; line-height:22px; border-bottom:1px #d5d5d9 dashed; padding:5px}
.clientes img{ float:left; margin:5px; width:200px; border:1px #d5d5d9 solid; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -o-border-radius:2px; -ms-border-radius:2px;}

.form{ float:left; width:46%; padding:5px; margin:5px;  font-family: 'oswaldlight'; font-size:15px;}

.form input[type="text"], input[type="email"], input[type="tel"]{ width:100%; -webkit-border-radius: 2px;-moz-border-radius: 2px; border-radius: 2px; background:transparent; color:#ababab; font-size:14px; border:1px #d5d5d9 dashed; width:100%; height:30px;}
.campos{ float:left; width:98%; margin:10px; position:relative}
.enviook{ margin:0 auto; position:relative; padding:10px; text-align:center; min-height:145px; font-size:20px; }

.form100{-webkit-border-radius: 2px;-moz-border-radius: 2px; border-radius: 2px; background:transparent; color:#ababab; font-size:14px; border:1px #d5d5d9 dashed; width:100%; height:30px;}
.boxmsg{-webkit-border-radius: 2px;-moz-border-radius: 2px; border-radius: 2px; background:transparent;  color:#ababab; font-size:14px; border:1px #d5d5d9 dashed; width:100%; height:120px;}

.serv{ float:left; position:relative; width:30%; margin:10px 10px 10px 20px; text-align:center; padding:10px; font-family: 'oswaldlight'; font-size:15px; color:#333; border:1px #fff dashed;}
.serv img{ border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -o-border-radius:2px; -ms-border-radius:2px;}
.serv:hover{border:1px #d5d5d9 dashed; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px; -o-border-radius:2px; -ms-border-radius:2px; }
.serv a:hover{color:#ffa415; text-decoration:none}

.back{ font-family: 'oswaldlight'; font-size:15px;  color:#ffa000; position:absolute; right:10px; top:10px;}






/***********Ipad*******************/
@media only screen and  (max-width: 800px) {
.link {margin:40px 0px 5px 18px;}
.box2 img{ width:180px;}
.prods{ width:95px;}
.serv{margin:10px 10px 10px 10px;}
.product{ width:28%;}
.destaques{ min-height:240px; margin-top:0;}
.destaques img{ width:155px;}
}

/**********MOBILE HORIZONTAL*************/
@media only screen and  (max-width: 640px) {
#logo{ width:180px; margin:25px 5px 5px 5px;}
.link {margin:40px 0px 5px 8px;}
.link:hover{ border:1px #fff dashed; text-decoration:none; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; -o-border-radius:5px; -ms-border-radius:5px;}
.box, .box2{ width:98%}
.box2 img{ width:210px;}
.prods{ width:27%;}
.destaques img{ width:100%;}
.destaques{ min-height:450px; }

}

/**********MOBILE HORIZONTAL*************/
@media only screen and  (max-width: 601px) {
#logo{ width:248px;}
#menu, .owl-pagination{ display:none}
.label-menu{ display:block;  position:relative; float:right; top:60px; right:20px}
.menu-mobile{ position:absolute; top:10px; left:5px;  width:70%; z-index:100; background:#575653; opacity:0.9; -webkit-opacity:0.9; -moz-opacity:0.9; -ms-opacity:0.9; -o-opacity:0.9;
border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; -o-border-radius:5px; -ms-border-radius:5px; padding:10px;}	
.link {margin:5px 16px 5px 40px; color:#fff}
.form{ width:97%; border-bottom:1px #ababab dashed}
.serv{margin:5px;}
.destaques{ min-height:430px; }
}

/**********MOBILE*************/
@media only screen and  (max-width: 480px) {
body{ font-size:14px}
.link {margin:20px 20px 5px 20px;}
.foto-empresa{ width:95%;}
#conteudo{ text-align:justify; padding:10px;}
#tel{ width:50%; text-align:right}
.product{ width:46%; margin:5px; min-height:270px}
.destaques{ margin:5px; min-height:365px;}


}

/**********MOBILE*************/
@media only screen and  (max-width: 385px) {
#logo{ width:200px;}
#banner{ display:none}
.menu-mobile{ width:62%; }
.label-menu{ top:50px; right:20px}
.link {margin:20px 10px 5px 10px;}
.box img, .box2 img{ width:98% }
.prods{ width:46%; margin:5px; min-height:220px;}
#servicos img{ width:290px; margin:0px;}
.clientes img{ width:97% }
.serv{margin:5px; width:96%}
.product{min-height:205px}
.destaques{ width:95%;}
.back{ display:none}

}