/* GLOBAL 

	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

*/

body {
	background-color:black;
	width:100%;
	min-width: 320px;
	max-width:1440px;
}





/* SPLASH ANIMATION 

	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

*/

.splash-animation {
	position:absolute;
	width:100%;
	height:100%;
	z-index: 14;
	background-color:black;
	display:flex;
	flex-direction: row;
	align-items:center;
	-webkit-animation-name: splashFadeOut;
    animation-name: splashFadeOut;
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	animation-delay: 7s;
	-webkit-animation-delay:7s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}



@keyframes splashFadeOut {
	0% {opacity: 1; z-index: 14}
	100% {opacity: 0; z-index: 1}
}

@-webkit-keyframes splashFadeOut {
	0% {opacity: 1; z-index: 14}
	100% {opacity: 0; z-index: 1}
}

.splash-finished {
	width:0;
}

.splash-animation__container {
	position:absolute;
	width:100%;
}


/* TOP BAR 

	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

*/

.top-bar {
	position: fixed;
	z-index: 11;
	top:0;
	width: 100%;
	height:5px;
	background-color: #4D4D4D;
}


/* NAVIGATION 

	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

*/

nav {
	display:grid;
	width:100%;
	height:100%;
	position:fixed;
	grid-template-rows: 10% 90%;
	grid-template-columns: 100%;
	grid-template-areas: 
		" a "
		" b ";
}

.overlay-nav {
	z-index: 3;
}

@media (min-width:600px) {
	nav {
		height:15%;
		grid-template-rows: 15% 70% 15%;
		grid-template-columns: 30% 70%;
		grid-template-areas: 
			" . . "
			" a b "
			" . . ";
		width:90%;
		margin-left:5%;
	}
}

@media (min-width:800px) {
	nav {
		grid-template-columns: 20% 20% 60%;
		grid-template-areas:
			" . . . "
			" a . b "
			" . . . ";
	}
}

@media (min-width:1100px) {
	nav {
		grid-template-columns: 20% 30% 50%;
	}
}

.logo-container {
	grid-area: a;
	display:grid;
	grid-template-rows: 1fr;
	grid-template-columns: 2fr 1fr;
	grid-template-areas: 
		" logo burger ";
	background: black;
	
}

@media (min-width:600px) {
	.logo-container {
		grid-template-columns: 1fr;
		grid-template-areas: 
			" logo ";
	}
}

.logo {
	grid-area: logo;
	display:grid;
	justify-items:center;
	align-items: center;
	opacity: 0.7;
}

.logo a {
	display:grid;
	justify-items:center;
	align-items: center;
}

@media (min-width:600px) {
	.logo a {
		justify-items: flex-start;
	}
}

.logo img {
	width:50%;
}

@media (min-width:600px) {
	.logo img {
		width:80%;
	}
}

.burger-container {
	grid-area: burger;
	display:grid;
	justify-items:center;
	align-items: center;
	cursor:pointer;
}

@media (min-width:600px) {
	.burger-container {
		display:none;
	}
}

.burger {
	width:30px;
	height:30px;
}

.burger-lines {
	position: fixed;
	height: 30px;
	width: 30px; 
	z-index: 12;
}

.burger span {
	position: absolute;
	width: 100%;
	height: 2px;
	top: 50%;
	margin-top: -1px;
	left: 0;
	display: block;
	background-color:hsla(0,0%,73%,1.00);
	transition: .5s;
}
.burger span:first-child {
	top: 3px; 
}
.burger span:last-child {
	top: 26px; 
} 

.burger-checked span { 
	opacity: 0;
}

.burger-checked span:first-child { 
	opacity: 1;
	transform: rotate(-405deg) translateY(15px);
}

.burger-checked span:last-child { 
	opacity: 1;
	transform: rotate(405deg) translateY(-15px);
	top:24px;
}

.navigation-menu-container {
	grid-area: b;
	display:none;
}

@media (min-width:600px) {
	.navigation-menu-container {
		display:block;
	}
}

.show-menu {
	display:block;
	animation: menuFade 2s;
	background:hsla(0,0%,0%,0.90);
	
}

@keyframes menuFade {
	0% {
		opacity:0;
	}
	100% {
		opacity:1;
	}
}

.navigation-menu {
	display: flex;
	flex-direction: column;
	justify-content:flex-start; 
	align-items: flex-start;
	width:100%;
	height:100%;
	padding: 40px 0;
}

@media (min-width:600px) {
	.navigation-menu {
		flex-direction: row;
		padding: 0 20px;
		align-items: center;
	}
}

.navigation-menu div {
	height:100%;
	width:4em;
	margin: 0 auto;
	flex-grow: 1;
	display:flex;
	align-items: center;
	opacity:0.6;
	transition: .5s;
	transition-delay: 0s;
	cursor: pointer;
}

@media (min-width:600px) {
	.navigation-menu div {
		height:60%;
	}
}

.navigation-menu div:hover {
	opacity:1;
}



.navigation-menu div a {
	width:100%;
	height:100%;
	display:flex;
	align-items: center;
	justify-content:center;
}



.navigation-menu div img {
	margin: auto 0;
	width:100%;
}

@media (min-width:600px) {
	.navigation-menu div img {
		height:100%;
		width:auto;
	}
}

.navigation-menu p {
	color: hsla(0,0%,82%,1.00);
	font-family: 'Cormorant', serif;
	text-align: center;
	font-size: 1em;
	width:100%;
}





/* HOME ANIMATION 

	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

*/

.home-animation {
	display:flex;
	width: 100%;
	flex-direction: row;
	align-items: center;
	position:absolute;
	height:90%;
	top: 10%;
	
}

.home-animation__faces {
	z-index: -1;
	position:absolute; 
	width:100%;
	height:60%;
	overflow-x: hidden;
	display: flex;
	flex-direction: row;
	align-items: center;
	opacity: 0.5;
}



.right-face {
	position: fixed;
	width:130%;
	margin-left:70%;
	animation-name: moveRightFace;
	animation-delay: 11s;
	animation-duration: 2s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards; 
	z-index: 1;
}

@media (min-width:751px) {
	.right-face {
		width:100%;
	}
}

@media (min-width:1001px) {
	.right-face {
		width:80%;
	}
}

@media (min-width:1251px) {
	.right-face {
		width:70%;
	}
}

@keyframes moveRightFace {
	0% { margin-left: 70%;}
	100% { margin-left: 10%;}
}

@media (min-width:1001px) {
	@keyframes moveRightFace {
		0% { margin-left: 70%;}
		100% { margin-left: 20%;}
	}
}

@media (min-width:1251px) {
	@keyframes moveRightFace {
		0% { margin-left: 70%;}
		100% { margin-left: 30%;}
	}
}

.right-eye {
	position: fixed;
	width:130%;
	margin-left:70%;
	animation-name: moveRightFace;
	animation-delay: 11s;
	animation-duration: 2s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards; 
	z-index: 3;
}

@media (min-width:751px) {
	.right-eye {
		width:100%;
	}
}

@media (min-width:1001px) {
	.right-eye {
		width:80%;
	}
}

@media (min-width:1251px) {
	.right-eye {
		width:70%;
	}
}

.left-face {
	z-index: 2;
	position: fixed;
	width:130%;
	margin-left:-100%;
	animation-name: moveLeftFace;
	animation-delay: 11s;
	animation-duration: 2s;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards; 
}

@media (min-width:751px) {
	.left-face {
		width:100%;
		margin-left: -70%;
	}
}

@media (min-width:1001px) {
	.left-face {
		width:80%;
		margin-left: -50%;
	}
}

@media (min-width:1251px) {
	.left-face {
		width:70%;
		margin-left: -40%;
	}
}

@keyframes moveLeftFace {
	0% { margin-left: -100%;}
	100% { margin-left: -40%;}
}

@media (min-width:751px) {
	@keyframes moveLeftFace {
		0% { margin-left: -70%;}
		100% { margin-left: -10%;}
	}
}

@media (min-width:1001px) {
	@keyframes moveLeftFace {
		0% { margin-left: -50%;}
		100% { margin-left: 0%;}
	}
}

@media (min-width:1251px) {
	@keyframes moveLeftFace {
		0% { margin-left: -40%;}
		100% { margin-left: 0%;}
	}
}


.home-animation__faces img {
	width:100%;
}


/* LINEUP PAGE

	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

*/



/* FIX GRID FOR UPDATES HERE 

	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

*/

.lineup-preview-container {
	position:absolute;
	overflow: scroll;
	top:15%;
	width:100%;
	height:85%;
	padding-bottom:40px;
	display:grid;
	grid-template-rows: 40% 40% 40% 40% 40% 40% 40% 40% 40% 40% 40% 40%;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"novice novice"
		"expired expired"
		"chyna chyna"
		"lie lie"
		"second second"
		"moon moon"
		"born born"
		"lava lava"
		"friedbarry friedbarry"
		"dollhouse dollhouse"
		" eight eight "
		" friend nona "
		" jezebel jezebel "
		" yankelova yankelova "
		" softbodies houseofsweat"
		" curveball curveball"
		" inland inland "
		;
		
}

@media (min-width:600px) {
	.lineup-preview-container {
		grid-template-rows: 50% 50% 50% 50% 50% 50% 50% 50% 50% 50% 50% 50%;
	}
}

@media (min-width:800px) {
	.lineup-preview-container {
		grid-template-rows: 60% 60% 60% 60% 60% 60% 60% 60% 60% 60% 60% 60%;
	}
}

@media (min-width:1100px) {
	.lineup-preview-container {
		grid-template-rows: 70% 70% 70% 70% 70% 70% 70% 70% 70% 70% 70% 70%;
	}
}

@media (min-width:1200px) {
	.lineup-preview-container {
		grid-template-rows: 80% 80% 80% 80% 80% 80% 80% 80% 80% 80% 80% 80%;
	}
}

.lineup-preview {
	width: 100%;
	height:100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-position: center;
	background-size: cover;
	cursor:pointer;
	text-decoration: none;
}


/* ADD IMAGE FOR UPDATES HERE 

	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

*/

.novice-preview {
	grid-area: novice;
	background-image: url("../images/lineup/novice-still.jpg");
}

.expired-preview {
	grid-area: expired;
	background-image: url("../images/lineup/expired-still.jpg");
}

.chyna-preview {
	grid-area: chyna;
	background-image: url("../images/lineup/chyna-still.jpg");
}

.lie-preview {
	grid-area: lie;
	background-image: url("../images/lineup/lie-still.jpg");
}

.second-preview {
	grid-area: second;
	background-image: url("../images/lineup/second-still.jpg");
}

.moon-preview {
	grid-area: moon;
	background-image: url("../images/lineup/moon-still.jpg");
}

.born-preview {
	grid-area: born;
	background-image: url("../images/lineup/born-still.jpg");
}

.lava-preview {
	grid-area: lava;
	background-image: url("../images/lineup/lava-still.jpg");
}


.fried-barry-preview {
	grid-area: friedbarry;
	background-image: url("../images/lineup/FRIED BARRY-1.jpg");
}

.doll-house-preview {
	grid-area: dollhouse;
	background-image: url("../images/lineup/DOLLHOUSE_MASTER.00_01_54_03.Still001.png");
}

.eight-preview {
	grid-area: eight;
	background-image: url("../images/lineup/8-still.jpg");
}

.my-last-friend-preview {
	grid-area: friend;
	background-image: url("../images/lineup/my-last-friend-still.png");
}

.nona-preview {
	grid-area: nona;
	background-image: url("../images/lineup/nona-still.jpg");
}

.jezebel-preview {
	grid-area: jezebel;
	background-image: url("../images/lineup/jezebel-still.jpeg");
	background-position-y: bottom;
}

.yankelova-preview {
	grid-area: yankelova;
	background-image: url("../images/lineup/yankelova-still.jpg");
}

.soft-bodies-preview {
	grid-area: softbodies;
	background-image: url("../images/lineup/soft-bodies-still.jpg");
}

.house-of-sweat-preview {
	grid-area: houseofsweat;
	background-image: url("../images/lineup/house-of-sweat-and-tears-still.jpg");
}

.curveball-preview {
	grid-area: curveball;
	background-image: url("../images/lineup/curveball-still.jpg");
}

.inland-sea-preview {
	grid-area: inland;
	background-image: url("../images/lineup/inland-sea-still.jpg");
}





.lineup-preview p  {
	color: hsla(0°, 0%, 100%,1.00);
	text-shadow: 3px 3px 5px #000000;
	font-family: 'Cormorant', serif;
	opacity:0;
	font-size:1.5rem;
	text-align: center;
	width:80%;
}






/* LINEUP INDIVIDUAL PAGES

	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

*/



.lineup-display-container {
	position:absolute;
	height:85%;
	top:15%;
	overflow: scroll;
}

.eight-display-container {
	width:100%;
}

.lineup-still-and-title {
	position:relative;
	display:flex;
	justify-content: center;
	height:70%;
	cursor:pointer;
	background-position: center;
	background-size: cover;
}

.lineup-still-and-title h1 {
	position:absolute;
	left:5%;
	width:75%;
	bottom:10px;
	font-family: 'Cormorant', serif;
	color:hsla(0,0%,76%,1.00);
	font-size: 2rem;
}

@media (min-width:375px) {
	.lineup-still-and-title h1 {
		width:70%;
	}
}

@media (min-width:423px) {
	.lineup-still-and-title h1 {
		width:70%;
		font-size: 2.2rem;
	}
}

@media (min-width:475px) {
	.lineup-still-and-title h1 {
		width:70%;
		font-size: 2.5rem;
	}
}

@media (min-width:525px) {
	.lineup-still-and-title h1 {
		width:65%;
	}
}

@media (min-width:575px) {
	.lineup-still-and-title h1 {
		width:60%;
	}
}

@media (min-width:625px) {
	.lineup-still-and-title h1 {
		width:55%;
	}
}

@media (min-width:675px) {
	.lineup-still-and-title h1 {
		font-size: 2.8rem;
	}
}

@media (min-width:750px) {
	.lineup-still-and-title h1 {
		font-size: 3rem;
	}
}


@media (min-width:825px) {
	.lineup-still-and-title h1 {
		width:50%;
	}
}

@media (min-width:900px) {
	.lineup-still-and-title h1 {
		font-size:3.1rem;
		width:45%;
	}
}

@media (min-width:1025px) {
	.lineup-still-and-title h1 {
		width:40%;
	}
}

@media (min-width:1150px) {
	.lineup-still-and-title h1 {
		width:35%;
	}
}

@media (min-width:1375px) {
	.lineup-still-and-title h1 {
		width:30%;
	}
}

.back-to-lineup {
	opacity: .3;
	position:absolute;
	width:50px;
	height:50px;
	z-index: 2;
	margin-left:5%;
	background-size: cover;
	background-image: url('../images/lineup/back-to-lineup.png');
}

.back-to-lineup:hover {
	opacity:.6;
}

.lineup-still-and-title div {
	opacity:.3;
	position: absolute;
	width: 100px;
	height: 100px;
	border: solid 2px transparent;
	border-radius: 100px;
}

.lineup-still-and-title div:before {
	content: "";
	width: 34px;
	height: 53px;
	border-left: 2px solid white;
	border-radius: 5px;
	position: absolute;
	top: 23px;
	left: 37px;
	}

.lineup-still-and-title div:after {
	content: "";
	position: absolute;
	top: 27px;
	left: 19px;
	width: 42px;
	height: 42px;
	transform: rotate(45deg) skew(-5deg, -5deg);
	border-top: 2px solid white;
	border-right: 2px solid white;
	border-radius: 5px;
}



/* ADD IMAGE FOR UPDATES HERE 

	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

*/

.novice-still {
	background-image: url("../images/lineup/novice-still.jpg");
}

.expired-still {
	background-image: url("../images/lineup/expired-still.jpg");
}

.chyna-still {
	background-image: url("../images/lineup/chyna-still.jpg");
}

.lie-still {
	background-image: url("../images/lineup/lie-still.jpg");
}

.second-still {
	background-image: url("../images/lineup/second-still.jpg");
}

.moon-still {
	background-image: url("../images/lineup/moon-page.jpg");
}

.born-still {
	background-image: url("../images/lineup/born-still.jpg");
}




.lava-still {
	background-image: url("../images/lineup/lava-still.jpg");
}

.fried-barry-still {
	background-image: url("../images/lineup/FRIED BARRY-1.jpg");
}

.doll-house-still {
	background-image: url("../images/lineup/DOLLHOUSE_MASTER.00_01_54_03.Still001.png");
}

.eight-still {
	background-image: url("../images/lineup/8-still.png");
}

.my-last-friend-still {
	background-image: url("../images/lineup/my-last-friend-still.png");
}

.nona-still {
	background-image: url("../images/lineup/nona-still.jpg");
}

.jezebel-still {
	background-image: url("../images/lineup/jezebel-still.jpeg");
	background-position-y: bottom;
	
}

.yankelova-still {
	background-image: url("../images/lineup/yankelova-still.jpg");
	
}

.softness-still {
	background-image: url("../images/lineup/soft-bodies-still.jpg");
}

.sweat-still {
	background-image: url("../images/lineup/house-of-sweat-and-tears-still.jpg");
}

.curveball-still {
	background-image: url("../images/lineup/curveball-still.jpg");
}

.inland-still {
	background-image: url("../images/lineup/inland-sea-still.jpg");
}




.cast-crew-container {
	padding-top: 50px;
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto auto auto;
	grid-template-areas:
		" director "
		" writer "
		" actors ";
	width:90%;
	margin-left: 5%;
	color:hsla(0,2%,69%,1.00);
	cursor:default;
}

@media (min-width:500px) {
	.cast-crew-container {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto;
		grid-template-areas: 
			" director writer "
			" actors . ";
	}
}

@media (min-width:650px) {
	.cast-crew-container {
		width:80%;
		height:50%;
		padding: 100px 0 25px 0;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto auto;
		grid-template-areas: 
			" director writer . "
			" actors actors actors ";
	}
}

.inland-cast-crew-container {
	height:auto;
	grid-template-rows: auto;
	grid-template-areas:
		" director . . ";
}

.cast-crew-container > div {
	padding-bottom: 30px;
}

.director-container {
	grid-area: director;
}

.writer-container {
	grid-area: writer;
}

.stars-container {
	grid-area: actors;
}

.directed-by, .written-by, .starring {
	padding-bottom: 7px;
	font-family: 'Inconsolata', monospace;
	letter-spacing: 2px;
	font-size:.8rem;
}

@media (min-width:500px) {
	.directed-by, .written-by, .starring {
		padding-bottom:12px;
	}
}

@media (min-width:800px) {
	.directed-by, .written-by, .starring {
		font-size: .9rem;
	}
}

.director, .writer, .actors {
	font-family: 'Cormorant', serif;
	opacity:0.7;
}

@media (min-width:800px) {
	.director, .writer, .actors {
		font-size: 1.1rem;
	}
}

@media (min-width:1000px) {
	.director, .writer, .actors {
		font-size: 1.3rem;
	}
}


@media (min-width:650px) {
	.three-stars {
		display:grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto auto;
		grid-template-areas: 
			" starring . . "
			" one two three "
	}
	
	.three-starring {
		grid-area: starring;
	}
	.three-stars-actor1 {
		grid-area: one;
	}
	.three-stars-actor2 {
		grid-area: two;
	}
	.three-stars-actor3 {
		grid-area: three;
	}
}

.lineup-summary {
	width:90%;
	padding: 30px 5% 25px 5%;
	background-color:black;
	color:hsla(0,2%,69%,0.80);
	font-family: 'Cormorant', serif;
	cursor:pointer;
}

@media (min-width:600px) {
	.lineup-summary {
		font-size: 1.1rem;
		padding-right:20%;
	}
}

@media (min-width:700px) {
	.lineup-summary {
		font-size: 1.1rem;
		padding-right:30%;
	}
}

@media (min-width:900px) {
	.lineup-summary {
		font-size: 1.2rem;
		padding-right:35%;
	}
}

@media (min-width:1100px) {
	.lineup-summary {
		font-size: 1.3rem;
		padding-right:40%;
		line-height: 1.5rem;
	}
}

/* ADD PADDING FOR MOVIES WITHOUT LAURELS ON UPDATES

	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

*/

.lava-summary {
	padding-bottom:75px;
}

.jezebel-summary {
	padding-bottom:75px;
}

.lineup-laurels {
	width:50%;
	padding:60px 0 75px 5%;
	display:grid;
	grid-template-columns: 30% 30% 30%;
	grid-column-gap: 5%;
	grid-row-gap: 10px;
	opacity: 0.8;
}

.lineup-laurels__image-container img {
	width:100%;
}





.lineup-trailer {
	display: none;
}

.trailer-seen {
	display:flex;
	align-items: center;
	justify-content: center;
	background-color: hsla(0,0%,0%,0.60);
	position:absolute;
	width:100%;
	height:100%;
	z-index: 30;
}

.trailer-coming-soon {
	color:white;
	color:hsla(0,2%,69%,0.80);
	font-family: 'Cormorant', serif;
	cursor:pointer;
	font-size:1.5rem;
}

.lineup-trailer video {
	width:90%;
}

.exit-lineup-display {
	position: absolute;
	cursor: pointer;
	color:hsla(0,2%,74%,1.00);
	font-size:1.5rem;
	z-index: 14;
	top:20%;
	right:10%;
}




/* FILMS WE LOVE PAGE

	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

*/



.films-we-love-container {
	position: absolute;
	overflow: scroll;
	cursor: default;
	width:100%;
	height:85%;
	top:15%;
	padding-bottom:40px;
	display:grid;
	background-color: hsla(0,0%,5%,1.00);
	grid-template-rows: 75px repeat( 24, 200px );
	grid-template-columns: 1fr;
	grid-template-areas: 
		" header "
		" a "
		" b "
		" c "
		" d "
		" e "
		" f "
		" g "
		" h "
		" i "
		" j "
		" k "
		" l "
		" m "
		" n "
		" o "
		" p "
		" q "
		" r "
		" s "
		" t "
		" u "
		" v "
		" w "
		" x ";	
}

@media (min-width:450px) {
	.films-we-love-container {
		margin-top:7%;
		grid-template-rows: 75px repeat(12, 300px);
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			" header header "
			" a b "
			" c d "
			" e f "
			" g h "
			" i j "
			" k l "
			" m n "
			" o p "
			" q r "
			" s t "
			" u v "
			" w x ";
	}	
}

@media (min-width:650px) {
	.films-we-love-container {
		margin-top:4%;
		grid-template-rows: 75px repeat(8,300px);
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-areas: 
			" header header header "
			" a b c "
			" d e f "
			" g h i "
			" j k l "
			" m n o "
			" p q r "
			" s t u "
			" v w x ";
	}
}

@media (min-width:900px) {
	.films-we-love-container {
		margin-top: 1%;
		grid-template-rows: 75px repeat(6,300px);
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-template-areas: 
			" header header header header "
			" a b c d "
			" e f g h "
			" i j k l "
			" m n o p "
			" q r s t "
			" u v w x "
	}
}

.films-we-love-container div {
	display: flex;
	justify-content: center;
	align-items: center;
	background-size: cover;
	background-position: center;
}

.films-we-love-container div p {
	color:hsla(0,0%,100%,1.00);
	text-shadow: 3px 3px 5px #000000;
	font-family: 'Cormorant', serif;
	opacity:0;
	font-size:1.5rem;
}

@media (min-width:500px) {
	.films-we-love-container div p {
		font-size: 2rem;
	}
}

.films-we-love-container div p:hover {
	cursor: default;
}

.love-header {
	font-family: 'Cormorant', serif;
	color:hsla(0,0%,26%,1.00);
	font-size: 1.6em;
	grid-area: header;
}

.love-a {
	grid-area: a;
	background: url("../images/love-images/unknown1.jpg");
}

.love-b {
	grid-area: b;
	background: url("../images/love-images/clue.jpg");
}

.love-c {
	grid-area: c;
	background: url("../images/love-images/unknown2.jpg");
}

.love-d {
	grid-area: d;
	background: url("../images/love-images/fantastic-planet.jpeg");
}

.love-e {
	grid-area: e;
	background: url("../images/love-images/medea.jpg");
}

.love-f {
	grid-area: f;
	background: url("../images/love-images/medea2.jpg");
}

.love-g {
	grid-area: g;
	background: url("../images/love-images/repulsion.jpg");
}

.love-h {
	grid-area: h;
	background: url("../images/love-images/stalker.jpg");
}

.love-i {
	grid-area: i;
	background: url("../images/love-images/twin-peaks.jpg");
}

.love-j {
	grid-area: j;
	background: url("../images/love-images/ran.jpg");
}

.love-k {
	grid-area: k;
	background: url("../images/love-images/thomas-crown-affair.jpg");
}

.love-l {
	grid-area: l;
	background: url("../images/love-images/meiko-kaji.jpg");
}

.love-m {
	grid-area: m;
	background: url("../images/love-images/2046.jpg");
}

.love-n {
	grid-area: n;
	background: url("../images/love-images/bicycle-thief.jpg");
}

.love-o {
	grid-area: o;
	background: url("../images/love-images/alfredo-garcia.jpg");
}

.love-p {
	grid-area: p;
	background: url("../images/love-images/game-of-death.jpg");
}

.love-q {
	grid-area: q;
	background: url("../images/love-images/chinese-bookie.jpg");
}

.love-r {
	grid-area: r;
	background: url("../images/love-images/elevator-to-the-gallows.jpg");
}

.love-s {
	grid-area: s;
	background: url("../images/love-images/happy-together.jpg");
}

.love-t {
	grid-area: t;
	background: url("../images/love-images/jules-et-jim.jpg");
}

.love-u {
	grid-area: u;
	background: url("../images/love-images/le-samourai.jpg");
}

.love-v {
	grid-area: v;
	background: url("../images/love-images/the-rake-la-dolce-vita-marcello-mastroianni.jpg");
}

.love-w {
	grid-area: w;
	background: url("../images/love-images/night-of-the-hunter.jpg");
}

.love-x {
	grid-area: x;
	background: url("../images/love-images/shampoo.jpg");
}

/* ABOUT PAGE

	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

*/

.about-container {
	position:absolute;
	width:100%;
	top: 15%;
	height:85%;
	padding-bottom: 100px;
	display:grid;
	justify-items: center;
	grid-template-columns: 1fr;
	grid-template-rows: 2.5% 50% 5% 50% 5% 50% 5% 50% 12.5%;
	grid-template-areas:
		" . "
		" daisy "
		" . " 
		" dean "
		" . "
		" Emma "
		" . "
		" world "
		" . ";
	align-items: center;
	overflow: scroll;
}

@media (min-width:450px) {
	.about-container {
		margin-top: 5%;
	}
}

@media (min-width:500px) {
	.about-container {
		margin-top: 0%;
	}
}

@media (min-width:600px) {
	.about-container {
		padding-top:50px;
		grid-template-rows: 1fr 100px 1fr;
		grid-template-columns: 1fr 50px 1fr;
		grid-template-areas: 
			" daisy . dean "
			" . . . "
			" emma . world ";
	}
}

@media (min-width:850px) {
	.about-container {
		grid-template-columns: 1fr 80px 1fr;
	}
}

@media (min-width:1000px) {
	.about-container {
		grid-template-columns: 1fr 100px 1fr;
	}
}

@media (min-width:1050px) {
	.about-container {
		grid-template-columns: 1fr 130px 1fr;
	}
}

@media (min-width:1100px) {
	.about-container {
		grid-template-columns: 1fr 200px 1fr;
	}
}

@media (min-width:1150px) {
	.about-container {
		grid-template-columns: 1fr 250px 1fr;
	}
}



.dean-container,.daisy-container, .emma-container, .world-container {
    width: 50%;
 	height: 100%;; 
	cursor:pointer;
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -o-transition: -o-transform 1s;
    transition: transform 1s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50%;
}

@media (min-width:500px) {
	.dean-container,.daisy-container, .emma-container, .world-container {
		width:40%;
	}
}

@media (min-width:600px) {
	.dean-container,.daisy-container,.emma-container, .world-container {
		width:80%;
		height:25rem;
	}
}

@media (min-width:725px) {
	.dean-container,.daisy-container,.emma-container, .world-container {
		height:30rem;
	}
}

@media (min-width:850px) {
	.dean-container,.daisy-container,.emma-container, .world-container {
		width:70%;
		height:30rem;
	}
}

@media (min-width:850px) {
	.dean-container,.daisy-container,.emma-container, .world-container {
		width:55%;
		height:30rem;
	}
}

.daisy-container {
	grid-area: daisy;
}

@media (min-width:600px) {
	.daisy-container {
		justify-self:end;
	}
}

.dean-container {
	grid-area: dean;
}

@media (min-width:600px) {
	.dean-container {
		justify-self:start;
	}
}

.emma-container {
	grid-area: emma;
}

@media (min-width:600px) {
	.emma-container {
		justify-self:end;
	}
}

.world-container {
	grid-area: world;
}

@media (min-width:600px) {
	.world-container {
		justify-self:start;
	}
}

.dean-container div,.daisy-container div,.emma-container div, .world-container div {
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

.daisy-front {
	background-image: url('../images/priestess.jpg');
	background-size: cover;
	background-position: bottom;
}

.dean-front {
	background-image: url('../images/the-moon.png');
	background-size: cover;
	background-position: bottom;
}

.emma-front {
	background-image: url("../images/unnamed.png");
	background-size: cover;
	background-position: bottom;
}

.world-front {
	background-image: url('../images/world.jpg');
	background-size: cover;
	background-position: bottom;
}

.daisy-back, .dean-back, .emma-back, .world-back {
    background-color:hsla(60,37%,90%,1.00);
	overflow: scroll; 
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
	font-family: 'Cormorant', serif;
	text-align: center;
}

.bio-name {
	font-size: 1.3em;
	margin-top: 20px;
}

@media (min-width:725px) {
	.bio-name {
		font-size: 1.6em;
		margin-top: 30px;
	}
}

.bio-title {
	font-size:1em;
	margin-bottom: 10px;
}

@media (min-width:725px) {
	.bio-title {
		font-size: 1.3em;
		margin-bottom: 30px;
	}
}

.bio-image {
	width:80%;
	/*margin-left:10%;*/
	margin-bottom: 20px;
}

.bio {
	padding-bottom: 20px;
	font-size:.8em;
	text-align: left;
	width:80%;
	margin-left: 10%;
	hyphens:auto;
	line-height: 1.5em;
}

@media (min-width:725px) {
	.bio {
		font-size: 1em;
		margin-top: 10px;
	}
}

.flipped {
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
}

/* PSYCHE PAGE

	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

*/

.psyche-container {
	position:absolute;
	height:85%;
	width:100%;
	top:15%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor:default;
}

.psyche-image-and-text {
	display:flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	width:90%;
	height:25em;
	background:url('../images/circles-still.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: 150%;
	color:hsla(0,0%,77%,1.00);
	text-shadow: 3px 3px 5px #000000;
	font-family: 'Cormorant', serif;
	text-align: center;
}

.psyche-text {
	display:flex;
	flex-direction: column;
	align-items: center;
	width:80%;
}

@media (min-width:700px) {
	.psyche-text {
		width:50%;
	}
}

@media (min-width:900px) {
	.psyche-text {
		width:40%;
	}
}

.psyche-invited {
	font-size:2em;
}

.psyche-favorites {
	font-size: 1em;
	margin: 2em 0;
}

.psyche-submit {
	background-color: hsla(0,0%,79%,1.00);
	color:hsla(0,0%,18%,1.00);
	text-shadow: 0 0;
	width:30%;
	margin:10px;
	cursor:pointer;
}

.psyche-submit a {
	text-decoration: none;
	color:inherit;
}

/* CONTACT 

	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

*/

.contact-container {
	position:absolute;
	height:85%;
	width:100%;
	top:15%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.contact {
	width:90%;
	position: absolute;
	height:40%;
	background-image: url('../images/contact.png');
	background-position: center left;
	background-repeat: no-repeat;
	background-size: 140%;
	color:hsla(0,0%,77%,1.00);
	text-shadow: 3px 3px 5px #000000;
	font-family: 'Cormorant', serif;
	font-size: 1rem;
	
}

@media (min-width:400px) {
	.contact {
		font-size: 1.2rem;
	}
}

@media (min-width:600px) {
	.contact {
		font-size: 1.4rem;
		height:50%;
	}
}

@media (min-width:800px) {
	.contact {
		font-size: 1.6rem;
	}
}

@media (min-width:1000px) {
	.contact {
		font-size: 1.8rem;
		height:60%;
	}
}

@media (min-width:1200px) {
	.contact {
		height:70%;
	}
}


/* BOTTOM BAR 

	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

*/

.bottom-bar {
	position: fixed;
	width: 100%;
	height:20px;
	background-color: #4D4D4D;
	bottom:0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bottom-bar-home {
	-webkit-animation-name: bottomBarChange;
    animation-name: bottomBarChange;
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	animation-delay: 7s;
}

@keyframes bottomBarChange {
	0% {z-index: 1}
	100% {z-index: 16}
}

.bottom-bar p {
	text-align: right;
	width:90%;
	font-family: 'Cormorant', serif;
	font-size: .8rem;
	cursor:default;
}