#tabmenu-especiales {
	font-size: 22px;
	font-family: 'BebasNeueRegular';
	-webkit-font-smoothing:none;
	-webkit-font-smoothing:subpixel-antialiased;
	-webkit-font-smoothing:antialiased;

	z-index:10;
}
#tabmenu-especiales ul {
	line-height: 1em; /* setting the line height now so we don't have any headaches*/
	margin: 0px; /* let's keep the margin set to 0 for the same reasons as above*/
	list-style-type: none; /* we remove the UL's default disc bullets */
	float: left; /* we float the list to the left like we will all the elements inside*/
	padding: 0px 5px 0px 0px; /* give it a left padding of 5px to counter the effect of margin -5px below */
}
#tabmenu-especiales div {
	float: left; /* floatin' left */
}
#tabmenu-especiales div a {
	text-decoration: none; /* remove the default underline off the anchor text */
	display: block; /* we display this text as block so that we can apply padding/margin without problems */
	float: left; /* floatin' left, to make the menu horizontal */
	padding: 0px 32px 0px 0px;  /* we give it a left padding of 10px to show the first 10 pixels of the tabs image. you can also use padding-left: 10px; */
	background: url(../../img/bg/tabs-especiales.png) no-repeat right top;  /* we link to the tabs image, no tiling, showing the top left part of it */
	margin-right: -14px;  /* this is important for the overlapping part - we are overlapping the tabs by 5 px */
	z-index: 0; /* keep it on layer 0 (default) */
	position: relative;  /* very important as this enables the z-index to work for us and keeps the tabs where they should be */
	color: #6386b5;  /* color of the tab text */
}
#tabmenu-especiales div a strong {
	font-weight: normal;   /* remove the bold effect */
	display: block;   /* display the strong element as a block so we can pad it, etc. */
	float: right;   /* float it left as well */
	background: url(../../img/bg/tabs-especiales.png) no-repeat left top;  /* now we show the right part of the tab and we complete the "puzzle" */
	padding: 10px 8px 10px 20px;  /* important, as through this you define the position of the text within the tab */
	cursor: pointer;  /* this makes the browser show the "hand" cursor when hovering over the tab */
}
#tabmenu-especiales div a:hover {
	position: relative; /* again, keep things relative */
	z-index: 5; /* we show this tab over all other tabs in the menu, which would be on layer 0, thus overlapping occurs */
	background: url(../../img/bg/tabs-especiales.png) no-repeat right bottom;  /* now we show the bottom part of the tabs image, the "hover" instance */
	color: #fff;   /* we color the hovered tab's text black */
}
#tabmenu-especiales div a:hover strong {
	background-image: url(../../img/bg/tabs-especiales.png) no-repeat;  
	position: relative; /* keep it relative */
	z-index: 5; /* show this on layer 5 as well */
	background-position: left bottom; /* we show the right bottom part of the tabs image (the hover instance) */
}


#tabmenu-especiales div.tabon a {
	position: relative; /* again, keep things relative */
	z-index: 5; /* we show this tab over all other tabs in the menu, which would be on layer 0, thus overlapping occurs */
	background: url(../../img/bg/tabs-especiales.png) no-repeat right bottom;  /* now we show the bottom part of the tabs image, the "hover" instance */
	color: #fff;   /* we color the hovered tab's text black */
}
#tabmenu-especiales div.tabon a strong {
	background-image: url(../../img/bg/tabs-especiales.png) no-repeat;  
	position: relative; /* keep it relative */
	z-index: 5; /* show this on layer 5 as well */
	background-position: left bottom; /* we show the right bottom part of the tabs image (the hover instance) */
}



<!---->
div.tabhide-sp {display:none; width:0; overflow:hidden;}
div.tabshow-sp {clear:left; background:url(../../img/bg/bg-tab-especial.png) repeat-x top; width:100%; margin:0 0 15px 0px; top:-3px; position:relative; z-index:0; border:none; overflow:hidden;
-webkit-border-radius: 8px;
-webkit-border-top-left-radius: 0;
-moz-border-radius: 8px;
-moz-border-radius-topleft: 0;
-o-border-radius: 8px;
-o-border-radius-topleft: 0;
border-radius: 8px;
border-top-left-radius: 0;

padding:40px 0px 0px 0px;
}

div.tabshow-sp h1, div.tabshow-sp h2, div.tabshow-sp h3, div.tabshow-sp h4, div.tabshow-sp h5, div.tabshow-sp h6 { color:#fff; text-shadow:1px 1px 1px #2f4e7f;}
div.tabshow-sp p{ color:#fff; text-shadow:1px 1px 1px #2f4e7f; max-height:80px; overflow:hidden; }

.tabs-sp h3 a:hover ,
.tabs-vd h3 a:hover	{ color:#ddd!important;}

#tabmenu-videoteca {
	font-size: 22px;
	font-family: 'BebasNeueRegular';
	-webkit-font-smoothing:none;
	-webkit-font-smoothing:subpixel-antialiased;
	-webkit-font-smoothing:antialiased;

	z-index:10;
}
#tabmenu-videoteca ul {
	line-height: 1em; /* setting the line height now so we don't have any headaches*/
	margin: 0px; /* let's keep the margin set to 0 for the same reasons as above*/
	list-style-type: none; /* we remove the UL's default disc bullets */
	float: left; /* we float the list to the left like we will all the elements inside*/
	padding: 0px 5px 0px 0px; /* give it a left padding of 5px to counter the effect of margin -5px below */
}
#tabmenu-videoteca div {
	float: left; /* floatin' left */
}
#tabmenu-videoteca div a {
	text-decoration: none; /* remove the default underline off the anchor text */
	display: block; /* we display this text as block so that we can apply padding/margin without problems */
	float: left; /* floatin' left, to make the menu horizontal */
	padding: 0px 32px 0px 0px;  /* we give it a left padding of 10px to show the first 10 pixels of the tabs image. you can also use padding-left: 10px; */
	background: url(../../img/bg/tabs-especiales.png) no-repeat right top;  /* we link to the tabs image, no tiling, showing the top left part of it */
	margin-right: -14px;  /* this is important for the overlapping part - we are overlapping the tabs by 5 px */
	z-index: 0; /* keep it on layer 0 (default) */
	position: relative;  /* very important as this enables the z-index to work for us and keeps the tabs where they should be */
	color: #6386b5;  /* color of the tab text */
}
#tabmenu-videoteca div a strong {
	font-weight: normal;   /* remove the bold effect */
	display: block;   /* display the strong element as a block so we can pad it, etc. */
	float: right;   /* float it left as well */
	background: url(../../img/bg/tabs-especiales.png) no-repeat left top;  /* now we show the right part of the tab and we complete the "puzzle" */
	padding: 10px 8px 10px 20px;  /* important, as through this you define the position of the text within the tab */
	cursor: pointer;  /* this makes the browser show the "hand" cursor when hovering over the tab */
}
#tabmenu-videoteca div a:hover {
	position: relative; /* again, keep things relative */
	z-index: 5; /* we show this tab over all other tabs in the menu, which would be on layer 0, thus overlapping occurs */
	background: url(../../img/bg/tabs-especiales.png) no-repeat right bottom;  /* now we show the bottom part of the tabs image, the "hover" instance */
	color: #fff;   /* we color the hovered tab's text black */
}
#tabmenu-videoteca div a:hover strong {
	background-image: url(../../img/bg/tabs-especiales.png) no-repeat;  
	position: relative; /* keep it relative */
	z-index: 5; /* show this on layer 5 as well */
	background-position: left bottom; /* we show the right bottom part of the tabs image (the hover instance) */
}


#tabmenu-videoteca div.tabon a {
	position: relative; /* again, keep things relative */
	z-index: 5; /* we show this tab over all other tabs in the menu, which would be on layer 0, thus overlapping occurs */
	background: url(../../img/bg/tabs-especiales.png) no-repeat right bottom;  /* now we show the bottom part of the tabs image, the "hover" instance */
	color: #fff;   /* we color the hovered tab's text black */
}
#tabmenu-videoteca div.tabon a strong {
	background-image: url(../../img/bg/tabs-especiales.png) no-repeat;  
	position: relative; /* keep it relative */
	z-index: 5; /* show this on layer 5 as well */
	background-position: left bottom; /* we show the right bottom part of the tabs image (the hover instance) */
}



<!---->
div.tabhide-vd {display:none; width:0; overflow:hidden;}
div.tabshow-vd {clear:left; background:url(../../img/bg/bg-tab-especial.png) repeat-x top; width:100%; margin:0 0 15px 0px; top:-3px; position:relative; z-index:0; border:none; overflow:hidden;
-webkit-border-radius: 8px;
-webkit-border-top-left-radius: 0;
-moz-border-radius: 8px;
-moz-border-radius-topleft: 0;
-o-border-radius: 8px;
-o-border-radius-topleft: 0;
border-radius: 8px;
border-top-left-radius: 0;

padding:13px 0px 0px 0px;background-size: cover;
}

div.tabshow-vd h1, div.tabshow-vd h2, div.tabshow-vd h3, div.tabshow-vd h4, div.tabshow-vd h5, div.tabshow-vd h6 { color:#fff; text-shadow:1px 1px 1px #2f4e7f;}
div.tabshow-vd p{ color:#fff; text-shadow:1px 1px 1px #2f4e7f; margin-top:32px;}