@media (min-width: 1450px){

    #mobile-menu-btn{
		display:none;	
	}
	
	#mainmenu{
		width: auto;
		display: block;
	}
	
    #mainmenu ul.menu{
		display: block;
        margin: 0;
        padding: 0;
		text-align: right;
    }

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

    #mainmenu ul.menu li a,
    #mainmenu ul.menu li .separator{
        padding: 0 12px;
        line-height: 45px;
        color: #fff;
		font-family: 'Quicksand', sans-serif;
        font-weight: 500;
		text-transform: uppercase;
        text-decoration: none;
        font-size: 13px;
        display: block;
        text-transform: uppercase;
		background: none;
		border: solid 1px transparent;
    }

	#mainmenu ul.menu li a.special{
		border: solid 1px #fff;	
	}
	
    #mainmenu ul.menu li.parent a:after,
    #mainmenu ul.menu li.parent .separator:after{
        content: '\f107';
        font-family: 'FontAwesome';
        font-weight: 100;
		position: absolute;
		top: 15px;
		left: 49%;
		display: none;
    }

    #mainmenu ul.menu li .separator:hover,
    #mainmenu ul.menu li a:hover,
    #mainmenu ul.menu li a:focus{
        color: #c8b8a8;
        text-decoration: none;
        cursor: pointer;
        outline: none;
    }

    #mainmenu ul.menu li.active .separator,
	#mainmenu ul.menu li.active a{
		color: #c8b8a8;
	}
	
	#mainmenu ul.menu li a.special:hover,
	#mainmenu ul.menu li a.special:focus,
	#mainmenu ul.menu li.active a.special{
		border: solid 1px #000;
		background: #fff;
		color: #000;
	}
	
    #mainmenu ul.menu ul {
        display: none;
    }

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

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

    #mainmenu ul.menu li ul li{
        margin: 0;
		padding: 0;
		display: block;
    }
	
	#mainmenu ul.menu li ul li:last-child{
		margin-left: 0;
	}
	
    #mainmenu ul.menu ul li a{
        margin: 0px;
        line-height: 150%;
        padding: 10px 20px;
        color: #000 !important;
        font-size: 14px;
		font-weight: 400;
        background: none;
		text-align: left;
		border: none;
		display: block;
    }

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

    #mainmenu ul.menu li.active ul li a{
        background: none;  
        color: #fff;
		border: none;
    }

    #mainmenu ul.menu li:hover ul li:hover a {
        color: #fff !important;
		background: #222;
		border: none;
    }

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

    /*** LEVEL 3 ***/

    #mainmenu ul.menu li ul li ul {
        display: none !important;
    }
	
    #mainmenu ul.menu li ul li:hover ul {
        display: block !important;
		top: 0;
		left: 100%;
    }
	
}

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

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

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

#mobile-menu-content ul li{
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	display: block;
	position: relative;
}

#mobile-menu-content a,
#mobile-menu-content .separator{
	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,
#mobile-menu-content .separator:hover,
#mobile-menu-content .separator:focus{
	background: #ccc;
	color: #2c2c2c;
	text-decoration: none;
}

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

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

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

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

#mobile-menu-content ul.menu li.parent.active ul.nav-child li.parent span.arrow:before{
	content: '\f054';
}

#mobile-menu-content ul.menu li.parent.active ul.nav-child li.parent.active span.arrow:before{
	content: '\f078';
}

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

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

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

#mobile-menu-content ul.menu li.parent.active ul.nav-child li.parent.active ul.nav-child{
	display: block;
}
	
@media (max-width: 1449px) {
	
	#mainmenu{
		display: none;
	}
	
	#mobile-menu-btn {
		display: block;
		font-size: 0;
		font-weight: 400;
		line-height: 36px;
		padding: 0 15px;
		text-decoration: none;
		text-transform: uppercase;
		color: #fff;
		position: absolute;
		top: 35px;
		right: 15px;
		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;
		transition: all 0.5s;
	}

	/***
	* 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: 300px;
	}
	
}

@media (max-width: 767px) {
	#mobile-menu-btn{
		margin: 0;
		left: auto;
		right: 0;
	}	
}