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

@font-face
{
  font-family: "DK Lemon Yellow Sun";
  src: url("../style/DK Lemon Yellow Sun.otf");
}
@font-face
{
  font-family: "Signatra DEMO";
  src: url("../style/Signatra.ttf");
}

html
{
	height:100%;
	
}

body
{
	margin:0;
	padding:0;
	height:100%;
	background:url("../img/background.png");
	background-attachment: fixed;
	background-size: 50%;
	animation-name: move ;
  	animation-duration: 60s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

h1
{
	font-family: "DK Lemon Yellow Sun";
	font-size: 64px;
	color:#FFF;
}

h2
{
	font-family: "DK Lemon Yellow Sun";
	font-size: 48px;
	color:#D1064D;
	margin:16px;
}

p
{
	font-family: "DK Lemon Yellow Sun";
	font-size: 32px;
	color:#D1064D;
	margin:16px;
}

.titles
{
	font-family: "DK Lemon Yellow Sun";
	font-size: 64px;
	color:#FFF;
	text-shadow: -2px 0 1px #D1064D, 4px 0 1px #D1064D,0 4px 1px #D1064D,0 -2px 1px #D1064D;
	
}

.precio
{
	font-size: 64px;
	color:#FFF;
	text-shadow: 2px 2px 1px #D1064D;
}

.price-btn
{
	background-color:#D1064D;
	border: 2px solid #D1064D;
	border-radius: 128px;
	transition: 0.25s ease;
	width:50%;
}

.price-btn:hover
{
	color: #D1064D;
	background-color:#FFFFFF;
	border: 2px solid #D1064D;
	border-radius: 128px;
	cursor:pointer;
}

.price-btn:hover .precio
{
	color: #D1064D;
}

.menu
{	
	position: fixed;
  	top: 0;
	margin:0;
	padding-bottom:8px;
	max-height:192px;
	width:25%;
	/*background:url("../img/logo.png");*/
	background-color:rgba(209,6,77,0.90)/*#D1064D*/;
	/*background-attachment: fixed;
	background-position: 100% 50%;
	background-repeat: no-repeat;
	background-size: contain;*/
	box-shadow:0px 8px 8px 0px rgba(0,0,0,0.32);
	border-bottom-right-radius: 64px;
}

.menu #logo
{
	max-width: 90%;

}

#sticker
{
	position: fixed;
	top:10%;
	right:1.5%;

	width:256px;
	animation-name: girar;
  	animation-duration: 60s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	display:inline-block;
	
}
#sticker2
{
	position: fixed;
	top:10%;
	right:1.5%;
	width:256px;
	display:inline-block;

}


div
{
	margin:0;
	padding:0;
	
}


/*CLASSES*/
.center
{
	text-align:center;
	margin: auto;
	margin-top: 16px;
}
.wrapper
{

	margin:16px;
	/*margin-top:192px;*/
	padding:16px;
}

.content
{
	margin:16px;

}

.product
{

	width:50%;
	min-height:256px;
	background-color: rgba(255,255,255,1.00);
	box-shadow:0px 8px 8px 0px rgba(0,0,0,0.32);
	border: 4px solid rgba(209,6,77,0.64);
	border-radius: 32px;
	margin: auto;
	margin-top:64px;
	margin-bottom:64px;
	display: flex;
	align-items: center;

}
.product-img-container
{
	width:50%;
	margin:16px;
	flex:0.5;

}
.product-img
{
	width:100%;
	border-radius: 32px;
	border: 4px solid rgba(209,6,77,0.64);
	cursor:pointer;
	transition: 0.25s ease;
}

.product-img:hover
{
	opacity: 0.64;
	
}
.product-text-container
{
	width:50%;
	margin:16px;
	height:100%;
	flex:1;
}

.product-text
{
	width:50%;
	display:inline-block;
	border-radius: 32px;
	border: 8px solid rgba(209,6,77,1);
}


/*ANIMACIONES*/
@keyframes move
{
  0%   {background-position:0;}

  100% {background-position:100%;}
}

@keyframes girar
{
  0%   {transform: rotate(0deg);}

  100% {transform: rotate(-360deg);}
}

/*Whatsapp y redes*/
.whatsapp
{
	position:fixed;
	width:96px;
	height:96px;
	bottom:5%;
	right:5%;
	background-color:#25d366;
	color:#FFF;
	border-radius:64px;
	text-align:center;
	font-size:64px;
	z-index:100;
	box-shadow:0px 8px 8px 0px rgba(0,0,0,0.32);
	transition: 0.25s ease;
}

.whatsapp:hover
{
	background-color:#50EF8B;
}

.whatsapp-icon 
{
  margin-top:16px;
}

.facebook
{
	position:fixed;
	width:96px;
	height:96px;
	bottom:20%;
	right:5%;
	background-color:#256ED3;
	color:#FFF;
	border-radius:64px;
	text-align:center;
	font-size:64px;
	z-index:100;
	box-shadow:0px 8px 8px 0px rgba(0,0,0,0.32);
	transition: 0.25s ease;
}

.facebook:hover
{
	background-color:#5396F4;
}

.facebook-icon 
{
  margin-top:16px;
}

.instagram
{
	position:fixed;
	width:96px;
	height:96px;
	bottom:35%;
	right:5%;
	background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
	color:#FFF;
	border-radius:64px;
	text-align:center;
	font-size:64px;
	z-index:100;
	box-shadow:0px 8px 8px 0px rgba(0,0,0,0.32);
	transition: 0.25s ease;
}

.instagram:hover
{
	background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 15%, #fd5949 55%,#d6249f 70%,#285AEB 100%);
}

.instagram-icon 
{
  margin-top:16px;
}

/*RESPONSIVE*//*RESPONSIVE*//*RESPONSIVE*//*RESPONSIVE*//*RESPONSIVE*//*RESPONSIVE*//*RESPONSIVE*/
/*RESPONSIVE*//*RESPONSIVE*//*RESPONSIVE*//*RESPONSIVE*//*RESPONSIVE*//*RESPONSIVE*//*RESPONSIVE*/
@media only screen and (max-width: 480px)
{
	.titles
	{
		font-size: 48px;
	}
	.menu
	{
		width:100%;
		border-bottom-right-radius: 0;
		z-index:200;
	}
	#logo
	{
		max-height:64px;
	}
	.wrapper
	{
		margin-top:64px;
	}
	.product
	{
		left:-10%;
		position:relative;
		width:120%;
		display: block;
		border: 2px solid rgba(209,6,77,1);
		
	}
	.product-img-container
	{
		width:80%;
		margin:0 auto;
		margin-top:16px;
		display:block;
	}
	.product-img
	{
		width:100%;
		border-radius: 32px;
		border: 2px solid rgba(209,6,77,0.64);
	}
	.product-text-container
	{
		width:100%;
		height:100%;
		display:block;
		margin:0 auto;
		margin-bottom:16px;
	}
	
	h2
	{
		font-size: 10vw;
		text-align: center;
	}

	p
	{
		font-size: 8vw;
	}
	
	.precio
	{
		font-size: 12vw;
	}
	
	/*Whatsapp*/
	.whatsapp
	{
		position:fixed;
		width:50%;
		height:64px;
		left:90%;
		background-color:#25d366;
		color:#FFF;
		
		text-align:center;
		font-size:32px;
		z-index:100;
		box-shadow:0px -8px 8px 0px rgba(0,0,0,0.32);
	}
	
	.whatsapp-icon 
	{
	  margin:16px;
		float:left;
	}
	
	.facebook
	{
		position:fixed;
		width:50%;
		height:64px;
		left:90%;
		background-color:#256ED3;
		color:#FFF;
		border-radius:64px;
		text-align:center;
		font-size:32px;
		z-index:100;
		box-shadow:0px 8px 8px 0px rgba(0,0,0,0.32);
		transition: 0.25s ease;
	}

	.facebook:hover
	{
		background-color:#5396F4;
	}

	.facebook-icon 
	{
		margin:16px;
		float:left;
	}

	.instagram
	{
		position:fixed;
		width:50%;
		height:64px;
		left:90%;
		background:radial-gradient(circle at 30% 50%, #fdf497 0%, #fdf497 5%, #fd5949 20%,#d6249f 30%,#285AEB 90%);
		color:#FFF;
		border-radius:64px;
		text-align:center;
		font-size:32px;
		z-index:100;
		box-shadow:0px 8px 8px 0px rgba(0,0,0,0.32);
		transition: 0.25s ease;
	}

	.instagram:hover
	{
		background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 15%, #fd5949 55%,#d6249f 70%,#285AEB 100%);
	}

	.instagram-icon 
	{
		margin:16px;
		float:left;
	}
	
	#sticker, #sticker2
	{
		display:none;
	}
}


@media only screen and (min-width: 481px) and (max-device-width : 1200px) 
{
	.menu
	{
		width:100%;
		border-bottom-right-radius: 0;
	}
	#logo
	{
		max-height:96px;
	}
	.wrapper
	{
		margin-top:160px;
		display: block;
	}
	.product
	{
		width:80%;
		display: block;
	}
	.product-img-container
	{
		width:80%;
		margin:0 auto;
		margin-top:16px;
		display:block;
	}
	.product-img
	{
		width:100%;
		border-radius: 32px;
		border: 4px solid rgba(209,6,77,0.64);
	}
	.product-text-container
	{
		width:100%;
		height:100%;
		display:block;
		margin:0 auto;
		margin-bottom:16px;
	}
	

	h2
	{
		font-size: 6vw;
		text-align: center;
	}

	p
	{
		font-size: 4vw;
	}
	
	.precio
	{
		font-size: 5vw;
	}
	
	/*Whatsapp*/
	.whatsapp
	{
		position:fixed;
		width:50%;
		height:96px;
		left:90%;
		background-color:#25d366;
		color:#FFF;
		
		text-align:center;
		font-size:64px;
		z-index:100;
		box-shadow:0px -8px 8px 0px rgba(0,0,0,0.32);
	}
	
	.whatsapp-icon 
	{
	  	margin:16px;
		float:left;
	}
	
	.facebook
	{
		position:fixed;
		width:50%;
		height:96px;
		left:90%;
		background-color:#256ED3;
		color:#FFF;
		border-radius:64px;
		text-align:center;
		font-size:64px;
		z-index:100;
		box-shadow:0px 8px 8px 0px rgba(0,0,0,0.32);
		transition: 0.25s ease;
	}

	.facebook:hover
	{
		background-color:#5396F4;
	}

	.facebook-icon 
	{
		margin:16px;
			float:left;
	}

	.instagram
	{
		position:fixed;
		width:50%;
		height:96px;
		left:90%;
		background:radial-gradient(circle at 30% 50%, #fdf497 0%, #fdf497 5%, #fd5949 20%,#d6249f 30%,#285AEB 90%);
		color:#FFF;
		border-radius:64px;
		text-align:center;
		font-size:64px;
		z-index:100;
		box-shadow:0px 8px 8px 0px rgba(0,0,0,0.32);
		transition: 0.25s ease;
	}

	.instagram:hover
	{
		background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 15%, #fd5949 55%,#d6249f 70%,#285AEB 100%);
	}

	.instagram-icon 
	{
		margin:16px;
		float:left;
	}
	
	#sticker, #sticker2
	{
		display:none;
	}
}


@media only screen and (min-width: 1200px)
{
	h2
	{
		font-size: 3vw;
	}

	p
	{
		font-size: 2vw;
	}
	
	.precio
	{
		font-size: 3vw;
	}
	
}