@charset "UTF-8";

@font-face {
    font-family: regular;
    src: url('../_fonts/regular.ttf');
}

/*** keyframes ***/
@-webkit-keyframes fading { 
    0% { opacity: 0; }
    2% { opacity: 1; }
    98% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes fading { 
    0% { opacity: 0; }
    2% { opacity: 1; }
    98% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes drop {
    from { margin-top: -20px; opacity: 0; }
    to { margin: 0px; }
}

@-webkit-keyframes drop {
    from { margin-top: -20px; opacity: 0; }
    to { margin: 0px; }
}

@keyframes take {
    0%   { margin-bottom: -60px; opacity: 0; }
    30%  { opacity: 0; }
    100% { margin: 5px 0; }
}

@-webkit-keyframes take {
    0%   { margin-bottom: -60px; opacity: 0; }
    30%  { opacity: 0; }
    100% { margin: 5px 0; }
}
/*** keyframes ***/

/* Reset */
* { margin: 0; padding: 0; font-family: regular; }
/* Suavização dos movimentos */
* { transition: color .5s, opacity .5s, background .5s, border .5s, top .5s, left .5s, right .5s, width .5s, height .5s, margin .5s, transform .5s; } 

body { 
    background: url(../_img/bg-site.jpg) center; background-size: 100%;
}

left  { width: 48%; padding: 1%; float: left; display: block; }
right { width: 48%; padding: 1%; float: right; display: block; }

a { text-decoration: none; color: #CA0030; }
a:hover { color: #111111; }

p { font-size: 16px; margin: 10px 0px; }

list { font-size: 14px; display: block; }
list li {  }

h1 { font-size: 50px; margin: 15px 0px; font-weight: 600; }
h2 { font-size: 30px; margin: 15px 0px; font-weight: 600; }
h3 { font-size: 20px; margin: 15px 0px; font-weight: 600; }

.primary    { color: #01D0B4; }
.secondary  { color: #8D909A; }

.left       { text-align: left; }
.justify    { text-align: justify; }
.center     { text-align: center; }

.linha { 
    width: 100%; height: 5px; display: inline-block;
    background: linear-gradient(to right, #555, #EEE, #333, #EEE, #555); 
    border-top: solid 1px #111111; border-bottom: solid 1px #111111;
}

.img_all { width: 100%; }
.img_left { width: 20%; margin: 10px 25px 10px 0; float: left; }
.img_left-index { width: 20%; margin: 10px 25px 10px 15; float: left; }

.btmais { float: right; margin: 15px; font-weight: 900; }

.icon { width: 20px; height: 20px; margin-bottom: -3px; }

/*** up ***/
#up         { position: fixed; width: 36px; height: 36px; right: 10px; bottom: 10px; border-radius: 100%; background: rgba(0,0,0,.9); } 
#up:hover   { opacity: .7; cursor: pointer; }
#up img { width: 100%; }

#up, #up:hover { transition: opacity .5s; }
/*** up ***/

/*** Social ***/
.social { position: fixed; width: 64px; height: auto; top: 190px; left: 0px; display: table; z-index: 9000; }
.social a { position: relative; width: 32px; height: 32px; margin: 2px 0; padding: 0; background: #900; display: block; border-radius: 6px; }
.social a img { width: 20px; margin: 6px; float: right; }
.social a:hover { width: 64px; background: #666; }
/*** Social ***/

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

.base { width: 90%; margin: 0px auto; display: table; }
section { width: 90%; max-width: 1360px; padding: 30px 5%; display: table; }
/*** Corpo do Site ***/

/*** Header ***/
header { position: fixed; top: 0; display: table; z-index: 1000; background: url(../_img/bg-site.jpg) center; background-size: 100%; }

header .header { 
    width: 100%; display: table;
}

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

header .info { width: 76%; float: left; }
header .info h4 { font-size: 18px; margin: 35px auto; text-align: center; }

header .cert { width: 12%; float: left; }
header .cert img { width: 100%; margin: 10px 0; }

header .menu { width: 100%; float: left; background: url(../_img/bg-menu.jpg); display: table; }
header .menu #menu { z-index: 9000; }
header .menu #menu ul { width: auto; margin: 0px auto; list-style: none; display: table; }
header .menu #menu ul li { position: relative; float: left; display: table; }
header .menu #menu ul li a { 
    font-size: 18px; font-weight: bolder; font-weight: 0; margin: 0px; padding: 10px;
    color: #EEEEEE; text-shadow: 1px 1px 3px #333333; display: block; 
}
header .menu #menu ul li:hover a { background: #F51D2C; color: #FFFFFF; text-shadow: none; }

header .menu-mobile { display: none; margin: 0px 60px; float: right; }
/*** Header ***/

/*** Banners ***/
.banner { width: 100%; margin: 150px auto 0 auto; }
.banner img { width: 100%; }
/*** Banners ***/

/*** Center ***/
center { width: 100%; background: #FFFFFF; }

.whatsapp { width: 60%; margin: 50px auto; display: none; }
.whatsapp img { width: 100%; border-radius: 100px; }

center .destaque { width: 23%; padding: 1%; text-align: center; float: left; background: #FFFFFF; }
center .destaque img { width: 100%; }
center .destaque:hover { transform: scale(1.1); background: #D6D6D6; }
center .destaque h3 {  }
center .destaque p {  }

center .galeria img { width: 13%; margin: .5%; display: table; border-radius: 5px; float: left; }

center .contato { position: relative; }
center .contato left  { height: 340px; background: url(../_img/bg-contato.jpg) no-repeat; background-size: 100%; }
center .contato right {  }

center section .form { width: 100%; display: table; }
center section .form input { width: 100%; padding: 1%; }
center section .form textarea { width: 100%; padding: 1%; }
center section .form .button { width: auto; float: right; }
/*** Center ***/

/*** Footer ***/
footer { width: 100%; padding: 20px 0 0 0; background: ; color: #FFFFFF; }

footer .footer { width: 90%; padding: 10px 5%; background: #333333; display: table; }
footer .footer h1, footer .footer h2, footer .footer h3, footer .footer h4 { margin: 5px 0; }

footer .contleft    { width: 31.333%; margin: 1%; float: left; }

footer .contcenter  { width: 31.333%; margin: 1%; float: left; display: table; }
footer .contcenter p  { font-size: 20px; }
footer .contcenter .logo { width: 100%; height: 125px; margin-top: 25px; }
footer .contcenter .logo img { width: 60%; margin: 0px auto; display: block; }
footer .contcenter .logo img:hover { transform: scale(1.2) }

footer .contright   { width: 31.333%; margin: 1%; float: right; }

footer .footer .certificado { width: 100%; height: 250px; }
footer .footer .mapa { width: 100%; height: 250px; }

footer .base { margin: 20px auto; color: #000000; }
/*** Footer ***/

/*** Responsive ***/
@media only screen and (max-width: 930px){
    h1 { font-size: 32px; }
    h2 { font-size: 26px; }
    h3 { font-size: 20px; }
    h4 { font-size: 18px; }
    
    .img_left { width: 100%; margin: 20px 0; border-radius: 5px; float: left; }
    
    /* containers */
    .cont_2 { width: 98%; float: none; }
    .cont_3 { width: 98%; float: none; }
    
    /*** header ***/
    header { position: relative; }
    header .logo { width: 100%; }
    header .logo img { width: 100%; margin: 10px auto; }
    
    header .info { width: 100%; }
    header .info h4 { margin: 10px auto; }
    
    header .cert { float: left; width: 100%; }
    header .cert img { margin: 10px auto; }
    
    header .menu { width: 100%; margin: 0px; float: right; }
    header .menu #menu { position: fixed; width: 30%; height: 100%; padding: 0 10%; top: 0; left: 0; background: rgba(160, 160, 160, .9); display: none; }
    header .menu #menu ul { width: auto; float: left; margin: 0px auto; }
    header .menu #menu ul li { width: 100%; margin: 0; padding: 0; float: left; display: table; }
    header .menu #menu ul li a { width: 80%; padding: 15% 10%; text-align: center; margin: 0px; display: table; }
    header .menu #menu ul li a:hover { background: #CA0030; color: #FFFFFF; }
    header .menu #menu ul li:hover ul { animation: none; }
    
    header .menu-mobile { display: block; }
    /*** header ***/
    
    /*** Banner ***/
    .banner { margin: 0 auto; }
    /*** Banner ***/
    
    /*** center ***/
    center .destaque { width: 98%; padding: 5% 1%; }
    
    center .galeria img { width: 40%; margin: 5%; }
    
    center .contato left  { height: auto; }
    /*** center ***/
}
@media only screen and (max-width: 640px){
    left  { width: 99%; padding: .5%; float: none; }
    right { width: 99%; padding: .5%; float: none; }
    
    /*** header ***/

    /*** header ***/
    
    /*** center ***/
    section { width: 80%; padding: 40px 10%; }
    .whatsapp { display: table; }
    /*** center ***/
    
    /*** footer ***/
    footer .contleft    { width: 98%; margin: 10% 1%; float: inherit; text-align: center; }
    footer .contcenter  { width: 98%; margin: 10% 1%; float: inherit; text-align: center; }
    footer .contright   { width: 98%; margin: 10% 1%; float: inherit; text-align: center; }
    /*** footer ***/
}
@media only screen and (max-width: 540px){
    
}
/*** Responsive ***/