:root {
	--color-text: #261C1D;
	--color-bg: #E7E7E7;

	--font-body: "Inter", sans-serif;
	--font-heading: "Manrope", sans-serif;

	--header-height: 12vh;
	--header-min-height: 70px;
}

@font-face {
  font-family: 'FeltTipWoman';
  src: url('Felt-Tip-Woman-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

* {
	margin:0;
	padding:0;
}	

body, html {
	position:relative;
	min-height:100%;
}	

html {
	scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-optical-sizing: 1rem;
  font-weight: 400;
  font-style: normal;
  color: var(--color-text);
  background: var(--color-bg);
}	

#background {
	position:fixed;
	top: var(--header-height);
	left:0;
	height: calc(100% - var(--header-height));
	width:100%;
	background:url('img/background.jpg') var(--color-bg);
	background-size: cover;        
	background-position: center center;
	z-index:-1;
}	

header.layout, footer.layout {
	z-index: 3;
}	



main.layout {
	/*position:relative;
	z-index: 1;*/
}	

h2 {
  font-family: var(--font-heading);
  font-size: 3.75rem;
  line-height:100%;
  font-weight: 400;
  font-style: normal;
}

header.layout {
	position:fixed;
	top:0;
	left:0;
	background: var(--color-bg);
	width:100%;
	height: var(--header-height);
	min-height: var(--header-min-height);
}	

header.layout .inner{
	width:90%;
	margin:auto;
	line-height: var(--header-height);
	display:flex;
	justify-content:space-between;
	align-items: center;
}	

header.layout .inner a {
	color: var(--color-text);
	text-decoration:none;
}	


#pastShows {
	font-size:1.25rem;
}

#rsvp {
	font-size:1.1rem;
	display:inline-block;
	border: 1px solid #261C1D;
	padding: 9px 20px;
	align-self: center; 
	line-height:100%;
}	


/*	
main.layout {
	margin-top:100vh;
}	

section#logo {
	position:fixed;
	height:200vh;
	left:25%;
	top:0;
	width:50%;
	z-index:1000;
}	

section#logo img{
	height:23%;
	display:inline-block;
	margin:0 auto;
}

section#logo .inner {
	height:50%;
	display:flex;
	flex-direction:column;
	justify-content:center;
	text-align:center;
}	

section#logo .inner p {
	font-size: 2.7vw;
    padding-left: 6vw;
}

section#logo.nested	{
	height: var(--header-height);
}	

section#logo.nested .inner {
    height: 100%;
}	

section#logo.nested  img {
	height: 50%;
}	

section#logo.nested  p {
	opacity:0;
}	
*/

main.layout {
	/*position: relative;
	z-index: 1;*/
	margin-top: 0;
	padding-bottom: 50px;
}

.video-embed {
    position: relative;
    width: 90vw;
    aspect-ratio: 16 / 9;
    margin: 85px auto 0;
    padding: 5vw 0;
    overflow: hidden;
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Mobile */
@media (max-width: 450px) {

    .video-embed {
        width: 80vw;
        height: calc(100vh - 300px);
        aspect-ratio: auto;
        margin: 100px auto 0px;
        padding: 100px 0 0;
    }

    .video-embed iframe {
        width: 177.78vh; /* 16:9 ratio based on viewport height */
        height: 100vh;

        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

}

section#logo {
	position: relative;
	height: 200vh;
	z-index:200;
}

section#logo .inner {
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}

section#logo img {
	display: block;
	height: 23%;
	width: auto;
	transform: translateY(0) scale(1);
	transform-origin: center center;
	will-change: transform;
}

section#logo.fixed .inner {
	position: fixed;
	top: 0;
	left: 25%;
	width: 50%;
	height: var(--header-height);
	min-height: var(--header-min-height);

	display: flex;
	justify-content: center;
	align-items: center;

	z-index: 300;
	pointer-events: none;
}

section#logo.fixed img {
	height: 50%;
	width: auto;
	transform: none !important;
}

section#logo.fixed p {
	opacity: 0;
	display: none;
}

#team-header-logo {
	height:50px;
	position:relative;
	top:-5px;
} 

@media(max-width:450px){
	
	section#logo img {
		width: 82vw; 
		height:auto;
	}
	
	#pastShows, #rsvp {
		font-size:1rem !important;
	}	
	
	#team-header-logo {
		height:auto;
		width:calc(100% - 250px); 
	}	
}	

/*
section #intro {
	margin-top:400vh;
	height:100vh;
}	

section#intro p {
	width:30%;
	margin:auto;
	font-weight:300;
	font-family:var(--font-body);
	font-size:1.6rem;
	margin-bottom:1.6rem;
}
*/

#intro-anchor {
    position: relative;
    top: 100vh;
}

section#intro {
  height: 400vh;
  position: relative;
}

section#intro .inner {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

section#intro p {
	width:30%;
	font-weight:300;
	font-family:var(--font-body);
	font-size:1.6rem;
  margin: 0 auto 1.6rem auto;
  transform: translateY(100vh);
  will-change: transform;
}

@media(max-width:1100px){
	section#intro p {
		width:50%;
	}	
}	

@media(max-width:800px){
	section#intro p {
		width:70%;
	}	
}

@media(max-width:600px){
	section#intro p {
		width:90%;
	}	
}

#interactive_nav_wrapper {
	position:fixed;
	bottom:1rem;
	z-index:9999;
}	

#interactive_nav  {
	width:90%;
	margin:auto;
	display:flex;
	justify-content:space-between;
	align-items:center;
}	

#interactive_nav nav {
	display:flex;
	gap:1rem;
	border-radius: 10px;
	margin:auto;
}	

#interactive_nav ul {
	display:flex;
	gap:1rem;
	background:rgba(255,255,255,.5);
	justify-content:center;
	border-radius: 5px;
}

#interactive_nav nav li {
	list-style:none;
	display:block;
	line-height:60px;
	padding:0 15px;
}	

#interactive_nav nav a {
	color:black;
	text-decoration:black;
	text-transform:uppercase;
	font-size:1.5rem;
}	

#open-nav-btn {
	border:0;
	background:rgba(255,255,255,.5);
	padding: 0 15px;
	border-radius: 5px;
}	

#open-nav-btn img { 
	transform: rotate(0deg);
	transition: transform .5s; 
}


#open-nav-btn.active img { 
	transform: rotate(180deg);
}

#open-nav-btn img {
    transition: transform 0.5s ease;
}

#open-nav-btn img.spin {
    transform: rotate(360deg);
}

/* push asterix */

#interactive_nav > img:first-child,
#interactive_nav > img:last-child {
    position: absolute;
    transition: transform 0.5s ease;
}

#interactive_nav > img:first-child {
    left: 5%;
}

#interactive_nav > img:last-child {
    right: 5%;
}

#interactive_nav > img:first-child,
#interactive_nav > img:last-child {
    transition: transform 0.5s ease;
}


#interactive_nav.open > img:first-child {
    transform: translateX(-200px);
}

#interactive_nav.open > img:last-child {
    transform: translateX(200px);
}

.window_container {
	width:100%;
	overflow-x:hidden;
}	

#nav-list-wrapper.open {
	width:620px;
}

@media(max-width:860px){
	#nav-list-wrapper.open, #interactive_nav ul {
		width: 560px;
	}
	
	#interactive_nav nav a {
		font-size:1.25rem;
	}	
}	

@media(max-width:760px){
	#nav-list-wrapper.open, #interactive_nav ul {
		width: 560px;
	}
	
	#interactive_nav nav a {
		font-size:1rem;
	}	
}

@media (max-width: 760px) {
    #nav-list-wrapper.open, #interactive_nav ul {
        width: 480px;
    }
}

@media(max-width:600px){

	#nav-list-wrapper.open,
	#interactive_nav ul {
		width:72vw;
	}

	#interactive_nav ul {
		gap:.25rem;
		justify-content:space-evenly;
	}

	#interactive_nav nav li {
		padding:0 6px;
		line-height:50px;
	}

	#interactive_nav nav a {
		font-size:.85rem;
	}

	#open-nav-btn {
		padding:0 10px;
	}

}

@media(max-width:450px){

	#nav-list-wrapper.open,
	#interactive_nav ul {
		width:75vw;
	}

	#interactive_nav ul {
		gap:0;
		justify-content:space-evenly;
	}
	
	#interactive_nav nav {
		gap:5px;
	}	
	
	#interactive_nav nav li {
		padding:0 1px;
		line-height:42px;
	}

	#interactive_nav nav a {
		font-size:.62rem;
		letter-spacing:.02rem;
	}

	#open-nav-btn {
		padding:0 10px;
		border-radius:4px;
	}

	#open-nav-btn img {
		width:18px;
		height:auto;
	}

}

/* nav underline */

#nav-list-wrapper {
    position: relative;
	width:0px;
	overflow:hidden;
	transition: width 0.4s ease;
}



#nav-list {
    display: flex;
    gap: 1rem;
    list-style: none;
}

#nav-underline {
    position: absolute;
    bottom: 0;
    bottom: 1.1vw;
    left: 30px;
    width: 75px;
    height: 10px;
    background: url(img/underline.png) no-repeat;
    background-size: contain;
    transition: left 0.3s ease, width 0.3s ease;
}

/* end nav underline */



section#intro p:last-child {
  margin-bottom: 0;
}

section#intro mark {
  background: none;
  color: #bc7673;
}

mark {
	color:#BC7673;
	background:none;
	font-weight:500;
}

section#details{
	width:90%;
	margin:auto;
	padding-top:5rem;
}	

section#details .columns {
	display:flex;
	align-items: flex-start;
	gap:3.5rem;
}	
section#details h2 {
	border-bottom:solid 1px black;
	padding-bottom:.5rem;
	margin-bottom:.5rem;
}	

section#details p {
	margin-bottom:3.5rem;
}

section#details .info {
	display:flex;
	align-items: flex-end;
	justify-content:space-between;
}	

section#details .tablet{
	display:none;
}	

@media(max-width:1000px){
	section#details .desktop{
		display:none;
	}

	section#details .tablet{
		display:block;
	}	
}	

@media(max-width:800px){
	section#details .columns {
		flex-direction:column;
	}
	
	section#details img {
		max-width:100% !important;
		width:100%;
	}	
	
	section#details .copy {
		width: 100%;
	}
}	

@media(max-width:400px){
	.tablet .button_group  a.btn{
		font-size:1.2rem;	
		height: 40px;
		line-height: 40px;
	}	
}	

h5 {
	font-size:1.125rem;
	font-weight:400;
}	

.the_date {
	font-size:5rem;
	height:100px;
}	

.the_time {
	font-size:2.1875rem;
	padding-bottom:.6rem;
}	

.time_block {
	height:100px;
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
	align-items:flex-end;
}	

.button_group {
	display:flex;
	gap: 1.5rem;
	margin:2rem 0;
}	

.time_block .day {
	display:none;
}

@media (max-width:400px){
	.the_date {
        font-size: 20vw!important;
    }
	
	.the_date h5 {
		font-size: 3.5vw!important;
	}
	
	.the_time {
        font-size: 8vw!important;
    }
	
	.time_block {
		align-items: flex-start;
	}
	
	.day{
		display:none;
	}
	
	.time_block .day {
		display:inline-block;
		font-size:1rem;
	}
}	


.button_group a.btn {
	display:block;
	text-decoration:none;
	color: var(--covarlor-text);
	width:50%;
	text-decoration:none;
	text-align:center;
	border:solid 1px #261C1D;
	border-radius:30px;
	height:60px;
	line-height:60px;
	font-size:1.5rem;
}	

 a.btn:hover {
	background-image:url(img/btn_rollover.jpg);
}	

#details .footer {
	display:flex;
	justify-content:space-between;
	gap:1.5rem;
}	

section#details h2, section#teemsAndRoles h2 {
    background: url(img/arrow-left.png) no-repeat right center;
    background-size: 60px 53px;
}	

section#details .tablet h2{
	background: url(img/arrow-bottom.png) no-repeat left top;
    background-size: 53px 60px;
	padding-top: 90px;
}	

section#ovations h2, section#showreel h2 {
    background: url(img/arrow-right.png) no-repeat right center;
    background-size: 60px 53px;
}	

section#meetOurDesigners h2 {
	background: url(img/asterix.content.png) no-repeat right top;

}	

#BFA-SP26 {
	width:10vw;
	height:10vw;
	align-self: flex-start;
	margin-right: auto;
	margin-left: 20vw;
}

@media (max-width: 650px) {
	#BFA-SP26 {
		display:none !important;
	}	
}	

@media (max-width: 1000px) {
	section#showreel h2{
		background: url(img/arrow-bottom.png) no-repeat left top;
		background-size: 53px 60px;
		padding-top: 90px;
	}	
}	

#details .footer .col {
	width:50%;
}	

section#details img {
    max-width: 50%;
}

section#showreel {
	width:90%;
	margin:auto;
	padding-top: 5rem;
	display:flex;
	justify-content:center;
	gap:3.5rem;
}	

section#showreel .copy {
	display:flex;
	flex-direction:column;
	justify-content:center;
	width:30%;
}	

.showreel-video-embed {
  width: 70%;
  aspect-ratio: 16 / 9; /* adjust if needed */
}

@media(max-width:1280px){
	section#showreel {
		flex-direction:column;
	}	
	.showreel-video-embed {
	  width: 100%;
	}
	
	section#showreel .copy {
		width:100%;
	}	
}	

.showreel-video-embed iframe {
  width: 100%;
  height: 100%;
  display: block;
}

section#showreel h2 {
	border-bottom:solid 1px black;
	padding-bottom:.5rem;
	margin-bottom:.5rem;
}

section#meetOurDesigners {
	width:90%;
	margin: 3.5rem auto;
	display:flex;
}	

section#meetOurDesigners .copy {
	display:flex;
	flex-direction:column;
	justify-content:center;
}	

section#meetOurDesigners h2 {
	border-bottom:solid 1px black;
	padding-bottom:1.25rem;
	margin-bottom:.5rem;
}

section#meetOurDesigners a {
	margin-top:1rem;
	display:block;
	text-decoration:none;
	color: var(--covarlor-text);
	width:50%;
	text-decoration:none;
	text-align:center;
	border:solid 1px #261C1D;
	border-radius:30px;
	height:54px;
	line-height:54px;
	font-size:1.5rem;
}	

#meetOurDesigners img {
	width:70%;
}

@media(max-width:1280px){
	#meetOurDesigners img {
		width:60%;
	}	
	
	section#meetOurDesigners .copy {
		width:90%;
		margin:auto;
	}	
}

@media(max-width:1000px){
	section#meetOurDesigners {
		flex-direction:column-reverse;
		width: 100%;
		margin-top:10rem;
	}	
	
	section#meetOurDesigners .copy {
		padding-bottom:1.5rem;
	}	
	
	section#meetOurDesigners h2 {
		background: url(img/asterix.content.png) no-repeat left top;
		padding-top:80px;
	}
	
	section#ovations h2, section#teemsAndRoles h2 {
		background: url(img/arrow-bottom.png) no-repeat left top;
		background-size: 53px 60px;
		padding-top: 90px;
		margin-top:40px;
	}	
	
	#meetOurDesigners img {
		width:100%;
	}
	
	section#teemsAndRoles header .copy {
		width: 100%!important;
		padding-bottom:2rem;
	}
	
	section#teemsAndRoles header {
		display:block !important;
	}	
	
	section#teemsAndRoles header img {
		display:none;
	}	
	
	
	.the_date {
		font-size: 4.5rem;
	}
	.the_time {
		font-size: 1.875rem;
		padding-bottom:0;
	}
	
	.time .time_block:nth-of-type(2) {
		position: relative;
        top: -10px;
	}	
}	

section#teemsAndRoles {
	width:90%;
	margin:auto;
	margin-top:100px;
}	

section#teemsAndRoles h2 {
	border-bottom:solid 1px black;
	padding-bottom:.5rem;
	margin-bottom:.5rem;
}

section#teemsAndRoles p {
	margin-bottom:1.5rem;
}	

section#teemsAndRoles header {
	display:flex;
	justify-content:space-between;
	position:relative;
}	

section#teemsAndRoles header img {
	position:relative;
	right:-5vw;
	width:40%;
}	

section#teemsAndRoles header img.titleLower {
	right:auto;
	left:-5vw;
	top: -2vw;
	width:60%
}	

section#teemsAndRoles header .copy {
	width:60%;
}	

#collage {
	margin-top:3.5rem;
}	

#teams_roles_list {
	display:none;
}	

@media(max-width:700px){
	#collage {
		display:none;
	}	
	
	#teams_roles_list {
		display:flex;
		justify-content: space-between;
	}
	
	#teams_roles_list h3 {
		font-size:21px;
		font-weight:600;
		margin:1rem 0;
	}	
	
	#teams_roles_list ul {
		display:block;
		list-style:none;
		font-size:18px;

	}	
	
	#teams_roles_list ul li {
		padding-bottom:10px;
	}	
	
	#teams_roles_list mark {
		font-family: 'FeltTipWoman', sans-serif;
		font-size:15px;
		color:#000;
		background:url("img/tape.png") no-repeat;
		background-size:cover;
		display:inline-block;
		width:51px;
		line-height:31px;
		text-align:center;
	} 
	
	#teams_roles_list .col:nth-child(2) {
	  text-align:right;
	}
}	

@media(max-width:400px){
	#teams_roles_list h3 {
		font-size:1rem;
	}	
	
	#teams_roles_list ul {
		font-size:1rem;;
	}	
}	

.seperator.mobile {
	display:none;
	position:absolute;
}	

.collage-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;   /* centers the whole row */
  gap: 5.1%;                 /* horizontal spacing between images */
  margin-bottom: 5.1%;       /* vertical spacing between rows */
  width: 100%;
}

.collage-row img {
  height: auto;
  display: block;
  position: relative;
}

#collage img.primary {
	width:100%;
}	

.collage-wrapper {
	position:relative;
}	

#collage img.rollover {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	z-index: 3;

	transform: translate(-50%, -50%) scale(1) rotate(0deg);
	opacity: 0;

	transition: transform .2s ease, opacity .2s ease;
	transform-origin: center;
}


.collage-wrapper .cover{
	content:"";
	display:block;
	background:rgba(256,256,256,.8);
	position:absolute;
	z-index:2;
	top:0;
	left:0;
	width:100%;
	height:100%;
	opacity:0;
	transition:.2s opacity;
}
.collage-wrapper:hover .cover{
	opacity:1;
}	

/* odd */
#collage .collage-wrapper:nth-child(odd):hover img.rollover {
	transform: translate(-50%, -50%) scale(1.1) rotate(5deg);
	opacity: 1!important;
}

/* even */
#collage .collage-wrapper:nth-child(even):hover img.rollover {
	transform: translate(-50%, -50%) scale(1.1) rotate(-5deg);
	opacity: 1!important;
}

/* odd */
#collage .collage-wrapper:nth-child(odd):hover img.primary,
#collage .collage-wrapper:nth-child(odd):hover .cover {
	transform:  rotate(5deg);
}

/* even */
#collage .collage-wrapper:nth-child(even):hover img.primary,
#collage .collage-wrapper:nth-child(even):hover .cover {
	transform:  rotate(-5deg);
}
	

#collage-img1  { width: 17.0%; transform: translateY(41.7%); }
#collage-img2  { width: 17.3%; transform: translateY(0%); }
#collage-img3  { width: 18.9%; transform: translateY(0%); }
#collage-img4  { width: 21.7%; transform: translateY(16.4%); }

#collage-img5  { width: 24.4%; transform: translateY(29.0%); }
#collage-img6  { width: 42.5%; transform: translateY(0%); }
#collage-img7  { width: 22.0%; transform: translateY(10.0%); }

#collage-img8  { width: 19.7%; transform: translateY(14.0%); }
#collage-img9  { width: 17.7%; transform: translateY(0%); }
#collage-img10 { width: 20.6%; transform: translateY(6.1%); }
#collage-img11 { width: 22.8%; transform: translateY(3.4%); }

#collage-img12 { width: 22.8%; transform: translateY(-20%) translatex(24%); }
#collage-img13 { width: 29.9%; transform: translateY(-18.7%) translatex(24%); }




section#ovations {
	width:90%;
	margin:3.5rem auto;
	display:flex;
	justify-content: space-between;
	gap:10%;
}	


section#ovations .title {
	width:35%
}	

section#ovations .copy {
	width:55%;
	position:relative;
}	

section#ovations h2{
	border-bottom: solid 1px black;
    padding-bottom: .5rem;
    margin-bottom: .5rem;
}	

section#ovations h3{
	margin-bottom:1.75rem;
}	

.names {
  column-count: 3;
  column-gap: 2rem;
  margin-bottom:3rem;
}

.names p {
  margin: 0 0 0.5rem;
  break-inside: avoid;
}

.names .group {
	margin-bottom:2rem;
}	



#sponsors {
	display:grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 1rem;
}	

@media (max-width:500px){
	.names {
		column-count: 2;
	}
	
	#sponsors {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1rem;
		justify-items: center;  /* horizontal */
	}
	
	section#sponsor_title h3 {
		text-align: center;
	}
}
	
#designers {
	width:90%;
	margin:auto;
	margin-top:3.5rem;
}	

section#designers h2{
	background: url(img/asterix.content.png) no-repeat right top;
	border-bottom: solid 1px black;
    padding-bottom: 1rem;
    margin-bottom: .5rem;
}


@media(max-width:1200px){
	section#ovations {
		display:flex;
		flex-direction:column;
		justify-content: left;
		gap:3.5rem;
	}
	
	section#ovations .copy {
		width:100%;
	}
	
	section#ovations .title {
		width:100%;
	}	
}	


#members {
	margin-top:3.5rem;
}

#members .copy > img:first-of-type {
    width: 20vw;
	position: absolute;
    top: 0;
    left: 0;
}	

#members .row {
	position:relative;
	width:90%;
	margin:auto;

}	

/* portraits scaled */

/* baseline */
#members .member > img.potrait {
	height: auto;
	max-width: none;
}

/* 329px median = 25vw */

/* row 1 */
#members .row:nth-of-type(1) .member:nth-of-type(1) > img.potrait { width: 25.38vw; } /* 334 */
#members .row:nth-of-type(1) .member:nth-of-type(2) > img.potrait { width: 23.78vw; } /* 313 */

/* row 2 */
#members .row:nth-of-type(2) .member:nth-of-type(1) > img.potrait { width: 22.80vw; } /* 300 */
#members .row:nth-of-type(2) .member:nth-of-type(2) > img.potrait { width: 27.89vw; } /* 367 */

/* row 3 */
#members .row:nth-of-type(3) .member:nth-of-type(1) > img.potrait { width: 25.38vw; } /* 334 */
#members .row:nth-of-type(3) .member:nth-of-type(2) > img.potrait { width: 24.24vw; } /* 319 */

@media(max-width:1024px){
	#members .row:nth-of-type(3) .member:nth-of-type(2)  > img.potrait{
		position:relative;
		bottom: -2vw;	
	}
}

/* row 4 */
#members .row:nth-of-type(4) .member:nth-of-type(1) > img.potrait { width: 26.82vw; } /* 353 */
#members .row:nth-of-type(4) .member:nth-of-type(2) > img.potrait { width: 25vw; } /* Evan, 329 */

@media(max-width:1024px){
	#members .row:nth-of-type(4) .member:nth-of-type(2)  > img.potrait{
		position:relative;
		bottom: -2vw;	
	}
}

/* row 5 */
#members .row:nth-of-type(5) .member:nth-of-type(1) > img.potrait { width: 17.48vw; } /* 230 */
@media(min-width:1024px){
	#members .row:nth-of-type(5) .member:nth-of-type(1) > img.potrait {
		position:relative;
		left: 10vw;	
	}
}	

#members .row:nth-of-type(5) .member:nth-of-type(2) > img.potrait { width: 21.12vw; } /* 278 */

@media(max-width:1250px){
	#members .row:nth-of-type(5) .member:nth-of-type(2)  > img.potrait{
		position:relative;
		bottom: -4vw;	
	}
}

@media(max-width:1150px){
	#members .row:nth-of-type(5) .member:nth-of-type(2)  > img.potrait{
		position:relative;
		bottom: -5vw;	
	}
}

@media(max-width:1080px){
	#members .row:nth-of-type(5) .member:nth-of-type(2)  > img.potrait{
		position:relative;
		bottom: -6vw;	
	}
}

@media(max-width:1028px){
	#members .row:nth-of-type(5) .member:nth-of-type(2)  > img.potrait{
		position:relative;
		bottom: -1vw;	
	}
}

/* row 6 */
#members .row:nth-of-type(6) .member:nth-of-type(1) > img.potrait { width: 22.57vw; } /* 297 */
#members .row:nth-of-type(6) .member:nth-of-type(2) > img.potrait { width: 28.42vw; } /* 374 */

/* row 7 */
#members .row:nth-of-type(7) .member:nth-of-type(1) > img.potrait { width: 29.71vw; } /* 391 */
#members .row:nth-of-type(7) .member:nth-of-type(2) > img.potrait { width: 29.71vw; } /* 391 */

/* row 8 */
#members .row:nth-of-type(8) .member:nth-of-type(1) > img.potrait { width: 23.63vw; } /* 311 */
#members .row:nth-of-type(8) .member:nth-of-type(2) > img.potrait { width: 25.53vw; } /* 336 */

/* row 9 */
#members .row:nth-of-type(9) .member:nth-of-type(1) > img.potrait { width: 20.36vw; } /* 268 */
#members .row:nth-of-type(9) .member:nth-of-type(2) > img.potrait { width: 31.00vw; } /* 408 */

/* row 10 */
#members .row:nth-of-type(10) .member:nth-of-type(1) > img.potrait { width: 29.71vw; } /* 391 */
#members .row:nth-of-type(10) .member:nth-of-type(2) > img.potrait { width: 24.39vw; } /* 321 */

/* row 11 */
#members .row:nth-of-type(11) .member:nth-of-type(1) > img.potrait { width: 27.43vw; } /* 361 */
#members .row:nth-of-type(11) .member:nth-of-type(2) > img.potrait { width: 21.20vw; } /* 279 */

/* row 12 */
#members .row:nth-of-type(12) .member:nth-of-type(1) > img.potrait { width: 24.32vw; } /* 320 */

@media (max-width: 1024px) {

	/* baseline */
	#members .member > img.potrait {
		height: auto;
		max-width: none;
	}

	/* 329px median = 20vw */
	#members .row:nth-of-type(4) .member:nth-of-type(2) > img.potrait { width: 20vw; }

	/* row 1 */
	#members .row:nth-of-type(1) .member:nth-of-type(1) > img.potrait { width: 20.30vw; }
	#members .row:nth-of-type(1) .member:nth-of-type(2) > img.potrait { width: 19.02vw; }

	/* row 2 */
	#members .row:nth-of-type(2) .member:nth-of-type(1) > img.potrait { width: 18.24vw; }
	#members .row:nth-of-type(2) .member:nth-of-type(2) > img.potrait { width: 22.31vw; }

	/* row 3 */
	#members .row:nth-of-type(3) .member:nth-of-type(1) > img.potrait { width: 20.30vw; }
	#members .row:nth-of-type(3) .member:nth-of-type(2) > img.potrait { width: 19.39vw; }

	/* row 4 */
	#members .row:nth-of-type(4) .member:nth-of-type(1) > img.potrait { width: 21.46vw; }

	/* row 5 */
	#members .row:nth-of-type(5) .member:nth-of-type(1) > img.potrait { width: 13.98vw; }
	#members .row:nth-of-type(5) .member:nth-of-type(2) > img.potrait { width: 16.90vw; }

	/* row 6 */
	#members .row:nth-of-type(6) .member:nth-of-type(1) > img.potrait { width: 18.06vw; }
	#members .row:nth-of-type(6) .member:nth-of-type(2) > img.potrait { width: 22.74vw; }

	/* row 7 */
	#members .row:nth-of-type(7) .member:nth-of-type(1) > img.potrait { width: 23.77vw; }
	#members .row:nth-of-type(7) .member:nth-of-type(2) > img.potrait { width: 23.77vw; }

	/* row 8 */
	#members .row:nth-of-type(8) .member:nth-of-type(1) > img.potrait { width: 18.90vw; }
	#members .row:nth-of-type(8) .member:nth-of-type(2) > img.potrait { width: 20.42vw; }

	/* row 9 */
	#members .row:nth-of-type(9) .member:nth-of-type(1) > img.potrait { width: 16.29vw; }
	#members .row:nth-of-type(9) .member:nth-of-type(2) > img.potrait { width: 24.80vw; }

	/* row 10 */
	#members .row:nth-of-type(10) .member:nth-of-type(1) > img.potrait { width: 23.77vw; }
	#members .row:nth-of-type(10) .member:nth-of-type(2) > img.potrait { width: 19.51vw; }

	/* row 11 */
	#members .row:nth-of-type(11) .member:nth-of-type(1) > img.potrait { width: 21.94vw; }
	#members .row:nth-of-type(11) .member:nth-of-type(2) > img.potrait { width: 16.96vw; }

	/* row 12 */
	#members .row:nth-of-type(12) .member:nth-of-type(1) > img.potrait { width: 19.46vw; }

}

@media(max-width: 650px){

	/* 329px median = 25vw */
	#members .row:nth-of-type(4) .member:nth-of-type(2) > img.potrait { width: 25vw; } /* Evan, 329 */

	/* row 1 */
	#members .row:nth-of-type(1) .member:nth-of-type(1) > img.potrait { width: 25.38vw; } /* 334 */
	#members .row:nth-of-type(1) .member:nth-of-type(2) > img.potrait { width: 23.78vw; } /* 313 */

	/* row 2 */
	#members .row:nth-of-type(2) .member:nth-of-type(1) > img.potrait { width: 22.80vw; } /* 300 */
	#members .row:nth-of-type(2) .member:nth-of-type(2) > img.potrait { width: 27.89vw; } /* 367 */

	/* row 3 */
	#members .row:nth-of-type(3) .member:nth-of-type(1) > img.potrait { width: 25.38vw; } /* 334 */
	#members .row:nth-of-type(3) .member:nth-of-type(2) > img.potrait { width: 24.24vw; } /* 319 */

	/* row 4 */
	#members .row:nth-of-type(4) .member:nth-of-type(1) > img.potrait { width: 26.82vw; } /* 353 */
	/* member 2 already set above at 25vw */

	/* row 5 */
	#members .row:nth-of-type(5) .member:nth-of-type(1) > img.potrait { width: 17.48vw; } /* 230 */
	#members .row:nth-of-type(5) .member:nth-of-type(2) > img.potrait { width: 21.12vw; } /* 278 */

	/* row 6 */
	#members .row:nth-of-type(6) .member:nth-of-type(1) > img.potrait { width: 22.57vw; } /* 297 */
	#members .row:nth-of-type(6) .member:nth-of-type(2) > img.potrait { width: 28.42vw; } /* 374 */

	/* row 7 */
	#members .row:nth-of-type(7) .member:nth-of-type(1) > img.potrait { width: 29.71vw; } /* 391 */
	#members .row:nth-of-type(7) .member:nth-of-type(2) > img.potrait { width: 29.71vw; } /* 391 */

	/* row 8 */
	#members .row:nth-of-type(8) .member:nth-of-type(1) > img.potrait { width: 23.63vw; } /* 311 */
	#members .row:nth-of-type(8) .member:nth-of-type(2) > img.potrait { width: 25.53vw; } /* 336 */

	/* row 9 */
	#members .row:nth-of-type(9) .member:nth-of-type(1) > img.potrait { width: 20.36vw; } /* 268 */
	#members .row:nth-of-type(9) .member:nth-of-type(2) > img.potrait { width: 31.00vw; } /* 408 */

	/* row 10 */
	#members .row:nth-of-type(10) .member:nth-of-type(1) > img.potrait { width: 29.71vw; } /* 391 */
	#members .row:nth-of-type(10) .member:nth-of-type(2) > img.potrait { width: 24.39vw; } /* 321 */

	/* row 11 */
	#members .row:nth-of-type(11) .member:nth-of-type(1) > img.potrait { width: 27.43vw; } /* 361 */
	#members .row:nth-of-type(11) .member:nth-of-type(2) > img.potrait { width: 21.20vw; } /* 279 */

	/* row 12 */
	#members .row:nth-of-type(12) .member:nth-of-type(1) > img.potrait { width: 24.32vw; } /* 320 */
}


@media (max-width: 650px) {

/* baseline */
#members .member > img.potrait {
	height: auto;
	max-width: none;
}

/* baseline */
#members .member > img.potrait {
	height: auto;
	max-width: none;
}

/* 329px median = 40vw */
#members .row:nth-of-type(4) .member:nth-of-type(2) > img.potrait { width: 40vw; }

/* row 1 */
#members .row:nth-of-type(1) .member:nth-of-type(1) > img.potrait { width: 40.61vw; }
#members .row:nth-of-type(1) .member:nth-of-type(2) > img.potrait { width: 38.05vw; }

/* row 2 */
#members .row:nth-of-type(2) .member:nth-of-type(1) > img.potrait { width: 36.48vw; }
#members .row:nth-of-type(2) .member:nth-of-type(2) > img.potrait { width: 44.62vw; }

/* row 3 */
#members .row:nth-of-type(3) .member:nth-of-type(1) > img.potrait { width: 40.61vw; }
#members .row:nth-of-type(3) .member:nth-of-type(2) > img.potrait { width: 38.78vw; }

/* row 4 */
#members .row:nth-of-type(4) .member:nth-of-type(1) > img.potrait { width: 42.91vw; }

/* row 5 */
#members .row:nth-of-type(5) .member:nth-of-type(1) > img.potrait { width: 27.97vw; }
#members .row:nth-of-type(5) .member:nth-of-type(2) > img.potrait { width: 33.79vw; }

/* row 6 */
#members .row:nth-of-type(6) .member:nth-of-type(1) > img.potrait { width: 36.11vw; }
#members .row:nth-of-type(6) .member:nth-of-type(2) > img.potrait { width: 45.47vw; }

/* row 7 */
#members .row:nth-of-type(7) .member:nth-of-type(1) > img.potrait { width: 47.54vw; }
#members .row:nth-of-type(7) .member:nth-of-type(2) > img.potrait { width: 47.54vw; }

/* row 8 */
#members .row:nth-of-type(8) .member:nth-of-type(1) > img.potrait { width: 37.81vw; }
#members .row:nth-of-type(8) .member:nth-of-type(2) > img.potrait { width: 40.85vw; }

/* row 9 */
#members .row:nth-of-type(9) .member:nth-of-type(1) > img.potrait { width: 32.58vw; }
#members .row:nth-of-type(9) .member:nth-of-type(2) > img.potrait { width: 49.60vw; }

/* row 10 */
#members .row:nth-of-type(10) .member:nth-of-type(1) > img.potrait { width: 47.54vw; }
#members .row:nth-of-type(10) .member:nth-of-type(2) > img.potrait { width: 39.02vw; }

/* row 11 */
#members .row:nth-of-type(11) .member:nth-of-type(1) > img.potrait { width: 43.89vw; }
#members .row:nth-of-type(11) .member:nth-of-type(2) > img.potrait { width: 33.92vw; }

/* row 12 */
#members .row:nth-of-type(12) .member:nth-of-type(1) > img.potrait { width: 38.91vw; }


}




/* end portait scaling */

#members .row .inner {
	display:flex;
	margin-top:7rem;
	position:relative;
	justify-content:space-between;
	max-width:1200px;
	margin:auto;
	gap:3vw;
}	

#members  .paper_strip {
	position:relative;
	width:100%;
	top: -4.5vw;
}	

@media(max-width:1028px){

	#members  .paper_strip {
		top: -2.5vw;
	}	
	
	#members  .paper_strip#paper_strip8 {
		top: -4.5vw;
	}
}	
	
/*
#members .row:nth-child(4) .paper_strip{
}


#members .row:nth-child(5){
	margin-top:9rem;
	position:relative;
}	
*/
#members .row:nth-of-type(even) .member {
	flex-direction:row-reverse;
}	

#members p {
	max-width:200px;
}	

#members .member {
	display:flex;
	align-items: flex-start;
	position:relative;
}	

#members .member .copy {
	display:flex;
	flex-direction:column;
	gap:2rem;
	padding-top:6vw;
	position:relative;
}	

nav.social {
	display:flex;
	justify-content: space-between;
	max-width:180px;
}	

nav.social img {
	height:33px;
}

main.designers {
	margin-top:40px;
}

#designers, #members {
	position:relative;
	z-index:2;
}	

#backLink {
	position:relative;
	width:90%;
	display:block;
	margin: 100px auto 40px;
	padding-top:1rem;
	z-index:2; 
}	

footer.layout {
	width:90%;
	margin:auto;
	position:relative;
	z-index:2;
}	

footer.layout .top{
	display:flex;
	justify-content: space-between;
	align-items: flex-end;
}	

footer.layout #logo {
	width:30%;
}	
/*
.home footer.layout  {
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
}	*/

footer.layout ul,
 footer.layout ul li{
	display:block;
	font-size:27px;
}	

footer.layout ul {
	display:flex;
	justify-content:space-between;
	gap:2rem;
}	

	
footer.layout ul a {
	color:black;
	text-decoration:none;
}	

footer.layout .bottom {
	display:flex;
	margin-top:.5vw;
	justify-content:space-between;
	margin-bottom:40px;
}	

footer.layout .bottom .subtitle {
	font-family: "neue-haas-grotesk-display", sans-serif;
	font-weight:600;
	margin-left:4.5vw;
	font-size:1.75vw
}

@media(max-width:1000px){
	footer.layout ul li{
		font-size:18px;
	}	
}	

@media(max-width:1028px){
	#Alexander, #yuna, #vy{
		position:relative;
		top:1vw;
	}
	
}	

@media(max-width:650px){
	.paper_strip {
		display: none;
		width: 200%;
		max-width: none;
		height: auto;
		transform: translateX(-50%);
	}		
	
	.seperator.mobile {
		display:block;
		width:100%;
		bottom: -40px;
		left:0;
	}
	
	#members .row .inner {
		display:block;
		margin:auto;
	}	
	
	#members .member {
		margin-bottom: 4rem;
		justify-content:center;
		position:relative;
	}
	
	#members .member .copy {
        padding-top: 10vw;
    }
    #members .member .copy {
        gap: 3rem;
    }
	
	#members .copy > img:first-of-type {
		width: 100%;
	}
	
	#members .row {
		width:100%;
	}	
	
	/* alternate members */
 #members .row .inner {
    flex-direction: column;
  }

  #members .member {
    flex-direction: row;
  }

  #members .member:nth-of-type(even) {
    flex-direction: row-reverse;
  }
	

}

@media(max-width:408px){
	#members .member .copy {
		max-width:50%;
	}
	
	section#designers h2 {
		font-size: 10vw;
	}
}	

footer.layout.mobile {
	display:none;
}	

@media(max-width:800px){
	#members .member .copy {
		gap: 2vw;
	}
	/*#members .member .copy {
		padding-top: 10vw;
	}*/
}	

@media(max-width:650px){
	#members .member .copy {
		gap: 2vw;
	}
	/*#members .member .copy {
		padding-top: 10vw;
	}*/
}	

@media(max-width:768px){
	footer.layout.desktop{
		display:none;
	}	
	
	#members p {
		max-width: 200px;
		font-size: 14px;
	}
	
	footer.layout.mobile {
		display:block;
		width:100%;
	}	
	
	footer.layout.mobile #logo{
		width:100%;
	}
	
	footer.layout.mobile .lower {
		display:flex;
		width:90%;
		margin:2rem auto;
		justify-content:space-between;
		gap:1rem;
	}	
	
	footer.layout.mobile ul {
		display:block;
	}	
	
	footer.layout.mobile ul li {
		margin-bottom:1rem;
	}
	
	footer.layout.mobile .copyright {
		font-size:14px;
	}	
	
	footer.layout.mobile .copy {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;  
		text-align:left;
		gap:1rem;

	}	
	
	footer.layout.mobile .subtitle {
		font-family: "neue-haas-grotesk-display", sans-serif;
		font-weight:600;
		font-size:1rem;
	}
}
