/*
Primeros estilos
***************************************************************************************************************
*/


@media all and (max-width: 360px) {
    .login-container .login-title div {
        font-size: 18px;
    }
    .login-container .login-title span {
        font-size: 14px;
    }
}

@media all and (min-width: 360px) {
    .login-form-container .thumbnail{
        display:block;   
        width: 120px;
        height: 120px;
    }
    .login-container .login-title div {
        font-size: 24px;
    }
    .login-container .login-title span {
        font-size: 20px;
    }
    .login-container:before, .login-container:after {
        padding-top:6%;
    }
}

@media only screen and (min-width: 480px) {
    nav{
        width:100%
    }
    nav a {
        float: left;
        width: 80%;
        margin: 0 1.7%;
        padding: 10px 1%;
        margin-bottom: 0;
    }

    nav li:first-child a {
        margin-left: 0;
    }

    nav li:last-child a {
        margin-right: 0;
    }

    nav ul li {
        display: inline;
    }

    .oldie nav a {
        margin: 0 0.7%;
    }
    .user-name{
        display: table-cell;
    }
}

@media only screen and (min-width: 768px) {
    .user-name{
  	text-align:right;
  }
    
    
    .header-container,
    .main aside {
        -webkit-box-shadow: 0 5px 10px #aaa;
        -moz-box-shadow: 0 5px 10px #aaa;
        box-shadow: 0 5px 10px #aaa;
    }

    /*.title {
        float: left;
    }*/


    nav{
        width:100%
    }
    nav a {
        float: right;
        width: 10%;
        margin: 0 1.7%;
        padding: 10px 1%;
        margin-bottom: 0;
    }

    nav li:first-child a {
        margin-left: 0;
    }

    nav li:last-child a {
        margin-right: 0;
    }

    nav ul li {
        display: inline;
    }

    .oldie nav a {
        margin: 0 0%;
    }  


}


@media screen and (max-width:1035px ) {
    .menu-bar{
        display:block;  
        left:89%;
    } 
    .menu-bar i{
        color:#012547
    }
    .menu-izq{
        float:none;
        position:absolute;
        width:98%;
        height:auto;
        left:-9999px;
    }
    .menu-container{
        position:absolute;
        display:block;
        width:100%;
        height:auto;
        top:14%;
    }
    .navegador-menu{
        width:200px;
    }
    .ui-menu{
        width:100% !important;
        height:auto;
    }
    .main-container{
        width: 81%;
    }
}





/*
Específico para los dispositivos comunes
***************************************************************************************************************
*/


@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation: portrait) {
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation: landscape) {
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) {
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait){
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape){    
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait){
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) {
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) {
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape){
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait){
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape){
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait){
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
}


@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
}


@media only screen  and (min-width : 1036px) {
    .main-container{
        width: 84%;
    }
}

@media only screen  and (min-width : 1122px) {
    .main-container{
        width: 84%;
    }
}


@media only screen  and (min-width : 1224px) {
    .main-container{
        width: 84%;
    }
}

@media only screen  and (min-width : 1360px) {
}

@media only screen  and (min-width : 1824px) {
}