
/*  RESET - COMPORTAMENTO INICIAL */

*{ 
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
	font-size: 100%;
	box-sizing: border-box;
	font-family: 'Open Sans', sans-serif;
}

a{text-decoration: none;}
nav, ul{list-style: none;}
img{max-width: 100%;}

html, body{width: 100%; height: 100%;}

/* CABEÇALHO - HEADER */
header{background-color: #fff; width: 100%; position: absolute; top: 0; left: 0; display: flex; justify-content: space-between; align-items: center; padding: 17px 50px;}
header img{width: 200px;}
header nav {display: flex;}
header li a {color: #C44042;}
header li a:hover{background-color: #C33233; color: #ffffff; padding: 0 0 15px 0;}
header li a{transition: all 0.3s linear;}
header li {margin: 0 20px; display: block; }

@media (max-width: 700px) {
	header{flex-direction: column;}
	header{margin-bottom: 15px;}
}





/* HERO - IMAGEM BANNER */
.hero{background: url(../img/hero2.jpg); background-size: cover; min-height: 100vh; color: #fff; display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center;}
.hero h1{font-size: 3.2em; margin-bottom: 15px; text-shadow: 3px 3px 5px #000000;}
.hero h2{font-size: 2em; margin-bottom:25px;text-shadow: 3px 3px 5px #000000; }
.hero ul {display: flex;}

.download1{color: #000000; font-weight: 500; background-color: #FCC917; border-radius: 5px; padding: 15px 50px; margin-left: 10px; text-transform: uppercase; cursor: pointer;}
.download2{display: none; color: #000000; font-weight: 500; background-color: #FCC917; border-radius: 5px; padding: 15px 50px; margin-left: 10px; text-transform: uppercase; cursor: pointer;}
.recursos {color: #000000; font-weight: 500; background-color: #C33233; border-radius: 5px; padding: 15px 50px; margin-left: 10px; text-transform: uppercase; cursor: pointer;}
.download1:hover{background-color: #000000; color: #ffffff; }
.download2:hover{background-color: #000000; color: #ffffff; }
.recursos:hover{background-color: #000000; color: #ffffff; }

@media screen(max-width: 700px){
	.hero h1{font-size: 2.5em; }
	.hero h1{font-size: 1.5em;}
} 

/*@media screen(min-width: 1200px) {    */
@media only screen and (min-width: 1200px){
      .download1 {display: none;}
      .download2 {display: block;}      
}

html, body{height: 100vh;}

/* CONHEÇA -  */
.conheca{display: flex; flex-direction: column; align-items: center; padding: 50px 50px; height: 100%; margin-bottom:10px;}
.conheca h3 {font-size: 2em; margin-bottom: 1px; color: #000000; text-align: center;}
.conheca h4 {font-size: 0.8em; font-weight: normal; margin-bottom: 25px; }
.conheca p {width: 95%; margin-bottom: 25px; color: #363636; text-align: center;}
.conheca hr {width: 200px; height: 2px; background-color: #363636; margin-bottom: 30px; border: none;}
.conheca h5{font-size: 0.9em; text-align: center; font-weight: normal;}

@media screen and (max-width: 900px) { 
	.conheca{padding: 10px 5px; height: 100%; margin-bottom:10px; margin-top: 2px;}
	.conheca h3 {font-size: 1.5em; }
	.conheca p {width: 98%; margin-bottom: 25px; color: #363636; text-align: center; font-size: 0.9em;}
}


/* CARROCEL */
.carrocel{width: 100%; height: 100%; background: #222; display: flex; align-items: center; justify-content: center;}
.swiper{width: 80%;}
.swiper-slide img{ width: 100%;}
.swiper .swiper-button-prev, .swiper .swiper-button-next{color: #ffffff;}
.swiper .swiper-pagination-bullet{background-color: #7B7B7B;}
.swiper .swiper-pagination-bullet-active{background-color: #ffffff;}

@media screen and (max-width: 900px) { 
	.carrocel{}
	
}

/* CARACTERISTICAS*/
.caracteristicas {background-color: #000000; display: flex;flex-direction: column; align-items: center; padding: 100px 50px;}
.caracteristicas h3 {font-size: 2em; margin-bottom: 35px; color: #fff; text-align: center;}
.caracteristicas p { max-width: 800px; margin-bottom: 35px; color: #fff; text-align: center;}
.caracteristicas hr { width: 200px; height: 2px; background-color: #fff; margin-bottom: 70px; border: none;}
.caracteristicas .grid{width: 100%; display: flex;}
.caracteristicas .grid li {padding: 0 30px; text-align: center;}
.caracteristicas .grid li i {color: #C33233; font-size: 50px; margin-bottom: 5px; }
.caracteristicas .grid li h4 {font-size: 1.5em; color: #C33233; margin-bottom: 30px;}
.caracteristicas .grid p {color: #fff;}

@media (max-width: 850px){
	.caracteristicas .grid{flex-direction: column;}
}





.contato{display: flex;}
.textoformulario{width: 50%; padding: 3% 4%;}
.textoformulario h2{ font-size: 1.4em; margin-bottom: 8px;}
.textoformulario p{ font-size: 1em; text-align: justify;}
.textoformulario ul li {font-size: 0.9em;}
.textoformulario ul{margin-bottom: 25px;}

.formulario form{ background-color: #D7D7D7; padding: 2% 0 0 2%; }
.formulario{width: 50%; padding: 3% 4%;}
.formulario label{display: block; }
.formulario input {margin-bottom:15px; padding: 8px; width: 90%; border-radius: 5px; position: relative; left: 20px;}
.formulario label {font-size: 1em; color: #000000; position: relative; left: 20px;}
.formulario input[type=submit] {width: 30%; cursor: pointer; background: #646464; color: #ffffff; }
.formulario input[type=submit]:hover{ background: #ffffff; color: #F4BE01; font-weight: 700;}
.formulario p{font-size: 0.7em;}

@media (max-width: 700px){
	.textoformulario{width: 100%; }
	.formulario{width: 100%;}
	 .contato{flex-direction: column;}
}


/* RODAPÉ */
footer{display: flex; flex-direction: column; background-color:  #000000;  padding: 50px 0; align-items: center;}
footer ul {display: flex; margin-bottom: 15px;}
footer ul li {margin-right: 10px;}
footer ul li a{color: #C33233; font-size: 2em; }
footer p {color: #ffffff; text-align: center; font-size: 0.8em;}


