body{margin: 0;} 
ul,li{margin: 0; padding: 0; list-style: none;}
a{text-decoration: none; color: #666666} /*saca los puntos  que trae por defecto*/
.clear{clear: both;}
h1,h2,h3,h4,h5,h6{font-weight: normal;} /*saca la negrita que trae por defecto*/

body{
	font-family: 'Open Sans', sans-serif;
   font-size: 15px;
  color: #666666;
  text-align: center;
  margin: 0;
  min-width: 320px;
	}

header{
    height: 38px;
    vertical-align: middle;
    background-color: #0e101e;
    color: lightgray;
    padding-top: 2px;
}

.container{
	padding-left: 30px;
	padding-right: 30px;
	margin-left: auto;
	margin-right: auto;
	max-width: 1200px;
  }

.container-header{
	margin-top: 4px;
	margin-bottom: 4px;
	}

.header-left{
	color: ;
	font-size: 0.7em;
	float: left;
	margin: 0;
	margin-top: 7px
	}

.header-right{
	color: ;
	font-size: 0.7em;
	float: right;
	margin: 0;
  padding-top: 5px;
	}

.header-right li{
  display: inline-block;
  padding-left: 1.5em;
}

.header-right li:first-child{
  border-right: 2px solid lightgray;
  padding-right: 2em;
}

.header-right ul li a{
	color: lightgray;
  font-weight: normal;
  font-size: 1.3em;
	}

.header-right ul img{
	background-image: url(../imagenes/6iconos11x11.svg);
	height: 11.2px;
	width: 11.2px;
	margin: 0 3px;
	}


/* MENU - Start of useful code */
/* header */

.header-nav-container{
  background: rgb(239, 49, 37);
}

.header {
  font-family: 'Fira Sans', sans-serif;
  background-color: #fff;
  box-shadow: 1px 1px 4px 0 rgba(0,0,0,.3);
  position: fixed;
  width: 100%;
  height: 70px;
  z-index: 93;
}

.header ul {
  margin: 0;
  padding: 0;
  /*list-style: none;*/
  overflow: hidden;
  background-color: #fff;
}

.header li a {
  display: block;
  padding: 20px 20px;
  border-right: 1px solid #f4f4f4;
  text-decoration: none;
  height: 30px;
}

.header li a:hover,
.header .menu-btn:hover {
  background-color: #f4f4f4;
}

.menu .movil a{height: 15px}

.movil a{
  margin-right: 20px;
  text-align: right;
  border-right: 0 !important;
  padding: 0 20px 8px !important;
  color: #41b4e091;
}

.app a{margin-bottom: 15px !important}

.header .logo {
  display: block;
  float: left;
  margin-left: 160px;
  /*font-size: 2em;
  padding: 10px 20px;
  text-decoration: none;*/
}

.header .logo img{
  width: 90%;
  padding: 12px 0 10px;
  vertical-align: middle;
}

/* menu */

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

.presionado{color: #41B4E0}

/* menu icon */

.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.header .menu-icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 5px;
}

.header .menu-icon .navicon:after {
  top: -5px;
}

/* JS para efecto de subir del menú*/
/* https://www.w3schools.com/howto/howto_js_navbar_sticky.asp?fbclid=IwAR1cxxTyv-YKOOT9UNdRxpHkiFLDhPzTXe2B-uhEYXYq3VVDEuE3ZRXY9zc */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 60px;
}



/* menu btn */
.header .menu-btn {
  display: none;
}

.header .menu-btn:checked ~ .menu {
  max-height: 420px;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

/* 48em = 768px 
  68.75 = 1100px */

@media (min-width: 68.75em) {
  .header li {
    float: left;
  }
  .header li a {
    padding: 30px 30px 10px;
  }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .header .menu-icon, .movil {
    display: none;
  }
}


input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

input[type=number] { -moz-appearance:textfield; }

/* FIN DE MENÚ */


/* SLIDE */
/*al ponerle width 100% me ocupa el 100 del ancho, y le tengo que poner height auto para que se agrande proporcionalmente al hacerlo responsive*/
.slide img{
  width: 100%; 
  height: auto; 
  margin-top: 0.2em;
  } 

h1{
   /*font-family: 'Pragati Narrow', sans-serif;*/
  font-family: 'Meddon', cursive;
  color: white;
  font-size: 3.5em;
  font-weight: bold;
  position: absolute;
  bottom: 20%;
  z-index: 92;
  text-align: left;
  margin-left: 1em;
  line-height: 1.3;
  text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.7);
  }

h1 span{
  font-size: 1.2em;
  /*line-height: 0.5;*/
}

.slide .container{
  margin-left: initial;
}


/* JQUERY del autor, slide*/
.rslides {
  position: relative; /*POR QE SEGURO VA A SER PADRE DE ALGO CON POSICION ABSOTULA*/
  list-style: none; /*SE PUEDE SACAR POR QUE YA LO TENGO DECLARADO MÀS ARRIBA EN "ul,lí{}" */
  overflow: hidden; /*es desvorde, SE UTILIZA PARA LO QUE SOBRESALE DE UNA PAGINA: lo muestra o lo deja oculto*/
  width: 100%;
  padding: 0; /*SE PUEDE SACAR POR QUE YA LO TENGO DECLARADO MÀS ARRIBA EN "ul,lí{}" */
  margin: 0; /*SE PUEDE SACAR POR QUE YA LO TENGO DECLARADO MÀS ARRIBA EN "ul,lí{}" */
  }

.rslides li {
  -webkit-backface-visibility: hidden; /**/
  position: absolute; /*se acomodan respecto de la ul*/
  display: none;  /*les dice que no se muestren*/
  width: 100%;
  left: 0; /*la posicion absoluta*/
  top: 0;  /*la posicion absoluta*/
  }

.rslides li:first-child { /*al primer li*/
  position: relative;
  display: block; /*le dice que se muestre*/
  float: left; 
  }

.rslides img { /*acomoda el tamaño de las imágenes y las transforma en bloque para que puedan reconocer el alto y ancho y responder al responsive*/
  display: block; /*le dice que se muestre*/
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }

.rslides1_s1, .rslides1_s2, .rslides1_s3, .rslides1_s4{ /*con esto le doy el estiloa los botoncitos que me indican que foto muestra*/
  width: 1em;
  height: 1em;
  background-color: #444;
  display: inline-block;
  }


/* BANDA x */
.bandax{
  background-image: url(../imagenes/noisy_net_@2X_B.png);
  color: white; 
  position: relative; 
  margin-bottom: 2em;
  padding: 1.1em 0;
}

.bandax p{padding: 0.6em 0; margin: 0; font-size: 0.85em;}
.bandax img{margin: 0 1em}
.banda-emergencia{display: inline-block; }
.center{vertical-align: middle; height: 28px;}
/*.telef-emergencia-a{font-size: 1.4em; font-weight: bold;}*/
.telef-emergencia-g{font-size: 1em; font-weight: bold;}


/*Inicio de SECTION servicios en INDEX*/
section{
  margin: 6em 0;
  padding:3.5em 0;
}

.coope{ /*solo para el section de "acerca de la cooperativa"*/
  margin-bottom: 0 !important;
  padding-bottom: 10em !important;
}

.info-servi{padding-top: 0}
.info-servi article{
  border: 1px solid white;
  width: 250px;
  height: 130px;
  display: inline-block;
  margin: 3px 3px;
  background-color: #E0DCDC;
}

.info-servi .bloque1 article:first-child{
  background-image: url(../imagenes/drop.svg);
  background-repeat: no-repeat;
} /*agua*/
.info-servi .bloque1 article:nth-child(2){
  background-image: url(../imagenes/lightbulb.svg);
  background-repeat: no-repeat;
} /*luz*/
.info-servi .bloque2 article:first-child{
  background-image: url(../imagenes/cross.svg);
  background-repeat: no-repeat;
} /*sepelio*/
.info-servi .bloque2 article:nth-child(2){
  background-image: url(../imagenes/phone.svg);
  background-repeat: no-repeat;
} /*telefono*/

.info-servi div{
  display: inline-block;
}

.info-servi article p{
  color: #3A3636;
  margin: 45px 45px 45px 60px ;
  text-transform: uppercase;
  font-weight: bold;
  text-align: left;
  padding-left: 10px
}

.info-servi .bloque1 article:first-child p{border-left: 5px solid #5072ca;} /*agua*/
.info-servi .bloque1 article:nth-child(2) p{border-left: 5px solid #F2C100;} /*luz*/
.info-servi .bloque2 article:first-child p{border-left: 5px solid #ca8748;} /*sepelio*/
.info-servi .bloque2 article:nth-child(2) p{border-left: 5px solid #7acc36;} /*telefono*/

/*COLORES POR SERVICIOS*/

/*  #5072ca agua*/
 /* #F2C100 luz*/
 /* #ca8748 sepelio*/
 /* #7acc36 telefono*/

 
/*Inicio de SECTION ultimas noticias en INDEX*/
.noti div{
  display: inline-block;
}

.noti article {
  margin-right: 35px;
  width: 270px;
  vertical-align: top;
  display: inline-block;
  /*background-color: rgba(243, 252, 210, 0.5);*/
  }

.noti .bloque2 article:nth-child(2){
  margin-right: 0;
}

.noti article img{
  width: 98.5%; 
  box-shadow: 0 1px 3px grey;
}

.txt-noti{
  min-height: 300px
}

h2{
  text-transform: uppercase; 
  margin-top: 1em;   
  font-weight: bold;
  border-bottom: 2px solid;
  padding-bottom: 15px;
  margin-bottom: 30px;
}

article h3{
  text-transform: uppercase; 
  text-align: center; 
  font-size: 0.9em;
  font-weight: bold;
  padding: 0 1.2em;
  margin-top: 3em;
  margin-bottom: 0
}

.noti article h3{background-color: transparent;}

.noti p{
  text-align: center;
  font-size: 0.9em;
  padding: 0 1.2em;
  height: 150px;
  overflow: hidden;
  line-height: 1.6em;
  margin-bottom: 0;
}

/*
.ir-a-noticia{
    /*display: inline-block !important;
    margin-bottom: 30px;
    margin-top: 50px;
    height: 30px;
} */
/*
.ver-mas-color{
  color: gray; /*#456DB7;
  font-size: 0.85em;
  text-transform: uppercase; 
  text-align: center;
  border: 0.7px solid gray;
  padding: 12px 20px;
  margin: 10px auto;
} */
/*
.ver-mas-color:hover{
  background-color: #FFDA66;
  color: white;
  font-weight: bold;
} */
.boton{
  margin-bottom: 30px;
  margin-top: 50px;
  height: 30px;
}

.boton a{
  color: gray; /*#456DB7;*/
  font-size: 0.85em;
  text-transform: uppercase; 
  text-align: center;
  border: 0.7px solid gray;
  padding: 12px 20px;
  margin: 10px auto;
}

.boton a:hover{
  background-color: rgba(138, 180, 248, .25);
}

.container-co{
  padding-left: 30px;
  padding-right: 30px;
  margin-left: auto;
  margin-right: auto;
  max-width: 900px;
}

.coope{
  background-image: url(../imagenes/dust_scratches.png);
  background-repeat: repeat;
  margin-top: 2em;
}

.img-servi {
    max-height: 350px;
    /*width: 900px;*/
    /*border: #fff 2px solid;*/
    overflow: hidden;
}

.img-columna-imagen{
  width: 100%;
  position: relative;
}

div.index{
  max-height: 500px; 
  overflow: hidden;
}

.index img{
  position: relative;
  top: -70px
}

.img-columna-imagen img{
  width: 100%; 
  margin-bottom: 15px
} /*varias imagenes en bloque con texto al costado*/

.txt-index, .txt-ser{
  display: inline-block; 
  vertical-align: top
}

.txt-index p, .txt-nos p, .txt-ser p, .txt-noti p{
  margin-left: 0; 
  line-height: 1.6em;
  text-align: left;
  /*padding-bottom: 2em;*/

}


/*Fotter*/
footer{
  background-image: url(../imagenes/noisy_net_@2X_B.png);
  height: 25em;
}

.info_footer ul li a, .info_pipinas li{
  color: #adacac;
}

footer div{
  display: inline-block;
}

footer div:first-child{
  height: 25em;
  overflow: hidden;
  float: left;
  margin-left: -5%;
  width: 40em;
}

footer .img_footer{
  height: auto;
  overflow: hidden;
  objet-fit: cover;
  opacity: 60%;
  margin-top: -22%;
  margin-left: 12%;
  width: 40em;
}

footer div:nth-child(2){
  float: right;
  margin-top: 4.5em ;
  margin-right: 25em; 
  text-align: left;
}

/*h4{
  text-transform: uppercase;
  font-size: 0.8em;
  margin-bottom: 12px;
  padding-bottom: 4px;
  border-bottom: 1px solid
}*/

.info_footer li{
  line-height: 2em;
  font-size: 0.9em;
}

.info_footer a:hover{
  color: #41B4E0
 }
  
.ofi_virtual{
  font-weight: bold;
  font-size: 1.2em;
}

.logo_footer{
  width: 225px;
  margin: 4em 0 0.3em;
}

.info_pipinas li{
  line-height: 1.5em;
  font-size: 0.75em;
}

.data_footer{
  width: 65px;
  display: list-item;
  margin-top: 1.3em;
  filter: grayscale(1);
  -webkit-filter: grayscale(1);
}

footer div:nth-child(3){
  vertical-align: bottom;
}

.fin{
  margin: 1.8em 0;
  font-size: 0.7em;
  color: #B2B2B2
}


.fondo-n{
  /*background-image: url(../imagenes/portada1.jpg);
  background-repeat: no-repeat;*/
  max-width:1940px !important;
  height: 400px;
  overflow: hidden;
  padding-top: 70px;
}

.fondo-n img{
  width: 100%;
  height: auto;
  opacity: 0.8;
}

.titulo{
  font-family: 'Meddon', cursive;
  color: #fffbfb;
  font-size: 3.5em;
  font-weight: bold;
  position: absolute;
  bottom: 6em;
  z-index: 92;
  text-align: left;
  position: relative;
  float: right;
  margin-right: 5em;
  line-height: 1.3;
  text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.7);
  bottom: 210px;
}


/* NOSOTROS.html */
.container-nos{
  position: relative;
  bottom: 350px;
} 

.texto-centrado{
  text-align: center; 
  line-height: 1.8em;
}

.colum1{
  position: static;
  width: 38%;
  min-width: 320px;
  display: inline-block;
  vertical-align: middle;
  background-color: #ffffffcf;
  border: 12px solid #ffffffcf;
  padding-bottom: 20em;
}

.colum2{
  position: static;
  width: 50%;
  min-width: 440px;
  display: inline-block;
  vertical-align: middle;
  background-color: #ffffffcf;
  border: 12px solid #ffffffcf;
  padding-bottom: 20px;
  margin-right: 3%;
}

.nos-columna-imagen{
  width: 85%;
}
 
.txt-nos{
  margin: 15px 7px;
}

.colum2 .txt-nos p{
  text-align: justify;
  width: 85%;
  margin: auto
}

/*Historia*/
.texto1{
  column-count: 2;
  column-gap: 7%;
  column-rule: 1px solid lightblue;
  text-align: justify;
  /*width: 90%;*/
  margin: 0 auto;
}

#fotos{
  margin-bottom: 0;
  padding-bottom: 0;
}

/*SERVICIO.html*/

.container-ser{
  position: relative;
  bottom: 300px;
  padding-left: 0px;
  padding-right: 0px;
  margin-left: auto;
  margin-right: auto;
  max-width: 990px;
  margin-bottom: 0;
  padding-bottom: 0;
}


.container-ser h2, .container-ser h3 {margin-top: 2.5em}

.container-ser div:first-child{background-color: white;}

.borde{
  padding: 0.1em 2.5em 0 2.5em;
  margin-bottom:5em;
} 

.ultimo{margin-bottom: 13em; }

.botones{text-align: right;}

.txt-ser .boton{display: inline-block;}



/*NOTICIAS.html*/
h3{
    text-align: left;
    text-decoration: underline;
    text-transform: uppercase;
    background-color: lightgoldenrodyellow;
    padding: 5px;
}

.img-noti{
  float: left;
  width: 100%;
  max-width: 450px;
  height: auto;
  margin-right: 2em;
  margin-bottom: 0.8em;
  margin-top: 7px;
  box-shadow: 0 1px 3px grey;

}

.txt-noti{
  display: inherit;
}

.separador{
  border-bottom: 1px solid gray;
  padding-bottom: 8em;
}



/*COMUNIDAD.html*/
.pronostico{margin-top: 2em}

#cont_fedefbf497d62df14b0aeaafaee453a6, #cont_55d435dfb2eccbe879e09394b8a4c2d6{
  margin-top: 3em !important;
  margin-bottom: 3em !important;
}

#cont_55d435dfb2eccbe879e09394b8a4c2d6{display: none;}

    /*Tablas- telefonos útiles*/
.telefonos{
  background-color: whitesmoke;
  margin-top: 15em;
  padding-bottom: 3em;
}

div.borde.telefonos div.container {
  background-color: transparent;
}

table{
  width: -webkit-fill-available; 
  margin: auto;
  /*background-image: url(../imagenes/noisy_net_@2X_B.png);
  height: 25em;*/
}

tr{
  margin: auto; 
  height: 2.5em;
}

.color{background-color: rgba(255, 255, 255, 0.6)}

/*Farmacias*/
section#farmacias{
  margin-top: 8em;
  margin-bottom: 0em;
  padding-bottom: 0em;
}

#farmacias article{
  display: inline-block; 
  vertical-align: top; 
  margin-right: 3em;
}

#farmacias article, #farmacias h3{
  text-align: center;
}

#farmacias h2{
  text-align: center; 
  margin-bottom: 3em
}



/*CONTACTO.html*/
.container-contacto{ margin-top: 2em}
.container-contacto p{margin: 0; line-height: 1.6em;}
.container-contacto article{text-align: left;}

article.contacto{padding: 3em 4.5em}

article.contacto{
  vertical-align: top;
  padding: 3em 10em;
  display: inherit;
  border: 1px solid;
  margin-bottom: 2em;}


/*COLORES POR SERVICIOS*/

/*  #5072ca agua*/
 /* #F2C100 luz*/
 /* #ca8748 sepelio*/
 /* #7acc36 telefono*/



/* MEDIA QUERIES */
@media screen and (max-width: 1700px){
  footer div:nth-child(2){margin-right: 17em;}
  footer div:first-child {margin-left: -10%}
}

@media screen and (max-width: 1350px){
  footer div:nth-child(2){margin-right: 12em;}
  footer div:first-child {width: 35em;}
  div.titulo{margin-right: 1.6em}
}

@media screen and (max-width: 1350px){
  .noti .bloque1{margin-bottom: 35px; margin-left: 35px;}
}

@media screen and (max-width: 1190px){
  footer div:nth-child(2){margin-right: 9em;}
  footer div:first-child {width: 25em}
}

@media screen and (max-width: 1100px){
  .header .logo{margin-left: 80px;}
  .header-right, .header-left{display: none;}
  /*.header{padding: 12px 0;}*/
  header{border-bottom: 0; height: 10px}
  .borde{padding: 0.1em 1em; margin: 0 1.5em;}
  .telefonos{margin-top: 8em}
  .telefonos .container {padding-bottom: 2em;}
}

@media screen and (max-width: 950px){
  footer div:first-child {width: 15em}
  .bandax{padding: 0}
  #cont_fedefbf497d62df14b0aeaafaee453a6{display: none;}
  #cont_55d435dfb2eccbe879e09394b8a4c2d6{display: inline-block;}
}

@media screen and (max-width: 896px){
  .colum2{width: 75%; margin-right: 0;}
  .colum1{padding-bottom: 0;}
}

@media screen and (max-width: 800px){
  h1 {width: 2.5em;}
  .index img{top: 0;}
  .photoset-grid-basic img{width: 100%}
  #farmacias article{display: block; margin-right: 0}
  #farmacias h3{margin-top: 15px}
  #farmacias img{margin-top: 30px}
}

@media screen and (max-width: 735px){
  footer div:first-child {display: none;}
  article.contacto{padding: 3em 4.5em}
  .noti .bloque1 article, .noti .bloque2 article{display: grid; margin-bottom: 20px; margin-right: 10px}
  .noti .bloque1{margin: 0}
  p{font-size: 1.2em}
  .telefonos p{font-size: 0.93em;}
  .info-servi p{font-size: 15px}
  .container-contacto p{font-size: 1em}
  .container-contacto{padding: 0 0.6em}
  .fondo-n{height: 350px;}

 }

@media screen and (max-width: 680px){
  footer div:nth-child(2){display: none;}
  h2 span{display: none;}
  .botones{display: none;}
}

@media screen and (max-width: 603px){
  .noti article{margin-right: 0; margin-bottom: 2.5em}
}

@media screen and (max-width: 580px){
  .fin{padding: 0 6em}
  .slide{margin-top: 3em;}
  .banda-emergencia{font-size: 0.77em}
  .container-contacto{padding: 0;}
  .bloque1, .bloque2{width: 100%;}
  .bloque1 article, .bloque2 article{width: 100%;}
  .contacto{padding: 3em 1.5em !important; font-size: 0.9em}
  .container-nos{padding-left: 12px; padding-right: 12px}
  .nos-columna-imagen{width: 92%}
  .colum2 .txt-nos p{width: 95% !important}
  /*.colum2{width: 95%}*/
  #historia{padding: 0 35px;}
  .fondo-n img{height: 300px; width: auto;}
  div.titulo {margin-right: 0.4em;}
}

@media screen and (max-width: 525px){
  .container-nos; .txt-ser p{padding: 0; bottom: 250px; font-size: 0.85em}
  .colum2{width: 95%; min-width: 320px;}
  .texto1{column-count: 1; font-size: 15px; line-height: 1.7em;}
  .coope{padding-top: 3.5em}
  .botones{margin-top: 40px; margin-bottom: 20px}
  .botones .boton{margin-top: 0; margin-bottom: 20px}
  .telefonos{padding-right: 0; padding-left: 0}
}

@media screen and (max-width: 420px){
 .header .logo{margin-left: 40px;}
 .slide{margin-top: 4em;}
}