body {
	font-family:'avenir-next-world', sans-serif;
	background-color:#202020;
	color:hsla(0, 0%, 85%, .9);
	margin:0;
}

.logo {
	display:block;
	position:fixed;
	width:20%;
	margin-top:-2%;
	margin-left:-1%;
	z-index:1;
}

.side-nav {
	display:block;
	position:fixed;
	width:10%;
	top:14%;
	left:2%; 
	z-index: 2;
}

li.nav, .page-nav {
	font-size:1.1rem;
	line-height:1;
	color:hsla(0, 0%, 85%,.9);
	margin-bottom:.75rem;
}

li.nav > a, .page-nav > a, .footer-link > a {
	color:hsla(0, 0%, 85%, .9);
	display:block;
	text-decoration:none;
	font-weight:300;
}

.mobile-nav {
	display:none;
	position:fixed;
	width:10%;
	height:2vh;
	margin-left:86%;
	padding:2.5% 2%;
	background-color:none;
	text-align:right;
	z-index:10;
}

.sidenav {
  height:100%;
  width:0; /* 0 width - change this with JavaScript */
  position:fixed; /* Stay in place */
  z-index:1; /* Stay on top */
  top:0;
  right:0;
  background-color:hsla(0, 0%, 13%, .9);
  overflow-x:hidden;
  padding-top:3vh;
  transition:0.5s;
}

.closebtn {
	position:absolute;
	top:3%;
	right:2.5%;
	padding:0;
	font-size:3rem;
	line-height:0;
}

.closebtn {
	text-decoration:none;
}

.mini-nav > a { 
	font-size:2rem;
	line-height:1;
	color:hsla(0, 0%, 85%,.9);
	margin-bottom:.75rem;
	text-decoration:none; 
}

.img-block {
	display:block;
	position:relative;
	width:77%;
	padding:0 11.5%;
}

.img-narrow {
	display:block;
	position:relative;
	width:50%;
	padding:0 25%;
}

.first-block {
	display:block;
	position:relative;
	width:46%;
	padding:4% 27% 5% 27%;
}

.no-picture {
	padding-top:7%;
}

.arrow {
	display:block;
	position:relative;
	right:2%;
	margin-top:6%;
	margin-bottom:2%;
	text-align:right;
}

.footer {
	display:block;
	position:relative;
	width:100%;
	border-top:.5px solid hsla(0, 0%, 85%, .3);
	padding:1.2% 2% 2% 2%;
}

.footer-2 {
	display:block;
	position:relative;
	width:100%;
	border-top:.5px solid hsla(0, 0%, 85%, .3);
}

.contact {
	display:block;
	position:relative;
	float:left;
	width:46%;
	padding:1.2% 2% 2% 2%;
}

.postage-stamp {
	display:block;
	position:relative;
	float:left;
	width:10%;
	padding:2% 2% 2% 38%;
}

a {
	color:hsla(0, 0%, 85%, .9);
	font-weight:300;
	text-decoration:underline;
	text-underline-offset:.10rem;
	text-decoration-thickness:.5px;
}

a:hover, li.nav > a:hover, .page-nav > a:hover, .footer-link > a:hover {
	color:rgba(255, 66, 117, 0.9);
	text-decoration:none; 
}

li.nav > a.selected, a.selected {
	color:rgba(255, 66, 117, 0.9);
}

a.works {
	text-decoration:none;
}

p {
	font-size:1.4rem;
	line-height:1.5;
	font-weight:100;
	margin-top:0;
	margin-bottom:2rem;
}

h1 {
	font-size:3.8rem;
	line-height:1.2;
	font-weight:300;
	margin-top:0;
	margin-bottom:2rem;
}

h2 {
	font-size:2.6rem;
	font-weight:300;
	line-height:1.4;
	margin-top:0;
	margin-bottom:2rem;
}

h3 {
	font-size:1.8rem;
	line-height:1.4;
	font-weight:300;
	margin-top:0;
	margin-bottom:2rem;
}

h4 {
	font-size:1.6rem;
	line-height:1.4;
	font-weight:200;
	margin-top:0;
	margin-bottom:2rem;
}

h5 {
	font-size:1.15rem;
	line-height:1.4;
	font-weight:100;
	margin-top:0;
	margin-bottom:2rem;
}

h6 {
	font-size:1.8rem;
	font-weight:200;
	text-transform:uppercase;
	letter-spacing:.02rem;
	margin-top:0;
	margin-bottom:2rem;
}

b {
	color:hsla(0, 0%, 85%, .9);
	font-weight:300;
}

ul {
	list-style:none;
	padding-left:0;										
	max-width:83%;
}

li {
	font-size:1.3rem;
	line-height:1.4;
	color:hsla(0, 0%, 85%,.75);
	margin-bottom:1rem;
}

.no-margin {
	margin-bottom:0;
}

.less-margin {
	margin-bottom:1rem;
}

.smaller {
	font-size:.9rem;
}

.credits {
	color:hsla(0, 0%, 85%, .8);
	font-size:.75rem;
	text-align:right;
}

hr {
	border:.5px solid hsla(0, 0%, 85%, .33);
	margin-top:2.5rem;
	margin-bottom:1.5rem;
}

img {
	margin-bottom:-.32rem;
}

.scale-with-grid {
	width:100%;
	height:auto;
}

.collapsible {
	font-family:'avenir-next-world', sans-serif;
	background-color:transparent;
	color:hsla(0, 0%, 85%, .9);
	cursor:pointer;
	padding:0;
	padding-bottom:1rem;
	width:100%;
	border:none;
	border-bottom:.5px solid hsla(0, 0%, 85%,.28);
	text-align:left;
	outline:none;
	font-size:2rem;
	font-weight:200;
	line-height:1.4;
	margin-top:0;
	margin-bottom:2rem;
}

.active, .collapsible:hover {
	color:rgba(255, 66, 117, 0.9);
}

.collapsible:after {
	content:'\2335';
	color:hsla(0, 0%, 85%, .8);
	font-size:2rem;
	float:right;
	margin-left:5px;										 
}

.active:after {
	content: "\2212";
}

.content {
	padding:0;
	max-height:0;
	overflow:hidden;
	transition:max-height 0.2s ease-out;
	background-color:transparent;
}

/* Slideshow container */
.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides1, .mySlides2 {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color:hsla(0, 0%, 85%,.76);
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  text-decoration: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* Caption text */
.text {
  width:100%;
  background-color:#f2f2f2;
  font-size: 15px;
  position: absolute;
  text-align: left;
}

/* Number text (1/3 etc) */
.numbertext {
  color:hsla(0, 0%, 85%,.76);
  font-size: 12px;
  padding: 8px 12px;
  position:absolute;
  top:0;
  right:0;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}


@media (max-width: 912px) {
	.logo { width:22%;margin-top:-3%;margin-left:-2%; }
	.side-nav { display:none; }
	.mobile-nav { display:block; }
	.first-block { width:76%;padding:4% 12% 5% 12%; }
	.img-narrow { width:77%;padding:0 11.5%; }
	.no-picture { padding-top:12%; }
	.postage-stamp { width:16%;padding:2.5% 2% 2% 32%; }
}

@media (max-width: 720px) {
	.postage-stamp { width:20%;padding:2.5% 2% 2% 28%; }
}

@media (max-width: 520px) {
	.logo { width:32%;margin-top:-4%;margin-left:-2.5%; }
	.mobile-nav { padding:3.5% 2%; }
	.closebtn { top:3.5%;right:2.5%; }
	.first-block { width:90%;padding:5% 6% 5% 4%; }
	.img-block, .img-narrow { width:91%;padding:14% 4.5% 0 4.5%; }
	.no-picture { padding-top:16%; }
	p { font-size:1.3rem; }
	h1 { font-size:3rem;margin-bottom:1.6rem;}
	h5 { font-size:1rem;line-height:1.5; }
	li.nav { font-size:.9rem; }
	.postage-stamp { width:26%;padding:2.5% 2% 2% 22%; }
}
	
@media (max-width: 375px) {
}

@media (max-width: 360px) {
}

@media (max-width: 320px) {
}