/* Smartphones (landscape) ----------- */
@media screen and (max-device-width: 767px) and (orientation: landscape){
	.filters {
		margin-left: 0px;
	}
	.filters .btn img {
		max-width: 24px;
	}

	#mainContent {
		padding-left: 15px;
		padding-right: 15px;
	}

	.portrait {
		margin-left: 0px;
	}
	
	header .title {
		font-size: 30px;
	}
	/* when in landscape show two columns */
	.item {
		width: 46%;
		margin: 2%
	}
	
	.item.w2 {
		width: 96%;
		margin: 2%;
	}
}

/* Smartphones (portrait) ----------- */
@media screen and (max-device-width: 767px) and (orientation: portrait){
	.filters {
		margin-left: 0px;
	}
	.filters .btn img {
		max-width: 24px;
	}

	#mainContent {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

	.portrait {
		margin-left: 0px;
	}
	
	header .title {
		font-size: 30px;
	}

	/* Only one column of items in portrait mode */
	.item {
		width: 96%;
		margin: 2%;
	}

	.item.w2 {
		width: 96%;
		margin: 2%;
	}

	.masonry, .filterContainer {
		margin: 0px auto;
		width: 100%;
	}
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
	
	/* Four columns on a tablet */
	.item {
		width: 30%;
		max-width: 220px;
		margin: 10px;
	}
	
	.item.w2 {
		width: 60%;
		max-width: 460px;
		margin: 10px;
	}
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
	
	/* Four columns on a tablet */
	.item {
		max-width: 220px;
		margin: 10px;
	}
	
	.item.w2 {
		max-width: 460px;
		margin: 10px;
	}
}

/* When a desktop or laptop screen is set really small */
@media only screen 
and (min-width : 340px)
and (max-width : 739px)
and (min-device-width : 1025px ){
	header .title {
		font-size: 30px;
	}

	.filters {
		margin-left: 10px;
	}
	.filters .btn img {
		max-width: 24px;
	}

	#mainContent {
		padding-left: 15px;
		padding-right: 15px;
	}

	.portrait {
		margin-left: 0px;
	}

	/* Center on two columns */
	.grid-sizer {
		max-width: 220px;
		margin: 10px;
	}

	.item {
		width: 220px;
		margin: 10px;
	}
	
	.item.w2 {
		width: 220px;
		margin: 10px;
	}

	.masonry {
		margin: 0px auto;
		max-width: 480px;
	}
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 740px) 
and (max-width : 980px)
and (min-device-width : 1025px ){
	/* Styles */
	
	/* center on 3 columns */
	.grid-sizer {
		max-width: 220px;
		margin: 10px;
	}
	
	.item {
		max-width: 220px;
		margin: 10px;
	}
	
	.item.w2 {
		max-width: 460px;
		margin: 10px;
	}
	
	.masonry {
		margin: 0px auto;
		max-width: 720px;
	}
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 980px)
and (max-width : 991px)
and (min-device-width : 1025px ){
	.hidden-xs {
		display: none;
	}
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 980px)
and (min-device-width : 1025px ){
	/* Center on 4 columns */
	
	.item {
		max-width: 220px;
		margin: 10px;
	}

	.item.w2 {
		max-width: 460px;
		margin: 10px;
	}
	
	.masonry {
		max-width: 960px;
		margin: 0px auto;
	}
}


/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1220px)
and (min-device-width : 1025px ){
	/* Styles */
	
	.grid-sizer {
		width: 220px;
		margin: 10px;
	}
	
	.item {
		max-width: 220px;
		margin: 10px;
	}
	
	.item.w2 {
		max-width: 460px;
		margin: 10px;
	}
	
	/* There is space for a 5th column */
	.masonry {
		margin: 0px auto;
		max-width: 960px;
	}
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1460px)
and (min-device-width : 1025px ){
	/* 6 column layout */
	.grid-sizer {
		width: 220px;
		margin: 10px;
	}
	
	.item {
		max-width: 220px;
		margin: 10px;
	}
	
	.item.w2 {
		width: 460px;
		margin: 10px;
	}
	
	/* There is space for a 6th column */
	.masonry {
		margin: 0px auto;
		max-width: 1440px;
	}
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1700px)
and (min-device-width : 1025px ){

	/* 7 column layout */
	.grid-sizer {
		width: 220px;
		margin: 10px;
	}
	
	.item {
		max-width: 220px;
		margin: 10px;
	}
	
	.item.w2 {
		width: 460px;
		margin: 10px;
	}
	
	/* There is space for a 7th column */
	.masonry {
		margin: 0px auto;
		max-width: 1680px;
	}
}