/* ************************************************
 @project                   : Hiba Almanakly CSS Menu Library
 @year                      : 2017
 @developer                 : Hiba Almanakly
 @email                     : eng.hibaalmanakly@gmail.com
 @createdDate               : April, 2017
 @updatedBy                 : Hiba Almanakly
 @updatedDate               : July, 2017
 @description               : most used function in a customized way
 ************************************************ */
.headernavcontainer,
.logomobile{
    display: none;
}

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

    .menu{
        display: none;
    }
    .headernavcontainer{
        display: block;
        width: 100%;
        background: white;
        height: 8vw;
        position: fixed;
        z-index: 700;
        top: 0;
        left: 0;
    }
    .logomobile {
        border: none;
        display: block;
        width: auto;
        height: 7vw;
        padding: 0.5vw;
        float: left;
        margin-left: 2%;
    }
    .headernav {
        float: right;
        right: 0;
        width: 8vw;
        height: 100%;
        position: relative;
        cursor: pointer;
        overflow: hidden;
        background: transparent;
        transition: 1.0s;
    }
    .menuspan{
        position: absolute;
        background-color: black;
        width: 50%;
        height: 3px;
        margin: 0 25%;
        top: 4.1vw;
        transition: 1s;
    }
    .headernav:before {
        content: "";
        position: absolute;
        background-color: black;
        width: 50%;
        height: 3px;
        margin: 0 25%;
        top: 3vw;
        transition: 0.4s;
    }
    .headernav:after{
        content: "";
        position: absolute;
        background-color: black;
        width: 50%;
        height: 3px;
        margin: 0 25%;
        top: 5.1vw;
        transition: 0.4s;
    }
    /* headerNavAnimation1Start */
    .headerNavAnimation1Span{
        transition: 1s;
        margin-left :100%;
    }
    .headerNavAnimation1StartBefore:before{
        transition: 0.4s;
        transform: rotate(45deg) translate(22%, 50%);
    }
    .headerNavAnimation1StartAfter:after{
        transition: 0.4s;
        transform: rotate(-45deg) translate(30%, -150%);
    }

    /* headerNavAnimation2Start */
    .headerNavAnimation2Span {
        transition: 1s;
        width: 0;
        margin: 40% 0% 0 60%;
    }

    /* headerNavAnimation3Start */
    .headerNavAnimation3HeaderNav{
        transition: 1.5s;
        transform: rotate(90deg);
    }
    .headerNavAnimation3Span{
        transition: 0.5s;
        width: 0%;
        margin: 0% 50% 0 50%;
    }
    /* headerNavAnimation4Start */
    .headerNavAnimation4HeaderNav{
        transition: 1.5s;
        transform: rotate(-180deg);
    }
    .headerNavAnimation4Span{
        transition: 0.5s;
        width: 0%;
        margin: 0% 50% 0 50%;
        opacity: 0;
    }
    /* headerNavAnimation2Start */
    .headerNavAnimation5Span {
        transition: 1s;
        width: 0;
    }
}

@media only screen and (device-width: 484px)
,only screen and (max-width: 484px)
,only screen and (max-device-width: 484px)  and (orientation:portrait)
,only screen and (max-device-width: 484px) and  (orientation:landscape) {

    .logomobile {
        height: 8vw;
    }
    .headernavcontainer{
        height: 10vw;
    }
    .headernav{
        width: 10vw;
    }
    .menuspan{
        height: 2px;
        top: 5vw;
        top: 4.5vw;
    }
    .headernav:before {
        height: 2px;
        top: 3.0vw;
    }
    .headernav:after{
        height: 2px;
        top: 6vw;
    }
    /* headerNavAnimation1Start */
    .headerNavAnimation1StartBefore:before {
        transform: rotate(45deg) translate(15%, 0);
        top: 4vw;
    }
}