@media screen and (max-width:720px){
    /*header A*/

    body{width: 100%;
        margin: auto;
        max-width: 100%;
        min-width: none;
        box-shadow:none}
header{
    background-image: url("../../img/backgrounds/bg_02.jpg");
    background-size: cover;
    background-position: right;
    padding-top: 0px;
}
/*header B*/
/*barraUno A*/



header > .barraUno .contenedor{

    display: grid;
    width:100%;
    position:absolute;
    grid-template-columns: 16.6% 16.6% 16.6% 16.6% 16.6% 16.6%;
}

header > .barraUno .contenedor .redesSociales{

    grid-column-start:6 ;
    grid-column-end:7 ;
    display:grid;
    grid-template-columns: 100%;
}

header > .barraUno .contenedor .redesSociales .ico{
    text-align: center;
}
header > .barraUno .contenedor .redesSociales .ico img{
    width: 80%;
    box-shadow: -2px 2px 4px rgba(0,0,0,.4); 
}

header > .barraUno .contenedor .redesSociales .barras{
    display: block;
    margin-bottom:20px ;
    z-index: 1000;
}

/*barraUno B*/
/*barraDos A*/
header > .barraDos{
         background-color:unset;
}

header > .barraDos > .contenedor{
    grid-template-columns: 50% 50%;
}



header > .barraDos > .contenedor > .logo{
    display: block;
    background-color: white;
}

header > .barraDos > .contenedor > .logo > .ico{
    width: 70%;
    margin: auto;
    padding: 50px 0px;
}

header > .barraDos > .contenedor > .menuFull{
    display: none;
}   

/*barraDos B*/
/*mesaDirectiva A*/
.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{
    display: none;
}
.mesaDirectiva > .contenedor > .slide_res{
    display: block;
}



  
       /*Tarjeta A*/ 
.mesaDirectiva > .contenedor > .slide_res .planilla_res .tarjeta{
    display: grid;
    grid-template-columns: 35% 65%;
    border:solid #1bbc9b;;
    width: 90%;
    margin: 20px auto 20px auto;
    padding:20px 0px 20px 0px ;
    box-shadow: 10px 10px 0px rgba(0,0,0,.5);
    animation: planillares 1s 1;
}

    @keyframes planillares{
        0%{opacity: 0;
        transform: translateY(-10px);}
        100%{opacity: 1;
            transform: translateY(0px);}
    }
.mesaDirectiva > .contenedor > .slide_res .planilla_res .tarjeta hr{
    border: solid white 1px;
    margin-top:10px ;
    margin-bottom:10px ;
}
.mesaDirectiva > .contenedor > .slide_res .planilla_res .tarjeta .foto{
    text-align: center;
    box-sizing: border-box;
    
}

.mesaDirectiva > .contenedor > .slide_res .planilla_res .tarjeta img{
    width: 100px;
}

.mesaDirectiva > .contenedor > .slide_res .planilla_res .tarjeta h1{
    color: white;
    font-size: 10pt;
}

.mesaDirectiva > .contenedor > .slide_res .planilla_res .tarjeta h2{
    color: #1bbc9b;
    font-size: 10pt;
    font-weight: 400;
}
.mesaDirectiva > .contenedor > .slide_res .planilla_res .tarjeta h3{
    color:white;
    font-size: 10pt;
}
.mesaDirectiva > .contenedor > .slide_res .planilla_res .tarjeta h4{
    color: #1bbc9b;
    font-size: 7pt;
    font-weight: 400;
}

        /*Tarjeta B*/
    /*tarjeta mesa directiva B*/
    /*controles mesa directiva A*/
    .mesaDirectiva > .control > .contenedor{
        display: none;
    }

    .mesaDirectiva > .control > .contenedor_res{
        display: block;
   
    }
    .mesaDirectiva > .control > .contenedor_res .bolita_res{
        transition: all .3s;
        display: inline-block;
        background-color: white;
        width: 10px;
        height: 10px;
        margin: 20px 0px 20px 20px;
    }
    .mesaDirectiva > .control > .contenedor_res .botones_res{
        display: grid;
        grid-template-columns: 16.6% 16.6% 16.6% 16.6% auto 16.6%;
    }
    .mesaDirectiva > .control > .contenedor_res .botones_res .btn{
     background-color:#cccccc;
     padding: 15px;
    }
    .mesaDirectiva > .control > .contenedor_res .botones_res .der{
        text-align: right;
        grid-column-start: 6;
        grid-column-end: 7;
    }
    
    /*controles mesa directiva B*/
/*mesaDirectiva B*/


/*menuResponsivo A*/
.menuResponsivo{
    font-family: 'Roboto', sans-serif;
    display:block;
    position: absolute;
    width: 100%;
    height: 100vh;
    background-color: #00a99d;
    transition: .4s;
    z-index: 900;
}

.entrar{
    transform: translateX(-100vw);
}

.menuResponsivo > .contenedor{
    display: grid;
    grid-row-gap: 20px;
    grid-template-rows:auto auto ;
    text-align: center;
    color:white;
}
    /*parte logo A>*/
.menuResponsivo > .contenedor > .logo{
    grid-row-start:1 ;
    grid-row-end: 2;
    display: grid;
    grid-template-columns: 50% 50%;
    
}

.menuResponsivo > .contenedor > .logo > .ico_logo{
    padding: 20px;
    text-align: center;
}
    /*parte logo B>*/
    /*parte menu A>*/

.menuResponsivo > .contenedor > .menu{
    grid-row-start:2 ;
    grid-row-end: 3;
    width: 80%;
    margin: auto;
} 

.menuResponsivo > .contenedor > .menu li{
    display:block;
    margin-bottom:2px ;
    padding: 5px 0px;
    width: 100%;
    background-color: #008c82;
}
.menuResponsivo > .contenedor > .menu a{
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    z-index: 3000;
    padding: 5px 0px;
    color: white;
    
}

.menuResponsivo > .contenedor > .menu img{
    position: absolute;
    right:20px;
    width: 15px;
}

.menuResponsivo > .contenedor > .menu .nUno li{
    background-color: #008c82;
    position: relative;
}

.menuResponsivo > .contenedor > .menu .nUno li .textoMenor{
    font-size:9pt ;
}

.menuResponsivo > .contenedor > .menu .nDos, .nTres, .nCuatro{
    width: 90%;
    
}

.menuResponsivo > .contenedor > .menu .nDos li{
    background-color: #007065;
    width: 100%;
}

.menuResponsivo > .contenedor > .menu .nTres li{
    background-color: #00534b;
    width: 100%;
}

.menuResponsivo > .contenedor > .menu .nCuatro li{
    background-color: #00302b;
    width: 100%;
}

.desplegar{
    display:none;
}
  /*parte menu B*/
/*menuResponsivo B*/
/*valores A */
header > .valores{
    background-color: rgba(0,169,157,1);
    width: 100%;

    margin: auto;
    background-image:none;
    background-size:cover ;
}

header > .valores .contenedor{
    padding: 20px;
    box-sizing: border-box;
    width: 70%;
    height: 100%;
    
}



header > .valores .contenedor .bloque{
    width: 100%;
    color: white;
}

header > .valores .contenedor .uno{
    margin-bottom: 30px;
    border-bottom: none;
    padding:20px;
}
/*valores B*/
/*section 2 A*/
.seccionDos > .contenedor{
    width: 100%;
    margin: auto;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows:auto auto auto auto;
}


    /*tarjeta verde A*/
     .seccionDos > .contenedor > .uno{
        transform: translateY(0px);
        grid-column-start:1 ;
        grid-column-end:2 ;
        grid-row-start:1 ;
        grid-row-end:3 ;
    }
    .seccionDos > .contenedor > .uno .verde{
        margin-top: 0px;
        background-color: #008c82;
        box-shadow: -3px 3px 3px rgba(0,0,0,.2);
        width: 95%;
        float: right;
        border-radius: 20px;
        padding: 50px 0px 10px 0px;
    }
    /*tarjeta verde B*/
    /*tarjeta azul A*/
       .seccionDos > .contenedor > .dos{
        grid-column-start:2 ;
        grid-column-end:3 ;
        grid-row-start:2 ;
        grid-row-end:4 ;
    }
    .seccionDos > .contenedor > .dos .azul{
        margin-top: 0px;
    }

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

    .seccionDos > .contenedor > .dos .azul .paneltweets .mensajes{
        height: 300px;
        background-color: grey;

    }
    /*tarjeta azul B*/
    /*tarjeta morada A*/
        .seccionDos > .contenedor > .tres{
            grid-column-start:1 ;
            grid-column-end:3 ;
            grid-row-start:4 ;
            grid-row-end:5 ;
            
        }
        .seccionDos > .contenedor > .tres .morada{
            background-color: #662d91;
            width: 100%;
            height: auto;
            float:none;
            box-shadow:none;
            box-sizing: border-box;
        }

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

        .seccionDos > .contenedor > .tres .morada .icono img{
            margin-top: 50px;
            width: 10%;
        }

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

    /*tarjeta morada B*/
      /*logo trans A*/

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

     .seccionDos > .contenedor > .cuatro .ico_logo{
         text-align: center;
         padding: 80px 0px 20px 0px;
         
     }
     .seccionDos > .contenedor > .cuatro .ico_logo img{
         width: 80%;
     }
     /*logo trans B*/
/*section 2 B*/

}