@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700|Pacifico');

/*
    font-family: 'Montserrat', sans-serif;

    font-family: 'Pacifico', cursive;*/
*{
  margin: 0;
 box-sizing: border-box;
   
}

body{
      font-family: 'Montserrat', sans-serif;

 
 
}

/*/*****************estilos bases*****************/
img:not(.social-icon__link){
  display: block;
  width: 100%;
  max-width: 100%;
    
}
h1,h2, h3, h4, h5, h6{
  margin: 0;
}
.container{
  width: 100%;
  margin: auto;
}
.container--flex{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.column{
  width: 100%;
}
/****************** Estils del header******************/
.main-header{
  
  width: 100%;
}
.logo{
  font-size:1.8em;
  color:#de423a;
  padding: 10px;
  font-family: 'Pacifico', cursive;
  font-weight:100;
  transition: .3s ease-out .1s;
}
.logo:hover{
  text-shadow: grey 2px 2px 0px ,black 4px 4px 3px;
  transform: scale(1.3 ) translateX(1.2em);
  color: #FFC300;
  }

.main-header__contactInfo__phone{
  background: #de423a;
  color: white;
  padding: 10px;
  margin: 0; 
  
}
.main-header__contactInfo__address{
  padding: 10px;
  margin: 0; 
}
.main-header .social-icon__link{
  position: relative;
  top:2px ;
  left: 1px;
  
  
}
[src*="img/logo-tel"]{/* mi edicion*/
   filter: invert(100%);
  
}
/*
.fondocambia{
  filter: none;
}
*/
/*******************  estilos de menu  *******************/
.main-nav{
  width: 100%;
  position: relative;
  z-index: 2000;
  padding: 9px  9px 5px; 
  
}
.icon-menu{
  
  display: block;
  filter: invert(100%);
    border: 1px solid black;
  padding: .25em;
  border-radius: 3px;
  width: 30px;
  height: 30px;
  
  
  text-align: center;
  cursor: pointer;
}

.social-icon{
  display: block;
  margin-left: 10px;
  
  
}
.social-icon>.social-icon__link{
  justify-content: center;
  margin-left: 10px;
  align-items: center;
  display: flex;
  float: left;
  font-size: 1.3em;
  width: 35px;
  height: 35px;
  filter: invert(100%);
 
  }
.social-icon .social-icon__link:hover {
  filter: invert(.45);
  border-radius: 50%;
  cursor:  pointer;
}
.social-icon__link{
  text-decoration: none;
}
.menu{
  
  position: absolute;
  
  top: 47px;
  left: 0;
  width: 100%;
  background: rgba(0,0,0,0.85);
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  height: 0;
  overflow: hidden;
  transition:  .3s ease;
  z-index: 1;
  
}
.menu__link{
  
  display: block;
  position: static;
  padding: 15px;
  color: white; 
  text-decoration: none;
  z-index: 1000;
  
  
}
#menu .menu__item:hover {
  color:#C0392B ;
  font-weight: bold;
  background: #FFC300  ;
  
  
  
}
.menu__link--select{
background: white;
  color: brown
  
  
}
.mostrar {
  height: 196px ;
}
/*****************  estilos del banner  *****************/

.banner{
  
  margin-top: -50px;
  position: relative;
  z-index: -1000;
}
.banner::before{
  content:'';
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.65);
  z-index:-100;
  top: 0;
}

.banner__img{
  position: relative;
  width: 100%;
  height: 400px;
  object-fit: cover;
  transition: .3s ease-in .1s;
 z-index: -1000;
   
  
}
.banner__content{
  width: 90%;
  color: white;
  /*border: solid blue;/*para visualizar*/
  text-align: center;
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  font-size: 1.5em;
  font-weight: bold;
}

/*****************estilos prinsipales*****************/

.group--color .container{
  background: #de423a;
  color: white;
  padding: 10px;
  text-align: center;
  
  
}

.main__title{
  margin: 15px 0;
  font-size: 1.8em;
  font-family: 'pacifico', cursive;
  font-weight: 100;
  
}
.column__title {
  font-size: 1.3em;
}

.main__about__description:nth-child(2){
  padding: 10px;
  text-align: center;
}
.btn{
  display: block;
  text-align: center;
  text-decoration: none;
  width: 120px;
  /* background:; */
  color:white;
  padding: 10px;
  margin: 10px auto;
  
  background: -webkit-linear-gradient(top, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);

}
.group__title{
  
  font-family: 'pacifico', cursive;
  text-align: center;
  font-weight: 100;
  font-size: 1.8em;
  margin: 30px;
}
.today-special .column{
  margin-bottom: 30px;
  text-align: center;
}
.today-special__img{
  margin:auto;
  max-width: 350px;
  
}
.today-special__title{
  font-size: 1.3em;
  padding-top: 10px;
  padding-bottom: 13px;
}
.today-special__price{
  font-size: 1.5em;
  color: #de423a;
  font-weight: bold;
  
}

.main-footer{
  background: #222;
  color: white;
  padding: 10px;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: .8em;
  
  
  
}
.main-footer .column__title{
  margin-bottom:2rem;
  margin-top: 2rem;
}

.main-footer .column__txt{

  word-spacing: .3rem;
  line-height: 1.15rem;
}

.copy{
  
  text-align: center;
  margin: auto;
  margin-top: 15px;
  
}

.main-footer .social-icon__link{
  display: inline-block;
  position: relative;
  filter: invert(100%);
  margin-right: 6px;
  top: 7px
    
  
}
.icon-{
  text-decoration: none;
  color: white;
  
}





/* *************** EStilos Responsivos************/


@media screen and (min-width: 480px){
  
.logo {
    color: white;
  font-size: 1em;
  z-index: 100;
  
  
  }
  
  .main-header__contactInfo{
    text-align: right;
    display: block;
    height: auto;
  }
  .banner{
   
    margin-top: -200px;
    
  }
  .banner__content{
    font-size: 1.7em;
    top: 65%;
  }
  .main-header__contactInfo__phone{
    
    background:none ;
  }
  .main-header__contactInfo__address{
     filter:invert(100%);
    
  }
  [src="img/foto1.jpeg"]{
    height: 250px;
    object-fit: cover;
    z-index: 10000;
    
  }
  .column--50{
    width: 50%;
    padding: 02%;
  }
  .main-nav{
    background: rgba(0,0,0,0.75);
    padding: 6px;
    
  
  }
  
  .column--50-25{
    width: 49%;
    
  }
  .column--33{
    width: 33%;
    position: relative;
    padding:9px;
    margin:  auto;
  overflow:hidden;
    
  }
  .main__about__description:nth-child(2){
  padding: 20px;
  font-size: .9em;
  }
  
  .main__about__description .btn{
    margin: 0;
    
  }
  .group__title{
    font-size: 2em;
    margin: 2%
  }
  .today-special .column{
    border: 5px solid #ddd;
    padding: 5px
  }
  .today-special__img{
    height: 200px;
    object-fit: cover;
    /*border-radius: 500px 500px 500px 500px;*/
  }
   
  .main-footer{
    display: block;
    padding: auto;
   
    
      
  }
  
  
  
}


@media screen and (min-width: 780px){
  .main__title{
    font-size:  2.2em;
  }
  .main__about__description{
    margin-top: 30px;
  }
  .main__about__description .column--50:nth-child(2){
    font-size: 1.1em;
  }
  .main__about__description .column--50 .column__txt{
    
    line-height: 30px;
  }
  .column--50-25{
    width: 24.5%;
  }
  .today-special__title {
    font-size: 1.3em;
    
  }
  .group__title{
    font-size: 2.2em;
  }

}

@media screen and (min-width: 1024px){
  .logo{
    font-size: 1.5em;
    padding: 0;
  }
  .main-header__contactInfo__phone, .main-header__contactInfo__address{
    padding-right: 0;
    font-size: 1.25em;
  }
  .main-nav{
    padding: 0;
    display: flex;
   
  }
  .banner__content{
    font-size: 2.5em
  }
  .icon-menu{
    display: none;
  }  
  .social-icon {
    display: block;
    position: absolute;
    right:10px
    
  }
  .detalle{
    line-height: 43px;
    font-size: 1.2em;
    
  }
  .menu{
    display: contents;
  }
  .menu__link{
    margin:25px 25px;
  }
  ul :nth-child(1 ){
    margin:0 0px ;
  }
  .column--50-25{
    height: 400px;
  }
  .today-special__img{
    height: 250px;
  }
  .img-ex{
    height: 350px;
    
  }
}


#cajaprinsipal{
  display: block;
  
  
  
}
.img-ex{
 
cursor: pointer;
  transition: .05s ease-in ;
}
.expandir{
  position: fixed;
  top: 10%;
  object-fit: contain;
  z-index: 25000;
  box-shadow: 3px 3px 5px black;
}



.obscurecer{
  
  background: grey ;
  filter: brightness(20%);
  
}