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

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


main{
    height: 100vh;
    display: flex;
    align-items: center;
    display: flex;
}

.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;
}
/*------------------- 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;
}
.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;
}

.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
}

.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;
}

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

.mapa{
    height: 100vh;
    width: 100%
}

.main-home{
    background-image: url(../img/mapa.jpg);
    background-position: center;
}

.ubicador{
    position: absolute;
    top: 25%;
    left: 20%
}
.flecha{
    border-bottom: 15px solid #fff;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    position: absolute;
    bottom: 63%;
    left: 20%;
    
}
.comentario-oculto{
    display: none;
}


/*------------------- Registro --------------------*/

.checkbox{
    width: 85%;
    padding: 15px 15px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
checkbox{
    padding: 10px;
}
.terminos{
    font-family: sans-serif;
    color: #afafaf;
    width: 100%;
    
}

/*--------------- 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;
}

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

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

.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{
    z-index: 99;
}

.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;
}
.insertar-comentario p{
   font-family: sans-serif;
    color: #bcbcbc;
    font-size: 0.9rem;
    padding: 10px 25px;
}

/*---------------------- lista de comercios ---------------*/
.comercios{
    width: 100%;
    padding-top: 40px;
}
.comercio{
    width: 100%;
    display: flex;
    padding: 10px;
    border-bottom: 3px solid #b4b4b4;
}

.comercioListado{
    display: flex;
    text-align: left;
    text-decoration: none;
    margin-bottom: 10px;
    -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: #009640;
    padding: 5px;
    font-size: 1rem;
    color: #fff;
    font-family: sans-serif;
    text-align: center;
    position: absolute;
    top: 44px;
    width: 100%;
}
.datos-comercio h4{
    color: #009640;
    font-size: 1.6rem;
    margin-bottom: 5px;
    font-family: SuezOne;
}
.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;
    
}

/*---------------- Comercio Verduleria ---------------*/

.web p{
    border: 0px;
    font-weight: 800;
    color: #6F6F6E
}

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

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

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

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

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

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

.indicadorPaso{
    border-bottom: 15px solid transparent;
    border-right: 15px solid #F5F5F5;
    border-top: 15px solid transparent;
    position: absolute;
    margin-left: -25px;
    z-index: 99;
}
.paso{
    display: flex;
    align-items: center;
    font-size: 0.8rem;
    background: #F5F5F5;
    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);
}

.recorrido{
    border-bottom: solid 5px #009b00
}

.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: 62px 15px; 
    border-radius: 10px;
}

.tiempo{
    font-size: 0.7rem;
    font-style: italic;
    color: #9f9f9f;
    padding-top: 10px
}
/*---------------- notificaciones -------------------*/
.notificaciones{
    position: absolute;
    background: #fdfdfd;
    width: 90%;
    margin: 
    text-align: center;
    margin: 0 auto;
    display: flex;
    top: 60px;
    padding: 10px;
    z-index: 99;
    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;
    
}