* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }
body {
  width: 100%;
  background: #F0F0F0;
  font-size: 1em;
  color: #666;
  font-family: 'Titillium Web', sans-serif;
  height: auto;
}
main {
  width: 100%;
  margin:0px auto 15px;
  background-color:rgb(255,255,255);
  box-shadow:0 0 5px #CCC;
}
header {
  width:100%;
  height:auto;  
}
a { 
  text-decoration: none;
  font-size: 0.9em; 
}
a.whats{
	color: rgb(214, 5, 5);
	text-decoration: solid;
	text-decoration: none;
  font-weight: bold;
  font-size: 16px; 
}
a.whats1{
  color: rgb(255, 255, 255);
  text-decoration: none;
  font-size: 16px;
}
a.face{
  color: rgb(4, 2, 34);
  text-decoration: none;
  font-size: 16px;
}
h1{
  font-size: 1.2em;
}
h2{
  font-size: 1em; 
}
#pdf{ 
  color: rgb(165, 17, 17);
  text-decoration: underline;
}
#pdf1{ 
  color: rgb(165, 17, 17);
  text-decoration: underline;
  text-align: left;
}
#linkepson{
  font-size: 1.2em;
}
.container{ /* largura do box central*/
  margin:0;
  width:100%;
  text-align: inherit; 
}
.cabecalho{
  z-index: 1000;
  position: fixed;
  width: 100%;
  background-color: white;
}
.barrapreta { /*barrapreta*/
  display: inline-block;
  /*margin-bottom: 15px 0;*/
  background: rgb(185, 7, 7);
  width: 100%;
  height: 40px;
  padding: 10px 0 10px 0;
}
.barrapreta ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex: 1;
  justify-content: space-between;
  text-align: center;
}
.barrapreta li {
  list-style-type: none;
  margin-left: 30px;
  margin-right: 30px;
  padding: 0;
  font-size: 16px;
  color: #def1f0;
  z-index: 10;
  cursor: pointer;
}
img #logo{ /*alinhamento do logo*/
  margin-left: auto;
  margin-right: auto;
}
.txtcinza{
  color: rgb(33, 27, 58);
}
nav{  
  z-index: 1;
}
.navi { /*menu desktop*/
  display: inline-block;
  /*margin-bottom: 15px 0;*/
  background: rgb(27, 10, 112);
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  width: 100%;
}
.navi ul {
  list-style-type: none;
  margin-left: 0px;
  margin-right: 0px;
  padding: 0;
  display: flex;
  flex: 1;
  justify-content: space-between;
  text-align: center;
}
.navi li {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: inline-block;
  position: relative;
  font-size: 16px;
  color: #def1f0;
  z-index: 10;
  cursor: pointer;
  margin-left: 20px;
  margin-right: 20px;
}
.navi li a {
  padding: 10px 15px;
  font-size: 1em;
  color: #fff;
  display: inline-block;
  outline: 0;
  text-align: center;
}
.navi li:hover ul.dropdown { 
  display: block; 
/* background-color: rgba(0,0,0, .1); deixa o botaõ transparente*/
}
.navi li ul.dropdown {
  position: absolute;
  display: none;
  width: 100%;
  background: rgb(17, 18, 104);
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  padding-top: 0px; 
}
.navi li ul.dropdown li {
  display: block;
  list-style-type: none;
  text-align: center;
  margin-left: 0px;
  margin-right: 0px;
}
.navi li ul.dropdown li a {
  padding: 10px 10px;
  font-size: 1em;
  color: #fff;
  display: block;
  font-weight: 400;
  border-bottom: 1px solid #fff;
}
.navi li ul.dropdown li:last-child a { 
  border-bottom: none; 
}
.navi li:hover a {
  background: #2980B9;
  color: #fff /*!important*/;
}

.navi li:first-child:hover a { border-radius: 3px 0 0 3px; }

.navi li ul.dropdown li:hover a { background: rgba(0,0,0, .1); }

.navi li ul.dropdown li:first-child:hover a { border-radius: 0; }

.navi li:hover .arrow-down { border-top: 5px solid #fff; }

.arrow-down {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #def1f0;
  position: relative;
  top: 15px;
  right: -10px;
  content: '';
} 
section.banner{
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}
img#banner {
  width: 100%;
  height: auto;/* tamanho da imagem de fundo*/ 
 /*object fit*/
  margin-top: 300px;
  object-fit: contain;
  object-position: top center 
/* object-fit: none (deixa imagem igual), fill (sempre preenche mas distorce), contain (sempre atinge o limite na altura ou largura), cover(capa acompanha a largura do container), scale-down (a imagem não redimensiona) */
}
section.corpo{
  z-index: 5;
  padding: 0 50px 0 50px;
  background-color: #fff;
}
section.figura{
  width: 70%;
  margin-left: auto;
  margin-right: auto;
  font-size: 16px;
}
img#figura {
  width: 90%;
  height: auto;/* tamanho da imagem*/ 
 /*object fit*/
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  object-fit: cover;
  object-position: top center
}
.textobarra{
  font-size: 1em ;
}
/* tela de 960px---------------------------*/
@media only screen and (max-width:960px) { 
  .navi {
    background: rgb(110, 165, 228);
    width: 40%;
    height: auto;
    display: block;
    position: absolute;
    float: left;
    left: 5000px;
    top: 165px;
    -webkit-transition: left 0.25s ease;
    -moz-transition: left 0.25s ease;
    -ms-transition: left 0.25s ease;
    -o-transition: left 0.25s ease;
    transition: left 0.25s ease;
    margin: 0;
    border: 0;
    border-radius: 0;
    overflow-y: auto;
    overflow-x: hidden  
  }
  .navi ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: block;
    width: 100%;
  }
  .navi.visible {
    left: 0px; /* distancia do menu vertical para a margem*/
    -webkit-transition: left 0.25s ease;
    -moz-transition: left 0.25s ease;
    -ms-transition: left 0.25s ease;
    -o-transition: left 0.25s ease;
    transition: left 0.5s ease;
  }
  .navi li {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-size: 1.1em ;
    height: auto;
  }
  .navi li ul {
    margin-left: 0px; /* posição lateral do submenu*/
  }
  .navi-bg {
    vertical-align: middle;
    width: 100%;
    height: 50px;/*altura da barra de menus mobile*/
    margin: 0;
    position: absolute;
    top: 120px;
    left: 0px;
    background:  #240e92;/*cor da barra menu responsivo*/
    padding: 5px 0 0 5px;
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    -ms-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    -o-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  }
  .navibar {
    display: block;
    /*vertical-align: middle;*/
    width: 100%;
    height: 50px;
    margin: 0;
    position: absolute;
    top: 0;
    left: 50px;
    padding: 12px;
  }
  .navibar span {
    height: 2px;
    background: #fff;
    margin: 5px;
    display: block;
    width: 20px;
  }

  .navibar span:nth-child(2) { width: 20px; }

  .navibar span:nth-child(3) { width: 20px; }

  .navi ul { padding-top: 10px; } /* distancia inicio menu lateral*/

  .navi li { display: block;}

  .navi li a {
    display: block;
    color: #02135c;
    font-size: 1em;
    border-bottom: 1px solid #505050;
    text-align: center;
    transition: 0.25s;
  }

  .navi li:first-child:hover a { border-radius: 0; }

  .navi li ul.dropdown { position: relative; }

  .navi li ul.dropdown li a {
    background: #2980B9 !important;
    color: #fff !important;
    border-bottom: 1px solid #fff;
    text-align: center;
  }
  .navi li:hover a {
    background: #03A9F4;
    color: #fff !important;
  }
  .navi li ul.dropdown li:hover a {
    background: rgba(0,0,0,.1); /*!important*/
    color: #fff /*!important*/;
  }
  .navi li ul.dropdown li a { padding: 5px 5px 5px 10px; }

  .navi li:hover .arrow-down { border-top: 5px solid #fff; }

  .arrow-down {
    border-top: 5px solid #505050;
    position: absolute;
    top: 20px;
    right: 10px;
  }
  .cover-bg {
    background: #fff;
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  img#banner {
    margin-top: 170px;
  }
  .barrapreta{
    display: none;
  }
  }/* fim tela 960px------------------*/ 

/* artigos em destaque */
.row{
  width:100%;
}
.titulo{
  font-size:1.2em;
  color:rgb(45, 57, 218);
}
/* formatação de textos */
.txt-center{
  text-align:center;
  margin-top: 0;
}
.txt-justify{
  text-align:justify;
}
.txt-azul{
  color:steelblue;
}
.bottom{
  margin-bottom:30px;
}
/* flex-container  - são as imagens em destaque 3 colunas*/
.flex-container{
  display:flex;
  flex-direction:row;
  flex-wrap: wrap;
  justify-content:space-between;
  width: 95%;
  margin-right: auto;
  margin-left: auto;
}
.flex-container1{
  display:flex;
  flex-direction:row;
  flex-wrap: wrap;
  justify-content:space-between;
  width: 60%;
  margin-right: auto;
  margin-left: auto;
}
.flex-item{
  width:30%;
  height:auto;
  cursor:pointer;
  margin-bottom:20px;
  transition:.4s;
  text-align:center;
}
.flex-item1{
  width:60%;
  height:auto;
  margin-bottom:20px;
  transition:.4s;
  text-align:center;
}
.flex-item2{
  width:45%;
  height:auto;  
  margin-bottom:20px;
  transition:.4s;
  text-align:center;
}
.flex-item:hover{
  transform: scale(1.05);
  transition:.4s
}
.flex-container-promocoes {
  display:inline-flex;
  flex-direction:row;
  flex-wrap: nowrap;
  justify-content:center;
}
.flex-item-promocoes{
  margin-left:5px;
  margin-right: 5px;
  height:auto;
  text-align:center;
  cursor:pointer;
  padding: 0 0 50px 0;
}
.flex-item-promocoes:hover{
  transform:scale(0.9);
  transition:.5s;
}
hr{ /* linha divisoria horizontal*/
  margin-top:30px;
  margin-bottom:30px;
}
figure{
  position:relative;
}
figure:hover figcaption.caption-promo{
  background-color:rgba(145, 162, 218, 0.6);
  transition:.5s;
}
figcaption.descricao{
  background-color: #c9c7c7;
  min-height: 200px;
  padding:20px ;
}
figcaption.caption-promo{
  position:absolute;
  line-height:1.1em;
  color: rgb(5, 131, 235);
  width:100%;
  background-color:rgba(0,0,0, 0);
  transition:.5s;
  font-size:1em;
}
/* rodapé */
section #rodape{
  width:100%;
  height:auto;
  background-color:rgb(218, 212, 243);
  padding:0 50px 0 50px;
}
.flex-rodape{
  height:auto;
  color:rgb(114, 112, 112);
  background-color: rgb(223, 223, 223);
  display:flex;
  flex-direction:row;
  justify-content: space-between;
  width: 100%;
  padding:10px 20px 10px 20px;
}
ul.menu-rodape{
  list-style-type:none;
  text-align: right;
}
ul.menu-rodape li a{
  color:rgb(94, 93, 93);
}
ul.menu-rodape li a:hover{
  text-decoration:underline;
}
/* media queries */
@media only screen and (max-width:768px){
  .container{
    width:100%;
  }
  ul.menu{
    display:none;
  }
  .menu-flex{
    justify-content:center;
  }
  .flex-item{
    width:49%;
    margin-left:auto;
    margin-right: auto;
  }
  .flex-item1{
    width:60%;
    margin-left:auto;
    margin-right: auto;
  }
  .flex-item2{
    width:98%;
    margin-left:auto;
    margin-right: auto;
  }
  .flex-container-promocoes{
    display:inline;
  }
  .flex-rodape{
    flex-direction:column;
    justify-content:center;
    text-align:center;
  }
  .flex-rodape-item{
    margin-top:20px;
  }
  ul.menu-rodape{
    display:none;
  }
  ul.menu-movel{
    display:block;
  }
  .flex-prof{
    flex-direction:column;
    align-items: center;
  }
  iframe{
    max-width:100%;
    height:300px;
  }
  table#dicas{
    display: none;
  }
}
@media only screen and (max-width:500px){
  .container{
    width:100%;
  }
  .flex-item{
    width:90%;
    margin-left:auto;
    margin-right: auto;
  }
  .flex-item1{
    width:90%;
    margin-left:auto;
    margin-right: auto;
  }
  .flex-item2{
    width:90%;
    margin-left:auto;
    margin-right: auto;
  }
  .flex-container-promocoes{
    display:block;
    background-color: #fff;
  } 
  .flex-item-promocoes{
    margin-bottom: 10px;
  }
}
.img-responsivo{
  max-width:100%;
  }
/* desktop grande */
@media only screen and (min-width:1367px) and (max-width:1980px) {
  header {
    height: auto;   
  }
  img#banner {
    width: 100%;
    height: auto;/* tamanho da imagem de fundo*/  
    /*object fit*/
    margin-top: 250px;
    object-fit: cover;
    offset-block-end: initial;
    object-position: top center
    /* object-fit: none (deixa imagem igual), fill (sempre preenche mas distorce), contain (sempre atinge o limite na altura ou largura), cover(capa acompanha a largura do container), scale-down (a imagem não redimensiona) */
  }
}
/* desktop gigante */
@media only screen and (min-width:1981px) and (max-width:2880px) {
  header {
    height: auto;   
  }
  img#banner {
    width: 100%;
    height: auto;/* tamanho da imagem de fundo*/  
    /*object fit*/
    margin-top: 150px;
    object-fit: contain;
    offset-block-end: initial;
    object-position: top center
    /* object-fit: none (deixa imagem igual), fill (sempre preenche mas distorce), contain (sempre atinge o limite na altura ou largura), cover(capa acompanha a largura do container), scale-down (a imagem não redimensiona) */
  }
} 
/* página quem somos*/
blockquote{
  margin-left:20px;
  padding:0 10px;
}
div.clearfix{
    overflow: auto;
    text-align: justify;
}
div.ex2 {
  max-width:500px;
  margin: auto;
}
div.ex3 {
  max-width:800px;
  margin: auto;
}
div.ex4 {
  max-width:80%;
  margin: auto;
}
img#missao{
  float: left;
  vertical-align: middle;
  padding-right:20px;
  width: 100px;
  height: auto;
}
/*video responsivo*/
.video-container{
  max-width: 80%;
  margin: auto ;
  margin-bottom: 50px;
}
.video{
  position: relative;
  padding-bottom: 50.25%;
}
.video iframe{
  position: absolute;
  width: 100%;
  height: 100%;
}
/* fim video*/
/*FIM PAG QUEM SOMOS*/

/* formulário de contato */
.field {
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #DDD;
  border-radius: 5px;
  font-size: 16px;
}
textarea {
  width: 100%;
  height: 250px;
}
input {
	display:block;
	margin-bottom:20px;
	border:1px solid #999;
	padding:8px;
  border-radius:3px;
}
input:focus {
	border:1px solid #ccc;
	outline:none;
}
input[type=submit] {
	width:100px;
	color:#FFF;
	background:linear-gradient(top, #F33, #933 );
	background:-webkit-linear-gradient(top, #F33, #933 );
	background:-moz-linear-gradient(top, #F33, #933 );
	border:1px solid #333;
	cursor:pointer;
}
input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
}
.btn{
  width: 100px;
  padding:10px;
  height:auto;
  border:1px solid #ddd;
  border-radius:3px;
  background-color:rgb(189, 27, 27);
  color:#fff;
  cursor:pointer;
  font-size: 16px;
}
.btn.verde{
  background-color:rgb(18, 76, 143);
}
.btn:hover{
  box-shadow: 3px 3px 5px #ccc;
}
/*FIM FORMULARIO CONTATO*/