.no-pad { padding: 0;}

.mt10 { margin-top: 10px;}
.mt20 { margin-top: 20px;}
.mt30 { margin-top: 30px;}
.mt40 { margin-top: 40px;}
.mt50 { margin-top: 50px;}
.mt60 { margin-top: 60px;}
.mt70 { margin-top: 70px;}
.mt80 { margin-top: 80px;}
.mt90 { margin-top: 90px;}
    
.mb10 { margin-bottom: 10px;}
.mb20 { margin-bottom: 20px;}
.mb30 { margin-bottom: 30px;}
.mb40 { margin-bottom: 40px;}
.mb50 { margin-bottom: 50px;}
.mb60 { margin-bottom: 60px;}
.mb70 { margin-bottom: 70px;}
.mb80 { margin-bottom: 80px;}
.mb90 { margin-bottom: 90px;}
 
.pdd1 { padding: 0 1px;}
.pdd3 { padding: 0 3px;}
.pdd5 { padding: 0 5px;}
.pdd7 { padding: 0 7px;}
.pdd9 { padding: 0 9px;}
.pdd11 { padding: 0 11px;}
.pdd13 { padding: 0 13px;}

/* -- estructura -- */
.sector { position: relative; display: table; clear: both; width: 100%;}

.contenidos-socl { font-family: 'Roboto', sans-serif; font-size: 14px; color: #333; margin-bottom: 40px;}
.contenidos-socl h1, .contenidos-socl h2, .contenidos-socl h3, .contenidos-socl h4, .contenidos-socl h5 { margin: 0 0 10px; padding: 0;}
.contenidos-socl p { line-height: 140%; margin: 10px 0 15px; font-size: 16px;}
    
/* -- Navegacion -- */
.navegacion { width: 100%; height: 105px; margin: 10px 0; border-bottom: dashed 1px #ccc; position: relative; padding: 0 15px;}
.navegacion>ul { margin: 0; padding: 0; list-style: none;
    display: flex;
    overflow-x: auto;
    max-height: 100%;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    height: 100px;
    white-space: nowrap;
}
.navegacion>ul>li { width: 10%; height: 90px; float: left;}
.navegacion>ul>li a { width: 100%; height: 100%; display: block; text-align: center; margin-top: 3px; color: #666;}
.navegacion>ul>li a i { width: 50px; height: 50px; margin: 0 auto; display: block; border-radius: 25px; border: solid 2px #666; position: relative;}
.navegacion>ul>li a i img { height: 50px;}
.navegacion>ul>li a span { font-size: 13px; display: block;}
.navegacion>ul>li a:hover { color: #333; text-decoration: none;}
.navegacion>ul>li a:hover i { border-color: #333; border: solid 3px #333;}

#menu-fix { position: fixed; background-color: #fff; top: 50px;}

/* -- Miga -- */
.miga-cont { width: 100%; position: relative;}
.miga-cont span { font-size: 12px;}
.miga-cont span a { text-decoration: none;}
.miga-cont span a:hover {}
    
h1.titular { font-weight: 300; text-align: center; margin: 40px 0 20px;}
h1.titular small { font-weight: 300; display: block; line-height: 120%;}
h1.titular span { font-weight: bold;}
    
h2.bajada { width: 80%; font-weight: 300; text-align: center; font-size: 22px; font-style: italic; margin: 0 auto 20px;}
h2.bajada small { font-weight: 300;}
h2.bajada span { font-weight: bold;}

.sector1 img {}
.sector1 figcaption { font-size: 12px; text-align: right;}
    
.tabs-contenido {}
.tabs-contenido .nav-tabs li { text-align: center;    font-size: 19px;
    font-weight: 500;}
.tabs-contenido .nav-tabs>li>a { background-color: whitesmoke;}
.tabs-contenido .nav-tabs>li.active>a { background-color: #fff;}
.tabs-contenido .tab-content { border: solid 1px #ccc; border-top: none; margin: 0; padding: 20px;}

.tabs-contenido .nav-tabs.tab-x2 li { width: 50%;}
.tabs-contenido .nav-tabs.tab-x3 li { width: 33%;}
.tabs-contenido .nav-tabs.tab-x4 li { width: 25%;}
.tabs-contenido .nav-tabs.tab-x5 li { width: 20%;}
.tabs-contenido .nav-tabs.tab-x6 li { width: 16.667%;}

.bott-pdf { width: 160px; height: 40px; border: solid 1px #ccc; background-color: #eee; text-align: center; line-height: 40px; border-radius: 3px; display: block; position: relative; margin-top: 10px;}
.bott-pdf a { width: 100%; height: 100%; text-decoration: none; display: block;}
    
.listado { margin: 0; padding: 0; list-style: none; margin-top: 20px;}
.listado li { list-style: circle; line-height: 160%; list-style-position: inside;}

.tabs-xs { width: 100%; margin: 10px 0 10px;}
.tabs-xs ul { margin: 0; padding: 0 0 10px; list-style: none;
    display: flex;
    overflow-x: auto;
    max-height: 100%;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    white-space: nowrap;
}
.tabs-xs li { float: left; margin-right: 5px;}
.tabs-xs li a { padding: 0 20px; height: 34px; line-height: 34px; display: block; background-color: #eee; border-radius: 17px; cursor: pointer; color: #666; border: solid 1px #ccc;}
.tabs-xs li a:hover { text-decoration: none; color: #fff; background-color: #0072ce; border: solid 1px #0060ad;}
.tabs-xs li.active a { color: #fff; background-color: #0072c3; border: solid 1px #0060ad; position: relative;}
.tabs-xs li.active a::after { content: ""; width: 20px; height: 11px; background-image: url(/static/contenido/Templates-Contenidos/img/arrow-active.png); position: absolute; bottom: -11px; left: 50%; margin-left: -10px; }
    
.relacionados { margin: 0; padding: 0; list-style: none;
    display: flex;
    overflow-x: auto;
    max-height: 100%;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    white-space: nowrap;
}
.relacionados .item-rel a { color: #333; text-decoration: none;}
.relacionados .item-rel a img { position: relative; display: block;
-webkit-transition: All 0.3s ease;
   -moz-transition: All 0.3s ease;
     -o-transition: All 0.3s ease;
        transition: All 0.3s ease;
-webkit-transform: scale(1);
   -moz-transform: scale(1);
    -ms-transform: scale(1);
     -o-transform: scale(1);
        transform: scale(1);
}
.relacionados .item-rel a:hover img { 
-webkit-transform: scale(1.050);
   -moz-transform: scale(1.050);
    -ms-transform: scale(1.050);
     -o-transform: scale(1.050);
        transform: scale(1.050);
}
.relacionados .item-rel a h5 { color: #333; text-align: center; text-decoration: none; background-color: rgba(255,255,255,1); padding: 10px;
-webkit-transition: All 0.3s ease;
   -moz-transition: All 0.3s ease;
     -o-transition: All 0.3s ease;
        transition: All 0.3s ease;
-webkit-transform: translatey(0px);
   -moz-transform: translatey(0px);
    -ms-transform: translatey(0px);
     -o-transform: translatey(0px);
        transform: translatey(0px);
}
.relacionados .item-rel a:hover h5 {
-webkit-transform: translatey(-350%); background-color: rgba(255,255,255,0.8);
   -moz-transform: translatey(-350%); background-color: rgba(255,255,255,0.8);
    -ms-transform: translatey(-350%); background-color: rgba(255,255,255,0.8);
     -o-transform: translatey(-350%); background-color: rgba(255,255,255,0.8);
        transform: translatey(-350%); background-color: rgba(255,255,255,0.8);
}


.gesture { width: 30px; height: 46px; position: absolute; top: 26px; left: 78%; margin-left: -15px; opacity: 0;}
.gesture {
-webkit-animation: aniGesture 1s 2 ease-in-out;
-moz-animation: aniGesture 1s 2 ease-in-out;
-o-animation: aniGesture 1s 2 ease-in-out;
}
@-webkit-keyframes aniGesture {
  0% { -webkit-transform: translatex(-10px) translatey(0px); opacity:0; }
 20% { -webkit-transform: translatex(0px) translatey(0px); opacity:1; }
 80% { -webkit-transform: translatex(-200px) translatey(0px); opacity:1; }
100% { -webkit-transform: translatex(-200px) translatey(0px); opacity:0; }
}
@-moz-keyframes aniGesture {
  0% { -moz-transform: translatex(-10px) translatey(0px); opacity:0; }
 20% { -moz-transform: translatex(0px) translatey(0px); opacity:1; }
 80% { -moz-transform: translatex(-200px) translatey(0px); opacity:1; }
100% { -moz-transform: translatex(-200px) translatey(0px); opacity:0; }
}
@-o-keyframes aniGesture {
  0% { -o-transform: translatex(-10px) translatey(0px); opacity:0; }
 20% { -o-transform: translatex(0px) translatey(0px); opacity:1; }
 80% { -o-transform: translatex(-200px) translatey(0px); opacity:1; }
100% { -o-transform: translatex(-200px) translatey(0px); opacity:0; }
}


.caja-anclas { width: 100%; height: 50px; line-height: 50px; border: solid 1px #ccc; border-left: none; border-right: none;}
.caja-anclas ul { margin: 0; padding: 0; list-style: none;}
.caja-anclas ul li { float: left; margin-right: 20px;}
.caja-anclas ul li a { width: 100%; height: 100%; display: block; color: #666; text-transform: uppercase; font-size: 15px;}
.caja-anclas ul li a:hover { color: #333; text-decoration: none;}
.caja-anclas ul li .num { width: 18px; height: 18px; display: inline-block; text-align: center; line-height: 18px; color: #fff; border-radius: 9px; font-style: normal;}
.caja-anclas ul li .num.verde { background-color: #50a52b;}
.caja-anclas ul li .num.celeste { background-color: #32a2ee;}
.caja-anclas ul li .num.amarillo { background-color: #facc44;}

.barra-titulo { width: 100%; height: 50px; line-height: 50px;}
.barra-titulo i { position: relative; display: inline-block; width: 50px; height: 50px; text-align: center; color: #fff;}
.barra-titulo h2 { position: relative; display: inline-block; color: #fff; font-size: 18px; text-transform: uppercase; font-weight: 300; margin: 0; padding: 0;}
.barra-titulo.verde { background-color: rgba(99, 164, 65, 0.7);}
.barra-titulo.celeste { background-color: rgba(59, 148, 211, 0.7);}
.barra-titulo.amarillo { background-color: rgba(231, 180, 61, 0.7);}

.columnas2 { column-count: 2; column-gap: 40px; text-align: justify;}
.columnas3 { column-count: 3;}
.columnas4 { column-count: 4;}


/* -- 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) {
.contenidos-socl h2 { font-size: 26px;}
.navegacion>ul>li { width: 25% !important; min-width: 100px; margin-right: 10px;}

h1.titular { font-size: 32px;}
h1.titular small {  font-size: 55%;}
h2.bajada { width: 90%; font-size: 18px;}
    
.tabs-contenido .tab-content { border-top: solid 1px #ccc;}
    
.sector5-l img { margin-bottom: 10px;}
.sector5-r img { margin-top: 10px;}
    
.relacionados .item-rel a:hover img { 
-webkit-transform: scale(1);
   -moz-transform: scale(1);
    -ms-transform: scale(1);
     -o-transform: scale(1);
        transform: scale(1);
}
.relacionados .item-rel a:hover h5 {
-webkit-transform: translatey(0); background-color: rgba(255,255,255,0.8);
   -moz-transform: translatey(0); background-color: rgba(255,255,255,0.8);
    -ms-transform: translatey(0); background-color: rgba(255,255,255,0.8);
     -o-transform: translatey(0); background-color: rgba(255,255,255,0.8);
        transform: translatey(0); background-color: rgba(255,255,255,0.8);
}

}