/* COMPARTILHADO */
@font-face {
	font-family: 'EpocaClassic';
	src: url('font/EpocaClassic-Light.eot');
	src: url('font/EpocaClassic-Light.eot?#iefix') format('embedded-opentype'),
		url('font/EpocaClassic-Light.woff2') format('woff2'),
		url('font/EpocaClassic-Light.woff') format('woff'),
		url('font/EpocaClassic-Light.ttf') format('truetype'),
		url('font/EpocaClassic-Light.svg#EpocaClassic-Light') format('svg');
	font-weight: 300;
	font-style: normal;
}
@font-face {
	font-family: 'Geometric';
	src: url('font/Geometric.woff') format('woff');
	font-weight: 300;
	font-style: normal;
}

*, html, body {margin:0px; padding:0px; border:0px; font-family: 'Geometric'; text-align: center;}

button, a{text-decoration: none; cursor: pointer; outline: none; transition: 0.5s;}
button.hover:hover{box-shadow: 0px 0px 10px;}
a.hover:hover{text-shadow: 0px 0px 10px;}

.btn{padding: 10px; border: 0px; background: #c7191a; color: #fff; font-size: 20px; cursor: pointer; outline: none; border-radius: 15px;}
.btn2{padding: 10px; border-radius: 15px; color: #c7191a; font-size: 20px; cursor: pointer; outline: none; background: transparent; border: 1px solid;}
.titulo{font-size: 42px; padding: 6px; color: #c7191a;}
.comentario{font-style: italic; font-size: 14px;}

.campo{position: relative; margin: 25px 0;}
.campo input{width: calc(100% - 10px); border-bottom: 2px solid #ccc; font-size: 20px; height: 40px; outline: none; text-align: left; padding-left: 10px;}
.campo label{position: absolute; top: 0; left: 0; padding: 10px 0px 0 10px; font-size: 20px; color: #000; pointer-events: none; transition: 0.5s;}
.campo input:focus ~ label,
.campo input:valid ~ label{top: -30px; left: 0; color: #c7191a; font-size: 16px; font-weight: bold;}

.campo select{width: 100%; font-size: 20px; background-color: transparent; border-bottom: 2px solid #ccc; height: 40px; padding-left: 10px;}
.campo select:focus ~ label,
.campo select:valid ~ label{top: -30px; left: 0; color: #c7191a; font-size: 16px; font-weight: bold;}

.campo2{position: relative; margin: 25px 0;}
.campo2 input{width: calc(100% - 10px); background: transparent; border-bottom: 2px solid #ccc; color: #fff; font-size: 20px; height: 40px; outline: none; text-align: left; padding-left: 10px;}
.campo2 input:hover{background-color: #ffffff3d;}
.campo2 label{position: absolute; top: 0; left: 0; padding: 10px 0px 0 10px; font-size: 20px; color: #fff; pointer-events: none; transition: 0.5s;}
.campo2 input:focus ~ label,
.campo2 input:valid ~ label{top: -30px; left: 0; color: #c7191a; font-size: 16px; font-weight: bold;}

.campo2 select{width: 100%; font-size: 20px; background-color: transparent; color: #fff; border-bottom: 2px solid #ccc; height: 40px; padding-left: 10px;}
.campo2 select option{color: #000;}
.campo2 select:hover{background-color: #ffffff3d;}
.campo2 select:focus ~ label,
.campo2 select:valid ~ label{top: -30px; left: 0; color: #c7191a; font-size: 16px; font-weight: bold;}
/* fim css da janela de realizar login e cadastro */

/*Estilo da barra scrool*/
::-webkit-scrollbar {/*largura da nossa barra*/ width: 10px; height: 10px;}
::-webkit-scrollbar-track {/*fundo da nossa barra*/ background: #f1f1f1; border-radius: 5px;}
::-webkit-scrollbar-thumb {/*estilo do navegador da nossa barra*/background-color: #c7191a; border-radius: 5px;}
/*Estilo da barra scrool*/


/* DESKTOP */
@media screen and (min-width: 741px) {
	.janela{z-index: 2; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); transition: all 0.5s;}
	.janela .close{position: absolute; right: 20px; top: 20px; background: transparent; font-size: 30px; cursor: pointer;}
	.janela h1 {font-size: 32px;}
	.janela section{padding: 50px 0; background-color: #fff; max-width: 510px; border-radius: 20px; position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%);}
	.janela section form{max-width: 400px; margin: 40px auto 20px;}
	.janela section form .btn{max-width: 400px; width: 90%;}
}

/* MOBILE */
@media screen and (max-width: 740px) {
	.janela{z-index: 2; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); transition: all 0.5s;}
	.janela .close{position: absolute; right: 20px; top: 20px; background: transparent; font-size: 30px; cursor: pointer;}
	.janela h1 {font-size: 32px;}
	.janela section{padding: 50px 0; background-color: #fff; height: 100%;}
	.janela section form{max-width: 400px; margin: 40px auto 20px;}
	.janela section form .btn{max-width: 400px; width: 90%;}
}