*{margin: 0px;
padding: 0px;}
html{
   background-image: url("htmlBg.png");
   background-repeat: repeat;
   background-size: 200px;
}
body{width: 80%;
margin: auto;
background-color: white;
max-width: 3000px;
box-shadow: 0px 0px 5px rgba(0,0,0,.5);}
section{ font-family: 'Roboto', sans-serif;}
/*header A*/
header{
    background-image: url("../../img/backgrounds/bg_01.jpg");
    background-size: cover;
    padding-top: 40px;
    font-family: 'Roboto', sans-serif;
}
/*header B*/

/*barraUno A*/

header > .barraUno .contenedor{
    display: grid;
    grid-template-columns: 8.3% 8.3% 8.3% 8.3% 8.3% 8.3% 8.3% 8.3% 8.3% 8.3% 8.3% 8.3%;
}

header > .barraUno .contenedor .redesSociales{

    grid-column-start:11 ;
    grid-column-end:12 ;
    display:grid;
    grid-template-columns: 50% 50%;
}

header > .barraUno .contenedor .redesSociales .ico{
    width: 100%;
}

header > .barraUno .contenedor .redesSociales .barras{
    display: none;}
/*barraUno B*/
/*barraDos A*/
  header > .barraDos{
      
      background-color: #00a99d;
  }
  header > .barraDos > .contenedor{
     
      display: grid;
      grid-template-columns: 25% 75%;
  }

  /*lado logoA*/
  header > .barraDos > .contenedor > .logo{
      grid-column-start: 1;
      grid-column-end: 2;
     
      display: grid;
      grid-template-columns: 33.3% 33.3% 33.3%; 
  }
  header > .barraDos > .contenedor > .logo > .ico{
      grid-column-start: 2;
      grid-column-end: 4;
      background-color: white;

  }
  /*lado logoB*/
  /*lado menuA*/


  header > .barraDos > .contenedor > .menuFull{
    z-index: 4000;
   display: grid;
   grid-template-rows: 33% 33% 33%;   
  }

  header > .barraDos > .contenedor > .menuFull > .ulUno{
      text-align: center;
      grid-row-start: 2;
      grid-row-end: 3;
      display: grid;
      grid-template-columns: auto auto auto auto auto auto auto;
  }

  header > .barraDos > .contenedor > .menuFull > .ulUno > .nivelUno{
      margin: auto;
  }

  header > .barraDos > .contenedor > .menuFull > .ulUno .nivelUno{
  display: inline-block;    
  }
  header > .barraDos > .contenedor > .menuFull > .ulUno .nivelUno a{
      display: inline-block;  
      color:white;
      text-decoration: none;
      cursor: pointer;
      font-size: 1vw;
  }
  header > .barraDos > .contenedor > .menuFull > .ulUno .nivelUno > a:hover{
    color:#006837;
}
header > .barraDos > .contenedor > .menuFull > .ulUno .nivelUno li{
    list-style: none;
}

header > .barraDos > .contenedor > .menuFull > .ulUno .nivelUno:hover .ulDos{
    display: block;
    position: absolute;
    background-color: #662d91;
    box-shadow: -2px 2px 2px rgba(0,0,0,.5);
}

header > .barraDos > .contenedor > .menuFull > .ulUno .nivelUno .ulDos .nivelDos{
    list-style: none;
    border-bottom: solid white;
    text-align: left;
    padding: 10px 5px;
}

header > .barraDos > .contenedor > .menuFull > .ulUno .nivelUno .ulDos .nivelDos a{
    font-size: 10pt;
}

header > .barraDos > .contenedor > .menuFull > .ulUno .nivelUno .ulDos .nivelDos > a:hover{
    color: #2a0d44;
}

header > .barraDos > .contenedor > .menuFull > .ulUno .nivelUno .ulDos .nivelDos:hover .ulTres{
    display: block;
    position: absolute;
    background-color: #f7b219;
    box-shadow: -2px 2px 2px rgba(0,0,0,.5);
    left: 50%;
}

header > .barraDos > .contenedor > .menuFull > .ulUno .nivelUno .ulDos .nivelDos .ulTres .nivelTres{
    list-style: none;
    border-bottom: solid white;
    text-align: left;
    padding: 10px 5px;
}

header > .barraDos > .contenedor > .menuFull > .ulUno .nivelUno .ulDos .nivelDos .ulTres .nivelTres > a:hover{
    color: #6d3905;
}

header > .barraDos > .contenedor > .menuFull > .ulUno .nivelUno .ulDos .nivelDos .ulTres .nivelTres:hover .ulCuatro{
    display: block;
    position: absolute;
    background-color: #0071bc;
    box-shadow: -2px 2px 2px rgba(0,0,0,.5);
    left: 50%;
}


header > .barraDos > .contenedor > .menuFull > .ulUno .nivelUno .ulDos .nivelDos .ulTres .nivelTres .ulCuatro .nivelCuatro{
    list-style: none;
    border-bottom: solid white;
    text-align: left;
    padding: 10px 5px;
}

header > .barraDos > .contenedor > .menuFull > .ulUno .nivelUno .ulDos .nivelDos .ulTres .nivelTres .ulCuatro .nivelCuatro a:hover{
    color: #043659;
}

  header > .barraDos > .contenedor > .menuFull .ulDos , .ulTres , .ulCuatro{
      display: none;
  }

  .menuResponsivo{display: none;} 
  /*lado menuB*/
/*barraDos B*/
/*mesaDirectiva A*/
.mesaDirectiva > .contenedor > .slide_res{
    display: none;
}
.mesaDirectiva{
    
    background-color: #662d91;
}

.mesaDirectiva > .titulo{
padding: 20px 0px;}

.mesaDirectiva > .titulo h1{
    color: #cccccc;
    text-align: center;
}
    /*planilla A*/
.mesaDirectiva > .contenedor > .slide .planilla{
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 50% 50%;
    animation: planilla 1s 1;
}
    @keyframes planilla{
        0%{opacity: 0;
        transform: translateY(-10px);}
        100%{opacity: 1;
            transform: translateY(0px);}
    }

    /*planilla B*/
    /*tarjeta mesa directiva A*/
.mesaDirectiva > .contenedor > .slide .planilla >  .tarjeta{
    border: solid #1bbc9b;
display: grid;
grid-template-columns: auto auto;
padding: 15px;
width: 80%;
margin: 20px auto 20px auto;
box-shadow: 10px 10px 0px rgba(0,0,0,.5);
transition: all .3s;}

.mesaDirectiva > .contenedor > .slide .planilla >  .tarjeta:hover{
    transform: translateY(-5px);
}

.mesaDirectiva > .contenedor > .slide .planilla > .tarjeta > .foto{
    text-align: left;
}

.mesaDirectiva > .contenedor > .slide .planilla > .tarjeta > .foto img{
    width: 100px;
    border-top-right-radius: 30px;
}


.mesaDirectiva > .contenedor > .slide .planilla > .tarjeta .info h1{
    color: white;
    font-size: 14pt;
}

.mesaDirectiva > .contenedor > .slide .planilla > .tarjeta .info h2{
    color: #1bbc9b;
    font-size: 12pt;
    font-weight: 400;
}

.mesaDirectiva > .contenedor > .slide .planilla > .tarjeta .info hr{
    margin: 10px 0px 10px 0px;
}

.mesaDirectiva > .contenedor > .slide .planilla > .tarjeta .info h3{
    color: white;
    font-size: 13pt;
    font-weight: 400;
} 

.mesaDirectiva > .contenedor > .slide .planilla > .tarjeta .info h4{
    color: #1bbc9b;
}
    /*tarjeta mesa directiva B*/
    /*controles mesa directiva A*/
    .mesaDirectiva  .contenedor_res{
        display: none;
    }   

    .mesaDirectiva > .control .actual{
        
        padding: 10px 0px 2px 10px;
    }
    .mesaDirectiva > .control .actual a{
        display: inline-block;
        margin-right:5px ;
        width: 20px;
        height: 20px;
        background-color: white;
        transition: .4s;
    }
    .mesaDirectiva > .control  .botones{
      
        padding: 20px;
    }

    .mesaDirectiva > .control  .botones > div{
        cursor: pointer;
        display: inline-block;
        padding: 10px;
        background-color:#cccccc ;
        font-size: 15pt;
        color: white;
    }
    .mesaDirectiva > .control  .botones > div:hover{
        background-color:#2c0947; 
    }

    /*controles mesa directiva B*/
/*mesaDirectiva B*/
/*section 2 A*/
.seccionDos{
    background-color: white;
}

.seccionDos > .contenedor{
    
    width: 83.3%;
    margin: auto;
    display: grid;
    grid-template-columns: 33% 33% 33%;
    grid-template-rows:auto auto;
}


    /*tarjeta verde A*/
    .seccionDos > .contenedor > .uno{
        grid-column-start:1 ;
        grid-column-end:2 ;
        grid-row-start:1 ;
        grid-row-end:3 ;
    }

.seccionDos > .contenedor > .uno .verde{
    margin-top: 80px;
    background-color: #008c82;
    box-shadow: -3px 3px 3px rgba(0,0,0,.2);
    width: 80%;
    border-radius: 20px;
    padding: 50px 0px 10px 0px;
}
.seccionDos > .contenedor > .uno .verde .ico_logo{
    width: 50%;
    margin: auto;
}

.seccionDos > .contenedor > .uno .verde .parrafo{
    color: white;
    text-align: center;
    padding: 20px;
    font-size: 10pt;
}
.seccionDos > .contenedor > .uno .verde .parrafo span{
    /*barrita blanca*/
    border-bottom: solid white 2px;
    display: block;
    width: 70%;
    margin: auto;
    margin-bottom: 20px;
}
.seccionDos > .contenedor > .uno .verde .btn{
    text-align: right;
    padding: 20px;
}

.seccionDos > .contenedor > .uno .verde .btn a{
    display: inline-block;
    padding: 10px 20px;
    text-decoration: none;
    color: white;
    background-color:#004d47 ;
}

    /*tarjeta verde B*/
    /*tarjeta azul A*/
    .seccionDos > .contenedor > .dos{
        grid-column-start:2 ;
        grid-column-end:3 ;
        grid-row-start:1 ;
        grid-row-end:2 ;
    }

    .seccionDos > .contenedor > .dos .azul{
        margin-top: 80px;
    }
    .seccionDos > .contenedor > .dos .azul .ico_logo{ 
        margin: auto;
        margin-bottom: 80px;
        
    }

    .seccionDos > .contenedor > .dos .azul .ico_logo img{
        display: block;
        width: 20%;
        margin: auto;
    }
    .seccionDos > .contenedor > .dos .azul .ico_logo p{
        text-align: center;
        color:#29abe2;
    }

    .seccionDos > .contenedor > .dos .azul .paneltweets{
        background-color:#29abe2 ;
        width: 80%;
        margin: auto;
        box-shadow: -3px 3px 3px rgba(0,0,0,.2);
    }

    .seccionDos > .contenedor > .dos .azul .paneltweets .titulo{
        display: grid;
        grid-template-columns: auto auto;
        padding: 20px;
    }
    .seccionDos > .contenedor > .dos .azul .paneltweets .titulo h2{
        color: white;
    }
    .seccionDos > .contenedor > .dos .azul .paneltweets .titulo a{
        text-decoration: none;
        color: blue;
    }

    .seccionDos > .contenedor > .dos .azul .paneltweets .titulo .btn{
        text-align: center;
    }
    .seccionDos > .contenedor > .dos .azul .paneltweets .titulo .btn a{
        display: inline-block;
        
    }
    .seccionDos > .contenedor > .dos .azul .paneltweets .titulo .btn img{
        width: 25px;
    }
    .seccionDos > .contenedor > .dos .azul .paneltweets .mensajes{
        height: 200px;
        background-color: grey;

    }

    .seccionDos > .contenedor > .dos .azul .paneltweets .footer{
        display: grid;
        grid-template-columns: 50% 50%;
        padding: 15px;
    }

    .seccionDos > .contenedor > .dos .azul .paneltweets .footer div{
        text-align: center;
    }

    .seccionDos > .contenedor > .dos .azul .paneltweets .footer a{
        text-decoration: none;
        color: black;
    }
    /*tarjeta azul B*/
    /*tarjeta morada A*/
    .seccionDos > .contenedor > .tres{
        grid-column-start:3 ;
        grid-column-end:4 ;
        grid-row-start:1 ;
        grid-row-end:3 ;
        
    }

    .seccionDos > .contenedor > .tres .morada{
        background-color: #662d91;
        width: 90%;
        height: 100%;
        float: right;
        box-shadow: -3px 3px 3px rgba(0,0,0,.2);
    }

    .seccionDos > .contenedor > .tres .morada .icono{
        text-align: center;
        color: white;
        margin-top: 50px;
        margin-bottom: 50px;
    }

    .seccionDos > .contenedor > .tres .morada .info{
        color: white;
        text-align: center;
    }

    .seccionDos > .contenedor > .tres .morada .icono img{
        width: 15%;
     
    }

    .seccionDos > .contenedor > .tres .morada .mapa{
        width: 100%;
        margin-top: 50px;
    }

    /*tarjeta morada B*/


     /*logo trans A*/

     .seccionDos > .contenedor > .cuatro{
        grid-column-start:2 ;
        grid-column-end:3 ;
        grid-row-start:2 ;
        grid-row-end:3 ;
     }

     .seccionDos > .contenedor > .cuatro .ico_logo{
         text-align: center;
         padding: 80px 0px 20px 0px;
         
     }
     .seccionDos > .contenedor > .cuatro .ico_logo img{
         width: 50%;
     }
     /*logo trans B*/
/*section 2 B*/
/*footer A*/
footer{background-color: #008c82;
height: 50px;
font-family: 'Roboto', sans-serif;}
footer > .contenedor{
    height: 100%;
    display: grid;
    grid-template-columns:50% 50% ;
}

footer > .contenedor > .anio{
    color: white;
    text-align: center;
    font-weight: 700;
}

footer > .contenedor > .anio img{
width: 100px;
vertical-align: bottom;

}

footer > .contenedor > .web{
    text-align: center;
    display: grid;
    grid-template-rows: 30% 70%;
}

footer > .contenedor > .web p{
    color: white;
    grid-row-start: 2;
}

/*footer B*/