@import url(reset.css);
@import url(normalize.css);
@import url(clearfix.css);

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;700;900&display=swap');
/*font-family: 'Raleway', sans-serif;*/

@import url('https://fonts.googleapis.com/css2?family=Mate+SC&display=swap');
/*font-family: 'Mate SC', serif;*/


@import url(bootstrap.css);



/* ---------------- Barra de rolagem Google Chrome---------------- */
	::-webkit-scrollbar {
	width: 5px;  largura da barra de rolagem 
	height: 5px;
	}
	::-webkit-scrollbar-track-piece {
	background: #333;  Cor do fundo da barra de rolagem 
	}
	::-webkit-scrollbar-thumb:vertical {
	height: 5px;
	background: #ccc;  Cor da barra de rolagem 
	border-radius: 10px;  Arredondamento da barra de rolagem 
	}
	::-webkit-scrollbar-thumb:horizontal {
	width: 5px;  Largura da barra de rolagem na horizontal
	background-color: #FFA500; <!- cor da barra de rolagem na horizontal
	}
/* ---------------- FINAL Barra de rolagem Google Chrome---------------- */

html, body {
	margin:0;
	padding:0;
	background-color: #FCFCFC;
	}
	
#resolucao {
	position: fixed;
	top: 2px;
	left: 40%;
	font-size: 9px;
	color: #999;
	z-index:1000;
	display:none;
	}	
	
#container {
	width:100%;
	height: auto;
	}

#bkgBlack {
	position: fixed;
	width: 100%;
	height: 100vh;
	background-color: rgba(0,0,0,0.5);
	z-index:5;
	display:none;
	}

/* +++++++++++++++++++++++++++  */

#quadro1 { 
	position:fixed;
	width:50%;
	height: 100vh;
	min-height:300px;
	float: left;
	background-color:#FFF;	
}

#barraLateral1 {
	width: 8%;
	height:100vh;
	position: absolute;
	background-color: #85107A;
	z-index: 10;
	margin-left: -8%;
	background-image: url(../imagens/layout/alfabeto_caindo.png);
	background-size:     cover;                    
	background-repeat:   no-repeat;
	}
#barraLateral2 {
	width: 11%;
	height:100vh;
	position: absolute;
	background-color: #EEBD1A;
	z-index: 9;
	margin-left: -11%;
	}
		
#quadro2 { 
	position: relative;
	width:50%;
	height: 100vh;
	/*min-height:300px;*/
	background-color: #EBB015;
	float: right;
	padding-left: 2%;
	padding-right: 2%;
	padding-top: 20px;
	background-image: url(../imagens/layout/bkground-form.jpg);
	background-size:     cover;                    
	background-repeat:   no-repeat;
	cursor: pointer;
	
}

h1 {
	width: 90%;
	color: #036;
	font-weight:700 !important;
	font-size: 4em !important;
	line-height: 55px !important;
	margin-bottom: 20px !important;
	}
h1, p {
	margin-left: 5% !important;
	}

#btAbreRegras {
	border:none;
	background-color: #7B297B;
	padding: 5px 15px 5px 15px;
	color: #FFF;
	border-radius: 3px;
	font-size: 13px;
	}

#logoJP {
	width: 100%;
	height: auto;
	text-align:center;
	margin-top: 5%;
	margin-left: 5%;
	margin-bottom: 2%;
	}
#logoJP img {
	width: 60%;
	height: auto;
	}	

#logoEG {
	width: 100%;
	height: auto;
	text-align:center;
	position: absolute;
	bottom: 20px;
	margin-left: 5%;
	}
#logoEG img {
	width: 90%;
	max-width: 180px;
	min-width: 80px;
	height: auto;
	}

#patrocinadores {
	width: 80%;
	margin-left: 15%;
	position: absolute;
	bottom: 3%;
	}

#patrocinadores img {
	width: 100%;
	height: auto;
	}		

.btnMobile {
	display:none;
	}
#patrocinadoresMobile {
	display:none;
	}
.imgDstMobile {
	width: 100%;
	heigh: auto;
	display:none;
	background-color:#EEEEEE;
	padding-top: 5px;
	padding-bottom: 10px;
	margin-top: 10px;
	}
.imgDstMobile img {
	width: 80%;
	margin-left: 5%;
	height: auto;
	}	
.voltar {
	display:none;
	position: fixed;
	top: 10px;
	left: 10px;
	width: 35px;
	height: auto;
	z-index: 100;
	opacity: 07;
	}	
.voltar img {
	width:100%;
	height: auto;
	}
	
#tema {
	position: relative;
	font-family: 'Raleway', sans-serif;
	margin-left: 34%;
	padding: 0;
	}
#t1 {
	margin:0;
	font-style:italic;
	}
#t2 {
	font-family: 'Mate SC', serif;
	margin:0;
	font-size: 38px; 
	margin-top: -12px;
	font-weight:900;
	color:#6B296B;
	}	
	
/* --- compartilhar ------------------------  */

#compartilhar {
	position: fixed;
	z-index:5;
    left: 0;
	bottom:10px;
    margin-bottom: 0;
	width: 40px; 
	height: auto;
	}

#compartilhar img {
	width:40px;
	height: auto;
	transition: 0.1s ease-in-out all;
	}
	
#compartilhar img:hover {
	cursor: pointer;
		
	}
#url {
	position: absolute;
	/*width: 5px;*/
	margin-left: -500px;
	}
	 	
/* --- formulário --------------------------  */
#formulario {
	position: relative;
	width: 96%;
	margin-left: 5%;
	margin-top: 30px;
	max-width:750px;
	height: auto;
	}
	
#formulario input, textarea {
	width: 95%;
	border-radius:3px;
	/*border: 1px #CCCCCC solid;*/
	border: none;
	}	
	
#formulario label {
	font-size: 14px;
	color: #036;
	font-weight: 500 !Important;
	}	

#texto_poema {
	height: 150px !Important;
	width: 95% !Important;
	border: none;
	}
#contador {
	font-size: 12px;
	left: 0;
	margin-left: 0;
	top: 0;
	margin-top: -25px;
	padding-left: 10px;
	}
#idade {
	width: 80px !Important;
	}
#resp_nascto {
	width: 170px !Important;
	}	
#resp_telefone {
	width: 170px !Important;
	}	
#quadro2 ul {
	width: 85%;
	margin-left: 6%;
	margin-top: 20px;
	margin-bottom: 30px;
	font-size: 14px;
	}
	
#quadro2 ul li {
	margin-bottom: 20px;
	}	
#quadro2 ul li input { 
	margin-right: 10px;
	}
#btnE {
	width: 140px;
	height: auto;
	line-height: 25px;
	margin-left: 6%;
	margin-bottom: 50px;
	padding: 7px 10px 7px 10px;
	border: none;
	background-color:  #036;
	color: #FFF;
	cursor: pointer;
	border-radius: 3px;
	transition: 0.2s ease-in-out all;
	}	
#btnE:hover {
	background-color: #336;
	cursor: pointer;
	}
	
#dadosAutor {
	margin-left:0px !important;
	margin-top: 30px;
	margin-bottom: 5px !Important;
	font-size: 26px;
	color: #8C6900;
	}
#dadosResponsavel {
	margin-left:0px !important;
	margin-top: 30px;
	margin-bottom: 5px !Important;
	font-size: 26px;
	color: #8C6900;
	}	

#dadosPoema {
	margin-left:0px !important;
	margin-top: 30px;
	margin-bottom: 5px !Important;
	font-size: 26px;
	color: #8C6900;
	}	
		
/* +++ regulamento ++++++++++++++++++++++++++++ */

#bkgRegulamento {
	top:0;
	right:0;
	width: 100%;
	margin-left: 0;
	height:200vh;
	position: absolute;
	z-index: -1;
	background-image: url(../imagens/layout/background-capa.png);
	background-size:     cover;                   
	background-repeat:   no-repeat;
	opacity:0.8;
	}

#bkgRegulamento img {
	width: 100%;
	height: auto;
	}
	
#regulamentoMobile {
	display:none;
	width: 100%;
	height: 100vh;
	background-color:#EEEEEE;
	position:absolute;
	top:0;
	margin-left:-100%;
	}
#regulamentoMobile p {
	width: 90%;
	}	
#regulamento {
	position: fixed;
	width: 50%;
	margin-left: 25%;
	height: 90vh;
	margin-top: 3%;
	background-color: #F4F4FF;
	z-index: 10;
	display:none;
	overflow-y: scroll;
	padding: 3% 5% 3% 5% ;
	border: 1px #830C77 solid;
	/*-webkit-box-shadow: 1px 2px 11px 5px rgba(0,0,0,0.72); 
	box-shadow: 1px 2px 11px 5px rgba(0,0,0,0.72);*/
	}

#textoRegulamento h1 {
	left: 0 !Important ;
	/*margin-left: 5% !Important ;*/
	margin-left: 0 !Important ;
	text-align:left;
	font-size: 40px !Important ;
	}
		
#textoRegulamento h2 {
	font-size: 22px;
	margin-bottom: 20px;
	color: #830D77;
	margin-top: 20px;
	}	
	
#regulamento p {
	margin-left: 0 !important;
	}
#fechaRegra {
	width: 30px;
	height: 30px;
	position: fixed;
	margin-left: 42%;
	margin-top: -25px;
	background-image: url(../imagens/layout/ico_fechar.png);
	background-size:     cover;                    
	background-repeat:   no-repeat;
	cursor: pointer;
	}
#btAbreRegras {
	cursor: pointer;
	transition: 0.2s ease-in-out all;
	}

#btAbreRegras:hover {
	background-color: #069;
	color: #FFF;
	}	

#textoRegulamento {
	width: 92%;
	margin-left: 5%;
	}


/* -- pagina inscricao_ok ++++++++++++++++++++++*/

#mensagemCadOk {
	position: fixed;
	z-index:100;
	top:10%;
	width: 280px; 
	height: 80px;
	/*left:50%;
	margin-left: -140;*/
	background-color:#7B297B;
	color: #FFF;
	text-align:center;
	padding: 20px;
	display:none;
	border-radius: 3px;
	}
#mensagemCadOk p {
	margin:0 !important;
	line-height: 20px;
	}	

#printForm {
	position: relative;
	width: 140px;
	height: auto;
	line-height: 25px;
	margin-left: 1%;
	margin-bottom: 50px;
	padding: 7px 10px 7px 10px;
	border: none;
	background-color: #7B297B;
	color: #FFF;
	cursor: pointer;
	border-radius: 3px;
	transition:0.2 ease-in-out all;
	}
#printForm img {width: 15px;height: auto;}	
#printForm:hover {
	background-color:  #609;
	}

#dtInsc {
	margin-top: 40px;
	width:68% !Important;
	padding-left: 35% !Important;
	text-align:center !Important;
	
	}
	
#dtInsc img {
	position: relative;
	}	

/* *** seta sobe ***************************** */
	
	#setaSobe { /*seta que aparece no canto inferior direito quando scrool é acionado*/
		position:fixed;
		bottom: 5px;
		right: 10px;
		display:none;
		z-index: 10;
		opacity: 0.7;
		width:40px;
		height: 40px;
		border-radius:7px;
		background-image: url(../imagens/layout/seta_sobe.png);
		background-size:     cover;                    
		background-repeat:   no-repeat;
		transition: 0.2s ease-in-out all;
		}

	div#setaSobe:hover{ /*seta que aparece no canto inferior direito quando scrool é acionado*/
		margin-bottom: 7px;
		transition: 0.5s linear all;
		cursor: pointer;
		opacity: 1;
	}

/* ************************************************************* */