style.css

/*fontes*/
@import url('https://fonts.googleapis.com/css?family=Dosis:400,700');

@font-face {
    font-family:Net;
      src: url(net.otf)
}

@import url('https://fonts.cdnfonts.com/css/gotham');


/*...*/



/*Reset*/
*{
    margin:0;
	padding:0;
	box-sizing:border-box;
}

ul{
list-style:none;	
	
}

a{
	text-decoration:none;
	
}

/*Fim do reset*/

/*Style*/
body {
	font-family: 'Gotham Black', sans-serif;
}

.cabecalho {
    display: flex;
    justify-content: space-between;
    padding:0px;
    max-width: 1440px;
    margin: 0;
}

.cabecalho .logo {
    width:205px;
}

.cabecalho .menu{
    display: flex;
    align-items: center;
    height: 100%;
}



.container {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    height: calc(100vh - 132px);
    padding: 0 30px 30px;
}

.container .frase {
    color: #a8adb7;
    width: 85%;
    font-size: 38px;
	font-weight:600;
	max-width:700px;
    margin: 26px 0;
	position:relative;
	bottom:40px;
	left:0;
}


/*Formulário*/
.form-mail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  color: white;
}


.form-mail .label-em {
  font-size: 14px;
  padding-left: 10px;
  padding-top:10px;
  position: absolute;
  top: 4.5px;
  transition: 0.3s;
  pointer-events: none;
}

.input-em {
  width: 400px;
  height: 55px;
  border:1px solid white;
  outline: none;
  padding: 5px 10px;
  border-radius: 6px;
  color: #fff;
  font-size: 15px;
background-color: #0000007d;

}

.input-em:focus {
  border: 1px solid white;
  padding:12px;
  color: #fff;
  color: #fff;
}

.form-mail .input-em:valid ~ .label-em,
.form-mail .input-em:focus ~ .label-em {
  transition: 0.3s;
  padding-right: 5px;
  padding-top:2px;
  transform: translateY(-8px);
}


.form-mail .input-em:valid,
.form-mail .input-em:focus {
  box-shadow: 3px 3px 10px #000000,
  -1px -1px 6px #ffffff66,
  inset 3px 3px 10px #000000,
  inset -1px -1px 6px #ffffff66;
}
.infor{
	display:flex;
    flex-direction:row;
	gap:10px;
}


input[type="submit"]{
width:120px;
text-align: center;
outline: none;
border: none;
border-radius: 4px;
height:52px;
color:#fff;
font-size: 23px;
background: linear-gradient(to top,
  #c50707 , 
  #ff0000 ,
  #c50909 );

}

input[type="submit"]:active{
background: linear-gradient(to top,
  #c50707 , 
  #a60606 ,
  #9c0606 );
  transform: translateY(2px);

}

.container .forms{
  display: flex;
  gap: 10px;
  align-items: center;
}





.wandinha{
position:absolute;
right:0;
bottom:0;
height:600px;
}


	


.container .imagem-titulo {
    max-width: 500px;
}


/*Botão inferior*/
.enter{
  position: absolute;
  top: 30px; 
  right: 10px;
  width:90px;
  height:37px;
  padding: 10px 20px;
  background-color: #c11119;
  color: #fff; 
  text-align: center;
  border: none;
  font-weight:600;
  border-radius: 3px;
  cursor: pointer;
  font-size: 17px;
} 

.enter:hover{
filter:contrast(5.5);
}

.enter:active{
	  background-color: #890d13;
}

.fundo-video {
    position: absolute;
    z-index: -1;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.fundo-video .video {
    height: 100vh;
}

.fundo-video::after {
    content: "";
    height: 100vh;
    width: 100vw;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(90deg, 
rgb(18, 18, 18) 0%, rgba(33, 13, 33, 0.587)
 50%, rgba(23, 23, 23, 0.97) 100%);
}


a{
	color:white;
	
}



/*Fim do Style*/

/*Responsividade*/

@media (max-width: 1200px) {
   
   .wandinha{
	  display:none;
   }
   

    .container {
        flex-wrap: wrap;
        justify-content: center;
        height: auto;
        gap: 10px;
    }
    .container .informacoes {
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .container .frase {
        color: #ffffff;
        text-align: center;
		font-size:30px;
    }

	.infor{
    flex-direction:column;
	gap:25px;
	justify-content:center;
	align-items:center;
}

    .input-em{
		text-align:center;
	}
}

@media (max-width: 500px) {
    .cabecalho {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0px;
    }

    .container .imagem-titulo {
        max-width: 75%;
    }

    .modal .fechar-modal {
        width: 30px;
        line-height: 30px;
    }

    .modal #video {
        width: 300px;
        height: 169px;
    }
}

@media (max-width: 376px) {
    .modal #video {
        width: 250px;
        height: 140px;
    }
}


/*Fim*/
/*Por Marco Marchi*/