/*Resetando os estilos doos componentes da página*/
body, h1, h2, p, ul, li, a {
	margin: 0px;
	padding: 0px;  
}
/*Setando a fonte padrão e colocando informando a cor de fundo do corpo da página*/
body {
	font-family: "Nunito", Helvetica, Arial, sans-serif;
	color: #111;
	background: #000;
}
header{
	height: auto;
	overflow: hidden;
}
/*Resetando os estilos das listas, por exemplo, aquelas bolinhas que ficam à frente dos ítens*/
ul {
	 list-style: none;
}
/*Resetando o sublinhado dos links*/
a {
	text-decoration: none;
}
/*Ajustando as imgs pra que sejam responsivas, sem estourar o container*/
img {
	display: block; 
	max-width: 100%;
}
/*border-box serve pra respeitar o tamanho do conteiner(* = todos os elementos), independente do padding add na configuração do ítem */
* {
	box-sizing: border-box;
	outline: none!important;
	text-decoration: none!important ;
}



			/*************************************************************\



/*Informando a cor de fundo e a cor do texto do topo*/
.fundo-menu {
	font-family: "Nunito", Helvetica, Arial, sans-serif;
	/*background: #222;*/
	background: rgba(28,28,28,0.7);
	color: #FFF; 
	text-align: center;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 10;
}

.fundo-menu p {
	font-family: "Rye", Helvetica, Arial, sans-serif;
	font-size: 1.25em;
	/*background: #222;*/
	color: #FFF; 
	text-align: center;
}

.espaco-menu {
	max-width: 1200px;  /*Informando a largura das "sections",  onde as informações da página são ajustadas*/
	margin: 0 auto;    /*Alianhando o ítem ao centro, sendo "zero" pra cima e pra baixo e "auto" para os lados*/
	display: flex;     /*Os elementos se ajustam lado a lado*/
	justify-content: space-between; /*Ajusta o espaçamento entre os elementos, respeitando o tamanho de cada um deles*/
	flex-wrap: wrap;   /*Quebra os elementos para a próxima linha, de acordo com o tamanho da tela*/
	padding-top: 20px; /*Da um espaçamento (interno) sob a margem superior*/
}

.espaco-menu p, .espaco-menu a{
	margin: 0 10px 10px 10px;  /*Cria uma margem de "zero" acima, "dez" para os lados e "dez" pra baixo*/
}

.espaco-menu a {
	color: #F0F0F0;  /*Define a cor do link dentro do topo*/
}

#funto-topo {
	position: fixed;
	background: rgba(28, 28, 28, 0.8); 
	transition: all 0.4s;
   -webkit-transition: all 0.4s;
   -moz-transition: all 0.4s;
   -ms-transition: all 0.4s;
   -o-transition: all 0.4s;	
}
.menu-diferente {
	background: rgba(28,28,28,0.8);
	transition: all 0.4s;
   -webkit-transition: all 0.4s;
   -moz-transition: all 0.4s;
   -ms-transition: all 0.4s;
   -o-transition: all 0.4s;	
}


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

.menu ul {
	display: flex;   /*Alinha os ítens lado a lado*/
	flex-wrap: wrap; /*Quebra os textos do menu para a próxima linha, de acordo com o tamanho do container*/
}

.menu a {
	font-size: 0.70em; /*Define o tamanho da fonte da logo. Calcula-se o tamanho em pixel(20) dividido por 16 (base do browser)*/
	display: block;    /*Mantém os ítens do menu inline*/
	padding: 10px;     /*Cria um distanciamento entre os ítens em todas as bordas*/
}

.menu a:hover {
	color: yellow;       /*Define a cor dos textos do Menu ao passar o mouse*/
}

.menu ul li:hover {
	background: #555; 
}

.menu ul ul{
	position: absolute;
	display: list-item;
	visibility: hidden;
}

.menu ul li:hover ul{
	visibility: visible;
}

.menu ul ul li{
	/*border-bottom: solid 1px #CCC;*/
	top: 0; left: 0; bottom: 0; right: 0;
	background: rgba(28,28,28,0.7);
}

.menu ul ul li a{
	/*background-color: #999;*/
	font-size: 0.65em;
	/*background: rgba(28,28,28,0.7);*/
}

label[for="bt_menu"] {
	position: fixed;
	padding: 5px;
	color: white;
	font-family: "Arial";
	text-align: center;
	font-size: 40px;
	cursor: pointer;
	width: 50px;
	height: 50px;	
	z-index: 30;
}
	
			/*************************************************************/

.bg-img {
	position: relative;
	width: 100%;
	height: 400px;
	overflow: hidden;
	z-index: -2000;
}

#img1top {
	width: 100%;
}
/*
.audio {
	position: fixed;
	top: 75px;
	z-index: 1;
} */

/**********************************************************************/
.tpo{
	width: 100%;
	height: 70px;
	z-index: 11;
}
.wrapper {
	width: 100%;
	margin: 0 auto;
}

.wrapper-container {
	max-width: 860px;
	display: flex;		/*Alinha lado a lado os ítems da div produtos-container*/
	flex-wrap: wrap;	/*Quebra os elementos para a próxima linha, de acordo com o tamanho do container*/ 
	margin: 0 auto;
	background: #3CBE0F;		/*cor de fundo*/
/*	padding: 10px; 				/*afasta 20px das bordas*/
/*	box-sizing: border-box;		/**/
	border-radius: 10px;
}

.cabecalho {
	text-align: center;			/*centraliza do texto em relação à div pai*/
}
.cabecalho h1 {
	letter-spacing: 1px;		/*separa as letras no texto*/
	text-shadow: #FFF 2px 2px 2px;
}

.form {
	width: 100%;				/*ocupada 100% da largura disponível da div pai*/
	margin: 0 auto;				/*desce 25px, sem alterar os lados*/
}

.dados-membro, .dados-acesso, .dados-moto, .relacao {
	display: flex;
	flex-wrap: wrap;
	margin: 10px;
	align-items: center;
	background-color: #000;
	justify-content: space-between;
	padding: 10px;
	border-radius: 15px; 
}
.dados-membro .x1, .dados-acesso .x1, .dados-moto .x1, .relacao .x1{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	padding: 20px;
	margin: 10px;
	justify-content: space-between;	
}  

.estatuto {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	padding-top: 20px;
	padding-bottom: 10px;
	color: white;
}
.estatuto a {
	color: #3CBE0F;
}
.estatuto a:hover {
	color: yellow;
}
.relacao p {
	text-align: justify;
}

.dados-membro h1, .dados-acesso h1, .dados-moto h1, .relacao h1 {
	font-family: "Sarpanch", Helvetica, Arial, sans-serif;
	text-shadow: #3CBE0F 2px 2px 2px;
	font-size: 1.65em;
	color: white;
	padding: 0 25px;
	letter-spacing: 2px;
}

.relacao p {
	color: white;
	padding: 0 25px;
}

.dados-membro .nome input[type="text"] {
	padding: 7px 5px;
	min-width: 450px;
	text-transform: capitalize;
}
.dados-membro .cel input[type="text"] {
	padding: 7px 5px;
	min-width: 200px;
}
.dados-membro .end input[type="text"] {
	padding: 7px 5px;
	min-width: 450px;
	text-transform: capitalize;
}
.dados-membro .bai input[type="text"] {
	padding: 7px 5px;
	min-width: 200px;
	text-transform: capitalize;
}
.dados-membro .cid input[type="text"] {
	padding: 7px 5px;
	min-width: 200px;
	text-transform: capitalize;
}
.dados-membro .uf input[type="text"] {
	padding: 7px 5px;
	min-width: 200px;
	text-transform: uppercase;
}
.dados-membro .cep input[type="text"] {
	padding: 7px 5px;
	min-width: 200px;
}
.dados-membro .data input[type="text"] {
	padding: 7px 5px;
	min-width: 200px;
}.dados-membro .sangue input[type="text"] {
	padding: 7px 5px;
	min-width: 200px;
	text-transform: uppercase;
}
.dados-acesso .mail input[type="text"] {
	padding: 7px 5px;
	min-width: 450px;
	text-transform: lowercase;  
}
.dados-acesso .pw input[type="password"] {
	padding: 7px 5px;
	min-width: 200px;
}

.dados-moto .marca input[type="text"] {
	padding: 7px 5px;
	min-width: 200px;
	text-transform: capitalize;
}
.dados-moto .mod input[type="text"] {
	padding: 7px 5px;
	min-width: 200px;
	text-transform: capitalize;
}
.dados-moto .pot input[type="text"] {
	padding: 7px 5px;
	min-width: 200px;
}

.relacao .role {
	color: white;
}
.mensagem{
	width: 100%;
	padding: 0px;
}


.top-form, .middle-form, .msg-form, .bottom-form {
	width: 100%;
	min-height: 75px;
	margin: 10px 0;
}

.form textarea{
	padding: 5px 5px; 
	min-height: 120px;
	box-sizing: border-box;
	width: 100%;
	border: solid 2px #FFF;
	border-radius: 5px;
	outline: none;
	transition: all 0.3s ease;
}

.form input[type="text"]:focus, .form input[type="password"]:focus, .form input[type="text"]:focus{
	border-color: #222;
	box-shadow: inset 0 1px 1px rgba(0,0,0, 0.0125), 0 0 8px rgba(76,161,175, 0.5);  
}

.form .label {
	margin-top: 5px;
	margin-bottom: 2px;
	/*text-transform: capitalize;*/
	color: #999;
}

.datarole {
	position: fixed;
	position: relative;
	color: white;
}

.dependente {
	width: 100%;
	position: fixed;
	position: relative;
	color: white;
	padding-top: 20px;
}
.div-select {
    width:350px;  /* Tamanho final do select */
    overflow:hidden; /* Esconde o conteúdo que passar do tamanho especificado */	
}
.div-select select {
    /*background: url(http://www.webcis.com.br/images/imagens-noticias/select/ico-seta-select.gif) no-repeat #FFF;  /* Imagem de fundo (Seta) */
    background: url(img/seta.png) no-repeat #FFF;
    background-position: 250px center;  /*Posição da imagem do background*/
    width: 360px; /* Tamanho do select, maior que o tamanho da div "div-select" */
    height:40px; /* altura do select, importante para que tenha a mesma altura em todo os navegadores */
    font-family:Arial, Helvetica, sans-serif; /* Fonte do Select */
    font-size:16px; /* Tamanho da Fonte */
    padding: 5px; /* Configurações de padding para posicionar o texto no campo */
    color:#000; /* Cor da Fonte */
    text-indent: 0.01px; /* Remove seta padrão do FireFox */
    text-overflow: "";  /* Remove seta padrão do FireFox */     
    select::-ms-expand {display: none;} /* Remove seta padrão do IE*/	
}

.btn {
	width: 100%;
	display: flex;
	align-items: center;
	padding-top: 20px;
	margin-bottom: 5px;
}
.btn button {
	color: #fff;
	font-size: 16px;
	padding: 8px 35px; 
	background-color: #000;
	transition: box-shadow .5s ease;
	border: solid 2px transparent;
	cursor: pointer;
	margin-right: 10px;
	border-radius: 5px;
	margin-bottom: 5px;
}

.btn button:hover {
	background-color: transparent;
	color: #000;
	border-color: #000; 
}

.btn {
	font-size: 16px;
	color: #3CBE0F;	
	justify-content: center;
}

.linha {
	width: 100%;
	height: 1px;
	background-color: #3CBE0F;
	margin-top: 20px;
	margin-bottom: 10px;
}

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

.rodape {
	position: relative;
	padding-top: 50px;
	width: 100%;
	margin: 60px auto;
	/*background: #111;*/
	display: flex;		/*Alinha lado a lado os ítems da div produtos-container*/
	flex-wrap: wrap;	/*Quebra os elementos para a próxima linha, de acordo com o tamanho do container*/	
}

.rod-container {
	width: 1200px;
	display: flex;		/*Alinha lado a lado os ítems da div produtos-container*/
	flex-wrap: wrap;	/*Quebra os elementos para a próxima linha, de acordo com o tamanho do container*/
	margin: 0 auto;
}

.rod-coluna {
	flex: 1 1 175px;
	margin: 10px;	
}

.rod-coluna h2 {
	font-family: "Nunito", Helvetica, Arial, sans-serif;
	font-size: 0.85em;
	color: #999;
	background: #F7F7F7
	padding: 60px 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: justify-content;
}

.rod-coluna p {
	font-family: "Nunito", Helvetica, Arial, sans-serif;
	font-size: 0.75em;
	color: #666;
	text-align: justify-content	
}

.rod-coluna a {
	color: #666;
	padding: 10px 10px;
}

.rod-coluna a:hover {
	color: #FFF;
}

.c1 {
	border-top: 1px solid #333;
}
.c1 p {
	color: white;
}
.c2 {
	border-top: 1px solid #333;
}
.c3 {
	border-top: 1px solid #333;
}
.c4 {
	border-top: 1px solid #333;
}


.footer {
	position: relative;
 	display: flex;		/*Alinha lado a lado os ítems do footer*/
 	background: #111;
 	height: 50px;
 	align-items: center;
 	justify-content: space-between;
 	color: #ccc;;
 } 

.footer p {
	flex: 1;
	text-align: center; 
	font-size: 0.75em;
	margin:0 auto;
}
.footer spam {
	flex: 1;
	text-align: center; 
	font-size: 0.75em;
	margin:0 auto;
}


/*BOTÃO PARA ABRIR O MENU EM TELA DE TABLET OU CELULAR*/
/*Pra esconder o checkbox na tela grande*/
#bt_menu {
	display: none;
}
/*Pra esconder o botão na tela grande*/
label[for="bt_menu"] {
	display: none;
}

@media (max-width: 800px) {
	/*Pra aparecer o botão na tela de tablets ou smatphone*/
	label[for="bt_menu"] {
		display: block;
	}

	#bt_menu:checked ~ .fundo-menu {
		margin-left: 0px;
	}
/*Pra esconder o menu na tela de tablets ou smatphone*/
	.fundo-menu {
		background: rgba(54,54,54,1.0);
		font-size: 1.25em;
		margin-left: -100%;
		transition: all .4s;
	}	

	.menu ul li {
		width: 100%;
		float: none;
	}
	.menu ul ul {
		position: static;
		overflow: hidden;
		max-height: 0;
		transition: all .4s;
	} 
	.menu ul li:hover ul{
		height: auto;
		max-height: 200px;
	}
	.espaco-menu p {
		padding-left: 60px;  /*Cria uma margem de "zero" acima, "dez" para os lados e "dez" pra baixo*/
	}	


	.menu ul ul {
		background: rgba(28,28,28,1.0); 
	}
	.menu ul ul li {
		background: rgba(28,28,28,1.0); 
		border-bottom: solid 1px #555;
	}
	/**********************************************************/

	.wrapper-container {
		margin: 0 5px;
		margin-left: -10px;
	}
	.dados-membro .x1, .dados-acesso .x1, .dados-moto .x1, .relacao .x1{
		padding: 5px;
		margin: 5px;
	}
	.dados-membro h1, .dados-acesso h1, .dados-moto h1, .relacao h1, .relacao p {
		padding: 0 5px;
	}		
	.dados-membro .nome input[type="text"] {
		padding: 7px 5px;
		min-width: 280px;
		text-transform: capitalize;
	}
	.dados-membro .cel input[type="text"] {
		padding: 7px 5px;
		min-width: 180px;
	}
	.dados-membro .end input[type="text"] {
		padding: 7px 5px;
		min-width: 280px;
		text-transform: capitalize;
	}
	.dados-membro .bai input[type="text"] {
		padding: 7px 5px;
		min-width: 280px;
		text-transform: capitalize;
	}
	.dados-membro .cid input[type="text"] {
		padding: 7px 5px;
		min-width: 280px;
		text-transform: capitalize;
	}
	.dados-membro .uf input[type="text"] {
		padding: 7px 5px;
		min-width: 50px;
		text-transform: uppercase;
	}
	.dados-membro .cep input[type="text"] {
		padding: 7px 5px;
		min-width: 100px;
	}
	.dados-membro .data input[type="text"] {
		padding: 7px 5px;
		min-width: 180px;
	}.dados-membro .sangue input[type="text"] {
		padding: 7px 5px;
		min-width: 50px;
		text-transform: uppercase;
	}
	.dados-acesso .mail input[type="text"] {
		padding: 7px 5px;
		min-width: 280px;
		text-transform: lowercase;  
	}
	.dados-acesso .pw input[type="password"] {
		padding: 7px 5px;
		min-width: 180px;
	}

	.dados-moto .marca input[type="text"] {
		padding: 7px 5px;
		min-width: 100px;
		text-transform: capitalize;
	}
	.dados-moto .mod input[type="text"] {
		padding: 7px 5px;
		min-width: 100px;
		text-transform: capitalize;
	}
	.dados-moto .pot input[type="text"] {
		padding: 7px 5px;
		min-width: 50px;
	}

	/**********************************************************/	
	.menu a:hover {
		color: #3CBE0F;
		font-size: 0.80em;       /*Define a cor dos textos do Menu ao passar o mouse*/
		font-weight: bold;
	}
	.menu ul ul a {
		color: #3CBE0F;  /*Define a cor do link dentro do topo*/
	}	
	.bloco1 {
		margin-top: 5px;
	}
	.bg-img {
	height: 200px;	
	}
	.wrapper{
		margin-right: 20px;
		margin-left: 20px;
	}
	.div-select {
	    width:250px;  /* Tamanho final do select */	
	}
	.div-select select {
	    /*background: url(http://www.webcis.com.br/images/imagens-noticias/select/ico-seta-select.gif) no-repeat #FFF;  /* Imagem de fundo (Seta) */
	    background: url(img/seta.png) no-repeat #FFF;
	    background-position: 150px center;  /*Posição da imagem do background*/
	    width: 260px; /* Tamanho do select, maior que o tamanho da div "div-select" */
	}

}


@media (max-width: 600px) {
	.newsletter-form button {
		font-size: 1.5em;
	}
 }