/*
Theme Name: Estúdio I9
Theme URI: https://estudioi9.com.br
Author: I9 Criações
Author URI: https://i9criacoes.com.br
Description: Tema WordPress Estúdio I9
Version: 1.0
Text Domain: estudioi9
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags:
*/
:root {
  --page: #000000;
  --primary: #2bff00;
  --secondary: #24d601;
  --alt: #333333;
  --text: #FFFFFF;
}
* {
scrollbar-color: var(--primary) var(--page);
scrollbar-width: thin;
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: "Open Sans", sans-serif;
}
html, body{
font-family: "Open Sans", sans-serif;
font-weight: 400;
background-color:var(--page);
color:var(--text);
margin:0;
padding:0;
}
ul{
margin:0;
padding:0;
}
ul li{
padding:0;
margin:0;
list-style: none;
}
img{
max-width: 100%;
height:auto;
border:0;
outline: 0;
}
button, input, a, select{
outline: 0 !important;
border:0;
text-decoration: none;
}
button{
background-color:var(--primary);
color:var(--alt);
border-radius: 8px;
transition:all .2s linear;
font-family: "Bebas Neue", sans-serif;
font-weight: 400;
}
button:hover{
opacity: 0.8;
}
h1, h2, h3, h4, h5, h6{
font-family: "Bebas Neue", sans-serif;
font-weight: 400;
}
.loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
visibility: hidden;
opacity: 0;
transition: all .2s ease-out;
background: var(--page);
display: flex;
align-items: center;
justify-content: center;
flex-wrap:wrap;
}
.loading > div img{
max-width: 180px;
}
.loading > div{
width:100%;
text-align: center;
}
.loading.active{
opacity:1;
visibility:visible;
transition: all .2s ease-out;	
}
.loading .logo-loading{
animation: pulse 0.7s infinite;
margin: 0 auto 25px;
animation-direction: alternate;
-webkit-animation-name: pulse;
animation-name: pulse;
}
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -webkit-filter: brightness(100%);
  }
  100% {
    -webkit-transform: scale(1.1);
    -webkit-filter: brightness(200%);
  }
}
@keyframes pulse {
  0% {
    transform: scale(1);
    filter: brightness(100%);
  }
  100% {
    transform: scale(1.1);
    filter: brightness(110%);
  }
}
#topo{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
position:relative;
background-image: url("images/bg_topo.webp");
background-size: cover;
background-position: center;
background-color: rgb(13,13,13,.35);
background-blend-mode: multiply;
overflow: hidden;
}
#topo video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 1;
transform: translate(-50%, -50%);
object-fit: cover; 
}
#topo:before{
content:"";
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
background-color: rgb(13,13,13,.35);
z-index:2;
}
#topo .container{
position: relative;
z-index: 5;
}
.textoTopo{
position: relative;
max-width: 870px;
width:100%;
margin:0 auto 34px;
min-height: 373px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.textoTopo .logo{
max-width: 340px;
margin:0 auto;
}
.textoTopo h2{
font-size: 110px;
line-height: 1;
color: #fff;
letter-spacing: 2px;
opacity: 0.6;
margin: 50px auto 30px;
}
.textoTopo p{
font-weight: 700;
font-size: 22px;
}
.textoTopo h3{
text-align: center;
color: var(--primary);
font-size: 42px;
line-height: 46px;
margin:0;
}
.textoTopo:before{
content:"";
background-image: url("images/bar-left.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 66px;
height: 373px;
position: absolute;
left: 0;
top:50%;
transform:translatey(-50%);
}
.textoTopo:after{
content:"";
background-image: url("images/bar-right.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 66px;
height: 373px;
position: absolute;
right: 0;
top:50%;
transform:translatey(-50%);
}
.callToAction{
display: flex;
align-items: center;
justify-content: center;
padding:26px 0;
}
.callToAction .action{
position: relative;
}
.callToAction .action:after{
content: "";
position: absolute;
width: 100%;
height: 90%;
top: 20px;
left: 0;
background: transparent linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%) 0% 0% no-repeat padding-box;
border-radius: 10px;
opacity: 0.78;
filter: blur(26px);
z-index: 0;
}
.callToAction .btnAgendar{
color: #000;
background-image: linear-gradient(to right, var(--primary) 0%, var(--secondary) 51%, var(--primary) 100%);
background-size: 200%;
border-radius: 5px;
justify-content: center;
align-items: center;
height: 52px;
text-transform: uppercase;
transition: all .3s linear;
display: flex;
padding:0 40px;
position: relative;
z-index: 4;
padding-top:1px;
animation: pulse 2s infinite;
}
.callToAction .btnAgendar span{
font-family: "Bebas Neue", sans-serif;
font-weight: 400;
color:#000;
font-weight: 400;
color: #000;
font-size: 24px;
letter-spacing: 1px;
line-height: 1;
}
.callToAction .btnAgendar:hover{
background-position: right center;
transform:scale(1.04);
animation-play-state: paused;
}
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
    }

    50% {
        transform: scale(1.04);
        box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
    }
}

#video{
padding:60px 0;
}
#video .video-wrapper {
position: relative;
width: 100%;
max-width: 800px;
margin: 0 auto;
overflow: hidden;
background-color: #000;
border: 1px solid #fff;
aspect-ratio: 16 / 9;
}
#video .video-wrapper .video-poster {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
z-index: 10;
cursor: pointer;
transition: opacity 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
#video .video-wrapper .video-poster:hover {
filter: brightness(90%);
}
#video .video-wrapper .play-button {
width: 80px;
height: 80px;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 50%;
border: 2px solid #fff;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
#video .video-wrapper .play-button svg {
width: 50px;
height: 50px;
fill: #fff;
}
#video .video-wrapper .video-poster:hover .play-button {
background-color: rgba(255, 0, 0, 0.9);
transform: scale(1.1);
border-color: rgba(255, 0, 0, 0.9);
}
#video .video-wrapper .video-player-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
opacity: 0;
transition: opacity 0.3s ease;
}
#video .video-wrapper .video-player-container.is-active {
opacity: 1;
z-index: 15;
}
#video .video-wrapper .video-player-container iframe {
width: 100%;
height: 100%;
border: 0;
}
#sobre{
background-color: var(--alt);
position:relative;
}
#sobre .contentSobre{
display:flex;
align-items: center;
}
#sobre .contentSobre .ladoTexto, #sobre .contentSobre .ladoImagem{
width:50%;
}
#sobre .contentSobre .ladoTexto{
display: flex;
align-items: center;
justify-content: flex-end;
padding-right:80px;
}
#sobre .contentSobre .ladoTexto .textoSobre{
max-width: 565px;
padding:0 15px;
}
#sobre .contentSobre .ladoTexto .textoSobre h2{
font-size: 40px;
margin:0 0 30px;
}
#sobre .contentSobre .ladoTexto .textoSobre p{
font-size: 18px;
margin:0;
}
#sobre .contentSobre .ladoImagem img{
width:100%;
height:500px;
object-fit: cover;
}
.tarja{
padding:30px 0 25px;
background-color: var(--primary);
}
.tarja h2{
font-size: 40px;
text-align: center;
color:#000;
line-height: 1;
margin:0;
}