/* General */
body {
	font-size:1rem;
	font-family: 'Barlow', sans-serif;
	background:#dfe0cc;
}
img {
	max-width:100%;
}
p {
	margin:0;
	padding:0;
}
.wrapper {
	width:1440px;
	min-width:280px;
	margin:4rem auto;
	margin-bottom:0;
}
/* Alert */

.alert-box {
	position:fixed;
	top:0;
	width:100%;
	z-index:1;
}
.alert-box p {
	background:#a7a695;
	font-size:0.8rem;
	padding: 1rem 2rem;
	margin:0;
	color:#ebecdf;
	text-align: center;
	box-shadow: inset 0 0 5px rgba(0,0,0,0.25);
	border-bottom: 1px solid #dfe0cc;
}
.alert-box a {
	color: #fff;
}
.alert-box a:visited {
	color: #ebecdf;
}
.alert-box a:hover {
	color: #ebecdf;
}
/* Header */
.header {
	display:flex;
	align-items: baseline;
	padding: 0;
}
.logo {
	flex-grow: 1;
}
.logo h1 {
	font-size:1.5rem;
	line-height:1.4rem;
	font-weight:400;
	color:#a7a695;
}
.logo h1 a {
	color:#000;
	text-decoration:none;
}
.logo h1 a:hover {
	text-decoration:underline;
}

/* Navigation */
.navigation {
	flex-grow: 6;
}
.navigation ul {
	text-align:right;
	padding-left:0;
	list-style-type:none;
}
.navigation ul li {
	display:inline;
	margin-left: 1rem;
	font-size:1.25rem;
	line-height:1.4rem;
}
.navigation ul li:first-child {
	margin-left:0;
}
.navigation ul li a {
	color:#000;
	text-decoration:none;
	font-weight:500;
}
.navigation ul li a:hover {
	text-decoration:underline;
}
.navigation ul li a:visited {
	color:#000;
}
.navigation ul li > span {
  	font-size:0.75rem;
  	color:#666;
}

/* Project Carousel */
.carousel {
	margin-top:1rem;
	text-align:center;
	width:100%;
}

.carousel-cell {
	margin:0 0 3rem 0;
}
.picture-frame {
	display:flex;
	justify-content: center;
	height:720px;
	margin-bottom: 72px;
	overflow:hidden;
	background:#000;
}
.picture-frame-small {
	height:100%;
	width:auto;
	margin-bottom: 0;
}
.picture-frame-small > img {

}
.carousel-cell .picture-frame img {
	object-fit: contain;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}
.carousel-cell h3 {
	font-weight:400;
	font-size: 1rem;
	line-height: 1.4rem;
	margin: 1rem 1rem 0 1rem !important;
	padding: 0 !important;
}
.carousel-cell p {
	font-size: 0.85rem;
	line-height: 1.25rem;
	margin: 0 1rem;
	padding: 0;
}
.carousel-cell p.description {
	margin-bottom: 1.25rem;
	color:#666;
}
.carousel-cell a {
	border:1px solid #a7a695;
	padding:0.5rem 0.75rem;
	color:#666;
	text-decoration:none;
}
.carousel-cell a:hover {
	text-decoration:none;
}
.carousel-cell a:visited {
	color:#000;
}

/* Dots */
.slick-dots {
    top: 744px;
    bottom:auto;
}

/* Prev & Next */
/* 
.carousel .slick-prev {
	left:48px;
}
.carousel .slick-next {
    right:48px;
}
.carousel .slick-prev, .slick-next {
    width: 24px !important;
    height: 24px !important;
    top: 764px !important;
}
.carousel .slick-prev::before, .carousel .slick-next::before {
    font-family: sans-serif;
    font-size: 1rem;
    color: #a7a695;
    opacity:1;
}



.content {
	font-size:1rem;
	display: grid;
 	grid-template-columns: 70% 30%;
}
.content .column {
	padding-right:0;
}
.content .column:first-child {
	padding-right:2rem;
}
.content .column h2, .content .column h3 {
	margin-top:0;
}
.content .column p {
	margin-bottom:1.4rem;
}
.content .quote {
	font-size:0.85rem;
	color:#666;
}
.content .quote span.author {
	margin-top:0.5rem;
	font-style:italic;
}
.content .column ul {
	list-style-type:none;
	padding:0;
}
.content .column ul li {
	font-size:0.85rem;
	margin-bottom:0.25rem;
}
.content .column ul li span {
	color:#666;
	font-weight:700;
}
 */
 

/* Contact */




/* Responsive */
@media screen and (max-width: 1920px) {
	.wrapper {
		margin:4rem auto 0;
	}
	.logo h1 {
		font-size:1.5rem;
		line-height:1.4rem;
	}
	.navigation ul li {
		font-size:1.25rem;
		line-height:1.4rem;
	}
}
@media screen and (max-width: 1472px) {
	.wrapper {
		width:auto;
		margin:4rem;
		margin-bottom:0;
	}
	.logo h1 {
		font-size:1.5rem;
		line-height:1.4rem;
	}
	.navigation ul li {
		font-size:1.15rem;
		line-height:1.4rem;
	}
	.picture-frame {
		height:540px;
		margin-bottom: 64px;
	}
	.picture-frame-small {
		height:100%;
	}
	.slick-dots {
		top: 556px;
		bottom:auto;
	}
}
@media screen and (max-width: 1336px) {
	.picture-frame {
		height:440px;
		margin-bottom: 64px;
	}
	.slick-dots {
		top: 456px;
		bottom:auto;
	}
}
@media screen and (max-width: 1024px) {
	.wrapper {
		margin:2rem;
		margin-top:4rem;
		margin-bottom:0;
	}
	.logo h1 {
		font-size:1.5rem;
		line-height:1.4rem;
	}
	.navigation ul li {
		font-size:1rem;
		line-height:1.4rem;
	}
	.content {
		font-size:1rem;
		display: grid;
		grid-template-columns: 60% 40%;
	}
	.content .column:first-child {
		padding-right:2rem;
	}
	.picture-frame {
		height:440px;
		margin-bottom: 64px;
	}
	.slick-dots {
		top: 456px;
		bottom:auto;
	}
}
@media screen and (max-width: 768px) {
	.navigation ul li {
		font-size:1rem;
		line-height: 1.25rem;
		margin-left: 0.5rem;
	}
	.picture-frame {
		height:440px;
		margin-bottom: 64px;
	}
	.slick-dots {
		top: 456px;
		bottom:auto;
	}
	.picture-frame-small {
		height:100%;
	}	
	/* 
	.content {
		font-size:0.85rem;
		display: grid;
		grid-template-columns: auto;
	}
	.content .column {
		padding-right:0;
	}
	.content .column:first-child {
		padding-right:0;
	}
	.carousel-cell {
		margin-bottom: 1.5rem;
	}
	.content .column h2 { 
		font-size:1rem;
	}
	.content .column h3 {
		font-size:0.85rem;
	}
	.content .column p {
		margin-bottom:1.4rem;
	}
	.content .quote {
		font-size:0.85rem;
		color:#666;
	}
	.content .quote span.author {
		margin-top:0.5rem;
		font-style:italic;
	}
	.content .column ul {
		list-style-type:none;
		padding:0;
	}
	.content .column ul li {
		font-size:0.85rem;
		margin-bottom:0.25rem;
	}
	.content .column ul li span {
		color:#666;
		font-weight:700;
	}
 */
}
@media screen and (max-width: 640px) {
	.alert-box {
		margin-top:0;
		min-width:320px;
	}
	.alert-box p {
		
	}
	.wrapper {
		min-width:288px;
		margin:1rem;
		margin-top: 4rem;
		margin-bottom:0;
	}
	.logo {
		text-align:center;
	}
	.header {
		display:block;
		padding: 0.125rem 0 0.5rem 0;
	}
	.navigation ul {
		display:grid;
		grid-template-columns: auto;
		text-align:center;
	}
	.navigation ul li {
		text-align:center;
		display:inline;
		margin-left:0;
		font-size:0.85rem;
		line-height: 1.4rem;
	}
	.picture-frame {
		height:200px;
	}
	.carousel {
		margin-top:0;
	}
	.carousel-cell h3 {
		font-size: 0.85rem;
	}
	.carousel-cell p {
		font-size: 0.75rem;
	}
	.picture-frame {
		margin-bottom:0;
	}
	.slick-dots {
		display:none !important;
	}
}