@charset "utf-8";
/* CSS Document */

/*reset dos elementos através do CSS*/
* { margin: 0; padding: 0; }

/*Fontes*/
@font-face{
	font-family: RobotoBold;
	src:url("fontes/Roboto-Bold.ttf")
}
@font-face{
	font-family: RobotoThin;
	src:url("fontes/Roboto-Thin.ttf")
}
@font-face{
	font-family: Roboto;
	src:url("fontes/Roboto-Regular.ttf")
}

/*Estilos textos*/

.content h1{
	font-family: RobotoBold;
	text-align: center;
	font-size: 2.5vw
}

.content h2{
	font-family: RobotoBold;
	text-align: left;
	font-size: 1.8vw
}

.content p{
	font-family: Roboto;
	text-align: left;
	font-size: 1.5vw
}

.content em{
	font-family: Roboto;
	font-size: 1vw
}

/*estilo do box onde fica a página*/

.content{
	width: 100%;
	display: flex;
	flex-direction: column;
	}

/* início estilo dos banners*/

.content .banner {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	height: auto
}

.content .banner img{
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	height: auto
}
/*fim estilo dos banners*/

/*inicio estilo caixa MEIO TEXTO MEIO IMAGEM*/

.content .caixa1{
	display: table;
	flex-direction: row;
	align-items: left;
	width: 100%;
	height: auto;
}

.content .caixa1 .texto1{
	display: table-cell;
	vertical-align: middle;
	align-items: left;
	width: 50%;
	padding-left: 5%;
	padding-right: 5%;
	
	}

.content .caixa1 .imagem1{
	display: flex;
	align-items: center;
	flex-direction: row;
	width: 100%
	
}

.content .caixa1 .imagem1 img{
	display: table-cell;
	vertical-align: middle;
	width: 100%;
}

/*fim estilo caixa MEIO TEXTO MEIO IMAGEM*/

/*inicio estilo caixa ICONES*/

.content .caixaicones{
width: 100%;
display: flex;
flex-direction: row;

}

.esquerda{
flex-grow: 1;
margin: 1.5%;
}

.centro{
flex-grow: 1;
margin: 1.5%;
}

.direita
{
flex-grow: 1;
margin: 1.5%;
}

.caixaicones img{
height: 200px;
align-items: center;
display: block;
margin-left: auto;
margin-right: auto;
}

/*fim estilo caixa ICONES*/

/*inicio estilo caixa texto*/

.content .texto {
	display: flex;
	flex-direction: column;
	align-items: left;
	padding-left: 10%;
	width: 100%;
	height: auto
}

/*fim estilo caixa texto*/

/*inicio estilo CARROSSEL*/

.content .carrossel {
	display: flex;
	flex-direction: row;
	align-items: left;
	width: 100%;
	height: auto
}

* {box-sizing:border-box}

/* Slideshow container */
.content .slideshow-container {
  display: flex;
  max-width: 100%;
  position: relative;
  margin: auto;
}

/* Esconder as imagens */
.content .slideshow-container .mySlides {
  display: flex;
	flex-direction: column;
	width: 100%
}

/* botões e setas */
.content .slideshow-container .prev, .content .slideshow-container .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: black;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Posição do botão "próximo" na direita */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(113,113,113,0.5);
}


/* dots/bullets/indicadores */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animação */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}


/*fim estilo CARROSSEL*/

/*inicio estilo caixa carrossel*/

.content .mySlides .caixacarrossel{
	display: table;
	flex-direction: row;
	align-items: left;
	width: 100%;
	height: auto
}

.content .mySlides .caixacarrossel .textocarrossel{
	display: table-cell;
	vertical-align: middle;
	align-items: left;
	padding-left: 5%;
	padding-right: 5%;
	width: 100%
	
	}

.content .mySlides .caixacarrossel .imagemcarrossel{
	display: flex;
	align-items: center;
	flex-direction: column;
	width: 100%
	
}

.content .mySlides .caixacarrossel .imagemcarrossel img{
	display: flex;
	align-items: center;
	flex-direction: row;
	height: 100%;
}

/*fim estilo caixa carrossel*/

/* INICIO AJUSTES PARA TAMANHO 720*/

@media only screen and (max-width: 720px){
	
	.content h1{
	font-family: RobotoBold;
	text-align: center;
	font-size: 3.5vw
}

.content h2{
	font-family: RobotoBold;
	text-align: left;
	font-size: 2.8vw
}

.content p{
	font-family: Roboto;
	text-align: left;
	font-size: 2.5vw
}

.content em{
	font-family: Roboto;
	font-size: 2vw
}
	
	/*inicio estilo caixa carrossel*/

.content .mySlides .caixacarrossel{
	display: table;
	flex-direction: column;
	align-items: left;
	width: 100%;
	height: auto
}

.content .mySlides .caixacarrossel .textocarrossel{
	display: flex;
	align-items: center;
	flex-direction: column;
	padding-left: 5%;
	padding-right: 5%;
	width: 100%
	
	}

.content .mySlides .caixacarrossel .imagemcarrossel{
	display: flex;
	align-items: center;
	flex-direction: column;
	width: 100%
	
}

.content .mySlides .caixacarrossel .imagemcarrossel img{
	display: flex;
	align-items: center;
	flex-direction: column;
	height: 100%;
}

/*fim estilo caixa carrossel*/

	.content .caixa1 .imagem1{
	display: table-cell;
	vertical-align: middle;
	width: 50%
	
}

.content .caixa1 .imagem1 img{
	display: table-cell;
	vertical-align: middle;
	width: 100%;
}
	
}

/*FIM AJUSTES PARA TAMANHO 480*/