/* ====================
 * REPOSNSIVE LAYER - MEDIA QUERIES
 * ==================== */

/* --- Tablets & Desktop ---
 *
 * ============================================================== */
@import url(main.desktop.css) (min-width:768px);


/* ---
 *
 * ============================================================== */
@media only screen and (min-width: 480px)
{
	#primary-nav-toggle {
		padding: 24px 15px 27px;
		font-size: 19px;
	}
		#primary-nav-toggle .menu-label:before {
			top: 0
		}
}	

/* --- Mobile
 *
 * ============================================================== */
@media only screen and (max-width: 767px)
{
	
}


/* --- Tablet
 *
 * ============================================================== */
@media only screen and (min-width: 768px)
{
	#footer .col-links .btn {
		float: right;
		clear: none
	}
	#footer .links-icons {
		display: inline;
    	float: none;
	}
}


/* --- Desktop ---
 *
 * ====================================================================================================================== */
@media only screen and (min-width: 992px)
{
	#primary-nav {
		left: 340px
	}
		#primary-nav .navbar-nav {
			text-align: center;
		}
		#primary-nav li {
			font-size: 19px;
		}	
		#primary-nav li > a {
			padding: 10px 25px 8px;
		}
		#primary-nav li > a span {
		    padding-bottom: 4px;
		}
		
	.showcase-content {
		margin-top: 25px
	}
		.showcase-content-inner {
			padding: 22px 10px;
			font-size: 22px
		}
		.showcase-btn {
			font-size: 28px
		}
		.showcase-content .primary {
			font-size: 41px
		}
	
	.tagline > .container:before {
		margin: 0 131px 0 128px
	}
		
	#footer .col-links .heading {
		float: right;
		margin-right: 0
	}
	#footer .col-links .btn {
		clear: right;
		margin-top: 15px;
	}
	#footer .links-icons {
		clear: both;
   		float: right;
	}
	
}


/* --- ExLarge ---
 *
 * ====================================================================================================================== */
@media only screen and (min-width: 1200px)
{
	#primary-nav {
		left: 400px;
	}
		#primary-nav li > a {
			padding-left: 35px;
			padding-right: 35px;
		}
		
	/* === SHOWCASE === */
	.showcase > .container {
		padding-top: 20px;
		padding-bottom: 10px
	}
	.showcase-content {
		margin-top: 35px
	}
	
	.tagline > .container:before {
		margin: 0 196px 0 127px
	}
		
}
