/*
-----------------------------------------------
Site: The Citadel - Landing Page - Responsive Styles
Author: EnergyHill
Version: 1.0 
Last Update: 06/23/15

Notes: 
*The following styles are consistent with The Citadel landing page only. 
*Please refer to global.css for header/footer.
*Pleaser refer to styles.css for desktop/master styling
-----------------------------------------------*/
/*Responsive Tablet*/
@media only screen and (min-width: 0) and (max-width: 980px) {
	/*Campus Spotlights*/
	.spotlight,
	.spotlight.last {
		margin: 0 1.5% 2.8%;
		width: 47%;
	}
	.spotlight .title {
		font-size: 1.4em;
	}
	.spotlight p a:hover .cta {
		text-decoration: none;
	}

	/*Content Nav*/
	#content-nav a:hover span.link-copy {
		color: #09203a;
		background: transparent;
	}

	/*Begin You Journey*/
	#begin-journey li {
		width: 23%;
	}
	#begin-journey li.large {
		margin-bottom: 12px;
		width: 100%;
	}
	#begin-journey li:hover a span.img-over {
		display: none;
	}
	#begin-journey li img {
		width: 100%;
	}
	#begin-journey span.title {
		font-size: 1.2em;
	}

	/*Bottom Content*/
	.bottom-content {
		padding: 131px 1.7% 0;
		width:	96.6%;
	}
	#news .story.first {
		margin-right: 2%;
	}
	#news .story {
		width: 49%;
	}

	#news .story p a:hover .cta {
		text-decoration: none;
	}

	.bottom-content-nav li.last a:hover {
		color: #09203a;
		background-color: transparent;
	}

	.link-to-newsroom a {
		top: 20.9px;
		font-size: 1.25em;
	}

	/*Motivational*/
	#motivational div.copy {
		padding-left: 35px;
		font-size: 2.8em;
	}
}

/*Responsive Mobile*/
@media only screen and (min-width: 0) and (max-width: 748px) {
	/*Landing Page - Width Resets*/
	#content-nav li,
	.bottom-content,
	#news .story,
	.video-player {
		padding: 0;
		width: 100%;
		max-width: 100%;
	}
	
	/*Campus Spotlights*/
	#campus-spotlights {
		border-top: 1px solid #593b3d;
	}
	#campus-spotlights h3 {
		margin: 33px 0px 32px;
	}
	.spotlight,
	.spotlight.last {
		float: none;
		margin: 0 auto 13px;
		width: 88%;
	}
	.spotlight .title {
		font-size: 1.7em;
		line-height: 32px;
	}
	.spotlight p {
		padding-top: 10px;
		padding-bottom: 7px;
		min-height: 0;
		font-size: 1em;
		line-height: 21px;
	}
	.spotlight p span.copy {
		display: block;
		height: auto;
		overflow: visible;
	}
	.spotlight p a {
		padding-top: 12px;
		font-size: 1.9em;
	}

	/*Content Nav*/
	#content-nav {
		float: left;
		margin-top: 7px;
		height: auto;
	}
	#content-nav ul {
		margin-top: 48px;
	}
	#content-nav li {
		margin: 0 0 60px;
	}
	#content-nav a {
		width: 80%;
	}
	#content-nav a span.link-icon {
		margin: 12px auto 24px;
		width: 86px;
		height: 85px;
	}
	#content-nav a.apply-now span.link-icon {background-position: 0 -56px;}
	#content-nav a.request-info span.link-icon {background-position: -86px -56px;}
	#content-nav a.schedule-visit span.link-icon {background-position: -172px -56px;}
	#content-nav a.virtual-tour span.link-icon {background-position: -258px -56px;}
	#content-nav a.summer-classes span.link-icon {background-position: -344px -56px;}
	#content-nav a span.link-copy {
		font-size: 1.95em;
	}

	/*Begin Journey*/
	#begin-journey {
		clear: both;
		float: left;
	}
	#begin-journey h3 {
		margin: 52px 0px 25px;
	}
	#begin-journey li {
		margin-left: 0;
		width: 100%;
	}
	#begin-journey img {
		width: 100%;
	}
	#begin-journey li.large {
		margin-bottom: 11px;
	}
	#begin-journey span.title,
	#begin-journey li.large span.title {
		font-size: 1.9em;
		line-height: 53px;
	}
	#begin-journey li.large a:hover span.img-over {
		display: none;
	}

	/*Bottom Content (News)*/
	.bottom-content-wrap {
		float: left;
		height: auto;
		background-position: center bottom;
	}
	.bottom-content {
		position: relative;
		padding-bottom: 70px;
	}
	.bottom-content-nav {
		position: static;
		margin: 0;
	}
	.bottom-content-nav li.active {
		padding: 10px 0;
		width: 100%;
		text-align: center;
		font-size: 2.7em;
		border: 0;
	}
	.bottom-content-nav li.last {
		position: absolute;
		bottom: 0;
		left: 0;
		padding: 9px 0;
		width: 100%;
		background-color: #e5e5e5;
		z-index: 3;
	}
	.bottom-content-nav li.last a {
		float: none;
		margin: 0 auto;
		padding: 12px 0;
		width: 90%;
		font-size: 1.9em;
		text-align: center;
		border: 2px solid #09203a;
	}

	/*News*/
	#news .story img {
		width: 100%;
	}
	#news .story p {
		padding: 6px 6.5% 20px;
		width: 87%;
		line-height: 24px;
		font-size: 1.2em;
		border: 0;
	}
	#news .story p a {
		padding-top: 9px;
		font-size: 1.5em;
	}

	.link-to-newsroom {
		margin-bottom: 30px;
		padding: 0 2% 0 4.5%;
		width: 89%;
	}
	.link-bg {
		width: 60%;
	}
	.link-to-newsroom a {
	}
	
	/*Motivational*/
	#motivational {
		margin: 26px auto;
		padding-bottom: 0;
		text-align: center;
	}
	#motivational div.copy {
		padding-left: 17px;
		font-size: 2.2em;
		line-height: 38px;
		text-align: left;
	}
	#motivational a.button {
		float: none;
		margin-top: 24px; 
	}

	/*Video Player*/
	.video {
		float: left;
	}
	.video-player {
		height: 348px;
	}
}
@media only screen and (min-width: 0) and (max-width: 480px) {
	.link-bg {
		width: 34%;
	}
	.bottom-content-wrap {
		max-height: 5000px;
	}
}