/* css inspiracion */
.navegacion { margin: 0; padding: 0; border-bottom: none;}
.navegacion>ul { height: 105px;}
.navegacion>ul>li { width: 11%;}
.navegacion>ul>li a i img { width: 100%; height: 100%;}
.contenidos-socl h2 { text-align: center;}

.complex { width: 100%; padding-bottom: 10px; text-align:center;}
.complex div { position: relative; color: #666;}
.complex .duracion { margin-bottom: 10px;}
.complex .duracion span { width: 30px; height: 24px; background-color: #666; color: #fff; text-align: center; line-height: 24px; display: inline-block; border-radius: 4px; font-size: 12px;}
.complex .dificultad i { width: 10px; height: 11px; background-image: url(/static/contenido/Templates-Contenidos/09-img/dificultad.png); display: inline-block;}
.complex .dificultad i.hard { background-position: 0 -39px;}
.complex .dificultad i.medium { background-position: 0 -20px;}
.complex .dificultad i.soft { background-position: 0 0;}
.complex .dificultad span, .complex .tiempo span { color: #333;}
.complex .tiempo i { }
.complex .tiempo i.tiempo-ico { width: 11px; height: 13px; background-image: url(/static/contenido/Templates-Contenidos/09-img/icon-tiempo.png); display: inline-block;}

h2.bajada { text-align: left; margin: 0  0 20px;}
h2.bajada-paso { width: 80%; font-weight: 300; text-align: center; font-size: 22px; font-style: italic; margin: 0 auto 20px;}
h2.bajada-paso small { font-weight: 300;}
h2.bajada-paso span { font-weight: bold;}

.btn-pdf { width: 200px; height: 36px; text-align: center; line-height: 34px;  background-color: #fff; border-radius: 3px;}
.btn-pdf a { width: 100%; height: 100%; display: block; color: #666;}
.btn-pdf:hover { background-color: whitesmoke;}
.btn-pdf a:hover { color: #333; text-decoration: none;}

.pasox { width: 50px; height: 50px; text-align: center; line-height: 50px; font-size: 30px; border: dashed 1px #ccc; border-radius: 25px; margin: 0 auto 20px; color: #666; position: relative;}
.pasox::before { content: ""; width: 100px; height: 1px; border-top: dashed 1px #ccc; position: absolute; top: 50%; left: -100px;}
.pasox::after { content: ""; width: 100px; height: 1px; border-top: dashed 1px #ccc; position: absolute; top: 50%; right: -100px;}

.productos-proyecto {}
.productos-proyecto a { color: #666;}
.productos-proyecto a:hover { color: #333; text-decoration: none;}
.productos-proyecto .producto { text-align: center;}
.productos-proyecto .producto img { width: 90%; margin: 0 auto 5px;}

.tips { text-align: center;}

/*-- MENU HUM --*/
.menu-hum { background: #fbfbfb; border: solid 1px #eee;}
.menu-hum .nav-tabs.nav-justified>li>a { text-transform: uppercase; color: #666; font-weight: normal; font-size: 12px;}
.menu-hum .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover { background-color: #eee;}
.menu-hum .nav-tabs>li>a:hover, .menu-especial .nav-tabs>li>a:focus { background-color: #fcfcfc; border: 1px solid #eee;}
.menu-hum .nav-tabs.nav-justified>.active>a, .nav-tabs.nav-justified>.active>a:focus, .nav-tabs.nav-justified>.active>a:hover {border-bottom: 0;}
.menu-hum .nav-tabs.nav-justified>.active>a, .nav-tabs.nav-justified>.active>a:focus, .nav-tabs.nav-justified>.active>a:hover {border: 0;}
.menu-hum .nav-tabs.nav-justified > li > a { border-radius: 0;}

.menu-cat { position: absolute; width: 100%; top: 5%; padding-left: 20%;}
.menu-cat h2 { font-size: 26px; color: #333333; }
.menu-list h2 { margin-top: 0; }
.menu-list li { line-height: 12px; } 
.menu-list .menu>li a:hover { color: #0072ce; text-decoration: none; }
.prod-dinamico { position: absolute; top: 0; padding:0 10%; }

#cssmenu .cabecera { width: 100%; height: 38px; background-color: #fbfbfb; line-height: 38px; position: relative; border-bottom: solid 2px #ccc;}
#cssmenu .logo { width: 50%; height: 36px; padding-left: 15px; text-transform: uppercase; float: left;}
#cssmenu .button { width: 36px; height: 36px; text-align: center; line-height: 36px; float: right; font-size: 18px; cursor: pointer;}
#cssmenu .button:hover { background-color: #f3f3f3;}
#cssmenu .button .glyphicon { margin-top: 9px;}
    
#cssmenu ul { margin: 0; padding: 0; list-style: none;}
#cssmenu ul li { width: 100%; height: 36px; line-height: 36px; border-bottom: solid 1px #eee;}
#cssmenu ul li a { width: 100%; height: 100%; display: block; padding-left: 15px; color: #333;}
#cssmenu ul li a:hover { text-decoration: none; color: #0072ce; background-color: #eee;}
    
.gira { color: #dd0021;
-webkit-transform: rotate(180deg);
   -moz-transform: rotate(180deg);
     -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
        transform: rotate(180deg);
}
    
/* desde css antiguo */
.subMenuCategorias1 { background: #e7f8fc; border-bottom: solid 1px #bde2ea; }
.subMenuCategorias2 { background: #eef6fd; }
.subMenuCategorias3 { background: #f4eff7; }
.subMenuCategorias4 { background: #fcf3e7; }
.subMenuCategorias5 { background: #f3f4fd; }
.subMenuCategorias6 { background: #e6f1f3; }
.subMenuCategorias7 { background: #f1f6eb; }
.subMenuCategorias8 { background: #eff7fd; }
.subMenuCategorias9 { background: #f9f1f1; }

.subMenuCategorias1 li a { border-color: #7fbecb; color: #7fbecb !important;}
.subMenuCategorias2 li a { border-color: #7eb2db; color: #7eb2db !important;}
.subMenuCategorias3 li a { border-color: #c1a6ce; color: #c1a6ce !important;}
.subMenuCategorias4 li a { border-color: #f2af61; color: #f2af61 !important;}
.subMenuCategorias5 li a { border-color: #8c97ce; color: #8c97ce !important;}
.subMenuCategorias6 li a { border-color: #2e9cb3; color: #2e9cb3 !important;}
.subMenuCategorias7 li a { border-color: #a6c483; color: #a6c483 !important;}
.subMenuCategorias8 li a { border-color: #388fd5; color: #388fd5 !important;}
.subMenuCategorias9 li a { border-color: #d27171; color: #d27171 !important;}

#nav li .child {
    width: 100%;
    left:0;
    top:105px;
    display:inline;
    position:absolute;
    text-align:left;
    border: solid 1px #eee;
    border-left: none;
    border-right: none;
    z-index: 9;
    background-color: #fff;
    padding: 10px;
    -webkit-box-shadow: 0px 3px 7px -4px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 3px 7px -4px rgba(0,0,0,0.3);
    box-shadow: 0px 3px 7px -4px rgba(0,0,0,0.3);
}
#nav li .child li  {
    background: whitesmoke;
    border: solid 1px #eee;
    line-height: 25px;
    margin: 4px 4px 2px;
    padding: 2px 15px;
    border-radius: 6px;
    cursor: pointer;
    display: inline;
    width: auto;
}
#grilla-masonry h4 {
    font-weight: normal;
    font-size: 16px;
    color: #0072ce;
}
    
    
.btn-gris {
    border-color: #ccc;
	margin-top:20px;
    
    
    
    
    
    
    
    
    

/* -- MEDIAS -- */
@media screen and (max-width: 990px) {}
@media screen and (max-width: 760px) {}
@media screen and (max-width: 640px) {}
@media screen and (max-width: 460px) {
.sector { text-align: center;}
.navegacion ul li { width: 27%;}
.complex { margin-top: 10px;}
#nav li .child {
    left:0;
    top:105px;
    display:inline;
    position:absolute;
    text-align:left;
    border: solid 1px #eee;
    border-left: none;
    border-right: none;
    z-index: 9;
    background-color: #fff;
    padding: 10px;
    -webkit-box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.3);
}
}