@tabletLandscape: 1024px;
@tabletPortrait: 768px;
@phoneLandscape: 480px;
@phonePortrait: 320px;


@media screen and (max-width: @phonePortrait) {

}

@media screen and (max-width: @phoneLandscape) and (min-width: @phonePortrait) {

	body {
		font-size: 125% !important;
		font-weight: 400;
		// background: teal !important;
	}

	h3 {
		margin-bottom: 1em;
	}

	nav {
		margin-top: 0.25em;
		line-height: 1.4em;

		&:first-of-type {
			margin-top: 2em;
		}

		li {
			display: inline;
			margin-right: 0.5em;
		}
	}

	.column {
		margin-right: 0;
		width: 100%;
	}

	.cb-slideshow {
		display: none;
		min-height: 210px;

		h1 {
			font-size: 2em;
			line-height: 1.2em;
			text-shadow: 0 1px #111;
		}
	}

	.main.landing {
		li.column {
			margin-top: 0.5em;

			&:first-of-type {
				margin-top: 0;
			}

			h2 {
				margin-top: 0.5em;
			}

			img {
				width: 100%;
			}
		}
	}

	nav.subnav {
		ul.tags {
			-webkit-column-count: 2;
			-moz-column-count: 2;
			column-count: 2;
			-webkit-column-gap: 5%;
			-moz-column-gap: 5%;
			column-gap: 5%;

			li {
				display: block;
				margin-bottom: 0.15em;
			}
		}

		.order-by {
			margin-top: 1em;
		}
	}

	.desktop {
		display: none;
	}

	.tablet {
		display: none;
	}

	.phone {
		display: block;
	}

	.not-desktop {
		display: block;
	}

	.not-tablet {
		display: block;
	}
	
	.not-phone {
		display: none !important;
	}
}

@media (min-width: @phoneLandscape) and (max-width: @tabletPortrait) {
	body {
		font-size: 135% !important;
		font-weight: 400;
		// background: red !important;
	}

	h3 {
		margin-bottom: 1em;
	}

	nav {
		line-height: 1.4em;
	}

	.column {
		margin-right: 14px;
		width: 230px;

		&:nth-child(3n){ 
			margin-right: 0 !important;
		}
	}

	.cb-slideshow {
		min-height: 440px;

		h1 {
			font-size: 2em;
			line-height: 1.6em;
		}
	}

	.desktop {
		display: none;
	}

	.tablet {
		display: block;
	}

	.phone {
		display: none;
	}

	.not-desktop {
		display: block;
	}

	.not-tablet {
		display: none;
	}
	
	.not-phone {
		display: block;
	}
}

@media (min-width: @tabletPortrait) {
	.column {
		margin-right: @gutter;
		width: @col-width;
	}

	.cb-slideshow {
		h1 {
			font-size: 3em;
		    line-height: 4em;
		}
	}

	.desktop {
		display: none;
	}

	.tablet {
		display: block;
	}

	.phone {
		display: none;
	}

	.not-desktop {
		display: block;
	}

	.not-tablet {
		display: none;
	}

	.not-phone {
		display: block;
	}
}

@media (min-width: @tabletLandscape) {
	.desktop {
		display: block;
	}

	.tablet {
		display: none;
	}

	.phone {
		display: none;
	}

	.not-desktop {
		display: none;
	}

	.not-tablet {
		display: block;
	}

	.not-phone {
		display: block;
	}
}