body {
	font-family: "neuzeit-grotesk", sans-serif;
	background-image: url("images/homepage.jpg");
	background-attachment:fixed;
	background-position:bottom left; 
	background-size:cover; 	
	background-color:grey;
	color:#222120;
	margin:0;
	padding:0;
}

.other {
	background-image: none;
	background-color:#e7e0db;
}

.header {
	width:96%;
	float:left;
	margin:2%;
}

.header-project {
	width:96%;
	float:left;
	border-bottom:.5px solid #222120;
	margin:2%;
}

p {
	font-size:1.4rem;
	line-height:1.4;
	font-weight:300;
	margin:0 0 2rem 0;
}

.mini-text {
	font-size:1rem;
}

.credits {
	font-size:1.1rem;
	line-height:1.4;
}

.img-credits {
	font-size:.75rem;
	text-align:right;
}

a {
	
  	text-decoration:underline;
	color:#222120;
}

a:hover {
	color:#7e7b79;
}

h1 {
	font-family: "swear-display", sans-serif;
	font-size:2rem;
	font-weight:400;
	line-height:1;
	letter-spacing:.04rem;
	margin:0 0 1rem 0;
	padding:0;
}

h2 {
	font-family: "swear-display-cilati", sans-serif;
	font-size:4rem;
	line-height:1;
	font-weight:400;
	margin:0 0 2rem 0;
	padding:0;	 
}

h3 {
	font-family: "swear-display", sans-serif;
	font-size:3rem;
	font-weight:500;
	line-height:1.2;
	margin:0 0 2rem 0;
	padding:0;
}

h4 {
	font-family: "swear-display", sans-serif;
	font-size:1.8rem;
	font-weight:500;
	line-height:1.3;
	margin:0 0 2rem 0;
	padding:0;
}

h5 {
	font-family: "swear-display", sans-serif;
	font-size:1.6rem;
	font-weight:400;
	line-height:1.4;
	margin:0 0 2rem 0;
	padding:0;
}

h6 {
	font-weight:300;
	font-size:1rem;
	line-height:1.3;
	margin:0 0 2rem 0;
	padding:0;
}

.inset {
	max-width:96%;
	margin-left:4%;
}

i {
	font-family: "swear-display", sans-serif;
	font-style:italic;
}

h5 > i {
	font-family: "swear-text", sans-serif;
}

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

.slight-padding {
	margin-bottom:.2rem;
}

.less-padding {
	margin-bottom:.5rem;
}

.some-padding {
	margin-bottom:1rem;
}

.full-padding {
	margin-bottom:2rem;
}

strong {
	font-weight:500;
}

p > strong {
	font-weight:400;
}

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

.accordion-inset {
	width:45%;
	margin:0 5% 16% 2%;
	padding:0; 
	float:left;
}

.accordion {
  cursor:pointer;
  padding:2% 2% 0 0;
  width:100%;
  outline:none;
  text-decoration:underline;
  transition:0.4s;
}

.active, .accordion:hover {
	color:#7e7b79;
}

.panel {
  padding:6% 4% 3% 4%;
  display:none;
  background-color:transparent;
  overflow:hidden;
}

/* to make accordion open on start, add style="display:block;" to panel div */


.project-inset {
	width:96%;
	margin:1% 2% 2% 2%;
	padding:0; 
	float:left;
}

.content-inset {
	width:54%;
	margin:1% 2% 4% 6%;
	padding:0;
	float:left;
}

.full-content {
	width:54%;
	margin:1% 23% 4% 23%;
	padding:0;
	float:left;
}

.project-sidebar {
	width:26%;
	margin:1% 4% 8% 4%;
	padding:0 0 0 2%;
	border-left:.5px solid #222120;
	float:left;
}

.last {
	width:96%;
	margin:2%;
	float:left;
	text-align:right; 
}

.last-fixed {
	position:fixed;
	bottom:0;
	right:0;
	width:96%;
	margin:2%;
	float:left;
	text-align:right; 
}

@media (max-width: 1024px) {
	.accordion-inset { width:62%;margin:0 2% 48% 2%; }
	.content-inset { width:56%;margin-top:0;margin-left:4%; }
}

@media (max-width: 820px) {
	.header { width:92%; }
	.accordion-inset { width:80%; }
	.list { line-height:1;margin-bottom:.6rem; }
	.list-full { line-height:1;margin-bottom:2rem; }
	.content-inset { width:56%;margin-top:0;margin-left:4%; }
}

@media (max-width: 540px) {
	.header, .header-project { width:92%;margin:4%; }
	p { font-size:1.1rem;margin-bottom:1.5rem; }
	h1 { font-size:1.6rem; }
	h2 { font-size:3.4rem; }
	h3 { font-size:1.8rem;margin-bottom:1.5rem; }
	h4 { font-size:1.5rem;margin-bottom:1.5rem; }
	h5 { font-size:1.2rem;margin-bottom:1.5rem; }
	.full-padding { margin-bottom:1.5rem; }
	.accordion-inset { width:91%;margin:0 5% 48% 4%; }
	.project-inset, .content-inset { width:91%;margin:0 5% 4% 4%; }
	.panel { padding:6% 0 4% 0; }
	.project-sidebar { width:88%;border-left:none;padding:0;margin:0 4% 24% 4%; }
	.full-content { width:91%;margin:0 5% 24% 4%; }
	.inset { margin-left:0; }
}

@media (max-width: 280px) {
	p { font-size:1rem; }
	.credits, .mini-text { font-size:.9rem; }
	.img-credits { font-size:.6rem; }
	h1 { font-size:1.6rem; }
	h2 { font-size:2rem; }
	h3 { font-size:1.4rem; }
	h4 { font-size:1.2rem;margin-bottom:1.5rem; }
	h5 { font-size:1.1rem;margin-bottom:1.5rem; }
}