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

    #navigation{
        width: 100%;
        position: fixed;
        left: 0;
        height: 75px;
        background-color: #fff;
        z-index: 999;
        margin-top: 100px;
        opacity: 0;
        transition: all 0.3s;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        animation: fadeUp 0.6s ease-in-out;
        -webkit-animation: fadeUp 0.6s ease-in-out;
        -moz–animation: fadeUp 0.6s ease-in-out;
        animation-fill-mode: forwards;
        -webkit-animation-fill-mode: forwards;
        -moz-animation-fill-mode: forwards;
        -webkit-box-shadow: 0 8px 6px -10px black;
        -moz-box-shadow: 0 8px 6px -10px black;
        box-shadow: 0 8px 6px -10px black;
    }

.nav_off{
    top: -10%;
}
.nav_on{
    top: 0px;
}

#menu{
    width: 90%;
    height: 100%;
    margin: 0 auto;
    position: relative;
    max-width: 1500px;
}

#logo{
    width: 60px;
    float: left;
    margin-top: 25px;
    cursor: pointer;
}

.logo_black{
    width: 50px;
    height: 30px;
    background-image: url(IMG/logo.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.logo_white{
    width: 50px;
    height: 30px;
    background-image: url(IMG/logo_giff.gif);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}


#navicon_container{
    width: 13px;
    height: 13px;
    float: right;
    margin-top: 35px;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    cursor: pointer;
    position: relative;
}

.navicon{
    position: relative;
    width: 100%;
    height: 13px;
}


.info_btn{
    font-size: 15px;
}

#navicon_container:hover .line1{
    background-color: #ff0030;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

.line1{
    width: 100%;
    height: 3px;
    background-color: #000;
}
}










@media only screen and (max-width : 999px){

    #navigation{
        width: 100%;
        position: fixed;
        left: 0;
        height: 75px;
        background-color: #fff;
        z-index: 999;
        margin-top: 100px;
        opacity: 0;
        transition: all 0.3s;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        animation: fadeUp 0.6s ease-in-out;
        -webkit-animation: fadeUp 0.6s ease-in-out;
        -moz–animation: fadeUp 0.6s ease-in-out;
        animation-fill-mode: forwards;
        -webkit-animation-fill-mode: forwards;
        -moz-animation-fill-mode: forwards;
        -webkit-box-shadow: 0 8px 6px -10px black;
        -moz-box-shadow: 0 8px 6px -10px black;
        box-shadow: 0 8px 6px -10px black;
    }

.nav_off{
    top: -100px;
}
.nav_on{
    top: 0px;
}

#menu{
    width: 90%;
    height: 100%;
    margin: 0 auto;
    position: relative;
    max-width: 1500px;
}

#logo{
    width: 60px;
    float: left;
    margin-top: 25px;
    cursor: pointer;
}

.logo_black{
    width: 50px;
    height: 30px;
    background-image: url(IMG/logo.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.logo_white{
    width: 50px;
    height: 30px;
    background-image: url(IMG/logo_giff.gif);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}


#navicon_container{
    width: 25px;
    height: 100%;
    float: right;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    cursor: pointer;
    position: relative;
}

.navicon{
    position: relative;
    width: 100%;
    height: 13px;
    top: 50%;
    margin-top: -1.5px;
}


.info_btn{
    font-size: 15px;
}

#navicon_container:hover .line1{
    background-color: #ff0030;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

.line1{
    width: 100%;
    height: 3px;
    background-color: #000;
}
}









@media only screen and (max-width : 680px){

    #navigation{
        width: 100%;
        position: fixed;
        left: 0;
        height: 75px;
        background-color: #fff;
        z-index: 999;
        margin-top: 100px;
        opacity: 0;
        transition: all 0.3s;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        animation: fadeUp 0.6s ease-in-out;
        -webkit-animation: fadeUp 0.6s ease-in-out;
        -moz–animation: fadeUp 0.6s ease-in-out;
        animation-fill-mode: forwards;
        -webkit-animation-fill-mode: forwards;
        -moz-animation-fill-mode: forwards;
        -webkit-box-shadow: 0 8px 6px -10px black;
        -moz-box-shadow: 0 8px 6px -10px black;
        box-shadow: 0 8px 6px -10px black;
    }

.nav_off{
    top: 0px;
}
.nav_on{
    top: 0px;
}

#menu{
    width: 90%;
    height: 100%;
    margin: 0 auto;
    position: relative;
    max-width: 1500px;
}

#logo{
    width: 60px;
    float: left;
    margin-top: 25px;
    cursor: pointer;
}

.logo_black{
    width: 50px;
    height: 30px;
    background-image: url(IMG/logo.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
.logo_white{
    width: 50px;
    height: 30px;
    background-image: url(IMG/logo_giff.gif);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}


#navicon_container{
    width: 25px;
    height: 100%;
    float: right;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    cursor: pointer;
    position: relative;
}

.navicon{
    position: relative;
    width: 100%;
    height: 13px;
    top: 50%;
    margin-top: -1.5px;
}


.info_btn{
    font-size: 15px;
}

#navicon_container:hover .line1{
    background-color: #ff0030;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

.line1{
    width: 100%;
    height: 3px;
    background-color: #000;
}
}