*{box-sizing: border-box;}
	ul {
	  	list-style: none;
	  	margin: 0;
	  	padding: 0;
		}
	a {text-decoration: none;}

	.top-menu {
		background: #3399FF;
		position: relative;
		font-family: "Comic Sans MS";
		top: 0px;
		height: 20px;
		}
	.top-menu:after, 
	.submenu:after {
	  	content: "";
  		display: table;
  		clear: both;
		}
	.top-menu > li {
	  	display: inline-block;
	  	float: left;
		}
	.top-menu > li > a {
		display: block;
		padding: 1px;
		font-size: 14px;
		text-transform: uppercase;
		letter-spacing: 1px;
		color: #FFFFFF;
		transition: .2s linear;
		width: 130px;
		text-align: center;
		text-shadow: 1px 1px 2px #FFFFFF;
		border-bottom: 1px solid #FFFFFF;
		}
	.top-menu > li > a:hover {
		color: #3399FF;
		font-size: 10pt;
		background-color: #FFFFFF;
		text-shadow: none;
		}
	.dropdown:after {
	  	content: "\f107";
	  	font-family: FontAwesome;
	  	margin-left: 10px;
	  	vertical-align: center;
		}
	.submenu {
		border-top: 1px solid #e5e5e5;
	  	box-shadow: 0 3px 5px 0 rgba(0,0,0,.07);
	  	background: white;
	  	padding: 25px 0;
	  	position: absolute;
	  	top: 100%;
	  	left: 0;
	  	width: 500px;
	  	z-index: 5;
  		opacity: 0;
  		visibility: hidden;
  		transform: translate3d(0,30px,0);
  		transition: .5s ease-out;
  		transform-origin: 0% 0%;
		}
	.top-menu > li:hover .submenu {
  		opacity: .9;
  		visibility: visible;
  		transform: translate3d(0,0,0);
		}
	.submenu > li {
		float: left;
		width: calc(100% / 2);
		padding: 0 10px;
		border-right: 1px solid #0000FF;
		}
	.submenu > li:last-child {border-right: none;}
	
	.submenu li a {
		display: block;
		padding: 5px 0;
		color: #0000FF;
		font-size: 14px;
		}
	.submenu li a:hover {
		font-size: 14px;
		color: #693C14;
		background: #84C1FF;
		}
	.submenu h3 {
		font-weight: 100;
		margin: 10px 0;
		font-family: Comic Sans MS;
		font-size: 14pt;
		color: #B71D0C;
		text-shadow: 2px 2px 1px #66CCFF;
		text-decoration: none;
		height: 16pt;
		}
	.container {
		max-width: 1165px;
	  	margin: 0 auto;
		}		
</style>
<style>@media(max-width:768px) {
  	.top-menu li {
  		width: 100%;
    	height: auto!important;
  		}
  	.top-menu > li {border-bottom: 1px solid #e5e5e5;}
  	.top-menu > li > a {padding: 18px}
  	.submenu {
    	position: relative;
    	display: none;
    	box-shadow: none;
    	padding: 0;
    	background: white;
  		}
  	.submenu > li {
    	border-right: none;
    	border-bottom: 1px solid #e5e5e5;
    	padding: 18px;
  		}
  	.submenu h3 {margin: 0 0 10px}
  	.submenu li:last-of-type {border-bottom: none}
  	.top-menu > li:hover .submenu {display: block;}
	}