/* =============================================================================
   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: @gutter-width;
		opacity: 1;
	}

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

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

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

	.site-main {
		width: 65%;
	}

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

	.main-navigation {
		width: 100%;
	}

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

	/* Remove the negative margin and box-shadow */
	.section-title {
		padding-left: @gutter-width-small;
		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 {
		.site-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 */
	.site-content,
	.site-footer {
		padding-left: @gutter-width-small;
		padding-right: @gutter-width-small;
	}

	.site-title {
		margin-left: @gutter-width-small;
	}

	.site-description {
		margin-right: @gutter-width-small;
	}

	.cakifo-slider {
		margin-left: ( -(@gutter-width-small) );
		margin-right: ( -(@gutter-width-small) );
	}

	/* Turn 3 column layouts into a layout with a full width .site-main and two 50% width sidebars underneath */
	.layout-3c-c,
	.layout-3c-r,
	.layout-3c-l {
		.site-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: @gutter-width-small 0;
		border-bottom: 1px solid @post-border-color;
		margin-right: 0;
		opacity: 1 !important;

		&:hover,
		&:active {
			background-color: @highlight-bg;
		}

		.entry-title {
			margin: 0;
		}

		.thumbnail {
			float: left;
			margin: 0 @gutter-width-small 0 0;
		}
	}

	.section-title {
		margin-bottom: @gutter-width-small;
	}

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

	.image-info {
		margin-bottom: @gutter-width-small;
	}

} // 980px

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

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

	/* Make the main content full width and move the sidebars underneath it */
	.site-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: @gutter-width-small;
		}

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

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

	/* 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(@font-size-base);
		}

		.headline-meta {
			.font-size(@font-size-small);
		}

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

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

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

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

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

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

	.flexbox {
		.site-header .home-link {
			.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(@font-size-large);
		}

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

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

		.entry-summary {
			.font-size(@font-size-small);
		}
	}

	/* 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 */
	.comment-form {
		.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%;
	}
}