*{
	box-sizing: border-box;
	font-family: Arial;
}
a:link {
  text-decoration: none;
  color:Blue;
}
a:visited {
  text-decoration: none;
  color:Blue;
}
a:hover {
  text-decoration: none;
  color:Black;
}

a.Z:link {
  text-decoration: none;
  color:Blue;
}
a.Z:visited {
  text-decoration: none;
  color:Blue;
}
a.Z:hover {
  text-decoration: none;
  color:white;
}

body {
  	background-image: url("Recursos/back.jpg");
		animation-name: Animacion;
  		animation-duration: 0.5s;
		animation-fill-mode: forwards;
	margin:0;
	width:100%;
}

html{margin:0;width:100%;}

@media only screen and (max-width: 600px) {  /* For device movil: */
	#Boton {display: none;}
	#Logo {	width:45%;display: none;}
	#Logo2{	display: block;}
	div.barm{
		display: flex;
		width:100%;
		height:45px;
		border-bottom-left-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-bottom-left-radius: 0px; 
	}
	div.Caja{ width:30%;margin:3px 3px;font-size: 12px;border-radius: 3px 3px;padding:3px 3px;}
	div.CajaP{ width:30%;margin:3px 3px;font-size: 12px;border-radius: 3px 3px;padding:3px 3px;}
	#Finder{width:100%;}
	#F1 {}
	#tool2{display: block;}
	div.Contenedor {margin:0px 0px;}
	P.PPie {font-size: 13px;margin:3px 3px;}
	#imgContacto {width:15px;}
	P.Pjustificado {margin:10px 10px;font-size: 12px;}
	Ul.ListDest{text-align: left;font-size: 12px;}
	P.PIzq {margin:10px 10px;font-size: 12px;}
	h5{margin:3px 3px;font-size: 12px;}
	div.ConteProd{padding:5px 5px 5px 5px;}
}

/* Medium devices (landscape tablets, 600px and up) */
@media only screen and (min-width: 600px) {
  	#Boton {display: none;}
	#Logo {	width:45%;}
	#Logo2{	display:none;}
	div.barm{
		display: flex;
		width:100%;
		height:45px;
		border-bottom-left-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-bottom-left-radius: 0px; }
	div.Caja{ width:30%;margin:7px 7px;font-size: 13px;border-radius: 5px 5px;padding:7px 7px;}
	div.CajaP{ width:30%;margin:7px 7px;font-size: 13px;border-radius: 5px 5px;padding:7px 7px;}
	#Finder{width:100%;}
	#F1 {}
	#tool2{display: block;}
	div.Contenedor {
		margin:0 auto;
		background-color: rgba(255, 255, 255, .7);	
		-webkit-box-shadow: 0px 0px 20px -5px rgba(0,0,0,0.45);
		-moz-box-shadow: 0px 0px 20px -5px rgba(0,0,0,0.45);
		box-shadow: 0px 0px 20px -5px rgba(0,0,0,0.45);
		border-radius: 25px 25px 0px 0px;
	}
	P.PPie {font-size: 13px;margin:5px 5px;}
	#imgContacto {width:15px;}
	P.Pjustificado {margin:10px 10px;font-size: 13px;}
	Ul.ListDest{text-align: left;font-size: 13px;}
	P.PIzq {margin:10px 10px;font-size: 13px;}
	h5{margin:10px 10px;font-size: 13px;}
	div.ConteProd{padding:5px 5px 5px 5px;}
} 


@media only screen and (min-width: 800px) {   /* For desktop: */
	#Logo { width:25%;}
	#Logo2{	display:none;}
	#Boton {color: black;
		padding:13px 10px;
		text-align: center;
		display: inline-block;
		font-size: 16px;
		text-decoration:none;}
	div.barm{
		float:right;
		width:70%;
		border-bottom-left-radius: 20px; -webkit-border-bottom-left-radius: 20px; -moz-border-bottom-left-radius: 20px; }
	div.Caja{ width:22%;margin:10px 10px;font-size: 14px;border-radius: 10px 10px;padding:15px 15px;}
	div.CajaP{ width:16%;margin:10px 10px;font-size: 14px;border-radius: 10px 10px;padding:15px 15px;}	
	#Finder{width: 50%;float:right;}
	#F1 {float:right;}
	#tool2{display: none;}
	div.Contenedor {
		margin:0 auto;
		background-color: rgba(255, 255, 255, .7);	
		-webkit-box-shadow: 0px 0px 20px -5px rgba(0,0,0,0.45);
		-moz-box-shadow: 0px 0px 20px -5px rgba(0,0,0,0.45);
		box-shadow: 0px 0px 20px -5px rgba(0,0,0,0.45);
		border-radius: 25px 25px 0px 0px;
	}
	P.PPie {font-size: 16px;margin:15px 15px;}
	#imgContacto {width:45px;}
	P.Pjustificado {margin:15px 15px;font-size: 14px;}
	Ul.ListDest{text-align: left;font-size: 14px;}
	P.PIzq {margin:15px 15px;font-size: 14px;}
	h5{margin:15px 15px;font-size: 14px;}
	div.ConteProd{padding:15px 15px 15px 15px;}
}


div.Contenedor {
	text-align:center;
	padding:0px 0px 0px 0px;
	max-width:998px;	
}
	

#ContenedorMovil {
	text-align:center;
	margin:30px 30px;
	padding:10px 10px;
	background-color: rgba(255, 255, 255, 1);	
	border-radius: 10px 10px;
}

div.Cabezera {
	margin:0 auto;
	background: rgba(242,246,248,1);
	background: -moz-linear-gradient(top, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 50%, rgba(181,198,208,1) 51%, rgba(224,239,249,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(242,246,248,1)), color-stop(50%, rgba(216,225,231,1)), color-stop(51%, rgba(181,198,208,1)), color-stop(100%, rgba(224,239,249,1)));
	background: -webkit-linear-gradient(top, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 50%, rgba(181,198,208,1) 51%, rgba(224,239,249,1) 100%);
	background: -o-linear-gradient(top, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 50%, rgba(181,198,208,1) 51%, rgba(224,239,249,1) 100%);
	background: -ms-linear-gradient(top, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 50%, rgba(181,198,208,1) 51%, rgba(224,239,249,1) 100%);
	background: linear-gradient(to bottom, rgba(242,246,248,1) 0%, rgba(216,225,231,1) 50%, rgba(181,198,208,1) 51%, rgba(224,239,249,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f6f8', endColorstr='#e0eff9', GradientType=0 );
}

div.barm{
	border:1px solid #2eb9ce;
	text-align:center;
	position: -webkit-sticky; /* Safari */
  	position: sticky;
  	top: 0;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(0.38, #e6e6e6), color-stop(0.38, #e6e6e6), color-stop(1, #ffffff));
	background: -moz-linear-gradient(top, #ffffff 0%, #e6e6e6 38%, #e6e6e6 38%, #ffffff 100%);
	background: -webkit-linear-gradient(top,  #ffffff 0%, #e6e6e6 38%, #e6e6e6 38%, #ffffff 100%);
	background: -o-linear-gradient(top,  #ffffff 0%, #e6e6e6 38%, #e6e6e6 38%, #ffffff 100%);
	background: -ms-linear-gradient(top,  #ffffff 0%, #e6e6e6 38%, #e6e6e6 38%, #ffffff 100%);
	background: linear-gradient(top,  #ffffff 0%, #e6e6e6 38%, #e6e6e6 38%, #ffffff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', gradientType=0);
}

#tool2{
	padding:5px 5px;
}
#toolCot{
	width:34px;
	padding:5px 5px;
}
#toolCot:hover{
	background: rgba(0,0,0,.5);
}
.notiCot{
  position: relative;
}
.notiCot .badge {
  position: absolute;
  top: 28px;
  right: -5px;
  padding: 5px 10px;
  border-radius: 50%;
  background-color: red;
  color: white;
  font-size: 12px;
}

#tool{
	width:35px;
	float:right;
	padding:5px 5px;
}
#tool2:hover{
	background: rgba(0,0,0,.5);
}

#Finder{
	margin:2px 0px 0px 0px;
}

#F1 {
	z-index: 1000;
  	width: 100%;
  	padding:10px 40px;
  	border: 0px solid #ccc;
  	border-radius: 4px;
  	font-size: 16px;
  	background-color: white;
  	background-image: url('Recursos/searchicon.png');
  	background-position: 10px 10px; 
  	background-repeat: no-repeat;
 	background-size: auto, 60%;
	margin:0px 0px;
}

#MenuForMovil{
	z-index: 1001;
  	position: fixed;
  	top: 0;
  	width: 100%;
  	height:100%;
	background-color: rgba(0, 0, 0, .3);
	display:none;
}
#BotonMovil {
	background-color: black;
	color: white;
	padding: 10px 10px;
	text-align: center;
	text-decoration:none;
	margin:5px auto;
	display:block;
}
#BotonMovil:hover {	background-color: rgba(0, 0, 0, .3);}

div.SideBar {
	padding:2px 0px 0px 4px;
	margin:0px 0px;
	height:auto;
	width: 203px;
	border:1px;
}
#SlideBar {
	clear:right;
	background-color: lightblue;   
	max-width:998px;   
	margin: 0;
}

.ImageP {
	width:100%;  
	margin:0px 0px;
}


div.NavSlideBar {
	padding:2px 2px;
	top:-15px;
	text-align: center;
  	position: relative;
	background: rgb(2,0,36);
	background: linear-gradient(176deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
	opacity: 0.7; 
	-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity= 69); /* // for IE8 */
	filter: alpha(opacity= 69); /* //for IE5-7 */
}
div.ItemNavSlideBar {
	background-color: white;
	padding:5px 5px;
  	border-radius: 30px;
	width: 15px; 
	height:15px;
	margin: 5px 5px auto;
	display: inline-block;
}
div.ItemNavSlideBar:hover{ background-color: rgba(255, 255, 255, .3);}

div.Caja{
	background-color: rgba(255,255,255, .9);
	overflow: hidden;   
	-webkit-box-shadow: 0px 0px 20px -5px rgba(0,0,0,0.45);
	-moz-box-shadow: 0px 0px 20px -5px rgba(0,0,0,0.45);
	box-shadow: 0px 0px 20px -5px rgba(0,0,0,0.45);
}
div.caja:hover{
	opacity: 0.5; 
}

div.CajaP{
	background-color: rgba(255,255,255, .9);
	display:inline-block;
	overflow: hidden;   
	box-shadow: 0px 0px 15px -9px rgba(0,0,0,0.77);
}
div.TextProd{
	word-break: keep-all;
	padding-top:10px;
	overflow: hidden; 
}
div.PriceProd{
	margin-top:10px;
	float:right;
}
div.ItemPag{
	border:1px solid black;
	border-radius: 3px 3px;
	padding:5px 5px;
	width:30px;
	height:30px;
	margin:2px 2px;
	display:inline-block;
}
div.ItemPag:hover{
	background-color: yellow;
}


#MenuList{
	list-style-type: none;
	width: 200px;
 	padding: 0px 0px;
	margin:0px 0px;
}

#EleList a {
	display: block;
	color: white;
 	padding: 8px 8px;
	margin:2px 2px 2px 0px;
 	text-decoration: none;
	border:solid 1px black;
	background: rgba(179,220,237,1);
	background: -moz-linear-gradient(top, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(179,220,237,1)), color-stop(50%, rgba(41,184,229,1)), color-stop(100%, rgba(188,224,238,1)));
	background: -webkit-linear-gradient(top, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%);
	background: -o-linear-gradient(top, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%);
	background: -ms-linear-gradient(top, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%);
	background: linear-gradient(to bottom, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 50%, rgba(188,224,238,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3dced', endColorstr='#bce0ee', GradientType=0 );
}

#EleList  a:hover {
	color: #000;	
	border:solid 1px yellow;

	background: rgba(252,234,187,1);
	background: -moz-linear-gradient(top, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 50%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(252,234,187,1)), color-stop(50%, rgba(252,205,77,1)), color-stop(51%, rgba(248,181,0,1)), color-stop(100%, rgba(251,223,147,1)));
	background: -webkit-linear-gradient(top, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 50%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 100%);
	background: -o-linear-gradient(top, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 50%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 100%);
	background: -ms-linear-gradient(top, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 50%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 100%);
	background: linear-gradient(to bottom, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 50%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93', GradientType=0 );
}

#Pic{
	width:792px;
	float:right;
}


#Boton:hover {
	background: rgba(0,0,0,.3);
	color:white;
}
#Boton {
	padding:10px 20px;
	height:45px;
}

div.Pie {
	
	padding:5px 5px;
	margin:0 auto;
	max-width:998px;
	color: rgb(210, 210, 210);
	background-color: rgba(0, 0, 0, .9);
	overflow: hidden;
	word-break: keep-all;
}

div.BarPaginacion {
	border-top:1px solid #2eb9ce;
	border-bottom:1px solid #2eb9ce;
	padding:5px 5px;
	margin:0 auto;
	max-width:998px;
	background-color: rgba(15, 16, 16, 0.57); 
	color: black;

	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(0.38, #e6e6e6), color-stop(0.38, #e6e6e6), color-stop(1, #ffffff));
	background: -moz-linear-gradient(top, #ffffff 0%, #e6e6e6 38%, #e6e6e6 38%, #ffffff 100%);
	background: -webkit-linear-gradient(top,  #ffffff 0%, #e6e6e6 38%, #e6e6e6 38%, #ffffff 100%);
	background: -o-linear-gradient(top,  #ffffff 0%, #e6e6e6 38%, #e6e6e6 38%, #ffffff 100%);
	background: -ms-linear-gradient(top,  #ffffff 0%, #e6e6e6 38%, #e6e6e6 38%, #ffffff 100%);
	background: linear-gradient(top,  #ffffff 0%, #e6e6e6 38%, #e6e6e6 38%, #ffffff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', gradientType=0);
}
P.PPie {
	display:inline-block;
}
P.Pjustificado {
	text-align: justify;
}
P.PIzq {
	text-align: left;
}



IMG.imgProdDest {
	width:100%;
}

/* Animation */

#Logo2 { 
	animation-name: AniLogo;
  	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	}
#Logo { 	
	animation-name: AniLogo;
  	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	}

@keyframes Animacion {
  0%   {opacity: 0.1;}
  25%  {opacity: 0.3;}
  50%  {opacity: 0.6;}
  75%  {opacity: 0.9;}
  100% {opacity: 1.0;}
}
@keyframes AniLogo{
  0%   {filter: blur(100px);}
  49%  {filter: blur(75px);}
  50%  {filter: blur(50px);}
  75%  {filter: blur(25px);}
  100% {filter: blur(0px);}
}



div.CajaProducto{
	background-color: rgba(255,255,255, .9);
	width:100%;
	text-align: left;
	padding:30px 30px;
}
div.ConteProdIndexDest{
	background-color: rgba(255,255,255, .9);
	width:100%;
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
}

div.ConteProd{
	background-color: rgba(255,255,255, .9);
	width:100%;
}

#frmAddCot{
	display:inline;
	padding:3px 3px;
	margin: 5px 5px;
}