*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}
a {
	text-decoration:none;
	color:#000;
}

a:hover{
	color:#777;
}
body{
	background:#f8f8f8;
    font-family: 'Montserrat', sans-serif;
}
h1,h2,h3{
	font-weight:700;
	letter-spacing:0.2em;
}
#header{
	display:block;
	width:100%;
	height:80px;
	position:relative;
	padding:0 45px;
}
#header #logo{
	width:350px;
	display:block;
	top:30px;
	position:relative;
}
#header #logo img{
	width:100%;
	height:auto;
}

/* MOBILE BURGER */

#mobile-burger{
	display:block;
	height:30px;
	width:40px;
	position:absolute;
	right:45px;
	top:25px;
	text-align:center;
	cursor:pointer;
}

#mobile-burger svg{
	width:100%;
}
#mobile-burger svg .st0{
	fill:#777777;
}

#mobile-burger:hover svg .st0{
	fill:#222;
}
/* MAIN NAV */

#main-nav{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.95);
	display:flex;
	align-items: center;
	z-index:100;
	visibility:visible;
	opacity:1;
	transition: z-index 0s, opacity 0.3s, visibility 0s;
}

#main-nav.hidden{
	visibility:hidden;
	z-index:-100;
	opacity:0;
	transition: z-index 0s 0.3s, opacity 0.3s, visibility 0s 0.3s;
	
}

#main-nav .close, #buy-print .close{
	position:absolute;
	top:25px;
	right:45px;
	width:30px;
	height:30px;
	cursor:pointer;
}
#main-nav .close .st0{
	fill:#c9c9c9;
}

#main-nav .close:hover .st0{
	fill:#fff;
}
#buy-print .close{
	right:25px;
}
#buy-print .close .st0{
	fill:#777;
}
#buy-print .close:hover .st0{
	fill:#222;
}
#main-nav ul{
	list-style:none;
	text-align:center;
	display:block;
	width:100%;
}
#main-nav li{
	margin:20px 0;
}
#main-nav li a{
	color:#c9c9c9;
	font-weight:300;
	font-size:20px;
	letter-spacing:0.1em;
	text-transform:lowercase;	
}
#main-nav li a:hover{
	color:#fff;
}
/* CAROUSEL */

#carousel-wrapper{

}

/*Homepage Carousel */

.hp-carousel{
	list-style:none;
	height:calc(100vh - 270px);
	opacity:0;
	transition:opacity 1s 1s;
}

.hp-carousel li{
	width:29%;
	margin:0;
	text-align:center;
	text-transform:lowercase;
	opacity:0.3;
	transition:opacity 1s;
	height:calc(100vh - 270px);
	display:flex;
	align-items: center;
	flex-wrap:wrap;
	position:relative;
}
@media screen and (max-width: 900px){
	.hp-carousel li{
		width:40%;
	}
}

@media screen and (max-width: 640px){
	.hp-carousel li{
		width:60%;
	}
}
@media screen and (max-width: 480px){
	.hp-carousel li{
		width:80%;
	}
}
.hp-carousel li .inner{
	
}

.hp-carousel .category-title{
	width:100%;
	height:60px;
	display:flex;
	align-items: center;
	width:100%;
	text-align:center;
}

.hp-carousel h3{
	font-weight:300;
	letter-spacing:0.5em;
	font-size:17px;
	max-width:90%;
	display:inline-block;
	margin:0 auto;
}

.hp-carousel li.is-selected, .hp-carousel li:hover{
	opacity:1;
}




.hp-thumbnail{
	width:100%;
	padding:20px 20px 0 20px;
}

.hp-thumbnail a{
	display:block;
}

.hp-thumbnail img{
	width:80%;
	height:auto;
	display:inline-block;
}
.carousel{
	list-style:none;
	opacity:0;
	transition:opacity 1s 3s;
}
.carousel li{
	width:85vw;
	margin:0 7.5vw;
	height:calc(100vh - 270px);
	display:inline-block;
	vertical-align:middle;
}
.carousel li .img-wrapper{
	display:block;

	position:relative;
	text-align:center;
}
	
.carousel li .img{
	position:relative;
	display:inline-block;
	margin:0 auto;
	height:100%;
	max-height:80vh;
	max-height:calc(100vh - 270px);

}

.carousel li .img img{
	display:block;
	max-width:100%;
	max-height:100%;
	position:relative;
	object-fit: contain;
	max-height:80vh;
	max-height:calc(100vh - 270px);
	opacity:0;
	transition:opacity 0.4s;
	-webkit-transition:opacity 0.4s;
}
.carousel li .img img.flickity-lazyloaded, .carousel li .img img.flickity-lazyerror{
	opacity:1;
}
.carousel li .img.fillwidth { 
	top:50vh;
	top:calc(50vh - 135px);
	transform:translateY(-50%);
}
.carousel li .img.fillheight { 
	}

.carousel li .img .img-info{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.8);
	padding:5%;
	opacity:0;
	transition:opacity 0.4s;
	text-align:left;
	color:#fff;
	display:flex;
	align-items: center;
}
.carousel li.is-selected .img:hover .img-info{
	opacity:1;
}
.carousel li .img .img-info .text{
	max-width:600px;
	position:relative;
	left:50px;
	transition:left 0.4s;
}
.carousel li.is-selected .img:hover .img-info .text{
	left:0px;
}
.carousel li .img .img-info h3, .carousel li .img .img-info p{
	
}
.carousel li .img .img-info h3, .carousel li .img .img-info h3 a{
	text-transform:uppercase;
	font-size:24px;
	line-height:1em;
	letter-spacing: 0.15em;
	color:#f2f2f2;
}

.carousel li .img .img-info p{
	line-height:1.6em;
	font-size:12px;
	font-weight:300;
	color:#ccc;
	margin:10px 0;
}

.carousel li .img .img-info p.client, .carousel li .img .img-info p.description{
	font-size:12px;
	margin:5px 0 20px 0;
	font-weight:400;
	letter-spacing:0.3em;
	text-transform:lowercase;
	color:#f2f2f2;
	line-height:1em;
}
.carousel li .img .img-info p.client strong{
	font-weight:500;
}

.carousel li .img .img-info p a{
	color:#f2f2f2;
	font-weight:600;
	text-transform: uppercase;
	font-size:10px;
	letter-spacing: 0.25em;
}
.img-info a{
	cursor:pointer;
	display:inline-block;
	height:20px;
	line-height:20px;
}
.img-info a.arrow:before, .img-info a.shop:before{
	content:'\f061';
	font-family:'FontAwesome';
	color:#777;
	transition:color 0.3s;
	font-size:11px;
	position:relative;
	top:-1px;
	display:inline-block;
	text-align:left;
	width:20px;
	text-indent:2px;
}
.img-info h3 a.arrow{
	padding-left:30px;
	position:relative;
	font-size:20px!important;
}
.img-info h3 a.arrow:before{
	font-size:22px;
	position:absolute;
	top:0;
	left:0;
	
}
.img-info a.shop:before{
	content:'\f290';
	text-indent:0px;
}
.img-info a.arrow:hover:before, .img-info a.shop:hover:before{
	color:#fff;
}

/* CAROUSEL NAV */
.carousel-nav{
	list-style:none;
	margin-top:20px;
	opacity:0;
	transition:opacity 2s 3s;
	max-width:100%;
}
.carousel-nav li{
	width:45px;
	height:45px;
	display:inline-block;
	cursor:pointer;
	margin:0 2px;
}

.carousel-nav li img{
	width:100%;
	height:100%;
	filter:grayscale(1) brightness(90%);
	transition:filter 0.3s, padding 0.3s;
	padding:3px;
}

.carousel-nav li.is-selected img{
	filter:grayscale(0) brightness(100%);
	padding:0;
}
.carousel-nav li:hover img{
	filter:grayscale(0) brightness(110%);
	padding:0;
}
/*TOOLTIP*/

#tooltip{
	position:absolute;
	height:30px;
	background:rgba(150,150,150,0.95);
	color:#fff;
	opacity:0;
	transition:opacity 0.2s 0.8s, left 0.2s 0.8s, transform 0.2s 0.8s, z-index 0s 1s;
	border-radius:5px;
	padding:0 20px;
	display:inline-block;
	transform:translate(0,-10px);
	transform-origin: bottom center;
	z-index:-1;
}
#tooltip:after{
	content:'';
	width:0px;
	height:0px;
	left:50%;
	margin-left:-5px;
	top:30px;
	position:absolute;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 10px solid rgba(150,150,150,0.95);
}

#tooltip.left:after{
	left:15px;
}
#tooltip.right:after{
	right:15px;
	left:auto;
}
#tooltip.visible{
	opacity:1;
	transform:translate(0,0);
	z-index:1;
	transition:opacity 0.2s 0s, left 0.2s 0s, transform 0.2s 0s, z-index 0s 0s;
}
#tooltip h4{
	font-weight:700;
	text-transform:uppercase;
	line-height:30px;
	font-size:9px;
	letter-spacing:0.2em;
	text-align:center;
	white-space: nowrap;
	color:#fff;
}
/* TITLE */
#title{
	height:30px;
	text-align:center;
}
#title h1{
	font-weight:300;
	text-transform: lowercase;
	color:#111;
	text-align:center;
	font-size:18px;
	margin:20px 0;
	position:relative;
	transition:transform 1s 2s;
	transform:scale(1.2) translate(0, -35vh);
	display:inline-block;
	letter-spacing:0.5em;
}
#title h1.loaded{
	transform:scale(1) translate(0, 0);
}

/* CONTENT PAGE */
hr{
	margin:20px 0;
	display:block;
	width:100%;
	height:1px;
	background:#dadada;
	border:none;
}
hr.first{
	margin:0 0 40px 0;
}
#main-content{
	width:90%;
	max-width:1024px;
	margin:20px auto;
	color:#333;
	font-size:0;
	background: #fcfcfc;
	padding: 2.5%;
}
#main-content img{
	max-width:100%;
	height:auto;
	margin-bottom:20px;
}
#main-content .portrait img{
	height:auto;
	width:200px;
	margin-bottom:20px;
}
#main-content .lhs{
	width:200px;
	margin-right:50px;
	display:inline-block;
	vertical-align:top;
}
#main-content .rhs{
	width:calc(100% - 250px);
	display:inline-block;
	vertical-align:top;
}

#main-content h1{
	text-transform:uppercase;
	font-size:22px;
}

#main-content h3{
	text-transform:uppercase;
	font-size:14px;
}

#main-content p{
	line-height:1.7em;
	font-size:15px;
	margin:15px 0;
	letter-spacing:0.04em;
}

#main-content .small p{
	font-size:13px;
	}
#main-content p strong, #main-content a strong{
	font-weight:500;
}

p .tel, p .mob, p .email, p .linked-in, p .twitter{
	font-weight:500;
}

p .tel:before, p .mob:before, p .email:before{
	content:'t';
	display:inline-block;
	width:30px;
	text-align:left;
	color:#777;
	font-weight:600;
}

p .mob:before{
	content:'m';
}

p .email:before{
	content:'e';
}
p .linked-in:before{
	content:'\f0e1';
	font-family:'FontAwesome';
	width:30px;
	text-align:left;
	display:inline-block;
	color:#777;
	position:relative;
	top:-1px;
}
p .twitter:before{
	content:'\f099';
	font-family:'FontAwesome';
	width:30px;
	text-align:left;
	display:inline-block;
	color:#777;
	position:relative;
	font-size: 17px;
	top: 1px;
}
/* PURCHASE PAGE MODAL*/

#buy-print{
	position:fixed;
	width:100%;
	height:100%;
	display:flex;
	align-content: center;
	align-items: center;
	top:0;
	left:0;
	z-index:800;
	background:rgba(0,0,0,0.7);
	padding:5%;
	font-size:0;
	z-index:100;
	visibility:visible;
	opacity:1;
	transition: z-index 0s, opacity 0.3s, visibility 0s;
}
#buy-print.hidden{
	visibility:hidden;
	z-index:-100;
	opacity:0;
	transition: z-index 0s 0.3s, opacity 0.3s, visibility 0s 0.3s;
}
#buy-print .inner{
	display:block;
	margin:0 auto;
	padding:20px;
	background:#f8f8f8;
	position:relative;
	max-height:80vh;
	display:flex;
	align-items:stretch;
}

#buy-print h1{
	font-size:18px;
	text-transform: uppercase;
}
.col2{
	max-width:45%;
	display:flex;
	align-items: center;
}
.col2:last-of-type{
	margin-left:20px;
}
.imagePreview{
}
.imagePreview img{
	width:auto;
	height:auto;
	max-height:60vh;
	max-height:calc(75vh - 40px);
	max-width:100%;
	object-fit:contain;
	display:block;
}
#photo-details{
	display:table;
	border-collapse: collapse;
	margin:10px 0;
}
#photo-details p{
	display:table-row;
	font-size:12px;
	line-height:1.5em;
}
#photo-details p span{
	display:table-cell;
	padding:5px 15px 5px 0;
}
#pp-submit{
	border:none;
	background:#222;
	color:#f8f8f8;
	border-radius:2px;
	height:30px;
	line-height:30px;
	font-family: 'Montserrat', sans-serif;
	font-weight:700;
	letter-spacing:0.2em;
	font-size:10px;
	text-transform:uppercase;
	padding:0 10px;
	cursor:pointer;
	-webkit-appearance: none;
}
#pp-submit:hover{
	background:#777;
}

/* CLIENT LIST */
.client{

}

.client-name{
	font-size:13px!important;
	letter-spacing:0.2em;
	color:#777;
	text-transform:lowercase;
	margin:1.8em 0!important;
	line-height:1.2em!important;
}
.client-name a{
	color:#111;
}
.client-name a:hover{
	color:#555;
}
.client-name a:after{
	content:'\f08e';
	font-family:'FontAwesome';
	margin-left:5px;
	font-size: 10px;
	color: #bbb;
	top: -5px;
	position: relative;
}
.col3-wrapper{
	margin:20px -20px;
	display:flex;
	justify-content: space-between;
}
.col3{
	display:inline-block;
	vertical-align:top;
	max-width:30%;
	padding:0 20px;
}
.client-title{
	height: 50px;
	display: flex;
	align-items: flex-end;
}
.client-title h3{
}
@media screen and (max-width: 860px){
	.flickity-prev-next-button{
		display:none;
	}
	#header{
		padding: 0 5%;
	}
	#mobile-burger{
		right:5%;
	}
	#main-nav .close{
		right:5%;
	}
	#title h1{
	transform:scale(1) translate(0, -37vh);
	}
	.imagePreview img{
		max-width:110px;
		max-height:110px;
	}
	#buy-print .inner{
		flex-wrap:wrap;
	}
	#main-content{
		width:100%;
		padding:2.5% 5%;
		background:none;
	}
	.col2{
		width:100%;
		max-width:100%;
	}
	.col2:last-of-type{
		margin-left:0;
		margin-top:20px;
	}
	.col3-wrapper{
		display:block;
	}
	.col3{
		width:100%;
		max-width: 100%;
	}
}

@media screen and (max-width: 720px){
	#main-content .rhs{
		width:100%;
	}
@media screen and (max-width: 480px){
	#mobile-burger{
	width:30px;
	height:30px;
	}
	.carousel li .img .img-info h3{
		font-size:18px;
	}
	.carousel li .img .img-info p.client, .carousel li .img .img-info p.description{
		font-weight:500;
		font-size:11px;
		letter-spacing:0.2em;
	}
}
@media screen and (max-width: 460px){
	#header #logo{
	width:calc(100% - 48px);
	display:block;
	top:27px;
	position:relative;
	}
	#buy-print h1{
		font-size:17px;
	}
}

@media screen and (max-width: 375px) and (max-height: 680px){
	.carousel li{
	width:88vw;
	margin:0 6vw;
	height:calc(100vh - 300px);
	}
	.carousel li .img{
	max-height:calc(100vh - 300px);
	}
	.carousel li .img img{
	max-height:calc(100vh - 300px);
	}
	.carousel li .img.fillwidth { 
	top:calc(50vh - 150px);
	}
}

@keyframes title-animation{
    0%   {background-color: red;}
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    100% {background-color: green;}
}