/*
======================================================================================================================================================================
                                                                RESPONSIVE-KINPOS.CSS
    Fecha de creación: 18/07/2017
    Creada por: Bryan Galviz
    Forma de llamado: <link href="~/Templates/Kinpos/css/Responsive-Kinpos.css" media="screen" rel="stylesheet" type="text/css">
======================================================================================================================================================================
    1- Presentación
    2- Explicación orden de la hoja Responsive-Kinpos.css
    3- Forma de búsqueda
    4- Indice de tamaños
    5- ¡Empezamos con el responsive!

======================================================================================================================================================================
    1- PRESENTACIÓN:
            Esta hoja de estilos tiene la finalidad de organizar el responsive de las pantallas que usa el proyecto CSI.web ya que el responsive se esta empleando de 
            una forma desordenada en las hojas de estilos que se empleaban en el proyecto.

======================================================================================================================================================================
    2-EXPLICACIÓN ORDEN DE LA HOJA RESPONSIVE-KINPOS.CSS:
            Esta hoja va ordenada desde las pantallas pequeñas hasta las mas grandes, dentro de ellas colocaremos un indice de los modulos, vistas y clases que en la 
            que se usara el responsive. Ádemas cuenta con una forma más detallada para cada dispositivo, en su forma vertical como horizontal.

======================================================================================================================================================================
    3- FORMA DE BÚSQUEDA:

======================================================================================================================================================================
    4-INDICE DE TAMAÑOS:

        5.1- (320 x 480-568)...............................iPhone 4, Nokia Lumia 520, iPhone 5, Blackberry Z30, Galaxy Note 3, Galaxy Note II, 
        5.2- (360-375-384 x 640-667).......................Galaxy S III, Microsoft Lumia 550, Microsoft Lumia 950, Nexus 5, Nokia N9, Galaxy S5, iPhone 6, LG Optimus L70, Nexus 4
        5.3- (412-414  x 732-736)..........................Nexus 6, Nexus 6P, Nexus 5x, iPhone 6 Plus 
        5.4- (600-768 x 960-1024)..........................Nexus 7, BlackBerry PlayBook, iPad Mini, iPad
        5.5- (1024-1280-1440 x 800-900-950-1366)...........Nexus 10, Laptop with MDPI screen,Laptop whit touch, Laptop with HiDPI screen, iPad Pro 

 ======================================================================================================================================================================   
    5- ¡EMPEZAMOS CON EL RESPONSIVE!:

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    5.1- (320 x 480-568)...............................iPhone 4, Nokia Lumia 520, iPhone 5, Blackberry Z30, Galaxy Note 3, Galaxy Note II */
@media screen and (max-width: 320px) and (max-height: 568px) {
}

@media screen and (max-width: 568px) and (max-height: 320px) {
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    5.2- (360-375-384 x 640-667).......................Galaxy S III, Microsoft Lumia 550, Microsoft Lumia 950, Nexus 5, Nokia N9, Galaxy S5, iPhone 6, LG Optimus L70, Nexus 4*/
@media screen and (max-width: 384px) and (max-height: 667px) {
    #header > #top-nav > .top-nav-left {
        width: 500px;
    }
}



@media screen and (max-width: 667px) and (max-height: 384px) {
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    5.3- (412-414  x 732-736)..........................Nexus 6, Nexus 6P, Nexus 5x, iPhone 6 Plus 
*/
@media screen and (max-width: 414px) and (max-height: 736px) {
}

@media screen and (max-width: 736px) and (max-height: 414px) {
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    5.4- (600-768 x 960-1024)..........................Nexus 7, BlackBerry PlayBook, iPad Mini, iPad */
@media screen and (max-width: 768px) and (max-height: 1024px) {
}

@media screen and (max-width: 1024px) and (max-height: 768px) {
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    5.5- (1024-1280-1440 x 800-900-950-1366)...........Nexus 10, Laptop with MDPI screen,Laptop whit touch, Laptop with HiDPI screen, iPad Pro*/
@media screen and (max-width: 1440px) and (max-height: 1366px) {
}

@media screen and (max-width: 1366px) and (max-height: 1440px) {
}