@charset "UTF-8";

/*** Fonts ***/
@font-face {
    font-family: Bodoni MT;
    src: url('../_fonts/Bodoni MT.ttf');
}
/*** Fonts ***/

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

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

/*** social ***/
.social         { position: fixed; width: 72px; height: 160px; top: 130px; left: 0px; z-index: 1000;}
.social a       { width: 36px; height: 36px; margin: 5px 0px; background: #31859C; display: table;  border-radius:10px; box-shadow:#000 2px 3px 2px;}
.social a:hover { width: 72px; background: #17365D; }
.social a img   { width: 36px; height: 36px; float: right; }
/*** social ***/

.cusos { width:150px; height:30px; float:left; background-color: #0CC; border-radius: 9px; color:#FFF; text-align:center; padding: 5px; }
.cusos a { color:#FFF;  }
.cusos a:hover{ background: #FFF; color:#000; border-radius: 9px; margin: 10px 5px; padding: 1px 5px 10px; }
.fone-topo { font-size:29px; color: #FFF; }
.fone-topo img { width:30px; display: block; float:left; }

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

a { text-decoration: none; color: #01D0B4; }

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

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

h1 { font-size: 50px; margin: 25px 0px; font-family: Bodoni MT; font-weight: 900; }
h2 { font-size: 30px; margin: 25px 0px; font-family: Bodoni MT; font-weight: 600; }
h3 { font-size: 20px; margin: 25px 0px; font-family: Bodoni MT; font-weight: 600; }

.primary    { color: #31859C; }
.secondary  { color: #8D909A; }

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

.img_left { width: 20%; margin: 10px 25px 10px 0; border-radius: 5px; float: left; }
.foto-index { width: 20%; margin: 10px 25px 10px 15px; border-radius: 5px; float: left; }
.img_cusos { width:30%; height:auto; margin: 10px 25px 10px 0; border-radius: 5px; float: left; }
.cusoform { width:39%; height:auto; margin: 10px 5px 10px 0; border-radius: 5px; float: left; display:table; }
.cusoform-2 { width:100%; height:auto; margin: 10px auto; border-radius: 5px; float: left; }
.cusoform-2 img{ width:100%; height:auto; margin: 10px; border-radius: 9px; float: left; }
.btmais { float: right; margin: 15px; font-weight: 900; }

/*** 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 ***/

/*** 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: 20px 5%; display: table; }
/*** Corpo do Site ***/

/*** Header ***/
header { background: linear-gradient(rgba(89,209,255,.9), rgba(253,213,124,0)); position: fixed; z-index: 900; }

header .barra * { text-shadow: 1px 1px 3px #333333; }
header .barra { width: 50%; display: block; margin: 50px 0; float: left; }
header .barra p { 
    font-size: 12px; font-weight: 600; margin: 0; padding: 10px 5px; 
    color: #FFFFFF; display: block;
}
header .barra nav ul { width: auto; float: none; list-style: none; display: table; }
header .barra nav ul li { position: relative; padding: 0px 0px; margin: 2px; border-radius: 5px; float: left; display: table; }
header .barra nav ul li img { width: 23px; height: 20px; margin: 7px 0px; float: left; }
header .barra nav ul li a { 
    font-size: 12px; font-weight: 600; margin: 0 5px; padding: 0; 
    color: #FFFFFF; display: block; float: right; 
}
header .barra nav ul li a strong { padding: 10px 0; display: table; }
header .barra nav ul li:hover { background: #F8BF00; }

header .logo { position: absolute; width: 15%; max-width: 200px; float: left; left: 50%; margin-left: -7.5%; margin-top: 5px; transition: margin .0s; } 
header .logo img { width: 100%; }

.logo-cel { display: none; } 
	
header .menu { width: 45%; float: right; margin: 10px 0px; }
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 { 
    font-size: 14px; font-weight: bolder; font-weight: 0; margin: 10px 2px; padding: 13px 13px 13px 13px; border-radius: 5px; 
    color: #FFFFFF; text-shadow: 1px 1px 3px #333333; display: block; background: linear-gradient(rgba(89,209,255,.3), rgba(253,213,124,0));
}
header .menu #menu ul li:hover a { background: #31859C; color: #FFFFFF; }
header .menu #menu ul li ul { position: absolute; width: auto; display: none; background: rgba(0,102,140,.9); border-radius: 5px; z-index: 5000; }
header .menu #menu ul li ul li { float: none; display: table; }
header .menu #menu ul li ul li a { font-size: 10px; width: 120px; margin: 0px; padding: 8px; display: block; }
header .menu #menu ul li:hover ul li:hover a { background: #31859C; color: #FFFFFF; }
header .menu #menu ul li:hover ul li a { background: none; }
header .menu #menu ul li:hover ul { display: table; animation: drop 1s; }
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; }

header .menu-responsivo { display: none; margin: 0px auto; }
/*** Header ***/

/*** Banner ***/
.banner { width: 100%; max-width: 1366px; }
.banner img { width: 100%; }
/*** Banner ***/

.empresa { width: auto; height: 500px; color: #fff; background: url("../_img/natureza.jpg") fixed center no-repeat #fff; margin: 0px; padding: 50px; text-align: left; }
.empresa img { width: 20%; height: auto; float: left; }
	
/*** Center ***/
center { width: 100%; margin: 0 auto; display: table; }

center .terapias { position: relative; width: 30%; margin: 1% 1.666%; float: left; box-shadow: 3px 3px 6px #333; }
center .terapias img { width: 100%; opacity: .8; }
center .terapias .container { 
    position: absolute; width: 90%; padding: 5px 5%; left: 0; bottom: 0; z-index: 300;
    background: rgba(0,0,0,.6);
}
center .terapias .container h3 { font-size: 18px; text-align: left; margin: 5px 0; color: #FFFFFF; }
center .terapias .container p  { font-size: 16px; text-align: left; margin: 5px 0; color: #FFFFFF; display: none; }
center .terapias:hover img          { opacity: 1; }
center .terapias:hover .container   { background: rgba(0,0,0,.9); }
center .terapias:hover .container p { display: block; animation: take 1s; }

center .cursos { position: relative; width: 30%; margin: 1% 1.666%; float: left; box-shadow: 3px 3px 6px #333; }
center .cursos img { width: 100%; opacity: .8; }
center .cursos .container { 
    position: absolute; width: 90%; padding: 5px 5%; left: 0; bottom: 0; z-index: 300;
    background: rgba(0,0,0,.6);
}
center .cursos .container h3 { font-size: 18px; text-align: left; margin: 5px 0; color: #FFFFFF; }
center .cursos .container p  { font-size: 16px; text-align: left; margin: 5px 0; color: #FFFFFF; display: none; }
center .cursos:hover img          { opacity: 1; }
center .cursos:hover .container   { background: rgba(0,0,0,.9); }
center .cursos:hover .container p { display: block; animation: take 1s; }

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 ***/

.whats { width: 30.333%; margin: 1.5%; float: left; display: none; }
.bt_whatsapp { display: table; margin: 15px auto; padding: 10px; border-radius: 10px; display: none; position: relative; }

/*** Info  ***/
.info { width: 100%; background: #59D1FF; color: #FFFFFF; display: table; }
.info p { font-size: 20px; text-align: center; color: #FFFFFF; font-family: coneria; padding: 15px 0; }
/*** Info  ***/

/*** Footer ***/
footer { background: #31859C; }
footer p { text-align: center; color: #fff; padding: 35px 0; }
/*** 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; }
    
    /* containers */
    .cont_2 { width: 98%; float: none; }
    .cont_3 { width: 98%; float: none; }
    
    /*** header ***/
    header .barra .mid nav ul li a strong { display: none; }
    header .barra .mid p { font-size: 9px; }
    
    header .menu { width: 30%; margin: 40px 0; }
    
    header .menu #menu { position: fixed; width: 30%; height: 100%; padding: 0 10%; top: 0; left: 0; background: rgba(0,0,0,.7); display: none; }
    header .menu #menu ul { width: auto; float: left; margin: 0px auto; }
    header .menu #menu ul li { float: left; }
    header .menu #menu ul li a .icons { display: block; }
    header .menu #menu ul li a { padding: 30px; margin: 0px; display: block; }
    header .menu #menu ul li a:hover { background: #0986DA; color: #FFFFFF; }
    header .menu #menu ul li:hover ul { animation: none; }
   
    header .menu-responsivo, header .menu #menu #close { display: block; }
    /*** header ***/
    
    /*** center ***/
    center .terapias { width: 46%; margin: 1% 2%; }
    
    center .cursos { width: 46%; margin: 1% 2%; }
    /*** center ***/
}
@media only screen and (max-width: 640px){
	/*** Header ***/
	 h1 { font-size: 21px; }
     h2 { font-size: 23px; }
     h3 { font-size: 20px; }
     h4 { font-size: 18px; }
	 p   { text-align:left; } 
	 /*** Banner ***/
     .banner { width: 100%; }
     .banner img { width: 100%; height:150px; }
     /*** Banner ***/
	 
	 .foto-index { width: 100%; margin: auto; border-radius: 5px; float: left; }
	 
	.empresa { width: auto; height: 650px; margin: 0px; padding: 30px; display: table; }
	.empresa img { width: 60%; height: auto; float: none; border-radius: 50%; margin: 10px 60px; box-shadow: 2px 2px 3px #000; }
	.empresa h2 { text-align: center; }
	 .bt_whatsapp { display: table; }
     .whats { width: 100%; margin: 0; display: table; }
	
     header { position: absolute; float:left; }
	.fone-topo { font-size:15px; display:table; }
	.fone-topo img { width:15px; }
	
	 header .logo { display:none; } 
	
	.logo-cel { width: 90%; margin:auto; padding: 20px; display:table; } 
    .logo-cel img { width: 100%; margin:auto; }

    left  { width: 99%; padding: .5%; float: none; }
    right { width: 99%; padding: .5%; float: none; }
    
    /*** header ***/
    header .barra { margin: 5px 0; }
    header .barra nav ul li { float: none; }
    header .menu #menu ul li:hover ul { display: none; }
    /*** header ***/
    
	.cusos { width:150px; height:30px; float:left; background-color: #0CC; border-radius: 9px; color:#FFF; text-align:center; padding: 5px; }
    .cusos a { color:#FFF;  }
    .cusos a:hover{ background: #FFF; color:#000; border-radius: 9px; margin: 10px 5px; padding: 1px 5px 10px; }
	
    .cusoform-2 img{ width:100%; height:auto; margin: 5px; border-radius: 9px; float: left; }

    .img_left { width:100%; height:auto; }
	.img_cusos { width:100%; height:auto; }
    /*** center ***/
    section { width: 80%; padding: 40px 10%; }
    
    center .terapias { width: 100%; margin: 2.5% 0%; }
    
    center .cursos { width: 100%; margin: 2.5% 0%; }
    /*** center ***/
}
@media only screen and (max-width: 540px){
    
}
/*** Responsive ***/