/*
** Desenvolvido por PortalG2. 
** http://mxmais.com.br 
*/

@charset "UTF-8";

/*** Corpo do Site ***/
header, center, footer { width: 90%; max-width: 1366px; margin: 0px auto; display: table; }
/*** Corpo do Site ***/

/*** Header ***/
header { position: fixed; max-width: 100%; padding: 0 5%; z-index: 500; background: rgba(0,0,0,.9); }

header .logo { width: 20%; float: left; }
header .logo img { width: 100%; margin: 5px 0; }

header .fone { width: 100%; text-align: right; }
header .fone p { font-size: 14px; margin: 10px 10px; color: #FFFFFF; }

header .menu { width: 80%; float: right; }
header .menu #menu ul { width: auto; float: right; list-style: none; display: table; }
header .menu #menu ul li { position: relative; float: left; display: table; }
header .menu #menu ul li a .icons { margin: 5px auto; display: none; }
header .menu #menu ul li a { font-size: 14px; font-weight: 0; padding: 15px 5px; margin: 1px 5px; color: #FFFFFF; display: block; }
header .menu #menu ul li:hover a { color: #28ABE1; background: url(http://toldosecoberturasfinotrato.com.br/_img/bg-menu.png) center no-repeat; }
header .menu #menu ul li ul { position: absolute; width: auto; display: none; background: #333333; }
header .menu #menu ul li ul li { float: none; display: table; }
header .menu #menu ul li ul li a { font-size: 15px; width: 170px; margin: 0px; padding: 15px; display: block; }
header .menu #menu ul li:hover ul li a { background: none; }
header .menu #menu ul li ul li a:hover { background: #28ABE1; color: #FFFFFF; }
header .menu #menu ul li:hover ul li a { border: 0px; }
header .menu #menu ul li:hover ul { display: table; }
header .menu #menu #close { position: absolute; top: 50px; right: 50px; z-index: 5000; display: none; }
header .menu #menu #close b { font-size: 20px; color: #FFFFFF; }
.link-servicos a { background: #64B1FF; padding:6px; border-radius: 5px; margin:3px; color:#000; font-size:17px; box-shadow: 1px 1px 1px #000; }
.link-servicos h4 { color:#000; }

.link-servicos a:hover { background: #09F; }
header .menu-responsivo { display: none; margin: 15px auto; }
.curtir-face {width:300px; height:300px; float:left; display:table; margin:30px 50px 30px 10px;}
.pagamento {width:300px; height:300px; float:left; display:table; margin:30px 50px 30px 10px;}
#zonas { display:none;}

/*** Header ***/
/*** slider ***/
/*** keyframes ***/
@-webkit-keyframes fading { 
    0% { opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes fading { 
    0% { opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; }
}
/*** keyframes ***/

/*** Whatsapp ***/
.whatsapp { 
    position: fixed; width: 64px; height: 64px; margin: 0; padding: 0px; 
     right: 30px; bottom: 30px; display: table; z-index: 10000; 
    box-shadow: 0 0 0 0px rgba(40,135,106,1); background: #28876A; border-radius: 100%;
    animation: pulse 1s; animation-iteration-count: infinite;
}
.whatsapp img { width: 60%; padding: 20%; }
/*** Whatsapp ***/
/* Keyframe Whatsapp*/
@keyframes pulse {
    from { box-shadow: 0 0 0 0px rgba(40,135,106,1); }
    to { box-shadow: 0 0 0 45px rgba(40,135,106,0); }
}

@-webkit-keyframes pulse {
    from { box-shadow: 0 0 0 0px rgba(40,135,106,1); }
    to { box-shadow: 0 0 0 45px rgba(40,135,106,0); }
}
/* Keyframe Whatsapp*/

.container_slider { position: relative; width: 100%; margin: 0px auto; background: #333333; }
.container_slider ul { list-style: none; }

.slider { width: 100%; -webkit-animation: fading 20s infinite; animation: fading 20s infinite; }
.slider img { width: 100%; height: auto; }

.curva { position: absolute; width: 100%; left: 0px; bottom: 0px; }

.caption { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; }
.caption h1, .caption h2, .caption a { text-align: center; color: #FFFFFF; }
.caption h1 { font-size: 32px; text-shadow: 3px 3px 3px #000000; background-color: rgba(0, 0, 0, .5); border-radius:6px; }
.caption h2 { font-size: 18px; text-shadow: 3px 3px 3px #000000; background-color: rgba(0, 0, 0, .5); border-radius:6px; }

.container_bullets { position: absolute; left: 50%; transform: translate(-50%,-150%); }
.bullets { display: inline-block; padding: 5px; text-align: center; border-radius: 50%; background: #CCCCCC; }
.bullets:hover { background: #28ABE1; cursor: pointer; }
.bullet_activated { background: #28ABE1; }

.prev { position: absolute; top: 70%; left: 45px; transform: translate(25%,-150%); }
.next { position: absolute; top: 70%; right: 45px; transform: translate(-25%,-150%); }

.button_floating { 
    font-size: 25px; 
    color: #FFFFFF; background: rgba(0, 0, 0, .9); 
    width: 40px; height: 40px; 
    line-height: 40px; 
    display: inline-block; 
    text-align: center; 
    overflow: hidden;
    cursor: pointer;
    border-radius: 100%;
}

.button_floating:hover { color: #28ABE1; background: #FFFFFF; }
/*** slider ***/
/*** banner ***/
.banner { width: 100%; height: auto; position: relative; margin: 0px auto; }
/*** banner ***/

/*** Center ***/
center { width: 100%; }

/*** index ***/
.destaque { width: 23%; margin: 1%; float: left; }
.destaque:hover a { color: #28ABE1; }
.destaque:hover img { opacity: .8; box-shadow: 3px 3px 5px #333; }
.destaque a { color: #000000; }
.destaque a img { width: 100%; border-radius: 10px; }

.destaque * { transition: all .5s; }
/*** index ***/

/*** toldos ***/
.destaque-servicos { width: 14%; margin: 1%; float: left; }
.destaque-servicos:hover a { color: #28ABE1; }
.destaque-servicos:hover img { opacity: .8; box-shadow: 3px 3px 5px #333; }
.destaque-servicos a { position: relative; color: #000000; }
.destaque-servicos a img { width: 100%; border-radius: 10px; }
.destaque-servicos a h4 { position: absolute; width: 100%; bottom: 0; text-align: center; background: rgba(0,0,0,.7); color: #FFFFFF; }

.destaque-servicos * { transition: all .5s; }
/*** toldos ***/

/*** mais informações ***/
.mais_info { width: 100%; background: #28ABE1; display: table; }
.mais_info section { margin: 0px auto; }
.mais_info .cont_left { width: 70%; margin: 15px 0px; float: left; } .mais_info p { font-size: 18px; color: #F3F3F3; text-align: left; }
.mais_info .cont_right { width: 30%; float: right; }

.bt { font-weight: 600; float: right; margin: 20px 0px; padding: 15px; border: solid 4px #F3F3F3; color: #F3F3F3; }
.bt:hover { background: #F3F3F3; color: #28ABE1; }
/*** mais informações ***/

/*** Contato ***/
.contato form { width: 100%; display: table; }

.contato label       { width: 20%; height: 25px; display: block; margin: 5px 0px; padding: 0px; float: left; text-align:left; }
.contato select      { width: 80%; height: 30px; display: block; margin: 5px 0px; padding: 0px; }
.contato input       { width: 80%; height: 30px; display: block; margin: 5px 0px; padding: 0px; border: solid 1px #CCCCCC; }
.contato textarea    { width: 80%; height: 90px; display: block; margin: 5px 0px; padding: 0px; border: solid 1px #CCCCCC; color: #28ABE1; }

.contato input:focus       { border: #28ABE1; }
.contato textarea:focus    { border: #28ABE1; }

.contato #bt { width: 150px; float: right; margin: 1.5%; }
/*** Contato ***/
/*** Center ***/

/*** Footer ***/
footer { position: relative; padding: 0 5%; background: #222; }
footer p { margin: 50px auto; color: #CCC; }

/*** Direitos Autorais ***/
.direitos-autorais { width: 100%; max-width: 1366px; margin: 0 auto; background: #1C6ED1; display: table; }
.direitos-autorais p { color: #FFFFFF; text-align: center; }
/*** Direitos Autorais ***/
/*** Footer ***/

/*** Responsive ***/
/* Tablet */
@media only screen and (max-width: 930px){
    /*** header ***/
    header .logo { width: 25%; }
    
    header .fone p { font-size: 13px; }
    
    header .menu { width: 75%; }
    header .menu #menu { position: fixed; width: 70%; height: 100%; padding: 0 15%; top: 0; left: 0; background: rgba(0,0,0,.9); display: none; }
    header .menu #menu ul { width: auto; float: left; margin: 25px auto; }
    header .menu #menu ul li { float: left; }
    header .menu #menu ul li a { padding: 15px 10px; margin: 10px; display: block; }
    header .menu #menu ul li a:hover { background: #28ABE1; color: #FFFFFF; }
    header .menu #menu ul li:hover ul { display: none; }
    
    header .menu-responsivo, header .menu #menu #close { display: block; }
    /*** header ***/
    
    /*** slider ***/
    .caption h1 { font-size: 26px; }
    .caption h2 { font-size: 12px; }
    .caption a  { font-size: 12px; padding: 10px; }
    
    .caption { position: absolute; left: 50%; top: 60%; transform: translate(-50%, -50%); text-align: center; }
    /*** slider ***/
        
    /*** center ***/
    center {  }
    
    /*** index ***/
    .destaque { width: 48%; margin: 1%; }
    /*** index ***/
    
    /*** Galeria ***/
    #galeria { width: 100%; display: table; }
    #galeria a { width: 18%; margin: 1%; float: left; display: block; }
    /*** Galeria ***/
    
    /*** contato ***/
    .contato label       { width: 50%; height: 25px; display: block; margin: 5px 0px; padding: 0px; float: left; }
    .contato input       { width: 50%; height: 30px; display: block; margin: 5px 0px; padding: 0px; }
    .contato select      { width: 50%; height: 30px; display: block; margin: 5px 0px; padding: 0px; }
    .contato textarea    { width: 50%; height: 70px; display: block; margin: 5px 0px; padding: 0px; } 
    /*** contato ***/
    
    .mais_info .cont_left { width: 100%; } 
    .mais_info p { text-align: center; }
    .mais_info .cont_right { width: 100%; display: table; }
    
    .bt { width: auto; float: none; display: inline-block; }
    /*** center ***/
    
    /*** footer ***/
    footer p { width: 100%; text-align: center; }
    /*** footer ***/
}

/* Celular */
@media only screen and (max-width: 640px){
    /*** header ***/
    header { position: relative; }
    
    header .logo { width: 100%; }
    
    header .fone p { text-align: center; }
    
    header .menu { width: 100%; }
    /*** header ***/
    h1 {font-size:17px;}
	h2 {font-size:17px;}
	.link-servicos a { width:90%; margin:5px 5px 20px 5px; float:left; display:table; text-align:center; }
    /*** slider ***/
    .caption { display: none; }
    /*** slider ***/
    
    /*** center ***/
    /*** index ***/
    .destaque { width: 98%; margin: 1%; }
    /*** index ***/
    /*** servicos ***/
    .destaque-servicos { width: 48%; }
    /*** servicos ***/
	.curtir-face {width:90%; height: auto; float:left; display:table; margin:3px;}
    .pagamento {width:90%; height: auto; float:left; display:table; margin:3px;}
    /*** center ***/
}
/*** Responsive ***/