/* Medium Screen */

@media(max-width: 479px) {
	.large-image {
		display: none;
	}
}

@media (min-width: 480px) {
	#title {
		/*font-size: 36pt;*/
	}

	nav {
		font-size: 20px;
	}

	.contact-info {
		display: flex;
		justify-content: space-between;
	}

	.small-images img {
		cursor: pointer;
		max-height: 120px;
		max-width: 173px;
	}
}

@media (min-width: 480px) and (max-width: 899px) {
	#gallery a {
		width: 50%;
	}

	#portfolio a {
		width: 50%;
	}



/*	#contact-text {
		flex-direction: row;
	}

	#contact-text > div {
		min-width: 50%;
	}*/
}

/* Navigation Menu Breakpoint */

@media (min-width: 630px){
	nav {
		margin-top: -20px;
		justify-content: flex-end;
	}

	nav a {
		margin-left: 20px;
	}

	#about {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.about-block {
		width: 45%;
	}

	.contact-text-and-image {
		display: flex;
		justify-content: space-between;
	}

	.contact-text {
		width: 48%;
		padding-right: 50px;
	}

	.contact-image {
		width: 52%;
		height: 39%;
		max-width: 360px;
		max-height: 270px;
		display: inline;
		padding: 0;
	}

	.contact-info {
		display: inherit;
	}

	.design-guide {
		margin-bottom: 5px;
	}

	.air-filters {
		display: none;
	}

	.air-filters-2 {
		display: inherit;
		width: 100%;
		max-width: 100%;
		margin: 10px 0 0 0;
	}
}

/* Large Screen */

@media (min-width: 900px) {
	#gallery a {
		width: 33.3333333%;
	}

	#gallery a img,
	#portfolio a img {
		width: 100%;
	}

	#gallery img {
		height: 32vh;
		object-fit: cover;
	}

	#portfolio a {
		width: 25%;
	}

	.about-block {
		width: 30%;
	}

	/* CONTACT PAGE */

	.contact-text {
		padding-top: 20px;
	}

	.contact-info {
		display: flex;
		flex-direction: row;
	}

	.design-guide,
	.air-filters {
		margin-top: 0;
	}

	.air-filters {
		display: inherit;
	}

	.air-filters-2 {
		display: none;
	}

	.contact-image {
		padding-top: 20px;
		width: 47%;
		max-width: 630px;
		/*margin-left: 10%;*/
		margin-bottom: 20px;
		padding-right: 0;
		height: auto;
		overflow: hidden;
	}

	.contact-image img {
		display: block;
		/*width: 280px;
		height: 210px;*/
		margin: 0 auto;
	}

	.form-and-map h1 {
		margin-top: 0;
	}





	/*
	#contact-info > div {
		width: 47%;
	}*/


}

@media (min-width: 1030px) {
	.slick-prev:before, .slick-next:before {
		font-size: 60px;
	}

	.slick-prev, .slick-next {
		width: 60px;
		height: 60px;
	}

	.slick-prev, [dir='rtl'] .slick-next {
	    left: -65px;
	}

	[dir='rtl'] .slick-prev, .slick-next {
	    right: -65px;
	}
}

@media (min-width: 1024px) {

/* HEADER ON LARGEST SCREEN SIZE */

	header,
	.thin-margin-header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 0;
		margin-bottom: 2px;
	}

	header a,
	.thin-margin-header a {
		display: flex;
		flex-direction: row;
	}

	#title {
		font-size: 21pt;
	}

	#sub-title {
		font-size: 21pt;
		margin-left: 15px;
	}

	nav {
		margin-top: 12px;
		font-size: 18px;
	}

	.thin-margin-header nav {
		margin-top: 10px;
	}

	/* CONTACT PAGE ON LARGEST SCREEN SIZE */

	.contact-content {
		max-width: 1300px;
	}

	.contact-text,
	.contact-image {
		max-width: 630px;
	}

	.form-and-map {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	#form,
	.map {
		width: 47%;
		max-width: 630px;
	}

	.small-images, .large-image {
		width: 130vh;            /*I'm assuming screens this big will be oriented horizontally*/
		max-width: 1280px;
	}

}

@media (min-width: 1100px) {
	#title {
		font-size: 23pt;
	}

	#sub-title {
		font-size: 23pt;
	}

	nav {
		font-size: 20px;
	}
