/*
Classes Index:
=====================
A) Mobile & Tablet (Portrait Mode) Classes
    01. Responsive Navigation Menu Classes
    02. Grid Classes
    03. Home Page Classes
        a) Header Area
        b) Menu Area
        c) Events Area
        d) About Us Area
        e) Team Area
        f) Schedule Area
        g) Contact Area
    04. Menu Page Classes
    05. Events Page Classes
    06. Gallery Page Classes
    07. About Page Classes
    08. Contact Page Classes
    09. Reservation Page Classes 
    10. Footer Classes

B) Tablet (Landscape Mode) Classes
    01. Responsive Navigation Menu Classes
    02. Grid Classes
    03. Home Page Classes
        a) Header Area
        b) Menu Area
        c) Events Area
        d) About Us Area
        e) Team Area
        f) Schedule Area
        g) Contact Area
    04. Menu Page Classes
    05. Events Page Classes
    06. Gallery Page Classes
    07. About Page Classes
    08. Contact Page Classes
    09. Reservation Page Classes 
    10. Footer Classes
    */

    /* ============================================================================== */
    /* =================== A) Mobile & Tablet (Portrait Mode) Classes =============== */
    /* ============================================================================== */

    @media only screen and (max-width:900px) {
     table {
       width:100%;
   }
   thead {
       display: none;
   }
   tr:nth-of-type(2n) {
       background-color: inherit;
   }
   tr td:first-child {

       font-weight:bold;
       font-size:1.3em;
   }
   tbody td {
       display: block;
       text-align:center;
   }
   tbody td:before {
       content: attr(data-th);
       display: block;
       text-align:center;
   }

   h1{
    font-size: 50px;
}

h2{
    font-size: 30px;
}

h3{
    font-size: 20px;
    margin-bottom: 30px;
}

/* ================== 01. Responsive Navigation Menu Classes ================== */

.nav-menu{
    padding: 20px;
    position: absolute;
    top: 0;
}

.responsive-nav-link{
    float: right;
    font-size: 24px;
    display: flex;
}

.nav-links{
    float: none;
    display: none;
    width: 100%;
    height: 100%;
}

.nav-menu li{
    display: block;
    width: 100%;
    padding-top: 25px;
    padding-bottom: 25px;
    text-align: center;
}

/*======================= 02. Grid Classes ======================== */

.grid-container{
    margin: 0;
    width: 100%;
}

.l-gallery .grid-item{
    display: inline-block;
    width: 100%;
    height: 400px;
    text-align: center;
}

.l-full > .grid-item,
.l-four-col > .grid-item,
.l-two-col > .grid-item{
    display: inline-block;
    width: 100%;
    /* padding: 30px;*/
    margin: 0px 0px 40px 0px;
    text-align: center;
}

.home-page-grid .grid-item{
    height: auto;
}

.l-four-col .grid-item:nth-child(4n+4),
.l-two-col .grid-item:nth-child(2n+2){
    float: none;
}

/*======================= 03. Home Page Classes ======================== */

/* --------------- a) Header Area Classes ----------------- */

.header-bg-image,
.pepper-image{
    display: none;
}

.header-area{
   /* padding-top: 120px;*/
   background-color: #bb0000;
   /*box-shadow: 0px 5px #170f0a63;*/
}

.header-image{
    width: 100%;
    margin: 0;
}
..contact-page-mapnch{
    width: 100%
}
.most{
    margin-left: 42%;
}
.cente{
 width: 90%;
 margin-left: 46%;

}
.imagen-welcome{
 width: 100%;
 margin-top: -150px;
 margin-bottom: -50px;   
}
.about-page-info .grid-item:first-child{
    margin-bottom: -100px;
}
/* --------------- b) Menu Area Classes ----------------- */

.menu-info{
    position: relative;
    width: 100%;
}

.home-menu-image{
    display: none;
}

/* --------------- c) Events Area Classes ----------------- */

.home-page-event .event-container{
    width: 90%;
    /* height: 500px;*/
    margin-right: auto;
    margin-left: auto;
}

.home-page-event a .event-image{
    /*height: 400px;*/
}

.home-page-event .event-image img{
    width: 331px;
}


/* --------------- d) About Area Classes ----------------- */

.about-pic img{
    width: 400px;
    position: static;
    margin-bottom: -200px;
    z-index: -1;
}

/* --------------- e) Team Area Classes ----------------- */

.home-bottom .grid-container{
    position: relative;
    top: 42px;
}

.team-member-container{
    margin: 0;
}

.team-member-info{
    margin-top: 30px;
}

/* --------------- f) Schedule Area Classes ----------------- */

.schedule-subtitle p,
.team-subtitle p{
    width: 90%;
}

.schedule-inner,
.schedule-table{
    width: 100%;
    margin: 0;
    font-size: 12px;
}

/* --------------- g) Contact Area Classes ----------------- */

.contact-grid{
    position: relative;
    top: 70px;
    margin-bottom: 0px;    
}

.contact-grid p{
    text-align: left;
    font-size: 14px;
}

.home-page-map{
    height: auto;
    width: 100%;
    position: relative;   
}

.home-page-map.grid-item{
    padding: 0;
}

.home-page-map #map{
    height: 400px;
    width: 100%;
    box-shadow: none;
}

/*======================= 04. Menu Page Classes ======================== */

.menu-image{
    top: -250px;
}

.menu-image img{
    width: 80%;
}

.menu-name{
    padding: 0;
    margin: 0;
}

.menu-data{
    padding-right: 0px;
    padding-left: 0px;
    text-align: left;
}

/*======================= 05. Events Page Classes ======================== */

.event{
    margin: 0;
    height: 500px;
}

.event .event-image{
    height: 50%;
}

.event .event-image img{
    width: 850px;
    padding: 0;
    margin: 0;
}

/*======================= 06. Gallery Page Classes ======================== */

#smallImage{
    width: 100%;
}

/*======================= 07. About Page Classes ======================== */

.about-header-bg,
.about-pepper-bg{
    display: none;
}

.about-page-info{
    padding-top: 150px;
    background-color: #bb0000;
    box-shadow: 0px 5px #170f0a3d;
}

.about-team-title{
    text-align: center;
}

.about-team-title-inner{
    width: 100%;
}

.about-header-image{
    display: none;
}

.about-header-image-responsive{
    display: block;
    position: relative;
    top: -200px;
    margin-bottom: -200px;
    z-index: -1;
    text-align: center;
}

.about-header-image-responsive img{
    width: 70%;
}

.about-schedule-area{
    padding-top: 40px;
    background-color: #170f0a;
    box-shadow: 0px -5px #170f0a3d;
}

.about-lower-bg{
    display: none;
}

.contact-header-bg{
    display: none;
}

/*======================= 08. Contact Page Classes ======================== */

.upper-contact-page{
    padding-top: 100px;
    padding-bottom: 0px;
    text-align: left;
    background-image: none;
    pointer-events: auto;
    position: relative;
    /*background-color: #170f0a;*/
    box-shadow: 0px 5px #170f0a3d;
}

.contact-page-map{
    height: 400px;
}
.icontact-page-map{
    height: 240px !important;
}

.incontact-page-map{
    height: 240px !important;
    margin-top: 120px;
}
.contact-page-info{
    width: 100%;
    text-align: center;
    padding-top: 150px;

}
.form{
 padding-top: -100px !important;
}
.home-bottom{

    margin-bottom: -8px !important;
    /*box-shadow: 5px 5px #170f0a3d;*/
}
.contact-lower-bg{
    display: none;
}

.lower-contact-page{
      /*  background-color: #170f0a;
      box-shadow: 0px -5px #170f0a3d;*/
  }

  .contact-form{
    width: 100%;
    font-size: 12px;
}

.reservation-form input[type=submit],
.contact-form input[type=submit]{
    width: 50%;
    padding: 5px 15px;
}

.contact-form form h2{
    padding: 0;
}
.branch{
    width: 100%;
}

/*======================= 09. Reservation Page Classes ======================== */

.reservation-page-top{
    background-color: #170f0a;
    box-shadow: 0px 5px #170f0a3d;
    top: 0;
    padding-top: 100px;
    padding-bottom: 0;
}

.resrvation-bg-image{
    position: relative;
    top:0;
    z-index: -1;
    height: 250px;
}

.reservation-form{
    font-size: 12px;
}

/*======================= 10. Footer Classes ======================== */

.footer-inner{
    width: 70%;
    border-bottom: 1px solid #fff;
}

.footer-links,
.footer-social{
    float: none;
    width: 100%;
    border-left: 0;
    padding-bottom: 20px;
    padding-top: 20px;
    display: inline-block;
    text-align: center;
}

.footer-links ul{
    padding: 0;
    margin: 0;
}

.footer-links-inner{
    display: inline-block;
}

.footer-links-inner:after{
    display: table;
    clear: both;
    content: '';
}

}

/* =========================================================== */
/* ================ B) Tablet - Landscape Code =============== */
/* =========================================================== */

@media only screen 
and (max-width:1200px)
and (min-width: 900px) {

    /* ================== 01. Responsive Navigation Menu Classes ================== */

    .nav-menu{
        padding: 20px;
    }

    .nav-logo a{
        font-size: 30px;
        font-weight: bold;
    }
    
    .nav-menu a{
        color: white;
        padding: 8px 10px;
    }
    
    .nav-button {
        padding: 7px 15px;
        color: #fff;
        background-color: #ec1c24;
        border-radius: 10px;
    }

    /*======================= 02. Grid Classes ======================== */

    .grid-container{
        max-width: auto;
        margin-right: 50px;
        margin-left: 50px;
        margin-top: 100px;     
    }

    .l-four-col .grid-item{
        width: calc((100% - 30px * 2) /2);
    }

    .l-four-col .grid-item:nth-child(2n+2){
        float: right;
    }

    .l-gallery .grid-item{
        margin: 0;
        width: calc((100% / 4)*2);
        height: 300px;
        position: relative;
        overflow: hidden;
    }

    /*======================= 03. Home Page Classes ======================== */

    /* --------------- a) Header Area Classes ----------------- */

    .pepper-image{
        width: 800px;
        position: absolute;
        top: 130px;
        right: 0;
        z-index: -1;
    }

    /* --------------- b) Menu Area Classes ----------------- */

    .home-menu-image{
        width: 400px;
    }

    /* --------------- c) Events Area Classes ----------------- */

    .home-page-event .event-container{
        height: 80%;
    }

    .home-page-event .event-container img{
        width: 800px;
    }

    /* --------------- d) About Area Classes ----------------- */

    .about-pic img{
        width: 400px;
        position: relative;
        bottom: -150px;
        z-index: -1;
    }

    /* --------------- e) Team Area Classes ----------------- */

    .lower-dark-bg{
        display: none;
    }

    .home-bottom{
        padding-top: 20px;
        top: 0;
    }

    .home-bottom .grid-container{
        position: static;
    }

    /* --------------- f) Schedule Area Classes ----------------- */

    /* --------------- g) Contact Area Classes ----------------- */

    .contact-grid{
        top: 0;
        margin-bottom: 0;
    }

    /*======================= 04. Menu Page Classes ======================== */

    .menu-image{
        top: -250px;
    }

    .menu-name{
        padding: 20px;
        margin: 0px;
    }

    .menu-data{
        padding-right: 0px;
        padding-left: 0px;
    }

    /*======================= 05. Events Page Classes ======================== */

    .event .event-image{
        height: 50%;
    }

    .event .event-image img{
        width: 800px;
        padding: 0;
        margin: 0;
    }

    /*======================= 06. Gallery Page Classes ======================== */

    #smallImage{
        width: 100%;
    }

    /*======================= 07. About Page Classes ======================== */

    .about-header-bg{
        display: none;
    }

    .about-lower-bg{
        display: none;
    }

    .about-schedule-area{
        background-color: #170f0a;
        box-shadow: 0px -5px #170f0a3d;
    }

    .schedule-table{
        width: 100%;
    }

    /*======================= 08. Contact Page Classes ======================== */

    .contact-page-info{
        width: 100%;
        text-align: center;
    }

    .contact-form{
        padding-top: 50px;
        width: 100%;
    }

    .contact-form form h2{
        padding: 20px;
    }

    /*======================= 09. Reservation Page Classes ======================== */

    .reservation-page-top{
        background-image: none;
        background-color: #170f0a;
        box-shadow: 0px 5px #170f0a3d;
        padding-bottom: 20px;
        margin-bottom: 200px;
    }

    .resrvation-bg-image{
        position: absolute;
        bottom:0;
        z-index: -1;
    }

    /*======================= 10. Footer Classes ======================== */

    .footer-inner{
        width: 70%;
    }


}





@media only screen and (max-width: 900px){ 


    .seb-img-pollo{
        margin-left: 27% !important;
    }

    .most {
        margin-left: 22% !important;
    }



}


@media only screen and (max-width: 700px){ 


    .seb-img-pollo{
        margin-left: 47% !important;
    }

     .most {
        margin-left: 47% !important;
    }



}