@charset "UTF-8";
/* CSS Document */

/* MENU ACTIVO */
.btn-productos{ background:#134294;}
.btn-productos span{ color:#fff;}
.btn-productos .flip-container2 .back2 {
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-o-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	transform: rotateY(0deg);
}
.btn-productos .flip-container2 .front2 {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

/* HEADER */
#header{
	width:100%;
	height:432px;
	background:url(../img/header-productos.jpg) center;
	background-size:cover;
}

.title{
	position:absolute;
	top:360px;
	z-index:98;
}

.title2{ margin-bottom:30px;}

/* SECCION PRODUCTOS */
#productos{background: #124295;}
#productos .titl-bienvenidos{position:absolute; top:-70px;}
#productos ul{ padding:50px 0px 50px 0px;}
#productos ul li{ display:inline; padding:0px; margin:-5px;}


/* CONTENIDO */
#portfolio{
	background: url(../img/bg-productos.png);
}
#portfolio .portfolio-item {
  margin: 0 0 15px;
  right: 0;
}
@media (min-width: 767px) {
  #portfolio .portfolio-item {
    margin: 0 0 30px;
	
  }
}
#portfolio .portfolio-item .portfolio-link {
  display: block;
  position: relative;
  margin: 0 auto;
  
}
#portfolio .portfolio-item .portfolio-link .caption {
  background: rgba(24, 188, 156, 0.9);
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all ease 0.5s;
  -webkit-transition: all ease 0.5s;
  -moz-transition: all ease 0.5s;
}
#portfolio .portfolio-item .portfolio-link .caption:hover {
  opacity: 1;
}
#portfolio .portfolio-item .portfolio-link .caption .caption-content {
  position: absolute;
  width: 100%;
  height: 20px;
  font-size: 20px;
  text-align: center;
  top: 50%;
  margin-top: -12px;
  color: white;
}
#portfolio .portfolio-item .portfolio-link .caption .caption-content i {
  margin-top: -12px;
}
#portfolio .portfolio-item .portfolio-link .caption .caption-content h3,
#portfolio .portfolio-item .portfolio-link .caption .caption-content h4 {
  margin: 0;
}
#portfolio * {
  z-index: 2;
}


/* Café */
.box01-mask{overflow:hidden;}
.box01{
	height:400px;
	background:#36C1B3;
	overflow:hidden;
}
.box01:hover{ cursor:pointer;}
.box01-img{ float:right; margin-top:60px; margin-right:30px; z-index:2;}
.box01-img img{width:220px;}
.happycup-logo{position:absolute; top:100px; left:100px;}
.box1-title{
	font-family: 'bebasregular', Arial, sans-serif; color:#FFF;
 	text-transform: uppercase;font-weight: 700; font-size:5em;
	padding-top:80px; text-shadow:3px 3px 0px rgba(0, 0, 0, 0.4);
	margin-left:20px;
	float:left;
	}
.box01 .port-1.effect-2 .text-desc{width:250px; color:#FFF;}
@media (min-width: 1200px) {
	.box01-img img{width:242px;}
	.box1-title{
	padding-top:80px;
	margin-left:40px;
	}
}

/* Torta de Milanesa */
.box02{
	height:400px;
	background:#008df4;
	overflow:hidden;
	padding-top:10px;
}
.box02-img{ float:right; margin-top:20px;}
.box02-title{
	font-family: 'bebasregular', Arial, sans-serif;
    color:#FFF;
 	text-transform: uppercase;
	font-weight: 700;
	font-size:5em;
	line-height:1.2em;
	padding-top:10px;
	margin-left:20px;
	float:left;
	text-shadow:3px 3px 0px rgba(0, 0, 0, 0.4);
	}
.box02-title p{}
.box02 .port-1.effect-2 .text-desc{	color:#FC0; width:300px; padding-top:0px;}
@media (min-width: 1024px) {
	/*.box2-title{
	padding-top:60px;
	margin-left:40px;
	}*/
}


/* Lonche de Pierna */
.box03{
	height:400px;
	background:#F731F7;
	overflow: hidden;
	text-align:center;
	padding-top:10px;}
.box03-img{ float:left; margin-top:0px; width:200px;}
.box03-img img{width:400px;}
.box03-title{font-family: 'bebasregular', Arial, sans-serif; color:#FFF;
 	text-transform: uppercase;font-weight: 700; font-size:5em; line-height:1.2em;
	padding-top:10px; text-shadow:3px 3px 0px rgba(0, 0, 0, 0.4);
	margin-left:10px; float:left;}
.box03-title p{font-size:1em;}
.box03 .port-1.effect-2 .text-desc{ color:#FC0; margin-bottom:0px; padding:0; margin-left:10px; width:250px;}
@media (max-width: 1200px) {
	.box03-img{margin-top:160px; margin-left:-180px;}
	.box03-title{font-size:4em;}
}
@media (max-width: 990px) {
.box03-title{font-size:5em;}
}
/* Snack Logo */
.box-snack{
	height:400px;
	background:#FFF;
	overflow: hidden;
	text-align:center;
	padding-top:140px;}

/* Hamburguesa */
.box04{
	height:400px;
	background:#905DF4;
	overflow: hidden;
	padding-top:10px;}
.box04-img{ float:left; margin-top:0px; margin-left:50px; width:200px;}
.box04-img img{width:300px;}
.box04-title{
	font-family: 'bebasregular', Arial, sans-serif;
	color:#FFF;
 	text-transform: uppercase;
	font-weight: 700;
	font-size:4em;
	line-height:1.2em;
	padding-top:10px;
	text-shadow:3px 3px 0px rgba(0, 0, 0, 0.4);
	margin-left:10px;
	float:left;}
.box04-title p{font-size:48px;}
.box04 .port-1.effect-2 .text-desc{	color:#FC0;padding-top:0; margin-bottom:0px; width:250px;}
@media (max-width: 1200px) {
	.box04-title{font-size:3.2em;}
}
@media (max-width: 990px) {
.box04-title{font-size:5em;}
}
@media (max-width: 550px) {
.box04-title{font-size:3.8em;}
}
/* Emparedado */
.box05{
	height:400px;
	background:#FFAD29;
	overflow: hidden;
	padding-top:10px;}
.box05-img{ float:left; margin-top:0px; margin-left:150px; width:200px;}
.box05-img img{width:400px;}
.box05-title{font-family: 'bebasregular', Arial, sans-serif; color:#FFF;
 	text-transform: uppercase;font-weight: 700; font-size:5em; line-height:1.2em;
	text-shadow:3px 3px 0px rgba(0, 0, 0, 0.4); margin-left:10px; float:left; padding-top:10px;}
.box05 .port-1.effect-2 .text-desc{padding-top:0; width:350px; margin-bottom:20px;}
@media (max-width: 550px) {
.box05-title{font-size:3.8em;}
}
/* Cuernito */
.box06{
	height:400px;
	background:#94DB23;
	overflow: hidden;
	padding-top:10px;}
.box06-img{ float:left; margin-top:0px; margin-left:120px; width:200px;}
.box06-img img{width:400px;}
.box06-title{font-family: 'bebasregular', Arial, sans-serif; color:#FFF;
 	text-transform: uppercase;font-weight: 700; font-size:4em; line-height:1.2em; text-shadow:3px 3px 0px rgba(0, 0, 0, 0.4); margin-left:10px; float:left; padding-top:10px;}
.box06 .port-1.effect-2 .text-desc{	color:#000;padding-top:10px; width:350px; margin-bottom:20px;}
@media (max-width: 550px) {
.box06-title{font-size:3.2em;}
}

/* SECCION BLOQUE IMAGEN */
.bloque-imagen{
	width:100%; height:430px;
	background: url(../img/sliders/paga-tus-servicios-gris.jpg) center;
	background-size:cover;
	}
	
/* SECCION ENLACE RÁPIDO */
.nosotros-enlace{
	width:100%; height:430px;
	
}
.nosotros-enlace h1{ color:#FFF;
font-size:4em;
-moz-text-shadow: 3px 3px 0px #af0027;
-webkit-text-shadow: 3px 3px 0px #af0027;
text-shadow: 3px 3px 0px #af0027;}

.col-izq{height:430px; padding-top:60px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff0000+0,af0027+100 */
background: #ff0000; /* Old browsers */
background: -moz-linear-gradient(top, #ff0000 0%, #af0027 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ff0000 0%,#af0027 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ff0000 0%,#af0027 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#af0027',GradientType=0 ); /* IE6-9 */
}
.col-der{
	height:430px;
	background: url(../img/nosotros-header.jpg) center;
	background-size:cover;
}
.col-der:hover{ opacity:0.8;}

@media (max-width: 1200px) {
	#nosotros{height:2100px;}
	.nosotros-content{height:1950px;}
	.nosotros-map{margin:130px 0px  0 0;}
}
@media (max-width: 990px) {
	#nosotros{height:2900px;}
	.nosotros-content{height:2750px;}
	.nosotros-map{margin:330px 30px 0 0;}
	.nosotros-enlace{ height:860px;}
}
@media (max-width: 550px) {
	#header{ background-position:750px 0;}
	#nosotros{height:2900px; margin:0; padding:0;}
	.nosotros-content{height:2800px;}
	.happy-logo{ display:none;}
	.nosotros-texto{
		margin-top:-50px;
		width:100%;
		left:0px;
		background-position:-50px 0px;
		background-size:cover;
		height:350px;
	}
	.nosotros-texto2{
		width:100%;
		background-position:-50px 0px;
		margin-top:230px;
		padding-top:50px;
	}
	.nosotros-texto2 p{font-size:17px; margin-left:-10px;}
	.nosotros-map{margin:470px 0px  0 0;}
}


<!-- HOVER EFFECTS -->
  .box01 .box01-img{
	  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;}
  .box01:hover .box01-img{
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  }

.box01 .happycup-precio {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
}
.box01:hover .happycup-precio {
  -webkit-animation-name: hvr-pulse;
  animation-name: hvr-pulse;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

/*  .box02 .box02-title{
	  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;}
  .box02:hover .box02-title{
	-webkit-transform: translate(-50px, -50px);
  transform: translate(-50px, -50px);

  }*/
  .box02 .box02-img{
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateX(0px);
  transform: translateX(0px);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;}
  .box02:hover .box02-img{
  -webkit-transform: translateX(210px);
  transform: translateX(210px);
  }
  @media (max-width: 1200px) {
  .box02:hover .box02-img{
  -webkit-transform: translateX(60%);
  transform: translateX(60%);
  }
  }
@media (max-width: 768px) {
  .box02:hover .box02-img{
  -webkit-transform: translateX(40%);
  transform: translateX(40%);
  }
  }
  @media (max-width: 450px) {
  .box02:hover .box02-img{
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  }
  }
  
  .box03 .box03-img{
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateX(0px);
  transform: translateX(0px);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;}
  .box03:hover .box03-img{
  -webkit-transform: translateX(200px) scale(0.9);
  transform: translateX(200px) scale(0.9);
  }
  
  .box04 .box04-img{
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateX(0px);
  transform: translateX(0px);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;}
  .box04:hover .box04-img{
  -webkit-transform: translateX(150px);
  transform: translateX(150px);
  }
  
  .box05 .box05-img{
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateX(0px);
  transform: translateX(0px);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;}
  .box05:hover .box05-img{
  -webkit-transform: translateX(200px) scale(0.9);
  transform: translateX(200px) scale(0.9);
  }
  
  .box06 .box06-img{
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateX(0px);
  transform: translateX(0px);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;}
  .box06:hover .box06-img{
  -webkit-transform: translateX(200px) scale(0.9);
  transform: translateX(200px) scale(0.9);
  }