@charset "UTF-8";

/*** 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: Arial; }
/* 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; } 

/*** basico ***/
body { background: url(../_img/bg.jpg) fixed; }

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

a       { text-decoration: none; color: #00477F; }
a:hover { text-decoration: none; color: #09F; }

p { font-size: 17px; 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; }
h4 { font-size: 18px; margin: 15px 0px; font-weight: 600; }

.primary    { color: #00477F; }
.secondary  { color: #AEBC21; }

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

.img_left { border-radius:19px; width: 26%; height: auto; padding: 1%; margin: 10px 20px 10px 0; background: #FFFFFF; float: left; }

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

.base { width: 90%; margin: 0px auto; display: table; }
section { width: 90%; max-width: 1360px; padding: 20px 5%; display: table; }
/*** basico ***/

/*** Social ***/
.social { position: fixed; width: 64px; height: auto; top: 240px; left: 0px; display: table; z-index: 9000; }
.social a { position: relative; width: 32px; height: 32px; margin: 2px 0; padding: 0; background: #00BFFF; display: block; box-shadow: 1px 1px 2px #000; border-radius:9px; }
.social a img { width: 20px; margin: 6px; float: right; }
.social a:hover { width: 64px; background: #003866; border-radius:9px; }
/*** Social ***/

/*** Header ***/
header { width: 100%; max-width: 1366px; margin: 0 auto; border-top: solid 9px #00BFFF; border-bottom: solid 1px #00BFFF; display: table; background: #FFF; }

header .topo { width: 90%; margin: 0 auto; display: table; }

header .topo .logo { width: 20%; float: left; }
header .topo .logo img { width: 100%; }

header .topo .info { width: 35%; float: right; }
header .topo .info h3 { text-align: center; font-size:18px; margin: 30px auto 0 auto; }

header .menu { width: 100%; background: linear-gradient(to bottom, #00BFFF, #0085B2); 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: 16px; font-weight: 600; margin: 10px 5px; padding: 10px; color: #FFFFFF; display: block; border-radius:7px; }
header .menu #menu ul li:hover a { background: #00BFFF; color: #FFFFFF; box-shadow: 1px 1px 2px #000; }
header .menu #menu ul li .ative { background: #00BFFF; box-shadow: 1px 1px 2px #000; border-radius:9px; }


header .menu #menu ul li ul { position: absolute; width: auto; display: none; background: rgba(0,56,102,.7); z-index: 5000; }
header .menu #menu ul li ul li { float: none; display: table; }
header .menu #menu ul li ul li a { font-size: 12px; font-weight: 100; width: 200px; margin: 1px 2px; padding: 5px 10px; display: block; }
header .menu #menu ul li:hover ul li:hover a { background: #00BFFF; color: #FFFFFF; }
header .menu #menu ul li:hover ul li .active { color: #00BFFF; }
header .menu #menu ul li:hover ul li a { background: none; }
header .menu #menu ul li:hover ul { display: table; animation: drop .5s; }
    

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

/*** Slider ***/
.banner { width: 100%; max-width: 1366px; margin: 0 auto; }
.banner img { width: 100%; }
/*** Slider ***/

/*** Center ***/
center { width: 100%; max-width: 1366px; margin: 0 auto; display: table; }

center .destaque        { width: 23%; margin: 1%; background: #FFFFFF; float: left; display: table; }
center .destaque img    { width: 100%; border-radius:9px; }
center .destaque p      { font-size: 14px; }
center .destaque .desc  { height: 50px; }

.servico { border-radius:19px; width: 43%; height: auto; padding: 1%; margin: 10px 20px 10px 0; background: #FFFFFF; float: left; }

center .galeria a { width: 11%; margin: .5%; float: left; }
center .galeria a img { width: 100%; border-radius:9px; }

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%; max-width: 1366px; padding: 30px 0 10px 0; margin: 0 auto;  display: table;
    background: #003866; border-top: solid 3px #00BFFF; border-bottom: solid 16px #00BFFF;
}
footer .left p { color: #FFFFFF; text-align: left; float:left; width: 65%; margin-top: 56px; }
footer .right p { color: #FFFFFF; text-align: center; float:right; width: 20%; margin-top: 56px; }
footer a { color: #FFFFFF;  }
/*** Footer ***/

/* Responsive */
@media only screen and (max-width: 1024px){
    
}

@media only screen and (max-width: 768px){
    h1 { font-size: 40px; margin: 15px 0px; font-weight: 600; }
    h2 { font-size: 20px; margin: 15px 0px; font-weight: 600; }
    h3 { font-size: 15px; margin: 15px 0px; font-weight: 600; }
    h4 { font-size: 10px; margin: 15px 0px; font-weight: 600; }
    
    center .contato left  { height: auto; }
    
    .img_left { width: 30%; padding: 1%; margin: 10px 20px 10px 0; }
	
	.servico { width: 99%; padding: 1%; margin: 10px 20px 10px 0; }
    
    .whatsapp { display: table; }
    
    /* Header */
    /* Topo */
    header .topo .logo { width: 50%; }
    header .topo .info { width: 50%; }
    /* Topo */
    /* Menu */
    header .menu { width: 100%; float: right; }
    header .menu #menu { position: fixed; width: 40%; height: 100%; padding: 0 5%; top: 0; left: 0; background: rgba(0, 5, 68, .9); display: none; }
    header .menu #menu ul { width: auto; float: left; margin: 25px auto; }
    header .menu #menu ul li { float: none; }
    header .menu #menu ul li a { padding: 25px 40px; margin: 10px; display: block; color: #FFFFFF; }
    header .menu #menu ul li:hover ul { display: none; }
    
    header .menu-mobile { display: block; }
    /* Menu */
    /* Header */
    /* Center */
    center .destaque { width: 45%; margin: 2.5%; }
    
    center .galeria a { width: 23%; margin: 1%; float: left; }
    /* Center */
    
}

@media only screen and (max-width: 500px){
	h1 { font-size: 20px; margin: 15px 0px; font-weight: 600; }
    h2 { font-size: 17px; margin: 15px 0px; font-weight: 600; }
    h3 { font-size: 15px; margin: 15px 0px; font-weight: 600; }
    h4 { font-size: 10px; margin: 15px 0px; font-weight: 600; }
	
    left  { width: 99%; padding: .5%; float: none; }
    right { width: 99%; padding: .5%; float: none; }
    
    .base { width: 80%; margin: 0px auto; display: table; }
    section { width: 80%; padding: 3px 10%; display: table; }
    
    .img_left { width: 45%; padding: 1%; margin: 10px 20px 10px 0; }
	
	.servico { width: 99%; padding: 1%; margin: 10px 20px 10px 0; }
	
    .social { top: 290px;}
    /* Header */
    /* Topo */
    header .topo .logo { width: 100%; }
    header .topo .info { width: 100%; }
    header .topo .info h3 { margin: 40px auto; }
    /* Topo */
	header .menu #menu ul li:hover ul { display: none; }
	
	.whatsapp { width: 60%; margin: 20px auto; display: table; }
    /* Header */
    /* Center */
    center .destaque { width: 95%; margin: 2.5%; }
    /* Center */
	footer .left p { text-align: center; float:left; width: 100%; }
    footer .right p { text-align: center; float:left; width: 100%; }
}
/* Responsive */