@font-face {
    font-family: 'Gotham';
    src: url('Gotham-Light.woff2') format('woff2'),
        url('Gotham-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('Gotham-Bold.woff2') format('woff2'),
        url('Gotham-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('Gotham-Book.woff2') format('woff2'),
        url('Gotham-Book.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* START CSSRESET */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}button,input[type="submit"]{padding: 0;border:none;outline:none;font:inherit;color:inherit;background:none;cursor:pointer;-webkit-appearance: none;-webkit-border-radius: none;}
*{box-sizing: border-box;}

body, html {
	scroll-behavior: smooth;
}

body {
    font-family: 'Gotham', serif;
    color: #160f31;
    width: 100%;
    overflow-x: hidden;
    position: relative;
    max-width: 100vw;
}

a {
    text-decoration: none;
    text-transform: uppercase;
    color: white;
}

nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1vmax 18vmax;
    background: linear-gradient(180deg, rgba(8,5,32,1) 0%,  rgba(255,255,255,0) 100%);
}

nav a {
	margin: 0 1vmax;
	font-weight: 600;
	color: #b3b6af;
	display: inline-block;
	font-size: calc(0.7em + 0.5vw);
}

.btn, input[type="submit"], .email .btn {
	text-transform: uppercase;
	cursor: pointer;
    color: #e0b90d;
	background: transparent;
    border: 2px solid;
    border-radius: 50px;
    font-weight: 600;
    padding: 15px 30px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
	font-family: 'Gotham';
}

.btn i {
    padding: 0 10px 0 20px;
}

#trailer {
    min-height: 90vh;
    background-image: url(herobg.jpg);
    background-size: cover;
    background-position: bottom;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

#trailer #logo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#trailer #logo img {
    max-width: 600px;
	width: 50vw;
}

#trailer .btn {
    font-size: calc(1em + 0.5vw);
    padding: 20px 40px;
}

#trailer #nella  {
    background: url('nella.png');
    height: 90vh;
    width: 50vw;
    background-size: contain;
    margin-left: -10vw;
    background-position: bottom;
    background-repeat: no-repeat;
}

#mini-signup {
    min-height: 10vh;
    background: #2E036E;
}

#mini-signup form, #mini-signup, form.email  {
	display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
	width: 100%;
}

#mini-signup form > * {
    margin: 0 20px;
}

#mini-signup span {
    color: #e0b90d;
    font-size: calc(1em + 0.5vw);
}

#mini-signup input:not(.btn), .email input:not(.btn) {
    flex-basis: 20%;
    padding: 15px 20px;
    border-radius: 50px;
    border: 0;
}

#story {
    min-height: 70vh;
    background: url(about.jpg);
    background-size: cover;
    background-position: bottom;
    display: flex;
	flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

#story .info {
    flex-basis: 500px;
}

#story .info h2 {
    color: #08236a;
    font-size: calc(1.5em + 1vw);
    font-weight: 600;
}

#story .info > * {
    margin-bottom: 30px;
}

#story .info p {
    color: #160f31;
    line-height: 1.5em;
    font-size: calc(0.9em + 0.3vw);
	letter-spacing: 0;
}

#story .info .btn {
    border: 1px solid #0d2299;
    color: #0d2299;
    padding: 15px 30px;
}

#story img {
    flex-basis: 600px;
    max-width: 600px;
}  

#merch {
    min-height: 80vh;
    padding: 5vh 0;
    background: url(merch.jpg);
    background-size: contain;
    background-position: top right;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#merch h2 {
    font-size: calc(1.5em + 1.5vw);
    font-weight: 600;
    text-transform: uppercase;
}

#merch h2 span {
    display: block;
    text-align: center;
    font-size: 0.5em;
    font-weight: 600;
    letter-spacing: 0.2em;
    margin-left: 0.2em;
	margin-bottom: 0.3em;
}


#signup {
    min-height: 30vh;
    background: url(footer.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

#signup img {
    position: absolute;
    bottom: 0;
    width: 20vw;
    left: 0;
}

#signup span {
    color: #f7cf00;
    width: calc(80px + 25vw);
    margin: 1em 0;
    font-size: calc(1em + 0.5vw);
    display: inline-block;
    text-align: center;
}

.email .btn {
    margin: 0 10px;
    background: #e0b90d;
    color: #270671;
    border-color: #e0b90d;
}

.email input:not(.btn) {
    width: calc(80px + 25vw);
	flex-grow: 1;
}

/* GENERAL GRID */
.grid {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
    max-width: 1250px;
}

.item {
	position: relative;
    display: inline-flex;
    flex-direction: column;
    margin: calc(20px + 0.5vw) 0;
    width: 25%;
}

.item-wrapper {
    background-image: url(merchbg.jpg);
    background-size: cover;
    padding: 0.25vw;
    margin: 5px;
}

.item-image {
	position: relative;
    padding-top: 140%;
    background-size: contain;
    background-repeat: no-repeat;
	background-position: center;	
	transition: all 1s ease-out;			
}

.item-image.alt {
    margin-top: -140%;
	opacity: 0;
	z-index: 2;				
}

.item:hover .item-image.alt {
	opacity: 1;
}

.item-details {
	text-align: center;
    padding: 0 0.5em;
    color: black;
    font-size: 0.9em;
}

.item-details span {
    display: block;
	width: 100%;
	margin: 10px auto;
}

.item-name {
    font-weight: 600;
    text-transform: initial;
}

@media only screen and (min-width: 800px) {
	#story > * {
		margin: 0 5vw;
	}
	
	#signup span {
		width: calc(80px + 30vw);
		font-size: calc(1.5em + 0.5vw);
	}
	
	.email input:not(.btn) {
		width: calc(80px + 30vw);
	}
}

@media only screen and (max-width: 800px) {				
	.item {
		flex-basis: 50%;
	}
	
	.item-details {
	  padding: 0 1em;
	  text-align: center;
	  font-size: 1em;
	}
	
    nav {
        width: 100vw;
        padding: 10px;
        text-align: center;
    }

    #trailer {
        min-height: unset;
        flex-direction: column;
        padding-top: 10vh;
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    #trailer #logo img {
        max-width: 450px;
        width: 90vw;
    }
    
    #trailer #nella {
        width: 100vw;
        height: 50vh;
    }

    #mini-signup form {
        flex-wrap: wrap;
        padding: 20px 0;
    }
    
    #mini-signup span {
        margin-bottom: 10px;
    }
    
    #mini-signup form > * {
        margin: 10px;
    }

    #story {
        flex-direction: column;
        min-height: unset;
		padding: 60px 0;
    }
    
    #story img {
        flex-basis: auto;
        max-width: 400px;
        width: 96%;
        padding: 20px;
    }
    
    #story .info {
        flex-basis: auto;
        text-align: center;
        padding: 0 10px;
        max-width: 500px;
        width: 90vw;
    }
	
	#merch {
		padding: 60px 0;
	}
	
    #signup {
        min-height: unset;
        padding: 20px 10vw;
        position: relative;
        z-index: 1;
		align-items: flex-end;
    }
    
    #signup span {
        width: 100%;
    }
    
    #signup img {
        width: 50vw;
        left: -20vw;
        z-index: -1;
    }

	#signup .email .btn {
		padding: 20px;
	}

	#signup .email input:not(.btn) {
		width: calc(40px + 25vw);
	}

	#signup form {
		display: flex;
	}

	#signup input.required {
		flex-grow: 1;
	}
}