* {
	box-sizing: border-box;
}
html {
	/* font-family: sans-serif; */
	scroll-snap-type: mandatory;
	scroll-snap-points-y: repeat(100vh);
	scroll-snap-type: y mandatory;
}

h1 {
  text-align: center;
  color: white;
  cursor: default;
  font-family: "Trade Gothic LT W05 Bold Ext";
	font-size: 2REM;
	max-width: 33rem;
	margin: 4rem auto;
}



:root {
  --content-width: 65rem;
}

*,
*:after,
*:before{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-family: -apple-system, BlinkMacSystemFont, "Trade Gothic Next LT W01 Rg", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";;
}

body {
  background-color: #000000;

}

h2, h3, h4 {
  font-family:"Trade Gothic LT W05 Extended";
  text-transform: uppercase;
  letter-spacing: 0.1rem;
	cursor: default;
}

h4 {
  text-transform: none;

}

article {
padding: 4rem 0;
}

li {
  list-style: none;
  padding-bottom: 5rem;
}

.text li {
    padding-bottom: 1rem;
}

a {
  color: currentColor;
  text-decoration: none;
}

a:hover {
  color: #f00;
}

strong, b {
  font-weight: 500;
}

img {
  width: 100%;
}

figcaption {
text-transform: uppercase;
letter-spacing: 0.12rem;
padding: uppercase;
line-height: 1.8rem;
}


li img {
  border-radius: 0.2rem;
  margin: auto;
}

iframe {
	border: solid #000 0.25rem;
	/* height: 33vh;
	width: 550px; */
	border-radius: 0.2rem;
}

.page {
  padding: 0 3vw;
  /* background: linear-gradient(90deg, rgb(10,10,10) 0%, rgb(150,150,150) 10%, rgb(150,150,150) 90%, rgb(10,10,10) 100%); */


}
.page > * {
  max-width: var(--content-width);
  margin: auto;
}

.header {
	display: flex;
	flex-flow: column wrap;
	align-items: center;
	z-index: 2;
	padding: 1.5rem 1.5rem;
	background-color: #000;
	position: fixed;
	/* width: 64rem; */
	margin: auto;
	left: 0;
	top: 0;
	right: 0;
	color: white;
	box-shadow: rgba(0, 0, 0, 0.4) 0rem 1rem 1rem;
}

.header a {
  position: relative;
  text-transform: uppercase;
  font-size: .875rem;
  letter-spacing: .05em;
  padding: .5rem 0;
  font-weight: 700;
}

.logo {
  font-family:"Trade Gothic LT W05 Bold Ext";
  font-size: 1.5rem;
  letter-spacing: 0.12rem;
  text-align: center;
  cursor: pointer;
	color: #e1e1e1;
	font-size: 1.5rem;
}

#menu {
  display: none;
  width: 100%;
  font-family:"Trade Gothic Next LT W01 Bold";
  text-align: center;
	background-color: rgba(0, 0, 0, 0.97);
  padding: 30vh 3rem;
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 3;
  margin: auto;
}


#menu a {
  color: #eee;
  font-size: 3rem;
  text-align: center;
  display: inherit;
	max-width: 19rem;
margin: auto;
}

#menu a:hover {
color: #ff0100;
}

.menu-open {
  display: flex;
}


.menu a {
  margin: 0;
  color: #ff0100;
}

.menu a[aria-current] {
	border: 0.2rem solid #e1e1e1;
	border-radius: 0.25rem;
}

.menu-burger {
  display: inline-block;
  cursor: pointer;
	border: solid #e1e1e1 0.1rem;
  border-radius: 100%;
	padding: 0.8rem 1rem;
  z-index: 4;
}
.menu-burger:hover {
  border-color:  #ff0100;
}

.menu-burger.change.menu-x:hover {
	border-color: #ff0100;
border-color: #ff0100;
}

.bar1, .bar2, .bar3 {
  width: 35px;
	height: 0.1rem;
	margin: 0.54rem 0;
	  background-color: #e1e1e1;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
  background-color: #eee;

}

.change .bar2 {opacity: 0;}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
  background-color: #eee;
}

.menu-x {
  border: solid #eee 0.14rem;

}

#logo {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: center;
  width: 100%;
	z-index: 4;
	/* border-bottom: solid 0.1rem #e1e1e1; */
}

.logoimg {
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 100%;
  cursor: pointer;
}

.project-icon {
  margin: 1rem;
  padding: 0;
}

.albums-small {
    display: flex;
    overflow-x: scroll;
}


.album-link {
  display: inline;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
	font-size: 0.8rem;
padding: 0.1rem 0.5rem;
line-height: 1.2rem;
border-bottom: 0.1rem #e1e1e1 solid;
text-align: center;
  }

.divider {
  display: inline-flex;

}

/* .album-link .first{
  list-style: none;
} */

.album-links {
  display: flex;
  flex-flow: row wrap;
  max-width: 36rem;
  margin: 2rem auto;
	color: #e1e1e1;
	padding: 2rem 1rem;
	border-radius: 1rem;
	align-items: ;
	justify-content: space-around;
	grid-gap: 2rem }




@media screen and (min-width: 40rem) {
  .header .logo {
    margin-bottom: 0;
  }
  .header {
    /* flex-direction: row;
    justify-content: space-between; */
  }
  .menu {
    /* margin-right: -.75rem; */
  }
}


main {
  min-height: calc(100vh - 10rem);
  overflow: hidden;
	padding: 12rem 3rem 2rem;
	position: relative;
	z-index: 1;
	color: #e1e1e1;
}

.intro {
	color: #e1e1e1;
	padding: 10vh 0 1rem;
	text-align: center;
	text-transform: uppercase;
	border-bottom: solid 0.1rem #e1e1e1;
	max-width: 600px;
	margin: auto;
}

/* .intro h1 {
  position: relative;
  margin-bottom: 1rem;
  font-size: calc(1vw + 2rem);
  z-index: 1;
  letter-spacing: 0.15rem;
} */

.tags {
  text-align: center;
  text-transform: lowercase;
  letter-spacing: 0.075em;
  font-size: .75rem;
  color: #e1e1e1;
}

.text {
  line-height: 1.5em;
  max-width: 30rem;
  position: relative;
  margin: 0 auto;
	color: #e1e1e1;
}
.text p,
.text figure,
.text ul,
.text ol {
  margin-bottom: 1.5em;
}
.text h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  text-align: center;
}
.text > *:first-child {
  margin-top: 0;
}
.text a {
  position: relative;
  white-space: nowrap;
  font-weight: 500;
  z-index: 1;
  display: inline-block;
  border-bottom: 2px solid #e1e1e1;
}
.text figure {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

figure{
    text-align: center;
}

.text img {
  width: 100%;
}

.foottitle {
	color: #e1e1e1;
	text-align: center;
	margin-top: 4rem;
}

.footer {
	padding: 2rem 5vw 0;
  text-align: center;
  max-width: var(--content-width);
  margin: 0 auto;
  line-height: 1.5em;
  color: #e1e1e1;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
}
.footer a {
  display: inline-block;
  font-size: 1rem;
}
.footer > a {
  margin-bottom: 1.5rem;
  padding-top: .5rem;
}

#footimg {
    width: 2rem;
    margin: auto;
    padding: 1rem;
    display: block;
    cursor: n-resize;
}

.social {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    margin-bottom: 2rem;
		align-items: center;
}

.social a {
  color: #e1e1e1;
  padding: 0;
  border-bottom: solid 0.2rem rgba(0,0,0,0);
  margin: 0.3rem 1rem;
	max-width: 1.5rem;
}
.social a:hover {
  color: #e1e1e1;
  border-bottom: solid 0.2rem #f00;

}


label {
  display: inherit;
}

#mc_embed_signup_scroll {
  display: flex;
  grid-gap: 1rem;
  flex-flow: row wrap;
  justify-content: space-evenly;
  padding: 1rem;
  border-radius: 0.5rem;
	border: solid #e1e1e1 0.1rem;
  margin-bottom: 1.5rem;
}
#mce-EMAIL {
  border-radius: 0.2rem;
  padding-left: 0.5rem;
}

#mc-embedded-subscribe {
  background-color: red;
	padding: 0.3rem 1rem;
	letter-spacing: 0.11rem;
	text-transform: uppercase;
	  border-radius: 0.25rem;
  border: none;
  color: #e1e1e1;
}


.gallery {
    display: grid;
    grid-gap: 2rem;
    line-height: 0;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: dense;
    padding: 3rem 0.8rem;
    max-width: 750pc;
    margin: auto;
}

.gallery-pic {
  position: relative;
  --cols: 1;
  --rows: 1;
  overflow: hidden;
  line-height: 0;
}

ul.albums {
    display: grid;
    grid-gap: 2rem;
    line-height: 0;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: dense;
    padding: 3rem 0.8rem;
    max-width: 750pc;
    margin: auto;
}

#lottie{
    width: 1.2rem;
    display: inline-block;
    overflow: hidden;
    transform: translate3d(0,0,0);
    text-align: center;
    opacity: 1;
		vertical-align: text-top;
}

.closing {
	padding-bottom: 1rem;
}


.grid {
  display: grid;
  grid-gap: 5.4rem;
  line-height: 0;
  grid-template-columns: repeat(1, 1fr);
  grid-auto-flow: dense;
  max-width: 950px;
  margin: auto;
  padding: 3rem 0;
}

.grid-mini {
  display: grid;
  line-height: 0;
  grid-auto-flow: dense;
  max-width: 950px;
  margin: auto;
  padding: 3rem 0;
	color: #e1e1e1;
	grid-gap: 2rem;
	grid-template-columns: repeat(2, 1fr);

}

.grid li {
  position: relative;
  --cols: 2;
  --rows: 1;
  overflow: hidden;
  line-height: 2rem;
  border-bottom: solid #e1e1e1 0.1rem;
height: auto;
padding: 4rem 0;
}
.grid li:first-child {
  --cols: 2;
  --rows: 2;

}
.grid li:nth-child(5) {
  --cols: 2;
}
.grid li:nth-child(6) {
  --rows: 2;
}
.grid li:nth-child(7) {
  --cols: 2;
}
.grid a {
  display: block;
  color: #e1e1e1;
  font-family: "Trade Gothic LT W05 Extended";
}


.grid img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: all .3s;
	max-width: 33rem;
}

.homeimg a {
  border: 0;
}

.grid figcaption {
  color: #eee;
  line-height: 1.2rem;
  width: 100%;
  text-align: center;
  font-family: "Trade Gothic Next LT W01 Rg";
  font-size: .9em;
  /* position: absolute; */
  padding:1.5rem;
}

.prevnext {
	text-align: center;
  font-size: 1rem;
  font-family: "Trade Gothic LT W05 Bold Ext";
  color: #f00;
	margin: 4rem auto;
	display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: center;
}

.arrow.prev, .arrow.next {
background-color: #000;
border-radius: 3rem;
color: #e1e1e1;
padding: 1rem 1.5rem;
border: solid red 0.1rem;
display: inline-block;
}

.cover-pic {
  width: 100%;
   /* max-width: 600px; */
}

.video {
  position: relative;
overflow: hidden;
height: 54vh;
padding-bottom: 56.25%; /* creates a 16:9 aspect ratio */
}

.video iframe,
.video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
}


@media screen and (max-width: 550px) {
  .gallery {
      grid-template-columns: repeat(1, 1fr);
}

main {
	padding: 8rem 0.2rem 2rem;
}

.grid {
	padding: 0;
}

ul.albums {
    grid-template-columns: repeat(1, 1fr);
}

iframe {
	height: 24vh;
	width: 100%;
}


.grid-mini {
grid-gap: 0;
}

}