@charset "utf-8";
/* CSS Document */
/* IMPORT STYLE
================================================== */
@import url("maquetacion.css");
@import url("notification.css");
@import url("animate.css");

/* RESET STYLE
================================================== */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, tt, var,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
     caption, tbody, tfoot, thead{
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
    }
	
	ul {
		padding-left:15px;
	}
   /* :focus{ outline: 0; } */
   /* body{ line-height: 1; }*/

    blockquote:before, blockquote:after,
    q:before, q:after { content: ""; }
    blockquote, q{ quotes: none; } 
    article, aside, details, figcaption, figure, footer, 
    header, hgroup, menu, nav, section{ display: block; }
	
mark, rp, rt, ruby, summary, time {display:inline;}
	
	
/* GENERIC TAGS
================================================== */
	html, body { font-size: 13px; font-family: 'Open Sans', sans-serif; height: 100%; background:url(../images/background.jpg) center; background-size: cover; background-attachment:fixed; }
	
	p {	padding: 0;	margin: 0 0 10px 0; }

	th { font-weight:bold; text-align:center; background: url("../images/table-items-header.png") left bottom repeat-x; vertical-align:middle; }
	
	a {text-decoration: none;  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out; }
	a img {border:none; }
	
	h1 {font: normal normal normal 28px / 32px "Roboto", Helvetica, Arial, Verdana, sans-serif;}
	h2 {font: normal normal normal 24px / 28px "Roboto", Helvetica, Arial, Verdana, sans-serif;}
	
	h3 {font: normal normal normal 20px / 24px "Roboto", Helvetica, Arial, Verdana, sans-serif;}
	h4 {font: normal normal normal 15px / 18px "Roboto", Helvetica, Arial, Verdana, sans-serif;}

/* HEADER
=============================================================== */	
header #logo { padding: 20px; }
header #logo img { width: 185px; height:auto; }

header .slogan { font-size: 16px; position:absolute; top:10px; right: 30px; color: #aaa; }
	
header nav { position: absolute; top: 40px; right: 20px; display:block; z-index: 10; }
header nav a { color: #787878; padding: 5px 10px; letter-spacing:-0.5px; }
header nav a:hover { background: #1f57a0; color: #fff; }
header nav a.activo { color: #06C; border: #06c solid 1px; background: #fff; }
header .menu { position: absolute; top: 10px; right: 20px; width: 151px; padding: 5px 10px 8px 10px; background: #1f57a0; border: #06c solid 1px; color: #fff; font-size:18px; box-sizing:border-box; -moz-box-sizing:border-box; display:none; cursor:pointer} 

.desplegable { opacity:1; background: #fff; display:none; position:absolute; top: 25px; left: 0px; z-index:105; border: #dedede solid 1px; border-bottom: none; width: 220px; }
.desplegable a { display: block; border-bottom: #dedede solid 1px; }

.desplegar:hover .desplegable { display:block; }
.desplegar:hover .menudesp { background: #1f57a0; color: #fff; }

header .buscador { position:absolute; right:30px; bottom: 10px; z-index:2; }
header .buscador input { width: 250px; padding:7px; padding-right:40px; border: #dedede solid 1px;  }
header .buscador button { position: absolute; top:2px; right: 0px; border:none; border-left: #dedede solid 1px; background: none; font-size: 18px; padding: 4px 8px 2px 5px; color: #999;}

header .resultados { position: absolute; top: 112px; right: 30px; z-index: 101; width: 305px; display:none; }

header .flags { margin-right: 30px; float: right; }
.hidden-mobile { }

@media only screen and (max-width: 900px) {
	.hidden-mobile { display: none; }
	header #logo { margin-left: 10px; }
	header #logo img {width: 125px; height:auto; }
	header .buscador { position:absolute; right:20px; bottom: 10px; z-index:2; }
	header .menu {display:block; }
	header .resultados { right: 20px; top: 87px; }
	.desplegable { top:-32px; left: -152px; }
	header nav { width: 150px; border: #dedede solid 1px; background: #fff;  -webkit-box-shadow: 0 0 10px 1px rgba(175,175,175,0.15); right: 20px;
-moz-box-shadow: 0 0 10px 1px rgba(175,175,175,0.15);
-ms-box-shadow: 0 0 10px 1px rgba(175,175,175,0.15);
-o-box-shadow: 0 0 10px 1px rgba(175,175,175,0.15);
box-shadow: 0 0 10px 1px rgba(175,175,175,0.15); top: 46px; display: none;}
	header nav a { display: block; border-bottom: #dedede solid 1px; box-sizing:border-box; -moz-box-sizing:border-box; font-family: 'Open Sans' !important; font-style: normal; font-weight: 400; }
	
	header .flags { margin-right: 20px; }
	
	 .w25p, .w20p { width: 50% !important; }
}

@media only screen and (max-width: 600px) {
header #logo { margin-left: 0px; padding-left:10px; padding-bottom: 35px; }
header #logo img {width: 85px; height:auto; position: relative; top: -15px;}
header nav, header .menu { right: 10px; }
header .buscador, header .resultados { right: 10px; }
header .buscador input { width: 150px; }
header .flags { margin-right: 10px; }
 .w25p, .w20p { width: 100% !important; }
}



@media only screen and (max-width: 800px) {
	#col1 { width: 100%; padding-right:0px; }
	#col2 { width: 100%; padding-left:0px; padding-top:20px; }
}

/* actualidad ================================================================ */
.actualidad .titulo { font: normal normal normal 25px / 31px "Open Sans", Helvetica, Arial, Verdana, sans-serif; }
.actualidad .encabezado { font: normal normal normal 14px / 24px "Open Sans", Helvetica, Arial, Verdana, sans-serif;   word-spacing: normal;  color: #888888; }
.actualidad .fecha {font: 12px / 24px "Open Sans", Helvetica, Arial, Verdana, sans-serif; color: rgba(136,136,136,0.5); }

/* articulos familias ========================================================*/

article .familia { background: url(../images/background.jpg); background-size: cover; overflow:hidden; }
article .title { position: absolute; bottom: 5px; left: 5px; right: 5px; background: rgba(1,60,120, 0.8); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#cc013c78', endColorstr='#cc013c78');  height: 44px;   }
 
article:hover .title { height: 170px; }
article:hover .title .hidden {opacity: 1}



article .title .mask {
	-webkit-transform: translateX(-100px);
   -moz-transform: translateX(-100px);
   -o-transform: translateX(-100px);
   -ms-transform: translateX(-100px);
   transform: translateX(-100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
}
article:hover .title .mask {
opacity: 1;
-webkit-transform: translateX(0px);
   -moz-transform: translateX(0px);
   -o-transform: translateX(0px);
   -ms-transform: translateX(0px);
   transform: translateX(0px);
}
article .title .nombrefamilia {
	padding:0px 10px;
}
article:hover .title .nombrefamilia {
	display:none;
}
article .title .nombrefamiliahover {
	opacity:0;
	-webkit-transform: translateY(-40px);
   -moz-transform: translateY(-40px);
   -o-transform: translateY(-40px);
   -ms-transform: translateY(-40px);
   transform: translateY(-40px);
   background: rgba(0,0,0,0.4);
   padding:3px;
}
article:hover .title .nombrefamiliahover {
	opacity:1;
	-webkit-transform: translateY(px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
}


/* tabs ======================================================================== */
#tabs { }
#tabs a { background: #f3f2f1; display:inline-block; padding: 10px; border: #e5e5e5 solid 1px; margin:5px;  -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px;  }
#tabs a.active {   background: #1f57a0;
  background: -moz-linear-gradient(30deg,#1f57a0 0%,#35c4f4 100%);
  background: -webkit-gradient(linear,left bottom,right top,color-stop(0%,#1f57a0),color-stop(100%,#35c4f4));
  background: -webkit-linear-gradient(30deg,#1f57a0 0%,#35c4f4 100%);
  background: -o-linear-gradient(30deg,#1f57a0 0%,#35c4f4 100%);
  background: -ms-linear-gradient(30deg,#1f57a0 0%,#35c4f4 100%);
  background: linear-gradient(30deg,#1f57a0 0%,#35c4f4 100%); color: #fff;  }
  
/* subtabs ======================================================================== */
#subtabs { font-size: 13px; }
#subtabs a { background: #E4312C; display:inline-block; padding: 5px; border: #d5d5d5 solid 1px; margin-left:2px;  -webkit-border-radius: 5px 0px; -moz-border-radius: 5px 0px; -ms-border-radius: 5px 0px; -o-border-radius: 5px 0px; border-radius: 5px 5px  0px 0px; color: #fff; position:relative; top:1px;  }
#subtabs a.activo {   background: #003f8f; color: #fff; border-bottom: #003f8f solid 1px;  }  

@media only screen and (max-width: 600px) {
	#subtabs a { background: #858585; display:inline-block; padding: 5px; border: #d5d5d5 solid 1px; margin-left:2px;  -webkit-border-radius: 5px 5px; -moz-border-radius: 5px 5px; -ms-border-radius: 5px 5px; -o-border-radius: 5px 5px; border-radius: 5px 5px  5px 5px; width:50%; margin:0px !important; color: #fff; position:relative; top:1px;  }
	
	#spancategorias { display: block !important; }
	
	#subtabs a.activo {   background: #1f57a0; color: #fff; border: #d5d5d5 solid 1px !important;  }  
	
	#subtabs { margin-bottom: 5px; }
	
	#tabs a { width: 48% !important; margin:2px !important; }
}

/* footer ====================================================================== */
footer nav a { }
footer nav a:hover { color: #06C; }

.pager { position:absolute !important; bottom: 10px; left: 50%; margin-left: -75px; z-index:100; width: 150px; text-align:center; }
.pager span {   width: 14px;
  height: 14px;
  display: inline-block;
  background: #666;
  background: rgba(0,0,0,0.8);
  cursor: pointer;
  text-indent: -9999px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
  margin:2px;
}
.pager span:hover{ background: rgba(28,87,160,0.8); }
.pager span.cycle-pager-active { background: rgba(228,49,44,0.8);  }

.menuproductos a { display: block; color: #000; padding: 2px 5px; border-bottom: #ededed solid 1px; }
.menuproductos a:hover { color: #06C; }
.menuproductos a.activo { background: #1f57a0;
  background: -moz-linear-gradient(30deg,#1f57a0 0%,#35c4f4 100%);
  background: -webkit-gradient(linear,left bottom,right top,color-stop(0%,#1f57a0),color-stop(100%,#35c4f4));
  background: -webkit-linear-gradient(30deg,#1f57a0 0%,#35c4f4 100%);
  background: -o-linear-gradient(30deg,#1f57a0 0%,#35c4f4 100%);
  background: -ms-linear-gradient(30deg,#1f57a0 0%,#35c4f4 100%);
  background: linear-gradient(30deg,#1f57a0 0%,#35c4f4 100%); color: #fff;  }

.submenuproductos {  }
.submenuproductos a { display: block; color: #3099E7; font-size: 11px; padding: 5px; border-bottom: #ededed solid 1px; }
.submenuproductos a.activo { background: #e4eff7; color: #3099E7;  }

#divsuscribir { position:relative; }
#divsuscribir:after {
    content:"";
    border-color: #e4312c transparent transparent transparent;
    border-style:solid;
    border-width:20px;
    width:0;
    height:0;
	position: absolute;
	bottom: -40px;
	left:50%;
	margin-left:-20px;
}

#subtabs a:not(.activo).tabcat:hover { background: #333;  }
#tabs a:not(.active):hover { background: #CFE7EF; }
.menuproductos a:hover { background: #CFE7EF; }

a:hover .lafamilia { background: #E1F1F9 }
a:hover .nombrecomercial {font-size: 15px; color: #06C}