  @charset "utf-8";
/* CSS Document */


/****************************************CSS RESET*******************************************/

*{ margin:0;
padding:0;
font-size:100%;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}

html, body{ overflow-x:hidden;}

ul { list-style:none;
}

a{ text-decoration:none;
cursor:pointer;
}


/****************************************SITE RESPONSIVO COOPCENT*******************************************/

/* HEADER */

header{ background-color: #FFFFCA;
 width:100%;
 top: 0;
 left:0;
 display: flex;
 justify-content: space-between;
 align-items: flex-end;



}

.fixar{
    position:fixed;
    margin-top: 0px !important;
}

header img{ width:120px;
  height: 120px;
padding: 10px;
margin-left: 20%;
}


/* MENU */

.menu{width: 800px;
  height:54px;
}

.menu ul{ list-style:none;
position: absolute;

}

.menu ul li{ width:160px;
float:left;

}

.menu ul li a:hover{
  -o-transition:.7s;
    -ms-transition:.7s;
    -moz-transition:.7s;
    -webkit-transition:.7s;
    /* ...and now for the proper property */
    transition:.7s;
    background-color: #24c647;

}


.menu a{ padding:15px;
display:block;
text-decoration:none;
text-align:center;
background:#030;
color:#FFF;
font-family: 'Oswald', sans-serif;

}

.menu ul li ul{ width:175px;
	display:block;
	height:auto;
  padding:0;
  opacity:0;
	pointer-events:none;

  z-index: 9999;
}

.menu ul ul li{ float:none;
border-bottom:1px solid #003D59;
}


.menu ul ul li a{ background: #0080C0;
font-size:90%;
font-family: 'Open Sans', sans-serif;
}


.menu ul li:hover ul{
  left:auto;
  pointer-events:auto;
  opacity:0.9;
  transition:  opacity 0.6s ease 0s ;
}


.menu ul li a:hover{ background:#008000;}

.menu ul li a#verm:last-child:hover { background: #750000;}

.menu ul li a#btContato:last-child:hover { background: #750000;}

.menu ul ul li a:hover{ background: #0093D9;}


label[for="btMenu"]{
background:#003300;
color:#FFFFFF;
font-family: 'Open Sans', sans-serif;
text-align:center;
font-size:30px;
cursor:pointer;
width:100px;
height:100px;
padding: 10px;
padding-top: 25px;
display:none;
}

#btMenu{ display:none;

}

/* REDES SOCIAIS */

.redesSociais{
  margin-bottom: 30px;
  margin-right: 2%;

}

.redesSociais ul { list-style:none;

}

.redesSociais ul li{
float:left;
}

.redesSociais ul li a{font-size:24px; color:#8b956f; display:block; padding:10px;

  -o-transition:.7s;
    -ms-transition:.7s;
    -moz-transition:.7s;
    -webkit-transition:.7s;
    /* ...and now for the proper property */
    transition:.7s;
   }

.redesSociais ul li a:hover{ color: #0204cc;}

.redesSociais ul li:last-child:hover > a{ color: #F00;}

.redesSociais ul li:first-child:hover > a{ color: #137c1a;}



  /* Slideshow */

  .slidershow{
    display: flex;
    width: 100%;
  }

  .demo_wrapper {
  	width: 100%;
  	height: 100%;
  	margin: 0 auto;
  	padding-bottom: 20px;
  }
  @media only screen and (max-device-width: 800px), screen and (max-width: 800px) {
    .demo_wrapper {
      width: 80%;
    }
  }
  .demo_block {
  	width: 100%;
  }





/* Area descricao coopcentabc */

.descricao_coopcent{ display: flex;
  flex-direction: row;
width: 40%;
float: left;

}

.descricao_coopcent .item_descricao_coopcent{ width: 100%;
text-align: center;
align-self: center;
}

.descricao_coopcent .item_descricao_coopcent .grid_descricao{ width: 100%;

}

.descricao_coopcent .item_descricao_coopcent .grid_descricao li a{ display: block;
  width: 100%;
  color: #000000;
  background-color: #F4FFF4;
     padding-bottom: 30px;

 }

.grid_descricao:hover { transition: transform .5s; /* Animation */
  transform: scale(1.05); }

.item_descricao_coopcent img{ width: 170px;
height: 170px;
padding: 20px;}

.item_descricao_coopcent p{ padding-left: 30px;
padding-right: 30px;
font-family: 'Oswald';
font-size: 1.4rem;
color: #005900;}




/* Area serviços prestados */

.area_servicos {
  display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  width: 60%;
	padding-top:10px;
  padding-bottom:40px;
  padding-left:10px;
  padding-right:10px;
text-align: center;


}

.area_servicos .grid_servicos{
width:100%;
height: 350px;
}

.area_servicos .grid_servicos li{
	width:25%;
	float:left;
  height: 200px;
  margin-top: 10px;



 }

.area_servicos .grid_servicos li a{ display: block;
padding:20px;
border-radius: 15px;


}

.area_servicos .grid_servicos li a:hover{ background-color: #F9FFF9; color: #123713;}

.area_servicos .grid_servicos li i{ font-size: 40px; color: #abacb0;}

.area_servicos .grid_servicos li a:hover i{color: #1d550a;}

.area_servicos .grid_servicos li a:hover p{ color: #0080C0;}

.area_servicos .grid_servicos li h4{ padding-top: 5px;padding-bottom: 5px; font-size: 0.8rem; color: #13732e;}

.area_servicos h1{text-align: center;
padding-bottom:15px;
  font-size: 1.4rem;
  color:#c4c0c0;
  border-bottom: 2px solid #c4c0c0;
  text-align: center;
  width: 50%;
  margin-left: 25%;
  align-items: center;
  justify-content: center;

  }

.area_servicos .grid_servicos li p{ color: #919191;
font-size:14px;}

/* Area frotas e equipamentos */

.frotas{ margin-top:40px;

}

.frotas .grid_frotas{display: flex;
width: 100%;
background-color:#ffffff;
padding-top: 30px;
padding-bottom: 30px;
padding-left: 10px;
padding-right: 10px;
text-align: center;
justify-content: center;

}




.frotas .grid_frotas li{ padding: 0 15px;
  padding-bottom: 20px;
}


.frotas .grid_frotas li img{width: 400px; height: 300px;}

.frotas .grid_frotas li h4{ padding-top: 5px;padding-bottom: 5px; font-size: 1.4rem; color: #FF8000; text-align: center;}

.frotas h1{ text-align: center;
  padding-bottom: 15px;
  font-size: 1.4rem;
  color:#c4c0c0;
  border-bottom: 2px solid #c4c0c0;
  text-align: center;
  width: 50%;
  margin-left: 25%;
  align-items: center;
  justify-content: center; }

.frotas .grid_frotas li p{ color: #919191;}



/* Parcerias */

.parcerias{ margin-top:5px;}

.parcerias .grid_parcerias{display: flex;
width: 100%;
background-color:#ffffff;
padding-bottom: 30px;
padding-left: 10px;
padding-right: 10px;
text-align: center;
justify-content: center;
}




.parcerias .grid_parcerias li{ padding: 0 15px;
  padding-bottom: 20px;
  width: 50%;
}


.parcerias .grid_parcerias li img{width: 180px; height: 120px;}

.parcerias .grid_parcerias li h4{ padding-top: 5px;padding-bottom: 5px; font-size: 1.4rem; color:#9919cd; text-align: center;}

.parcerias h1{ text-align: center;
  padding-bottom: 15px;
  font-size: 1.4rem;
  color:#c4c0c0;
  border-bottom: 2px solid #c4c0c0;
  text-align: center;
  width: 50%;
  margin-left: 25%;
  align-items: center;
  justify-content: center; }

.parcerias .grid_parcerias li p{ color: #919191;}

.parcerias .grid_parcerias li p span{ color: #7708a4;}



/* Area grupo cooperativas */

.cooperativas_grupo .grid_cooperativas{display: flex;
width: 100%;
background-color:#ffffff;
padding-top: 30px;
padding-bottom: 30px;
padding-left: 10px;
padding-right: 10px;
text-align: center;
}


.cooperativas_grupo .grid_cooperativas li{ padding: 0 15px;
  padding-bottom: 20px;
}


.cooperativas_grupo .grid_cooperativas li img{width: 100px; height: 100px;}

.cooperativas_grupo .grid_cooperativas li h4{ padding-top: 5px;padding-bottom: 5px; font-size: 1.4rem; color: #49b4f0; text-align: center;}

.cooperativas_grupo h1{ text-align: center;
  padding-bottom: 15px;
 font-size: 1.4rem;
  color:#c4c0c0;
  border-bottom: 2px solid #c4c0c0;
  text-align: center;
  width: 50%;
  margin-left: 25%;
  align-items: center;
  justify-content: center; }

.cooperativas_grupo .grid_cooperativas li p{ color: #919191;}





/* Materiais recicláveis */

.area_materiais .grid_materiais{display: flex;
width: 100%;
background-color:#ffffff;
padding-top: 30px;
padding-left: 10px;
padding-right: 10px;
text-align: center;
}


.area_materiais .grid_materiais li{ padding: 0 15px;
width: 20%;

}

.area_materiais .grid_materiais li a{ display: block;
width: 100%;

padding: 30px;
border-radius: 15px;}

.area_materiais .grid_materiais li a:hover{color: #123713;}

.area_materiais .grid_materiais li i{ font-size: 60px; color: #abacb0;}

.area_materiais .grid_materiais li a:hover i{color:#cc6c2f;}

.area_materiais .grid_materiais li a:hover p{ color: #000000;}

.area_materiais .grid_materiais li h4{ padding-bottom: 5px; font-size: 1.4rem; color:#cc6c2f; text-align: center;}

.area_materiais h1{ text-align: center;

  padding-bottom: 15px;
  font-size: 1.5rem;
  color:#c4c0c0;
  border-bottom: 2px solid #c4c0c0;
  text-align: center;
  width: 50%;
  margin-left: 25%;
  align-items: center;
  justify-content: center; }

.area_materiais .grid_materiais li p{ color: #919191;}

/* Area noticias e redes sociais */

.descricao_noticias{ display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
height:250px;
align-content: center;

}


.item_descricao_noticias{ width: 25%;
text-align: left;
position:relative;

}

.item_descricao_noticias .grid_descricao_noticias li {width: 100%;


  }

.item_descricao_noticias .grid_descricao_noticias li a{ display: block;
  width: 100%;
   color: #000000;
  }

 .item_descricao_noticias .grid_descricao_noticias li a img{ width:100%;
 height:100%;
 position:absolute;
 z-index:2}



.item_descricao_noticias p{ padding:15px;
font-family: 'Open Sans', sans-serif;
font-size: 1.0rem;
color: #FFF;
text-decoration:underline;
position:absolute;
z-index:4;
width:320px;
margin-top:150px;
background: #004F00;

}




/* NEWSLETTERS */

.newsletters{display: flex;
flex-direction: column;
align-items: center;
width: 100%;
background-color:#fffbfb;
padding-bottom: 30px;
padding-left: 10px;
padding-right: 10px;
padding-top: 30px;

text-align: center;
}

.newsletters h1{ text-align: center;

   padding-bottom: 15px;
   padding-left: 35px;
   padding-right: 35px;
   font-size: 1.5rem;
   color:#daba0f;
   border-bottom: 2px solid #daba0f;
   text-align: center;
   align-items: center;
   justify-content: center; }

.newsletters form{ display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
width: 80%;
max-width: 800px;
padding-top: 40px;
padding-bottom: 40px;}

.newsletters input{ padding: 15px; border: 1px solid #daba0f; border-radius: 4px; margin-right: 15px; flex: 1;}

.newsletters button{padding: 15px; background-color: #daba0f; color: #f9fffd; text-transform: uppercase; border: none; border-radius: 4px; cursor: pointer;}


/* RODAPE */

.rodape{ display: flex;
flex-direction: column;
background-color: #012e03;
padding: 25px;
align-items: center;
justify-content: center;
text-align: center;
}

.rodape ul{ display: flex;
margin-bottom: 15px;}

.rodape ul li{ margin-right: 10px;}

.rodape ul li:last-child{ margin-right:0px; }

.rodape ul li a{ color: #ffffff; font-size: 2rem;}

.rodape p{ color: #ffffff;}

/* EFEITOS PAGINAS SECUNDÁRIAS */

.tab a i{ font-size: 36px; float: left; }

.tab a p {padding-left: 10px; float: left; padding-top: 10px;}

.tab a:hover{
color: #d91829;}

/* PAGINAS SISTEMA DE ABAS*/

.abas_conteudos{ margin-top: 20px;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 15px;}

.tabs {
	display: flex;
	flex-wrap: wrap; // make sure it wraps

}
.tabs label {
	order: 1; // Put the labels first
	display: block;
	padding-right: 10px;
	padding-left: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-right: 0.2rem;
	cursor: pointer;
  background: #90CAF9;
  font-weight: bold;
  transition: background ease 0.2s;
  font-size:12px;
}
.tabs .tab {
  order: 99; // Put the tabs last
  flex-grow: 1;
	width: 100%;
	display: none;
  padding: 1rem;
  background: #fff;
}
.tabs input[type="radio"] {
	display: none;
}
.tabs input[type="radio"]:checked + label {
	background: #ccfac8;
}
.tabs input[type="radio"]:checked + label + .tab {
	display: block;
}


/* PAGINA CONTATO */

.container_contato {
  width: 50%;
  margin: 0 auto;
  padding-top: 30px;
}

.form-contact {
  width: 100%;
  font-family: "Arial", Times, serif;
}

.form-contact-input {
  width: 100%;
  color: #292929;
  font-size: 18px;
  background-color: #E9E9E9;
  border: 1px solid #E9E9E9;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  height: 40px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
  text-indent: 20px;
}

.form-contact-textarea {
  width: 100%;
  color: #292929;
  font-size: 18px;
  background-color: #E9E9E9;
  border: 1px solid #E9E9E9;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  height: 200px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
  text-indent: 20px;
  padding-top: 16px;
  padding-left: 0;
  padding-right: 0;
  font-family: "Arial", Times, serif;
}

.form-contact-button {
  width: 100%;
  font-size: 18px;
  border-radius: 4px;
  color: #fff;
  height: 40px;
  opacity: .8;
  margin-bottom: 20px;
  cursor: pointer;
  background: #197311;
  display: block;
  border: none;
  transition: 1s;
}

.form-contact-button:hover {
  opacity: 1;
}

.map-responsive{
        height:500px;

    width: 70%;
    margin-left: 25%;
}

.map-responsive iframe{

    width: 70%;

}


/* MEDIA QUERYS */

@media (max-width: 45em) {
  .tabs .tab,
  .tabs label {
    order: initial;
  }
  .tabs label {
    width: 100%;
    margin-right: 0;
    margin-top: 0.2rem;
  }
}


/* BREAKPOINTS - MOBILE*/

@media(max-width: 700px){

  .container_contato {
    width: 80%;
    margin: 0 auto;
    padding-top: 30px;

  }

  .map-responsive{
          height:300px;
      width: 90%;
padding-bottom:20px;
margin-left: 10%;
  }

  .map-responsive iframe{

      width: 90%;
        height:300px;
        padding-bottom:20px;

  }


  .descricao_noticias{ display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  background-color: #d6f8fa;
  align-content: center;


  }

  .item_descricao_noticias{ width: 100%;
  text-align: center;

  }


.newsletters{ padding-top: 35px;}

.newsletters input{ flex-basis: 100%;
margin-bottom: 15px;
}

}

@media(max-width: 1300px){

  .item_descricao_coopcent p{ padding-left: 30px;
  padding-right: 30px;
  font-family: 'Oswald';
  font-size: 0.9rem;
  color: #3d3d3d;}




  .cooperativas_grupo .grid_cooperativas{flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    align-items: center;

      }



      .grid_cooperativas li{ width:50%;}



.area_servicos{ width: 100%;
  flex-direction:row;
   flex-wrap: wrap;}

      .area_servicos .grid_servicos{
        width: 100%;
        height: 760px;

      }

      .area_servicos .grid_servicos li{ width: 50%;


      }

      .area_servicos .grid_servicos li a{
        width: 100%;

      }

      .area_servicos h1{ width: 100%;
        margin-left: 5%;

    }


.frotas{ height:1800px;
overflow: hidden;}

    .frotas .grid_frotas{ width: 100%;
      flex-direction: column;
      flex-wrap: wrap;
    padding-bottom: 50px;
    height: 1800px;
}


    .frotas .grid_frotas li{ width:100%;



  }

    .frotas .grid_frotas li a{
    }

    .frotas h1{ width: 100%;
      margin-left: 5%;

  }


/***********************************/

.parcerias{
overflow: hidden;}

    .parcerias .grid_parcerias{ width: 100%;
      flex-direction: column;
      flex-wrap: wrap;
    padding-bottom: 50px;

}


    .parcerias .grid_parcerias li{ width:100%;



  }

      .parcerias .grid_parceriass li a{
    }

    .parcerias h1{ width: 100%;
      margin-left: 5%;

  }

/***********************************/

.area_materiais{ height: 560px;
}

      .area_materiais .grid_materiais{ flex-direction: row;
        flex-wrap: wrap;
      padding-bottom: 50px;

}

      .area_materiais .grid_materiais li{ width: 50%;
      height: 140px;


    }

      .area_materiais .grid_materiais li a{
      }

      .area_materiais h1{ width: 90%;
        margin-left: 5%;

    }





}

@media(max-width: 900px){

/* Area noticias e redes sociais */

.descricao_noticias{ display: flex;
flex-direction: column;
width: 100%;
height:1000px;
flex-wrap: wrap;
overflow: hidden;

}


.item_descricao_noticias{ width: 100%;
  height: 250px;
text-align: left;
position:relative;

}

.item_descricao_noticias .grid_descricao_noticias li {width: 100%;


  }

.item_descricao_noticias .grid_descricao_noticias li a{ display: block;
  width: 100%;
   color: #000000;
  }

 .item_descricao_noticias .grid_descricao_noticias li a img{ width:100%;
 height: 260px;
 position:absolute;
 z-index:2}



.item_descricao_noticias p{ padding:15px;
font-family: 'Open Sans', sans-serif;
font-size: 1.0rem;
color: #FFF;
text-decoration:underline;
position:absolute;
z-index:4;
width:80%;
margin-top:150px;
background: #004F00;

}

}

@media(max-width: 1168px){





  .descricao_coopcent{flex-direction: column;
    width: 100%;


}

 .item_descricao_coopcent{width: 100%;
 padding-bottom: 30px;}





  .cooperativas_grupo h1{
   width: 90%;
   margin-left: 5%;
 padding: 20px;}

    label[for="btMenu"]{ display: block;
      z-index: 9999;
      margin-left: 40%;
      position: absolute;

    	}

	#btMenu:checked ~ .menu{

	  display: block;
	  transition: all .7s;
    margin-left: 0%;
    position: absolute;
    margin-top: 50px;


	}



	.menu{ position: relative;
    z-index: 9999;
    margin-left: -200%;
margin-top: 50px;
    position: absolute;
	transition: all .7s;
    width:100%;

	}

  .menu ul{ list-style:none;
  position: relative;

  }

	.menu ul li {
		width:100%;
		float:none;


		}

		.menu ul ul{
		overflow: hidden;
		max-height:0;
		transition: all .7s;
  }

  .menu ul li ul{
  width: 100%;
}

		.menu li:hover ul{ height:auto;

		max-height:890px;
 }



}
