* {
    padding:0px;
    margin:0px;
}

html {
    width:100%;
    max-width:100%;
    padding:0px;
    margin:0px;
}


body {
    font-family: 'Roboto', sans-serif;
    width:100%;
    max-width:100%;
    padding:0px;
    margin:0px;
}

.user {
     z-index:1005;
}

.image {
    width:70px;
    margin:10px auto;
}

.sidebar {
    position: fixed;
    height: 100%;
    width: 0;
    top: 0;
    left: 0;
    z-index:1002;
    background-color: #ffffff;
    overflow-x: hidden;
    transition: 0.4s;
    box-sizing:border-box;
}

.sidebar .boton-cerrar {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    font-size: 2.5rem;
    display: block;
    padding: 0;
    line-height: 1.5rem;
    margin: 0;
    height: 32px;
    width: 32px;
    text-align: center;
    vertical-align: top;
}

.sidebar ul, .sidebar li{
    margin:0;
    padding:0;
    list-style:none inside;
}

.sidebar ul {
    margin: 0px auto;
    display: block;
    width: 100%;
    min-width:200px;
}

.sidebar a {
    color:#898787;
    height:45px;
    padding:5px 25px;
    display: block;
    font-size:1.3em;
    text-decoration: none;
    
}

.sidebar a:hover{
    color:#ff8027;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;

}

#contenido {
    transition: margin-left .4s;
    padding-top: 15px;
    padding-left:10px;
}

.abrir-cerrar {
    color: #2E88C7;
    font-size:1rem;   
}

#abrir {
    
}
#cerrar {
    display:none;
}

.overlay{
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: #000;
     z-index:1001;
     opacity:.75;
     -moz-opacity: 0.75;
     filter: alpha(opacity=75);
}

.actividad {
    margin:30px auto;
}

.activity {
    width:95%;
    margin:20px auto;
    height:120px;
    background-color:#ffffff;
    border-radius:5px;
    border-left:5px solid #ff8027;
}

footer{
    height:30px;
    background: rgba(255,162,48,1);
    background: -moz-linear-gradient(left, rgba(255,162,48,1) 0%, rgba(255,119,0,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,162,48,1)), color-stop(100%, rgba(255,119,0,1)));
    background: -webkit-linear-gradient(left, rgba(255,162,48,1) 0%, rgba(255,119,0,1) 100%);
    background: -o-linear-gradient(left, rgba(255,162,48,1) 0%, rgba(255,119,0,1) 100%);
    background: -ms-linear-gradient(left, rgba(255,162,48,1) 0%, rgba(255,119,0,1) 100%);
    background: linear-gradient(to right, rgba(255,162,48,1) 0%, rgba(255,119,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa230', endColorstr='#ff7700', GradientType=1 );
}

.icon-f {
    margin-right: 10px;
    font-size: 20px;
    color: #fff;
    display: block;
    float: left;
}


.icon-btn {
    font-size:4em;
    color:#ff9d58;
}

.icon-btn:hover {
    font-size:4em;
    color:rgba(252,113,0,1);
}

.panel {
    background-color:#f5f5f5;
    border-left:2px solid #dddddd;
    height:100%;
}

.menu {
    color:#cbcac9;
    height:100%;
}

.menu>ul>li {
    list-style:none;
    text-decoration:none;
    color:#b9b7b6;
    font-size:1.3em;
    padding:15px 0px;
}
.menu>ul>li:hover {
    list-style:none;
    text-decoration:none;
    color:#ff8027;
}

#imgprincipal {
     width: 78%;
     display: block;
     float: none;
     padding: 10px 0px 0px 80px;
}

.circle {
    border-radius:50%;
}

.icon-badge {
    font-size:2em;
    color:#ff9c56;
}

.icon-user {
    font-size:1em;
    color:#ff9c56;
    display:block;
    float:left;
    padding-top:15px;
    padding-left:5px;
}

.icon-badge:hover {
    color:rgba(252,113,0,1);
}

.badges{
    display:block;
    float:left;
    padding:25px 5px;
}

.badges:hover{
    color:rgba(252,113,0,1);
}

.line {
    background: rgba(252,113,0,1);
    background: -moz-linear-gradient(left, rgba(252,113,0,1) 0%, rgba(255,169,64,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(252,113,0,1)), color-stop(100%, rgba(255,169,64,1)));
    background: -webkit-linear-gradient(left, rgba(252,113,0,1) 0%, rgba(255,169,64,1) 100%);
    background: -o-linear-gradient(left, rgba(252,113,0,1) 0%, rgba(255,169,64,1) 100%);
    background: -ms-linear-gradient(left, rgba(252,113,0,1) 0%, rgba(255,169,64,1) 100%);
    background: linear-gradient(to right, rgba(252,113,0,1) 0%, rgba(255,169,64,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fc7100', endColorstr='#ffa940', GradientType=1 );
    width:100%;
    height:4px;
}

.line2 {
    background: rgba(252,113,0,1);
    background: -moz-linear-gradient(left, rgba(252,113,0,1) 0%, rgba(255,169,64,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(252,113,0,1)), color-stop(100%, rgba(255,169,64,1)));
    background: -webkit-linear-gradient(left, rgba(252,113,0,1) 0%, rgba(255,169,64,1) 100%);
    background: -o-linear-gradient(left, rgba(252,113,0,1) 0%, rgba(255,169,64,1) 100%);
    background: -ms-linear-gradient(left, rgba(252,113,0,1) 0%, rgba(255,169,64,1) 100%);
    background: linear-gradient(to right, rgba(252,113,0,1) 0%, rgba(255,169,64,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fc7100', endColorstr='#ffa940', GradientType=1 );
    width:100%;
    height:3px;
}

.title {
    display: block;
    float: left;
    margin:2% auto;
    font-size: 3em;
}

.azulb {
    background-color:#1b9dfc;
}
.rojo2 {
    background-color:#ff3f2c;
} 
.naranja2 {
    background-color:#ff8027;
} 
.azul22 {
    background-color:#1b9dfc;
} 
.verde2 {
    background-color:#42ac1d;
} 
.violeta2 {
    background-color:#8242e0;
}
.azul {
    color:#50b5ff;
    border-top: 40px solid #fff;
    border-bottom: 40px solid #fff;
    text-align:center;
    border-left: 30px solid transparent;
}

.azul:hover {
    color:#ffffff;
    border-top: 40px solid #50b5ff;
    border-bottom: 40px solid #50b5ff;    
    -webkit-transition-duration: 0.8s; /* Safari */
    transition-duration: 0.8s;
}

.rojo {
    color:#ff6758;
    border-top: 40px solid #fff;
    border-bottom: 40px solid #fff;
    text-align:center;
    border-left: 30px solid transparent;
}

.rojo:hover {
    color:#ffffff;
    border-top: 40px solid #ff7668;
    border-bottom: 40px solid #ff7668;    
    -webkit-transition-duration: 0.8s; /* Safari */
    transition-duration: 0.8s;
}

.naranja {
    color:#ff9d58;
    border-top: 40px solid #fff;
    border-bottom: 40px solid #fff;
    text-align:center;
    border-left: 30px solid transparent;
}

.naranja:hover {
    color:#ffffff;
    border-top: 40px solid #ff9d58;
    border-bottom: 40px solid #ff9d58;    
    -webkit-transition-duration: 0.8s; /* Safari */
    transition-duration: 0.8s;
}

.azul2 {
    color:#50b5ff;
    border-top: 40px solid #fff;
    border-bottom: 40px solid #fff;
    text-align:center;
    border-left: 30px solid transparent;
}

.azul2:hover {
    color:#ffffff;
    border-top: 40px solid #50b5ff;
    border-bottom: 40px solid #50b5ff;
    -webkit-transition-duration: 0.8s; /* Safari */
    transition-duration: 0.8s;
}

.verde {
    color:#369b13;
    border-top: 40px solid #fff;
    border-bottom: 40px solid #fff;
    text-align:center;
    border-left: 30px solid transparent;
}

.verde:hover {
    color:#ffffff;
    border-top: 40px solid #6dcc4c;
    border-bottom: 40px solid #6dcc4c;
    -webkit-transition-duration: 0.8s; /* Safari */
    transition-duration: 0.8s;
}

.violeta {
    color:#6a24d0;
    border-top: 40px solid #fff;
    border-bottom: 40px solid #fff;
    text-align:center;
    border-left: 30px solid transparent;
}

.violeta:hover {
    color:#ffffff;
    border-top: 40px solid #a76bff;
    border-bottom: 40px solid #a76bff;
    -webkit-transition-duration: 0.8s; /* Safari */
    transition-duration: 0.8s;
}
 
.icon-i {
    font-size:2.2em;
    margin-right:3%;
} 

.azul-i {
    color:#50b5ff;
}

.azul-i:hover {
    color:#168ce2;
    text-decoration:none;
}

.rojo-i {
    color:#ff6758;
}

.rojo-i:hover {
    color:#f3402f;
    text-decoration:none;
}

.naranja-i {
    color:#ff9d58;
}

.naranja-i:hover {
    color:#f27c28;
    text-decoration:none;
}

.verde-i {
    color:#5cd034;
}

.verde-i:hover {
    color: #369b13;
    text-decoration:none;
}

.morado-i {
    color:#8939ff;
}

.morado-i:hover {
    color:#6a24d0;
    text-decoration:none;
}

@media screen and (max-width: 1024px) {
    .azul, .rojo, .naranja, .azul2, .verde, .violeta {
        width: 19.2%;
        height: 0px;
        margin-left:-3%;
        display:block;
        float:left;
    }

    .azulb, .rojo2, .naranja2, .azul22, .verde2, .violeta2 {
        width: 19.6%;
        height: 5px;
        margin-left:-3%;
        display:block;
        float:left;
    }
    
    .divisionazul {
        width: 3.4%;
        height: 0px;
        margin-left:-2.9%;
        border-top: 40px solid #1b9dfc;
        border-bottom: 40px solid #1b9dfc;
        border-left: 30px solid transparent;
        display:block;
        float:left;
    }
    
    .divisionrojo {
        width: 3.4%;
        height: 0px;
        margin-left:-2.9%;
        border-top: 40px solid #ff3f2c;
        border-bottom: 40px solid #ff3f2c;
        border-left: 30px solid transparent;
        display:block;
        float:left;
    }
    
    .divisionnaranja {
        width: 3.4%;
        height: 0px;
        margin-left:-2.9%;
        border-top: 40px solid #ff8027;
        border-bottom: 40px solid #ff8027;
        border-left: 30px solid transparent;
        display:block;
        float:left;
    }
    
    .divisionverde {
        width: 3.4%;
        height: 0px;
        margin-left:-2.9%;
        border-top: 40px solid #369b13;
        border-bottom: 40px solid #369b13;
        border-left: 30px solid transparent;
        display:block;
        float:left;
    }
    
    .activado1 {
        color:#fff;
        border-top: 40px solid #50b5ff;
        border-bottom: 40px solid #50b5ff;
        border-left: 30px solid transparent;
        width: 19.2%;
        height: 0px;
        margin-left:-3%;
        display:block;
        text-align:center;
        float:left;
    }
    .activado2 {
        color:#fff;
        border-top: 40px solid #ff6758;
        border-bottom: 40px solid #ff6758;
        border-left: 30px solid transparent;
        width: 19.2%;
        height: 0px;
        margin-left:-3%;
        display:block;
        text-align:center;
        float:left;
    }
    .activado3 {
        color:#fff;
        border-top: 40px solid #ff9d58;
        border-bottom: 40px solid #ff9d58;
        border-left: 30px solid transparent;
        width: 19.2%;
        height: 0px;
        margin-left:-3%;
        display:block;
        text-align:center;
        float:left;
    }
    .activado4 {
        color:#fff;
        border-top: 40px solid #6dcc4c;
        border-bottom: 40px solid #6dcc4c;
        border-left: 30px solid transparent;
        width: 19.2%;
        height: 0px;
        margin-left:-3%;
        display:block;
        text-align:center;
        float:left;
    }
    .activado5 {
        color:#fff;
        border-top: 40px solid #a76bff;
        border-bottom: 40px solid #a76bff;
        border-left: 30px solid transparent;
        width: 19.2%;
        height: 0px;
        margin-left:-3%;
        display:block;
        text-align:center;
        float:left;
    }

    .icon-menu {
        font-size:1.6em;
        display:block;
        float:none;
        margin-bottom:5%;
        margin-top:-13%;
        margin-left:-15%;
    }

    .text-menu {
        font-size:1.1em;
        font-weight:200;
        margin-left:-15%;
    }
    
    .boton-cambiar {
        margin:0px auto;
        margin-top:11%;
        margin-bottom:5%;
        text-align:center;
        border-radius:15px;
        text-decoration:none;
        width:70%;
        font-size:1.1em;
        height:auto;
        color:#ffffff;
        background-color:#ff9d58;
    }

    .boton-cambiar:hover {
        background-color:#ff8027
    }
    
    .menu2 {
        margin-left:15%;
        text-align:left;
        color:#cbcac9;
        height:100%;
    }

    .menu2>ul>li {
        list-style:none;
        text-decoration:none;
        color:#b9b7b6;
        font-size:1.1em;
        padding:10px 0px;
    }
    
    .icon-i {
        font-size:1.8em;
        margin-right:2%;
    } 

    .number {
        font-size:1.8em;
    }
}

@media screen and (max-width: 1280px) {
    .azul, .rojo, .naranja, .azul2, .verde, .violeta {
        width: 19.2%;
        height: 0px;
        margin-left:-3%;
        display:block;
        float:left;
    }

    .azulb, .rojo2, .naranja2, .azul22, .verde2, .violeta2 {
        width: 19.6%;
        height: 3px;
        margin-left:-3%;
        display:block;
        float:left;
    }
    
    .divisionazul {
        width: 3.4%;
        height: 0px;
        margin-left:-2.9%;
        border-top: 40px solid #1b9dfc;
        border-bottom: 40px solid #1b9dfc;
        border-left: 30px solid transparent;
        display:block;
        float:left;
    }
    
    .divisionrojo {
        width: 3.4%;
        height: 0px;
        margin-left:-2.9%;
        border-top: 40px solid #ff3f2c;
        border-bottom: 40px solid #ff3f2c;
        border-left: 30px solid transparent;
        display:block;
        float:left;
    }
    
    .divisionnaranja {
        width: 3.4%;
        height: 0px;
        margin-left:-2.9%;
        border-top: 40px solid #ff8027;
        border-bottom: 40px solid #ff8027;
        border-left: 30px solid transparent;
        display:block;
        float:left;
    }
    
    .divisionverde {
        width: 3.4%;
        height: 0px;
        margin-left:-2.9%;
        border-top: 40px solid #369b13;
        border-bottom: 40px solid #369b13;
        border-left: 30px solid transparent;
        display:block;
        float:left;
    }
    
    .activado1 {
        color:#fff;
        border-top: 40px solid #50b5ff;
        border-bottom: 40px solid #50b5ff;
        border-left: 30px solid transparent;
        width: 19.2%;
        height: 0px;
        margin-left:-3%;
        text-align:center;
        display:block;
        float:left;
    }
    .activado2 {
        color:#fff;
        border-top: 40px solid #ff6758;
        border-bottom: 40px solid #ff6758;
        border-left: 30px solid transparent;
        width: 19.2%;
        height: 0px;
        margin-left:-3%;
        text-align:center;
        display:block;
        float:left;
    }
    .activado3 {
        color:#fff;
        border-top: 40px solid #ff9d58;
        border-bottom: 40px solid #ff9d58;
        border-left: 30px solid transparent;
        width: 19.2%;
        height: 0px;
        margin-left:-3%;
        text-align:center;
        display:block;
        float:left;
    }
    .activado4 {
        color:#fff;
        border-top: 40px solid #6dcc4c;
        border-bottom: 40px solid #6dcc4c;
        border-left: 30px solid transparent;
        width: 19.2%;
        height: 0px;
        margin-left:-3%;
        text-align:center;
        display:block;
        float:left;
    }
    .activado5 {
        color:#fff;
        border-top: 40px solid #a76bff;
        border-bottom: 40px solid #a76bff;
        border-left: 30px solid transparent;
        width: 19.2%;
        height: 0px;
        margin-left:-3%;
        text-align:center;
        display:block;
        float:left;
    }

    .icon-menu {
        font-size:1.6em;
        display:block;
        float:none;
        margin-bottom:3%;
        margin-top:-10%;
        margin-left:-15%;
    }

    .text-menu {
        font-size:1.1em;
        font-weight:200;
        margin-left:-15%;
    }
    
    .boton-cambiar {
        margin:0px auto;
        margin-top:11%;
        margin-bottom:5%;
        text-align:center;
        border-radius:15px;
        text-decoration:none;
        width:70%;
        font-size:1.1em;
        height:auto;
        color:#ffffff;
        background-color:#ff9d58;
    }

    .boton-cambiar:hover {
        background-color:#ff8027
    }
    
    .menu2 {
        margin-left:15%;
        text-align:left;
        color:#cbcac9;
        height:100%;
    }

    .menu2>ul>li {
        list-style:none;
        text-decoration:none;
        color:#b9b7b6;
        font-size:1.1em;
        padding:10px 0px;
    }
    
    .icon-i {
        font-size:1.8em;
        margin-right:2%;
    } 

    .number {
        font-size:1.8em;
    }
}

@media screen and (max-width: 1366px) {
    .azul, .rojo, .naranja, .azul2, .verde, .violeta {
        width: 19.2%;
        height: 0px;
        margin-left:-3%;
        display:block;
        float:left;
    }    

    .azulb, .rojo2, .naranja2, .azul22, .verde2, .violeta2 {
        width: 19.6%;
        height: 10px;
        margin-left:-3%;
        display:block;
        float:left;
    }
    
    .divisionazul {
        width: 3.4%;
        height: 0px;
        margin-left:-2.9%;
        border-top: 40px solid #1b9dfc;
        border-bottom: 40px solid #1b9dfc;
        border-left: 30px solid transparent;
        display:block;
        float:left;
    }
    
    .divisionrojo {
        width: 3.2%;
        height: 0px;
        margin-left:-2.9%;
        border-top: 40px solid #ff3f2c;
        border-bottom: 40px solid #ff3f2c;
        border-left: 30px solid transparent;
        display:block;
        float:left;
    }
    
    .divisionnaranja {
        width: 3.4%;
        height: 0px;
        margin-left:-2.9%;
        border-top: 40px solid #ff8027;
        border-bottom: 40px solid #ff8027;
        border-left: 30px solid transparent;
        display:block;
        float:left;
    }
    
    .divisionverde {
        width: 3.4%;
        height: 0px;
        margin-left:-2.9%;
        border-top: 40px solid #369b13;
        border-bottom: 40px solid #369b13;
        border-left: 30px solid transparent;
        display:block;
        float:left;
    }
    
    .division1 {
        width: 3.4%;
        height: 0px;
        margin-left:-2.9%;
        display:block;
        float:left;
    }
    
    .activado1 {
        color:#fff;
        border-top: 40px solid #50b5ff;
        border-bottom: 40px solid #50b5ff;
        border-left: 30px solid transparent;
        width: 19.2%;
        height: 0px;
        margin-left:-3%;
        text-align:center;
        display:block;
        float:left;
    }
    .activado2 {
        color:#fff;
        border-top: 40px solid #ff6758;
        border-bottom: 40px solid #ff6758;
        border-left: 30px solid transparent;
        width: 19.2%;
        height: 0px;
        margin-left:-3%;
        text-align:center;
        display:block;
        float:left;
    }
    .activado3 {
        color:#fff;
        border-top: 40px solid #ff9d58;
        border-bottom: 40px solid #ff9d58;
        border-left: 30px solid transparent;
        width: 19.2%;
        height: 0px;
        margin-left:-3%;
        text-align:center;
        display:block;
        float:left;
    }
    .activado4 {
        color:#fff;
        border-top: 40px solid #6dcc4c;
        border-bottom: 40px solid #6dcc4c;
        border-left: 30px solid transparent;
        width: 19.2%;
        height: 0px;
        margin-left:-3%;
        text-align:center;
        display:block;
        float:left;
    }
    .activado5 {
        color:#fff;
        border-top: 40px solid #a76bff;
        border-bottom: 40px solid #a76bff;
        border-left: 30px solid transparent;
        width: 19.2%;
        height: 0px;
        margin-left:-3%;
        text-align:center;
        display:block;
        float:left;
    }

    .icon-menu {
        font-size:1.6em;
        display:block;
        float:none;
        margin-bottom:3%;
        margin-top:-10%;
        margin-left:-15%;
    }

    .text-menu {
        font-size:1.1em;
        font-weight:200;
        margin-left:-15%;
    }
    
    .boton-cambiar {
        margin:0px auto;
        margin-top:11%;
        margin-bottom:5%;
        text-align:center;
        border-radius:15px;
        text-decoration:none;
        width:70%;
        font-size:1.1em;
        height:auto;
        color:#ffffff;
        background-color:#ff9d58;
    }

    .boton-cambiar:hover {
        background-color:#ff8027
    }
    
    .menu2 {
        margin-left:15%;
        text-align:left;
        color:#cbcac9;
        height:100%;
    }

    .menu2>ul>li {
        list-style:none;
        text-decoration:none;
        color:#b9b7b6;
        font-size:1.1em;
        padding:10px 0px;
    }
    
    .icon-i {
        font-size:2em;
        margin-right:2%;
    } 

    .number {
        font-size:2em;
    }
}

@media screen and (max-width: 1440px) {
    .azul, .rojo, .naranja, .azul2, .verde, .violeta {
        width: 19.2%;
        height: 0px;
        margin-left:-3%;
        display:block;
        float:left;
    }

    .azulb, .rojo2, .naranja2, .azul22, .verde2, .violeta2 {
        width: 19.6%;
        height: 10px;
        margin-left:-3%;
        display:block;
        float:left;
    }
    
    .divisionazul {
        width: 3.4%;
        height: 0px;
        margin-left:-2.9%;
        border-top: 40px solid #1b9dfc;
        border-bottom: 40px solid #1b9dfc;
        border-left: 30px solid transparent;
        display:block;
        float:left;
    }
    
    .divisionrojo {
        width: 3.4%;
        height: 0px;
        margin-left:-2.9%;
        border-top: 40px solid #ff3f2c;
        border-bottom: 40px solid #ff3f2c;
        border-left: 30px solid transparent;
        display:block;
        float:left;
    }
    
    .divisionnaranja {
        width: 3.4%;
        height: 0px;
        margin-left:-2.9%;
        border-top: 40px solid #ff8027;
        border-bottom: 40px solid #ff8027;
        border-left: 30px solid transparent;
        display:block;
        float:left;
    }
    
    .divisionverde {
        width: 3.4%;
        height: 0px;
        margin-left:-2.9%;
        border-top: 40px solid #369b13;
        border-bottom: 40px solid #369b13;
        border-left: 30px solid transparent;
        display:block;
        float:left;
    }
    
    .division1 {
        width: 3.4%;
        height: 0px;
        margin-left:-3%;
        display:block;
        float:left;
    }
    
    .activado1 {
        color:#fff;
        border-top: 40px solid #50b5ff;
        border-bottom: 40px solid #50b5ff;
        border-left: 30px solid transparent;
        width: 19.2%;
        height: 0px;
        margin-left:-3%;
        text-align:center;
        display:block;
        float:left;
    }
    .activado2 {
        color:#fff;
        border-top: 40px solid #ff6758;
        border-bottom: 40px solid #ff6758;
        border-left: 30px solid transparent;
        width: 19.2%;
        height: 0px;
        margin-left:-3%;
        text-align:center;
        display:block;
        float:left;
    }
    .activado3 {
        color:#fff;
        border-top: 40px solid #ff9d58;
        border-bottom: 40px solid #ff9d58;
        border-left: 30px solid transparent;
        width: 19.2%;
        height: 0px;
        margin-left:-3%;
        text-align:center;
        display:block;
        float:left;
    }
    .activado4 {
        color:#fff;
        border-top: 40px solid #6dcc4c;
        border-bottom: 40px solid #6dcc4c;
        border-left: 30px solid transparent;
        width: 19.2%;
        height: 0px;
        margin-left:-3%;
        text-align:center;
        display:block;
        float:left;
    }
    .activado5 {
        color:#fff;
        border-top: 40px solid #a76bff;
        border-bottom: 40px solid #a76bff;
        border-left: 30px solid transparent;
        width: 19.2%;
        height: 0px;
        margin-left:-3%;
        text-align:center;
        display:block;
        float:left;
    }

    .icon-menu {
        font-size:1.6em;
        display:block;
        float:none;
        margin-bottom:3%;
        margin-top:-10%;
        margin-left:-15%;
    }

    .text-menu {
        font-size:1.1em;
        font-weight:200;
        margin-left:-15%;
    }
    
    .boton-cambiar {
        margin:0px auto;
        margin-top:11%;
        margin-bottom:5%;
        text-align:center;
        border-radius:15px;
        text-decoration:none;
        width:55%;
        font-size:1em;
        height:auto;
        color:#ffffff;
        background-color:#ff9d58;
    }

    .boton-cambiar:hover {
        background-color:#ff8027
    }
    
    .menu2 {
        margin-left:15%;
        text-align:left;
        color:#cbcac9;
        height:100%;
    }

    .menu2>ul>li {
        list-style:none;
        text-decoration:none;
        color:#b9b7b6;
        font-size:1.1em;
        padding:10px 0px;
    }
    
    .icon-i {
        font-size:1.9em;
        margin-right:2%;
    } 

    .number {
        font-size:1.9em;
    }
}

@media screen and (max-width: 1600px) {
    .azul, .rojo, .naranja, .azul2, .verde, .violeta {
        width: 19.2%;
        height: 0px;
        margin-left:-3%;
        display:block;
        float:left;
    }

    .azulb, .rojo2, .naranja2, .azul22, .verde2, .violeta2 {
        width: 19.6%;
        height: 10px;
        margin-left:-3%;
        display:block;
        float:left;
    }
    
    .divisionazul {
        width: 3.4%;
        height: 0px;
        margin-left:-2.9%;
        border-top: 40px solid #1b9dfc;
        border-bottom: 40px solid #1b9dfc;
        border-left: 30px solid transparent;
        display:block;
        float:left;
    }
    
    .divisionrojo {
        width: 3.4%;
        height: 0px;
        margin-left:-2.9%;
        border-top: 40px solid #ff3f2c;
        border-bottom: 40px solid #ff3f2c;
        border-left: 30px solid transparent;
        display:block;
        float:left;
    }
    
    .divisionnaranja {
        width: 3.4%;
        height: 0px;
        margin-left:-2.9%;
        border-top: 40px solid #ff8027;
        border-bottom: 40px solid #ff8027;
        border-left: 30px solid transparent;
        display:block;
        float:left;
    }
    
    .divisionverde {
        width: 3.2%;
        height: 0px;
        margin-left:-2.9%;
        border-top: 40px solid #369b13;
        border-bottom: 40px solid #369b13;
        border-left: 30px solid transparent;
        display:block;
        float:left;
    }
    
    .division1 {
        width: 3.4%;
        height: 0px;
        margin-left:-3%;
        display:block;
        float:left;
    }
    
    .activado1 {
        color:#fff;
        border-top: 40px solid #50b5ff;
        border-bottom: 40px solid #50b5ff;
        border-left: 30px solid transparent;
        width: 19.2%;
        height: 0px;
        margin-left:-3%;
        text-align:center;
        display:block;
        float:left;
    }
    .activado2 {
        color:#fff;
        border-top: 40px solid #ff6758;
        border-bottom: 40px solid #ff6758;
        border-left: 30px solid transparent;
        width: 19.2%;
        height: 0px;
        margin-left:-3%;
        text-align:center;
        display:block;
        float:left;
    }
    .activado3 {
        color:#fff;
        border-top: 40px solid #ff9d58;
        border-bottom: 40px solid #ff9d58;
        border-left: 30px solid transparent;
        width: 19.2%;
        height: 0px;
        margin-left:-3%;
        text-align:center;
        display:block;
        float:left;
    }
    .activado4 {
        color:#fff;
        border-top: 40px solid #6dcc4c;
        border-bottom: 40px solid #6dcc4c;
        border-left: 30px solid transparent;
        width: 19.2%;
        height: 0px;
        margin-left:-3%;
        text-align:center;
        display:block;
        float:left;
    }
    .activado5 {
        color:#fff;
        border-top: 40px solid #a76bff;
        border-bottom: 40px solid #a76bff;
        border-left: 30px solid transparent;
        width: 19.2%;
        height: 0px;
        margin-left:-3%;
        text-align:center;
        display:block;
        float:left;
    }

    .icon-menu {
        font-size:1.7em;
        display:block;
        float:none;
        margin-bottom:3%;
        margin-top:-9%;
        margin-left:-15%;
    }

    .text-menu {
        font-size:1.2em;
        font-weight:200;
        margin-left:-15%;
    }
    
    .boton-cambiar {
        margin:0px auto;
        margin-top:11%;
        margin-bottom:5%;
        text-align:center;
        border-radius:15px;
        text-decoration:none;
        width:55%;
        font-size:1em;
        height:auto;
        color:#ffffff;
        background-color:#ff9d58;
    }

    .boton-cambiar:hover {
        background-color:#ff8027
    }
    
    .menu2 {
        margin-left:15%;
        text-align:left;
        color:#cbcac9;
        height:100%;
    }

    .menu2>ul>li {
        list-style:none;
        text-decoration:none;
        color:#b9b7b6;
        font-size:1.1em;
        padding:10px 0px;
    }
    
    .icon-i {
        font-size:1.9em;
        margin-right:2%;
    } 

    .number {
        font-size:1.9em;
    }
}


@media screen and (max-width: 1680px) {
    .azul, .rojo, .naranja, .azul2, .verde, .violeta {
        width: 19.2%;
        height: 0px;
        margin-left:-3%;
        display:block;
        float:left;
    }

    .azulb, .rojo2, .naranja2, .azul22, .verde2, .violeta2 {
        width: 19.6%;
        height: 10px;
        margin-left:-3%;
        display:block;
        float:left;
    }
    
    .divisionazul {
        width: 3.4%;
        height: 0px;
        margin-left:-2.9%;
        border-top: 40px solid #1b9dfc;
        border-bottom: 40px solid #1b9dfc;
        border-left: 30px solid transparent;
        display:block;
        float:left;
    }
    
    .divisionrojo {
        width: 3.4%;
        height: 0px;
        margin-left:-2.9%;
        border-top: 40px solid #ff3f2c;
        border-bottom: 40px solid #ff3f2c;
        border-left: 30px solid transparent;
        display:block;
        float:left;
    }
    
    .divisionnaranja {
        width: 3.4%;
        height: 0px;
        margin-left:-2.9%;
        border-top: 40px solid #ff8027;
        border-bottom: 40px solid #ff8027;
        border-left: 30px solid transparent;
        display:block;
        float:left;
    }
    
    .divisionverde {
        width: 3.4%;
        height: 0px;
        margin-left:-2.9%;
        border-top: 40px solid #369b13;
        border-bottom: 40px solid #369b13;
        border-left: 30px solid transparent;
        display:block;
        float:left;
    }
    
    .division1 {
        width: 3.4%;
        height: 0px;
        margin-left:-3%;
        display:block;
        float:left;
    }
    
    .activado1 {
        color:#fff;
        border-top: 40px solid #50b5ff;
        border-bottom: 40px solid #50b5ff;
        border-left: 30px solid transparent;
        width: 19.2%;
        height: 0px;
        margin-left:-3%;
        text-align:center;
        display:block;
        float:left;
    }
    .activado2 {
        color:#fff;
        border-top: 40px solid #ff6758;
        border-bottom: 40px solid #ff6758;
        border-left: 30px solid transparent;
        width: 19.2%;
        height: 0px;
        margin-left:-3%;
        text-align:center;
        display:block;
        float:left;
    }
    .activado3 {
        color:#fff;
        border-top: 40px solid #ff9d58;
        border-bottom: 40px solid #ff9d58;
        border-left: 30px solid transparent;
        width: 19.2%;
        height: 0px;
        margin-left:-3%;
        text-align:center;
        display:block;
        float:left;
    }
    .activado4 {
        color:#fff;
        border-top: 40px solid #6dcc4c;
        border-bottom: 40px solid #6dcc4c;
        border-left: 30px solid transparent;
        width: 19.2%;
        height: 0px;
        margin-left:-3%;
        text-align:center;
        display:block;
        float:left;
    }
    .activado5 {
        color:#fff;
        border-top: 40px solid #a76bff;
        border-bottom: 40px solid #a76bff;
        border-left: 30px solid transparent;
        width: 19.2%;
        height: 0px;
        margin-left:-3%;
        text-align:center;
        display:block;
        float:left;
    }

    .icon-menu {
        font-size:1.7em;
        display:block;
        float:none;
        margin-bottom:3%;
        margin-top:-9%;
        margin-left:-15%;
    }

    .text-menu {
        font-size:1.2em;
        font-weight:200;
        margin-left:-15%;
    }
    
    .boton-cambiar {
        margin:0px auto;
        margin-top:11%;
        margin-bottom:5%;
        text-align:center;
        border-radius:15px;
        text-decoration:none;
        width:55%;
        font-size:1em;
        height:auto;
        color:#ffffff;
        background-color:#ff9d58;
    }

    .boton-cambiar:hover {
        background-color:#ff8027
    }
    
    .menu2 {
        margin-left:15%;
        text-align:left;
        color:#cbcac9;
        height:100%;
    }

    .menu2>ul>li {
        list-style:none;
        text-decoration:none;
        color:#b9b7b6;
        font-size:1.1em;
        padding:10px 0px;
    }
    
    .icon-i {
        font-size:1.9em;
        margin-right:2%;
    } 

    .number {
        font-size:1.9em;
    }
}

@media screen and (max-width: 1920px) {
    .azul, .rojo, .naranja, .azul2, .verde, .violeta {
        width: 19.2%;
        height: 0px;
        margin-left:-3%;
        display:block;
        float:left;
    }

    .azulb, .rojo2, .naranja2, .azul22, .verde2, .violeta2 {
        width: 19.6%;
        height: 3px;
        margin-left:-3%;
        display:block;
        float:left;
    }
    
    .divisionazul {
        width: 3.4%;
        height: 0px;
        margin-left:-2.9%;
        border-top: 40px solid #1b9dfc;
        border-bottom: 40px solid #1b9dfc;
        border-left: 30px solid transparent;
        display:block;
        float:left;
    }
    
    .divisionrojo {
        width: 3.4%;
        height: 0px;
        margin-left:-2.9%;
        border-top: 40px solid #ff3f2c;
        border-bottom: 40px solid #ff3f2c;
        border-left: 30px solid transparent;
        display:block;
        float:left;
    }
    
    .divisionnaranja {
        width: 3.4%;
        height: 0px;
        margin-left:-2.9%;
        border-top: 40px solid #ff8027;
        border-bottom: 40px solid #ff8027;
        border-left: 30px solid transparent;
        display:block;
        float:left;
    }
    
    .divisionverde {
        width: 3.4%;
        height: 0px;
        margin-left:-2.9%;
        border-top: 40px solid #369b13;
        border-bottom: 40px solid #369b13;
        border-left: 30px solid transparent;
        display:block;
        float:left;
    }
    
    .activado1 {
        color:#fff;
        border-top: 40px solid #50b5ff;
        border-bottom: 40px solid #50b5ff;
        border-left: 30px solid transparent;
        width: 19.3%;
        height: 0px;
        margin-left:-3%;
        text-align:center;
        display:block;
        float:left;
    }
    .activado2 {
        color:#fff;
        border-top: 40px solid #ff6758;
        border-bottom: 40px solid #ff6758;
        border-left: 30px solid transparent;
        width: 19.2%;
        height: 0px;
        margin-left:-3%;
        text-align:center;
        display:block;
        float:left;
    }
    .activado3 {
        color:#fff;
        border-top: 40px solid #ff9d58;
        border-bottom: 40px solid #ff9d58;
        border-left: 30px solid transparent;
        width: 19.2%;
        height: 0px;
        margin-left:-3%;
        text-align:center;
        display:block;
        float:left;
    }
    .activado4 {
        color:#fff;
        border-top: 40px solid #6dcc4c;
        border-bottom: 40px solid #6dcc4c;
        border-left: 30px solid transparent;
        width: 19.2%;
        height: 0px;
        margin-left:-3%;
        text-align:center;
        display:block;
        float:left;
    }
    .activado5 {
        color:#fff;
        border-top: 40px solid #a76bff;
        border-bottom: 40px solid #a76bff;
        border-left: 30px solid transparent;
        width: 19.2%;
        height: 0px;
        margin-left:-3%;
        text-align:center;
        display:block;
        float:left;
    }

    .icon-menu {
        font-size:1.7em;
        display:block;
        float:none;
        margin-bottom:3%;
        margin-top:-7%;
        margin-left:-15%;
    }

    .text-menu {
        font-size:1.2em;
        font-weight:200;
        margin-left:-15%;
    }
    
    .boton-cambiar {
        margin:0px auto;
        margin-top:11%;
        margin-bottom:5%;
        text-align:center;
        border-radius:15px;
        text-decoration:none;
        width:55%;
        font-size:1em;
        height:auto;
        color:#ffffff;
        background-color:#ff9d58;
    }

    .boton-cambiar:hover {
        background-color:#ff8027
    }
    
    .menu2 {
        margin-left:15%;
        text-align:left;
        color:#cbcac9;
        height:100%;
    }

    .menu2>ul>li {
        list-style:none;
        text-decoration:none;
        color:#b9b7b6;
        font-size:1.1em;
        padding:10px 0px;
    }
    
    .icon-i {
        font-size:1.9em;
        margin-right:2%;
    } 

    .number {
        font-size:1.9em;
    }
}