/* =============================================================================
   Media Queries:  Max-width 1130px
   ========================================================================== */

@media screen and (max-width: 1130px) {
	/* Move the navigation arrows when the screen is smaller */
	.flex-direction-nav .flex-prev,
	.flex-direction-nav .flex-next {
		top: auto;
		bottom: 15px;
		.square(58px);

		&:after {
			font-size: 48px;
			line-height: 48px;
		}
	}

	.flex-direction-nav .flex-prev {
		left: @gutterWidth;
		opacity: 1;
	}

	.flex-direction-nav .flex-next {
		right: @gutterWidth;
		opacity: 1;
	}
}

/* =============================================================================
   Media Queries:  Max-width 1080px
   ========================================================================== */

@media screen and (max-width: 1080px) {

	#main {
		width: 65%;
	}

	#sidebar-primary,
	#sidebar-secondary {
		width: 32%;
	}

	.main-navigation {
		width: 100%;
	}

	/* Remove box-shadow and border-radius */
	#content,
	#footer {
		border-radius: 0;
		box-shadow: none;
	}

	/* Remove the negative margin and box-shadow */
	.section-title {
		padding-left: @smallGutterWidth;
		margin-left: 0;
		box-shadow: none;
	}

	/* Fluid width on the Recent Posts and Headlines lists */
	.recent-post {
		width: 23%;
		margin-right: 2%;
	}

	.headline-list {
		width: 48%;
		margin-right: 2%;
	}

	/* Prevent the sidebars on 3 column layouts from moving underneath the content */
	.layout-3c-c,
	.layout-3c-r,
	.layout-3c-l {
		#main {
			float: none;
			width: 50%;
		}

		#sidebar-primary,
		#sidebar-secondary {
			width: 20%;
		}
	}

	.layout-3c-c #sidebar-primary {
		margin-left: -740px;
	}

	.layout-3c-l {
		#sidebar-primary,
		#sidebar-secondary {
			margin-right: 1%;
		}

		#sidebar-secondary {
			float: right;
		}
	}

	.layout-3c-r #sidebar-secondary {
		margin-left: 2%;
	}
} // 1080px

/* =============================================================================
   Media Queries:  Max-width 980px
   ========================================================================== */

@media screen and (max-width: 980px) {

	/* Switch padding from 40px to 25px */
	#content,
	#footer {
		padding-left: @smallGutterWidth;
		padding-right: @smallGutterWidth;
	}

	#site-title {
		margin-left: @smallGutterWidth;
	}

	#site-description {
		margin-right: @smallGutterWidth;
	}

	/* Turn 3 column layouts into a layout with a full width #main and two 50% width sidebars underneath */
	.layout-3c-c,
	.layout-3c-r,
	.layout-3c-l {
		#main {
			clear: both;
			width: 100%;
			margin-left: 0;
			margin-right: 0;
		}

		#sidebar-primary,
		#sidebar-secondary {
			clear: none;
			width: 48%;
			margin-left: 0;
			margin-right: 0;
		}

		#sidebar-secondary {
			float: right;
		}
	}

	/* Show Recent Posts in one column */
	.recent-post {
		.clearfix;
		float: none;
		width: 100%;
		padding: @smallGutterWidth 0;
		border-bottom: 1px solid darken(@grayLighter, 5%);
		margin-right: 0;
		opacity: 1 !important;

		&:hover,
		&:active {
			#gradient > .horizontal(@highlightBlue, #f7fafc, 50%);
		}

		.entry-title {
			margin: 0;
		}

		.thumbnail {
			float: left;
			margin: 0 @smallGutterWidth 0 0;
		}
	}

	.section-title {
		margin-bottom: @smallGutterWidth;
	}

	/* Attachment meta */
	.image-info,
	.image-gallery {
		float: none;
		width: 100%;
	}

	.image-info {
		margin-bottom: @smallGutterWidth;
	}

} // 980px

/* =============================================================================
   Media Queries:  Max-width 768px
   ========================================================================== */

@media screen and (max-width: 768px) {

	/* Make the main content full width and move the sidebars underneath it */
	#main {
		float: none;
		width: 100%;
	}

	#sidebar-primary {
		float: left;
		width: 48%;
	}

	#sidebar-secondary {
		width: 48%;
		float: right;
	}

	/* Make the slider smaller */
	.slide {
		.thumbnail {
			max-width: 55%;
			margin-right: @smallGutterWidth;
		}

		// Remove the video
		.slider-video {
			display: none;
		}
	}

	.flex-control-nav {
		margin-top: @gutterWidth;
	}

	/* Make the pagination bigger */
	.pagination a,
	.pagination > span {
		padding: 18px 22px 17px;
		margin-bottom: 10px;
	}

	/* If there's 3 columns of footer widgets, turn them into 2 columns */
	#sidebar-subsidiary.three-col .widget-area {
		width: 48%;
		margin-right: 4%;

		+ .widget-area {
			margin-right: 0;
		}
	}

	/* Make the Category Headlines list smaller */
	.headline-list {
		.entry-title {
			.font-size(16);
		}

		.headline-meta {
			.font-size(14);
		}

		.thumbnail {
			max-width: 50px;
		}
	}
}

/* =============================================================================
   Media Queries:  Max-width 620px
   ========================================================================== */

@media screen and (max-width: 620px) {

	/* Turn the header and description into a single column */
	#branding {
		text-align: center;
	}

	#site-title,
	#site-description {
		float: none;
	}

	#site-description {
		margin: 20px 0 0;
	}

	.flexbox {
		#branding hgroup {
			.flex-direction(column);
		}

		#site-title,
		#site-description {
			margin: 0 auto 20px;
		}
	}

	/* Hide the slider */
	#slider {
		display: none;
	}

	/* Make the Recent Posts list smaller */
	.recent-post {
		.entry-title {
			.font-size(18);
		}

		.recent-posts-meta {
			.font-size(12);
		}

		.thumbnail {
			max-width: 150px;
			margin-bottom: 10px;
		}

		.entry-summary {
			.font-size(14);
		}
	}

	/* Make the Category Headlines list two columns */
	.headline-list {
		width: 100%;
		margin-right: 0;
	}

	/* Make the widget areas full width */
	.widget-area {
		width: 100% !important;
		float: none !important;
	}

	/* Gallery on attachment pages */
	.image-gallery .gallery-item {
		width: 25%;
	}

	/* Make the comment form inputs one column */
	#commentform {
		.form-author,
		.form-email {
			float: none;
			width: 100%;
		}
	}
}

/* =============================================================================
   Media Queries:  Max-width 480px
   ========================================================================== */

@media screen and (max-width: 480px) {

	/* Make sure the post format label and post title don't collide */
	.entry-header .post-format-link {
		top: -20px;
	}

	/* Hide the Recent Posts thumbnails */
	.recent-post .thumbnail {
		display: none;
	}

	/* Gallery on attachment pages */
	.image-gallery .gallery-item {
		width: 33%;
	}
}