html,
body {
    font-size: 13px;
    font-family: 'stiluregular', sans-serif;!important;

}

body{
    background: url(../img/home-bg.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
}

/*-------------------------------*/
/* titulos h */
/*-------------------------------*/

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-family: 'stilubold', sans-serif;!important;
}

/*-------------------------------*/
/* parrafos */
/*-------------------------------*/

p {
    font-size: 1.1em;
    line-height: 1.2em;
    font-weight: 300;
    font-family: 'stilulight', sans-serif;!important;
}

/*-------------------------------*/
/* header */
/*-------------------------------*/
header{
    background:#2BACE3;
    width: 100%;
    position: relative;
    z-index: 1;
}
header img{
    margin: 20px 0;
}
header:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../img/bg-header.png);
    background-position: right;
    background-repeat: no-repeat;
    top: 0;
    right: 0;
    opacity: .2;
    background-size: 400px;
    z-index: -1;
}

/*-------------------------------*/
/* nav */
/*-------------------------------*/
nav{
    padding-right: 0!important;
}
.indices .navbar-brand{
    width: 140px;
    overflow: hidden;
    position: relative;
}
@media (max-width:1024px) {
    .indices .navbar-brand{
        width: 90px;
        overflow: hidden;
        position: relative;
    }
}
@media (max-width:480px) {
    .indices .navbar-brand{
        width: 140px;
        overflow: hidden;
        position: relative;
    }
}
.indices .navbar-brand:after{
    content: '';
    position: absolute;
    width: 200px;
    height: 1px;
    top: 50%;
    margin-top: -1px;
    left: 75px;
    background:#2BACE3
}
.ejes .navbar-brand{
    width: 250px;
    overflow: hidden;
    position: relative;
}
.ejes .navbar-brand:after{
    content: '';
    position: absolute;
    width: 200px;
    height: 1px;
    top: 50%;
    margin-top: -1px;
    left: 60px;
    background:#2BACE3
}
.indices .nav-link,
.ejes .nav-link{
    color:#2BACE3;
}
.indices .navbar-nav, .ejes .navbar-nav{
    width: 100%;
}
.indices .navbar-nav .nav-item{
    width: 50%;
    text-align: center;
    position: relative;
    padding: 0;
    margin: 0;
}
.ejes .navbar-nav .nav-item{
    width: 25%;
    text-align: center;
    position: relative;
    margin: 0;
    padding: 0;
}
@media (max-width:768px) {
    .ejes{
        padding-left: 0!important;
    }
}
@media (max-width:1024px) {
    nav{
        padding-right: 0!important;
        margin: 0;
        font-size: 0.8em;
    }
}
.indices .navbar-nav .nav-item:after,
.ejes .navbar-nav .nav-item:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 6px;
    left: 0;
    -webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.indices .navbar-nav .nav-item.active a{
    color: #002D73;
}
.ejes .navbar-nav .nav-item.active a{
    color: #fff;
}
.indices .navbar-nav .nav-item.active:after,
.indices .navbar-nav .nav-item:hover:after{
    background: var(--azul-oscuro);
}
.ejes .navbar-nav .nav-item.active:after,
.ejes .navbar-nav .nav-item:hover:after{
    background: var(--azul-claro);
}
@media (max-width:1024px) {
    .indices .navbar-nav .nav-item.active:after,
    .indices .navbar-nav .nav-item:hover:after,
    .indices .navbar-nav .nav-item:after{
        margin-top: 2px
    }
}
.ejes .navbar-nav .nav-item:hover:after{
    background: #2BACE3;
}

footer nav{
    height: 70px;
}
footer nav img{
    height: 45px;
}
footer nav img.creategas{
    max-height: 30px;
    width: 130px
}
@media (max-width:720px) {
    footer nav{
        height: 40px;
    }
    footer nav img{
        height: 30px;
    }
}

.drop{
    height: 40px;
    background: #fff;
    line-height: 40px;
}
.drop .dropdown{
    color: #002D73;
    font-size: 1.5em
}
.drop .total{
    background: #a0a0a0;
    padding-left: 40px;
    padding-right: 40px;
    font-family: 'stilusemibold_oblique', sans-serif;
    font-size: 1.7em;
    color: #fff;
    line-height: 40px;
}
@media (max-width:480px) {
    .drop .total{
    padding-left: 5px;
    padding-right: 5px;
    }
}
.drop .total:before{
    content: 'Total ';
    color: #fff;
    font-family: 'stiluitalic', sans-serif;!important;
    font-size: .6em;
    line-height: 40px;
    position: relative;
    top: -5px;

}
.drop .btn{
    height: 40px;
    width: 40px;
    border-radius: 0;
    padding: 0;
    margin-top: -8px;
}

.drop .big-menu{
    background: #E5EAEF;
    border-radius: 0;
    border: 0;
    box-shadow: 10px 10px rgba(172, 176, 206, 0.40);
    line-height: 1.3em
}
.big-menu .dropdown-item{
    color: #002D73;
}
.big-menu .dropdown-item.active{
    color: #002D73;
    background: var( --azul-claro);
    color: #fff;
}

/*-------------------------------*/
/* home */
/*-------------------------------*/
main.home {
  height: calc(100vh - 250px);
}
@media (max-width:480px) {
    main.home {
        height: calc(100vh - 60px);
    }
}
.vertical-center {
  display:flex;
  align-items:center;
}
main.eje {
  margin-bottom: 70px;
}
/*-------------------------------*/
/* Ejes */
/*-------------------------------*/

.eje p{
    font-size: 1.4em;
    letter-spacing: .04em;
}

#temas a .link{
    padding: 15px;
    font-size: 1.3em;
    border-bottom: 1px solid var( --azul-claro);
    color: var( --azul-claro);
    font-family: 'stilubold', sans-serif;
    -webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
    font-weight: 700;
}
#temas a.collapsed .link{
    color:  var( --gris-oscuro);
    font-family: 'stiluregular', sans-serif;!important;
    border-bottom: 1px solid #ccc;
}
#temas .tema{
    position: relative;
    border-left: 1px solid var( --azul-claro);
}
#temas .tema .row{
    padding-top: 30px;
}
#temas .tema:after{
    content: '';
    position: absolute;
    border-top: 9px solid var( --azul-claro);
    border-left: 9px solid var( --azul-claro);
    width: 100px;
    height: 80%;
    max-height: 100px;
    top: 0px;
    left: 0;
}
#temas p{
    font-size: 1em;
    margin-bottom: 5px;
}
#temas .progress {
    border: 1px solid #e5eaef;
    background: #fff;
    text-align: left;
    height: 15px;
    line-height: 15px;

}
#temas .progress .progress-bar {
    border-radius: 2px;
    padding-left: 3px;
    height: 15px;
    line-height: 15px;
}
#temas .bg-success, #temas .v{
    background: #8cc63f!important;
}
#temas .bg-warning, #temas .a{
    background: #fbae17!important;
}
#temas .bg-danger, #temas .r{
    background: #f41d1c!important;
}