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

body{

    background:#000000;
    color:#ffffff;
    background-color: #0b0a0b;    
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%23d20d04' fill-opacity='0.13'%3E%3Cpath fill-rule='evenodd' d='M41 37.59V25h-2v12.59l-8.9-8.9-1.41 1.41 8.9 8.9H25v2h12.59l-8.9 8.9 1.41 1.41 8.9-8.9V55h2V42.41l8.9 8.9 1.41-1.41-8.9-8.9H55v-2H42.41l8.9-8.9-1.41-1.41-8.9 8.9zM1 1h2v2H1V1zm0 4h2v2H1V5zm0 4h2v2H1V9zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm0 4h2v2H1v-2zm4 0h2v2H5v-2zm4 0h2v2H9v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2zM5 1h2v2H5V1zm4 0h2v2H9V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm4 0h2v2h-2V1zm0 4h2v2h-2V5zm0 4h2v2h-2V9zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2zM5 5h70v70H5V5zm2 68h66V7H7v66zM9 9h62v62H9V9zm2 60h58V11H11v58zm2-39.6V13h16.4A29.1 29.1 0 0 0 13 29.4zM15 15v6.67A31.17 31.17 0 0 1 21.67 15H15zm-2 52V50.6A29.1 29.1 0 0 0 29.4 67H13zm2-8.67V65h6.67A31.17 31.17 0 0 1 15 58.33zM67 67H50.6A29.1 29.1 0 0 0 67 50.6V67zm-8.67-2H65v-6.67A31.17 31.17 0 0 1 58.33 65zM67 13v16.4A29.1 29.1 0 0 0 50.6 13H67zm-2 8.67V15h-6.67A31.17 31.17 0 0 1 65 21.67zM39 13h2v2h-2v-2zm7.02.66l1.93.52-.51 1.93-1.94-.52.52-1.93zm6.61 2.46l1.74 1-1 1.73-1.74-1 1-1.73zm5.75 4.08l1.42 1.42-1.42 1.4-1.4-1.4 1.4-1.42zm4.5 5.43l1 1.74-1.73 1-1-1.74 1.73-1zm2.94 6.42l.52 1.93-1.93.52-.52-1.94 1.93-.51zM67 39v2h-2v-2h2zm-.66 7.02l-.52 1.93-1.93-.51.52-1.94 1.93.52zm-2.46 6.61l-1 1.74-1.73-1 1-1.74 1.73 1zm-4.08 5.75l-1.42 1.42-1.4-1.42 1.4-1.4 1.42 1.4zm-5.43 4.5l-1.74 1-1-1.73 1.74-1 1 1.73zM41 67h-2v-2h2v2zm6.95-1.18l-1.93.52-.52-1.93 1.94-.52.51 1.93zm-13.97.52l-1.93-.52.51-1.93 1.94.52-.52 1.93zm-6.61-2.46l-1.74-1 1-1.73 1.74 1-1 1.73zm-5.75-4.08l-1.42-1.42 1.42-1.4 1.4 1.4-1.4 1.42zm-4.5-5.43l-1-1.74 1.73-1 1 1.74-1.73 1zm-2.94-6.42l-.52-1.93 1.93-.52.52 1.94-1.93.51zM13 41v-2h2v2h-2zm.66-7.02l.52-1.93 1.93.51-.52 1.94-1.93-.52zm2.46-6.61l1-1.74 1.73 1-1 1.74-1.73-1zm4.08-5.75l1.42-1.42 1.4 1.42-1.4 1.4-1.42-1.4zm5.43-4.5l1.74-1 1 1.73-1.74 1-1-1.73zm6.42-2.94l1.93-.52.52 1.93-1.94.52-.51-1.93zM40 63a23 23 0 1 1 0-46 23 23 0 0 1 0 46zm0-2a21 21 0 1 0 0-42 21 21 0 0 0 0 42zm0-2a19 19 0 1 1 0-38 19 19 0 0 1 0 38zm0-2a17 17 0 1 0 0-34 17 17 0 0 0 0 34z'/%3E%3C/g%3E%3C/svg%3E");
    font-size: 16px;
    font-family: 'Oswald', sans-serif;
}

a{
    color:#ffffff;
    text-decoration: none;
}

ul{

    list-style: none;
}

.container{
    width:80%;
    margin:auto;
    
    
    
}

/*Navegación*/

.nav-main{

    font-size: 17px;
    display:flex;
    justify-content: space-between;
    align-items:center;
    height:60px;
    padding: 20px 0;
    

}

.nav-brand{
    width:30px;
}

.nav-main ul{
    display:flex;

}

.nav-main ul li{

    padding: 10px;
}

.nav-main ul li a{

    padding: 10px;
}


.nav-main ul li a:hover{

    border-bottom: 2px solid #ffffff;
    opacity: .9;
    
}

.nav-main ul.nav-menu{
    flex: 1;
    margin-left: 20px;
}

.menu-btn{

    position: absolute;
    top: 15px;
    right: 100px;
    z-index: 2;
    font-size: 1.5rem;


}

/* show case*/

hr{
    margin:10px 0;
}

.showcase {
    
    width: 100%;
    height: 300px;    
    background: url(img/platillo.jpg) ;
    background-size: cover;
    padding: 10px;
    margin-bottom: 30px;
    display: flex;
    flex-direction:column;
    align-items: center;
    justify-content:flex-start;
    
    
    
}


.showcase h1{
    
    width:100%;
    text-align:left;
    padding: 15px;
    color:#000000;
    

}

.showcase p{
    
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    width:100%;
    text-align: right;        
    padding: 15px;
    font-size: x-large;
    text-align: center;
    color: #000000;
    background:#f2f2f2; 
    opacity: .6;

    
}

.informes h1{
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    text-align: center;
    padding: 15px;
    font-size: 40px;


}

.informes p{
    
    text-align: center;
    font-size: 20px;
    padding: 10px;
    padding-bottom: 25px;

}

.pedidos{
    
    text-align: right;
    
    padding-bottom: 40px;
    font-size: 20px;

}


.btn{

  width: 300px;  
  cursor:pointer;
  display: inline-block;
  border:0;
  font-weight: bold;
  padding: 10px 20px;
  background-color:crimson;
  color: #ffffff;  
}

.btn:hover{
    opacity:.9;

}

.new-cards{
    
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;    
    gap: 15px;
    margin:10px 0;

}

.new-cards img{

    width: 100%;
    height: 180px;
}

.new-cards h3{
font-size: 20px;
margin: 10px 0;

}

.new-cards a{

    padding: 10px 0;
    color: #f2f2f2;
    text-transform: uppercase;
    display: inline-block;
    font-weight: bold;
}

.new-cards a:hover{
    text-decoration: underline;

}

.cards-banner-one{

    width: 100%;
    height: 350px;
    background: url(img/tacocecina.jpg) no-repeat center/cover;

}


.cards-banner-one .content{

 width: 40%;
 padding: 90px 0 0  30px;
 color: #ffffff;

}


.cards-banner-one p,
.cards-banner-one h2{

margin: 10px 0 20px 0;


}

.cards-banner-two{
    width: 90%;
    height: 200px;
    background: url(img/parrillada2.jpg) no-repeat center/cover;
    display: flex;
    flex-direction: column;
    align-items:flex-end;
    justify-content: flex-end;    


}

.cards-banner-two .content{

    width: 40%;
    padding: 90px 0 0  30px;
    color: yellow;
    
    

   }

   /*social*/

   .social{
        margin:50px;
   }

   .envio p{

    text-align:right  ;
    padding: 15px;
    font-size: 40px;
   
}

   .social p{
    text-align: center;
    font-size: 30px;
    margin-bottom: 20px;

   }

   .links{

    display: flex;
    align-items: center;
    justify-content: center;
   }

   .links a{

    margin: 0 30px;
   }

   .links a i{

    font-size: 3em;
   }


   @media(max-width:700px){

     
    .nav-main ul.nav-menu{

        display:block;
        position: absolute;
        top:0;
        left:0;
        background: #2f3240;
        height: 100%;
        padding: 30px;
        opacity: .9;
        transform: translateX(-400px);
        transition: transform .5s ease-in-out;
    }
    .nav-main ul.nav-menu.show{
        transform: translateX(-20px);

    }

    .nav-main ul.nav-menu li{
        padding: 14px;
        font-size: 14px;

    }

    .new-cards{ 
        grid-template-columns: repeat(2,1fr) 
    
    }
    .cards-banner-one .content{

        width: 80;
    }


   

    @media(max-width:500px){
        .new-cards{

            grid-template-columns: 1fr;
        }

        .new-cards img{

            height: 270px;
        }

            .cards-banner-one,
            .cards-banner-two{
                width: 100%;
                padding: 60px 20px;
                font-size: 10px;

            }

    }