/*sobre escribir*/

#animaciones {
    position: relative;
    min-height: 500px;
}

#animacion-nico {
    background: url(../images/nicoHome.png);
    position: absolute;
    bottom: 200px;
    left: 150px;
    width: 124px;
    height: 213px;
}

#animacion-anita {
    background: url(../images/anitaHome.png);
    position: absolute;
    bottom: 200px;
    left: 350px;
    width: 109px;
    height: 206px;
}

#animacion-bartolo {
    background: url(../images/bartoloHome.png);
    position: absolute;
    bottom: 180px;
    right: 50px;
    width: 202px;
    height: 255px;
}

#animacion-tomas {
    background: url(../images/tomasHome.png);
    position: absolute;
    bottom: 200px;
    left: 250px;
    width: 102px;
    height: 230px;
}

#box-flotantes {
    clear: both;
}

#bartolo2 {
    position: absolute;
    left: 8%;
}

#nico2 {
    position: absolute;
    width: 150px;
    left: 18%;
    top: -137px;
}

#tomas2 {
    position: absolute;
    width: 150px;
    left: 25%;
    top: -169px;
}

#anita2 {
    position: absolute;
    width: 150px;
    left: 25%;
}

.img-flotante {
    float: left;
    position: relative;
    top: -154px;
    left: 26px;
    clear: both;
    z-index: 0;
}


/*.img-flotante {
    float: left;
    position: absolute;
    bottom: -354px;
    right: 10%;
}*/

.titulo-personajes {
    color: #fe6614;
    font-family: FuturaStd-CondensedExtraBd;
    font-size: 24px;
    text-shadow: -2px -2px 1px #eec92c, 2px 2px 1px #eec92c, -2px 2px 1px #eec92c, 2px -2px 1px #eec92c;
}

.titulo {
    color: #fe6614;
    font-family: FuturaStd-CondensedExtraBd;
    font-size: 24px;
    text-shadow: -2px -2px 1px #eec92c, 2px 2px 1px #eec92c, -2px 2px 1px #eec92c, 2px -2px 1px #eec92c;
}

.img-apaisada-size {
    height: 200px;
}

.serietv {
    margin-bottom: 25px;
}

.btn-menu:active,
.btn-menu:visited,
.btn-menu:focus {
    background-color: #ff9900;
    border: 2px solid #ff9900;
    box-shadow: none;
    outline: none;
}

.btn-menu:hover {
    background-color: #ff7800;
    border: 2px solid #ff9900;
    box-shadow: none;
    outline: none;
}

.btn-success {
    border-radius: 5px;
    background-color: #ff9900;
    border: 2px solid #ff9900;
    margin-top: 10px;
    margin-bottom: 40px;
    width: 100%;
    height: 50px;
    font-family: arial;
    transition: all 0.5s;
}

.btn-success:active:focus {
    background-color: #ff9900;
    border: 2px solid #ff9900;
    box-shadow: none;
    outline: none;
}

.nav>li>a:focus,
.nav>li>a:hover {
    background-color: rgba(238, 238, 238, 0);
}

.navbar {
    position: relative;
    min-height: 50px;
    margin-bottom: -3px;
    border: 1px solid transparent;
}


/* Generales */

@font-face {
    font-family: 'FuturaStd-CondensedExtraBd';
    src: url('../fonts/FuturaStd-CondensedExtraBd.eot?#iefix') format('embedded-opentype'), url('../fonts/FuturaStd-CondensedExtraBd.otf') format('opentype'), url('../fonts/FuturaStd-CondensedExtraBd.woff') format('woff'), url('../fonts/FuturaStd-CondensedExtraBd.ttf') format('truetype'), url('../fonts/FuturaStd-CondensedExtraBd.svg#FuturaStd-CondensedExtraBd') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
    background-image: url("../images/fondo_m@2x.jpg");
    background-size: cover;
}

.box {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 5px;
    padding-top: 13px;
    padding-bottom: 25px;
    padding-left: 25px;
    padding-right: 25px;
    margin-top: 40px;
    margin-bottom: 40px;
}


/*.img-apaisada {
    margin-bottom: 25px;
}*/

.img-apaisada {
    /*background-image: url("../images/diferentes_caras_m@2x.png");*/
    background-size: cover;
    width: 100%;
    min-height: 60px;
    margin-bottom: 25px;
}

.img-apaisada-m2 {
    width: 100%;
    margin-bottom: 25px;
    position: relative;
    border: solid 5px white;
    border-radius: 3px;
    background-color: #ffffff;
}

.img-apaisada-m2 a img {
    transition: all 0.5s;
}

.img-apaisada-m2 a:hover img {
    opacity: 0.5
}

.img-apaisada-m3 {
    width: 100%;
    margin-bottom: 25px;
    position: relative;
    border: solid 5px white;
    border-radius: 3px;
    background-color: #ffffff;
}

.img-apaisada-m3 a img {
    transition: all 0.5s;
}

.img-apaisada-m3 a:hover img {
    opacity: 0.5
}

.img-apaisada-m4 {
    width: 100%;
    margin-bottom: 25px;
    position: relative;
    border: solid 5px white;
    border-radius: 3px;
    background-color: #ffffff;
}

.nombre-actividad {
    background-color: #ff9900;
    padding-bottom: 14px;
    padding-right: 7px;
    height: 16px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    text-align: right;
    color: white;
    font-size: 9pt;
}

.nombre-actividad2 {
    background-color: #ff9900;
    padding-bottom: 24px;
    padding-right: 7px;
    height: 16px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    text-align: right;
    color: white;
    font-size: 12pt;
}


/*
.nombre-actividad p {
    text-align: right;
    color: #ffffff;
    position: absolute;
    bottom: -13px;
    left: 0px;
    right: 3px;
}*/


/* Menu */

.menu {
    margin-top: 200px;
    background-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0px 0px 0px 13px rgba(255, 255, 255, 0.3);
    z-index: 95;
}

.menu a {
    color: #fe6614;
    font-family: FuturaStd-CondensedExtraBd;
    font-size: 16px;
    text-align: center;
    text-transform: uppercase;
}

.menu ul {
    margin-left: 80px;
}

.menu.closed ul {
    height: 40px;
    overflow: hidden;
    transition: all 0.5s;
}

.menu.open ul {
    height: 395px;
    overflow: hidden;
    transition: all 0.5s;
}

.menu2 a {
    color: #fe6614;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 13px;
    text-align: center;
    text-transform: uppercase;
    margin-top: -17px;
}

.menu2 a:hover, a:active, a:focus{
    text-shadow: none;
    color: #6389CD;;
}

a:active,
a:hover,
a:focus {
    color: #ffc327;
    text-shadow: -2px -2px 1px #fe6614, 2px 2px 1px #fe6614, -2px 2px 1px #fe6614, 2px -2px 1px #fe6614;
    background-color: rgba(238, 238, 238, 0);
    box-shadow: none;
    text-decoration: none;
}

footer a:hover {
    text-shadow: none;
}

.brand {
    position: absolute !important;
    top: -155px;
    left: 50%;
    margin-left: -90px;
    z-index: 25;
}

.botones-sociales {
    position: relative;
    top: -12px;
}


/* Footer */

footer {
    background-color: #c1a06c;
    padding: 40px 0;
}

.bartoloayuda span {
    padding-top: 8px;
}


/*
footer .logos img{
    margin-top: 10px;
}*/

footer h5 {
    color: #ffffff;
}

footer h5 img {
    float: left;
    padding-top: 2px;
}

footer h5 span {
    margin-left: 40px;
    display: block;
    min-height: 40px;
}


/*
    #animacion-tomas2 {
        position: absolute;
        bottom: 50%;
        left: 25%;
        width: 51px;
        height: 115px;
    }*/

/*media Movil Phone*/

@media (min-width: 320px) {
    .logo_imac {
        padding-top: 0;
    }
    .ubicacion span {
        padding-top: 8px;
    }
    .ubicacion2 span {
        padding-top: 3px;
    }
    #animacion-anita {
        position: absolute;
        bottom: 25%;
        left: 40%;
        transform: scale(0.5);
    }
    #animacion-bartolo {
        position: absolute;
        bottom: 20%;
        left: 50%;
        transform: scale(0.5);
    }
    #animacion-nico {
        position: absolute;
        bottom: 24%;
        left: 0%;
        transform: scale(0.5);
    }
    #animacion-tomas {
        position: absolute;
        bottom: 20%;
        left: 22%;
        transform: scale(0.5);
    }
    #animaciones {
        position: relative;
        min-height: 300px;
    }
    #fondo-castillos {
        background-image: url("../images/castillos_fondo_m@2x.png");
        background-size: cover;
    }
    #personajes {
        position: relative;
        min-height: 148px;
    }

    #apps {
        position: relative;
        min-height: 148px;
    }

    .titulo-personajes {
        position: absolute;
        top: -15px;
        left: 0px;
    }
    .box-personajes {
        position: relative;
        width: 100%;
        height: auto;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        padding-top: 20px;
        padding-bottom: 5px;
        padding-left: 15px;
        padding-right: 16px;
        margin-top: 290px;
        margin-bottom: 10px;
        z-index: 200;
    }
    .img-bartolo {
        background-image: url("../images/personaje_bartolo_m@2x.png");
        background-size: auto 50px;
        background-repeat: no-repeat;
        position: absolute;
        top: -240px;
        right: 0%;
        width: 67px;
        height: 60px;
        cursor: pointer;
    }
    .img-bartolo.active {
        background-image: url("../images/personaje_bartolo_blanco_m@2x.png");
    }
    .img-anita {
        background-image: url("../images/personaje_anita_m@2x.png");
        background-size: auto 50px;
        background-repeat: no-repeat;
        position: absolute;
        top: -240px;
        right: 28%;
        width: 60px;
        height: 60px;
        cursor: pointer;
    }
    .img-anita.active {
        background-image: url("../images/personaje_anita_blanco_m@2x.png");
    }
    .img-tomas {
        background-image: url("../images/personaje_tomas_m@2x.png");
        background-size: auto 58px;
        background-repeat: no-repeat;
        position: absolute;
        top: -240px;
        right: 75%;
        width: 60px;
        height: 60px;
        cursor: pointer;
    }
    .img-tomas.active {
        background-image: url("../images/personaje_tomas_blanco_m@2x.png");
    }
    .img-nico {
        background-image: url("../images/personaje_nico_m@2x.png");
        background-size: auto 52px;
        background-repeat: no-repeat;
        position: absolute;
        top: -240px;
        right: 50%;
        width: 60px;
        height: 60px;
        cursor: pointer;
    }
    .img-nico.active {
        background-image: url("../images/personaje_nico_blanco_m@2x.png");
    }

    .newsbox{
        background-color: white;
        z-index: 2;
        color: black;
        border-radius: 8px;
        padding-top: 5px;
        padding-bottom: 15px;
        padding-left: 15px;
        margin-top: 25px;
    }

    .newsbox a{
        font-weight: bold;
        color: black;
    }

    .newsbox a:hover{
        text-decoration: underline;
        text-shadow: none;
        color: #FF6B00;
    }

     .baloon{
        background-color: white;
        z-index: 2;
        color: black;
        border-radius: 50px;
        padding-top: 5px;
        padding-bottom: 15px;
        padding-left: 15px;
        text-align: center;
        margin-top: 25px;
        margin-bottom: 25px;
    }

    .baloon a{
        font-weight: bold;
        color: black;
    }

    .baloon a:hover{
        text-decoration: underline;
        text-shadow: none;
        color: #FF6B00;
    }

    .menucolegios {
        font-weight: bold;
        margin-top: 10px;
        margin-bottom: 60px;
    }

    .menucolegios .item1{
        border-radius: 5px; 
        background: #FF6B00;
        height: 30px;
        margin-bottom: 5px;
        padding-top:5px;
        width:180px;
    }

    .item1 a{
        color: white;
    }

    .item2 a{
        color: #FF6B00;
    }

    .menucolegios .item2{
        border-radius: 5px; 
        background: white;
        height: 30px;
        padding-top:5px;
        width:180px;
    }

    .boxapps {
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        padding-top: 40px;
        padding-bottom: 40px;
        padding-left: 60px;
        padding-right: 40px;
        margin-top: 70px;
        margin-bottom: 40px;
    }

    .alerta{
        color: white;
        background-color: #FFC900;
        border-radius: 5px;
        height: 65px;

    }

    .alerta p{
        text-align: center;
        font-size: 18px;
        padding-top: 6px;
    }

    .alerta a{
        color:white;
    }

    .alerta a:hover{
        text-decoration: underline;
        text-shadow: none;
    }

}


/*media Tablet*/

@media (min-width: 750px) {
    .logo_imac {
        padding-top: 7px;
    }
    .ubicacion span {
        padding-top: 2px;
    }
    #animaciones {
        position: relative;
        min-height: 405px;
    }

    #animacion-nico {
        background: url(../images/nicoHome.png);
        position: absolute;
        bottom: 100px;
        left: 10%;
        width: 124px;
        height: 213px;
        transform: scale(1);
    }

    #home-nico {
        background: url(../images/nico_static.png);
        position: absolute;
        bottom: 120px;
        left: -40px;
        width: 141px;
        height: 213px;
        transform: scale(1);
    }

    #animacion-anita {
        background: url(../images/anitaHome.png);
        position: absolute;
        bottom: 120px;
        left: 50%;
        width: 109px;
        height: 206px;
        transform: scale(1);
    }

    #home-anita {
        background: url(../images/anita_static.png);
        position: absolute;
        bottom: 105px;
        left: 35%;
        width: 109px;
        height: 206px;
        transform: scale(1);
        z-index: 1;
    }

    #animacion-bartolo {
        background: url(../images/bartoloHome.png);
        position: absolute;
        bottom: 100px;
        left: 70%;
        width: 202px;
        height: 255px;
        transform: scale(1);
    }

    #home-bartolo {
        background: url(../images/bartolo_static.png);
        position: absolute;
        bottom: 110px;
        left: 46%;
        width: 221px;
        height: 255px;
        transform: scale(1);
    }

    #animacion-tomas {
        background: url(../images/tomasHome.png);
        position: absolute;
        bottom: 120px;
        left: 30%;
        width: 102px;
        height: 230px;
        transform: scale(1);
    }

     #home-tomas {
        background: url(../images/tomas_static.png);
        position: absolute;
        bottom: 90px;
        left: 20%;
        width: 116px;
        height: 230px;
        transform: scale(1);
    }

    #personajes {
        position: relative;
        min-height: 150px;
    }

    #apps {
        position: relative;
        min-height: 150px;
    }

    .titulo-personajes {
        position: relative;
        top: -21px;
        left: -40px;
    }
    .box-personajes {
        width: 100%;
        height: auto;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        padding-top: 0px;
        padding-bottom: 10px;
        padding-left: 40px;
        padding-right: 40px;
        margin-top: 265px;
    }
    .nav.navbar-nav.centrar-menu {
        left: 300px;
    }
    .titulo {
        position: relative;
        top: 50px;
        left: 0px;
    }
    .menu.closed ul {
        height: 44px;
        overflow: hidden;
    }

    .newsbox{
        background-color: white;
        z-index: 2;
        color: black;
        border-radius: 8px;
        padding-top: 5px;
        padding-bottom: 15px;
        padding-left: 15px;
        margin-top: 25px;
    }

    .newsbox a{
        font-weight: bold;
        color: black;
    }

    .newsbox a:hover{
        text-decoration: underline;
        text-shadow: none;
        color: #FF6B00;
    }

     .baloon{
        background-color: white;
        z-index: 2;
        color: black;
        border-radius: 50px;
        padding-top: 5px;
        padding-bottom: 15px;
        padding-left: 15px;
        text-align: center;
        margin-top: 25px;
    }

    .baloon a{
        font-weight: bold;
        color: black;
    }

    .aloon a:hover{
        text-decoration: underline;
        text-shadow: none;
        color: #FF6B00;
    }

    .menucolegios {
        color: #243A0A;
        font-weight: bold;
        margin-top: 5px;
        margin-bottom: 0px;
    }

    .menucolegios .item1{
        border-radius: 5px; 
        background: #FF6B00;
        height: 30px;
        margin-bottom: 5px;
        padding-top: 5px;
        width: 180px;
    }

    .item1 a{
        color: white;
    }

    .item2 a{
        color: #FF6B00;
    }

    .menucolegios .item2{
        border-radius: 5px; 
        background: white;
        height: 30px;
        padding-top: 5px;
        width: 180px;
    }

    /*.menu2 a {
        margin-top: -20px;
        z-index: 99;
    }*/

}

@media (min-width: 768px) {
    #animaciones {
        position: relative;
        min-height: 500px;
    }
    #animacion-nico {
        background: url(../images/nicoHome.png);
        position: absolute;
        bottom: 200px;
        left: 150px;
        width: 124px;
        height: 213px;
    }
    #animacion-anita {
        background: url(../images/anitaHome.png);
        position: absolute;
        bottom: 200px;
        left: 350px;
        width: 109px;
        height: 206px;
    }
    #animacion-bartolo {
        background: url(../images/bartoloHome.png);
        position: absolute;
        bottom: 180px;
        right: 50px;
        width: 202px;
        height: 255px;
    }
    #animacion-tomas {
        background: url(../images/tomasHome.png);
        position: absolute;
        bottom: 200px;
        left: 250px;
        width: 102px;
        height: 230px;
    }
    .box-flotantes {
        display: none;
    }
    #fondo-castillos {
        background-image: url("../images/castillos_fondo_t@2x.png");
        background-size: cover;
    }

    #personajes {
        position: relative;
        min-height: 500px;
    }

    #apps {
        position: relative;
        min-height: 500px;
    }


    .titulo-personajes {
        position: relative;
        top: -21px;
        left: -19px;
    }
    .box-personajes {
        width: 100%;
        height: auto;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        padding-top: 0px;
        padding-bottom: 10px;
        padding-left: 20px;
        padding-right: 20px;
        margin-top: 86px;
        margin-bottom: 115px;
    }
    .titulo {
        position: relative;
        top: -36px;
        left: -25px;
    }
    .nav.navbar-nav.centrar-menu {
        position: absolute;
        left: 60px;
    }
    .menu {
        height: 50px;
        margin-top: 197px;
    }
    body {
        background-image: url("../images/fondo_t@2x.jpg");
        background-size: cover;
    }
    .nav.navbar-nav.navbar-right {
        position: absolute;
        top: -120px;
        bottom: 0px;
        right: 0px;
    }
    .menu.closed ul {
        height: 44px;
        overflow: hidden;
    }
    .img-bartolo {
        background-image: url("../images/personaje_bartolo_t@2x.png");
        background-size: auto 200px;
        background-repeat: no-repeat;
        position: absolute;
        top: 222px;
        right: 40px;
        width: 170px;
        height: 203px;
        cursor: pointer;
    }
    .img-bartolo.active {
        background-image: url("../images/personaje_bartolo_blanco_t@2x.png");
    }
    .img-tomas {
        background-image: url("../images/personaje_tomas_t@2x.png");
        background-size: auto 233px;
        background-repeat: no-repeat;
        position: absolute;
        top: 209px;
        right: 535px;
        width: 135px;
        height: 233px;
        cursor: pointer;
    }
    .img-tomas.active {
        background-image: url("../images/personaje_tomas_blanco_t@2x.png");
    }
    .img-nico {
        background-image: url("../images/personaje_nico_t@2x.png");
        background-size: auto 221px;
        background-repeat: no-repeat;
        position: absolute;
        top: 204px;
        right: 406px;
        width: 135px;
        height: 221px;
        cursor: pointer;
    }
    .img-nico.active {
        background-image: url("../images/personaje_nico_blanco_t@2x.png");
    }
    .img-anita {
        background-image: url("../images/personaje_anita_t@2x.png");
        background-size: auto 212px;
        background-repeat: no-repeat;
        position: absolute;
        top: 218px;
        right: 221px;
        width: 135px;
        height: 221px;
        cursor: pointer;
    }
    .img-anita.active {
        background-image: url("../images/personaje_anita_blanco_t@2x.png");
    }
    h5 {
        font-size: 12px;
    }

    .menucolegios {
        color: #243A0A;
        font-weight: bold;
        margin-top: -126px;
        margin-bottom: 60px;
    }

    .alerta{
        color: white;
        background-color: #FFC900;
        border-radius: 5px;
        height: 65px;
        margin-top: -196px;
    }
}


/*media PC*/

@media (min-width: 970px) {
    .logo_imac {
        padding-top: 0;
    }
    #animacion-bartolo {
        bottom: 120px;
    }
    #animacion-anita {
        bottom: 140px;
    }
    #animacion-nico {
        bottom: 140px;
    }
    #animacion-tomas {
        bottom: 120px;
    }
    #fondo-castillos {
        background-image: url("../images/castillos_fondo@2x.png");
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center bottom;
    }

    #personajes {
        position: relative;
        min-height: 400px;
    }

    #apps {
        position: relative;
        min-height: 400px;
    }

    .titulo-personajes {
        position: relative;
        top: -21px;
        left: -40px;
    }
    .box-personajes {
        width: 35%;
        height: auto;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        padding-top: 0px;
        padding-bottom: 10px;
        padding-left: 40px;
        padding-right: 40px;
        margin-top: 70px;
        margin-bottom: 135px
    }
    .titulo {
        position: relative;
        top: -63px;
        left: -60px;
    }
    .brand {
        position: absolute !important;
        top: -25px;
        left: 90px;
    }
    .nav>li>a {
        position: relative;
        display: block;
        padding: 15px 8px;
    }
    .nav.navbar-nav {
        padding-left: 116px;
    }

    .box {
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        padding-top: 40px;
        padding-bottom: 40px;
        padding-left: 60px;
        padding-right: 40px;
        margin-top: 70px;
        margin-bottom: 40px;
    }

    .menu {
        height: 50px;
        margin-top: 100px;
    }
    body {
        background-image: url("../images/fondo@2x.jpg");
        background-size: cover;
    }
    .nav.navbar-nav.navbar-right {
        position: absolute;
        top: 0px;
        bottom: 0px;
        right: -90px;
    }
    .menu.closed ul {
        height: 42px;
        overflow: hidden;
    }
    .img-bartolo {
        background-image: url("../images/personaje_bartolo@2x.png");
        background-size: auto 200px;
        background-repeat: no-repeat;
        position: absolute;
        bottom: 50px;
        right: -100px;
        width: 164px;
        height: 202px;
        cursor: pointer;
    }
    .img-bartolo.active {
        background-image: url("../images/personaje_bartolo_blanco@2x.png");
    }

    .img-tomas {
        background-image: url("../images/personaje_tomas@2x.png");
        background-size: auto 233px;
        background-repeat: no-repeat;
        position: absolute;
        bottom: 50px;
        right: 264px;
        width: 135px;
        height: 233px;
        cursor: pointer;
    }
    .img-tomas.active {
        background-image: url("../images/personaje_tomas_blanco@2x.png");
    }
    .img-nico {
        background-image: url("../images/personaje_nico@2x.png");
        background-size: auto 221px;
        background-repeat: no-repeat;
        position: absolute;
        bottom: 65px;
        right: 177px;
        width: 135px;
        height: 221px;
        cursor: pointer;
    }
    .img-nico.active {
        background-image: url("../images/personaje_nico_blanco@2x.png");
    }
    .img-anita {
        background-image: url("../images/personaje_anita@2x.png");
        background-size: auto 212px;
        background-repeat: no-repeat;
        position: absolute;
        bottom: 45px;
        right: 50px;
        width: 135px;
        height: 221px;
        cursor: pointer;
    }
    .img-anita.active {
        background-image: url("../images/personaje_anita_blanco@2x.png");
    }
    h5 {
        color: #ffffff;
        position: relative;
        bottom: 10px;
        font-size: 11px;
    }

}

@media (min-width: 992px) {
    #animacion-bartolo {
        /*bottom: 140px;*/
        bottom: 110px;
        /*left: 650px;*/
        left: 530px
    }
    #animacion-anita {
        bottom: 160px;
        /*left: 550px;*/
        left: 445px
    }
    #animacion-nico {
        bottom: 160px;
        /*left: 350px;*/
        left: 220px
    }
    #animacion-tomas {
        bottom: 140px;
        /*left: 450px;*/
        left: 340px
    }
    .img-anita {
        position: absolute;
        right: 154px;
    }
    .img-bartolo {
        position: absolute;
        right: -18px;
    }
    .img-tomas {
        position: absolute;
        right: 428px;
    }
    .img-nico {
        position: absolute;
        right: 307px;
    }
    .titulo-personajes {
        position: relative;
        top: -21px;
        left: -40px;
    }
    .box-personajes {
        width: 30%;
        height: auto;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        padding-top: 0px;
        padding-bottom: 10px;
        padding-left: 40px;
        padding-right: 40px;
        margin-top: 76px;
        margin-bottom: 135px;
    }

    .box-personajes h3{
        position: relative;
        top: -16px;
        left: -40px;
    }

    .menu.closed {
        margin-bottom: 40px
    }
    .nav.navbar-nav.navbar-right {
        position: absolute;
        top: 0px;
        bottom: 0px;
        right: 0px;
    }
    .nav>li>a {
        position: relative;
        display: block;
        padding: 15px 15px;
    }
    h5 {
        font-size: 13px;
    }

    .newsbox{
        background-color: white;
        z-index: 2;
        color: black;
        border-radius: 8px;
        padding-top: 5px;
        padding-bottom: 15px;
        padding-left: 15px;
    }

    /*.newsbox h4{
        color: #FF6B00;
        text-transform: uppercase;
    }*/

    .newsbox a{
        font-weight: bold;
        color: #6389CD;
    }

    .newsbox a:hover, a:active, a:focus{
        text-decoration: underline;
        text-shadow: none;
        color: #6389CD;
    }

     .baloon{
        background-color: white;
        z-index: 2;
        color: black;
        border-radius: 50px;
        padding-top: 5px;
        padding-bottom: 15px;
        padding-left: 15px;
        text-align: center;
    }

    .baloon .orange{
        color: #FF6B00;
    }

    .baloon a{
        font-weight: bold;
        color: #6389CD;
    }

    .baloon a:hover, a:active, a:focus{
        text-decoration: underline;
        text-shadow: none;
        color: #6389CD;
    }

    .menucolegios {
        /*color: white;*/
        color: #243A0A;
        font-weight: bold;
        margin-top: -90px;
        margin-bottom: 60px;
    }

    .menucolegios .item1{
        border-radius: 5px; 
        background: #FF6B00;
        height: 30px;
        margin-bottom: 5px;
        padding-top:5px;
        width:180px;
    }

    .item1 a{
        color: white;
    }

    .item2 a{
        color: #FF6B00;
    }

    .menucolegios .item2{
        border-radius: 5px; 
        background: white;
        height: 30px;
        padding-top:5px;
        width:180px;
    }

    .menucolegios a:hover, a:active, a:focus{
        text-decoration: none;
        text-shadow: none;
    }

    .orange{
        color: #FF6B00;
    }

    .tienda{
        color: #6389CD;
    }

    .alerta{
        color: white;
        background-color: #FFC900;
        border-radius: 5px;
        margin-top: -90px;
        margin-bottom: 60px;
        height: 65px;

    }

    .alerta p{
        text-align: center;
        font-size: 18px;
        padding-top: 18px;
    }

    .alerta a{
        color:white;
    }

    .alerta a:hover{
        text-decoration: underline;
        text-shadow: none;
    }

}