*{
     box-sizing: border-box;
     -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
     margin: 0;
     padding: 0;
  }
  .stroke {
  text-shadow: -1px -1px 1px #20612a, 1px 1px 1px #20612a, -1px 1px 1px #20612a, 1px -1px 1px #20612a;
}
  html{
    width: 100%;  
  }
  body{  
    margin: 0;
    /*background: url("../img/tempBG.jpg") no-repeat center center fixed; */
    background:rgba(0,0,0,0);
    background-size: cover;
    background-color: 000000;  
  }
  h2{
    font-size: 20px;
    font-weight: bolder;
    max-width: 90%;
  }
/*contenedor de productos*/
.contProd1{
    
max-width: 100%;
margin: 1% 1%;
display: flex;
flex-direction:row;
flex-wrap: wrap;
justify-content: center;
background: #ffd6e0;
}
.contProd2{
    
max-width: 70%;
margin-left: 15%;
margin-right:15%;
display: flex;
flex-direction:row;
flex-wrap: wrap;
font: white;
justify-content: center;
background: black;
}
.contProd{ 
max-width: 100%;
margin: 1% 1%;
display: flex;
flex-direction:row;
flex-wrap: wrap;
justify-content: center;
background: #e2ffec;


}
.cont_card{
  margin: 10px;

}
.cont_card a{
  display: inline-block;
}

.cont_card:hover figure.producto {
-webkit-transform: perspective(600px) rotateY(180deg);
-ms-transform:perspective(600px) rotateY(180deg);;
-o-transform:perspective(600px) rotateY(180deg);;
transform: perspective(600px) rotateY(180deg);;


}
.cont_card:hover img.front{
  filter: blur(2px);
}

figure.producto{
width: 320px ;
margin: 0;
position: relative;
transition: all ease .5s;
transform-style: preserve-3d;
transform: perspective(600px) rotateY(0deg);

}
img.front{
  width: 100%;
  height: 100%;
  border-radius: 20px;
  transition: all ease .5s;
   display: block;

  /*backface-visibility: hidden;*/
}

figcaption.rear{
  position: absolute;
  top: 70px;
  width: 90%;
  height: 80%;
  border-radius: 20px;
  transition: all ease .5s;
  padding: 20px;
  background-color: rgba(255,255, 255,0.75);
  transform: perspective(600px) rotateY(-180deg);
  backface-visibility: hidden;
  overflow: auto;

  font-family: 'antipasto_extralight';
  color: black;
  font-weight: 600;
  font-size: 17px;
  text-align: justify;
  letter-spacing: 3px;

}

.rear p{
  font-weight: 100;
}


/*contenedor de productos*/
  .container{
    padding: 0;
    margin:0;
    width: 100%;
    
  }
  img.logo{
    width: 70%;
    padding-bottom: 40px;
    padding-top: 40px;
  }
  .logo_{
    width: 90%;
    margin-left :5%;
  }
  .producto{
    width: 50%
  }

/* Menu **************************************************/

header {
    height: 50px;
    background: rgba(255, 255, 255, 0.6);
    margin: 0;
    padding-top: 0;

}
nav ul {
    padding: 0;
    margin: 0;
    list-style: none;   
}

nav li {
    float: left;
    margin-left: 2%;
    margin-bottom: 0.5%;
}
nav a {
    float: left;
    color: #eee;
    margin: 0 5px;
    padding: 3px;
    text-decoration: none;
    border: 1px solid black;
    font: bold 14px Arial, Helvetica;   
    background-color: black;
    background-image: linear-gradient(grey, black);
    border-radius: 5px;
    text-shadow: 0 -1px 0 rgba(0,0,0,.8); 
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 rgba(0, 0, 0, 0.7), 0 2px 2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.5) inset; 
}

nav a:hover {
    background-color: grey;
    background-image: linear-gradient(black, grey);
}

nav a:active {
    background: grey;
    position: relative;
    top: 2px;    
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset; 
}
nav span {
   /* border: 1px dashed #A1EBE9; */
    display: inline-block;
    padding: 4px 15px;
    cursor: pointer;    
    background-color: grey;
    font-family: 'antipasto_extralight', cursive;
    letter-spacing: 3px;
    background-image: linear-gradient(gray, black);
}

nav a:hover span {   
    background-color: grey;
    background-image: linear-gradient(black, gray);
}
.nav {
  padding-left: 30%; 
}

/****************************************************/
/*contenedores***************************************/

.contenedorHome{
    /*background-color: rgba(127, 191, 63,0.55); color verde del contenedor*/
   background-color: rgb(0, 0, 0, 0);
    width: 100%;
    text-align: center;
    padding: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
   /* background-color: rgba(216, 255, 185,0.55);*/
 }
.contenedor{
    /*background-color: rgba(127, 191, 63,0.55);  color verde del contenedor*/ 
    background-color: rgba(0, 0, 0, 0);
    width: 100%;
    height: 100%;
    padding: 0px;

}
.contenido{
    /*background-color: rgba(127, 191, 63,0.55);*/
    background-color: rgba(0, 0, 0,0);
    width: 100%;
    height: 100%;
    padding: 0px;

}
.separador_snack{

   color: white;
   
   font-family: 'antipasto_extralight';
    text-align: center;
    font-weight: bold;
   font-size: 30px;
   padding: 0 10%;
    width: 100%;
    height: 100%;

      letter-spacing: 3px;

    padding: 25px;
    margin-top: 0px;
    margin-bottom: 0px;
    background: black url('../img/sep_snack.png')  center no-repeat;

}
.Separador{

  font-family: 'Pacifico';
   color: #78B277;
   
    text-align: center;
    letter-spacing: 5px;
      line-height: 1;
    /*background-color: rgba(127, 191, 63,0.55);*/
    background-color: rgba(0, 0, 0, 0);
    /*background-color: rgba(216, 255, 185,0.55); */
    width: 100%;
    height: 100%;
  


    /*border-radius: 20px;*/
    padding: 25px;
    margin-top: 0px;
    margin-bottom: 0px;
   /* background-color: rgba(216, 255, 185,0.55);*/
    /*background: url("../img/imgHome.png") center no-repeat;*/
}
 /*  a img{
    min-width: 120px;

  } */
  .contenedorHome a{
    width: 100%;
  }
 #mision,  #vision{
    font-weight: 20;
  }

/****************************************************/

/**********************************************/
/*textos/**************************************/


.txt1{
    /*font-weight: bold;*/
   /*font-family: 'Aspire-DemiBold', cursive;*/
   font-family: 'ChampagneandLimousines', cursive;
   color: black;
      letter-spacing: 3px;
      text-align: center;
     
}

.txt2{
    /*font-weight: bold;*/
   /*font-family: 'antipasto_extralight';*/
   font-family: 'ChampagneandLimousines', cursive;
   color: #000000;
   font-size: 20px;
      text-align: justify;
      
      letter-spacing: 3px;
      padding: 25px;
     

}

.txt3{
    /*font-weight: bold;*/
   font-family: 'antipasto_extralight';
   color: #000000;
   font-weight: bold;
   font-size: 30px;
   padding: 0 10%;
      text-align: justify;

      letter-spacing: 3px;
    
}
.txt4{
    /*font-weight: bold;*/
   font-family: 'antipasto_extralight';
   color: #78B277;
   font-size: 45px;
    

      line-height: 1;
   
}




.contenedor span{
  text-align: center;
}


/*fuente antipasto*/



.antipasto_extralight{
  
font-family:'antipasto_extralight';
border-radius: 10px;

}

@font-face {
 
font-family: 'antipasto_extralight';
src: url('fonts/antipasto_extralight.otf') format('truetype');
font-weight: normal;
font-style: normal;

}

/*fuente Aspire-DemiBold*/



.Aspire-DemiBold{
  
font-family:'Aspire-DemiBold';
border-radius: 10px;

}

@font-face {
 
font-family: 'Aspire-DemiBold';
src: url('fonts/Aspire-DemiBold.ttf') format('truetype');
font-weight: normal;
font-style: normal;

}

/*fuente ChampagneandLimousines*/



.ChampagneandLimousines{
  
font-family:'ChampagneandLimousines';
border-radius: 10px;

}

@font-face {
 
font-family: 'ChampagneandLimousines';
src: url('fonts/ChampagneandLimousines.ttf') format('truetype');
font-weight: normal;
font-style: normal;

}





/*****************************************************/

/*bullets*********************************************/

ul.no_bullet {
list-style-type: none;
padding: 0;
margin: 0;
font-family: 'antipasto_extralight';
color: #000000;
font-size: 20px;
letter-spacing: 3px;
margin-left: 10%;
}
li.leaf {
background: url('../img/bullet.png')  no-repeat left top;
height: 100%;
padding-left: 20px;
padding-top: 0px;
}


/*popping images**************************************/

figure{
    width: calc(100% / 7);
    float: left;
    margin-bottom: 1rem;
    min-width: 80px;
}
section::after,section::before{
    content: "";
    display: block;
}
section::after{
    clear: both;
}
figure a{
    display: block;
    width: calc(100% - 2rem);
    margin-left: 1rem;
}
figure img{
    width: 90%;
    vertical-align: middle;
    margin-bottom: 0;
    margin-top: 50px;
    border-radius: 12px;
    min-width: 70px;

}
figcaption{
    
    text-align: left;
    padding: .7rem;
    margin: 0 1rem;
    font-family: 'antipasto_extralight';
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 0.2em;
    color: black;

}


.item {
  
  border: 0px solid #333;
  
  width: 100%;
}
.item img {
  -moz-transition:  0.5s;
  -webkit-transition:  0.5s;
  transition:  0.5s;
}
.item:hover img {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.contenedorcentral a{
  margin-left: 25%;

}
.contenedorcentral{
  text-align: center;
}


    .center{
      text-align: center;
      width: 90%;
      margin-left: 5%;

    }

.c{
  width: 100%;
  margin-left: 25%;
}

.div3{
  width: calc(100% /3);
  float: left;
  padding: 60px;
}

.div3 >img
{
  width: 100%;
}


@media all  and (min-width : 310px)  and (max-width : 580px) {
  .c{
    width: 100%;
    margin: 0 !important;
  }
  .nav{
    display: none;
  }
    .menuMovil{
    display: block;
  }
  .container{
    max-width: 580px;
  }
  .txt1{
    text-align: center !important;
   font-size: 40px;
  } 
  .txt2{
   font-size: 17px;
  }
  .txt3{
    font-size: 25px;
  }
  .txt4{
    text-align: center !important;
   font-size: 38px;
  }
  .Separador p{
    font-size: 80px !important;;
    height: 240px !important;
  }
  .separador_snack {

  }

  .leaf{

  }
    figure{
    width: calc(100% / 2);
  }
    .Separador{
    font-size: 60px;
  }
.div3{
  width:100%;
  padding: 20px;


}


  }

@media all  and (min-width : 581px)  and (max-width : 1150px) {
  header{
   
  }
  .navMovil{
    display: none;
  }
  .nav{
    padding-left: 10%;
   
}
  .container{
    max-width: 1150px;

  }

  .contenedor{
   
  }
  .txt1{
   
   font-size: 80px;
  }
  .txt2{
   font-size: 20px;
  }
  .txt3{
    font-size: 30px;
  }
  .txt4{
          
   font-size: 45px;
  } 
  section::after,section::before{
    content: "";
    display: block;
}
section::after{
    clear: both;
}
  figure{
    width: calc(100% / 5);
  }
  .Separador{
    font-size: 60px;
  }


}
@media all  and (min-width : 1150px)  and (max-width : 1800px) {
      .navMovil{
    display: none;
  }
    .container{
    max-width: 1800px;
  }
    .contenedor{
    /*height: 790px;*******/
    padding: 50px;
  }
    .txt1{
         
   font-size: 112px;
  }
  .txt2{
   font-size: 20px;
  }
  .txt3{
    font-size: 30px;
  }
  .txt4{
          
   font-size: 45px;
  } 
  figure{
    width: calc(100% / 6);
  }
  .Separador{
    font-size: 60px;
  }

  }





  #sidebar{
  position: fixed;
  width: 200px;
  height: 100%;
  background: #212121;
  left: -200px;
  top: 39px;
  transition: all 400ms linear;
  font-size: 1.2em;
  z-index: 2;
  font-family: 'ChampagneandLimousines';
}
#sidebar ul li.contenido{

  text-align: center;
  color: white;

}
#sidebar ul li.option{
  color: rgba(223,236,128,1);
  list-style: none;
  padding: 15px 10px;
  border-bottom: 1 solid rgba(200,200,200,0.9);

}
#sidebar ul li a:hover{
    color: rgba(223,236,128,1);
}
#sidebar ul li >img{
  width: 180px;
  margin-top: 150px;

}
#sidebar.active{
left: 0px;
}

#sidebar .menu_botton{
  position: absolute;
  left: 210px;
  top: 30px;


}
#sidebar .menu_botton{
  cursor: pointer;

}

#sidebar .menu_botton span{


  display: block;
  width: 30px;
  height: 5px;
  background: black;
  margin:5px 0px;


}
#sidebar .menu_botton span:hover{
  background:  rgba(205,255,205,0.99);
}
#sidebar{
    width: 150px;
    left: -150px;
    font-size: 1.5em;
  }
  #sidebar .menu_botton{
  position: absolute;
  left: 168px;
  top: 10px;
  }
  #sidebar ul li >img{
  width: 95px;
  margin-top: 50px;
  }