/*Body*/
body {
    font-family: 'Roboto', sans-serif;
    background: #EEEEEE;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

    body[role="login"] {
        font-family: 'Roboto', sans-serif;
        background: #d9dddc url(../images/background-login.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
/*login*/
.center-div {
    /*width: 100%;
    max-width: 600px;
    padding: 10% 65% 10%;
    margin: auto;*/
    position: absolute;
    right: 0;
    /*margin-right: 465px;*/
    margin-right: 0px;
    margin-top: 55px;
}

.panel-login {
    background: #fff;
    opacity: .9;
    -webkit-box-shadow: 0px 7px 24px 1px rgba(0,0,0,0.45);
    -moz-box-shadow: 0px 7px 24px 1px rgba(0,0,0,0.45);
    box-shadow: 0px 7px 24px 1px rgba(0,0,0,0.45);
    border-radius: 2em 0em 0em 2em;
}

/*button*/
.school-button {
    background-color: #2B4C76 !important;
    text-transform: none !important;
}
/*css menu*/
#cssmenu {
    width: 100% !important;
}

    #cssmenu a {
        height: 34px !important;
        border-radius: 3px !important;
    }

    #cssmenu > ul > li > a {
        background: #EB4D40 !important;
    }

    #cssmenu > ul > li.active > a {
        background: #ff8a80 !important;
    }

.activo {
    color: #fff !important;
    text-shadow: none !important;
    background: #EB4D40 !important
}

#cssmenu ul ul a:hover {
    background: #ff8a80 !important;
}


@media all and (min-width:1025px) and (max-width: 2000px) {
    .center-div {
        position: absolute;
        right: 0;
        margin-right: 0px;
        margin-top: 55px;
    }

    #panel-login {
        width: 300px;
    }
}

@media all and (min-width:960px) and (max-width: 1024px) {
    .center-div {
        position: absolute;
        right: 0;
        margin-right: 0px;
        margin-top: 55px;
    }

    #panel-login {
        width: 325px;
    }
}

@media all and (min-width:801px) and (max-width: 959px) {
    .center-div {
        position: absolute;
        right: 0;
        margin-right: 0px;
        margin-top: 55px;
    }

    #panel-login {
        width: 300px;
    }
}

@media all and (min-width:769px) and (max-width: 800px) {
    .center-div {
        position: absolute;
        right: 0;
        margin-right: 0px;
        margin-top: 55px;
    }

    #panel-login {
        width: 272px;
    }
}

@media all and (min-width:569px) and (max-width: 768px) {
    .center-div {
        position: absolute;
        right: 0;
        margin-right: 0px;
        margin-top: 55px;
    }
}

@media all and (min-width:481px) and (max-width: 568px) {
    .center-div {
        position: absolute;
        right: 0;
        margin-right: 0px;
        margin-top: 55px;
    }

    #panel-login {
        width: 272px;
    }
}

@media all and (min-width:321px) and (max-width: 455px) {
    .center-div {
        position: absolute;
        right: 0;
        margin-right: 0px;
        margin-top: 55px;
    }

    #panel-login {
        width: 272px;
    }
}

@media all and (min-width:0px) and (max-width: 320px) {
    .center-div {
        position: absolute;
        right: 0;
        margin-right: 0px;
        margin-top: 55px;
    }

    #panel-login {
        width: 272px;
    }
}