/* CSS Document */

#menu-container {

	width: auto;

	margin: 0 auto;	

}

 .toggle, [id^=drop] {

 display: none;

}

/* Giving a background-color to the nav menu-container. */

nav {

	width: auto; float: right; font-family: 'Roboto', sans-serif;

	margin: 0;

	padding: 0;

	position:relative; z-index:1;

}

/* Since we'll have the "ul li" "float:left"

 * we need to add a clear after the menu-container. */



nav:after {

	content: "";

	display: table;

	clear: both;

}

/* Removing padding, margin and "list-style" from the "ul",

 * and adding "position:reltive" */

nav ul {

	margin: 0;

	padding: 0;

	list-style: none;

	position: relative;

}

/* Positioning the navigation items inline */

nav ul li {

	margin: 0 0.7vw;

	text-transform: uppercase;

	font-weight: 400;

	display: inline-block;

}

nav ul li ul {

	background-color: #31bce6; border-radius: 0.3vw; margin: 0.1vw 0 0 0; padding: 0.3vw 0;

}

/* Styling the links */

nav a {

	display: block;

	padding: 0.3vw 0.5vw 0.3vw 0.5vw; border-radius: 0.3vw;

	color: #fff;

	font-size: 0.8vw; letter-spacing: 0.05vw;

	text-decoration: none; border: solid 0.15vw rgba(255, 255, 255, 0);

	    font-size: 13px;

}

aside.scroll nav a { color: #000;}

nav ul ul li a {

	color: #fff;

	font-size: 0.9vw; text-transform: capitalize;

	padding: 0.8vw 1vw;

}

nav ul ul li a:hover {

	color: #fff;

	background: #169fc8;

}

nav ul li ul li:hover {

	background: #31bce6;

}

/* Background color change on Hover */

nav a:hover {

	border: solid 0.15vw #fff;

	color: #fff; transition: all .25s ease-in-out;

}

aside.scroll nav a:hover {border: solid 0.15vw #9e1c20;	color: #fff; background: #9e1c20; transition: all .25s ease-in-out;}

/* Hide Dropdowns by Default

 * and giving it a position of absolute */

nav ul ul {

	display: none;

	position: absolute;/* has to be the same number as the "line-height" of "nav a" */



}

/* Display Dropdowns on Hover */

nav ul li:hover > ul {

	display: inherit;

}

/* Fisrt Tier Dropdown */

nav ul ul li {

	width: auto;

	float: none;

	display: list-item;

	position: relative;

}

/* Second, Third and more Tiers	

 * We move the 2nd and 3rd etc tier dropdowns to the left

 * by the amount of the width of the first tier.

*/

nav ul ul ul li {

	position: relative;/* has to be the same number as the "width" of "nav ul ul li" */ 

}

/* Change ' +' in order to change the Dropdown symbol */

li > a:after {

	content: '';

}

li > a:only-child:after {

	content: '';

}





/* Media Queries

--------------------------------------------- */



@media all and (max-width : 768px) {

aside.scroll nav a { color: #fff;}

nav{position: absolute; left: 0; right: 0;}

nav a {

	display: block;

	padding: 4vw;

	color: #fff;

	background: #9e1c20;

	font-size: 3.3vw; font-weight:600;

	text-decoration: none; text-align: center;

}

.m-center{text-align: center; padding: 3vw !important;}

nav {

	margin: 0; width: 100%;

}

/* Hide the navigation menu by default */

	/* Also hide the  */

.toggle + a,  .menu {

	display: none;

	width: auto;

}

/* Stylinf the toggle lable */

.toggle {

	display: block;

	background-color: #9e1c20;

	padding: 5vw;

	text-transform: uppercase;

	color: #FFF;

	font-size: 3.5vw; letter-spacing: 0.5vw;

	font-weight: 700;

	text-decoration: none;

	border: none;

}

.toggle:hover {

	background-color: #810f12;

}

/* Display Dropdown when clicked on Parent Lable */

[id^=drop]:checked + ul {

	display: block;

}

/* Change menu item's width to 100% */

nav ul li {

	display: block;

	width: 100%;

}

nav ul ul .toggle,  nav ul ul a {

	padding: 4vw;

}

nav ul ul ul a {

	padding: 4vw;

}

nav a:hover,  nav ul ul ul a {

	background-color: #1197bf;

}

nav ul li ul li .toggle,  nav ul ul a,  nav ul ul ul a {

	padding: 3vw;

	color: #FFF;

	font-size: 4.5vw;

}

nav ul li ul li .toggle,  nav ul ul a {

	background-color: #1197bf;

}

nav ul ul li a {

	font-size: 4.5vw;

	padding: 4vw;

}

/* Hide Dropdowns by Default */

nav ul ul {

	float: none;

	position: static;

	color: #ffffff;/* has to be the same number as the "line-height" of "nav a" */

}

/* Hide menus on hover */

nav ul ul li:hover > ul,  nav ul li:hover > ul {

	display: none;

}

/* Fisrt Tier Dropdown */

nav ul ul li {

	display: block;

	width: 100%;

}

nav ul ul ul li {

	position: static;/* has to be the same number as the "width" of "nav ul ul li" */ 



}

}

 @media all and (max-width : 330px) {

nav ul li {

	display: block;

	width: 94%;

}

}