@media (min-width: 992px){

    #mobile-menu-btn{
		display:none;	
	}
	
    #wrap-mainmenu ul.menu {
        margin: 0;
        padding: 0;
		text-align: center;
    }

    #wrap-mainmenu ul.menu li {
        margin: 0;
        padding: 0;
		display: inline-block;
        position: relative;
        list-style: none;
    }

    #wrap-mainmenu ul.menu li a{
		margin: 0;
        padding: 0 15px;
        height: 42px;
        line-height: 42px;
        color: #fff;
		text-transform: uppercase;
        text-decoration: none;
		font-family: 'Poppins', sans-serif;
        font-size: 15px;
		font-weight: 400;
        display: block;
        text-transform: uppercase;
		background: none;
		transition: all 0.5s;
    }
	
	#wrap-mainmenu ul.menu li a.special {
		border-radius: 3px;
		background: #ec1d25;
		color: #fff;
		font-size: 12px;
		font-family: 'Open Sans', sans-serif;
	}

	#wrap-mainmenu ul.menu li.parent a:after{
        content:'\f107';
        font-family:'FontAwesome';
		padding-left: 5px;
    }
	
    #wrap-mainmenu ul.menu li a:hover,
    #wrap-mainmenu ul.menu li a:focus,
	#wrap-mainmenu ul.menu li.active a{
        background: none;
		color: #ec1d25;
        text-decoration: none;
        cursor: pointer;
        outline: none;
		transition: all 0.5s;
    }
	
	#wrap-mainmenu ul.menu li a.special:hover,
    #wrap-mainmenu ul.menu li a.special:focus,
	#wrap-mainmenu ul.menu li.active a.special{
		background: #000;
		color: #fff;
	}
	
    #wrap-mainmenu ul.menu ul {
        display: none;
    }

    /*** LEVEL 2 ***/
	
    #wrap-mainmenu ul.menu li:hover ul{
        display: block;
		transition: all 0.5s;
    }

    #wrap-mainmenu ul.menu ul {
        width: 300px;
        float: left;
        position: absolute;
        top: 42px;
        left: 0;
        z-index: 9999;
        margin: 0;
		background: #ec1d25;
    }

    #wrap-mainmenu ul.menu li ul li{
		width: 100%;
		float: left;
        margin: 0;
		padding: 0;
    }
	
    #wrap-mainmenu ul.menu li.active ul li a,
    #wrap-mainmenu ul.menu ul li a{
        margin: 0px;
		height: auto;
        line-height: 150%;
        padding: 10px 15px;
        color: #fff;
        font-size: 14px;
		font-weight: 400;
        background: none;
		text-align: left;
		border: none;
		display: block;
		border-radius: 0;
    }

	#wrap-mainmenu ul.menu li.parent ul li a:after{
        content: '';
        font-family: 'FontAwesome';
        padding-left: 0;
    }

    #wrap-mainmenu ul.menu li:hover ul li:hover a,
    #wrap-mainmenu ul.menu li ul li.active a, 
	#wrap-mainmenu ul.menu li:hover ul li.active a {
        color: #fff !important;
		background: #000;
		border: none;
    }

    /*** LEVEL 3 ***/

    #wrap-mainmenu ul.menu li ul li ul {
        display: none !important;
    }
	
}

#mobile-menu-content {
	display: none;
	position: fixed;
	height: 100%;
	overflow: scroll;
	top: 0;
	right: 0;
	width: 240px;
	padding: 15px;
	margin: 0;
	list-style: none;
	background: #333;
	z-index: 10; /* Make sure the z-index is lower than the #page */
}

#mobile-menu-content ul{
	margin: 0;
	padding: 0;
}

#mobile-menu-content ul.small{
	font-size: 14px;
}

#mobile-menu-content ul li{
	margin: 0;
	padding: 0;
	list-style: none;
	display: block;
}

#mobile-menu-content a{
	display: block;
	color: #fff;
	padding: 10px 15px;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.05 );
}

#mobile-menu-content a:hover,
#mobile-menu-content a:focus{
	background: #ccc;
	color: #2c2c2c;
	text-decoration: none;
}

#mobile-menu-content li.parent{
	position: relative;
	z-index: 1;
}

#mobile-menu-content li.parent ul li a:before {
    content: '\f111';
    font-family: 'FontAwesome';
    font-size: 6px;
    padding-right: 10px;
	vertical-align: top;
}

#mobile-menu-content li.parent span.arrow{
	width: 45px;
	height: 45px;
	text-align: center;
	line-height: 45px;
	color: #fff;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    cursor: pointer;
}

#mobile-menu-content li.parent span.arrow:before{
	content: '\f078';
	font-family: 'FontAwesome';
}

#mobile-menu-content li.parent.active span.arrow:before{
	content: '\f077';
}

#mobile-menu-content li.parent.active li span.arrow{
	display: none;
}

#mobile-menu-content li.parent ul.nav-child,
#mobile-menu-content li.parent.active ul.nav-child ul.nav-child{
	display: none;
}

#mobile-menu-content li.parent.active ul.nav-child{
	display: block;
}

#mobile-menu-content li.parent.active ul.nav-child a {
    font-size: 15px;
}

@media (max-width: 991px) {
		
	#mobile-menu-btn {
		display: block;
		font-size: 0;
		font-weight: 400;
		right: 0;
		line-height: 36px;
		padding: 0 15px;
		position: absolute;
		text-decoration: none;
		text-transform: uppercase;
		top: 20px;
		color: #fff;
		z-index: 9999;
	}
	
	#mobile-menu-btn:after{
		content:'\f0c9';
		font-family:'FontAwesome';
		font-size: 40px;
	}
	
	#mobile-menu-btn > a,
	#mobile-menu-btn > a:hover,
	#mobile-menu-btn > a:focus{
		color: #fff;
		text-decoration: none;
		outline: none;
	}
	
	/* Animations */

	#page, #mobile-menu-content {
		-webkit-backface-visibility: hidden;
		-webkit-perspective: 1000;
	}

	/* Hide the menu unless it's animating or visible */
	.animating #mobile-menu-content, .menu-visible #mobile-menu-content {
		display: block;
	}

	/***
	* If the animating class is present then apply
	* the CSS transition to #page over 250ms.
	*/
	.animating #page {
		transition: transform .25s ease-in-out;
		-webkit-transition: -webkit-transform .25s ease-in-out;
	}

	/***
	* If the left class is present then transform
	* the #page element 240px to the left.
	*/	
	.animating.left #page {
		transform: translate3d( -240px, 0, 0 );
		-webkit-transform: translate3d( -240px, 0, 0 );
	}

	/***
	* If the right class is present then transform
	* the #page element 240px to the right.
	*/
	.animating.right #page {
		transform: translate3d( 240px, 0, 0 );
		-webkit-transform: translate3d( 240px, 0, 0 );
	}

	/***
	* If the menu-visible class is present then
	* shift the #page 240px from the right edge
	* via position: absolute to keep it in the 
	* open position. When .animating, .left and
	* .right classes are not present the CSS
	* transform does not apply to #page.
	*/
	.menu-visible #page {
		right: 240px;
	}
	
}