@charset "UTF-8";
@import url("index.css");
/* CSS Document */
: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);
}

body{
	margin: 0 5%;
	font-family: korolev, sans-serif;
	font-weight: 100;
	color: var(--font-color);
	background-color: var(--bg-color);
}
* {box-sizing: border-box;}
/*///////////////master///////////////*/
a{
	text-decoration: none;
	color: var(--font-color);
}
a:hover{
	color: var(--primary-color);
}
.tab{
	margin-left: 35px;
}
.active{
	color: var(--primary-color);
}
/*///////////////header///////////////*/
#navbar{
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 45px 5%;
	position: fixed;
	left:0;
	width: 100%;
	z-index: 99;
	transition: 0;
	background-color: var(--bg-color);
}
.title{
	width: 100%;
}
.nav{
	width: 100%;
}

/*///////////////title///////////////*/
#title{
	font-size: 25px;
	font-family: 'Palanquin Dark', sans-serif;
	font-style: normal;
	font-weight: 700;
	margin: 0px 0px 5px;
	color: var(--primary-color);
}
#title p{
	margin: 7px 0px;
}

h1, h2, h4,h5{
	margin: 0px;
}

h2{
	font-size: 13px;
	font-family: 'Palanquin Dark', sans-serif;
	font-style: normal;
	font-weight: 500;
}

#cinematographer{
	font-size: 11px;
	font-family: korolev, sans-serif;
	font-weight: 200;
	font-style: normal;
	letter-spacing: 6px;
	margin: 0px;
	color: var(--secondary-color);
}

h3{
	font-size: 14px;
	font-family: korolev, sans-serif;
	font-weight: 600;
	font-style: normal;
	margin: 5px 0px 0px;
	color: var(--secondary-color);
}

h4{
	font-family: 'Palanquin Dark', sans-serif;
	font-weight: 500;
	font-size: 18px;
	letter-spacing: 0px;
	color: var(--font-color);
}
h5{
	font-size: 14px;
	font-family: korolev,sans-serif;
	font-weight: 200;
	font-style: normal;
  letter-spacing: 2px;
	margin: 0px;
  padding: 0px;
	text-transform: uppercase;
	color: var(--primary-color);
}
/*///////////////nav///////////////*/
ol{
	padding: 0px;
}
li{
	display: inline;
	float: right;
	margin: 0px 0px 0px 40px;
	padding: 0px;
}
/*///////////////stills///////////////*/
.stills{
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.stills img{
	width: 33.33%;
	height: 100%;
	margin: 2px;
}
/*///////////////work///////////////*/
.works{
	padding: 170px 0px 0px;
	text-align: center;
}

.work{
	padding: 15px 0px 25px 0px;
}
.worktitle{
	font-size: 18px;
	font-family: 'Palanquin Dark', sans-serif;
	font-style: normal;
	font-weight: 500;
	margin: 10px 0 0;
	color: var(--secondary-color);
	text-transform: uppercase;
}

.worktitle:hover{
	color: var(--primary-color);
}

.mediaType{
	font-size: 13px;
	font-family: korolev,sans-serif;
	font-weight: 200;
	font-style: italic;
  letter-spacing: 2px;
	margin: 0px;
  padding: 0px;
	text-transform: lowercase;
	color: var(--primary-color);
}

.mediaType:hover{
	color: var(--secondary-color);
}

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

/*///////////////reel///////////////*/
.reel{
	padding:170px 0px 0px;
}

#underConstruction{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: center;
	align-items: center;
	text-align: center;
	flex-wrap: wrap;
	height: 80vh;
	font-size: 20px;
	padding-top: 100px;
	font-style: italic;
}
#underConstruction p{
	padding: 0px;
	margin: 5px;
}

/*///////////////about///////////////*/
.about{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	padding: 170px 0px 0px;
}
.about p{
	margin-top: 0px;
}
.pics{
	width: 40%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: right;
}
.pics img{
	width: 100%;
}

.bio, .info{
	width: 30%;
	text-align: left;
	font-size: 14px;
	font-weight: 200;
	letter-spacing: 1px;
}

.minibio{
	color: var(--primary-color);
	text-transform: uppercase;
	font-size: 18px;
	font-weight: 400;
	font-style: italic;
}
.bold{
	font-weight: 400;
}
.italic{
	font-style: italic;
}

.bio, .pics, .info{
	padding: 25px;
}

.gear,.contact{
	margin: 0 0 25px;
}

.contact p,.gear p{
	margin: 0px;
	padding: 0px;
}
ul.rental{
	margin: 5px 0px 15px;
	padding: 0px;
}

.rental li{
	font-family: korolev, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: lighter;
	margin: 0px 0px 0px 15px;
	padding: 0px;
	display: list-item;
	float: none;
}
/*///////////////footer///////////////*/
footer{
	padding: 50px 0px;
	display: flex;
	flex-direction: row;
	align-items: center;
}
.copyright{
	font-size:12px;
	font-weight:400;
	font-family: 'Palanquin Dark', sans-serif;
	padding: 10px;
}
.socials a{
	padding: 10px;
	font-size: 20px;
}
.socials{
	text-align: right;
	width: 50%;
}
.left{
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 50%;
	text-align: left;
}

/*Simple css to style it like a toggle switch*/
.theme-switch-wrapper {
  display: flex;
  align-items: center;
	padding: 0px 10px;
}
.theme-switch {
  display: inline-block;
  height: 20px;
  position: relative;
  width: 35px;
}

.theme-switch input {
  display:none;
}

.slider {
  background-color: var(--primary-color);
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: .4s;
}

.slider:before {
  background-color: var(--bg-color);
  bottom: 4px;
  content: "";
  height: 12px;
  left: 4px;
  position: absolute;
  transition: .4s;
  width: 12px;
}

input:checked + .slider {
  background-color: var(--font-color);
}

input:checked + .slider:before {
  transform: translateX(16px);
}

.slider.round {
  border-radius: 12px;
}

.slider.round:before {
  border-radius: 50%;
}

/*Media Queries*/
@media screen and (max-width: 1200px) {
	.about{
		justify-content: flex-start;
	}
	.pics, .bio, .info{
		width: 100%;
		margin: 0 0 25px 0;
		padding: 0px;
	}
	.bio{
		margin:0 0 10px;
	}
}

@media screen and (max-width: 600px) {
	body{
		margin: 0;
	}
	#navbar{
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 15px 0%;
	}

	#title{
		font-size:2em;
	}

	#title p{
		margin: 0px;
	}

	.nav{
		width:auto;
	}

	.nav ol{
		display:flex;
		flex-direction: row;
		align-content: center;
		align-items: center;
		text-align: center;
	}

	.nav li{
		margin: 0px;
		padding: 0px 15px;
		display: inline;
		font-size: 1em;
	}

	h1{
		margin: 0px;
	}

	h2, .worktitle{
		font-size:1.2em;
	}
	ol{
		margin: 0px;
		padding: 0px;
	}
	li{
		margin: 0px 0px 0px 5px;
		float: none;
	}
	.works{
		padding: 200px 0px 0px;
	}
	.work{
		padding: 10px 0px;
	}
	.stills img{
		margin: 1px;
		height:100%;
	}
	.about{
		padding: 175px 25px 0px;
	}
	.bio, .info{
		font-size: 1.1em;
	}
	footer{
		margin: 0px 5%;
		padding: 25px 0px 10px;
	}
	.copyright,.theme-switch,.socials i{
			font-size: 1.15em;
	}
}