*{
    margin: 0;
    padding: 0;
}

header, nav{
    display: block;
}

/* Definimos un ancho 100% y una altura fija para nuestro menú */
header{
	background-color:transparent;
    height:105px;
    position: absolute;
    width: 100%;
    z-index: 2;

}
#logo{
  
    display: block;
    float: left;
    margin: 6px 10px 0;
   
    text-indent: -9999px
}

/* Nuestro nav con id #menu lo flotaremos a la derecha*/
#menu{float: right;}   

    /* Quitamos estilos por defecto de el tag UL */
    #menu ul{
        list-style: none;
        font-size: 18px; font-family:"Roboto Thin";
    }
        
        /* Centramos y ponemos los textos en mayuscula */
        #menu li{
           display: block;
           float: left;
           text-align: center;  font-family:"Roboto Thin";
        }
            
            /* Damos estilo a nuestros enlaces */
            #menu li a{
                display: block;
                color: #FFF;
                text-decoration: none;
				 font-family:"Roboto Thin";
                height: 100px;
                line-height: 80px;
                padding: 20px 20px;
            }
            #menu li a:hover{
               font-family:"Roboto Thin";
                color: #FFF; background:#D68C93;
            }
    
    /* Estilos #nav-mobile y lo ocultamos */
    #nav-mobile{
		z-index: 2;
        display: none;
        background:url(../img/nav.png) no-repeat center center;
        float: right;
        width: 60px;
        height: 60px;
        position: absolute;
        right: 0;
        top:0;
     

    }   
        /* Agregaremos esta clase a #nav-mobile, cuando el menu mobile haya sido desplegado */
        #nav-mobile.nav-active{
            opacity: 1;z-index: 2;
        }



/*
    MEDIA QUERY
*/
@media only screen and (max-width: 1366px){
	
	header{
	background-color:transparent;
    height:115px;
    position: absolute;
    width: 100%;
    z-index: 2;
	border-bottom: 1px solid #fff;
}

	#logo{ margin-top:20px; margin-left:20px;   background:url(../img/logo.png) no-repeat 0 0;  width: 401px;
    height: 79px;}
/* Nuestro nav con id #menu lo flotaremos a la derecha*/
#menu{float: right;}   

    /* Quitamos estilos por defecto de el tag UL */
    #menu ul{
        list-style: none;
        font-size: 18px;  font-family:"Roboto Thin";
    }
        
        /* Centramos y ponemos los textos en mayuscula */
        #menu li{
           display: block;
           float: left;
           text-align: center;  font-family:"Roboto Thin";
        }
            
            /* Damos estilo a nuestros enlaces */
            #menu li a{
                display: block;
                color: #FFF;
                text-decoration: none;
			 font-family:"Roboto Thin";
                height: 100px;
                line-height: 100px;
                padding: 20px 20px; margin-right:40px;
            }
            #menu li a:hover{
                font-family:"Roboto Thin";
                color: #FFF; background:#FC81AA;
            }
	
	
	}
	
@media only screen and (max-width: 980px) {
                 	header{
	background-color:transparent;
    height:110px;
    position: absolute;
    width: 100%;
    z-index: 2;
	border-bottom: 1px solid #fff;
}         
    #logo{ margin-top:20px; margin-left:20px;   background:url(../img/logos-04.png);  width: 380px;
    height: 74px;}
    
    /* mostramos #nav-mobile */
    #nav-mobile{ display: block; z-index: 2; margin-top:25px; margin-right:20px;}

    /* Fijamos nuestro nav en 100% ancho y dejamos de flotarlo  */
    #menu{
        width: 100%;z-index: 2;
        float: none;
        padding-top: 105px;
    }
        /* Convertimos nuestra lista de enlaces en un menú horizontal */
        #menu ul{
z-index: 2;
            max-height: 0;
            overflow: hidden;
        }
            /* estilos para los LI del menu */
            #menu li{
                background:#D68C93;
                border-bottom: 1px solid #fff;
                float: none;z-index: 2;font-size:14px
            }

            /* Quitamos el borde del ultimo item del menú */
            #menu li:last-child{ border-bottom: 0;z-index: 2;}
                #menu li a{
                    padding: 15px 10px; text-align:justify;
                    height: auto;z-index: 2;
                    line-height: normal; margin-right:0px;
                }
                #menu li a:hover{background:#FC81AA; z-index: 2;}

        /* Agregamos una animación al despligue del menú */
        #menu ul.open-menu{z-index: 2;
            max-height: 400px;
            -webkit-transition: max-height .4s;
            -moz-transition: max-height .4s;
            -ms-transition: max-height .4s;
            -o-transition: max-height .4s;
            transition: max-height .4s;
        }
}
@media only screen and (max-width: 800px) {
              	header{
	background-color:transparent;
    height:102px;
    position: absolute;
    width: 100%;
    z-index: 2;
	border-bottom: 1px solid #fff;
}            
    #logo{ margin-top:20px; margin-left:20px;   background:url(../img/logos-03.png); width: 340px;
    height: 67px;}
    
    /* mostramos #nav-mobile */
    #nav-mobile{ display: block; z-index: 2; margin-top:25px; margin-right:20px;}

    /* Fijamos nuestro nav en 100% ancho y dejamos de flotarlo  */
    #menu{
        width: 100%;z-index: 2;
        float: none;
        padding-top: 94px;
    }
        /* Convertimos nuestra lista de enlaces en un menú horizontal */
        #menu ul{
z-index: 2;
            max-height: 0;
            overflow: hidden;
        }
            /* estilos para los LI del menu */
            #menu li{
               background:#D68C93;
                border-bottom: 1px solid #fff;
                float: none;z-index: 2;font-size:14px
            }

            /* Quitamos el borde del ultimo item del menú */
            #menu li:last-child{ border-bottom: 0;z-index: 2;}
                #menu li a{
                    padding: 15px 10px; text-align:justify;
                    height: auto;z-index: 2;
                    line-height: normal; margin-right:0px;
                }
                #menu li a:hover{background:#FC81AA; z-index: 2;}

        /* Agregamos una animación al despligue del menú */
        #menu ul.open-menu{z-index: 2;
            max-height: 400px;
            -webkit-transition: max-height .4s;
            -moz-transition: max-height .4s;
            -ms-transition: max-height .4s;
            -o-transition: max-height .4s;
            transition: max-height .4s;
        }
}
@media only screen and (max-width: 768px) {
                 	header{
	background-color:transparent;
    height:102px;
    position: absolute;
    width: 100%;
    z-index: 2;
	border-bottom: 1px solid #fff;
}    
    #logo{ margin-top:20px; margin-left:20px;   background:url(../img/logos-03.png);  width: 340px;
    height: 67px;}
    
    /* mostramos #nav-mobile */
    #nav-mobile{ display: block; z-index: 2; margin-top:25px; margin-right:20px;}

    /* Fijamos nuestro nav en 100% ancho y dejamos de flotarlo  */
    #menu{
        width: 100%;z-index: 2;
        float: none;
        padding-top: 94px;
    }
        /* Convertimos nuestra lista de enlaces en un menú horizontal */
        #menu ul{
z-index: 2;
            max-height: 0;
            overflow: hidden;
        }
            /* estilos para los LI del menu */
            #menu li{
              background:#D68C93;
                border-bottom: 1px solid #fff;
                float: none;z-index: 2;font-size:14px
            }

            /* Quitamos el borde del ultimo item del menú */
            #menu li:last-child{ border-bottom: 0;z-index: 2;}
                #menu li a{
                    padding: 15px 10px; text-align:justify;
                    height: auto;z-index: 2;
                    line-height: normal; margin-right:0px;
                }
                #menu li a:hover{background:#FC81AA; z-index: 2;}

        /* Agregamos una animación al despligue del menú */
        #menu ul.open-menu{z-index: 2;
            max-height: 400px;
            -webkit-transition: max-height .4s;
            -moz-transition: max-height .4s;
            -ms-transition: max-height .4s;
            -o-transition: max-height .4s;
            transition: max-height .4s;
        }
}

@media only screen and (max-width: 360px) {
            	header{
	background-color:transparent;
    height:79px;
    position: absolute;
    width: 100%;
    z-index: 2;
	border-bottom: 1px solid #fff;
}
  
    #logo{ margin-top:28px; margin-left:20px;   background:url(../img/logos-02.png);  width: 240px;
    height: 48px;}
    /* mostramos #nav-mobile */
    #nav-mobile{ display: block; z-index: 2; margin-top:20px; margin-right:10px;}

    /* Fijamos nuestro nav en 100% ancho y dejamos de flotarlo  */
    #menu{
        width: 100%;z-index: 2;
        float: none;
        padding-top: 80px;
    }
        /* Convertimos nuestra lista de enlaces en un menú horizontal */
        #menu ul{
z-index: 2;
            max-height: 0;
            overflow: hidden;
        }
            /* estilos para los LI del menu */
            #menu li{
               background:#D68C93;
                border-bottom: 1px solid #fff;
                float: none;z-index: 2;font-size:14px
            }

            /* Quitamos el borde del ultimo item del menú */
            #menu li:last-child{ border-bottom: 0;z-index: 2;}
                #menu li a{
                    padding: 15px 10px; text-align:justify;
                    height: auto;z-index: 2;
                    line-height: normal;  margin-right:0px;
                }
                #menu li a:hover{background:#FC81AA; z-index: 2;}

        /* Agregamos una animación al despligue del menú */
        #menu ul.open-menu{z-index: 2;
            max-height: 400px;
            -webkit-transition: max-height .4s;
            -moz-transition: max-height .4s;
            -ms-transition: max-height .4s;
            -o-transition: max-height .4s;
            transition: max-height .4s;
        }
}
@media only screen and (max-width: 320px) {
      	header{
	background-color:transparent;
    height:69px;
    position: absolute;
    width: 100%;
    z-index: 2;
	border-bottom: 1px solid #fff;
}
  
    #logo{ margin-top:25px; margin-left:20px;   background:url(../img/logos-01.png);  width: 200px;
    height: 40px;}
    /* mostramos #nav-mobile */
    #nav-mobile{ display: block; z-index: 2; margin-top:15px;}

    /* Fijamos nuestro nav en 100% ancho y dejamos de flotarlo  */
    #menu{
        width: 100%;z-index: 2;
        float: none;
        padding-top: 70px;
    }
        /* Convertimos nuestra lista de enlaces en un menú horizontal */
        #menu ul{
z-index: 2;
            max-height: 0;
            overflow: hidden;
        }
            /* estilos para los LI del menu */
            #menu li{
                background:#D68C93;
                border-bottom: 1px solid #fff;
                float: none;z-index: 2;font-size:14px
            }

            /* Quitamos el borde del ultimo item del menú */
            #menu li:last-child{ border-bottom: 0;z-index: 2;}
                #menu li a{
                    padding: 15px 10px; text-align:justify;
                    height: auto;z-index: 2;
                    line-height: normal; margin-right:0px;
                }
                #menu li a:hover{background:#FC81AA;z-index: 2;}

        /* Agregamos una animación al despligue del menú */
        #menu ul.open-menu{z-index: 2;
            max-height: 400px;
            -webkit-transition: max-height .4s;
            -moz-transition: max-height .4s;
            -ms-transition: max-height .4s;
            -o-transition: max-height .4s;
            transition: max-height .4s;
        }
}