.container{
margin-top: 10px;
float:center;
}



/* Some stylesheet reset */
.nav, .nav ul {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	margin-top: 40px;
}

/* General layout styling */
.nav {
	height: 160;
	display: inline-block;
}


.nav>li {
	display: block;
	float: left;
}

	/* The divs containing the links and the submenus */
	.nav>li>div {

		/* Layout */
		position: relative;
		width: 120px;
		height: 260px;
		margin-right: 5px;
		overflow: hidden;
		cursor: pointer;

		/* Text, background & effects */
		text-align: center;
		background: #00afdd;
		box-shadow: 0px 1px 2px rgba(30, 30, 30, .3);
		-webkit-transition: all .3s;
		-moz-transition: all .3s;
		-o-transition: all .3s;
		-ms-transition: all .3s;
	}

	/* The hover state of the divs containing the links & submenus */
	.nav div:hover {
		/* Increasing the size of the div */
		-webkit-transform: scale(1.1);
		-ms-transform: scale(1.1);
		-moz-transform: scale(1.1);
		-o-transform: scale(1.1);
		/* Changing the background */
		background: #fff;
		z-index: 5;
	}

	/* The main links of the navigation */
	.nav>li>div>a {
		/* Layout */
		top: 0px;
		position: relative;
		display: block;
		height: 100px;
		padding-top: 65px;

		/* Text */
		font-family: 'Terminal Dosis', sans-serif;
		text-decoration: none;
		font-size: 20px;
		font-weight: normal;
		color: #fff;
		
		/* The transition effects */
		-webkit-transition: all .3s;
		-ms-transition: all .3s;
		-moz-transition: all .3s;
		-o-transition: all .3s;
	}

	/* Creating the blur effect */
	.nav:hover div>a {
		opacity: .3;
		text-shadow: 0px 0px 5px #fff,
					 0px 0px 5px #fff,
					 0px 0px 9px #fff; 
	}


	/* The hover state of the main links */
	.nav div>a:hover, .nav li:hover a {
		top: -4px;
		text-shadow: none;
		opacity: 1;
		font-size: 23px;
		color: #29cef1;
	}

	/* Moving the main link to make room for the submenu */
	.nav .nested a:hover, .nav .nested:hover a {
		top: -60px;
		height: 160px;
	}

	/* The submenu */
	.nav ul {
		position: absolute;
		top: -9999px;
		margin: auto;
		display: block;
		width: 120px;
		text-align: center;
		opacity: 0;
		-webkit-transition: .5s opacity ease-out;
		-ms-transition: .5s opacity ease-out;
		-moz-transition: .5s opacity ease-out;
		-o-transition: .5s opacity ease-out;
	}

	/* Displaying the submenu */
	.nav li div:hover ul {
		top: 35px;
		color: #fff;
		opacity: 1;
	}


	/* The submenu links */
	.nav div:hover ul li a {
		color: #00afdd;
		font-family: 'Droid Sans', Arial, Helvetica, sans-serif;
		font-size: 12px;
		text-decoration: none;
		-webkit-transition: color .3s ease-out;
		-ms-transition: color .3s ease-out;
		-moz-transition: color .3s ease-out;
		-o-transition: color .3s ease-out;
	}

	/* The color of the submenu links on hover */
	.nav div ul li a:hover {
		color: #000;
	}

	/* The blue-white links */
	/* The background of the main links */
	.nav>li>.blue-white {
		background: #00afdd;
	}

	/* The background of the main links on hover */
	.nav>li>.blue-white:hover {
		background: white;
	}

	/* The text color of the main links */
	.nav>li>.blue-white>a {
		color: #fff;
	}

	/* The text color of the main links on hover */
	.nav>li>.blue-white:hover a {
		color: #00afdd;
	}

	/* The color of the submenu links on hover */
	.nav .blue-white ul li a:hover {
		color: black;
	}

	/* The brown-white links */
	.nav>li>.brown-white {
		background: #a33724;
	}

	.nav>li>.brown-white:hover {
		background: white;
	}

	.nav>li>.brown-white>a {
		color: #fff;
	}

	.nav>li>.brown-white:hover a {
		color: #a33724;
	}

	.nav .brown-white ul li a:hover {
		color: black;
	}

	/* The orange-white links */
	.nav>li>.orange-white {
		background: #eb8606;
	}

	.nav>li>.orange-white:hover {
		background: white;
	}

	.nav>li>.orange-white>a {
		color: #fff;
	}

	.nav>li>.orange-white:hover a {
		color: #eb8606;
	}

	.nav .orange-white ul li a:hover {
		color: black;
	}

	/* The yellow-white links */
	.nav>li>.yellow-white {
		background: #e9c405;
	}

	.nav>li>.yellow-white:hover {
		background: white;
	}

	.nav>li>.yellow-white>a {
		color: #fff;
	}

	.nav>li>.yellow-white:hover a {
		color: #e9c405;
	}

	.nav .yellow-white ul li a:hover {
		color: black;
	}

	/* The red-white links */
	.nav>li>.red-white {
		background: #dc3306;
	}

	.nav>li>.red-white:hover {
		background: white;
	}

	.nav>li>.red-white>a {
		color: #fff;
	}

	.nav>li>.red-white:hover a {
		color: #dc3306;
	}

	.nav .red-white ul li a:hover {
		color: black;
	}

	/* The green-white links */
	.nav>li>.green-white {
		background: #58ad0b;
	}

	.nav>li>.green-white:hover {
		background: white;
	}

	.nav>li>.green-white>a {
		color: #fff;
	}

	.nav>li>.green-white:hover a {
		color: #58ad0b;
	}

	.nav .green-white ul li a:hover {
		color: black;
	}

	/* The pink-white links */
	.nav>li>.pink-white {
		background: #cf2f4c;
	}

	.nav>li>.pink-white:hover {
		background: white;
	}

	.nav>li>.pink-white>a {
		color: #fff;
	}

	.nav>li>.pink-white:hover a {
		color: #cf2f4c;
	}

	.nav .pink-white ul li a:hover {
		color: black;
	}

	/* The turqoise-white links */
	.nav>li>.turqoise-white {
		background: #59b5a6;
	}

	.nav>li>.turqoise-white:hover {
		background: white;
	}

	.nav>li>.turqoise-white>a {
		color: #fff;
	}

	.nav>li>.turqoise-white:hover a {
		color: #59b5a6;
	}

	.nav .turqoise-white ul li a:hover {
		color: black;
	}

	/* The black-white links */
	.nav>li>.black-white {
		background: #000;
	}

	.nav>li>.black-white:hover {
		background: white;
	}

	.nav>li>.black-white>a {
		color: #fff;
	}

	.nav>li>.black-white:hover a {
		color: black;
	}

	.nav .black-white ul li a:hover {
		color: #1cbae8;
	}