/* ============ NAV HEADER ============================================================ */
.main-nav nav { width: 100%; padding: 0; font-family: 'Lato', sans-serif; margin-bottom:20px; }
.main-nav nav ul { display: block; width:100%; text-align:right; }
.main-nav nav ul, .main-nav nav ul li { margin: 0px; }
.main-nav nav ul li ul li { font-weight:400; }

.main-nav nav ul li { display: inline; position: relative; }

.main-nav nav ul li a { display: inline-block; color:#000; text-decoration: none; font-size: 16px; text-transform:capitalize; background:transparent; }
.main-nav nav ul li a:hover { cursor: pointer; color:#fff; background:#008fd5; }

.main-nav nav ul ul { opacity: 0; filter: alpha(opacity=0); position: absolute; top:100%; left: 0; z-index: 999; background: #fff; height: 0px; overflow: hidden; width: 200px; -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); }
.main-nav nav ul li span { display: none; }
.main-nav nav ul li:hover ul { opacity: 10; filter: alpha(opacity=100); height: auto; overflow: auto; text-align:center;}
.main-nav nav ul ul li { float: none; display: list-item;  padding:  0em; }
.main-nav nav ul ul li a { display: block; line-height: 1em; text-transform: none; padding: 1em; text-transform:capitalize; }
.main-nav nav ul li:hover > a { text-decoration:underline; }

@media only screen and (max-width: 479px) {
	.main-nav nav ul li { padding:  0.5em 0em; }
	.main-nav nav ul li a { padding: 0.1em 1em 0.1em 1em; }
}

@media only screen and (min-width: 480px) {
	.main-nav nav ul li { padding:  1em 0em; }
	.main-nav nav ul li a { padding: 0.1em 1em 0.1em 1em; }
	
}

@media only screen and (min-width: 768px) {
	.main-nav nav ul li { padding:  1.5em 0em; }
	.main-nav nav ul li a { padding: 2em 1em 2em 1em; }
	
}

@media only screen and (min-width: 960px) {
	.main-nav nav ul li { padding:  2em 0em; }
	.main-nav nav ul li a { padding: 3em 3em 2em 3em; }
	
}
	

@media only screen and (min-width: 1220px) {
	.main-nav nav ul li { padding:  2.5em 0em; }
	.main-nav nav ul li a { padding: 3em 3.5em 2em 3.5em; }
	
}

@media only screen and (min-width: 1420px) {
	.main-nav nav ul li { padding:  3em 0em; }
	.main-nav nav ul li a { padding: 3em 4em 2em 4em; }
	
}