@import url('reset.css');
@import url('simbolos.css');
@import url('acoes.css');
@import url('habilidades.css');

@font-face {
    font-family: 'existencelight';
    src: url('../fonts/Existence-Light-webfont.eot');
    src: url('../fonts/Existence-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Existence-Light-webfont.woff2') format('woff2'),
         url('../fonts/Existence-Light-webfont.woff') format('woff'),
         url('../fonts/Existence-Light-webfont.ttf') format('truetype'),
         url('../fonts/Existence-Light-webfont.svg#existencelight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@media screen and (max-width: 5000px) {
	*{
		overflow: hidden;
	}
	body{
		color: #000;
		font-family: Helveltica, Arial, sans-serif;
		font-size: 100%;
	}
	.menu{
		width: 18vw;
		height: 100%;
		bottom: 0;
		padding-left: .5vw;
		position: fixed;
		background-color: #222;
		color: #6E6E6E;
		line-height: 2;
	}
	.menu h1{
		margin-left: -.5vw;
		font-size: 24pt;
		font-family: 'existencelight';
		text-align: center;
	}
	.menu label:hover{
		color: #AEAEAE;
		transition: all .3s;
	}
	.menu a{
		color: #6E6E6E;
		text-decoration: none;
	}
	.menu a:hover{
		color: #AEAEAE;
		transition: all .3s;
	}
	.foto{
		width: 150px;
		height: 150px;
		left: 9vw;
		margin-left: -85px;
		margin-top: 10px;
		position: relative;
		border-radius: 50%;
		background-color: #222;
	}
	.foto img {
		width: 100%;
		bottom: 0;
		position: absolute;
	}
	.rodape{
		width: 18.5vw;
		height: 80px;
		margin-left: -.5vw;
		padding-top: 12px;
		bottom: 0;
		position: fixed;
		border-top: 2px solid #191919;
		color:#333;
		text-align: center;
	}
	#simbolo{
		width: 18.5vw;
		bottom: .4vh;
		position: fixed;
		font-size: 20pt;
		text-align: center;
	}
	.direitos{
		width: 99.5vw;
		height: 20px;
		padding-right: .5vw;
		bottom: 0;
		position: fixed;
		text-align: right;
	}
	.conteudo{
		background-color: #FFEE7B;
	}
	.conteudo input{
		display: none;
	}
	#enunciado{
		width: 82vw;
		height: 44px;
		margin-left: 17vw;
		padding-left: 1vw;
		position: fixed;
		font-family: 'existencelight';
		background-color: #FFEE7B;		
		border-bottom-left-radius: 22px;
		border-bottom: 2px solid #CCB725;		
	}
	#enunciado h1{
		font-size: 22pt;
	}
	.dados{
		width: 82vw;
		height: 100vh;
		margin-left: 18vw;
	}
	.titulos{
		width: 82vw;
		padding-left: 2vw;
		text-align: left;
	}
	.dados h1{
		font-family: 'existencelight';
		font-weight: bold;
		font-size: 20pt;
	}
	.dados p{
		width: 78.5vw;
		margin-left: 1vw;
		margin-top: 2vh;	
		text-align: justify;		
	}
	.dados h2{
		width: 25vw;
		padding-left: 1vw;
		padding-right: 2px;
		padding-top: 10px;
		text-align: right;
		font-family: 'existencelight';
		font-weight: bold;
		font-size: 16pt;
		border-bottom: .1vh solid #222;
	}
	.nomeador{
		width: 16.5vw;
		padding-left: 1vw;
		text-align: right;
		line-height: 1.2;
		float: left;
	}
	.separador{
		width: .1vw;
		height: 10vh;
		margin: 0 .45vw 0 .45vw;
		text-align: center;
		background-color: #222;
		float: left;
	}
	.valores{
		width: 63vw;
		padding-right: .5vw;
		text-align: justify;
		line-height: 1.2;
		float: left;
	}
	#inicial{
		text-align: center;
	}
	.logo{
		width: 82vw;
		text-align: center;
	}
	.logo img{
		max-width: 15vw;
		max-height: 15vw;
		width: auto;
		height: auto;
	}
	#inicio{
		margin-top: 60px;
	}
	.blocos{
		transition: all .7s;
	}
	#extra{
		width: 78.5vw;
		margin-left: 1vw;
		text-align: justify;
		display: flex;
	}
	#atividades{
		width: 76vw;
	}
	.container{
		width: 80vw;
		margin-left: 1vw;
		font-size: 12pt;
		display: flex;
		flex-wrap: wrap;
	}
	.container span{
		width: 2vw;
	}
	.barra{
		width: 78vw;
		height: 13pt;
		background-color: #222;
		border-radius: 6pt;
	}
	.completo{
		height: 13pt;
		padding-left: 1vw;
		background-color: #E8BA1F;
		border-radius: 6pt;
	}
}
@media screen and (max-width: 1465px) {
	*{
		overflow: hidden;
	}
	body{
		color: #000;
		font-family: Helveltica, Arial, sans-serif;
		font-size: 10pt;
	}
	.menu{
		width: 21vw;
		line-height: 1.8;
	}
	.foto{
		width: 120px;
		height: 120px;
		left: 11vw;
		margin-left: -65px;
	}
	.rodape{
		width: 21.5vw;
		height: 70px;
	}
	.rodape a{
		font-size: 9pt;
	}
	#simbolo{
		width: 21.5vw;
		bottom: .2vh;
	}
	.direitos{
		height: 15px;
	}
	#enunciado{
		width: 79vw;
		height: 35px;
		margin-left: 20vw;	
	}
	#enunciado h1{
		font-size: 18pt;
	}
	.dados{
		width: 79vw;
		margin-left: 21vw;
	}
	.titulos{
		width: 79vw;
		padding-left: 1.3vw;
	}
	.dados h1{
		font-size: 16pt;
	}
	.dados p{
		width: 75.5vw;		
	}
	.dados h2{
		width: 25vw;
		padding-top: 6px;
		font-size: 13pt;
	}
	.nomeador{
		width: 15vw;
		line-height: 1.1;
	}
	.valores{
		width: 61.5vw;
		line-height: 1.1;
	}
	.logo{
		width: 79vw;
	}
	#inicio{
		margin-top: 40px;
	}
	#extra{
		width: 77.5vw;
	}
	#atividades{
		width: 75vw;
	}
	.container{
		width: 75vw;
		margin-left: .7vw;
		font-size: 10pt;
	}
	.container span{
		width: 1.6vw;
	}
	.barra{
		width: 73vw;
		height: 11pt;
		border-radius: 5pt;
	}
	.completo{
		height: 11pt;
		padding-left: .7vw;
		border-radius: 5pt;
	}
}
@media screen and (max-width: 768px) {
	*{
		overflow: visible;
	}
	body{
		background-color: #222;
		color: #000;
		font-family: Helveltica, Arial, sans-serif;
		font-size: 13pt;
	}
	.menu{
		width: 100%;
		height: auto;
		bottom: auto;
		margin-top: 0;
		padding-left: 0;
		position: relative;
		line-height: 1.3;
	}
	.menu h1{
		margin-left: 0;
		margin-top: 10px;
		font-size: 14pt;
		text-align: center;
	}
	.menu label{
		display: none;
	}
	.menu a{
		color: #6E6E6E;
		text-decoration: none;
		font-size: 11pt;
	}
	.menu a:hover{
		color: #AEAEAE;
		transition: all .3s;
	}
	.foto{
		width: 120px;
		height: 120px;
		left: 50%;
		margin-left: -60px;
		padding-top: 10px;
	}
	.foto img {
		width: 100%;
		bottom: 0;
		position: absolute;
		border-radius: 50%;
	}
	.rodape{
		width: 100%;
		height: auto;
		margin-left: 0;
		margin-top: -100px;
		padding-top: 10px;
		bottom: auto;
		position: relative;
	}
	#simbolo{
		width: 100%;
		padding-top: 10px;
		bottom: auto;
		position: relative;
	}
	#simbolo a{
		font-size: 16pt;
	}
	.direitos{
		width: 96%;
		color: #6E6E6E;
		height: auto;
		padding: 5% 2%;
		bottom: 0;
		position: relative;
	}
	.conteudo{
		background-color: #222;
	}
	#enunciado{
		width: 98%;
		height: auto;
		margin: 0;
		padding: 0 1%;
		position: relative;
		text-align: center;
		background-color: #222;		
		border-bottom-left-radius: none;
		border-bottom: none;
	}
	#enunciado h1{
		font-size: 13pt;
		color:	#6E6E6E;
	}
	.dados{
		display: none;
	}
}
@media screen and (max-height: 800px) {
	body{
		color: #000;
		font-family: Helveltica, Arial, sans-serif;
		font-size: 80%;
	}
	.menu{
		font-size: 10pt;
	}
	.menu h1{
		font-size: 16pt;
	}
	.rodape{
		font-size: 10pt;
	}
	#simbolo{
		font-size: 12pt;
	}
	.direitos{
		font-size: 9pt;
	}
	#enunciado h1{
		font-size: 14pt;
	}
	.dados h1{
		font-size: 12pt;
	}
	.dados h2{
		font-size: 11pt;
	}
	.nomeador{
		line-height: 1.1;
	}
	.valores{
		line-height: 1.1;
	}
	.container{
		font-size: 10pt;
	}
	.barra{
		height: 11pt;
		border-radius: 5pt;
	}
	.completo{
		height: 11pt;
		padding-left: .5vw;
		border-radius: 5pt;
	}
}
@media screen and (max-height: 600px) {
	body{
		color: #000;
		font-family: Helveltica, Arial, sans-serif;
		font-size: 60%;
	}
	.menu{
		font-size: 8pt;
	}
	.menu h1{
		font-size: 12pt;
	}
	.rodape{
		font-size: 8pt;
	}
	#simbolo{
		font-size: 10pt;
	}
	.direitos{
		font-size: 8pt;
	}
	#enunciado h1{
		font-size: 11pt;
	}
	.dados h1{
		font-size: 11pt;
	}
	.dados h2{
		font-size: 9pt;
	}
	.nomeador{
		line-height: .95;
	}
	.valores{
		line-height: .95;
	}
	.container{
		font-size: 9pt;
	}
	.barra{
		height: 10pt;
		border-radius: 5pt;
	}
	.completo{
		height: 10pt;
		padding-left: .5vw;
		border-radius: 5pt;
	}
}