@charset "UTF-8";
@import url("film.css");

:root {
	 --primary-color: #A23210;
	 --secondary-color: #28313E;
	 --font-color: #050A0F;
	 --bg-color: #FFFFFF;
	 --shadow-color: rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] {
	--primary-color: #7695BE;
	--secondary-color: #FAEFED;
	--font-color: #F3F4F7;
	--bg-color: #050A0F;
	--shadow-color: rgba(250, 239, 237, 0.1);
}

/*///////////////atl///////////////*/
.atl{
  padding: 170px 0px 25px;
}
h3{
	font-size: 25px;
	font-family: 'Palanquin Dark', sans-serif;
	font-style: normal;
	font-weight: 700;
	color: var(--primary-color);
	text-align: center;
	margin: 0px;
	text-transform: uppercase;
}

.atlcreds, .btl, .poster, .mySlides, .festivals{
  font-size: 13px;
	font-family: korolev,sans-serif;
	font-weight: 300;
	font-style: normal;
  text-align: center;
  letter-spacing: 2px;
}
.atlcreds p, .btl p{
  margin: 5px;
}
.role{
  font-style: italic;
}
/*///////////////specs///////////////*/
.atl ol{
  margin: 15px 0px 0px;
  padding: 0px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.spacer{
  font-size: 15px;
  font-weight: 400;
  display: inline;
  color: var(--primary-color);
}
.specs li{
  font-size: 13px;
	font-family: korolev,sans-serif;
	font-weight: 200;
	font-style: normal;
  letter-spacing: 2px;
	display: inline;
	margin: 0px 5px;
  padding: 0px;
	text-transform: uppercase;
}
/*///////////////logline///////////////*/

.credits{
	padding: 25px 10%;
}

.logline{
  font-size: 15px;
	font-family: korolev,sans-serif;
	font-weight: 400;
	font-style: italic;
  letter-spacing: 2px;
  margin: 0px;
  text-transform: uppercase;
  text-align: center;
  padding: 0px 10%;
  color: var(--primary-color);
}

#episodes a{
	font-size: 14px;
	font-family: korolev,sans-serif;
	font-weight: 400;
	font-style: italic;
  letter-spacing: 2px;
  margin: 0px;
  text-transform: uppercase;
  text-align: center;
  padding: 0px 20%;
}

/*///////////////vimeo///////////////*/
.vimeo iframe{
	position: relative;
	width: 100
	height: 100%;
}

/*///////////////accolades///////////////*/
.accolades{
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	align-content: center;
	justify-content: center;
	padding: 0px;
	margin: 0px;
}

/*///////////////poster///////////////*/
.poster, #episodes{
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	padding: 25px 0;
}

.poster img{
	width: 55vh;
}

.poster p{
	padding: 25px;
}

/*///////////////festivals///////////////*/
.festivals{
	padding: 25px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: left;
}

.festivals ul{
	padding:0;
	display: flex;
	flex-direction: column;
}

.festivals li{
	list-style-type: disc;
	display: list-item;
	margin: 0 0 5px 0;
	list-style-position: inside;
}

.officialselections{
	font-size: 18px;
	font-family: 'Palanquin Dark', sans-serif;
	font-style: normal;
	font-weight: 700;
	color: var(--primary-color);
	text-align: left;
	text-transform: uppercase;
}

li.award{
	font-size: 12px;
	font-style: italic;
	list-style-type: circle;
	text-indent: 40px;
}

/*///////////////buttons///////////////*/
.buttons, .prevnext{
  padding: 50px 0px;
  display: flex;
  align-items: center;
  flex-direction: row;
  font-size: 15px;
  font-family: 'Palanquin Dark', sans-serif;
	font-style: normal;
	font-weight: 800;
  color: var(--primary-color);
  width: 100%;
  cursor: pointer;
}

.buttons div, .prevnext a{
  width: 33.33%;
}
.back{
  text-align: left;
}
.projects, .close, .next, .prev{
  text-align: center;
}
.forward{
  text-align: right;
}
/*///////////////gallery///////////////*/
.gallery{
	padding: 25px 0px;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 2px;
}

.column img {
  margin: 2px;
  vertical-align: middle;
  width: 100%;
}
.movie{
	margin: 0px 0px 30px;
}

/* Responsive layout - makes a three column-layout instead of four columns */
@media screen and (max-width: 1200px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
	.poster img{
		width: 100%;
	}
	.atl{
		padding: 200px 5% 15px;
	}
	h3{
		font-size: 2.5em;
	}
	.atlcreds p{
		font-size: 1.25em;
	}
	.atlcreds{
			padding: 10px 0px;
	}

	ol.specs{
		padding: 0px;
		margin: 15px 0px;
	}

	.spacer{
		font-size: 1em;
	}

	.specs li{
		font-size: 0.7em;
		text-align: center;
	}

	.vimeo{
		position: static;
		padding: 25px 0px;
	}

	.row, .column{
		padding: 0px;
	}
	.column img{
		margin: 1px 0px 0px;
	}
	.credits{
		padding: 20px 10%;
	}
	.buttons{
		padding: 50px 5% 35px;
		font-size: 1.15em;
	}
	.logline{
		padding: 0px 0px 10px;
		font-size:1.15em;
	}
	.btl{
		font-size: 1em;
	}
	.prev, .next{
		font-size: 30px;
	}
	.close{
		font-size: 45px;
	}
	.modal{
		padding: 10px;
	}
	.accolades{
		flex-direction: column;
	}
}

/*///////////////modal///////////////*/

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
	padding: 0 1%;
	overflow: none;
  background-color: var(--bg-color);
}
.lightbox{
  display: flex;
  flex-direction: column;
	justify-content: center;
	align-content: center;
}
/* Modal Content */
.modal-content{
  position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 96vh;
}
.mySlides p{
	text-align: center;
}

.mySlides img{
	max-height: 85vh;
	max-width: 100%;
}

/* Prev, Close, Next*/
.prevnext{
  font-size: 17px;
  position: absolute;
	left: 0vw;
	bottom: 2vh;
	align-items: center;
	padding: 0 5%;
}

/* Hide the slides by default */
.mySlides {
  display: none;
}

img.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 var(--shadow-color);
  cursor: pointer;
}