/*IMPORTAMOS FUENTE */
@font-face{
    font-family:BangersFuenteCustom;
    src:url(../Font/Bangers-Regular.ttf);
}


body{
    /*background-color: #f4a460;*/  
    padding:0;
    margin:0px;
    /*CON ESTO ADAPTAMOS IMAGEN FONDO A PANTALLA*/
    background: url('../img/cuaderno.JPG') no-repeat center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    overflow-x: hidden;  /*CON ESTO QUITAMOS UN SCROLL HORIZONTAL INNECESARIO QUE LA WEB TIENE  */
    background-attachment:fixed; /*CON ESTA PROPIEDAD CREAMOS EL EFECTO PARALLAX*/ 
}
body ul{
    list-style: none;
    background-color: red;
    color:white;
    width: 50%;
    padding:5px;
    border-radius:5px;
    text-align: center;
}



.example-wrapper{
    /*margin:1em auto;*/
    margin-left:15%;
    width: 80%;
    font:18px/1.5 sans-serif;
    min-height:30vh; /*Tendra como minimo el 30% de la altura del viewport height*/  
    
}

.example-wrapper code{
    background: #F5F5F5;
    padding:2px 6px;
}




#header{
    margin:2em auto;
    max-width: 75%;
    width: 90%;
    font:18px/1.5 sans-serif;
    width:100%;
    max-width:100%;
        
    
    
}

h2{
    text-decoration:underline;
    font-size:30px;
}






#titulo{
    display:none;
    text-align: center;
    /*width:auto;*/
    text-shadow: 4px 3px 3px black,3px 2px 2px black,2px 1px 1px black,1px 0px 0px black;
    font-size:64px;
    margin:2%;    
    color:#C89C70;
}



#tituloanimado{
    display:block;
    text-align:center;
    color:#C89C70;
    font-size:64px;
    letter-spacing:2px;
    text-shadow: 4px 3px 3px black,3px 2px 2px black,2px 1px 1px black,1px 0px 0px black;
    animation:showText 10s cubic-bezier(0.1,0.7,1.0,0.5);
}
/*ANIMACION LETRERO EN LA PORTADA PRINCIPAL DE GESTOR DE TAREAS*/
@keyframes showText{
    0%{
        transform:translateX(-600%) scale(3.5,3.5);
        opacity:1;
    }
    50%{
        transform:translateX(600%) scale(3.5,3.5);
        opacity:1;
    }
    75%{
        transform:translateX(-600%) scale(3.5,3.5);
        text-shadow:none;
        color:transparent;
        opacity:0;    
    }
    100%{
        transform:translateX(0%) scale(1,1);
        text-shadow: 4px 3px 3px black,3px 2px 2px black,2px 1px 1px black,1px 0px 0px black;
        color:#C89C70;
        opacity:1;
    }
}


#fraseportada{
    color:blue;
    text-shadow:1px 2px 3px grey, 2px 3px 4px grey, 3px 4px 5px grey, 4px 5px 6px black, 5px 6px 7px grey;
    white-space:pre;  /*ESTA PROPIEDAD ES PARA QUE UNA LINEA DE TEXTO NO SE DEFORME AL MOVERLA POR LA PANTALLA*/
}

#fraseportada h3{
    margin-top:-4%;
    margin-left:-1%;
}




#menu{
    list-style: none;
    margin-left:0%;
    padding:1px;
    height: 50px;
    line-height: 50px;
    /*background-color: #ccc; */
    background-color: black;
    font-weight: bold;
    width:100%
    
}

/*Margen izquierdo de la opcion MIS TAREAS del  menu principal */
#menu #mistareas{
    margin-left:0;
}
#menu li{
    display:block;
    float:left;
    padding-left:1%;
    padding-right: 1%;
    border-right: 2px solid #C89C70;
    cursor: pointer;
    font-size: 22px;
    transition: all 300ms;

}

#menu li:hover{
    /*background-color: #444; */
    background-color:#C89C70;


}

#nombreusuario{
    font-size: 24px;
    color:green;
    font-weight: bold;
    text-align: center;
    border-right:0px;
    transition:all 300ms;
    text-shadow:1px 1px 1px #00AA34;
    text-transform: uppercase;
}
.right:hover{
    background-color:transparent !important;
    cursor:default !important;
}


#menu a{
    display: block;
    text-decoration: none;
    /*color:#444;*/
    color:#C89C70;
    transition:all 300ms;
}


#menu li:hover a{
    color:black;
}

#menu #ayuda{
    color:#C89C70;
}


label{
    display: block;
    width: 100%;
    margin-top: 15px;
    margin-bottom: 5px;
    font-weight:bold;
}


input[type="text"],
input[type="password"],
input[type="email"],
select,
textarea{
    width: 50%;
    padding:8px;
}

button,
input[type="submit"]{
    padding: 8px;
    margin-top: 15px;
    margin-bottom: 3%;
    background-color: #00AA33;
    color:white;
    border:2px solid #024917;
    cursor: pointer;
    transition: all 300ms;
}

/*BOTON DE BUSCAR CUANDO SE VA A BUSCAR TAREA POR TITULO*/

#buscartareaportitulo{
    border-radius:0;
}


button:hover,
input[type="submit"]:hover{
    background-color: #024917;
}

.clearfix{
    clear:both;
    float:none;
}

#menu #cerrarsesion {
    color:#C89C70;
    margin:0px;
    margin-left:0%;
    border-right: 0px;
}

#menu #cerrarsesion:hover {
    background-color: red;
    color:white;
}

/*ESTILOS DE LA TABLA */

table{
    width:100%;
    margin-bottom:30px;
    table-layout:fixed; /*PARA PODER ESTABLECER TAMAÑOS CELDAS LE PONGO FIXED*/
}
/*ESTILOS DE LAS COLUMNAS DE LA TABLA*/
/*COLUMNA TAREA*/
table .tarea{
    width:47%;
}
/*COLUMNA PRIORIDAD*/
table .prioridad{
    width: 14%;
}
/*COLUMNA HORAS*/
table .horas {
    width:10%;
}
/*COLUMNA PREVISTO FINALIZAR*/
.previstofinalizar{
    width: 20%;
}
/*COLUMNA ACCIONES*/
table .acciones{
    width: 37%;
}

table .tarea,
table .prioridad,
table .horas,
table .previstofinalizar,
table .acciones{
    background-color:#C8E5CA;
}

/*establezco las celdas para que no sobresalga contenido y para que si es mas largo que celda 
haga un salto de linea*/
table td{
    /*overflow: hidden;*/
    /*white-space: normal;*/
}

table th,
table td{
    padding:1%;
    border-bottom: 2px solid #ccc;
    text-align: center;
}

table tr{
    background-color: #e9ffea;
}

/*ESTA CLASE ES PARA MARCAR CON COLOR ROJO CUANDO LA FECHA PREVISTA DE ACABAR LA TAREA HA PASADO*/
.fecharoja{
    color:red;
}
/*ESTILOS DE LOS BOTONES DE A TABLA*/
.buttons{
    /*width:35%;*/

}

/*BOTONES DE VER EDITAR Y BORRAR DE LAS ACCIONES DE LA TABLA*/
.buttons a{
    text-decoration:none;
    padding:3%;
    color:white;
}
.btn-show{
    display:inline-block;
    border:1px solid #0d300d;
    background-color: #00AA33;
    /*width:14%;*/
    margin-right: 1%;
    margin-left:2%;
    width:17%;
    font-size:16px;
}
.btn-edit{
    display:inline-block;
    width:24%;
    border:1px solid #fc6900;
    background-color: orange;
    font-size:16px;
}

#btn-delete{
    /*width:43%;*/
    height:10%;
    padding:3.9%;
    color:white;
    border:1px solid #930606;
    background-color: red;
    font-size:16px;
    margin-left:1%;
}

.btneditcliente{
    display:inline-block;
    color:white;
    text-decoration:none;
    padding:8px;
    width:18%;
    background-color: #00AA33;
    border:2px solid #024917;
    cursor:pointer;
    margin-top:50px;
    margin-left: 0%;
    text-align:center;
    transition:all 500ms;
}

.btneditcliente:hover{
    background-color: #2d572c;
}

.btndeletecliente{
    background-color: red;
}
.btndeletecliente:hover{
    background-color:#990000;
}




/*ESTILOS BOTON DE VER TAREAS PENDIENTES/ACABADAS DE LA EMPRESA QUE ESTA AL FINAL DE LA
PAGINA DE TAREAS */

/*CONTENEDOR FLEXBOX DE LOS BOTONES */
.botonesbuscar_tareasacabadas{
    display: flex;
    margin-left: -21%;
    flex-grow: 1;
    justify-content: space-between;
    width: 100%;
}

#btn-busquedatareaparticular,
#btn-busquedatareaempresa{
    margin-right:-21%;
}

#btn-busquedatareaparticular{
    padding-left:2%;
    padding-right:2%;
}


/*TAMAÑOS GENERALES DE LOS BOTONES */
#btn-tareasacabadasempresa,
#btn-volvertareaspendientes,
#btn-tareasacabadasparticular,
#btn-volvertareaspendientesparticular,
#btn-busquedatareaempresa{
    width:-1%;
}

/*ESTILOS DEL BOTON VER MIS TAREAS ACABADAS Y VOLVER A MIS TAREAS PENDIENTES*/
#btn-tareasacabadasparticular,
#btn-volvertareaspendientesparticular,
#btn-tareasacabadasempresa,
#btn-volvertareaspendientesempresa{
    margin-left:21%;
}





/*ESTILOS GENERALES DE LOS BOTONES */
.tareas-acabadas{
    /*display:inline-block;*/
    color:white;
    text-decoration: none;
    background-color: #00AA33;
    padding:7px;
    cursor: pointer;
    margin-top:50px;
    /*margin-left:21%;*/
    text-align:center;
    border: 2px solid #024917;
    transition:all 500ms;
}

.tareas-acabadas:hover{
    background-color: #2d572c;
}

/*BOTONES DE VOLVER A TAREAS PENDIENTES(DE PARTICULAR O DE GRUPO) DESPUES DE BUSQUEDA POR TITULO*/

#volvertareaspendientes{
    margin-left:0;
}


.data-task{
    color:gray;
}



/*ESTILOS DE ALERTAS*/

/*Alerta de login incorrecto*/ 
.errorlogin{
    background-color: red;
    color:white;
    margin: 40px auto;
    width:48%;
}
.plazo{ /*.plazo es clase que se refiere al avis de plazo para finalizar la tarea*/
    background-color: red;
    color:white;
    width: 100%;
    margin: 40px auto;
}

.tareaspendientes{
    margin:0px auto;
}


.mensajeflash{  /*MENSAJE FLASH DE TAREA CREADA  O EDITADA Y USUARIO EDITADO*/
    text-align: center;
    margin:0px auto;
    width:53%;
    background-color: green;
    margin-bottom: 20px;
    color:white;
}

.plazotareavencido{ /*ESTILOS DE AVISO PLAZO VENCIDO Y TAREA BORRADA*/
    width:56%;
    background-color: red;
    margin-bottom: 20px;
    color:white;
}




/*BOTONES PAGINACION*/

#botones-paginacion{
    display: flex;
    justify-content:space-between; 
    width:100%;
}



/*ESTILOS DEL CAMPO CONTENIDO DE TAREA DENTRO DE LA PANTALLA DE DETALLE DE LA TAREA  */
#contenidotarea{
    width: 100%;
    overflow-wrap: anywhere;
    margin-bottom:10%;
}



/*ESTILOS FOOTER*/ 


footer{
    width: 100%;
    background-color: #444;
    height: 80px;
    display:grid;
    grid-template-areas:
        "   .                 .              .           .                   .                    . "
        "   autor         avisolegal    privacidad      ayuda            soportetecnico  redessociales ";

    grid-template-columns: 30% 15% 15% 10% 20% 10%;
    grid-template-rows:  30% 70%;  
}




.subir{
    float:right;
    margin-bottom: 1%;
    color:black;
    font-weight: bold;
    margin-left:1%;
}
.subir a{
    display:block;
    margin-bottom: 1%;
}


#flecha img{
    display:block;
    width:25%;
    margin-left: 50%;
    margin-bottom: -2%;
    margin-top:95%;
    cursor: pointer;
}





#redessociales{
    grid-area: redessociales;
    text-align: center;

}


/*
#instagram{
    opacity:0;
    grid-area: instagram;
}

#twitter{
    opacity: 0;
    grid-area:twitter;
}
*/

#linkedin{
    grid-area: linkedin;
    /*text-align: right;*/

}


#instagram img,
#linkedin img,
#twitter img{
    width:40%;
}



#autor{
    grid-area: autor;
    color:white;
    text-align: center;
}

#avisolegal{
    grid-area:avisolegal;
    color:white;
    text-align: center;
}

#privacidad{
    grid-area:privacidad;
    text-align:center;
    color:white;   
}




#ayudapiedepagina{
    grid-area:ayuda;
    color:white;
    text-align: center;
}
#soportetecnico{
    grid-area:soportetecnico;
    color:white;
    text-align: center;
}

#avisolegal a,
#ayudapiedepagina a,
#soportetecnico a,
#privacidad a{
    color:white;

}

/*ESTILOS DE LA IMAGEN DE LA PORTADA*/
#portada{
    /*margin-left: -5%;*/
    display:none;
    width:100%;
    height:380px;
    margin-top:-1%;
}

/*HORA DE LA WEB*/
#hora {
    font-weight: bold;
    padding:0px;
    color:transparent;
    float: right;
    margin-right:40%;
    font-size:34px;
}


/*ESTILOS DEL ENLACE QUE PONE : "AQUI" , DEL LOGIN */
.restablecerpassword,
#restablecerpasswordenlace,
#restablecerfrase,
#cambiarfraseseguridad{
    text-decoration: none;
    color:#444;
    width:100%;
    font-size:14px;
}
#restablecerpasswordenlace,
#restablecerfrase,
#cambiarfraseseguridad{
    color:blue;
}

#botones{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
}

#botonsubmit{
    margin-top: 21.7%;
    margin-left: 5%;
    margin-right: 45%;
    background-color: #00AA33;
    border: 2px solid #024917;
    height: 48.5%;
    padding:10px;
}

#botonsubmit:hover{
    background-color: #2d572c;
}

/* ESTILOS DE BOTON DE ENTRAR CUANDO TE ESTAS LOGANDO Y BOTON DE GUARDAR DATOS CUANDO UN USUARIO SE ESTÁ REGISTRANDO*/


#boton-logar,
#register_submit{
   margin-top:6%;
   border-radius:0;
}




/*ESTILOS DE LOS CAMPOS DEL FORMULARIO DE ELEGIR LA FRASE DE SEGURIDAD*/ 
.inputselegirfraseseguridad{
    margin-bottom: 2%;
}


/*ESTILOS DE LA ULTIMA FRASE DE PRIMEROS PASOS EN LA PARTE DE LA AYUDA*/
#bienvenido{
    background-color: #007fff;
    color:white;
}

/*MENSAJE DE DESPEDIDA CUANDO UN USUARIO SE DA DE BAJA*/
#cierresesion{
    display:none;
}

#despedida h2,
#cierresesion{
    text-shadow:4px 3px 3px black, 3px 2px 2px black, 2px 1px 1px black, 1px 0px 0px black;
    color:#C89C70;
    /*color: #C89C70;*/
    font-size: 30px;
    text-decoration:none;
    /*text-shadow:3px -5px 3px black, 2px 2px 10px black,6px 2px 4px black;*/
}




#viasdecontacto{
    color:#007fff;
}


/*ESTILOS DE AVISO LEGAL */



#contenedorprincipal{
    min-height: 1300px;
    margin:0 auto;
    width: 86%;
    display:grid;
    grid-template-columns:75% 25%;
    grid-template-rows:100%;
    grid-template-areas:"contenidolegal    indiceprincipal";

}



#contenidolegal{
    grid-area:contenidolegal;
    background-color: #D6AC84;
    padding:2%;
    font-weight:bold;
}



#indiceprincipal{
    grid-area:indiceprincipal;
    padding-left:3%;
}


#indicecontenido{
    padding:0px;
    display:grid;
    height: 100%;
    grid-template-columns:100%;
    grid-template-rows:repeat(17,2%);
    grid-template-areas:"indice"
        "identificacion"
        "finalidad"
        "condiciones"
        "comentarios"
        "mayoria"
        "medidas"
        "datos"
        "contenidos"
        "politica"
        "enlaces"
        "enlacesdeafiliados"
        "propiedad"
        "limitacion"
        "derecho"
        "datosjuris"
        "contacto";
}

#indicecontenido li{
    background-color:#007fff;
    list-style:none; 
    transition:all 300ms;
    border-bottom:1px solid white;
}


#indicecontenido li:hover a{
    
    color:white;
}



#indicecontenido li a{
    text-decoration: none;
    color:white;
    transition: all 300ms;
    font-weight: bold;
}

#indicecontenido li a:hover{
    text-shadow: 5px 12px 18px black;
    
}





#indice{
    grid-area:indice;
    text-align: center;
    margin-top:2%;
    color:black;
    font-size:28px;
    text-decoration: underline;
}

#identificacion{
    grid-area:identificacion;
}
#finalidad{
    grid-area:finalidad;
}

#condiciones{
    grid-area:condiciones;
}
#comentarios{
    grid-area:comentarios;
}

#mayoria{
    grid-area:mayoria;
}

#medidas{
    grid-area:medidas;
}

#datos{
    grid-area:datos;
}
#contenidos{
    grid-area:contenidos;
}

#politica{
    grid-area:politica;
}

#enlaces{
    grid-area:enlaces;
}
#enlacesdeafiliados{
    grid-area:enlacesdeafiliados;
}

#pripiedad{
    grid-area:propiedad;
}

#limitacion{
    grid-area:limitacion;
}

#derecho{
    grid-area:derecho;
}

#datosjuris{
    grid-area:datosjuris;
}

#contacto{
    grid-area:contacto;
}






.tituloavisolegal{
    background-color: #007fff;
    color:white;
}



/*Parrafo identificacion y titularidad de la parte de aviso legal */

.parrafoidentificacionytitularidad{

    font-size:20px;
    /*letter-spacing:2px;*/
    line-height:30px; 
}

#titular,
#nif,
#domicilio,
#correoelectronico{
    font-weight: bold;
}


/*ESTILOS POLITICA DE PRIVACIDAD*/

#contentPoliticaPrivacidad{
    
    
    min-height: 1300px;
    margin:0 auto;
    width: 86%;
    display:grid;
    grid-template-columns:75% 25%;
    grid-template-rows:100%;
    grid-template-areas:"contenidopolitica   indicegenericoPolitica";

}



#contenidopolitica{
    
    grid-area:contenidopolitica;
    background-color: #D6AC84;
    padding:2%;
    font-weight:bold;
}

#columnablancapolitica{
    grid-area:columnablancapolitica;
}

#indicegenericoPolitica{
    grid-area:indicegenericoPolitica;
    padding-left:3%;
}


#indicePolitica{
    
    
    padding:0px;
    display:grid;
    height: 100%;
    grid-template-columns:100%;
    grid-template-rows:repeat(17,2%);
    grid-template-areas:"indicepoliticaprivacidad"
        "enlaceparrafoinicial"
        "enlaceidentidad"
        "enlaceprincipios"
        "enlaceobtencion"
        "enlacederechos"
        "enlacefinalidad"
        "enlaceseguridad"
        "enlacecontenido"
        "enlacepoliticacookies"
        "enlacelegitimacion"
        "enlacecategorias"
        "enlaceconservacion"
        "enlaceexactitud"
        "enlaceaceptacion"
        "enlacerevocabilidad"
        "enlacecambios";
}

#indicePolitica li a{
    text-decoration: none;
    color:white;
    transition: all 300ms;
    font-weight: bold;
    
}

#indicePolitica li a:hover{
    text-shadow: 5px 12px 18px black;
}

#indicePolitica li{
    background-color:#007fff;
    list-style:none; 
    transition:all 300ms;
    border-bottom:1px solid white;
}




#indicePolitica li:hover a{
    color:white;
}

#indicepoliticaprivacidad{
    
    grid-area:indicepoliticaprivacidad;
    text-align:center;
    margin-top:2%;
    color:black;
    font-size: 28px;
    text-decoration: underline;
}

#enlaceparrafoinicial{
    grid-area:enlaceparrafoinicial;
}

#enlaceidentidad{
    grid-area:enlaceidentidad;
}
#enlaceprincipios{
    grid-area:enlaceprincipios;
}
#enlaceobtencion{
    grid-area:enlaceobtencion;
}

#enlacederechos{
    grid-area:enlacederechos;
}

#enlacefinalidad{
    grid-area:enlacefinalidad;
}
#enlaceseguridad{
    grid-area:enlaceseguridad;
}
#enlacecontenido{
    grid-area:enlacecontenido;
}

#enlacepoliticacookies{
    grid-area:enlacepoliticacookies;
}
#enlacelegitimacion{
    grid-area:enlacelegitimacion;
}

#enlacecategorias{
    grid-area:enlacecategorias
}

#enlaceconservacion{
    grid-area:enlaceconservacion;
}
#enlaceexactitud{
    grid-area:enlaceexactitud;
}

#enlaceaceptacion{
    grid-area:enlaceaceptacion;
}

#enlacerevocabilidad{
    grid-area:enlacerevocabilidad;
}

#enlacecambios{
    grid-area:enlacecambios;
}


#aceptoprivacidad p{
    color:gray;
    text-align:left;
    font-size:16px;
}
#aceptoprivacidad a{
    color:blue;
}




/*ESTILOS DE ENLACES PARA AVANZAR O RETROCEDER LA PAGINACION*/


.avanzarpagina,
.retrocederpagina{
    /*display:inline-block;*/
    font-size: 21px;
    text-decoration: none;
    color:blue;
}

.avanzarpagina{
    margin-left:74%;
}



.numeropagina{
    margin-left: 40%;
    margin-right: 33%;
    font-weight:bold;
    font-size:22px;
}
/*ESTILOS DE COINCIDENCIAS DE RESULTADOS EN LA BUSQUEDA*/
.resultadobusqueda{
    font-weight: bold;
    text-align: center;
}







/*MEDIA QUERIES- RESPONSIVE */

@media(min-width:1600px){
    
    #fraseportada h3{
        font-size:30px;
    }
    
    
    input[type="text"],
    input[type="password"],
    input[type="email"],
    select,
    textarea{
        width: 30%;
        padding:8px;
    }
    .plazotareavencido{
        width:56%;
    }
}

@media(min-width:1501px){

    
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    textarea{
        width: 40%;
        padding:1%;
    }
    select{
        width: 52%;
        padding: 1%;
    }


}

@media(max-width:1966px){
    /*FRASE INICIAL EN LA PORTADA DANDO INTRODUCCION DE COMO COMENZAR EN LA APLICACION */
    #fraseportada h3{
        font-size:29px;
    }
}

@media(max-width:1900px){
    /*FRASE INICIAL EN LA PORTADA DANDO INTRODUCCION DE COMO COMENZAR EN LA APLICACION */
    #fraseportada h3{
        font-size:28px;
    }
}

@media(max-width:1830px){
    #fraseportada h3{
        font-size:27px;
    }
}

@media(max-width:1770px){
    #fraseportada h3{
        font-size:26px;
    }
}

@media(max-width:1700px){
    #fraseportada h3{
        font-size:25px;
    }
}

@media(max-width:1640px){
    #fraseportada h3{
        font-size:24px;
    }
}

@media(max-width:1570px){
    #fraseportada h3{
        font-size:23px;
    }
}

@media(max-width:1510px){
    #fraseportada h3{
        font-size:22px;
    }
}


@media(max-width:1500px){
    #botones{
        justify-content:space-between;
    }
    #menu li{
        font-size: 19px;
    }

    input[type="text"],
    input[type="password"],
    input[type="email"],
    textarea{
        width: 50%;
        padding:8px;
    }

    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    textarea{
        width: 40%;
        padding:1%;
    }
    select{
        width: 52%;
        padding: 1%;
    }


}





@media(max-width:1450px){
    #menu li{
        font-size:18px;

    }
}

@media(max-width:1440px){
    #fraseportada h3{
        font-size:21px;
    }
}




@media(max-width:1380px){
    #fraseportada h3{
        font-size:20px;
    }
}


@media(max-width:1370px){
    #menu li{
        font-size:17px;
    }

    .plazotareavencido{
        width:60%;
    }

    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    textarea{
        width: 40%;
        padding:1%;
        font-size: 15px;
    }
    select{
        width: 67%;
        padding: 1%;
        font-size:15px;
    }

}


@media(max-width:1347px){
    .avanzarpagina,
    .retrocederpagina{
        font-size:14px;
    }
}


@media(max-width:1313px){


    #hora {
        width:50%;
        font-size:25px;
        margin-right:10%;
    }


    

}


@media(max-width:1310px){
    #fraseportada h3{
        font-size:19px;
    }
}





@media(max-width:1293px){
    #menu li{
        font-size: 16px;
    }
}

@media(max-width:1285px){
    table .tarea{
        width:45%;
    }

    .plazotareavencido{
        width:70%;
    }

    /*ESTILOS MENSAJE DE LOGIN INCORRECTO*/
    .errorlogin{
        width:55%;
    }
}



@media(max-width:1241px){
    #hora{
        font-size:23px;
    }
}

@media(max-width:1240px){
    #fraseportada h3{
        font-size:18px;
    }
}



@media(max-width:1225px){
    #menu li{
        font-size:15px;
    }
}

@media(max-width:1220px){
    table .tarea{
        width:40%;
    }
}

@media(max-width:1210px){
    .avanzarpagina{
        font-size: 12px;
    }
}


@media(max-width:1189px){
    #hora{
        font-size:22px;
    }
}


@media(max-width:1180px){
    #fraseportada h3{
        font-size:17px;
    }
    
    /*ESTILOS BOTON EDITAR MIS DATOS DENTRO DE MIS DATOS*/
    #btneditcliente{
        width:22%;
    }
    
    /*ESTILOS BOTÓN DARME DE BAJA DENTRO DE MIS DATOS*/
    #dardebaja{
        width:20%;   
    }
    
}




@media(max-width:1157px){
    table .tarea{
        width:38%;
    }
    .mensajeflash{
        width:54%;
    }

}





@media(max-width:1138px){
    #hora{
        font-size:20px;
    }
    #menu li{
        font-size:14px;
    }
    table .tarea{
        width:35%;
    }

    .mensajeflash{
        width:56%;
    }

    /*ESTILOS MENSAJE DE LOGIN INCORRECTO*/
    .errorlogin{
        width:60%;
    }
}


@media(max-width:1110px){
    #fraseportada h3{
        font-size:16px;
    }
}



@media(max-width:1094px){
    table .tarea{
        width:30%;
    }
    .avanzarpagina,
    .retrocederpagina{
        font-size:12px;
    }
    .numeropagina{
        font-size:12px;
    }
    .plazotareavencido{
        width:80%;
    }
    .mensajeflash{
        width:60%;
    }

}

@media(min-width:1080px){

    #linkedin img{
        width:43px;
    }
}

@media(max-width:1080px){
    #menu li{
        font-size:13px;
    }
}

@media(max-width:1045px){
    #fraseportada h3{
        font-size:15px;
    }
}




@media(max-width:1034px){
    #hora{
        width: 50%;
        float:none;
        margin-left: 1%;
    }
    table .tarea{
        width:25%;
    }
    .buttons a{
        padding:2%;
    }
    #btn-delete{
        padding:3%;
    }


    .tarea,
    .prioridad,
    .horas,
    .previstofinalizar,
    .acciones{
        font-size:15px;
    }

    .mensajeflash{
        width:70%;
    }

    /*ESTILOS MENSAJE DE LOGIN INCORRECTO*/
    .errorlogin{
        width:65%;
    }
}


@media(max-width:1021px){
    #botones{
        width:100%;
    }
}


@media(max-width:1000px){
    #menu li{
        font-size:12px;
    }

    input[type="text"], input[type="password"], input[type="email"], select, textarea {
        padding: 4px;
        width: 45%;
    }
  
    #title{ /*Esto id es del titulo para hacer la busqueda de la tarea por titulo*/ 
        width: 50%;
    }

    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    textarea{
        width: 47%;
        padding:1%;
        font-size: 15px;
    }
    select{
        width: 72%;
        padding: 1%;
        font-size:15px;
    }

    /*BOTONES DE EDITAR MIS DATOS,CAMBIAR CONTRASEÑA Y DARME DE BAJA*/
    #botones{
        font-size: 10px;
    }
    .btneditcliente{
        margin-top: 5%;
        margin-bottom: 3%;
        padding:5px;
    }
    #botonsubmit{
        margin-top:25%;
        padding: 7px;
        height: 32.2%;
    }


}


@media(max-width:980px){
    #fraseportada h3{
        font-size:14px;
    }
}



@media(max-width:978px){
    .avanzarpagina{
        font-size:11px;
    }
}


@media(max-width:958px){
    #btn-busquedatareaempresa{
        width: 37%;
    }

    .plazotareavencido{
        width:85%;
    }
    
    /*ESTILOS DE LOS BOTONES  EDITAR MIS DATOS, CAMBIAR CONTRASEÑA Y DARME DE BAJA DENTRO DE MIS DATOS*/
    #botones{
        font-size: 15px;
    }
    
    #btneditcliente{
        width:44%;
        margin-right:4%;
    }
    #botonsubmit{
        padding-left:10%;
        padding-right:10%;
        
    }
    #dardebaja{
        width:46%;
        margin-left:5%;
    }
    /*
    .btneditcliente{
        margin-top: 5%;
        margin-bottom: 3%;

    }
*/
    #botonsubmit{
        margin-top:24%;
    }

}


@media(max-width:940px){
    #titulo,
    #tituloanimado{
        font-size:60px;
    }

    #title{
        width: 60%;
    }

    #nombreusuario{
        font-size:20px;
    }

    
    #hora{
        width:100%;
    }

    .avanzarpagina,
    .retrocederpagina{
        font-size:11px;
    }

    /*ESTILOS MENSAJE DE LOGIN INCORRECTO*/
    .errorlogin{
        width:70%;
    }
}


@media(max-width:921px){
    .avanzarpagina{
        font-size:10px;
    }
}


@media(max-width:920px){
    #fraseportada h3{
        font-size:13px;
    }
}



@media(max-width:910px){
    #menu li{
        font-size: 11px;
    }

    #title{
        width: 70%;
    }

    #btn-tareasacabadasempresa{
        width:38%;
    }
    #btn-busquedatareaempresa{
        width:40%;
    }

    #botonsubmit{
        height: 33%;
        margin-top:23%;
    }
    .btneditcliente{
        height:50%;
    }


}


@media(max-width:898px){
    .avanzarpagina,
    .retrocederpagina{
        font-size:9px;
    }
    table td{
        font-size:15px;
    }

   

    .tarea,
    .prioridad,
    .horas,
    .previstofinalizar,
    .acciones{
        font-size:13px;
    }


    

    .restablecerpassword,
    #restablecerpasswordenlace,
    #restablecerfrase,
    #cambiarfraseseguridad{
        font-size:14px;
    }

    .plazotareavencido{
        width:88%;
        font-size: 15px;
    }

    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    textarea,label{
        padding:1%;
        font-size: 15px;
    }
    
    select{
        width: 72%;
        padding: 1%;
        font-size:15px;
    }
    /*BOTON GUARDAR CUANDO SE QUIERE MODIFICAR TAREA*/ 
    #task_submit,
    #task_type_creation_submit,
    #edituser_submit,
    #boton_cambiar_password,
    #volveramisdatos,
    #edituser_submit{
        padding:7px;
        font-size:14px;
    }
    /*ESTILOS BOTON DE MODIFICAR DENTRO DE EDITAR LOS DATOS PERSONALES */
    #edituser_submit{
        width:28%;
    }
    
    /*ESTILOS BOTÓN CAMBIAR CONTRASEÑA DENTRO DE CAMBIAR CONTRASEÑA EN EL MENU MIS DATOS */
    #boton_cambiar_password{
        border-radius:0;
    }
    
    
    .mensajeflash{
        width:80%;
    }



    


    /*ESTILOS POLITICA PRIVACIDAD*/
    
    #indicePolitica li a{
        font-size:10px;
    }
    #contenidopolitica ol li a,
    #contenidopolitica p,
    #contenidopolitica li,
    #contenidopolitica h2{
        font-size:14px;
        text-align:left;
    }
    
    #aceptoprivacidad p{
        font-size:13px;
    }
    
    
    

    /*ESTILOS AVISO LEGAL*/
    #indicecontenido li a{
        font-size:10px;
    }



    /*ESTILOS MENSAJE DE LOGIN INCORRECTO*/
    .errorlogin{
        width:75%;
    }

}



@media(max-width:850px){
    #fraseportada h3{
        font-size:16px;
        margin-left:0;
    }
    
    .example-wrapper{
        width:97%;
        margin-left:2%;
    }
}




@media(max-width:840px){
    #menu li{
        font-size:10px;
    }

    #title{
        width: 80%;
    }
    #botonsubmit{
        margin-top:21%;
        height: 36%;
    }

    #contenidolegal h2{
        font-size:16px;
        text-align:left;
    }
    #contenidolegal p,
    #contenidolegal ol li{
        font-size:15px;
        text-align:left;
    }

    /*AVISO LEGAL */
    #indicecontenido li a{
        font-size:7px;
    }



}





@media(max-width:815px){
    #titulo,
    #tituloanimado{
        font-size:50px;
    }

    #autor{
        font-size:12px;
    }
    #avisolegal{
        font-size:12px;
    }
    #privacidad{
        font-size:12px;
    }

    #ayudapiedepagina{
        font-size:12px;
    }
    #soportetecnico{
        font-size: 12px;
    }

    
    /*ESTILOS MENSAJE DE LOGIN INCORRECTO*/
    .errorlogin{
        width:80%;
    }
    
    #botonsubmit{
        margin-top:20%;
        height: 36%;
    }
    
    
    label{
        font-size: 16px;
        font-weight:bold;
    }
    
    
    
}


@media(max-width:790px){
    
    
    
    #menu li{
        font-size:11px;
    }
    #title{
        width: 85%;
    }



}

@media(max-width:766px){
    /*ESTILOS DE LA FRASE QUE ESTA DEBAJO DE LA IMAGEN DE LA PORTADA PRINCIPAL*/
    #fraseportada h3{
        font-size:15px;
        margin-left:0;
        margin-top:-6%;
    }
    
    #titulo,
    #tituloanimado{
        font-size:40px;
    }
    /*ESTILOS BOTONES DE LA TABLA DE VER EDITAR Y BORRAR*/
    /*
    .buttons a{
        font-size:15px;
    }
    
    #btn-delete{
        
        font-size: 15px;
    }
    */

    #btn-tareasacabadasparticular,
    #btn-tareasacabadasempresa{
        width:36%;
        font-size:12px;
        height:20%;
    }
    /*BOTÓN BUSCAR TAREA DE TU GRUPO */
    #btn-busquedatareaempresa{
        width:50%;
    }
    /*BOTÓN BUSCAR TAREA POR TÏTULO PARTICULAR*/
    #btn-busquedatareaparticular {
        padding-left: 2%;
        padding-right: 2%;
        font-size: 12px;
        width: 37%;
    }
    
    /*ESTILOS BOTÓN REALIZAR OTRA BÚSQUEDA */
    
    #realizarotrabusqueda{
        margin-left:0;
    }
    

    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    textarea{
        width: 55%;
        padding:1%;
        font-size: 15px;
    }
    
    label[for="register_enterprise"]{
        font-size: 13px;
    }
    
    
    select{
        width: 72%;
        padding: 1%;
        font-size:15px;
    }

    .mensajeflash{
        width:85%;
        font-size:14px;
    }

    #botonsubmit{
        margin-top:19%;
        height: 39%;
    
    }

    /*ESTILOS MENSAJE DE LOGIN INCORRECTO*/
    .errorlogin{
        width:85%;
    }


    /*ESTILOS POLITICA DE PRIVACIDAD*/
    #aceptoprivacidad p{
        font-size:12px;
    }    

    .tareas-acabadas{
        font-size: 11px;
        /*margin-left: 11%;*/
        padding: 5px;
        
    }
    /*ESTILOS BOTONES VOLVER A MIS TAREAS PENDIENTES Y DEMÁS BOTONES QUE ESTAN EN VARIAS PÁGINAS*/
    #volvertareaspendientes,
    #btn-tareasacabadasempresa,
    #btn-busquedatareaempresa,
    #btn-volvertareaspendientesempresa,
    #btn-tareasacabadasparticular,
    #btn-busquedatareaparticular,
    #buscartareaportitulo,
    #btn-volvertareaspendientesparticular,
    #realizarotrabusqueda,
    #volveramistareas,
    #volveratareasdegrupo{
        font-size:14px;
        padding:7px;
    }
    
    
    #volveratareasdegrupo{
        margin-left:30%;
    }
    
    
    /*ESTILOS  BOTÓN CAMBIAR CONTRASEÑA*/
    #botonsubmit{
        border-radius:0;
        margin-top:24%;
        height: 35%;
        margin-left:0%;
    }
    
    
    
    /*ESTILOS TEXTO DENTRO DE DETALLE DE LA TAREA*/
    
    
    p{
        font-size:22px;
    }
    
    
    .data-task{
        font-size:18px;
    }
    
    
    
    
    /*ESTILOS BOTÓN TAREAS PENDIENTES DEL GRUPO*/
    #btn-volvertareaspendientesempresa{
        width:40%;
    }
    
    
    
    
    button, input[type="submit"]{
        margin-bottom:9%;
    }
    
}


@media(max-width:745px){  /*TAMAÑO PANTALLA IPHONE 7 PLUS EN HORIZONTAL*/ 
    
    /*ESTILOS DE LOS INPUTS DE EMAIL Y CONTRASEÑA  EN EL LOGIN  */
    #username,
    #password{
        width:63%;
    }
    
    /*INDICE DE AVISO LEGAL*/
    #indicecontenido li a,
    #indicePolitica li a{
        font-size: 15px;
    }
    
    /*LETREROS H2 DE AVISO LEGAL */
    #contenidolegal h2,
    #contenidopolitica h2{
        font-size:21px;
    }
    /*PARRAFOS Y LAS LISTAS DE AVISO LEGAL */
    #contenidolegal p,
    #contenidolegal ol li,
    #contenidopolitica p,
    #contenidopolitica ol li a,
    #contenidopolitica ol li{
        font-size:18px;
    }
    
    
    
    
    
    
 
    /*IMAGEN DE LA PORTADA*/
    #portada{
        height:226px;
    }
    
    
    .example-wrapper{
        min-height: 10vh;
        width:97%; 
        margin-left:2%;
    }
    
    
    
    
    /*ANIMACION LETRERO EN LA PORTADA PRINCIPAL DE GESTOR DE TAREAS*/
    #tituloanimado{
        animation:showText 2s linear;
    }
    
    
    @keyframes showText{
        0%{
            transform:translateY(-250%);
            opacity:0;
            color:transparent;
        }
        100%{
            transform:translateY(0%);
            text-shadow: 4px 3px 3px black,3px 2px 2px black,2px 1px 1px black,1px 0px 0px black;
            color:#C89C70;
            opacity:1;
        }
    }

    #menu li{
        padding-left:3%;
    }
    
    
    #btn-tareasacabadasparticular,
    #btn-tareasacabadasempresa{
        width:40%;
    }
    
    /*MENSAJE EN ROJO DE TAREAS FUERA DE PLAZO*/
    .plazotareavencido{
        width:99%;
    }
    
    
    /*ESTILOS DE LA TABLA DE TAREAS */
    
    .tarea,
    .prioridad,
    .horas,
    .previstofinalizar,
    .acciones{
        font-size:15px;
    }
    
    
    table td{
        font-size:13.5px;
    }
    
    /*ESTILOS BOTONES VER, EDITAR Y BORRAR DE LA TABLA DE TAREAS*/
    
    .buttons a {
        padding:2.5%;
        font-size:12px;
    }
    
    #btn-delete{
        padding:3.5%;
        font-size:12px;
    }
    
    
    /*ENLACE AVANZAR PAGINA*/
    .retrocederpagina{
        font-size:15px;
    }
    .avanzarpagina{
        margin-left:74%;
        font-size:15px;
    }
    .numeropagina{
        font-size:15px;
        margin-left:45%;
    }
    
    
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    textarea{
        width: 75%;
        padding:1%;
        font-size: 22px;
    }
    select{
        width: 77%;
        padding: 1%;
        font-size:22px;
    }

    /*ESTILOS MENSAJE DE LOGIN INCORRECTO*/
    .errorlogin{
        font-size:15px;
    }
    
    
    #linkedin img{
        width:60%;
    }
    
    /*MENSAJE DE DESPEDIDA AL DAR DE BAJA DE LA APP Y DE CERRAR SESION*/
    #despedida h2,
    #cierresesion{
        font-size: 15px;
    }
    
    
    
}


@media(max-width:712px){
    /*ESTILOS DE LA FRASE QUE ESTA DEBAJO DE LA IMAGEN DE LA PORTADA PRINCIPAL*/
    #fraseportada h3{
        font-size:14px;
        margin-left:0;
    }
}


@media (max-width:700px){
    #menu{
        height: 30px;
        line-height: 30px;
        /*width: 90%;*/
    }
    
    
    .tarea,
    .prioridad,
    .horas,
    .previstofinalizar,
    .acciones{
        font-size:14px;
    }
    
    
    /*    
    #portada{
            height: 40%;
    }    
    */
    

    
    h3,
    .resultadobusqueda{
        font-size:15px;
    }
    .plazotareavencido{
        width:95%;
    }

    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    textarea{
        width: 80%;
        padding:1%;
    }
    
    label[for="register_enterprise"]{
        font-size: 12px;
    }
    
    select{
        width: 82%;
        padding: 1%;
        
    }
    

   
    
    
    /*ESTILOS POLITICA DE PRIVACIDAD*/
    #aceptoprivacidad p{
        font-size:11px;
    }
    
    
}

@media(max-width:670px){
    
    /*ESTILOS DE LA FRASE QUE ESTA DEBAJO DE LA IMAGEN DE LA PORTADA PRINCIPAL*/
    #fraseportada h3{
        font-size:13px;
        margin-left:0;
    }
    
    

    #title{
        width: 90%;
    }
    

    #btn-tareasacabadasparticular,
    #btn-tareasacabadasempresa{
        width:41%;
    }

    .plazotareavencido{

        font-size:14px;
    }
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    textarea{
        width: 85%;
        padding:1%;
        
    }
    select{
        width: 87%;
        padding: 1%;
        
    }

    
}


@media(max-width:654px){
    
    /*ESTILOS DE LA OPCIÓN DE CERRAR SESION DEL MENU SUPERIOR PRINCIPAL*/
     #menu #cerrarsesion{
        float:none;
        border-left:none;
        
    }
    
    /*ESTILOS DEL MENU PRINCIPAL*/
    #menu li{
        font-size:10px;
    }
    
    
    
    /*ESTILOS DE LAS CABECERAS DE LA TABLA(TH)*/
    .tarea,
    .prioridad,
    .horas,
    .previstofinalizar,
    .acciones{
        font-size:13px;
    }
    
    
    
    #btn-tareasacabadasparticular,
    #btn-busquedatareaparticular,
    #btn-tareasacabadasempresa,
    #btn-busquedatareaempresa{
        font-size: 11px;
        width:39%;
    }
}

@media(max-width:645px){
    

    
    #botonsubmit{
        margin-top: 16%;
        height: 43%;
    }    
    
    /*ESTILOS POLITICA DE PRIVACIDAD*/
    #aceptoprivacidad p{
        font-size:10px;
    }
    
}


@media(max-width:630px){
    /*ESTILOS DE LA FRASE QUE ESTA DEBAJO DE LA IMAGEN DE LA PORTADA PRINCIPAL*/
    #fraseportada h3{
        font-size:12px;
        margin-left:0;
    }
    
    
    .plazotareavencido{
        width:98%;
        font-size:13px;
    } 

    /*ESTILOS POLITICA PRIVACIDAD*/
    #indicepoliticaprivacidad{
        font-size: 19px;
    }
    #indicePolitica li a{
        font-size:9px;
    }


}

@media(max-width:610px){
    
    
    /*ESTILOS DE LA CABECERA DE LA TABLA(TH)*/
    .tarea,
    .prioridad,
    .horas,
    .previstofinalizar,
    .acciones{
        font-size:12px;
    }
    
    /*
    #portada{
        height: 35%;
    }
    */
    
    #titulo,
    #tituloanimado{
        font-size: 35px;
    }

    input[type="email"],
    input[type="password"]{
        width:80%;
    }
    
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    textarea{
        width: 88%;
        padding:1%;
        font-size: 15px;
    }
    select{
        width: 90%;
        padding: 1%;
        font-size:15px;
    }
    #botones{
        font-size:9px;
    }
    

    #acordeon{
        font-size:70%;
    }
    #acordeon p{
        font-size:10px;
    }

    /*ESTILOS MENSAJE DE LOGIN INCORRECTO*/
    .errorlogin{
        width:90%;
    }

    /*ESTILOS POLITICA DE PRIVACIDAD*/

    .parrafoidentificacionytitularidad {
        font-size: 15px;
        letter-spacing: 0px;
        line-height:15px;
    }
   

    #indicePolitica li{
        line-height: 10px;
    }
    #indicePolitica li a{
        letter-spacing: normal;
        font-size: 8px;
    }

    /*ESTILOS AVISO LEGAL */

    #indice{
        font-size:20px;
    }

    
}

@media(max-width:582px){
    
    /*ESTILOS DEL MENU PRINCIPAL*/
    #menu li{
        font-size:9px;
    }
    
    /*ESTILOS DE LA FRASE QUE ESTA DEBAJO DE LA IMAGEN DE LA PORTADA PRINCIPAL*/
    #fraseportada h3{
        font-size:11px;
        margin-left:0;
        margin-top:-9%;
    }
    
    #portada{
        height:290px;
    }

    .plazotareavencido{
        width:98%;
        font-size:12px;
    }


    .mensajeflash{
        width:90%;
        font-size:12px;
    }
    
    /*ESTILOS MENSAJE DE LOGIN INCORRECTO*/
    .errorlogin{
        font-size:13px;
    }

    /*ESTILOS POLITICA DE PRIVACIDAD*/
    #aceptoprivacidad p{
        font-size:9px;
    }


}

@media(max-width:550px){
    
    /*ESTILOS INPUTS DE EMAIL Y CONTRASEÑA AL LOGARNOS*/
    #username,
    #password{
        width:80%;
    }
    
    
    #nombreusuario{
        font-size:15px;
    }

    /*ESTILOS DE LA CABECERA DE LA TABLA(TH)*/
    .tarea,
    .prioridad,
    .horas,
    .previstofinalizar,
    .acciones{
        font-size:11px;
    }
    
    
    
    
    table td{
        font-size:9px;
    }

    .buttons a{
        padding-left: 2%;
        font-size: 9px;
        padding-right: 2%;
    }
    
    #btn-delete{
        font-size:9px;
    }
    
    

    #title{
        width: 95%;
    }

    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    textarea{
        width: 90%;
        padding:1%;
        font-size: 22px;
    }
    select{
        width: 92%;
        padding: 1%;
        font-size:22px;
    }

}




@media(max-width:527px){
    
    /*ESTILOS DE LA FRASE QUE ESTA DEBAJO DE LA IMAGEN DE LA PORTADA PRINCIPAL*/
    #fraseportada h3{
        font-size:10px;
        margin-left:0;
    }
    
       
    #menu li a,
    #menu #ayuda,
    #menu li{
        font-size:8px;
    }   
       
    #btn-busquedatareaempresa{
        width:44%;
    }

    #btn-tareasacabadasempresa{
        width:41%;
    }
    
    
    
    #botonsubmit{
        margin-top: 15%;
        height: 45%;
    }
    
    /*ESTILOS POLITICA DE PRIVACIDAD*/
    #aceptoprivacidad p{
        font-size:8px;
    }
}



@media(max-width:514px){
    
    /*ESTILOS DE LA CABECERA DE LA TABLA(TH)*/
    .tarea,
    .prioridad,
    .horas,
    .previstofinalizar,
    .acciones{
        font-size:10px;
    }
    
    
    .numeropagina{
        font-size:8px;
    }


    .ui-tooltip{
        font-size:8px;
    }




}

@media(max-width:502px){
    .plazotareavencido{
        width:98%;
        font-size:11px;
    }

    

    #botonsubmit{
        margin-top: 14%;
    }

    #acordeon{
        font-size:50%;
    }
}



@media(max-width:490px){  /*HASTA AQUI ESTA MAQUETADO LA ACEPTACION DE POLITICA DE PRIVACIDAD*/
    
    
    /*ESTILOS DEL BOTÓN EDITAR MIS DATOS DENTRO DE LA OPCION MIS DATOS */
    #btneditcliente{
        margin-right:4%;
        font-size:14px;
        width:36%;
    }
    
    /*ESTILOS DEL BOTÓN CAMBIAR CONTRASEÑA DE MIS DATOS*/
    #botonsubmit{
        margin-left:0%;
        font-size:14px;
    }
    
    /*ESTILOS DEL BOTON DE DAR DE BAJA DENTRO DE MIS DATOS*/
    #dardebaja{
        margin-left:0%;
        font-size:14px;
        width:36%;
    }
    
    /*CONTENEDOR FLEX DE LOS TRES BOTONES QUE HAY EN EL APARTADO DE MIS DATOS */   
    #botones{
        flex-direction:column;
        align-items:end;
    }
    
    
    
    
    /*ESTILOS DE LOS INPUTS DE EMAIL Y CONTRASEÑA  EN EL LOGIN  */
    #username,
    #password{
        width:94%;
    }
    
    /*ESTILOS DE LA FRASE QUE ESTA DEBAJO DE LA IMAGEN DE LA PORTADA PRINCIPAL*/
    #fraseportada h3{
        font-size:9px;
        margin-left:0;
    }
    #acordeon ol li,
    #acordeon p{
        font-size:15px;
    }
    #acordeon h3{
        font-size:18px;
    }
    
    
    footer #autor,
    footer #avisolegal,
    footer #ayudapiedepagina,
    footer #soportetecnico,
    footer #privacidad{
        font-size: 7px;

    }
    
    

    #titulo,
    #tituloanimado{
        font-size:38px;
    }
    
    
    #hora{
        font-size:15px;
    }

     table .prioridad{
        text-align:left;
        width:15%;
    }    

    .tarea,
    .prioridad,
    .horas,
    .previstofinalizar,
    .acciones{
    
        font-size:8px;
    }
    
    
    
    
    
    table td,
    table .buttons{
        font-size:11px;
    }
    
    
    
    table{
        width: 100%;
        
    }
    
    .example-wrapper{
        margin-left: 1.5%;
        min-height: 60vh;
        
    }
    
    
    
    /*ENLACE DE PAGINA SIGUIENTE Y PAGINA ATRAS  EN EL PAGINADOR DE LAS TAREAS*/
    #avancepagina{
        margin-left:63%;
        font-size:12px;
    }
    .retrocederpagina{
        font-size:12px;
    }
    
    /*LETRERO DEL NUMERO DE PAGINA EN LA QUE ESTAMOS*/
    .numeropagina{
        margin-left: 41%;
        margin-right: 33%;
        font-weight: bold;
        font-size:17px;
        margin-bottom:15%;
    }
    
    /*ESTILOS DEL BOTON VER MIS TAREAS ACABADAS Y VOLVER A MIS TAREAS PENDIENTES*/
    #btn-tareasacabadasparticular,
    #btn-volvertareaspendientesparticular,
    #btn-tareasacabadasempresa,
    #btn-volvertareaspendientesempresa{
        margin-left:11%;
        font-size:11px;
    }
    
    
    /*BOTON DE VOLVER A MIS TAREAS QUE ESTA DENTRO DE CREAR TAREA*/
    
    #volveramistareas{
        margin-left:0;
        font-size:12px;
        padding:7px;
    }
    
    #volveratareasdegrupo{
        font-size:12px;
        padding:7px;
        margin-left:0%;
    }
    
    
    
    #labelfortitlesearch{
        font-size:12px;
    }

    .plazotareavencido{

        font-size:10px;
    }

    #botones{
        font-size:6px;
    }
    /*
    #botonsubmit{
        margin-top:19%;
        height: 41%;
    }
    */
    #boton-logar{
        width:30%;
        padding:8px;
        font-size:15px;
        text-align:center;
    }
    
    /* ESTILOS DE BOTON DE ENTRAR CUANDO TE ESTAS LOGANDO Y BOTON DE GUARDAR DATOS CUANDO UN USUARIO SE ESTÁ REGISTRANDO*/
    #boton-logar,
    #register_submit{
       margin-top:12%; 
    }
    
    
    #btn-busquedatareaparticular, #btn-busquedatareaempresa {
        margin-right: -10%;
    }

    /*ESTILOS MENSAJE DE LOGIN INCORRECTO*/
    .errorlogin{
        width:95%;
        font-size:12px;
    }
    
    /*ESTILOS DE AVISO LEGAL */
    
    
    #indice{
        font-size:20px;
    }
   
    
    #indiceprincipal{
        padding-left:3%;
    }
    
    
    #contenidolegal{
        font-weight:bold;
    }
    #contenidolegal p,
    #contenidolegal ol li{
        font-size:9.4px;
    }
    
    #contenidolegal h2{
        text-decoration:underline;
    }
    
    
    #indicecontenido li{
        border-bottom:1px solid white;
        padding-top:1%;
        padding-left:1%;
        
    }
    
    
    
    #indicecontenido li a{
        font-size:9px;
    
    }
    #indicecontenido li #enlacesdeafiliados{
        padding-bottom:2%;
        
    }
    
    #contenedorprincipal{
        grid-template-columns:70% 30%;
    }
    
    
    /*ESTILOS POLITICA DE PRIVACIDAD*/
    
    #indicepoliticaprivacidad{
        font-size:20px;
    }
   
    
    #indicegenericoPolitica{
        padding-left:3%;
    }
    
    
    #contenidopolitica{
        font-weight:bold;
    }
    #contenidopolitica p,
    #contenidopolitica ol li{
        font-size:10px;
    }
    
    #contenidopolitica h2{
        text-decoration:underline;
    }
    
    
    #indicePolitica li{
        border-bottom:1px solid white;
        padding-top:1%;
        padding-left:1%;
        
    }
    
    
    
    #indicePolitica li a{
        font-size:9px;
    
    }
    
    
    #contentPoliticaPrivacidad{
        grid-template-columns:70% 30%;
    }
    
    
    /*ESTILOS DEL ICONO DE LINKEDIN*/
    #linkedin img{
        width:80%;
    }
    
    /*ESTILOS DE PARRAFO EXPLICANDO QUE HACER EN CASO DE QUE SE NOS OLVIDE CONTRASEÑA Y DEMÁS QUE ESTÁ EN LOGIN*/
    .restablecerpassword,
    #restablecerpasswordenlace,
    #restablecerfrase,
    #cambiarfraseseguridad{
            font-size:10px;
    }
    

}


@media(max-width:457px){
    
    /*ESTILOS DEL MENU PRINCIPAL*/
    #menu li {
        padding-left:1%;
        padding-right:1%;
    }
    /*
    #botonsubmit {
        margin-top: 24%;
        height: 40%;
    }
    */
}        


@media(max-width:445px){  /*TAMAÑO DE PANTALLA IPHONE 7 PLUS EN VERTICAL*/
    .buttons a{
        padding-left: 2%;
        font-size: 8px;
        padding-right: 2%;

    }
    #btn-delete{
        padding: 3.8%;
        font-size: 8px;
    }
    .plazotareavencido{
        font-size:12px;
    }


    .mensajeflash{
        width:95%;
        font-size:10px;
    }
    
    
    
}




@media(max-width:433px){
    
    #fraseportada h3{
        font-size:8px;
        margin-left:0;
        margin-top:-12%;
    }
    
    
    
    #menu li,
    #menu li a,
    #menu #ayuda{
            font-weight:bolder;
            font-size:7.7px;
        }
    
    
    
    
    

    #nombreusuario{
        font-size: 16px;
    }


    
    #portada{
        height:230px;
    }

    #btn-tareasacabadasparticular,
    #btn-busquedatareaparticular,
    #btn-tareasacabadasempresa,
    #btn-busquedatareaempresa
    {
        font-size: 11px;
        width:34%;
    }

    
    
    

    h5,
    .data-task{
        font-size:10px;
    }

    /*ESTILOS MENSAJE DE LOGIN INCORRECTO*/
    .errorlogin{
        width:97%;
        font-size:11px;
    }

    
    
    #indicePolitica li{
        line-height: 10px;
    }
    

    /*AVISO LEGAL */


    
    
    #indicecontenido{
        grid-template-rows: repeat(17,2%);
    }

    

    #botonsubmit {
        border-radius:0px;
    }
    
}

@media(max-width:411px){
    
    
    #menu li {
        padding-left:0.5%;
        padding-right:0.5%;
    }
    


    .tareas-acabadas{
        font-size: 9px;
        padding: 4px;
        width: 37%;
    }

    
    /*BOTON DE BUSCAR CUANDO QUEREMOS BUSCAR UNA TAREA POR SU TITULO*/
    #buscartareaportitulo{
        margin-bottom:6%;
        margin-top:9%;
    }
    
    /*CAMPO DONDE SE ESCRIBE EL TITULO DE LA TAREA QUE QUIERES BUSCAR*/
    #title{
        font-size:22px;
        width:90%;
        padding:1%;
    }
    
    
    .resultadobusqueda{
        font-size:70%;
    }

    
    
    h3{
        font-size:13px;
    }
    
    /*ESTILOS DE LOS DATOS PERSONALES DENTRO DE MIS DATOS*/
    .data-task,
    p,
    h5{
        font-size:18px;
    }

    .buttons a{
        padding-left: 2%;
        font-size: 7px;
        padding-right: 2%;

    }
    
    /*ESTILOS BOTON DE VER,EDITAR Y BORRAR TAREA DENTRO DE LA TABLA DE TAREAS */
    
    #btn-show{
        margin-left:-3%;
        padding: 3%;
        width: 18%;
        font-size: 8px;
        font-weight:bold;
        padding-top:13%;
        padding-bottom:11%;
    }
    #btn-edit{
        padding: 3%;
        font-size: 8px;
        font-weight:bold;
        padding-top:13%;
        padding-bottom:11%;
    }
    
    #btn-delete{
        padding: 4%;
        margin-right: -4%;
        font-size: 8px;
        width:39%;
        font-weight:bold;
        padding-top:14%;
        padding-bottom:12%;
        margin-top:5%;
    }

    
    
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    textarea{
        width: 97%;
        padding: 1%;
    }
    
    select{
        width:100%;
    }
    
    

    /*BOTON GUARDAR CUANDO SE QUIERE MODIFICAR TAREA*/ 
    #task_submit,
    #task_type_creation_submit,
    #edituser_submit,
    #boton_cambiar_password,
    #volveramisdatos,
    #buscartareaportitulo,
    #volvertareaspendientes,
    #btn-tareasacabadasempresa,
    #btn-busquedatareaempresa,
    #btn-volvertareaspendientesempresa,
    #realizarotrabusqueda{
        padding:7px;
        font-size:14px;
    }
    
    
    
    /*Letrero que pone Titulo de la tarea a buscar*/
    #labelfortitlesearch{
        font-size: 16px;
        font-weight: bold;
    }
    
    
    #btn-tareasacabadasempresa,
    #btn-busquedatareaempresa,
    #btn-volvertareaspendientesempresa{
        padding:7px;
        font-size:14px;
        font-weight:bold;
    }
    
    
    #boton_cambiar_password,
    #cambiarpassword,
    #boton-logar,
    input[type="submit"]{
        border-radius:0;
    }
    

    h2,h5{
        text-align: left;
    }
    h2{
        font-size:25px;
    }
    

    .errorlogin{
        width:100%;
        font-size:10px;
    }
    
    .botonesbuscar_tareasacabadas {
        display: flex;
        margin-left: -10%;
        flex-grow: 1;
        justify-content: space-between;
        width: 100%;
    }

    table .previstofinalizar{
        width:20%;
    }

   

}




@media(max-width:388px){ /*ANCHURA DE IPHONE 7 PLUS EN VERTICAL*/

    /*ESTILOS DEL BOTÓN EDITAR MIS DATOS DENTRO DE LA OPCION MIS DATOS */
    #btneditcliente{
        font-size:11px;
    }
    
    /*ESTILOS DEL BOTÓN CAMBIAR CONTRASEÑA DE MIS DATOS*/
    #botonsubmit{
        font-size:11px;
    }
    
    /*ESTILOS DEL BOTON DE DAR DE BAJA DENTRO DE MIS DATOS*/
    #dardebaja{
        font-size:11px;
    }


    #menu li,
    #menu li a,
    #menu #ayuda{
        font-size: 6.8px;
    }
    
    /*FRASE INICIAL EN LA PORTADA DANDO INTRODUCCION DE COMO COMENZAR EN LA APLICACION */
    #fraseportada h3{
        font-size:7.5px;
        
    }

    
    

    .ui-tooltip{
        font-size:5px;
    }

    #botones{
        font-size:8px;
    }

    
}

@media(max-width:362px){
    
    #fraseportada h3{
        font-size:7px;
        margin-left:0;
    }
    
    
    /*ANCHURA COLUMNA PREVISTO FINALIZAR DE LA TABLA*/
    table .previstofinalizar{
        width:22%;
    }
    
    
    /*FUENTE DE TODA LA CABECERA DE LA TABLA*/
    .tarea,
    .prioridad,
    .horas,
    .previstofinalizar,
    .acciones{
        font-size:7px;
    }
    
    /*TAMAÑO DE TODO EL CONTENIDO DE LA TABLAR*/
    
    table td,
    table .buttons{
        font-size:10px;
    }
    
    
    .buttons a{
        padding-left: 2%;
        font-size: 6px;
        padding-right: 2%;

    }
    

    .avanzarpagina,
    .retrocederpagina{
        font-size:6px;
    }
    #portada{
        height:200px;
    }
    .plazotareavencido{
        width:99%;
        font-size:9px;
    }
    /*Tamaño del datepicker de jquery ui*/
    .ui-state-default{
        font-size:9px;
    }
    ui-datepicker{
        left:3%;
    }

    .mensajeflash{
        width:97%;
        font-size:9px;
    }

    .errorlogin{
        font-size:9px;
    }



    #indicePolitica li{
        padding:2%;
    }
   

}


    @media(max-width:345px){
        
        #btn-show,
        #btn-edit,
        #btn-delete{
            font-size:7px;
        }
        
        
        #menu li,
        #menu li a,
        #menu #ayuda{
            font-size:5.8px;
        }
        
        
        #nombreusuario{
            font-size:10px;
        }
        #hora{
            font-size: 10px;
        }
        #titulo,
        #tituloanimado{
            font-size:23px;
        }
        
        
        

        #title{
            font-size:8px;
            width:100%;
        }

        .plazotareavencido{
            font-size:7px;
        }

        
        input[type="text"],
        input[type="password"],
        input[type="email"],
        input[type="number"],
        textarea{
            width: 97%;
            padding:1%;
            font-size: 18px;
        }
        select{
            width: 99%;
            padding: 1%;
            font-size:18px;
        }
        label,
        label[for="register_enterprise"]{
            font-size:11px;
        }

        /*AVISO LEGAL */


        

        

    }



    @media(max-width:329px){
        
        #fraseportada h3{
            font-size:6px;
            margin-left:0;
            margin-top:-16%;
        }
    
        

        #titulo,
        #tituloanimado{
            font-size:20px;
        }
        #btn-busquedatareaparticular,
        #btn-busquedatareaempresa{
            width:44%;
        }

        #botones{
            font-size:4px;
        }
        
       

    }

    @media(max-width:320px){
        .buttons a{
            padding-left: 2%;
            font-size: 5.5px;
            padding-right: 2%;

        }
        
        .plazotareavencido{
            font-size:6px;
            width: 100%;
        }

        .mensajeflash{
            font-size: 9px;
        }


        input[type="text"],
        input[type="password"],
        input[type="email"],
        input[type="number"],
        textarea{
            width: 100%;
            padding:1%;
            font-size: 13px;
        }
        select{
            width: 100%;
            padding: 1%;
            font-size:13px;
        }
        label,
        label[for="register_enterprise"]{
            font-size:10px;
        }
        
        /*BOTON DE ENTRAR CUANDO NOS VAMOS A LOGAR*/
        #boton-logar{
            width:23%;
            padding:6px;
            font-size:12px;
        }
        
        
        /*BOTON GUARDAR CUANDO SE QUIERE MODIFICAR TAREA*/ 
        #task_submit,
        #task_type_creation_submit,
        #edituser_submit,
        boton_cambiar_password,
        #volveramisdatos{
            padding:4px;
            font-size:10px;
        }
        /*CALENDARIO DATEPICKER DE JQUERY UI */
        .ui-datepicker table{
            width:73%;
        }

        h5,
        .data-task{
            font-size:9px;
        }

        
        
        /*AVISO LEGAL */
    
        #indice{
            font-size:15px;
        }
        
        #indicecontenido li a{
            font-size:6px;
        }
}


@media(max-width:316px){
    
    /*ESTILOS DEL BOTÓN EDITAR MIS DATOS DENTRO DE LA OPCION MIS DATOS */
    #btneditcliente{
        font-size:9px;
        
    }
    
    /*ESTILOS DEL BOTÓN CAMBIAR CONTRASEÑA DE MIS DATOS*/
    #botonsubmit{
        font-size:9px;
    }
    
    /*ESTILOS DEL BOTON DE DAR DE BAJA DENTRO DE MIS DATOS*/
    #dardebaja{
        font-size:9px;
        
    }
    
    
    
    
    /*TAMAÑO CABECERA DE LA TABLA (TH) */
    .tarea,
    .prioridad,
    .horas,
    .previstofinalizar,
    .acciones{
        font-size:6px;
    }
    
    
    /*TAMAÑO DE TODO EL CONTENIDO DE LA TABLA*/
    table td,
    table .buttons{
        font-size:9px;
    }
    
    
    /*BOTONES DE VER EDITAR Y BORRAR DE LA TABLA*/
    #btn-show,
    #btn-edit,
    #btn-delete{
        font-size:6px;
    }
    
    
    h2{
        font-size:18px;
    }
    
    #menu li,
        #menu li a,
        #menu #ayuda{
            font-size:5.4px;
        }
    
    
    
    
    
    #acordeon ol li,
    #acordeon p{
            font-size:10px;
    }
    #acordeon h3{
        font-size:15px;
    }    
    
    
    
    
}



    @media(max-width:286px){
        
         #fraseportada h3{
            font-size:5px;
            margin-left:0;
            margin-top:-20%;
         }
        
        
        
        /*ANCHURA DE LA COLUMNA PREVISTO FINALIZAR(PARA QUE LA FECHA NO SALGA PARTIDA)*/
        table .previstofinalizar{
            width:24%;
        }
        .tareas,
        .prioridad,
        .horas,
        .previstofinalizar,
        .acciones{
            font-size:5px;
        }
        
        /*TAMAÑO CONTENIDO DE LA TABLA*/
        table td,
        table .buttons{
            font-size:7px;
        }
            
        #menu li,
        #menu li a,
        #menu #ayuda{
            font-size:5.1px;
        }
        
        
        
        #titulo,
        #tituloanimado{
            font-size:19px;
        }

        #portada{
            height:150px;
        }

        h2,
        .data-task,
        h3,
        p{
            font-size:14px;

        }


        #btn-busquedatareaempresa,
        #btn-tareasacabadasparticular,
        #btn-tareasacabadasempresa{
            width:34%;
            font-size:6px;
        }

        #btn-busquedatareaparticular{
            width:35%;
            font-size:6px;
        }
        #btn-volvertareaspendientesparticular{
            width: 40%;
        }

        .buttons a{
            padding-left: 2%;
            font-size: 5px;
            padding-right: 2%;

        }
        
        #btn-show,
        #btn-edit,
        #btn-delete{
            font-size:5px;
        }
        
        #btn-show{
            width:16%;
        }
        
        #btn-edit{
            width:22%;
        }
        
        #btn-delete{
            width:37%;
        }
        

        input[type="text"],
        input[type="password"],
        input[type="email"],
        input[type="number"],
        textarea{
            width: 100%;
            padding:1%;
            font-size: 9px;
        }
        select{
            width: 100%;
            padding: 1%;
            font-size:9px;
        }
        label,
        label[for="register_enterprise"]{
            font-size:9px;
        }

        /*CALENDARIO DATEPICKER DE JQUERY UI */
        .ui-datepicker table{
            width:73%;
        }
        #boton_cambiar_password{
            padding:3px;
            font-size:7px;
        }

        .ui-accordion-content-active{
            height: 200px;
        }

        /*BOTON GUARDAR CUANDO SE QUIERE MODIFICAR TAREA*/ 
        #task_submit,
        #task_type_creation_submit,
        #edituser_submit,
        #boton_cambiar_password,
        #volveramisdatos{
            padding:3px;
            font-size:9px;
        }
        
        
        #acordeon ol li,
        #acordeon p{
            font-size:6px;
        }
        #acordeon h3{
          font-size:13px;  
        }
        
        /*BOTON DE GUARDAR DATOS AL REGISTRAR A UN USUARIO*/
        #register_submit{
            width:35%;
            font-size:8px;
        }
        
    }
    
    
    @media(max-width:270px){
        /*BOTON DE ENTRAR AL LOGARNOS */
        
        #boton-logar{
            width:21%;
            font-size:9px;
        }
        
        #menu li,
        #menu li a,
        #menu #ayuda{
            font-size:4.5px;
        }
    }    
    
    @media(max-width:255px){
        #menu li, #menu li a, #menu #ayuda {
            font-size: 4px;
        }
    }