*{margin:0;padding:0}*,:before,:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,button,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video,a{border:0;outline:0;background:transparent}html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,caption,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video,a{vertical-align:baseline}div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,sub,sup,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,button,table,caption,canvas,summary,time,mark,audio,video,article,aside,details,figcaption,figure,footer,header,menu,nav,section{display:inline-block}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}ins,mark{background-color:#ff9;color:#000}a,ins{text-decoration:none}mark{font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}img,input,select{vertical-align:middle}a,input,select,textarea{font-weight:700}a img,fieldset,input,select,textarea,input[type=radio],input[type=checkbox]{border:none!important;border:0!important}address{font-style:normal}ul{list-style:none}input,select,textarea,input[type=radio],input[type=checkbox]{background-color:transparent!important;-moz-box-shadow:none;box-shadow:none}a,input,select,textarea,input:focus,textarea:focus,input[type=radio]:focus,input[type=checkbox]:focus{outline:none!important;outline:0!important}hr,input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-results-button,input[type="search"]::-webkit-search-results-decoration{display:none}img,embed,object,video,iframe{max-width:100%;height:auto}html,body{height:100%}#xSite{min-height:100%;position:relative;width:100%}


a, a:hover, .bt, .bt:hover, .campoInput, .campoInput:hover, #xMenuItemDest, #xMenuItemDest:hover, #xTopo, .xFixo,
.xGaleriaVisor, .xGaleriaVisor:hover, .xBlocoListaItem img, .xBlocoListaItem img:hover, #xFormAreaBt, #xFormAreaBt:hover
{-webkit-transition:.5s;-moz-transition:.5s;transition:.5s}

.efSomeTudo,.efSomeTxt{text-indent:-999em}
.efSomeFluxo,.efSomeTudo{position:absolute;left:-10000em}

.xEfArredonda20{ border-radius: 20px; margin-bottom: 1em; width: 80%}

[data-anime]{
opacity: 0;-webkit-transition: all 0.60s;-moz-transition: all 0.60s;-ms-transition: all 0.60s;-o-transition: all 0.60s;transition: all 0.60s;
}

[data-anime="left"]{ transform: translate3d(-50px, 0, 0)}
[data-anime="right"]{ transform: translate3d(50px, 0, 0)}
[data-anime].animate{opacity:1;transform: translate3d(0px, 0px, 0px)}

@keyframes mudaCordeFundo {
0% { background-color: #001F3F}
50% { background-color: #005eff}
100% { background-color: #001F3F}
}

@keyframes sf-fly-by-1{from{transform:translateZ(-600px);opacity:.5}to{transform:translateZ(0);opacity:.5}}@keyframes sf-fly-by-2{from{transform:translateZ(-1200px);opacity:.5}to{transform:translateZ(-600px);opacity:.5}}@keyframes sf-fly-by-3{from{transform:translateZ(-1800px);opacity:.5}to{transform:translateZ(-1200px);opacity:.5}}.star-field{position:fixed;top:0;left:0;width:100%;height:100%;perspective:600px;-webkit-perspective:600px;z-index:-1}.star-field .layer{box-shadow:-411px -476px #ccc,777px -407px #d4d4d4,-387px -477px #fcfcfc,-91px -235px #d4d4d4,491px -460px #f7f7f7,892px -128px #f7f7f7,758px -277px #ededed,596px 378px #ccc,647px 423px #f5f5f5,183px 389px #c7c7c7,524px -237px #f0f0f0,679px -535px #e3e3e3,158px 399px #ededed,157px 249px #ededed,81px -450px #ebebeb,719px -360px #c2c2c2,-499px 473px #e8e8e8,-158px -349px #d4d4d4,870px -134px #cfcfcf,446px 404px #c2c2c2,440px 490px #d4d4d4,414px 507px #e6e6e6,-12px 246px #fcfcfc,-384px 369px #e3e3e3,641px -413px #fcfcfc,822px 516px #dbdbdb,449px 132px #c2c2c2,727px 146px #f7f7f7,-315px -488px #e6e6e6,952px -70px #e3e3e3,-869px -29px #dbdbdb,502px 80px #dedede,764px 342px #e0e0e0,-150px -380px #dbdbdb,654px -426px #e3e3e3,-325px -263px #c2c2c2,755px -447px #c7c7c7,729px -177px #c2c2c2,-682px -391px #e6e6e6,554px -176px #ededed,-85px -428px #d9d9d9,714px 55px #e8e8e8,359px -285px #cfcfcf,-362px -508px #dedede,468px -265px #fcfcfc,74px -500px #c7c7c7,-514px 383px #dbdbdb,730px -92px #cfcfcf,-112px 287px #c9c9c9,-853px 79px #d6d6d6,828px 475px #d6d6d6,-681px 13px #fafafa,-176px 209px #f0f0f0,758px 457px #fafafa,-383px -454px #ededed,813px 179px #d1d1d1,608px 98px #f5f5f5,-860px -65px #c4c4c4,-572px 272px #f7f7f7,459px 533px #fcfcfc,624px -481px #e6e6e6,790px 477px #dedede,731px -403px #ededed,70px -534px #ccc,-23px 510px #cfcfcf,-652px -237px #f5f5f5,-690px 367px #d1d1d1,810px 536px #d1d1d1,774px 293px #c9c9c9,-362px 97px #c2c2c2,563px 47px #dedede,313px 475px #e0e0e0,839px -491px #e3e3e3,-217px 377px #d4d4d4,-581px 239px #c2c2c2,-857px 72px #ccc,-23px 340px #dedede,-837px 246px #fff,170px -502px #cfcfcf,822px -443px #e0e0e0,795px 497px #e0e0e0,-814px -337px #cfcfcf,206px -339px #f2f2f2,-779px 108px #e6e6e6,808px 2px #d4d4d4,665px 41px #d4d4d4,-564px 64px #ccc,-380px 74px #cfcfcf,-369px -60px #f7f7f7,47px -495px #e3e3e3,-383px 368px #f7f7f7,419px 288px #d1d1d1,-598px -50px #c2c2c2,-833px 187px #c4c4c4,378px 325px #f5f5f5,-703px 375px #d6d6d6,392px 520px #d9d9d9,-492px -60px #c4c4c4,759px 288px #ebebeb,98px -412px #c4c4c4,-911px -277px #c9c9c9;transform-style:preserve-3d;position:absolute;top:50%;left:50%;height:4px;width:4px;border-radius:2px}.star-field .layer:first-child{animation:5s linear infinite sf-fly-by-1}.star-field .layer:nth-child(2){animation:5s linear infinite sf-fly-by-2}.star-field .layer:nth-child(3){animation:5s linear infinite sf-fly-by-3}

@keyframes animaFundo{ from {background-position: 0 0} to {background-position: 100% 0}}

@font-face{font-family:arial_blackregular;src:url('ariblk-webfont.woff2') format('woff2'),url('ariblk-webfont.woff') format('woff');font-weight:400;font-style:normal}

@font-face{font-family:prosto_oneregular;src:url('prostoone-regular-webfont.woff2') format('woff2'),url('prostoone-regular-webfont.woff') format('woff');font-weight:400;font-style:normal}

@font-face {
    font-family: 'open_sansregular';
    src: url('OpenSans-Regular-webfont.eot');
    src: url('OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-Regular-webfont.woff') format('woff'),
         url('OpenSans-Regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


html { scroll-behavior: smooth }
body{ font-family: 'open_sansregular'; background: #000 url("../imgs/bg.png") 0 0 repeat-y; background-size: cover; overflow-x: hidden}

.xCentraSite{margin:0 auto;display:block; text-align: center}
@media only screen and (max-width:479px){.xCentraSite{width:80%}}
@media only screen and (min-width:480px) and (max-width:899px){.xCentraSite{width:90%}}
@media only screen and (min-width:900px) and (max-width:1299px){.xCentraSite{width:98%}}
@media only screen and (min-width:1300px){.xCentraSite{width:1300px}}




#xTopo{ width: 100%; padding: 1em 0}
#xTopo.xFixo{ position: fixed;top: 0;width: 100%; background-color: #000; z-index: 1000} 
#xTopo.xFixo + #xConteudo{ padding-top: 102px}



#xBtAtivaAreaMovel{ background-color: #2B2A2A; border-radius: 5px 0 0 15px}
#xBtAtivaAreaMovel, .xBtMenuArea{ width: 60px; height: 60px}



.xBtMenu,
.xBtMenu::before,
.xBtMenu::after{
display: block; background-color: #fff; position: absolute; height: 4px; width: 30px; 
transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1); border-radius: 2px}

.xBtMenu{ margin-top: 28px; margin-left: 15px}
.xBtMenu::before{ content: ''; margin-top: -8px}
.xBtMenu::after{ content: ''; margin-top: 8px}



#xAcionaBtMenu1:checked + .xBtMenuArea .xBtMenu::before{ margin-top: 0px;transform: rotate(405deg)}
#xAcionaBtMenu1:checked + .xBtMenuArea .xBtMenu{ background: rgba(255, 255, 255, 0)}
#xAcionaBtMenu1:checked + .xBtMenuArea .xBtMenu::after{ margin-top: 0px; transform: rotate(-405deg)}

.xBtMenuArea{ cursor:pointer}
#xAcionaBtMenu1{display: none}




#xAreaLogo{ margin-left: 10px; margin-top: -3px!important}

@media only screen and (max-width:285px){
#xAreaLogo{ width: 50%; position: relative}
#xAreaLogo .xIcone{ width: 100% }
}

@media only screen and (max-width:411px){
#xMenuItemDest a{ color: #000; padding: 1em 0; float: left; width: 100%}
#xMenuItemDest:hover, #xMenuItemDest.xAtivo{ background-color: yellow}
}

@media only screen and (min-width:412px){



#xMenuItemDest{overflow: hidden;cursor: pointer;margin-left: 1em;background-color: #fff;border-radius: 5px}
#xMenuItemDest a{position: relative;transition: all .35s ease-Out;color:#000}

#xMenuItemDest span
{width: 100%;height: 100%;left: -200px;background: #ffff00;position: absolute;transition: all .35s ease-Out;bottom: 0}

#xMenuItemDest:hover span, #xMenuItemDest.xAtivo:hover span{ left: 0}
#xMenuItemDest:hover a, #xMenuItemDest.xAtivo a{ color: #000!important}
}

@media only screen and (min-width:412px) and (max-width:1239px){
#xMenuItemDest{ position: fixed; right: 2%; top: 22px; padding: 0.5em!important; width: auto!important}
}

@media (max-width: 1239px){



#xTopoAreaFixa{ width: 100%}
#xTopoAreaMovel{ 
position: fixed; top: 77px; left: -300px; width: 250px; height: 100%; background-color: #191919;
box-shadow: 10px 0 5px -2px #000; -webkit-transition:.5s;-moz-transition:.5s;transition:.5s; z-index: 999}
#xBtAtivaAreaMovel, #xAreaLogo{ float:left}



#xBtAtivaAreaMovel{ display: block}

#xAcionaBtMenu1 ~ .menu li
{height: 0; margin: 0; padding: 0; border: 0; transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1)}

#xAcionaBtMenu1:checked ~ .menu li 
{border: 1px solid #333;height: 2.5em;padding: 0.5em;transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1)}

#xMenu > li, #xMenuItemDest{ margin: 0; width: 100%; border-bottom: 1px solid #444}
#xMenu > li{ background-color: #222; color: #fff}
#xMenu, #xMenuItemDest{ text-align: center}
#xMenu li a{ background-color: #191919; padding: 1em 0; float: left; width: 100%; color: #fff}
#xMenu li a:hover, #xMenu li.xAtivo a{ color: #000}
#xMenuItemDest{background-color: #fff}
#xMenuItemDest a{ color: #000; padding: 1em 0!important}
#xMenuItemDest:hover a, #xMenuItemDest.xAtivo a{ color: #000!important}
#xMenuItemDest.xAtivo{background-color: #fff000}

#xMenu li:hover span{ left: 0}
#xMenu li:hover a, #xMenu li.xAtivo a{ background-color:#fff000}
}




@media (min-width: 1240px){

#xTopoAreaFixa, #xTopoAreaMovel{ width: auto}
#xTopoAreaMovel{ float: right; text-align: right}



#xBtAtivaAreaMovel{ display: none}
#xMenu{ margin-top: 20px}
#xMenu li{ margin-left: 1em; position: relative; overflow: hidden; cursor: pointer}
#xMenu li a{ position: relative; transition: all .45s ease-Out; color: #fff; font-weight: normal}
#xMenu li a:hover, #xMenu li.xAtivo a{ color: #ffff00}
#xMenu li span{
width: 100%; height: 2.5px; margin-top: 15px; left: -200px; background: #ffff00; position: absolute; transition: all .3s ease-Out; bottom: 0}
#xMenu li:hover span, #xMenu li.xAtivo span{ left: 0}

#xMenuItemDest{ position: relative; padding: 0 0.5em!important}
#xMenuItemDest.xAtivo a{ color: #000!important}
#xMenuItemDest.xAtivo{background-color: #ffff00}
}



#xConteudo, section, article{ width: 100%; text-align: center}
#xConteudo{ color: #fff}



.xAncora:target{ padding-top: 120px}
#xPreco.xAncora:target{ margin-top: 200px; padding-top: 170px}



.xLinha{ margin-bottom: 3em; padding: 4em 0}
.xLinha:nth-of-type(even)
{background: rgb(0,0,0);background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,1) 100%)}



@media only screen and (min-width:800px) and (max-width:989px){ .xColImg, .xColTxt{ width: 90%; text-align: center}}
@media only screen and (max-width:989px){ .xColImg img{ max-height: 300px; width: auto}}
@media only screen and (min-width:990px){
.xColImg{ grid-area: imagem}
.xColTit{ grid-area: titulo}
.xColTxt{ grid-area: texto }
}



.xTitulo, .xTxt, span{ -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto}
.xTxt strong{ background-color: #131313; padding: 0.1em 0.3em}

.xTxt a{ background-color: #000; color: #ffff00; padding: 0 0.2em}
.xTxt a:hover{ background-color: #ffff00; color: #000}
.xMT05{ margin-top: 0.5em!important}
.xMT1{ margin-top: 1em!important}
.xMT2{ margin-top: 2em!important}
.xMT3{ margin-top: 3em!important}
.xMT4{ margin-top: 4em!important}
.xMT5{ margin-top: 5em!important}

.xTitulo{ width: 100%}
.xTitMenor, .xTitMaior{ width: 100%}
.xTitMenor{ font-size: 1em}

.xTitMaior{
font-size: 4em; font-family: 'arial_blackregular'; text-transform: uppercase; line-height: 1em; display: inline-block;
background: url(../imgs/ouro-bg3.png); background-size: auto; background-position: 0 0;
-webkit-background-clip: text; -webkit-text-fill-color: rgba(255,255,255,0.2); 
animation: animaFundo 30s linear infinite alternate; text-align: center
}

@media only screen and (max-width:299px){ .xTitMaior{ font-size: 1em}}
@media only screen and (min-width:300px) and (max-width:399px){ .xTitMaior{ font-size: 1.5em}}
@media only screen and (max-width:399px){ .xTitMaior{ margin: 0.5em 0; display: block}}
@media only screen and (min-width:400px) and (max-width:799px){ .xTitMaior{ font-size: 2em}}
@media only screen and (min-width:800px) and (max-width:1000px){ .xTitMaior{ font-size: 2em}}
@media only screen and (min-width:800px) and (max-width:989px){ .xTitDestaque, .xTxt{ width: 90%; text-align: center}}
@media only screen and (max-width:989px){
.xTitMaior{ display: inline; padding-bottom: 1em}
.xTitMenor{ padding-top: 1em}
.xTitDestaque{ width: 100%}
}
@media only screen and (min-width:990px){
.xDir .xTitMenor, .xDir .xTitulo, .xEsq .xTitMenor, .xEsq .xTitulo, .xEsq .xTxt{ text-align: center}
}                
@media only screen and (min-width:1001px){ .xTitMaior{ font-size: 2em}}




.xBloco{ margin:0 auto; text-align: center}
.xBloco .xTxt{ margin-top:1em}

@media only screen and (min-width:800px) and (max-width:989px){ 
.xBloco{ width: 90%; text-align: center}
}
@media only screen and (min-width:990px){ 
.xBloco{ width: 70%; display: grid; justify-content: center; align-items: center}
.xBloco.x2Cols.xDir{ grid-template-areas: "imagem texto"; grid-template-columns: 300px 1fr}
.xBloco.x2Cols.xEsq{ grid-template-areas: "texto imagem"; grid-template-columns: 1fr 300px}
}



.xBlocoMenor{ margin:0 auto; text-align: center}
.xBlocoMenor .xTitulo{ margin-bottom: 1em}
.xBlocoMenor .xTxt{ margin-top:1em}

@media only screen and (min-width:990px){
.xBlocoMenor{ display: grid; justify-content: center; align-items: center; width: 60%}
.xBlocoMenor.x2Cols.xDir{ grid-template-areas: "imagem texto"; grid-template-columns: 300px 1fr}
.xBlocoMenor.x2Cols.xEsq{ grid-template-areas: "texto imagem"; grid-template-columns: 1fr 300px}
}



.xBlocoLista{ margin:0 auto; text-align: center; padding: 1em 2em}

@media only screen and (min-width:800px) and (max-width:989px){ .xBlocoLista{ width: 90%; text-align: center}}
@media only screen and (max-width:989px){ .xBlocoLista{ margin-top: 1em}}
@media only screen and (min-width:800px){
.xBlocoLista{
width: 80%!important;
margin-top: 2em;
-webkit-display: -webkit-box; -webkit-display: -webkit-flex; display: -webkit-box; display: -ms-flexbox;
display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center
}
}


.xBlocoListaItem .xTitulo{ padding: 1em 0}
.xBlocoListaItem{ background-color:rgba(0,0,0,0.8); border:rgba(255,255,255,0.2) 1px solid}
.xBlocoListaItem .xIcone{ width: 80px; height: 80px}
.xBlocoListaItem .xTxt{ margin-bottom: 1em}

@media only screen and (max-width:989px){     
.xBlocoListaItem{ padding: 2em 1em; margin-bottom: 1em; width: 100%!important}
}
@media only screen and (min-width:990px){
.xBlocoListaItem{ margin: 1em; padding: 2em}
}
@media only screen and (min-width:800px){                     
.xBlocoLista.x2Cols .xBlocoListaItem{ width: 45%}
.xBlocoListaItem .xTxt{ text-align: justify}
}



.xDestaque .xTitMaior{ text-align: left}
.xDestaque .xTitDestaque
{ border: 1px solid rgba(255,255,255,0.1); padding: 0.5em; border-radius:5px; text-transform: uppercase}

@media only screen and (min-width:243px) and (max-width:479px){ .xDestaque .xTitDestaque{ margin-top: 0.5em}}
@media only screen and (min-width:800px) and (max-width:989px){ .xDestaque .xBloco{width: 100%}}
@media only screen and (max-width:989px){ .xDestaque .xTitDestaque{ text-align: center; margin-top: 1em}}
@media only screen and (min-width:990px){
.xDestaque .xTitDestaque, .xDestaque .xTxt, .xInterna .xTitulo{ width: 87%}
.xDestaque .xTitDestaque{ text-align: right; float: left}
.xDestaque .xTitMenor{ text-align: left}
.xDestaque .xTxt{ text-align: justify; float: left}
}
@media only screen and (min-width:1001px){ .xDestaque .xTitMaior{ font-size: 3em}}



.xInterna .xTitMenor, .xInterna .xTitMaior{ text-align: center}
.xInterna .xTitulo{ float: left}




@media only screen and (max-width:479px){
#sobre .xBloco{ width: 90%!important}
#sobre .xTitMaior{ font-size: 1.3em; word-break: break-all}
}



@media only screen and (max-width:989px){
#aulas .xColImg img{ max-height: 200px; width: auto; margin-bottom: 1em}
}
@media only screen and (min-width:990px){
#aulas .xColImg img{ width: 220px}
#aulas .xColTxt .xTxt{ text-align: justify}
#aulas .xLinha{ margin: 2em 0 0 0; padding: 2em 1em}
}



#CasosSucesso .xBloco{ padding: 1em 2em; margin-bottom: 2em} /* border: #fff 1px solid */    
.xDepoimento .xTitulo{ color: yellow; text-transform: uppercase; font-size: 1.5em}
.xDepoimento .xTxt{ line-height: 1.5em}
.xDepoimento.xLinha{ margin-bottom: 1em; padding: 0}

@media only screen and (max-width:989px){
#CasosSucesso .xBloco, #CasosSucesso .xColTxt, .xVideoMascara, .xDepoimento .xColImg{ width: 100%}
#CasosSucesso .xBloco{ padding: 1em 0}
.xDepoimento .xTitulo, .xDepoimento .xTxt, .xDepoimento .xColImg{ text-align: center}
.xDepoimento .xTitulo{ margin-top: 1em}
.xVideoMascara{ max-width: 300px; display: inline-block}
}
@media only screen and (min-width:990px){
#CasosSucesso .xColTxt{ margin-left: 2em}
.xDepoimento .xTitulo{ text-align: left}
.xDepoimento .xTxt{text-align: justify}
}




.xVideoMascara{ position: relative; overflow: hidden; display: block; border-radius: 20px}
.videoSeta{
width: 0;height: 0;border-style: solid;border-top: 30px solid transparent;border-bottom: 30px solid transparent;
border-right: 0; position: absolute; z-index: 1; border-left: 40px solid #555555; left: 40%; bottom:100px; animation:animaSeta 1s;-moz-animation:animaSeta 1s;-webkit-animation:animaSeta 1s}
.xVideoMascara:hover .videoSeta
{ border-left: 40px solid #000; animation:animaSeta 1s;-moz-animation:animaSeta 1s;-webkit-animation:animaSeta 1s; cursor: pointer}

.xVideoMascara img{
max-width: 300px;object-fit: cover;filter: grayscale(100%) contrast(120%);box-shadow: 10px 15px 25px 0 rgba(0,0,0,.2);
display: block;transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);margin-top: -10px}

.xVideoMascara:hover img{ box-shadow: 1px 1px 10px 0 rgba(0,0,0,.1);filter:none}
.xVideoMascara .glow-wrap{overflow: hidden;position: absolute;width: 100%;height: 100%;top: 0;left: 0;margin-top: -10px}
.xVideoMascara .glow{
display: block;position:absolute;width: 40%;height: 200%;background: rgba(255,255,255,.2);top: 0;
filter: blur(5px);transform: rotate(45deg) translate(-450%, 0);transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1)}

.xVideoMascara:hover .glow{transform: rotate(45deg) translate(450%, 0);transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1)}
.xVideoMascara:hover img,.xVideoMascara:hover .glow-wrap{margin-top: 0}


@keyframes animaSeta{ from {bottom:-250px} to{ bottom:100px}}
@-moz-keyframes animaSeta{ from {bottom:-250px} to{ bottom:100px}}
@-webkit-keyframes animaSeta{ from {bottom:-250px} to{ bottom:100px}}


.xVideoArea{ width: 100%; text-align: center; margin-top: 2em}
.xVideo{ max-height: 200px; border-radius: 20px; cursor: pointer}


.xGaleria{ display: flex;flex-wrap: wrap;padding: 0 4px; margin-top: 5em}
.xGaleria .xCol{ flex: 25%; max-width: 25%; padding: 0 4px}
.xGaleria.flex a{ margin-bottom: 0.5em; padding: 0 4px}

@media only screen and (max-width:450px){ .xGaleria.flex a{ flex: 100%}}
@media only screen and (min-width:451px) and (max-width:499px){ .xGaleria.flex a{ flex: 50%}}
@media only screen and (min-width:500px) and (max-width:740px){ .xGaleria.flex a{ flex: 33%}}
@media only screen and (min-width:741px){ .xGaleria.flex a{ flex: 25%}}

.xGaleria .xCol img{ vertical-align: middle; margin-top: 8px}
.xGaleria .xCol img, #bp_container img{ width: auto; height: auto; max-width: 700px!important}

@media screen and (max-width: 729px){ .xGaleria .xCol img, #bp_container img{ width: 90%}}
@media screen and (max-width: 800px){ .xGaleria .xCol{ flex: 50%; max-width: 50%}}
@media screen and (max-width: 600px){ .xGaleria .xCol{ flex: 100%; max-width: 100%}}

@media screen and (max-width: 999px){.xGaleria .xModal img{ width: 100%}}        
@media screen and (min-width: 1000px){.xGaleria .xModal img{ width: 500px}}



.xGaleria .xCol a{ display: block; overflow: hidden; margin: 0 auto; border: #000 5px solid}
.xGaleria .xCol a img{ width: 100%; transition: 0.5s all ease-in-out}
.xGaleria .xCol a:hover img{ transform: scale(1.2)}



#aulas{margin-bottom: 0!important; padding-bottom: 0!important}
#xPreco{ background: #202020 url("../imgs/bg-moedas.png") repeat; background-size: 100px}
#xPreco .xTitMaior{ text-align: center}
#xPreco .xTitDestaque{ background-color: rgba(255,255,255, 0.2)}

@media only screen and (max-width:1000px){ #xPreco .xTitMaior{ font-size: 3em}}
@media only screen and (min-width:1001px){ #xPreco .xTitMaior{ font-size: 4em}}
@media only screen and (min-width:990px){
#xPreco .xTitDestaque, #xPreco .xTxt{ width: 100%}
#xPreco .xTitDestaque, #xPreco .xTitMenor, #xPreco .xTxt{ text-align: center!important}
}



@media only screen and (max-width:989px){
#matricula{ margin-top: 0!important; padding-top: 0!important}
}
#xFormArea, .xFormAreaCampo, .xMsgErro, .xMsgErro2, #xFormAreaBt{ width: 100%}
#areaCampoEmail{ margin-bottom: 2em}

#xFormAreaBt{
overflow: hidden;background-color: #fff;border-radius: 5px; position: relative; padding: 0 0.5em!important;
margin-top: 1em; display: none; margin-bottom: 1em
}

#xFormAreaBt.xMostra{ display: block}

#xFormAreaBt #xFormBt_CursoProgWebIniciantes{ 
color: #000; padding: 1em 0!important; width: 100%; display: block;
position: relative;transition: all .35s ease-Out;color:#000;
font-weight: bold; text-transform: uppercase; font-size: 1em
}
#xFormAreaBt span{
width: 100%;height: 100%;left: -600px;background: #ffff00;position: absolute;transition: all .35s ease-Out;bottom: 0}
#xFormAreaBt #xFormBt_CursoProgWebIniciantes:hover{cursor: pointer}
#xFormAreaBt:hover #xFormBt_CursoProgWebIniciantes{ color: #000!important}
#xFormAreaBt:hover span{ left: 0}
#xFormAreaBt:hover #xFormBt_CursoProgWebIniciantes{ color: #000!important}




.xFormAreaCampo{ position: relative; margin-top: 1em}
.xCampoTxt{ 
width: 100%; 
padding: 1em;
padding-left: 3em;
border: 1px solid rgba(255,255,255,0.2)!important;
border-radius: 5px;
outline: none;
color: #fff;
font-size: 1em;
transition: 0.5s;
background-color: #000!important;
transition: 0.5s;
}
.xCampoTxt:placeholder-shown{ font-weight: normal}
.xLegenda{
position: absolute;
left: 0;
top: 0;
padding: 1em;
pointer-events: none;
color: rgba(255,255,255,0.5);
text-transform: uppercase;
transition: 0.5s;
font-size: 1em
}
.xLegenda .xIcone{ width: 20px; height: 20px; opacity: 0.2; transition: 0.5s}
.xMsgErro, .xMsgErro2{ text-align: left; font-size: 0.8em; padding: 0.8em; color: #ff4040; display: none; transition: 0.5s;}
.xMsgErro.xMostra, .xMsgErro2.xMostra{ display: block}
.xMB1{ margin-bottom: 1em}




.xCampoTxt:focus ~.xLegenda .xIcone
{ opacity: 1; width: 15px; height: 15px; transition: 0.5s}

.xCampoTxt:focus{ transition: 0.5s; padding-left: 2.3em}

.xCampoTxt:focus{ border: 1px solid rgba(255,255,255,1)!important}
.xCampoTxt.xInvalido{ border: 1px solid #ff4040!important; color: #ff4040!important; transition: 0.5s;}



@media screen and (max-width: 599px){
#xFormArea{ margin-top: 1em}
#xForm_CursoProgWebIniciantes{ width: 80%}
}
@media screen and (min-width: 600px){
#xFormArea{ margin-top: 2em}
#xForm_CursoProgWebIniciantes{ width: 450px}
}




#xRodape, #xRodape p{ width: 100%}
#xRodape{ padding: 1em 0; margin-bottom: 2em}
#xRodape.xComBox{ margin-bottom: 5em}

#xCopyRight{ color: #fff; text-align: center}
#xCopyRight a{ color:#ffff00!important}
#xCopyRight a:hover{ color:#ff8c00!important}
#xCreditos{ color: rgba(255,255,255,0.2); text-align: center}



#xBtTopo{ 
width: 60px; height: 60px; background-color: #ffff00; border-radius: 5px; position: fixed; right: 10px; bottom: 10px; transition: 0.5s; padding: 1em; z-index:110000; border: 3px solid #000}
#xBtTopo:hover{ background-color: orange}



#aviso-cookies{
z-index:100000; width:100%; position:fixed; bottom:0; left:0; background-color: rgba(255,255,255,0.95);
padding: 20px; box-sizing:border-box; box-shadow: 0 0 7px rgb(0 0 0 / 50%); animation:DeslizaTopo 1s;-moz-animation:DeslizaTopo 1s;-webkit-animation:DeslizaTopo 1s;
}
#texto-cookies{ margin:0 20px 0 0}
#texto-cookies a{ color: #ff8c00}
#texto-cookies a:hover{ color:#ffa500; text-decoration: underline!important}
#texto-cookies *, #texto-cookies{ font-size:14px; line-height:1.25rem; color:#666}

#entendi-cookies{
background: #0e9a20;transition: 0.3s all ease;
-o-transition: 0.3s all ease;-ms-transition:0.3s all ease;-moz-transition:0.3s all ease;-webkit-transition:0.3s all ease;
color:#fff;text-shadow:0 1px 1px rgb(0 0 0 / 20%);border-radius: 2px;border: 1px solid rgba(0,0,0,0.1);
border-bottom-color: rgba(0,0,0,0.2);font-size: 14px;padding: 6px 14px;cursor: pointer;line-height:19px
}
#entendi-cookies:hover{ background-color: #0a6b16}

@media only screen and (max-width:449px){
#aviso-cookies{ text-align: center}
#texto-cookies{ width: 100%; margin-bottom: 1em}
}
@media only screen and (min-width:450px){
#aviso-cookies{ display:flex; justify-content:center; align-items:center}
}

@keyframes DeslizaTopo{
from { bottom: -200px}
to { bottom: 0}
}

.xListaVantagens strong{background-color: #131313; padding: 0.1em 0.3em; margin: 0.3em 0}

@media only screen and (max-width:479px){
    .xListaVantagens .xItem{ margin-top: 1.3em; padding-bottom: 1em; border-bottom: rgba(255,255,255,0.2) 1px solid}
    .xListaVantagens .xItem, .xListaVantagens .xImgP, .xListaVantagens .xTxtP{ width: 100%; text-align: center}
    .xListaVantagens .xIconeP{ width: 20px; height: 20px; margin-bottom: 0.5em}
}

@media only screen and (min-width:480px) and (max-width:989px){
    .xListaVantagens{ width: 80%}
    .xListaVantagens .xItem { width: 100%;  margin-top: 1.3em; padding-bottom: 1em; border-bottom: rgba(255,255,255,0.2) 1px solid; text-align: left}
    .xListaVantagens .xImgP{ width: auto}
    .xListaVantagens .xIconeP{ width: 20px; height: 20px; margin-bottom: 0.5em}
    .xListaVantagens .xIconeP, .xListaVantagens .xTxtP{ display: inline-block}
    .xListaVantagens .xTxtP{ width: 80%; margin-left: 10px; text-align: left; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto}
}

@media only screen and (min-width:990px) and (max-width:999px){
    .xListaVantagens .xItem{ margin-top: 1.3em; padding-bottom: 1em; border-bottom: rgba(255,255,255,0.2) 1px solid}
    .xListaVantagens .xItem, .xListaVantagens .xImgP, .xListaVantagens .xTxtP{ width: 100%; text-align: center}
    .xListaVantagens .xIconeP{ width: 20px; height: 20px; margin-bottom: 0.5em}
}
@media only screen and (min-width:1000px){
    .xListaVantagens{ width: 80%}
    .xListaVantagens .xItem { width: 100%;  margin-top: 1.3em; padding-bottom: 1em; border-bottom: rgba(255,255,255,0.2) 1px solid; text-align: left}
    .xListaVantagens .xImgP{ width: auto}
    .xListaVantagens .xIconeP{ width: 20px; height: 20px; margin-bottom: 0.5em; vertical-align: top}
    .xListaVantagens .xIconeP, .xListaVantagens .xTxtP{ display: inline-block}
    .xListaVantagens .xTxtP{ width: 80%; margin-left: 10px; text-align: left; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto}
}

.xListaVantagens .xItem:last-of-type{ border-bottom: none}