.banner-rest{
    height: 500px;
    background-image: url(../Img/michael-browning-14090-unsplash.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: grid;
    grid-gap: 0px;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(6,1fr)
}
.banner-rest h1{
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    grid-column:1/4;
    grid-row: 4/5;
}
.slogan-rest{
    grid-column:1/4;
    grid-row: 5/6;
}
.slogan-rest p{
    font-size: 1.5rem;
    text-align: center
}
.container-rest{
    height: 400px;
    max-width: 1400px;
    margin: auto;
    margin-top: -50px;
    display: grid;
    grid-gap: 0px;
    grid-template-columns: repeat(12,1fr);
    grid-template-rows: repeat(6,50px)
}

.potajes{
    background: #0D302B;
    display: flex;
    justify-content: center;
    align-items: center;
    grid-column: 3/11;
    grid-row: 1/2;
}
.p-rest{
    text-align: center;
    color: #0D302B;
    grid-column: 2/12;
    grid-row: 3/6;
    display: flex;
    justify-content: center;
    align-items: center;
}
.serv{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    grid-column: 3/11;
    grid-row: 7/8
}
.serv1{
    width: 33%;
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.serv1 i,.icon-o{
    height: 40px;
    width: 40px;
    font-size: 15px;
    color: #0D302B;
    background-color: rgba(0,0,0,0.1);
    margin: auto;
    border: 1px #0D302B solid;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.serv1 p{
    margin: auto;
    font-size: .9em;
    color: #0D302B;
}

#rest-id{    
    width: 95%;
    margin: auto;
    padding-bottom: 10px;
    display: grid;
    grid-gap: 8px;
    grid-template-columns: repeat(12,1fr);
    grid-template-rows: repeat(13,1rf)
}
.all-rest{
    background: #0D302B;
    height: 200px;
    width: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: grid;
    grid-gap: 0px;
    grid-template-columns: repeat(6,1fr);
    grid-template-rows: repeat(6,1rf);
}
.mercado{
    grid-column: 1/13;
    grid-row: 1/2;
}
.paraiso{
    grid-column: 1/13;
    grid-row: 2/3;
}
.ganso{
    grid-column: 1/13;
    grid-row: 3/4;
}
.shanto{
    grid-column: 1/13;
    grid-row: 4/5;
}
.sirena{
    grid-column: 1/13;
    grid-row: 5/6;
}
.arcoiris{
    grid-column: 1/13;
    grid-row: 6/7;
}
.rocas{
    grid-column: 1/13;
    grid-row: 7/8;
}
.yuraq{
    grid-column: 1/13;
    grid-row: 8/9;
}
.pino{
    grid-column: 1/13;
    grid-row: 9/10;
}
.sam-si{
    grid-column: 1/13;
    grid-row: 10/11;
}
.rossys{
    grid-column: 1/13;
    grid-row: 11/12;
}
.dulzura{
    grid-column: 1/13;
    grid-row: 12/13;
}

.rest-det{
    background-image: linear-gradient(180deg, transparent 0%, rgba(13, 48, 43, .8));
    grid-column: 1/7;
    grid-row: 4/7;
    display: grid;
    rid-template-columns: repeat(6,1fr);
    grid-template-rows: repeat(6,1rf);
}
.rest-t{
    color: #fff;
    text-align: center;
    grid-column: 1/7;
    grid-row: 1/2;
    display: flex;
    justify-content: center;
    align-items: center;
}
.rest-p{
    color: #fff;
    text-align: center;
    text-decoration: none;
    grid-column: 1/7;
    grid-row: 4/5;
    display: flex;
    justify-content: center;
    align-items: center;
}
.rest-telf{
    color: #fff;
    text-align: center;
    text-decoration: none;
    grid-column: 1/7;
    grid-row: 5/6;
    display: flex;
    justify-content: center;
    align-items: center;
}
.rest-o{
    color: #fff;
    text-align: center;
    text-decoration: none;
    grid-column: 1/7;
    grid-row: 6/7;
    display: flex;
    justify-content: center;
    align-items: center;
}
.rest-o i{
    color: #fff;
    border-color: #fff
}

#potaje-id{
    width: 100%;
    margin: auto;
}
.t-potaje{
    width: 100%;
    margin: auto;
    height: 100px;
    display: flex;
    justify-content:center;
    align-items: center;
    color: #0D302B;
}
.patasca{
    background-image: url(../Img/latam.jpeg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: grid;
    grid-gap: 0px;
    grid-template-columns: repeat(12,1fr);
    grid-template-rows: repeat(4,100PX);
}
.t-patasca{
    background: #0D302B;
    display: flex;
    justify-content: center;
    align-items: center;
    grid-column: 7/13;
    grid-row: 1/2;
}
.patasca-det{
    background: #fff;
    grid-column: 7/13;
    grid-row: 2/4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position:relative;
}
.patasca-det p{
    color: #0D302B;
    text-align: center;
    padding: 10px;
}
.img-patasca{
    object-fit: cover;
    height: 100%;
    width: 100%;
    grid-column: 2/7;
    grid-row: 2/4;
}
@media(min-width:600px){
    
.mercado{
    grid-column: 1/7;
    grid-row: 1/2;
}
.paraiso{
    grid-column: 7/13;
    grid-row: 1/2;
}
.ganso{
    grid-column: 1/7;
    grid-row: 2/3;
}
.shanto{
    grid-column: 7/13;
    grid-row: 2/3;
}
.sirena{
    grid-column: 1/7;
    grid-row: 3/4;
}
.arcoiris{
    grid-column: 7/13;
    grid-row: 3/4;
}
.rocas{
    grid-column: 1/7;
    grid-row: 4/5;
}
.yuraq{
    grid-column: 7/13;
    grid-row: 4/5;
}
.pino{
    grid-column: 1/7;
    grid-row: 5/6;
}
.sam-si{
    grid-column: 7/13;
    grid-row: 5/6;
}

.rossys{
    grid-column: 1/7;
    grid-row: 6/7;
}
.dulzura{
    grid-column: 7/13;
    grid-row: 6/7;
}


}

@media(min-width:900px){
    
    .mercado{
        grid-column: 1/5;
        grid-row: 1/2;
    }
    .paraiso{
        grid-column: 5/9;
        grid-row: 1/2;
    }
    .ganso{
        grid-column: 9/13;
        grid-row: 1/2;
    }
    .shanto{
        grid-column: 1/5;
        grid-row: 2/3;
    }
    .sirena{
        grid-column: 5/9;
        grid-row: 2/3;
    }
    .arcoiris{
        grid-column: 9/13;
        grid-row: 2/3;
    }
    .rocas{
        grid-column: 1/5;
        grid-row: 3/4;
    }
    .yuraq{
        grid-column: 5/9;
        grid-row: 3/4;
    }
    .pino{
        grid-column: 9/13;
        grid-row: 3/4;
    }
    .sam-si{
        grid-column: 1/5;
        grid-row: 4/5;
    }
    .rossys{
        grid-column: 5/9;
        grid-row: 4/5;
    }
    .dulzura{
        grid-column: 9/13;
        grid-row: 4/5;
    }


}
@media(min-width:1200px){

    .slogan-rest{
        grid-column:2/3;
        grid-row: 5/6;
    }
    .container-rest{
        height: 400px;
        max-width: 900px;
        margin: auto;
        margin-top: -50px;
    }
    .potajes{
        grid-column: 5/9;
    }
    .p-rest{
        grid-column: 3/11;
        grid-row: 3/6;
    }
    .serv{
        grid-column: 4/10;
        grid-row: 6/7
    }


    #rest-id{    
        max-width: 1280px;
        
    }
 
    .rest-det{
        background-image: linear-gradient(90deg, transparent -20%, rgba(13, 48, 43, .8));
        grid-column: 4/7;
        grid-row: 1/5;
    }

    #potaje-id{
        max-width: 1280px;
        margin: auto;
    }
    .t-potaje{
        justify-content:flex-start;
    }
    .t-patasca{
        grid-column: 5/7;
        grid-row: 1/2;
    }
    .patasca-det{
        grid-column: 3/7;
        grid-row: 3/4;
        position:relative;
        left: 50%;
    }
    .img-patasca{
        grid-column: 9/11;
        grid-row: 3/4;
    }
}