@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: #111111; }

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: #AEBC21; }

p { font-size: 17px; margin: 10px 0px; color: #EEEEEE; }

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

h1 { font-size: 50px; margin: 15px 0px; font-weight: 600; color: #EEEEEE; }
h2 { font-size: 30px; margin: 15px 0px; font-weight: 600; color: #EEEEEE; }
h3 { font-size: 20px; margin: 15px 0px; font-weight: 600; color: #EEEEEE; }
h4 { font-size: 18px; margin: 15px 0px; font-weight: 600; color: #EEEEEE; }

.primary    { color: #005E9B; }
.secondary  { color: #333333; }

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

.div_20 { width: 20%; float: left; }
.div_30 { width: 30%; float: left; }
.div_70 { width: 70%; float: left; }

.img_left { width: 25%; height: auto; padding: 0px; margin: 10px 20px 10px 0; background: #EEEEEE; box-shadow: 2px 2px 5px #000; float: left; border-radius:9px; }

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

.whatsapp-c { width: 50%; margin: 50px 3px; display: table; }
.whatsapp-c img { width: 100%; border-radius: 100px; }

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

/*** Social ***/
.social { position: fixed; width: 50px; height: auto; top: 350px; left: 0px; display: table; z-index: 90000; }
.social a { position: relative; width: 32px; height: 32px; margin: 2px 0; padding: 0; background: rgba(238,238,238,.9); display: block; border-radius:9px;
 box-shadow:2px 3px 2px #000000; }
.social a img { width: 20px; margin: 6px; float: right; }
.social a:hover { width: 50px; background: #005E9B; }
/*** Social ***/

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

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

/*** body ***/
header, destaques, center, footer {  }
/*** body ***/

/*** header ***/
header { position: fixed; width: 90%; padding: 0px 5%; top: 0; left: 0; background: rgba(0,0,0,.55); z-index: 9000; display: inline-block; }

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

header .info { width: 21%; color: #FFFFFF;  margin: 0px 5px; float: right; }
header .info p { font-size: 16px; padding: 10px 10px 10px 50px; color: #FFFFFF; }
header .menu .info p img { width: 16px; height: 16px; margin-bottom: -2px; }

header .menu { width: 55%; float: Left; }
header .menu #menu { z-index: 9000; }
header .menu #menu ul { width: auto; margin: 15px 0px; float: right; list-style: none; display: table; }
header .menu #menu ul li { position: relative; float: left; display: table; }
header .menu #menu ul li a { 
    font-size: 13px; margin: 10px 5px; padding: 5px; color: #FFFFFF; border: solid 2px rgba(0,0,0,0); display: block;
}
header .menu #menu ul li:hover a { background: ; color: #005E9B; border: solid 2px #005E9B; border-radius:9px; }
header .menu #menu ul li .ative { background: ; color: #005E9B; border: solid 2px #005E9B; border-radius:9px; }

header #menu-mb { display: none; }
header .menu-mobile { display: none; margin: 15px auto; }
/*** header ***/

/*** banner ***/
.banner { position: relative; width: 100%; }
.banner img { width: 100%; }
.banner h1 { position: absolute; color: #FFFFFF; left: 5%; bottom: 25px; }
/*** banner ***/

/*** bg ***/
.bg { position: relative; width: 100%; height: 100%; }
.bg img { width: 100%; height: 100%; }
.bg .container { position: absolute; width: 50%; left: 50%; margin-left: -25%; bottom: 10%; z-index: 1000; text-align: center; }
.bg .container h1 { font-size: 50px; color: #005E9B; text-shadow: 2px 2px 5px #000; }
.bg .container h2 { font-size: 20px; color: #FFFFFF; text-shadow: 2px 2px 5px #000; }
/*** bg ***/

/*** center ***/
center .eventos               { width: 25%; height: auto; padding: 1px; margin: 10px 20px 10px 0; background: #EEEEEE; box-shadow: 2px 2px 5px #000; float: left; }
center .eventos img           { width: 100%; }
center .eventos .titulo       { font-size: 16px; color: #000; text-align: center; margin: 15px 5px 5px 5px; }
center .eventos .subtitulo    { font-size: 12px; color: #000; text-align: center; margin: 5px; }

center .clips               { width: 23%; margin: .5%; padding: 1px; background: #EEE; box-shadow: 2px 2px 3px #000; float: left; }
center .clips .video        { width: 100%; height: 200px; background: #333; }
center .clips .titulo       { font-size: 14px; color: #000; text-align: center; margin: 15px 5px 5px 5px; }
center .clips .subtitulo    { font-size: 17px; color: #000; text-align: center; margin: 5px; }
/*** center ***/

center {  }
center .destaque { width: 25%; margin: 25px 0px; float: left; }
center .destaque a { color: #000000; }
center .destaque a:hover { opacity: .7; }
center .destaque a img { width: 90%; margin: 5px 5%; border-radius: 15px; }
center .destaque a h3 { width: 90%; margin: 5px 5%; font-size: 18px; }
center .destaque a p { width: 90%; margin: 5px 5%; font-size: 12px; }

/*** Biografico ***/
.img_biografia { width: 90%; margin: 10px 5%; border-radius: 15px; }
/*** Biografico ***/

.mais_infomracoes { width: 100%; color: #FFFFFF; background: url(../_img/fundo-informacoes.png) fixed; background-size: 100%; border-radius: 15px; display: table; }
.mais_infomracoes p { width: 73%; margin: 3%; float: left; font-size:21px; }
.mais_infomracoes a { margin: .5%; padding: 2.5%; float: right; background: #b0b0b0; border-radius: 15px; color: #222222; }
.mais_infomracoes a:hover { opacity: .7; }

center .contato { width: 45%; margin: 25px 0px; float: left; }


/*** Footer ***/
footer { width: 100%; background: #333333; color: #FFFFFF; text-align: center; display: inline-block; }
footer p { padding: 10px; }
/*** Footer ***/

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

@media only screen and (max-width: 768px){
    .img_left { width: 48%; padding: 1%; margin: 10px 20px 10px 0; }
    /* Header */
    header { position: relative; width: 90%; padding: 5px 5%; top: inherit; left: inherit; background: rgba(35,39,56,1); z-index: 9000; }
    
    header .logo { width: 50%; margin: 0 25%; }
    
    header .menu .info p { margin: 10px 5px; text-align: center; }

    header .menu { width: 100%; float: inherit; }
    header .menu #menu { display: none; }
    header .menu #menu { 
        position: fixed; width: 30%; height: 100%; padding: 0 5%; top: 0; left: 0; background: rgba(30, 30, 30, .95); display: none; 
    }
    header .menu #menu ul { width: 100%; float: left; list-style: none; margin: 25px auto; }
    header .menu #menu ul li { width: 100%; float: none; }
    header .menu #menu ul li a { 
        width: 70%; padding: 5%; margin: 10px auto; text-align: center; color: #FFFFFF; display: table;
        font-size: 16px; color: #FFFFFF; border: solid 2px rgba(0,0,0,0);
    }
    header .menu #menu ul li a:hover {  } 
    header .menu #menu ul li:hover ul { display: none; }
    
    header .menu-mobile { display: block; }
    /* Header */
    
    /*** bg ***/
    .bg { position: relative; width: 100%; height: auto; }
    .bg img { width: 100%; height: auto; }
    .bg .container { position: relative; width: 100%; left: inherit; margin-left: inherit; bottom: inherit; text-align: center; }
    .bg .container h1 { font-size: 50px; color: #005E9B; text-shadow: 2px 2px 5px #000; }
    .bg .container h2 { font-size: 20px; color: #FFFFFF; text-shadow: 2px 2px 5px #000; }
    /*** bg ***/
}

@media only screen and (max-width: 500px){
	 h1 { font-size: 30px; margin: 15px 30%; text-align:center; }
     h2 { font-size: 20px; margin: 15px 30%; text-align:center; }
	
    left  { width: 99%; padding: .5%; float: none; }
    right { width: 99%; padding: .5%; float: none; }
    
    .justify    { text-align: center; }
    .left       { text-align: center; }
    .center     { text-align: center; }
    .right      { text-align: center; }
	
	.div_20 { width: 95%; float: left; margin: 25px 0px; }
    .div_30 { width: 95%; float: left; margin: 25px 0px; }
    .div_70 { width: 95%; float: left; margin: 25px 20px; }
    
	 header .logo { width: 99%; float: left; margin:0; padding:0; }
     header .logo img { width: 100%; }
	
	 header .info { width: 91%; color: #FFFFFF;  margin: 0px auto; display: table; }
	
	.whatsapp { width: 60%; margin: 50px auto; display: table; }
    .whatsapp img { width: 100%; border-radius: 100px; }
	
    .base { width: 90%; margin: 0px auto; display: table; }
    section { width: 90%; padding: 40px 5%; display: table; }
    
	center .destaque { width: 95%; margin: 25px 0px; float: left; font-size:15px; }
	center .destaque a p { font-size:17px; }
	
    .img_left { width: 98%; padding: 1%; }
    
    center .clips { width: 96%; margin: 1%; padding: 1%; background: #EEE; box-shadow: 2px 2px 3px #000; float: left; }
    
    center .eventos { width: 96%; padding: 1%; margin: 20px 1%; background: #EEE; box-shadow: 2px 2px 5px #000; float: left; }
	.mais_infomracoes * { text-align: center; }
    .mais_infomracoes p { width: 100%; margin: 15px 0px; padding: 0px; font-size: 17px; }
    .mais_infomracoes a { width: 100%; margin: 15px 0px; padding: 15px 0px; }
}
/* Responsive */