/* ----- menu ------ */
  @import "menutop.css";

/* ----- etiquetes base ------ */  
  * {
    margin:0;
    padding:0;
    box-sizing: border-box;
    text-decoration:none;
    color:#444;
  }

  body { 
    font-family: 'Open Sans Condensed', sans-serif;
    font-size:18px;
    overflow-x:hidden;
    overflow-y:auto;
  }
  code {
    display:block;
    margin:10px;
    padding:10px;
    background:#FFF;
    font-size:13px;
    white-space:pre-line;
    border:1px solid #ccc;
  }

  a {
    color:#095;
  } 

  h1,h2 {
    text-align:center; 
    margin:20px; 
    font-weight:normal;
  }
  h1 {
      /*color:rgba(50,150,80,1);*/  
      font-size:40px;
      color:#fff;
      background:#333;
      margin:0; padding:5px;
    }
  h4 {margin-top:20px; margin-bottom:0;}  
  hr {clear:both; margin:20px; border:1px dashed #ccc; }

/* ---- clases base ------- */

  .clear {clear:both;display:block;}
  .ajust {max-width:976px; margin:0 auto;}
  img.esq { margin-right:10px; margin-bottom:10px; display:block; float:left;}
  img.dre { margin-left:10px;  margin-bottom:10px; display:block; float:right;}
  .firma {text-align:right;}
  img.imgajustada {
    display:block;
    max-width:100%;
    margin:auto;
  }
  .fondo {
    display:block;
    width:100%;
    position:relative;
    top:0; left:0;
    z-index:-100;
    margin-top:-150px;
  }
  .imagedalt {
    display:block;
    width:100%;
    margin-top:-80px;
  }

  .compartir {
    margin:10px;
    text-align:center;
  }
  
  .panel img.visual {
    width:2em;
    vertical-align:bottom;
    border:none;
    display:inline;
  }
  .panel img {
    width:100%;
    display:block;
  }
  .boton {
      display: inline-block;
      text-align: center;
      padding-left: 10px;
      padding-right: 10px;
      margin: 4px;
      background: #333;
      font-size:20px;
      font-weight: bold;
      color: #fff;
      border-radius: 10px;
      border:3px solid #ccc;
      min-width:100px;
      cursor:pointer;
  }
  
  .centrar {
    text-align:center !important;
  }
  

/* ---- IDs de plantilla ------- */  
  #contingut {
    margin-top:200px;
    margin-bottom:50px;
  }

  #peu {
    background:#111;
    color:#fff;
     padding:11px;
     text-align:center;
     margin-top:50px;
     font-size:14px;
  }
  #peu2 {
    color:#000;
    padding:3px;
    text-align:center;
    font-size:16px;
  }
  #peu2 a {
    margin-left:10px;
    margin-right:10px;
    color:#666;
  }
/* ---- flexslider -------------- */  
  .flexslider {
    border:0;
    margin-top:-75px;
    margin-bottom:30px;
  }
/*   .flexslider { display:none;} /*de moment*/ */
  .flex-control-nav {display:none;}

/* ----- panels --------------- */  
  .panel {
/*     border:1px solid rgba(0,0,0,.2); */
    border-radius:5px;
    background:#f3f3f3;
/*     background:#eee; */
    min-height:150px;
  }
  /*
  .panel_1 h3 { background:#cf0; } 
  .panel_2 h3 { background:#fc0; } 
  .panel_3 h3 { background:#0cf; } 
  .panel_4 h3 { background:#ddd; }
  */
  .panel_1 h3 { background:#ddd; } 
  .panel_2 h3 { background:#ddd; } 
  .panel_3 h3 { background:#ddd; } 
  .panel_4 h3 { background:#ddd; } 

  .panel div {
    padding:10px;
  }
  .panel h3 {
    padding:10px;
    color:rgba(0,0,0,.5);
    background:#ddd;
    border-radius:5px 5px 0 0;
  }
  .panel h3 img {
    width:30px; height:30px;
    display:inline-block;
    float:right;
  }
  .panel ul {
    margin-left:30px;
  }

  .nomesmobil { display:none; }
  
/* ############# SECCIONES ################### */
  

/* -----menubot1  --------------  */

    #menubot1 {
        background:#eee;
        padding-top:20px;
        border-top:10px solid #666;
        border-bottom:10px solid #666;
    }
   #menubot1 .flexslider { display:none;} 
   
/* -----  SECCIONES FOTO 1 - GRA --------------*/  
    .seccions1 h2 {
        text-align:center;
        font-size:20px;
        margin:7px;
      }
    .seccions1 a { margin-bottom:20px; height:150%; }
    .seccions1 b {
        display:block;
        margin:auto;
        border-radius:5px;
        overflow:hidden;
        border:1px solid #ddd;
        width:90%; height:90%;
        max-width:400px; max-height:400px;
      }
    .seccions1 b img {border-radius:5px;}

    /* -----  SECCIONES FOTO 2 - PEQ --------------*/  
    .seccions2 h2 {
      text-align:center;
      font-size:20px;
      margin:7px;
    }
    .seccions2 a { display:block; margin-bottom:20px; height:240px; }
    .seccions2 b {
      display:block;
      margin:auto;
      border-radius:5px;
      overflow:hidden;
      border:1px solid #ccc;
      width:70%;
      max-width:200px; max-height:200px;
     }

    /* -----  SECCIONES ICONO 3 - MED NOticies, biblio, bustia--------------*/  
      .seccions3 h2 {
        text-align:center;
        font-size:20px;
        margin:7px;
      }
      .seccions3 a { margin-bottom:20px;height:220px;}
      .seccions3 b {
        display:block;
        margin:auto;
        overflow:hidden;
        width:70%; height:70%;
        max-width:128px; max-height:128px;
      }
      
    /* -----  SECCIONES ICONO 4 - social --------------*/  
      .seccions4     { text-align:center; margin-top:40px; }
      .seccions4 a   { display:inline-block; width:64px; margin:10px;}
      .seccions4 img { display:block; width:64px; }
          
  
/* ------------- VERSIO MED ----------- */  
    @media all and (max-width:800px) {
      .flexslider { display:none;} 
      #contingut {
        margin-top:100px;
        padding:10px;
        padding-bottom:50px;
      }
/*      h1 {
        position:fixed;
        top:80px; left:0; margin:0;
        width:100%;
        background:#fff;
        border-bottom:1px dashed #ccc;
      }*/
    }
    
/* ------------- VERSIO MOBIL ----------- */  

  @media all and (max-width:480px) {
/*     h1 {top:60px; font-size:30px;} */
    #contingut { margin-top:75px; }
    .nomesmobil { display:block; }
    .imagedalt {  margin-top:-30px; }    
    h1 {
      color:#fff;
      background:#333;
      font-size:20px;
      margin:0; padding:5px;
    }
  }

  
/* --- DISEÑO DE COLUMNAS ----------------------------------- */    
    
   .columnas1 > *, .columnas2 > *, .columnas3 > *, .columnas4 > * {
       display:inline-block; float:left;
       margin:1%; 
   }

   .columnas1 > * { width: 98%; }
   .columnas2 > * { width: 48%; }
   .columnas3 > * { width: 31.33%; }
   .columnas4 > * { width: 23%; }
   
   .columnas1 img,
   .columnas2 img,
   .columnas3 img,
   .columnas4 img { width:100%; display:block; }
    

    @media all and (max-width:800px) {
        /* reducir columnas */
      .columnas1 > * { width: 98%; }
      .columnas2 > * { width: 98%; }
      .columnas3 > * { width: 48%; }
      .columnas4 > * { width: 31.33%; }

    }

    @media all and (max-width:480px) {
          /* reducir más columnas */
      .columnas1 > * { width: 98%; }
      .columnas2 > * { width: 98%; }
      .columnas3 > * { width: 98%; }
      .columnas4 > * { width: 48%; }
    }
        

/* ------------ DEBUG ---------------- */
  .debug {
    background:rgba(185,185,185,0.9);
    border-top:10px solid #666;
    bottom:0;
    position:fixed;
    width:100%;
    height:1px;
  }
  .debug:hover {height:200px; overflow:auto;}

/* -- master -- */

.botmaster {
    display: inline-block;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    margin: 4px;
    background: #333;
    font-weight: bold;
    color: #fff;
    border-radius: 10px;
}