* {
  margin: 0;
  padding: 0;

}

/* ----BODY -- */
body { 
	height:100%;
	font-family: Arial;
	font-size: 16px;
	text-align:left;
	/* 
	color: rgb(212, 220, 255);
	background-color: grey;
	border: 1px solid #1d1b3b; */
	margin-left : auto;
	margin-right : auto;

}

@media screen and (min-width: 1px) and (max-width: 340px) { /* min */
  body {
    width: 340px;
  }
}

@media screen and (min-width: 367px) and (max-width: 780px) { /* S */
  body {
    /* width: -webkit-calc(100% - 2px);
    width:    -moz-calc(100% - 2px);
    width:         calc(100% - 2px);
    background-color: rgb(87, 0, 0); */
    width: 100%;
  }
}

@media screen and (min-width: 780px) and (max-width: 1200px) { /* M */
  body {
    /* width: -webkit-calc(100% - 2px);
    width:    -moz-calc(100% - 2px);
    width:         calc(100% - 2px); */
    background-color: rgb(0, 49, 0);
    width: 100%;
  }
}

@media screen and (min-width: 1200px) and (max-width: 3200px) { /* L */
  body {
    width:1200px;
    /* background-color: rgb(0, 0, 104); */
  }
}

div.hand {
  cursor: pointer;
  cursor: hand;
}

div.nosel {
  -moz-user-select: none; 
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none; 
}

/*  link */
a:link {
    color:#1d1b3b;
    text-decoration:none;
}

a:visited {
    color:#1d1b3b;
    text-decoration:none;
}

a:hover {
    color:#231d96;
    text-decoration:none;
}

a:active {
    color:#961d2d;
    text-decoration:none;
}


/* ---------------ESTILOS 2019 --------------------------------*/

/* ----HEADER -- */
header { 
	width: 100%;
	/* background:rgba(86, 75, 114, 0.22);  */
	/* background-color:rgba(41, 129, 180, 0.87);
	border:1px solid #c0c0c0;  */
	margin:0px 0px 10px 0px;
	position: relative;
	/* float:left; */
}

@media screen and (min-width: 1px) and (max-width: 780px) { /* S */
	header {
		/* height:110px; */
		height:60px;
		margin: 0px 0px 60px 0px;
	}
}

@media screen and (min-width: 780px) and (max-width: 1200px) { /* M */
	header {
		height:100px;
		margin: 0px 0px 70px 0px;
	}
}

@media screen and (min-width: 1200px) and (max-width: 5200px) { /* L */
	header {
		height:120px;
	}
}

/* -------------- */
header img.logo { 
	border:0px;
	display: inline-block;
	/* background:rgba(202, 76, 17, 0.24); */
}

@media screen and (min-width: 1px) and (max-width: 780px) { /* S */
	header img.logo {
		width:50px;
		height:50px;
		margin:5px;
	}
}

@media screen and (min-width: 780px) and (max-width: 1200px) { /* M */
	header img.logo {
		width:80px;
		height:80px;
		margin:10px;
	}
}

@media screen and (min-width: 1200px) and (max-width: 4200px) { /* L */
	header img.logo {
		width:100px;
		height:100px;
		margin:10px;
	}
}

/* -------------- */
header div.title { 
	color: white;
	text-align: left;
	/*width: 200px;
	font-weight: bold;
	text-shadow: 3px 3px 3px rgba(0, 0, 0, 1);
	border:1px solid #5908da; 
	background:rgba(247, 242, 242, 0.349); 
	*/
	display: inline-block;
	position: absolute;
	letter-spacing: 4px;
}

@media screen and (min-width: 1px) and (max-width: 780px) { /* S */
	header div.title {
		width: -webkit-calc(100% - 122px);
		width:    -moz-calc(100% - 122px);
		width:         calc(100% - 122px); 
		height:30px;
		font-size: 30px;
		/* line-height: 60px; */
		margin:3px 0px 0px 0px;
	}
}

@media screen and (min-width: 780px) and (max-width: 1200px) { /* M */
	header div.title {
		width: 500px; 
		height:50px;
		font-size: 50px;
		line-height: 50px;
		margin:10px 0px 0px 0px;
	}
}

@media screen and (min-width: 1200px) and (max-width: 4200px) { /* L */
	header div.title {
		width: 500px; 
		height:50px;
		font-size: 50px;
		line-height: 50px;
		margin:20px 0px 0px 0px;
	}
}

/* -------------- */
header div.undertitle { 
	color: white;
	text-align: left;
	/*width: 200px;
	font-weight: bold;
	text-shadow: 3px 3px 3px rgba(0, 0, 0, 1);
	border:1px solid #5908da; 
	background:rgba(86, 75, 114, 0.32); 
	*/
	display: inline-block;
	position: absolute;
	letter-spacing: 2px;
}

@media screen and (min-width: 1px) and (max-width: 780px) { /* S */
	header div.undertitle {
		width:250px;
		height:14px;
		font-size: 14px;
		line-height: 10px;
		margin:40px 0px 0px 0px;
	}
}

@media screen and (min-width: 780px) and (max-width: 1200px) { /* M */
	header div.undertitle {
		width: 500px; 
		height:30px;
		font-size: 25px;
		/* line-height: 10px; */
		margin:60px 0px 0px 0px;
	}
}

@media screen and (min-width: 1200px) and (max-width: 4200px) { /* L */
	header div.undertitle {
		width:450px;
		height:30px;
		font-size: 25px;
		/* line-height: 10px; */
		margin:70px 0px 0px 0px;
	}
}

/* -------------- */
header div.box { 
	color: white;
	font-weight: bold;
	text-align: center;
	/*width: 200px;
	border:1px solid #5908da;  
	text-shadow: 3px 3px 3px rgba(0, 0, 0, 1);
	*/
	background:rgba(175, 172, 180, 0.32);
	position: relative;
	float: right;
}

header div.box i {
	font-size: 40px;
	line-height: 60px;
}

@media screen and (min-width: 1px) and (max-width: 780px) { /* S */
	header div.box {
		width:60px;
		height:60px;
		font-size: 60px;
		display: block;
	}
}

@media screen and (min-width: 780px) and (max-width: 1200px) { /* M */
	header div.box {
		width:60px;
		height:60px;
		font-size: 60px;
		display: none;
		/*
		margin-top:-100px;
		margin-left: 0px;
		position: absolute;
		*/
	}
}

@media screen and (min-width: 1200px) and (max-width: 4200px) { /* L */
	header div.box {
		font-size: 65px;
		line-height: 120px;
		display: none;
	}
}


/* ------MENU-TOP-------- */
ul#menu_top {
	/* 
	*/
	background:rgba(55, 126, 219, 0.164); 
	font-size:22px;
	color: #b8b8b8;
	width: 100%;
	list-style: none;
	margin: 0px 0px 10px 0px;
}

@media screen and (min-width: 1px) and (max-width: 780px) { /* S */
	ul#menu_top{
		display: block;
		display: none;
	}
}

@media screen and (min-width: 780px) and (max-width: 1200px) { /* M */
	ul#menu_top{
		display: block;
		display: none;
	}
}

@media screen and (min-width: 1200px) and (max-width: 4200px) { /* L */
	ul#menu_top {
		display: block;
		display: none;
	}
}
  
/* -------------- */
li.menu_top {
	background:rgba(186, 197, 24, 0.034);
	font-size:22px;
	color: #d6d6d6;
	/* border-bottom: 1px solid #c0c0c0; */
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	list-style-type: none;
}

li.menu_top a:link, li.menu_top a:visited, li.menu_top a:hover, li.menu_top a:active {
	/*  margin: 30px;*/
	background:rgba(20, 172, 218, 0.103);
	color: whitesmoke;
	width: 100%;
	height: 100%;
	margin: 0px; 
	font-size:22px;
	line-height: 42px;
	padding: 0px 0px 0px 10px;
	display: block;
	text-overflow: ellipsis;
	overflow: hidden;
}

@media screen and (min-width: 1px) and (max-width: 592px) { /* S (mas pequeno solo menu top, 2 columnas) */
	li.menu_top {
		width: -webkit-calc(50% - 5px);
		width:    -moz-calc(50% - 5px);
		width:         calc(50% - 5px); 
		height: 40px;
		display: inline-block;
		font-size:22px;
	}
}

@media screen and (min-width: 593px) and (max-width: 780px) { /* S */
	li.menu_top {
		width: 160px;
		height: 40px;
		display: inline-block;
		font-size:22px;
	}
}

@media screen and (min-width: 780px) and (max-width: 1200px) { /* M */
	li.menu_top {
		width: 160px;
		height: 40px;
		display: inline-block;
		font-size:22px;
	}
}

/* -------------- */
li.menu_top_title {
	background:rgba(186, 197, 24, 0.034);
	font-size:22px;
	color: #d6d6d6;
	/* border-bottom: 1px solid #c0c0c0; */
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	list-style-type: none;
}

li.menu_top_title a:link, li.menu_top_title a:visited, li.menu_top_title a:hover,li.menu_top_title a:active {
	background:rgba(20, 172, 218, 0.103);
	color: whitesmoke;
	width: 100%;
	height: 100%;
	font-size:22px;
	line-height: 42px;
	margin: 0px; 
	padding: 0px 0px 0px 10px;
	display: block;
}

@media screen and (min-width: 1px) and (max-width: 780px) { /* S */
	li.menu_top_title {
		width: 100%;
		height: 40px;
		display: block;
		font-size:22px;
		padding: 0px 0px 5px 0px;
	}
}

@media screen and (min-width: 780px) and (max-width: 1200px) { /* M */
	li.menu_top_title {
		width: 100%;
		height: 40px;
		display: block;
		font-size:22px;
		padding: 0px 0px 5px 0px;
	}
}

  
/* -------------- */
li.menu_top:hover {
	color: #f5e026;
	/* border-bottom: 1px solid #c0c0c0; */
	cursor: pointer;
	cursor: hand;
}


/* -------------- */
div#search_area { 
	/*
	border:1px solid #5908da; 
	background:rgba(230, 229, 233, 0.384); 	
	*/
	margin: 0px 0px 10px 0px;
	position: inherit;
	overflow: hidden;
}

@media screen and (min-width: 1px) and (max-width: 780px) { /* S */
	div#search_area {
		font-size: 30px;
		width: 100%;
		height:45px;
		position: absolute;
		margin: 5px 0px 10px 0px;
	}
}

@media screen and (min-width: 780px) and (max-width: 1200px) { /* M */
	div#search_area {
		font-size: 30px;
		width: 100%;
		height:45px;
		margin: 5px 0px 10px 0px;
		position: absolute;
	}
}

@media screen and (min-width: 1200px) and (max-width: 4200px) { /* L */
	div#search_area {
		width: 400px;
		height:50px;
		font-size: 65px;
		line-height: 120px;
		/* top: -60px; */
		display: block;
		float:right;
		position: relative;
		padding: 35px 100px 0px 0px;
	}
}

/* -------------- */
input#sticker_q { 
	/* font-size: 15px; */
	border: 0px solid gray; 
	padding:2px;
	color: rgb(65, 65, 65);
	display: inline-block;
	letter-spacing: 2px;
	padding: 10px;
}

@media screen and (min-width: 1px) and (max-width: 780px) { /* S */
	input#sticker_q {
		height:45px;
		width: -webkit-calc(100% - 60px);
		width:    -moz-calc(100% - 60px);
		width:         calc(100% - 60px); 
		font-size: 20px;
		/* line-height: 60px; */
	}
}

@media screen and (min-width: 780px) and (max-width: 1200px) { /* M */
	input#sticker_q {
		height:45px;
		width: -webkit-calc(100% - 50px);
		width:    -moz-calc(100% - 50px);
		width:         calc(100% - 50px); 
		font-size: 20px;
		/* line-height: 60px; */
	}
}

@media screen and (min-width: 1200px) and (max-width: 4200px) { /* L */
	input#sticker_q {
		width: 350px;
		height:50px;
		font-size: 25px;
		line-height: 120px;
	}
}
/* -------------- */

input#btnsrch { 
	width:45px;
	height:45px;
	font-size: 10px; 
	border: 0px solid gray; 
	/* padding:2px; */
}

@media screen and (min-width: 1px) and (max-width: 780px) { /* S */
	input#btnsrch {
		height:40px;
		font-size: 24px;
		/* line-height: 60px; */
	}
}

@media screen and (min-width: 780px) and (max-width: 1200px) { /* M */
	input#btnsrch{
		font-size: 45px;
		line-height: 100px;
  }
}

@media screen and (min-width: 1200px) and (max-width: 4200px) { /* L */
	input#btnsrch {
		font-size: 65px;
		line-height: 120px;
	}
}

/* -------------- */
div#btnsrch { 
	color: white;
	text-align: center;
	border: 0px; 
	/* padding:2px; */
	background-color: chocolate;
	float: right;
}

div#btnsrch i {
	font-size: 40px;
	line-height: 45px; 
	/* 
	display: inline-block;*/
}

@media screen and (min-width: 1px) and (max-width: 780px) { /* S */
	div#btnsrch {
		width:60px;
		height:45px;
		/* line-height: 60px; 
		display: inline-block;*/
	}
}

@media screen and (min-width: 780px) and (max-width: 1200px) { /* M */
	div#btnsrch {
		width:50px;
		height:55px;
		font-size: 65px;
		line-height: 120px;
	}
	div#btnsrch i {
		font-size: 40px;
		line-height: 45px; 
	}
}

@media screen and (min-width: 1200px) and (max-width: 4200px) { /* L */
	div#btnsrch {
		width:50px;
		height:55px;
		font-size: 65px;
		line-height: 120px;
	}
	div#btnsrch i {
		font-size: 40px;
		line-height: 50px; 
	}
}


/* -------------- */
select.menu {
  /* background:rgba(161, 224, 180, 0.075); */
  font-size:22px;
  margin:10px 10px 10px 10px;
  width: -webkit-calc(100% - 20px);
  width:    -moz-calc(100% - 20px);
  width:         calc(100% - 20px);
}

@media screen and (min-width: 876px) {
  select.menu {
    display: block;
    display: none;
  }
}

@media screen and (min-width: 780px) and (max-width: 1200px) { /* M */
  select.menu {
    display: block;
    display: none;
  }
}

@media screen and (min-width: 1200px) and (max-width: 4200px) { /* L */
  select.menu {
    display: block;
    display: none;
  }
}





/*----MENU FIJO----*/
div.menu {
	/*
	background:rgba(130, 156, 138, 0.199); 
	*/
	margin:0px 10px 10px 0px;
	width: 250px;
	float:left;
	overflow: hidden;
}

@media screen and (min-width: 1px) and (max-width: 780px) { /* S */
  div.menu {
    display: block;
    display: none;
  }
}



/*------*/
ul.menu {
  /* background:rgba(47, 137, 255, 0.295); */
  font-size:22px;
  color: #b8b8b8;
  width: 100%;
  list-style: none;
}

li.menu {
  /* background:rgba(240, 142, 235, 0.144); */
  font-size:22px;
  color: #d6d6d6;
  height: 40px;
  border-bottom: 1px solid #c0c0c0;
  padding: 10px 0px 0px 10px;
  width: -webkit-calc(100% - 20px);
  width:    -moz-calc(100% - 20px);
  width:         calc(100% - 20px);

  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

li.menu:hover {
  color: #f5e026;
  border-bottom: 1px solid #f5e026;
  cursor: pointer;
  cursor: hand;
}


/*------*/
ul#menu_top li.menu {
	/* background:rgba(240, 142, 235, 0.144); */
	font-size:22px;
	color: #d6d6d6;
	height: 40px;
	border-bottom: 1px solid #c0c0c0;
	padding: 10px 0px 0px 10px;
	width: -webkit-calc(100% - 20px);
	width:    -moz-calc(100% - 20px);
	width:         calc(100% - 20px);
  
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
  }
  
ul#menu_top li.menu:hover {
	color: #f5e026;
	border-bottom: 1px solid #f5e026;
	cursor: pointer;
	cursor: hand;
}
  
section {
	/* 
	background:rgba(158, 26, 26, 0.219); 
	*/ 
	border: 0px;
	float:left;
}

@media screen and (min-width: 1px) and (max-width: 780px) { /* S */
  section {
    width: 100%;
    margin:0px 0px 10px 0px;
  }
}

@media screen and (min-width: 780px) and (max-width: 1200px) { /* M */
  section {
    width: -webkit-calc(100% - 270px);
    width:    -moz-calc(100% - 270px);
    width:         calc(100% - 270px);
  }
}

@media screen and (min-width: 1200px) and (max-width: 4200px) { /* L */
  section {
    width: 630px;
    margin:0px 10px 10px 0px;
  }
}



/* ------ASIDE-(PANEL)---------*/
aside {
	/*background:rgb(62, 63, 27, 0.1);   
	height: 350px;*/
	border: 0px solid rgb(46, 66, 49);
	width: 300px;
	float:left;
	color:#c0c0c0;
	margin:0 0 10px 0;
}

@media screen and (min-width: 1px) and (max-width: 780px) { /* S */
  aside {
    display: block;
    display: none;
  }
}

@media screen and (min-width: 780px) and (max-width: 1200px) { /* M */
  aside {
    display: block;
    display: none;
  }
}

@media screen and (min-width: 1200px) and (max-width: 4200px) { /* L */
  aside {
    margin:0 0 10px 0;
  }
}



div.cajon {
  background:#FFF; 
  clear:both;
  overflow:hidden;
  border-radius: 8px 8px 8px 8px;
  -moz-border-radius: 8px 8px 8px 8px;
  -webkit-border-radius: 8px 8px 8px 8px;
  border: 0px solid #FFF;
  margin:0 0 10px 0;
}

div.cajon_title {
  background:#FFF; 
  font-size:22px;
  /* width:300px;  
  height:35px; */
  text-align: center;
  margin:4px;
  padding:8px;

  -moz-user-select: none; 
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none; 
}

div.cajon_content {
  background-color:#ECE5DD;
  border: 0px solid #c0c0c0;
  text-align: center;
}

img.cajon_content_app {
  background-color:#ECE5DD;
  border: 0px solid #c0c0c0;
  text-align: center;
}

div.cajon_details {
  clear:both;
  background:#FFF; 
  /* border: 1px solid #ad0b0b; */
  padding: 8px;
  color: rgb(53, 53, 53);
  
}

div.cajon_content_sticker {
  width:110px;
  height:110px;
  /* position: relative;
  background-color:rgb(202, 224, 206);
  border: 1px solid #360bad; */
  display: inline-block;
  font-size:36px;
  padding: auto;

}

img.cajon_content_sticker {
  /*  background-color:rgb(164, 179, 84);*/
  width:100px;
  height:100px;
  display: block;
  margin:5px;
}




div.cajon_content_gif {
  /* position: relative;
  background-color:rgb(202, 224, 206);
  border: 1px solid #360bad; */
  display: inline-block;
  font-size:36px;
  padding: auto;
}

@media screen and (min-width: 1px) and (max-width: 780px) { /* S */
  div.cajon_content_gif {
    width: 100%;
    text-align: center;
    text-align: -webkit-center;
    /* background-color:rgb(164, 179, 84); */
  }
}

@media screen and (min-width: 780px) and (max-width: 1200px) { /* M */
  div.cajon_content_gif{
    width: 400px;
    text-align: center;
    text-align: -webkit-center;
  }
}

@media screen and (min-width: 1200px) and (max-width: 4200px) { /* L */
  div.cajon_content_gif {
    width: 400px;
  }
}


img.cajon_content_gif {
  /* background-color:rgb(164, 179, 84);*/
  display: block;
  margin:0px;
  /* height: auto; */
}

@media screen and (min-width: 1px) and (max-width: 500px) { /* (XS tamano solo para esta img) */
  img.cajon_content_gif {
    width: 100%;
    /* background-color:rgb(164, 179, 84); */
  }
}

@media screen and (min-width: 501px) and (max-width: 780px) { /* S */
  img.cajon_content_gif {
    width: 400px;
    /* background-color:rgb(164, 179, 84); */
  }
}

@media screen and (min-width: 780px) and (max-width: 1200px) { /* M */
  img.cajon_content_gif{
    width: -webkit-calc(100% - 20px);
    width:    -moz-calc(100% - 20px);
    width:         calc(100% - 20px);
  }
}

@media screen and (min-width: 1200px) and (max-width: 4200px) { /* L */
  img.cajon_content_gif {
    width: 400px;
  }
}


/* ----------------------------*/
div.cajon_content_gif_rank {
	/* position: relative;
	border: 1px solid #360bad; */
	height: 250px;
	line-height: 250px;
	background-color:rgb(43, 153, 63);
	overflow: scroll;
	display: inline-block;

}

@media screen and (min-width: 1px) and (max-width: 780px) { /* S */
  div.cajon_content_gif_rank {
    width: 100%;
    text-align: center;
    text-align: -webkit-center;
    /* background-color:rgb(164, 179, 84); */
  }
}

@media screen and (min-width: 780px) and (max-width: 1200px) { /* M */
  div.cajon_content_gif_rank{
    width: 400px;
    text-align: center;
    text-align: -webkit-center;
  }
}

@media screen and (min-width: 1200px) and (max-width: 4200px) { /* L */
  div.cajon_content_gif_rank {
    width: 400px;
  }
}



/* ----------------------------*/
div.lista_rank_gif {
  /* position: relative;
  background-color:rgb(202, 224, 206);
  border: 1px solid #360bad; */
  display: inline-block;
  font-size:36px;
  padding: auto;
}

@media screen and (min-width: 1px) and (max-width: 780px) { /* S */
  div.lista_rank_gif {
    width: 250px;
    /* background-color:rgb(164, 179, 84); */
  }
}

@media screen and (min-width: 780px) and (max-width: 1200px) { /* M */
  div.lista_rank_gif {
    width: 250px;
  }
}

@media screen and (min-width: 1200px) and (max-width: 4200px) { /* L */
  div.lista_rank_gif {
    width: 250px;
  }
}




img.lista_rank_gif {
  /* background-color:rgb(164, 179, 84);*/
  display: block;
  margin:0px;
  /* height: auto; */
}

@media screen and (min-width: 1px) and (max-width: 780px) { /* S */
  img.lista_rank_gif {
    height: 200px;
    /* background-color:rgb(164, 179, 84); */
  }
}

@media screen and (min-width: 780px) and (max-width: 1200px) { /* M */
  img.lista_rank_gif {
    height: 200px;
  }
}

@media screen and (min-width: 1200px) and (max-width: 4200px) { /* L */
  img.lista_rank_gif {
    height: 200px;
  }
}





div.cajon_tab_on {
	width: -webkit-calc(50% - 5px);
	width:    -moz-calc(50% - 5px);
	width:         calc(50% - 5px);

	background-color:#ECE5DD;
	text-align: center;
	display: inline-block;
	font-size:24px;
	border-radius: 12px 12px 0px 0px;
	-moz-border-radius: 12px 12px 0px 0px;
	-webkit-border-radius: 12px 12px 0px 0px;
	padding: 10px 0px 10px 0px;

	border-top:  1px solid #000000;;
	border-right:  1px solid #000000;;
	border-bottom:  1px solid #ECE5DD;
	border-left:  1px solid #000000;;
}

div.cajon_tab_off {
  width: -webkit-calc(50% - 5px);
  width:    -moz-calc(50% - 5px);
  width:         calc(50% - 5px);

  background-color:rgb(233, 233, 233);
  text-align: center;
  display: inline-block;
  font-size:24px;
  border-radius: 12px 12px 0px 0px;
  -moz-border-radius: 12px 12px 0px 0px;
  -webkit-border-radius: 12px 12px 0px 0px;
  padding: 10px 0px 10px 0px;

  border-top:  1px solid rgb(233, 233, 233);
  border-right:  1px solid rgb(233, 233, 233);
  border-bottom:  1px solid #000000;
  border-left:  1px solid rgb(233, 233, 233);
}

div.cajon_app {
  width: -webkit-calc(100% - 24px);
  width:    -moz-calc(100% - 24px);
  width:         calc(100% - 24px);
  /* height:60px; */
  
  border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;

  background-color:rgb(255, 255, 255);
  color:  1px solid rgb(45, 45, 45);
  text-align: left;
  font-size:16px;
  padding: 0px;

  border-top:  1px solid rgb(141, 146, 141);
  border-right:  1px solid rgb(141, 146, 141);
  border-bottom:  1px solid rgb(141, 146, 141);
  border-left:  1px solid rgb(141, 146, 141);
}

img.cajon_app {
  width: 60px;
  
  border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;

  float:left;
  margin: 0px 10px 0px 0px;

  background-color:#ECE5DD;


}



/* RANKING HOME */



div.rank_pack_gif {
	margin:2px; 
	/*
	height:220px; 
	width:100%; 
	border:1px;
	*/
	/* 
	width: -webkit-calc(100% - 24px);
	width:    -moz-calc(100% - 24px);
	width:         calc(100% - 24px);
	overflow:ellipsis;
	*/
	background-color:#FFFF00; 
	position:relative;
	float:left;
}

div.rank_txts {
  height:50px;
  float:left; 
  padding:5px 0px 0px 10px; 
  overflow:ellipsis;
  /* background-color:#FF00FF; */

  width: -webkit-calc(100% - 64px);
  width:    -moz-calc(100% - 64px);
  width:         calc(100% - 64px);

}

img.rank_home {
  width:50px;
  height:50px;

}

div.ads_under_header {
  /*background:rgba(86, 75, 114, 0.22);  kpurple transp 
  width: -webkit-calc(100% - 20px);
  width:    -moz-calc(100% - 20px);
  width:         calc(100% - 20px);
  */
  clear:both;
  margin:0px 0px 10px 0px;
  width:100%;
}

/* ---------------ESTILOS 2018 --------------------------------*/

div.header div#logo_eltiempo {
  font-size: 26px;
  font-weight: bold;
  color: white;
  text-shadow: 3px 3px 3px rgba(0, 0, 0, 1);
  /* border:1px solid #000000; */
}


div.header div#logo_pais {
  font-size: 26px;
  font-weight: bold;
  color: white;
  text-shadow: 3px 3px 3px rgba(0, 0, 0, 1);
  /* border:1px solid #000000; */
}

div.header div#logo_hora {
  /* border:1px solid #000000; */
  height:75px;
  width:100px;
  position: absolute;
  bottom: 8px;
  right: 16px;
}

div.header div#logo_hora_tit {
  font-size: 18px;
  color: white;
  text-shadow: 3px 3px 3px rgba(0, 0, 0, 1);
  /* border:1px solid #000000; */
  float:left;
  position: absolute;
  top: 0px;
}

div.header div#logo_hora_num {
  font-size: 28px;
  color: white;
  text-shadow: 3px 3px 3px rgba(0, 0, 0, 1);
  /* border:1px solid #000000; */
  width:75px;
  float:left;
  position: absolute;
  top: 20px;
}

div.header div#logo_hora_ampm {
  font-size: 10px;
  color: white;
  text-shadow: 3px 3px 3px rgba(0, 0, 0, 1);
  /* border:1px solid #000000; */
  text-align:right;
  width:22px;
  float:left;
  position: absolute;
  top: 30px;
  left: 75px;
}

div.header div#logo_hora_dia {
  font-size: 15px;
  color: white;
  text-shadow: 3px 3px 3px rgba(0, 0, 0, 1);
  /* border:1px solid #000000; */
  float:left;
  position: absolute;
  top: 52px;
}



div.bloque_publi_header {
  background:rgba(86, 75, 114, 0.22); /* kpurple transp */
  margin:10px 0px 0 10px;
  padding:0px;
  position: relative;
  /* left: 500px; */
  float:left;
}

@media screen and (max-width: 740px) {
  div.bloque_publi_header {
    background:rgba(86, 75, 114, 0.22); /* kpurple transp */
    width: -webkit-calc(100% - 20px);
    width:    -moz-calc(100% - 20px);
    width:         calc(100% - 20px);
    height:100px;
  }
}

@media screen and (min-width: 740px) {
  div.bloque_publi_header {
    background:rgba(86, 75, 114, 0.22); /* kpurple transp */
    width:300px;
    height:250px;
    margin:10px 10px 0 10px;
    float:right;
    /* border:1px solid #000000; */
  }
}



div[itemscope="footer"] {
   color: red;
   display:block;
   visibility: hidden;
   width:5px;
   height:5px;
   overflow:hidden;
}

ol#top_nav {
	margin:5px 8px 12px 0px;
	list-style-type: none;
}

ol#top_nav li{
	float:left;
	margin:0px 0px 0px 8px;
}

div.bloque_ads {
	/*background:rgba(86, 75, 114, 0.22);  kpurple transp */
	clear:both;
	margin:10px;
}

div.bloque_dia {
	background:rgba(86, 75, 114, 0.22); /* kpurple transp */
	/*height:300px;  */
	clear:both;
	margin:10px;
	overflow:hidden;
}

div.tiempo_jornada {
	background:rgba(255, 255, 255, 0.48); /* blancp transp */
	/* width:60px;
	height:50px;    */
	margin:4px;
	overflow:hidden;
	/* width:100%; */
}

table.tiempo_jornada {
	margin:0px;
	padding:0px;
	border:0px;
}

table.tiempo_jornada td {
    margin:0px;
    padding:0px;
    border:0px;
}

img.tiempo_icon {
    width:50px;
    height:50px;
    float:left;
}

div.bloque_footer {
    /* background:rgba(86, 75, 114, 0.00); kpurple transp */
    clear:both;
    margin:10px;
    padding:15px;
    color:white;
}

div.tiempo_calendario {
    background:rgba(86, 75, 114, 0.22); /* kpurple transp */
    /* width:300px;
    height:50px;   */
    text-align: center;
    margin:4px;
    padding:8px;
}

div.sticker_en_lista {
    background:rgba(255, 255, 255, 0.48); /* blancp transp */
    height: 100px;
    margin:10px;
    padding:5px;
    float:left;
    border-radius: 13px 13px 13px 13px;
    -moz-border-radius: 13px 13px 13px 13px;
    -webkit-border-radius: 13px 13px 13px 13px;
    border: 0px solid #000000;
}

div.bloque_ads {
    /*background:rgba(86, 75, 114, 0.22);  kpurple transp */
    clear:both;
    margin:10px;
}

div.bloque_region {
    background:rgba(86, 75, 114, 0.22); /* kpurple transp */
    /*height:300px;  */
    clear:both;
    margin:10px;
    overflow:hidden;
}


div.tiempo_home_ciudad_lista {
    background:rgba(255, 255, 255, 0.48); /* blancp transp */
    margin:10px;
    padding:10px;
    float:left;
    border-radius: 13px 13px 13px 13px;
    -moz-border-radius: 13px 13px 13px 13px;
    -webkit-border-radius: 13px 13px 13px 13px;
    border: 0px solid #000000;
    height: 20px;
}

img.tiempo_icon {
    width:50px;
    height:50px;
    float:left;
}

div.bloque_footer {
    /* background:rgba(86, 75, 114, 0.1); kpurple transp */
    clear:both;
    margin:10px;
    padding:15px;
    text-align: center;
}


/* -------RANKS 2020-(STICKERS)-----------*/
div.rank_container_stickers {
	background-color:rgb(255, 255, 255);
	font-size:10px;
	width: 100%;
}
  
/* -------------*/
div.rank_container_stickers div.element{
	/*width:100%; */
	/* background-color:#FFFF00; */
	margin:1px; 
	padding:0px; 
	height:70px; 
	border:1px;
	background-color:#ECE5DD;
	text-align: left;
	display: inline-block;
	overflow: hidden;
}
div.rank_container_stickers div.element a:link {
	width: 100%;
	height: 100%;
	margin: 0px; 
	padding: 0px;
	display: block;
	background-color:rgba(177, 27, 27, 0);
}

div.rank_container_stickers div.element img {
	background-color:rgba(180, 178, 41, 0);
	position: absolute;
	margin:5px;
}

div.rank_container_stickers div.element div.title {
	background-color:rgba(41, 90, 180, 0);
	padding: 14px 5px 0px 75px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

div.rank_container_stickers div.element div.undertitle {
	background-color:rgba(41, 90, 180, 0);
	padding: 0px 5px 0px 75px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 14px;
}

@media screen and (min-width: 1px) and (max-width: 550px) { /* XS (solo para este class) */
	div.rank_container_stickers div.element{
		width: -webkit-calc(100% - 4px);
		width:    -moz-calc(100% - 4px);
		width:         calc(100% - 4px);
	}
	div.rank_container_stickers div.element img {
		width: 60px;
		height: 60px;
	}
}
  
@media screen and (min-width: 551px) and (max-width: 780px) { /* S */
	div.rank_container_stickers div.element{
		width: -webkit-calc(50% - 4px);
		width:    -moz-calc(50% - 4px);
		width:         calc(50% - 4px);
	}
	div.rank_container_stickers div.element img {
		width: 60px;
		height: 60px;
		margin: 5px;
	}
}
  
@media screen and (min-width: 780px) and (max-width: 1200px) { /* M */
	div.rank_container_stickers div.element{
		width: -webkit-calc(50% - 4px);
		width:    -moz-calc(50% - 4px);
		width:         calc(50% - 4px);
	}
	div.rank_container_stickers div.element img {
		width: 60px;
		height: 60px;
	}
}
  
@media screen and (min-width: 1200px) and (max-width: 4200px) { /* L */
	div.rank_container_stickers div.element{
		width: -webkit-calc(50% - 4px);
		width:    -moz-calc(50% - 4px);
		width:         calc(50% - 4px);
	}
	div.rank_container_stickers div.element img {
		width: 60px;
		height: 60px;
	}
}

/* -------RANKS 2020-(GIFS)-----------*/
div.rank_container_gifs {
	background-color:rgb(255, 255, 255);
	font-size:10px;
	width: 100%;
	height: 220px;
	overflow: scroll;
}
  
/* -------------*/
div.rank_container_gifs div.element{
	/*width:100%; */
	/* background-color:#FFFF00; */
	margin:1px; 
	padding:0px; 
	height:200px; 
	border:1px;
	background-color:#ECE5DD;
	text-align: left;
	display: table-cell;
	overflow: hidden;
}
div.rank_container_gifs div.element a:link {
	width: 100%;
	height: 100%;
	margin: 0px; 
	padding: 0px;
	display: block;
	background-color:rgba(177, 27, 27, 0);
}

div.rank_container_gifs div.element img {
	background-color:rgba(180, 178, 41, 0);
	position: inherit;
	margin:5px;
}

div.rank_container_gifs div.element div.title {
	background-color:rgba(41, 90, 180, 0);
	padding: 14px 5px 0px 75px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

div.rank_container_gifs div.element div.undertitle {
	background-color:rgba(41, 90, 180, 0);
	padding: 0px 5px 0px 75px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 14px;
}

@media screen and (min-width: 1px) and (max-width: 550px) { /* XS (solo para este class) */
	div.rank_container_gifs div.element img {
		height: 190px;
	}
}
  
@media screen and (min-width: 551px) and (max-width: 780px) { /* S */
	div.rank_container_gifs div.element img {
		height: 190px;
		margin: 5px;
	}
}
  
@media screen and (min-width: 780px) and (max-width: 1200px) { /* M */
	div.rank_container_gifs div.element img {
		height: 190px;
	}
}
  
@media screen and (min-width: 1200px) and (max-width: 4200px) { /* L */
	div.rank_container_gifs div.element img {
		height: 190px;
	}
}