/*****

GLOBAL

*****/
@import url('https://fonts.googleapis.com/css?family=Open+Sans|Poppins');

body{
	background-color: #e0e0e0;
}

.container{
	background: #999999;
	border: 4px solid #FFFFFF;
	max-width: 80%;
	min-width: 345px;
	margin: 50px auto;
}

ul{
	padding: 0;
}

li {
	list-style-type: none;
}

nav a{
	text-decoration: none;
	padding: 0 10px;
}

p a, ul a{
	color: #86281f;
}

p a:hover, ul a:hover, .gallery-nav a:hover{
	border-bottom: 2px solid #e0e0e0;
}

header{
	display: flex;
	flex-wrap: wrap;
  	justify-content: space-evenly;
  	align-items: center;
  	padding: 20px 0;
}

main{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-evenly;
	margin: 0 auto;
	max-width: 95%;
}

.frame{
	background-color: #b6b6b6;
}

footer{
	text-align: center;
}

footer p{
	margin: 5px 0 ;
}

.shadow{
	box-shadow: 5px 7px 5px #858585;
	max-width: 100%;
}

.fineprint{
	font-size: .75rem;
}

.center{
	text-align: center;
}

/*****

INDEX

*****/
.image-container {
	position: relative;
}

.image {
	display: block;
}

.overlay {
	position: absolute;
	top: 235px;
	bottom: 0;
	left: 0;
	right: 0;
	color: #e0e0e0;
	background-color:rgba(0, 0, 0, 0.6);
	height: 33px;
	text-align: center;
}

.subjects{
	max-width: 1030px;
}
/*****

PHOTO GALLERY

*****/
.gallery-container{
	margin-top: 15px;
	text-align: center;

}

.gallery{
	display: flex;
	display: -webkit-flex;
	flex-flow: row wrap;
	-webkit-flex-flow: row wrap;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
}

.gallery img{
	padding: 5px 5px 0 5px;
}

.gallery span{
	display: none;
}

.gallery-nav a{
		margin: 0 10px;
		color: #86281f;
	}

/*****

CLIENTS

*****/
.clients, .collections, .press, .links, .catalog{
	padding: 0 10px;
}

/*****

CONTACT

*****/
.contact{
	margin: 0 10px;
}

/*****

ABOUT

*****/
.faq span{
	font-weight: bold;
}

.faq img{
	margin: 0 auto;
}

.faq{
	margin-bottom: 20px;
}

.faq img{
	display: block;
	margin: 0 auto;
	padding-top: 10px;
}

.bio{
	padding: 0 20px;
}

/*****

PRESS

*****/
.press img{
	max-width: 100%;
}

/*****

CATALOG

*****/
.catalog{
	text-align: center;
}
form{
	padding: 0 0 20px 0;
}

/*****

TYPOGRAPHY

*****/

h1, h2, h3, h4, h5, h6, nav a{
	font-family: 'Poppins', sans-serif;
	text-transform: uppercase;
}

p, a, ul li{
	font-family: 'Open Sans', sans-serif;
}

a{
	text-decoration: none;
}

nav a:hover{
	color: #E1DDDC;
}

.fineprint{
	padding: 20px 0 0 0 ;
}

/*****

ICONS

*****/

@font-face {
	font-family: 'icomoon';
	src:  url('../fonts/icomoon.eot?hjvxgp');
	src:  url('../fonts/icomoon.eot?hjvxgp#iefix') format('embedded-opentype'),
		  url('../fonts/icomoon.ttf?hjvxgp') format('truetype'),
		  url('../fonts/icomoon.woff?hjvxgp') format('woff'),
		  url('../fonts/icomoon.svg?hjvxgp#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'icomoon' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-facebook-with-circle:before {
	content: "\e900";
}
.icon-instagram-with-circle:before {
	content: "\e901";
}
.icon-twitter-with-circle:before {
	content: "\e903";
}

.social{
	padding: 20px 0 0 0;
}

.social span{
	font-size: 2rem;
}

.social span:hover{
	color: #86281f;
}

/*****

MEDIA QUERIES

*****/

@media screen and (max-width: 1158px) { /*Fix nav breakpoints*/
	.center{
		text-align: center;
	}
}

@media screen and (max-width: 591px) {
	.filler{							/*Hide filler images*/
		display: none;
	}
	p, li{								/*Make text smaller*/
		font-size: .875rem;
	}

	nav{
		padding-top: 15px;				/*Add padding between nav and logo*/
	}

	nav, .collections, .clients, .press, .links, .contact, .faq h1{
		text-align: center;				/*Center text*/
	}

}

@media screen and (max-width: 719px) { /*Center AH image*/
	.about img{
		display: block;
		margin: 0 auto;
	}
}

@media screen and (max-width: 1288px) { /*Fix nav breakpoints*/
	nav a{
		display: block;
	}
}

@media screen and (min-width: 1288px) { /*Make overlays show up on hover*/
	.overlay{
		opacity: 0;
		transition: .3s ease;
	}

	.image-container:hover .overlay {
		opacity: 1;
	}

}

@media screen and (max-width: 592px) { /*Fix overlay breakpoint*/
	.overlay{
		font-size: 1.1rem;
	}
}


/****Gallery*****/
@media screen and (min-width: 920px) {

	.gallery span{
		display: block;
	}

	.gallery{
		max-width: 50%;
		min-height: 580px;
		position: relative;
	}

	.thumbnail img{
		margin: 0.2%;
	}

	.thumbnail:hover{
		background-color: transparent;
	}

	.thumbnail span{
		/* CSS for enlarged image */
		position: absolute;
		background-color: #E1DDDC;
		padding: 0.5%;
		visibility: hidden;
		color: black;
		text-decoration: none;
	}

	.thumbnail:hover span{
		/* CSS for enlarged image */
		visibility: visible;
		top: 0%;
		left: 110%; /* Position where enlarged image should offset horizontally */
		z-index: 50;
		color:#333;
	}

	.gallery-nav{
		padding: 0 0 20px 20px;
	}

	footer{
		clear: both;
	}
}