*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

@font-face {
    font-family: SuezOne;
    src: url(SuezOne-Regular.ttf);
}


main{
    margin-top: 100px;
    display: flex;
    align-items: center;
}

.mainHome{
    margin: 44px 0px;
}
.mainIndex{
    margin: 0;
    height: 100vh;
}
/*--------------- Splash -----------------------*/
.splash{
    margin: 0 auto;
    background: radial-gradient(cornflowerblue, #3a69bc); 
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.logo{
    animation: loading 1000ms ease-in-out infinite
}

@keyframes loading{
    0%{
        transform: scale(0.8);
    }
    30%{
        transform: scale(1);
    }
    70%{
        transform: scale(1);
    }
    100%{
        transform: scale(0.8);
    }
}

/*--------------------LOGIN -------------------------*/
.usuario{
    background-image: url(../img/user.png);
    background-repeat: no-repeat;
    background-position: 8px 8px;
    padding-left: 35px !important;
}
.password{
    background-image: url(../img/password.png);
    background-repeat: no-repeat;
    background-position: 8px 8px;
    padding-left: 35px !important;
}

.loginbg{
    background-image: url("../img/bgLogin.jpg");
    background-position: center;
    background-size: cover
}

.loginbg h2 ,h3{
    color: #fff !important;
}

.chat{
    display: flex;
    flex-direction: column;
    padding: 40px 15px;
}

form{
    margin: 0 auto;
    text-align: center;
}

.form{
    margin: 0 auto;
    text-align: center;
    width: 100%
}

form a{
    color: #fff;
    text-decoration: none;
    font-family: sans-serif;
}


.campo{
    width: 85%;
    padding: 10px;
    color: #afafaf;
    margin-bottom: 20px;
    border-radius: 5px;
    border: solid 2px #36A9E0
}

hr{
    margin: 20px;
    width: 80%;
}

h3{
    margin-top: 30px;
    padding: 15px;
    font-family: sans-serif;
     color: #1D70B7
}


h2{
    font-family: SuezOne;
    color: #1D70B7;
    padding: 15px;
}

.login{
    padding: 15px;
    width: 60%;
    background-color: cornflowerblue;
    color: #fff;
    border: none;
    display: block;
    margin: 10px auto;
    font-family: sans-serif;
    text-decoration: none;
    cursor: pointer;
    border-radius: 5px;
}

/*------------------REGISTRATE -----------------*/

.terminos{
    color: #fff;
    font-family: sans-serif;
    font-size: 0.8rem;
}
/*------------------- Header ------------------*/

.home{
    background-color: #1D70B7;
    color: #fff;
    padding: 5px;
    width: 100%;
    text-align: center;
    top: 0;
    position: absolute;
    font-family: sans-serif;
    font-size: 0.8rem;
    display: flex;
    z-index: 120;
}
.titulo{
    flex-grow:4;
}
.notificacion{
    width: 5%;
    flex-grow: 1;
}

.alerta{
    background-color: crimson;
    border-radius: 50%;
    height: 15px;
    width: 15px;
    font-size: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 5px;
    right: 15px;
    animation: alert 5000ms ease-in-out forwards; 
}

@kayframes alert{
    0%{
      transform: scale(0.1);
        opacity: 0;
    }
    100%{
      transform: scale(1);
        opacity: 1;
    }
}

.alerta-oculta{
    display: none;
}

/*------------------- Nav --------------------*/

.avatar-perfil img{
    border-radius: 50%;
}
.avatar-perfil{
    padding: 20px;
}

h6{
    font-size: 1.1rem
}

.ubicacion{
    display: flex;
    align-items: center;
    justify-content: center;
}

.ubicacion img{
    border-right: 0px;
}

.ubicacion p{
    color: #414141;
    font-family: sans-serif;
    font-size: 0.8rem;
    text-decoration: none;
    margin-left: 5px;
}

.avatar{
    border: solid 2px #fff;
    padding: 40px 10px 10px 10px;
    margin: -40px 20px 20px;
    border-radius: 10px;
    background-color: #36A9E0;
}
.avatar p{
    font-size: 0.8rem;
    font-style: italic;
    color: #fff
}
.avatar h6{
    color: #fff;
}

.azul{
    background-color: #36A9E0;
}

.menu{
  background-color: #009EE3;
    width: 100%;
    position: absolute;
    z-index:100;
    top: -700px;
    font-size: 1.3rem;
    font-family: sans-serif;
    color: #fff;
    padding: 0px 0px;
    text-align: center
}

.desplegado{
    top: 43px;
    transition: all 300ms ease-in-out;
    height: 100vh
}


.menu a{
    font-size: 1.2rem;
    font-family: SuezOne;
    color: #fff;
    text-decoration: none
}
.menu li{
    padding: 8px;
    display: flex;
    align-items: center;
    -webkit-box-shadow: 0px 4px 19px -8px rgba(41,130,198,1);
    -moz-box-shadow: 0px 4px 19px -8px rgba(41,130,198,1);
    box-shadow: 0px 4px 19px -8px rgba(41,130,198,1);
    }
.menu li:hover{
    opacity: 0.5;
    transition: all 400ms ease-in-out
}

.btn-menu-cerrar{
    padding: 10px;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}

li img{
    padding: 5px 15px;
    border-right: solid 2px #fff;
    margin-right: 15px;
}

.celeste1{
    background-color: #36A9E0;
}

.celeste2{
    background-color: #009EE3;
}


.hidden{
    display: none;
    transition: ease-in-out 300ms;
}
/*---------------------- POP UP AYUDA ---------------------*/
.ayuda{
    background-color: rgba(0, 0, 0, 0.72);
    margin-top: -70px; 
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;  
    z-index: 100;
}
.legales{
    font-size: 0.6rem;
}
.mensajeAyuda{
    background-color: #eee;
    display: flex;
    flex-direction: column;
    width: 80%;
    margin: 0 auto;
    padding: 35px;
    border-radius: 10px;
    text-align: left !important;
    animation: ayuda 300ms ease-in-out;
}

@keyframes ayuda{
    0%{
        transform: scale(0.5);
        opacity: 0.5;
    }
    70%{
        transform: scale(1.2);
        opacity: 0.8;
    }
    100%{
        transform: scale(1);
        opacity: 1;
    }
}


.mensajeAyuda h6{
    font-family: 'SuezOne';
    color: #464646;
    padding: 15px 0px;
}
.mensajeAyuda p{
    color: #9a9a9a;
    font-family: sans-serif;
    font-style: italic;
    text-align: center;
    font-size: 0.7rem;
    padding: 3px 0px;;
    text-align: left;
}

.cerrarAyuda{
    margin-top: 15px;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.ayudaOculto{
    display: none;
}
/*---------------------- POP UP CERRAR SESION --------------*/

.PopUpcerrarSesion{
    background: rgba(0, 0, 0, 0.72);
    width: 100%;
    height: 100%;
    position: absolute;
    margin-top: -70px;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center
}

.mensajeCerrar{
    background-color: #eee;
    padding: 30px;
    text-align: center;
    border-radius: 8px;
    animation: cerrarSesion 300ms ease-in-out 
}

@keyframes cerrarSesion {
    0%{
        transform: scale(0.7);
    }
    80%{
        transform: scale(1.2);
    }
    100%{
        transform: scale(1);
    }
}

.mensajeCerrar p{
    color: #6d6d6d;
    margin-bottom: 25px;
    font-family: 'SuezOne'
}

.cerrarSession{
    background-color: red;
    padding: 10px;
    border: none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer
}

.cerrarSession a{
    color: #fff;
    text-decoration: none;
}

.CancelarCerrarSession{
    background-color: #bcbcbc;
    padding: 10px;
    border: none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer
}

.cerrarSesionOculto{
    display: none;
}

.cerrarSesion{
    cursor: pointer
}

/*---------------------- HOME -------------------------*/
.ulHome{
    display: flex;
    flex-wrap: wrap;
}

.liHome{
    width: 50%;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
}

.liHome a{
    font-size: 1rem;
    color: #fff;
    text-decoration: none;
    font-family: 'SuezOne';
    
}

.liHome img{
    border: none;
}

.queHacer{
    width: 100%;
    font-family: 'SuezOne';
    background-color: #0563a8;
    text-align: center;
    padding: 10px
}

.opcionHome{
    background-color: #36a9e0;
    padding: 20px;
   min-height: 180px;
}

.opcionHome2{
    background-color: #1089cb;
    padding: 20px;
   min-height: 180px;
}

/*---------------------- lista de amigos ---------------*/

.amigos{
    width: 100%;
}
.amigos li{
    margin-top: -10px;
}
.comercios{
    margin: 0 auto;
    width: 100%;
}

.comercios li{
    margin: 0px !important
}

.comercio{
    width: 100%;
    display: flex;
    padding: 10px;
    border-bottom: 3px solid #b4b4b4;
}

.comercioListado{
    display: flex;
    text-align: left;
    text-decoration: none;
    margin-bottom: 5px;
    -webkit-box-shadow: 0px 6px 7px -3px rgba(138,138,138,1);
    -moz-box-shadow: 0px 6px 7px -3px rgba(138,138,138,1);
    box-shadow: 0px 6px 7px -3px rgba(138,138,138,1);
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(252,252,252,1) 79%, rgba(250,250,250,1) 100%);
    }

.comercioListado h4{
    font-size: 1.2rem !important;
    text-align: left;
}
.comercioListado p{
    text-align: left;
}
.comercioListado img{
    border-radius: 15%;
}

.avatarComercio img{
    padding: 10px;
}

.comercio a{
    text-decoration: none;
    text-transform: none
}
.datos-comercio{
    padding: 10px 20px;
    font-family: sans-serif;
    width: 100%;
    
}
.descripcion p{
    text-align: center;
    padding: 15px;
    color: #878787;
    font-family: sans-serif;
}
h5{
    background-color: #878787;
    padding: 15px;
    font-size: 1rem;
    color: #fff;
    font-family: sans-serif;
    text-align: center;
    position: absolute;
    top: 44px;
    width: 100%;
}
.datos-comercio h4{
    color: #1D70B7;
    font-size: 1.6rem;
    margin-bottom: 5px;
    font-family: SuezOne;
    font-weight: 400;
}
.datos-comercio p{
    color: #b4b4b4;
    font-size: 0.9rem;
    font-style: italic;
}

.datos-comercio img{
   
}

.datos-comercio{
    text-align: center;
}
.comercio img{
    border-radius: 10px;
}

.ubicacion-perfil{
    text-align: center;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    
}

.metros p {
    color: #b4b4b4;
    font-size: 0.7rem;
    margin-bottom: 5px;
    font-family: sans-serif;
}

.subirAvatar{
    padding: 10px;
    border-radius: 4px;
    border: none;
    margin-bottom: 15px;
    cursor: pointer;
}

.agregarAmigo{
    position: absolute;
    background: rgba(0, 0, 0, 0.79);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.agregar{
    background-color: #f8f8f8;
    padding: 15px;
    width: 80%;
    border-radius: 8px;
    animation: agregarAmigo 300ms ease-in-out
}

.agregarAmigoOculto{
    display: none;
}

@keyframes agregarAmigo{
    0%{
        transform: scale(0.5);
    }
    70%{
        transform: scale(1.2);
    }
    100%{
        transform: scale(1);
    }
}
/*---------------- Como ir ---------------*/
.recorridoLista{
    list-style: none;
}

.web p{
    border: 0px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #6F6F6E !important
}

.comentario-perfil{
    color: darkgray;
    font-family: sans-serif;
    font-size: 0.9rem;
    font-style: normal;
    margin: 15px;
    padding: 10px 0px;
    text-align: center;
    border-top: solid 2px #575757;
    border-bottom: solid 3px #DADAD9
}

.comentario-perfil p{
    color: darkgray;
}

.ir{
    background-color: #009640;
    padding: 10px 15px;
    color: white;
    font-size: 1.2rem;
    font-family: SuezOne;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    margin: 10px auto;
    text-decoration: none;
    text-transform: none;
    border: none;
    cursor: pointer;
}

.ir a{
    color: #fff;
    text-decoration: none;
    margin-right: 5px;
}

.comoir{
    background-color: #1D70B7;
    padding: 29px;
    color: white;
    font-size: 1.2rem;
    font-family: SuezOne;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    margin: 1px auto;
    text-decoration: none;
    text-transform: none;
    cursor: pointer
}
.opciones li{
    list-style: none;
    text-align: center; 
}

.opciones{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    margin: 0 auto;
    justify-content: center;
}
.opciones img{
    border: none;
}
.opcion{
    width: 50%;
    padding: 5px;
}

.ir img{
    margin-right: 10px;
}

.verduleria{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
    margin: 0 auto;
    text-align: center;
}


.popUp{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.56)
}

.microfono{
    background-color: #db4243;
    padding: 20px;
    border-radius: 10px;
    animation: microfono 300ms ease-in-out 
}

.microfono h2, p{
    color: #fff;
}

.microfono p{
    font-family: sans-serif;
}

.botonMicrofono{
    border: 4px solid #fff;
    height: 60px;
    width: 60px;
    text-align: center;
    margin: 15px auto;
    border-radius: 50%;
    background-color: darkred;
    -webkit-box-shadow: 2px 2px 16px 0px rgba(122,122,122,1);
    -moz-box-shadow: 2px 2px 16px 0px rgba(122,122,122,1);
    box-shadow: 2px 2px 16px 0px rgba(122,122,122,1);
    cursor: pointer;
}

.popUpOculto{
    display: none;
}

.cerrarPopup{
    text-align: right;
    cursor: pointer;
}

@keyframes microfono{
    0%{
        transform: scale(0.5);
    }
    60%{
        transform: scale(1.2);
    }
    100%{
        transform: scale(1);
    }
}
/*---------------- notificaciones -------------------*/
.notificaciones{
    position: absolute;
    background: #fdfdfd;
    width: 90%;
    margin: 
    text-align: center;
    margin: 0 auto;
    display: flex;
    top: 60px;
    padding: 10px;
    z-index: 110;
    border-radius: 10px;
    justify-content: center; 
    align-items: center;
    left: 8%;
    animation: notificacion 300ms ease-in-out forwards;
    transform-origin: top right;
    box-shadow: 1px 11px 9px -6px rgba(161,161,161,1);
}

.notificaciones a{
    text-decoration: none;
        
}

.notificaciones a:hover{
    color: #1D70B7;
    transition: all ease-in-out 300ms; 
    
}

@keyframes notificacion{
    0%{
        transform: scale(0);
        transform: rotate(10deg);
        opacity: 0
    }
    50%{
        transform: rotate(-5deg);
        opacity: 0.5
    }
    100%{
        transform: scale(1);
        transform: rotate(0deg);
        opacity: 1;
    }
}

.notificaciones-oculto{
    display: none;  
}
.notificaciones p{
    font-family: sans-serif;
    color: darkgrey;
    margin-left: 10px;
}
.notificaciones img{
    padding: 0px 10px;
    border-right: solid 1px #C1C1C1
}
.indicador{
    border-bottom: 15px solid #fdfdfd;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    position: absolute;
    top: -10px;
    right: 12px;
    z-index: 99;
    
}

/*------------------ chat ---------------------*/
.input-chat{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    position: absolute;
    bottom: 0;
    padding: 15px;
}

.enviar{
    padding: 15px;
    color: #fff;
    background-color: cornflowerblue;
    border: none;
    flex-basis: auto;
    text-decoration: none;
    font-family: sans-serif;
    border-radius: 5px;
    cursor: pointer;
    
}

.campo-input{
    color: #afafaf;
    padding: 10px;
    margin: 0;
    flex-basis: auto
}

.comentario{
    width: 100%;
    padding: 15px;
    margin: 10px;
    border-radius: 10px;
    border: none;
    background-color: #fcfcfc;
    box-shadow: 1px 11px 9px -6px rgba(161,161,161,1);
    transform-origin: top center;
    animation: comentario 500ms forwards ease-in-out ;
}

@keyframes comentario{
    0%{
        opacity: 0;
        transform: scale(0);
        transform: rotateX(-90deg);
        
    }
    50%{
        opacity: 0.5;
        transform: scale(1.2);
        transform: rotateX(30deg)
    }
    100%{
        opacity: 1;
        transform: scale(1);
        transform: rotateX(0deg)
    }
}

.header-chat{
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding: 5px
}

.header-chat img{
    margin-right: 10px;
    border-radius: 50%
}

.header-chat h4{
    font-family: sans-serif;
    color: #747474;
    font-size: 1.2rem
}
.header-chat p{
    font-family: sans-serif;
    color: #bcbcbc;
    font-size: 0.9rem
}

.opinion{
    padding: 5px;
}
.opinion h4{
    font-family: sans-serif;
    color: cornflowerblue;
    margin-top: 10px;
}
.opinion p{
    color: #bcbcbc;
    font-size: 0.9rem;
    font-style: oblique;
    font-family: sans-serif;
    margin-top: 10px;
}

.ranking{
    display: flex;
}
.ranking p{
    font-family: sans-serif;
    color: #747474;
    padding: 5px;
}

.pie{
    padding: 15px;
    text-align: center;
        
}

/*--------------- Insertar Comentario --------------*/

.insertar-comentario img{
    border-radius: 50%;
    width: 100px;
}

.insertar-comentario h4{
   font-family: sans-serif;
    color: #747474;
    font-size: 1.2rem;
    margin-top: 10px;
    color: #fff;
}
.insertar-comentario p{
   font-family: sans-serif;
    color: #bcbcbc;
    font-size: 0.9rem;
    padding: 10px 25px;
    color: #fff;
}

/*---------------- Recorrido ---------------------*/
.recorridoImagen{
    width: 10%;
}

.recorridoImagen img{
    padding: 0px 15px;
}

.recorrido{
    display: flex;
}

.tiempoRecorrido{
    color: #fff !important;
}

.pasoRecorrido{
    background-color: #1D70B7 !important;
}
.pasoRecorrido p{
    color: #fff !important;
}
.pasoRecorrido img{
    border-right: solid 1px #fff !important;
}

.pasos{
    width: 90%;
    padding: 0px 10px;
    margin-top: -10px;
}

.indicadorPaso{
    border-bottom: 15px solid transparent;
    border-right: 15px solid #e2e2e2;
    border-top: 15px solid transparent;
    position: absolute;
    margin-left: -25px;
    z-index: 99;
}
.indicadorPasoAzul{
    border-bottom: 15px solid transparent;
    border-right: 15px solid #1D70B7;
    border-top: 15px solid transparent;
    position: absolute;
    margin-left: -25px;
    z-index: 99;
}

.paso{
    display: flex;
    align-items: center;
    font-size: 0.8rem;
    background: #e2e2e2;
    padding: 10px;
    margin: 10px;
    color: #6F6F6E;
    font-family: sans-serif;
    -webkit-box-shadow: 0px 6px 7px -3px rgba(138,138,138,1);
    -moz-box-shadow: 0px 6px 7px -3px rgba(138,138,138,1);
    box-shadow: 0px 6px 7px -3px rgba(138,138,138,1);
}

.paso p{
    color: black;
}

.paso img{
    padding: 0px 10px;
    margin-right: 10px;
    border-right: solid 1px #6F6F6E
}

.final{
    background-color: #1D70B7;
    font-family: SuezOne;
    text-align: center;
    color: #fff;
    padding: 10px;
    margin: 35px 15px; 
    border-radius: 10px;
}

.tiempo{
    font-size: 0.7rem;
    font-style: italic;
    color: #696666;
    padding-top: 10px
}

/*------------------------ Mis tareas ---------------------*/

.tarea{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: #fcfcfc;
    padding: 10px;
    margin: 5px auto;
}

.fecha{
    font-family: SuezOne;
    color: #009b00;
    margin-right: 15px;
}

.fecha h4{
    margin-bottom: 5px;
}

.fecha p{
    font-family: sans-serif;
    color: darkgrey;
}
.horario{
    font-style: italic;
    font-weight: 800;
    font-size: 0.8rem;
    color: #343434
}

.completarTarea{
    background-color: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    text-align: center;
    color: red;
    padding: 5px;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    cursor: pointer
}

.completarTarea img{
    border: none;
    margin: 0 auto;
}

.icon img{
    border-right: 3px solid #c6c6c6
}

.tareaEliminada{
    background-color: red;
    position: absolute;
    width: 100%;
    height: 90px;
    display: flex;
    color: #fff;
    font-family: SuezOne;
    justify-content: center;
    align-items: center;
    animation: eliminarTarea 300ms ease-in-out
}

@keyframes eliminarTarea{
    from{opacity: 0.5;
    transform: scale(0.8);
    }
    to{opacity: 1;
    transform: scale(1);
    }
}

.tareaEliminadaOculta{
    display: none;
}

/*---------------------------- LOCALIZADOR ------------------*/
.localizador{
    width: 100%;
    height: 100vh;
    background-image: url("../img/mapa.jpg");
    background-size: cover;
    background-position: center;
}

/*-----------------Barra de busqueda --------------*/
.busqueda{
    width: 100%;
    margin: 0 auto;
    padding: 10px;
    background-color: #f8f8f8;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 90px;
}
.buscar{
    background-color: red;
    border: none;
    padding: 2px 10px;
    height: 39px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    margin-left: 5px;
    cursor: pointer;
}

.busquedaComercio{
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
}
/*----------------------------------------------------*/
.local2{
    top: 400px !important;
    left: 20px !important
}

.localEnMapa{
    position: absolute;
    display: flex;
    top: 200px;
    left: 50px;
    background-color: #1D70B7;
    padding: 10px;
    border-radius: 5px;
    animation: local 300ms ease-in-out;
}
.localOculto{
    display: none;
}
.localEnMapa img{
    border-radius: 5px;
}
.localEnMapa h4{
    color: #fff;
    font-family: SuezOne;
}

.localEnMapa p{
    font-family: sans-serif;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
}

.indicadorLocal{
    border-top: 10px solid #1D70B7;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    position: absolute;
    top: 112px;
}

.descripcionLocal{
    padding-left: 10px;
}

.irMini{
    background: #009b00;
    border: none;
    border-radius: 3px;
    padding: 5px;
    color: #fff;
    margin-top: 5px;
    cursor: pointer
}

@keyframes local{
    0%{
        opacity: 0.5
    }
    100%{
        opacity: 1
    }
}