body {
	font-family: "anisette-std", sans-serif;
	font-weight:300;
	background-image: url(images/cbrock.jpg);
	background-attachment:fixed;
	background-position:bottom right;
	background-size:cover;
	color:#f2f2f2;
	margin:0;
	padding:0;
}

.fullscreen-bg {
    position:fixed;
    top:-40px;
    right:0;
    bottom:-40px;
    left:0;
    overflow:hidden;
    z-index:-100;
}

.fullscreen-bg__video {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    width:100%;
    height:100%;
}

img {
	margin-bottom:3rem;
	margin-top:2rem;
}

.img-small {
	width:35%;
	padding-top:54px;
	padding-left:0;
	margin-bottom:-.4rem;
	float:left;
}

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

.bottom-menu {
	width:100%;
	padding:0;
	font-weight:400;
	float:left;
}

@media (min-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
    height:300%;
    top:-100%;
    bottom:-40px;
  }
}

@media (max-aspect-ratio: 16/9) {
  .fullscreen-bg__video {
    width:300%;
    left:-100%;
    bottom:-40px;
  }
}

@media (max-width: 767px) {
  .fullscreen-bg {
    width:300%;
    left:-100%;
    bottom:-40px;
  }
}

@media (max-width: 540px) {
  .fullscreen-bg {
    width:300%;
    left:;-100%;
    bottom:-40px;
  }
}

.header {
	width:100%;
	float:left;
}

.logo {
	width:40%;
	padding:5%;
	float:left;
}

.footer {
	position: absolute;
  bottom: 0;
  left: 0;
	padding:5%;
}

.r-nav {
	position:fixed;
	width:40%;
	top:7.5%;
	right:5%;
	text-align:right;
	float:left;
}

.r-nav > a {
	font-family: "anisette-std", sans-serif;
	font-size:3rem;
	font-weight:700;
	margin-left:2%;
	z-index:10;
}

.hero-inset {
	position:relative;
	width:80%;
	margin:-10% 10% 5% 10%;
	float:left;
	z-index:-1;
}

.project-inset {
	width:78%;
	margin:0 11% 0 11%;
	padding:0;
	float:left;
}

.accordion-inset {
	width:63%;
	margin:5% 11% 5% 11%;
	padding:0;
	float:left;
}

.accordion {
  border-bottom:1px solid orange;
  cursor:pointer;
  padding:3%;
  width:94%;
  outline:none;
  transition:0.4s;
}

.active, .accordion:hover {
  background-color:#3f17d9;
}

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

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

.content-bottom {
	width:94%;
	margin:7% 0 0 0;
	padding:3%;
	float: left;
}

.bottom-inset {
	width:50%;
	margin:0 9% 0 0;
	float: left;
}

.bottom-second {
	width:35%;
	margin:0;
	float: left;
}

p {
	font-family: "anisette-petite", sans-serif;
	font-size:1.4rem;
	line-height:1.4;
	font-weight:300;
	margin:0 0 2rem 0;
}

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

.img-credits {
	font-size:.6rem;
	text-align:right;
	margin-top:-2.9rem;
}

a {
  text-decoration:underline;
  text-decoration-color:orange;
  color:#f2f2f2;
  font-weight:700;
  position: relative;
}

.reglink {
	text-decoration:underline;
	text-decoration-color:orange;
	color:#f2f2f2;
	font-weight:300;
	position: relative;
}

a:hover {
	font-style:italic;
}

h1 > a::before {
  content: '';
  background:linear-gradient(180deg, #d2d2df 0%, #fff 100%);
  position:absolute;
  left:-2%;
  bottom:14px;
  width:105%;
  height:24px;
  z-index:-1;
  transition: all .3s ease-in-out;
}

h1 > a:hover::before {
  bottom:4px;
  height:80%;
}

h2 > a::before {
  content: '';
  background:linear-gradient(180deg, #262626 0%, #252525 100%);
  position:absolute;
  left:0;
  bottom:2px;
  width:100%;
  height:16px;
  z-index:-1;
  transition: all .3s ease-in-out;
}

h2 > a:hover::before {
  bottom:4px;
  height:80%;
}

h1 {
	font-family: "anisette-std", sans-serif;
	font-size:8rem;
	font-weight:600;
	line-height:.8;
	margin:0;
	padding:0;
}

h2 {
	font-family: "anisette-std", sans-serif;
	font-size:3rem;
	line-height:1.2;
	font-weight:500;
	margin:0 0 0 0;
	padding:0;
}

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

h4 {
	font-family: "anisette-std", sans-serif;
	font-size:1.8rem;
	font-weight:500;
	line-height:1.2;
	margin:0 0 2rem 0;
	padding:0;
}

h5 {
	font-family: "anisette-std", sans-serif;
	font-size:1.6rem;
	font-weight:500;
	line-height:1.2;
	margin:0 0 2rem 0;
	padding:0;
}

i {
	font-style:italic;
}

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

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

.header-padding {
	margin-bottom:3rem;
}
.subheader-padding {
	margin-bottom:1.5rem;
}

.restricted {
	max-width:66.66%;
}

strong {
	font-weight:700;
}

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

@media (max-width: 1024px) {
	h1 { font-size:6rem; }
	h2 { font-size:2rem; }
	h3 { font-size:1.6rem; }
	.r-nav { top:3.33%; }
	.restricted { max-width:90%; }
}


@media (max-width: 800px) {
	h1 { font-size:5rem; }
	.some-padding { margin-bottom:.5rem; }
	.restricted { max-width:100%; }
}

@media (max-width: 540px) {
	h1 { font-size:3.3rem; }
	h3 { font-size:1.3rem; }
	h4 { font-size:1.3rem; }
	h5 { font-size:1.2rem; }
	p { font-size:1.2rem; }
	.r-nav { width:20%;top:3.6%;right:4.3%; }
	.r-nav > a { font-size:1.3rem; }
	.hero-inset { width:84%;margin:-10% 8% 5% 8%; }
	.project-inset { width:84%;margin:0 9%; }
	.accordion-inset { width:80%;margin:7.5% 9%; }
}

@media (max-width: 390px) {
	h1 { font-size:3rem; }
	h2 { font-size:1.8rem; }
	h3 { font-size:1.2rem; }
	h5 { font-size:1.1rem; }
	p { font-size:1.1rem; }
	.r-nav { width:20%;top:3%;right:6%; }
	.hero-inset { width:88%;margin:-10% 6% 5% 6%; }
	.project-inset { width:86%;margin:0 7% 5% 7%; }
	.accordion-inset { width:86%;margin:5% 7% 12.5% 7%; }
	.panel { padding:6% 2.5% 5% 2.5%; }
}

@media (max-width: 280px) {
	h1 { font-size:2.3rem; }
	h2 { font-size:1.5rem; }
	h4 { font-size:1.1rem; }
	h5 { font-size:1rem; }
	p { font-size:1rem; }
	.mini-text { font-size:.9rem; }
	.r-nav { width:20%;top:2%;right:6%; }
	.r-nav > a { font-size:1rem; }
	.panel { padding:10% 2.5% 5% 2.5%; }
}