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

* {
    margin:0; padding: 0;
}
html {width: 970px; margin: auto;}

.principaldiv {width: 970px;}
.bx-wrapper {z-index: 997;  margin: 0 auto 47px;}
body {font-family: 'Roboto', sans-serif;
        font-size: 77%;
    list-style-type: none;
   padding: 1.25em;
    }
nav {font-family: 'Roboto';}
ul {list-style: none;}
.principaldiv {max-width:68em; margin: auto;}
a{text-decoration: none; }
p {margin-bottom: 1em;}
.logo {width:25% ;height: auto; }
header, footer {color:beige; }
h1 {padding: 1em 0;}
main {}
footer {clear: both;margin:0; padding: 0; background-color: #C58F27;height: 32em;}
.div10, .div11 {background-color: #C58F27; list-style-type: none; padding: 0;}
.div10 {width: 100%; text-align: center;padding-top: 25px;}
.div11, {width:100%;text-align: center}


footer ul li a {display: block; color: #791131;  padding: 0,7em 2em; text-align: center;}
footer ul li a:hover {background-color:sandybrown; color:antiquewhite;}


#nav  li  {z-index: 999;}
#nav > ul > li > a
					{
						height: 100%;
						font-size: 1.3em; /* 24 */
						line-height: 3em; /* 60 (24) */
						text-align: center;
					}



  footer {width: 100%;
  background-color: #C58F27;border-top: 3px brown solid;}
.frente {background-color: lightgrey ; 
width: 100%;}
.div16 {margin: 0em;}


.vivo {width: 30%; top: 20px; right: 30px;
}
.div15 {width: 55%; padding-left: 21px;   margin-top: 11px; position:relative; margin: auto; }
.logoacumar{float: left; width: 47%;}
.logoclub{ width: 47%;}
.comunidad {width: 30px;margin: auto;}
.informacion {width:75;}
.div12 {padding-left: 14px;
  padding-top: 12px;
  padding-bottom: 12px;
  margin: auto;
  clear: both;
  background-color: beige;
  color: darkgray;}




@media screen and (min-width:40em) {
   
   
    html {width: 970px;}
    .div3{width: 90%;}
    .div2 {margin: 0,5em;}
    .div10 {float: left; margin: auto;width:50%;}
    .div11 {width: 30%;float: right; margin:auto;text-align: center;
  border-left: rgb(108, 77, 38) 3px solid;}
   .vivo {width: 30%;   width: 30%;
  position: relative;
  top: -40px;
       right: -367px;}
    footer {height: 18em;}
   .div15 { top: -4px;
 }
    
    #nav > ul > li > a
					{
						height: 100%;
						font-size: 1em; /* 24 */
						line-height: 4em; /* 60 (24) */
						text-align: center;
					}
    .paralelo {width: 100%;
  margin: 6px;
  height: 21em;
        background-color:darkred;}
    .pnoticia{width: 30%;
  margin: 8px;
  height: 10em;
  float: left;}
 
    .banner {width:80%; height: auto;}
    .listen{ width: 5em; height: 5em;}
    #informacion {width:70%;height: auto;  width: 72%;
  float: left;}
    .noti { width: 60%; height: auto;}
.notiaside { width: 60%; height: auto;}
    .divinfo2 {
  width: 30%;
  height: auto;
  float: left;
        margin: 8px;}
.asideindex {width: 26%;
  float: right;}
.vertical{ 
    margin: 4px;
  width: 89%;
  background-color: bisque;
  float: right;
  padding: 5px; }
.info3 {float: left;} 
    
}
@media screen and (min-width:60em){
    html{width: 970px}
    .div2{float: left;width:580px;margin: 0; padding: 0;}
    .div3 {float: right; width: 38%; margin:0;clear: none;height: 3em;}
    main {clear: both;padding: 1em;}
  
    .div4 {width: 100%; background-color:beige;}
    h1 {font-size: 1em;font-family: "dosis";sans-serif;}  
 .informacion {width:679;}
    

     J------------------------------



.infomapa { margin-left: 20px;}

.todaslasfotos { width: 600px; height: 200px;
 position: absolute; margin-left: 5px; margin-top: 16px;}

#fotosdelmapa { margin-top: 30px; margin-left: 11px;
  padding-left: 20px;}
   
.nombresdelmapa { width: 620px;
 font-size: 15px; margin-top: 23px;
  margin-left: 72px; }

  .mapadelacuenca {width: 93%%;
  margin: 0; margin-left: -13px;
  height: 50em;  background-color: beige; padding: 22px; padding-right: 41px; margin-top: -5px;
}
#titulomapa { font-size: 30px;  padding-left: 8px;
  padding-top: 16px; }

#subtitulos { margin-bottom: 18px;  font-size: 15px; }

.infonoticia { margin-right: 20px;margin-left: 20px;}

#informacionnoticia1 {width:676px; height: 900px;}

.asidemapa { margin: 22px;background-color: white; width: 23%; height: auto; float: left;
margin-bottom: 18px; } 

.asidefoto1 { width: 65%; margin-left: 52px;  }
.asidefoto2 { width: 65%; margin-left: 52px; margin-top: 29px;}

.subtitulomapa1 { margin-left: 76px; font-size: 16px;margin-top: 5px;}

.subtitulomapa2 { margin-left: 58px; font-size: 16px; margin-top: 5px;}

.parrafoacumar {margin-left: 70px; margin-right: 30px; margin-top: 7px;}

#leer {margin-left: 121px; margin-top: -20px;}


.loguitos { width: 23%; position: relative; margin-top: 206px; padding: 9px;
margin-left: 32px; margin-right: -15px;}

.asidecooperativa {height: 578px; width: 225px;
  float: right; margin-top:-8px; background-color: beige; padding-left: 30px;} 

.cooperativa {width: 100%;
  margin: 6px;
  height: 450px;}
.imagencorporativa {float: left; position: relative; height: 538px; margin-left: 30px;}
----------------------


#cajacharla {width:676px; height: 486px; background-color: beige;
 margin-top:30px;}

 .charlacumar { margin: 6px;
  height: 450px;}

 .videocaja { margin-top: 20px; margin-left: 187px;}

.historiacaja {width: 100%;
    height: 620px; background-color: beige;
}

#titulovideo {margin-left: 42px; margin-bottom: 11px; background-color: black; color: white; 
width: 252px;
  height: 40px;
  padding-left: 12px;
  padding-top: 11px;}


.asidevacunate { width: 100%;}

#promovacu { font-size: 27px;
  width: 250px;
  position: relative;  
  color: beige;
  padding: 22px;
  font-weight: bold;
  height: 97px;}

 .asidehistoria { background-color: black; width: 26%; height: auto; float: left;
margin-bottom: 18px;  }  

 #historieta{ width: 695px;
  height: 569px;
  background-color: beige;}
   
.infohistoria { margin-left: 20px; padding-right: 11px;}







#cajaintegracion {width:676px; height: 555px; background-color: beige;
 margin-top:-8px;}

 #promovoluntariado {font-size: 27px; background-color: black;
  width: 207px;
  position: absolute;  
  color: white;
  padding: 22px;
  font-weight: bold;
  height: 130px;}

#subtitulomensaje { margin-left: 11px;}


#cuen1 {margin-left: 74px; font-size: 15px; margin-bottom: 10px; margin-top: 69px;}

#cuen2 {margin-left: 272px; font-size: 15px; margin-bottom: 1px; margin-top: -28px; }

#cuen3 {margin-left: 448px; font-size: 15px;margin-bottom: -40px; margin-top: -21px;}  




    .cooperativa {width: 676px; height:538px; background-color: beige;
 margin-top:-8px; margin-left:-13px; padding: 20px;}


---N----

.asidecomentarios {background-color: black; width: 37%; height: auto; float: left;
margin-top: -584px; position: relative; margin-left: 700px;  }

#titulocomentarios { font-size: 30px;  padding-left: 21px;
  padding-top: 16px; }

#subtitulocomentarios { margin-left: 23px;}

.mensajefoto {margin-left: -14px; }


.linkface1 { color: beige}
.linkface2 { color: beige;}
.linkface3 { color:beige;}


.asidefotomensaje { float: left; 
   width: 250px; 
  position: relative;  
  color: beige;
  margin-top: -134px;
  margin-left: 690px;
height: 255px;}
  
  #textoredes {font-size: 27px; background-color: #a32b2b; 
  width: 206px;
  position: absolute;  
  color: white;
  padding: 22px;
  font-weight: bold;
  height: 50px;
  margin-left: 690px;
  margin-top: -377px;
padding-bottom: 10px;
margin-bottom: 15px; 
  padding-bottom: 10px; 
text-decoration: none;
text-align: center}

#textoredes2 {font-size: 27px; background-color: #C58F27;
  width: 206px;
  position: absolute;  
  color: white;
  padding: 22px;
  font-weight: bold;
  height: 50px;
  margin-left: 690px;
  margin-top: -296px;
padding-bottom: 10px;
margin-bottom: 15px; 
  padding-bottom: 10px;
  text-decoration: none;
  text-align: center }

  #textoredes3 {font-size: 27px; background-color:#a32b2b;
  width: 206px;
  position: absolute;  
  color: white;
  padding: 22px;
  font-weight: bold;
  height: 50px;
  margin-left: 690px;
  margin-top: -214px;
padding-bottom: 10px;
margin-bottom: 15px; 
  padding-bottom: 10px;
  text-decoration: none;
   text-align: center}

   #titulovoluntariado{ font-size: 30px;  padding-left: 21px;
  padding-top: 16px; }

#subtitulovoluntariado { margin-left: 23px;}

.asidevoluntariado { float: left; 
   width: 100%; 
  position: relative;  
  color: beige;
  margin-top: 132px;
  
  }

.fotovoluntariado {width: 100% }


.asideintegracion {background-color: black; width: 37%; height: auto; float: left;
margin-top: -607px; position: relative; margin-left: 689px;  }

#cajaintegracion {width:686px; height: 613px; background-color: beige;
 margin-top:-8px; margin-left: -13px;}

 #cajacomentarios {width:691px; height: 497px; background-color: beige;
 margin-top:-13px; margin-left: -13px;}



.textoentrevista {padding-right: 24px; margin-left: 24px;margin-bottom: 30px; padding-left: 10px;}
.fotoentrevista {margin-left: 33px; margin-top: -8px; width: 90%; 
  margin-bottom: 20px;}
#cajaentrevista {width:676px; height: 679px; background-color: beige;
 margin-top:-8px; margin-left: -13px;}
.asidefotoentrevista {float: left; 
   width: 100%; 
  position: relative;  
  color: beige;
  margin-top: 132px;}
.asideentrevista{background-color: black; width: 39%; height: auto; float: left;
margin-top: -665px; position: relative; margin-left: 679px;  }
#tituloentrevista {font-size: 35px; padding: 27px; }
#promoentrevista {font-size: 27px; background-color: black;
  width: 207px;
  position: absolute;  
  color: white;
    font-weight: bold;
  height: 49px; margin-top: 15px; text-align: center; margin-left: 31px;}

  I-----------------------------


        .programacion{width: 30%;
  margin: 8px;
  height: 10em;
  float: left;}
 
     .brizas {width: 30%;
  margin: 8px;
  height: 10em;
  float: left;}

   .festi {width: 199px;
  margin: 8px;
  height: 10em;
  float: left; margin-left: 21px;}

     .festi2 {width: 199px;
  margin: 8px;
  height: 10em;
  float: left; margin-left: 11px;}

    .deabajo { margin-top: 230px; }

    .deabajo1 { margin-top: 164px; }

    .deabajo2 { margin-top: 330px; }



 .cajaprog {width: 653px;
  margin: 6px; margin-left: -14px;
  height: 32em; background-color: beige; padding-left: 20px; margin-top: -6px;}

#titprog {font-size: 30px; margin-bottom: -38px; padding-left: 8px; padding-top: 16px;}
    
      .propa {width: 100%;
  margin: 6px;
  height: 21em;
        background-color:beige; margin-top: 400px;}


.locu {width: 120px; height: auto; margin-left: 30px; padding: 10px}


.cheff { position: relative;
    margin-top: -18px;
  background-color: black; margin-left: -18px; height: 1000px:;
  ;
  }
#promcheff {width: 263px;}

#promotext {font-size: 27px; position: relative; color: beige; padding: 22px; font-weight: bold; height: 108px;  }



.viaje {position: relative;width: 672px; height: 252px; background-image: url(imagenes/salta.jpg); margin-top: 383px;} 

#salta {font-size: 30px; color: white; text-align: center;  font-weight: bold; padding-top: 65px; }


 .cajaprog2 {width: 653px;
  margin: 6px; margin-left: -14px;
  height: 43em; background-color: beige; padding-left: 20px; margin-top: -6px;}


  .notiasidelocu { width: 60%; height: auto;}

    .divinfo2 {
  width: 30%;
  height: auto;
  float: left;
        margin: 8px;}

.asidelocu {width: 26%;
  float: right;}

.vertical1{ 
    margin: 0px;
  width: 91%;
  background-color: beige;
  float: right;
  padding: 20px; margin-top: -6px; margin-left: 2px; height: 490px; margin-right: -4px;}

.info3 {float: left;} 

#equipot {font-size: 25px; margin-bottom: -10px;}



.verticalclub { 
    margin: -1px;
  width: 91%;
  background-color: beige;
  float: right;
 margin-top: -20px; margin-left: 2px; height: 736px; padding-left: 24px; margin-bottom: 7px;}


  .clubnav {font-size: 31px; color: black; text-align: center; margin-top: -115px; margin-left: -10px; font-weight: bolder; }
.clubnav2 {font-size: 31px; color: beige; text-align: center; margin-top: -75px; margin-left: -10px; font-weight: bolder; }


.clubfoto {border-radius: 100px; margin-top: 70px;}

.roundclub {margin-top: -34px}

.deporfot {border-radius: 100px; width: 80%; height: auto; margin-bottom: 10px; }

#chillcup {width: 685px; height: auto; margin-left: -13px; margin-top: 102px;}

#mundial {font-size: 36px; color: beige; text-align: center;  font-weight: bold; margin-top: -184px;}
#mundial2 {font-size: 36px; color: black; text-align: center;  font-weight: bold; margin-top: -177px;}

.cajafestival {width: 685px; background-color: beige; margin-left: -14px; margin-top: -8px; height: 736px; padding-left: 25px;
}
  
.cinenog {float: left; width: 199px; }
.festfoto {border-radius: 100px; width: 80%; height: auto; margin-bottom: 10px; }



    .rocha {background-color: beige;width: 940px; margin-left: -12px; margin-top: -8px; }
     #laguna {margin-top: -438px; position: relative; padding-left: 20px; padding-bottom: 50px;}

     .copete {margin-top: 300px; position: absolute; width: 840px; margin: 10px; margin-top: }

#copete {margin-top: -20px; font-size: 20px;}

#titulolaguna { font-size: 40px;  padding-left: 8px;
  padding-top: 16px; }

.verticalclub2 { 
    margin: -1px;
  width: 17%;
  background-color: beige;
  float: right;
 margin-top: -736px; margin-left: 194px; height: 736px; padding-left: 30px; margin-bottom: 7px; position: absolute;}


.textolaguna {margin-top: 115px; width: 264px; margin-left: 622px; padding-bottom: 30px;}

.asideindexfest {width: 26%;
  float: right; margin-left: 500px;}

#comollegar {width: 940px; height: auto; margin-top: -8px; margin-left: -13px;}


.back {position: absolute; margin-top: 652px; margin-left: 184px;padding-top: 30px;}


.back2 {position: absolute; margin-top: 8px; margin-left: 171px;}

.verticalbondi{ 
    margin: 0px;
  width: 91%;
  background-color: beige;
  float: right;
  padding: 20px; margin-top: -8px; height: 443px; margin-right: -14px;}

.titularnoti {color: dimgrey;
 }
}
.noticiasgeneral{  width: 30%;
    float: left; border-right: 3px gray solid; padding: 2em;
 }
 .titularnoticias { 
     background-color: gainsboro;
 }
.imgnoti {width: 100%;}
     .noticiashtml {width: 100%;
  margin: 8px;
  height: auto;
 }
.asidenoticias {width: 40%; 
margin: 8px;
  height: 10em;
  float: right;}
.noticiasbanner {width:93%;}
.noticiastitulo {display: block; padding: 0.4em; border-bottom: 2px solid darkcyan }
.noticiaprincipal {width: 60%; float: right;}
.imagmatanza {width: 100%;}

} /*esto cierra abajo de todo*/