/* General menu styling */

@font-face {
    font-family: 'ArsenalRegular';
    src: url('fonts/Arsenal-Regular-webfont.eot');
    src: url('fonts/Arsenal-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Arsenal-Regular-webfont.woff') format('woff'),
         url('fonts/Arsenal-Regular-webfont.ttf') format('truetype'),
         url('fonts/Arsenal-Regular-webfont.svg#ArsenalRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ArsenalItalic';
    src: url('fonts/Arsenal-Italic-webfont.eot');
    src: url('fonts/Arsenal-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Arsenal-Italic-webfont.woff') format('woff'),
         url('fonts/Arsenal-Italic-webfont.ttf') format('truetype'),
         url('fonts/Arsenal-Italic-webfont.svg#ArsenalItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ArsenalBold';
    src: url('fonts/Arsenal-Bold-webfont.eot');
    src: url('fonts/Arsenal-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Arsenal-Bold-webfont.woff') format('woff'),
         url('fonts/Arsenal-Bold-webfont.ttf') format('truetype'),
         url('fonts/Arsenal-Bold-webfont.svg#ArsenalBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ArsenalBoldItalic';
    src: url('fonts/Arsenal-BoldItalic-webfont.eot');
    src: url('fonts/Arsenal-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Arsenal-BoldItalic-webfont.woff') format('woff'),
         url('fonts/Arsenal-BoldItalic-webfont.ttf') format('truetype'),
         url('fonts/Arsenal-BoldItalic-webfont.svg#ArsenalBoldItalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

.menu {

	position: relative;

	margin: 0;

	padding: 5px 0 0 0;

	line-height: 22px;

}

	

	/* The main navigation link containers */

	.menu>li {

		display: block;

		float: left; /* Displaying them on the same line */

		margin: 0;

		padding: 0;

	}



		/* The main navigation links */

		.menu>li>a {

			/* Layout */

			display: block;

			position: relative;

			padding: 10px 10px;



			/* Text */

			font-family: 'ArsenalRegular',Arial, Helvetica, sans-serif;

			color: #fff;

			/*font-size: 15px;*/

			text-decoration: none;



			/* Background */

			background: #background-color:#252525; /* For older browsers */

			background: rgba(37, 37, 37, 1.0); /* Transparent background for modern browsers */

			

			/* Making the color to change on hover with a transition */

			-webkit-transition: color .3s ease-in;

			-moz-transition: color .3s ease-in;

			-o-transition: color .3s ease-in;

			-ms-transition: color .3s ease-in;

		}



		/* Changing the color on hover */

		.menu>li>a:hover, .menu>li:hover>a {

			color: #0071d7;

		}



		/* The links which contain dropdowns menu are wider, because they have a little arrow */

		.menu>.dropdown>a {

			padding: 10px 30px 10px 20px;

		}



		/* The arrow indicating the dropdown 

		.dropdown>a::after {

			 content: "";

			 position: absolute;

			 top: 35%;

			 right: 13%;

			 width: 7px;

			 height: 7px;

			 -webkit-transform: rotate(45deg);

			 -ms-transform: rotate(45deg);

			 -moz-transform: rotate(45deg);

			 -o-transform: rotate(45deg);

			 border-bottom: 1px solid #fff;

			 border-right: 1px solid #fff;

			}



		/* Changing the color of the arrow on hover 	

		.dropdown>a:hover::after, .dropdown:hover>a::after {

			border-color: #0071d7;

		}

*/

		/* The submenus */

		.menu ul {

			position: absolute;

			margin: 0;

			padding: 12px;

			list-style: none;

			display: block;

		}



		/* General layout settings for the link containers of the submenus */

		.menu ul li {

			position: absolute;

			top: -9999px; /* Hiding them */

			height: 0px; 

			display: block;

			margin: 0;

			padding: 0;



			/* Making them to expand their height with a transition, for a slide effect */

			-webkit-transition: height .2s ease-in;

			-moz-transition: height .2s ease-in;

			-o-transition: height .2s ease-in;

			-ms-transition: height .2s ease-in;

		}



		/* Displays the submenu links, by expading their containers (with a transition, previously defined) and by repositioning them */

		.dropdown:hover>ul>li {

			height: 100%;

			position: relative;

			margin-top: 0px;

			top:auto;

		}



			/* The submenu links */

			.menu ul li a {

				/* Layout */

				padding: 4px 20px;

				width: 250px;

				display: block;

				position: relative;



				/* Text */

				font-family: 'ArsenalRegular', Arial, Helvetica, sans-serif;

				color: #bbb;

				text-decoration: none;

				font-size: 13px ;

				

				/* Background & effects */

				background: #background-color:#252525;

				background: rgba(37,37, 37, 1.0);

				-webkit-transition: color .3s ease-in, background .3s ease-in;

				-moz-transition: color .3s ease-in, background .3s ease-in;

				-o-transition: color .3s ease-in, background .3s ease-in;

				-ms-transition: color .3s ease-in, background .3s ease-in;

			}



			/* Changing the link's color and background on hover */

			.menu ul li:hover>a, .nav ul li a:hover {

				color: #0071d7;

				background: rgba(34, 34, 34, 1.0); 

			}

			#DM:hover {

				color:#004b93; 

			}

			

			#Event:hover {

				color:#C2000A;

			}

			

			#Media:hover {

				color:#DD3B00;

			}

			

			#Design:hover {

				color:#FFB60C;

			}

			

			#Intell:hover {

				color:#40A3FF;

			}

			#Loyalty:hover {

				color:#2A9C22;

			}

			#outsourcing:hover {

				color:#B043A0;

			}

			#Experience:hover {color:#BA0035;

			}

			#open {}



			/* Making the level 2 (or higher) submenus to appear at the right of their parent */

			.menu ul .dropdown:hover ul {

				left: 160px;

				top: 0px;

			}



			/* The submenu links have a different arrow which indicates another dropdown submenu */

			.menu ul .dropdown a::after{

				width: 6px;

				height: 6px;

				border-bottom: 0;

				border-right: 1px solid #fff;

				border-top: 1px solid #fff;

				top: 12px;

			}



			/* Changing the color of the arrow on hover */

			.menu ul .dropdown:hover>a::after, .nav ul .dropdown>a:hover::after {

				border-right: 1px solid #0fd0f9;

				border-top: 1px solid #0fd0f9;

			}