/* ---------------------------------------------------
                MAIN NAVIGATION STYLES
----------------------------------------------------*/

.main-navigation {
    margin: 0;
    height: 5em;
    width: 100%;
    background: #b91e30;
    border-top: 0.2em solid #316432;
    border-bottom: 0.2em solid #316432;
    border-left: 0;
    border-right: 0;
    line-height: 2em;
    box-sizing: border-box;
    display: inline-block;
    position: relative;
    font-family: "BebasNeue";
    font-weight: 400;
}

.main-navigation li#logo_center a {
    display: none;
}

.main-navigation .menu-mobile-button{
    display: inline-block;
    position: relative;
    margin:0;
    box-sizing: border-box;
    padding: 0.7em 1em;
    width: 4.4em;
    height: 5em;
    float:right;
    right:0;
}

.menu-mobile-button:after, 
.menu-mobile-button:before, 
.menu-mobile-button div {
    background-color: #fff;
    border-radius: 3px;
    content: '';
    display: block;
    height: 7px;
    margin: 12px 0;
    transition: all .2s ease-in-out;
}

.menu-mobile-button-active:before {
    transform: translateY(16px) rotate(135deg);
}

.menu-mobile-button-active:after {
    transform: translateY(-16px) rotate(-135deg);
}

.menu-mobile-button-active div {
    transform: scale(0);
}

.main-navigation div#main_menu {
    position: fixed;
    margin-top: 5em;
    padding: 0;
    height: 100%;
    z-index: 3;
    width: 0;
    top: 0;
    right: 0;
    background-color: #b91e30fa;
    overflow-x: hidden;
    transition: 0.5s;
}

.main-navigation a#logo_menu {

    height: 100%;
    width: 16em;
    box-sizing: border-box;
    display: block;
    position: relative;
    padding: 0;
    margin: auto 0 auto 1em;
    background: url("../img/lebgamedev_logo_menu.png");
    background-repeat: no-repeat;
    background-position:center;
    background-size: 16em 3em;
    float:left;


/*
    left:0;
    text-align: left;
    float:left;
    left:0;
*/
}

.main-navigation a#logo_menu:hover {
    background: url("../img/lebgamedev_logo_menu_broken.png");
    background-repeat: no-repeat;
    background-position:center;
    background-size: 16em 3em;
    transition: .5s background;
}

.main-navigation ul.social {
    margin: 0 auto;
    padding: 2em 4em;
    position: relative;
    display: inline-block;
    display: flex;
    justify-content: space-between;
}

.main-navigation ul.social li {
    white-space:nowrap;
    list-style: none;
    float: left;
}

.main-navigation ul.social a {
    background: none;
    display: block;
    padding: 0;
    text-decoration: none;
    text-transform: uppercase;
    color: #ffffff;
}

.main-navigation ul.social img{
    width: 3em;
    height: 3em;
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
}

.main-navigation ul.menu {
    position: relative;
    padding: 0;
    margin: 0;
}

.main-navigation ul.menu  li {
    list-style: none;
    text-align: center;
    margin: 0;
    padding: 0;
    min-width: 10%;
    white-space: nowrap;
    display: block;
}

.main-navigation ul.menu a {
    font-size: 2em;
    background: none;
    display: block;
    padding: 0.8em 1em;
    text-decoration: none;
    text-transform: uppercase;
    color: #ffffff;
}

@media only screen and (min-width: 1080px) {
    
    .main-navigation a#logo_menu {
        display: none;
    }
    
    .main-navigation .menu-mobile-button{
        display: none;
    }
    
    .main-navigation {
        margin: 0;
        height: 2.4em;
        background: rgba();
        border-top: 2px solid #316432;
        border-bottom: 2px solid #316432;
    }

    .main-navigation div#main_menu {
        position: relative;
        z-index: 1;
        max-width: 1920px;
        height: 100%;
        width: 100% !important; /*Importnat only in desktop mode, to override the script that sets width to zero for mobile menu*/
        margin: auto;
        padding: 0;
        top: 0;
        bottom:0;
        left: 0;
        right:0;
        z-index: 1;
        background-color: transparent;
        overflow-x:inherit;
        transition: 0s;
    }

    .main-navigation ul.menu {
        padding-left: 6.5em;
        max-width: 950px;
        margin: 0 auto;
        position: relative;
    }

    .main-navigation ul.menu  li {
        list-style: none;
        text-align: center;
        margin: 0px 0;
        float: left;
        padding: 0 1.3%;
        min-width: 8%;
        white-space: nowrap;
        display: inline-block
    }

    .main-navigation ul.menu a {
        box-sizing: border-box;
        height: 2.8em;
        font-size: 0.85em;
        background: none;
        display: block;
        padding: 0.2em 0.5em;
        text-decoration: none;
        text-transform: uppercase;
        color: #ffffff;
    }

    .main-navigation ul.menu a:hover {
        background: none;
        color: #008b3f;
    }

    .main-navigation ul.social {
        margin: 0 auto;
        padding: 0;
        position: absolute;
        display: inline-block;
        right: 1em;
        box-sizing: border-box;
        height: 100%;

    }

    .main-navigation ul.social li {
        white-space:nowrap;
        list-style: none;
        float: left;
        height: 100%;
        top: 0;
        bottom: 0;
    }

    .main-navigation ul.social a {
        background: none;
        position: relative;
        height: 100%;
        box-sizing: border-box;
        display: block;
        padding:  0.3em 0.3em;
        text-decoration: none;
        text-transform: uppercase;
        color: #ffffff;
    }

    .main-navigation ul.social img{
        width: 24px;
        height: 24px;
        -webkit-filter: brightness(0) invert(1);
        filter: brightness(0) invert(1);
    }

    .main-navigation ul.social img:hover{
        filter: brightness(0) invert(35%) sepia(11%) saturate(1965%) hue-rotate(72deg) brightness(92%) contrast(94%);
        transition: 0.5s filter;
        -webkit-filter: brightness(0) invert(35%) sepia(11%) saturate(1965%) hue-rotate(72deg) brightness(92%) contrast(94%);
        -webkit-transition : -webkit-filter 500ms;
    }
    
    .main-navigation li#logo_center a {
        padding: 2.7em 0em;
        font-size: 0.42em;
        height: 3em;
        width: 16em;
        display: block;
        background: url("../img/lebgamedev_logo_menu.png");
        background-repeat: no-repeat;
        background-position:center;
        background-size: 16em 3em;
    }

    .main-navigation li#logo_center a:hover {
        background: url("../img/lebgamedev_logo_menu_broken.png");
        background-repeat: no-repeat;
        background-position:center;
        background-size: 16em 3em;
        transition: .5s background;
    }
}