/********************************
GENERAL
********************************/
* {
	box-sizing: border-box;
}

body {
	/* flexbox layout to make the footer sticky
	https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
	display: flex;						
	min-height: 100vh;
	flex-direction: column;

	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	color: dimgray;
}

header, footer {
	margin: 20px 5%;
}

img {
	max-width: 100%;
}

a {
	text-decoration: none;
	color: dodgerblue;
} 

a:visited {
	color: indigo;
}

a:hover {
	color: blueviolet;
} 

h1, h2 {
	font-weight: 300;
}

h1{
	font-size: 18pt;
}

p {
	font-size: 14pt;
	line-height: 145%;
	max-width: 65ex;
	text-align: justify;
}

/********************************
HEADER
********************************/

#title {
	font-size: 24pt;
	font-weight: 400;
	color: dimgray;
	letter-spacing: .02em;
}

#sub-title {
	font-size: 14pt;
	font-weight: 300;
	color: dimgray;
	letter-spacing: .07em;
}

.divider {
	display: none;
}

nav {
	margin-top: 20px;
	display: flex;
	justify-content: space-between;
	font-size: 15px;
	letter-spacing: .02em;
} 

.thin-margin-header nav {
	margin-right: 8px;
}

nav a, nav a:visited {
	color: gray;
}

nav a:hover {
	color: lawngreen;
}

nav a.selected {
	color: limegreen;
	/*color: aquamarine;*/
	/*color: lawngreen;*/
	/*color: mediumaquamarine;*/
	/*color: lightseagreen;*/
}

.thin-margin-header {
	margin: 5px 20px;
}

/********************************
MAIN CONTENT
********************************/

main {
	/* flexbox layout to make the footer sticky
	https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
	flex: 1;
}

/********************************
FOOTER
********************************/

footer {
	font-size: 0.75em;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-bottom: 5px;
}

#houzz {
	margin-top: 5px;
	margin-bottom: 0;
	text-align: center;
}

#copyright {
	text-align: right;
}

/********************************
PAGE: HOME
********************************/

#gallery {
	display: flex;
	flex-wrap: wrap;
}

 #gallery a {
	width: 100%;
}

#gallery img {
	display: block;
}

/********************************
PAGE: PORTFOLIO
********************************/

#portfolio {
	display: flex;
	flex-wrap: wrap;
}

#portfolio a {
	width: 100%;
	position: relative;
}

#portfolio img {
	display: block;
}

.caption {
	position: absolute;
	bottom: 0px;
	width: 100%;
	background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .6) 100%);
	color: white;
	font-size: 10pt;
	padding: 10px;
/*	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;*/
}

/********************************
PAGE: PROJECT
********************************/

.slick-gallery-container {
	/*background: dimgrey;*/
	background: #eee;
	padding: 50px;
}

.small-images, .large-image {
	max-width: 900px;
	margin: 0 auto 30px;
}

.large-image img {
	display: block;
	margin: 0 auto;
	margin-bottom: 5px;
	max-height: 90vh;
	object-fit: cover;
}

.large-image .portrait {
	object-fit: contain;  /*this prevents the portrait images from getting cropped*/
}

.large-image .drawing {
	max-height: none;  /*this prevents the drawings from getting cropped at the expense of them possibly being taller than the page height*/
}

.slick-prev:before, .slick-next:before {
	color: transparent;  /*this makes the default arrow (which uses a font) invisible*/	
	font-size: 40px;
}

.slick-prev, .slick-next {
	width: 40px;
	height: 40px;
}

.slick-prev, [dir='rtl'] .slick-next {
    left: -45px;
}

[dir='rtl'] .slick-prev, .slick-next {
    right: -45px;
}

.slick-prev:before {
	background-image: url("../images/icons/left-arrow-black.svg");
}

.slick-next:before {
	background-image: url("../images/icons/right-arrow-black.svg");
}

/********************************
PAGE: ABOUT
********************************/

#about {
	margin: 0 auto;
	padding: 0 5%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.about-block img {
	width: 100%;
}

.about-block p {
	font-size: 10pt;
	color: black;
}

/********************************
PAGE: CONTACT
********************************/

.contact-content {
	margin: 0 5%;
}

.name-email-phone {
	margin-bottom: 20px;
}

.name-email-phone p,
.address p {
	margin-top: 0;
	margin-bottom: 0;
}

.air-filters-2 {
	display: none;
}


/*#contact-info {
	display: flex;
	flex-flow: column wrap;
	justify-content: space-between;
	margin: auto 5%;
	align-items: stretch;
}

#contact-text {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

#contact-text > div {
	max-width: 100%;
}

#contact-image {
	object-fit: cover;
	min-height: 100%;
}*/

form {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 350px;
	background-color: lightgray;
	padding: 10px;
	color: black;
	border-radius: 5px;
}

label, input, textarea {
	display: block;
	width: 100%;
	/*margin: 5px 0;*/
	padding: 5px 7px;
	border-width: 0px;
	outline: none;
	font-size: 14pt;
	font-weight: 300;
	line-height: 145%;
}

textarea {
	height: 200px;
	resize: none;
}

input[type="submit"]{
	width: 100%;
	max-width: 200px;
	height: 60px;
	line-height: inherit;
	padding: 0 7px 0px;
	/*margin-top: 15px;*/
	margin: 15px auto 5px;
	/*font-weight: 400;*/
	background-color: dodgerblue;
	/*background-color: seagreen;*/
	color: white;
	border-radius: 5px;
}

input[type=text]:focus, input[type=email]:focus, textarea:focus {
	border: 1px solid silver;
}

iframe {
	width: 100%;
	height: 350px;
*/}