.section-lojas {
    position: fixed;
    background: white;
    right: -40%;
    top: 0;
    width: 40%;
    min-width: 768px;
    height: 100%;
    border-left: 2px solid #cccccc;
    z-index: 99;
    overflow-y: auto;
    transition: 0.4s ease-in-out;
    opacity: 0;
}

.section-lojas.show {
    display:block;
    animation: show 0.5s alternate forwards;
    -webkit-animation: show 0.5s alternate forwards;
}

.section-lojas.hide {
    display:none;
    animation: hide 0.5s alternate forwards;
    -webkit-animation: hide 0.5s alternate forwards;
}

@keyframes show {
    from {
        opacity: 0;
        right: -40%;
    }

    to {
        opacity: 1;
        right: 0%;
    }
}

@keyframes hide {

    from {
        opacity: 1;
        right: 0%;
    }

    to {
        opacity: 0;
        right: -40%;
    }
}

@-webkit-keyframes show {
    from {
        opacity: 0;
        right: -40%;
    }

    to {
        opacity: 1;
        right: 0%;
    }
}

@-webkit-keyframes hide {

    from {
        opacity: 1;
        right: 0%;
    }

    to {
        opacity: 0;
        right: -40%;
    }
}

.section-lojas>.container-lojas {
    padding: 20px 35px;
    position: relative;
}

#lojas > .container-lojas > h1 {
    position: relative;
    margin-bottom: 20px;
    font-weight: 300;
    font-family: "Roboto";
    font-size: 36px;
    color: #000000;
    letter-spacing: -1px;
    line-height: 40px;
}

/*linea separadora del titulo*/
.section-lojas>.container-lojas>h1::after {
    content: "";
    border-bottom: 1px solid #DDDDDD;
    width: calc(100% + 70px);
    height: 1px;
    position: absolute;
    bottom: -25px;
    right: 0;
    margin: 0 -35px;
}

.section-lojas>.container-lojas .close {
    position: absolute;
    top: 25px;
    right: 35px;
    width: 24px;
    height: 24px;
    z-index:999;
    border-style:none;
    background-color:transparent;
}

.section-lojas>.container-lojas .close img {
    width: 100%;
}

#lista-lojas {
    display:flex;
    flex-direction:column;
    align-items: center;
    justify-content:space-between;
    list-style:none;
    width:100%;
    margin:0;
    padding:0;
}

#lista-lojas li {
    display:flex;
    flex-flow:row nowrap;
    justify-content: space-between;
    align-items: flex-start;
    width:100%;
    border-top: 1px solid #D8D8D8;
    padding: 15px 0 0 0;
}

#lista-lojas li:first-child {
    border-top: 0;
}

@media( min-width: 1025px ){
    #lista-lojas li:first-child {
        border-top: 0;
    }
}

#lista-lojas .first-li {
    margin-top:15px;
}

#lista-lojas:last-child {
    border-bottom:1px solid #D8D8D8;
}

#lista-lojas li h2 {
    margin:0;
    padding:0;
    width:100%;
}

#lista-lojas li a:hover {
    color:#1677F2;
}

.item-loja h3{
    width: 33.3333333334%;
    font-size: 24px;
    font-weight: 300;
    margin: 0;
}

.item-loja h4{
    font-size: 15px;
    font-weight: 300;
}

.item-locaciones p{
    font-size: 15px;
    font-weight: 300;
    margin: 0;
    color:#616161;
}

.item-locaciones{
    margin: 20px 0 20px 0;
}

.item-locaciones:first-child{
    margin-top: 0;
}

.item-locaciones a{
    font-size: 13px;
    font-weight: 300;
    color: #660099;
    text-decoration: underline;
}

div[data-target="holder-cidades"]{
    display: flex;
    flex-direction: column;
    width: 66.6666666667%;
}

div[data-target="holder-cidades"] h4
{
    width: 40%;
}

div[data-target="holder-locaciones"]{
    width: 60%;
}

.holder-locaciones{
    display: flex;
    flex-direction: row;
    padding-top: 7px;
    margin: 0;
}

@media only screen and (max-width: 1024px) {
    .section-lojas {
        width: 100%;
        min-width: unset;
        border-left: none;
    }
    #lojas .container-lojas h1 {
        font-size: 28px;
    }

    #lojas .container-lojas .close {
        top: 30px;
    }

    /*linea separadora del titulo*/
    #lojas>.container-lojas>h1::after {
        bottom: -5px;
    }
    #lista-lojas li h2 {
        font-size: 20px;
        font-weight: 300;
    }

    #cidades .container-lojas > div {
        display:flex;
        width:100%;
        justify-content: space-between;
        align-items:center;
    }

    #cidades .container-lojas .close {
        top: 17px;
        right: 21px;
    }

    #cidades .container-lojas img {
        width:14px;
    }

    #cidades #close-cidades{
        text-decoration: none;
    }

    #cidades #close-cidades img{
        width: 24px;
    }

    #cidades .container-lojas h2 {
        font-size: 28px;
        font-weight: 300;
        margin-top: 15px;
    }

    .cidade {
        font-family: roboto;
        font-size:24px;
        font-weight:300;
        margin-top: 15px;
        margin-bottom: -30px;
    }

    #lista-locales {
        display:flex;
        flex-direction:column;
        width:100%;
        margin:0;
        padding:0;
        list-style:none;
    }
    #lista-locales li {
        display:flex;
        flex-direction:column;
    }
    
    .nom-loja {
        font-family: roboto;
        font-weight: 300;
        font-size:16px;
        color:#525252;
        margin:0;
        padding:0;
        margin-top: 25px;
    }

    .endereco {
        font-family: roboto;
        font-weight: 300;
        font-size:14px;
        color:#787878;
        margin:0;
        padding:0;
    }
    .ver-rota {
        font-family: roboto;
        font-weight: 300;
        font-size:15px;
        color:#660099;
        text-decoration:underline;
    }
    #lista-lojas li {
        padding: 15px 0 15px 0;
    }
}