*,
*:before,
*:after {
	box-sizing: border-box;
}

*:focus {
	outline: none;
}

body,
html {
	margin: 0;
	padding: 0;
	height: 100%;
	color: #fff;
	font-family: 'Oswald', sans-serif;
}

h1 {
	text-transform: uppercase;
	/* font-family: 'Yantramanav', sans-serif; */
	font-family: "Oswald", sans-serif;
	letter-spacing: 18px;
	font-weight: 400;
}

img {
	width: 100%;
	height: auto;
}

iframe {
	width: 100%;
	height: 400px;
	margin-bottom: 10px;
}

.sidenav {
	display: block;
	height: 100%;
	width: 100px;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	background: #528452;
	box-shadow: 4px 0px 18px 0px rgba(0, 0, 0, 0.2);
	overflow-x: auto;
	padding-top: 20px;
}

.sidenav a {
	/* padding: 6px 8px 6px 16px; */
	font-family: "Oswald", sans-serif;
	text-decoration: none;
	color: #fff;
	display: block;
	font-size: 0.75em;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 6px;
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: auto;
	z-index:2;
}

.sidenav a:nth-child(1) {
	-webkit-transform: rotate(90deg) translate(2rem, 0rem);
	        transform: rotate(90deg) translate(2rem, 0rem);
}

.sidenav a:nth-child(2) {
	-webkit-transform: rotate(90deg) translate(7rem, 0rem);
	        transform: rotate(90deg) translate(7rem, 0rem);
}

.sidenav a:nth-child(3) {
	-webkit-transform: rotate(90deg) translate(13.2rem, 0rem);
	        transform: rotate(90deg) translate(13.2rem, 0rem);
}

.sidenav a:nth-child(4) {
	-webkit-transform: rotate(90deg) translate(19.2rem, 0rem);
	        transform: rotate(90deg) translate(19.2rem, 0rem);
} 

.sidenav a:hover {
	color: #f1f1f1;
}

main {
	margin-left: 100px;
	padding: 0px 0px;
	height: 100%;
}

.hero {
	background: linear-gradient(
			to right,
		rgba(82,132,82,0.5830532896752452),
		rgba(255,136,0,0.3)
		),
		url(./third-and-main-bg3.jpg)no-repeat
			center;
	background-size: cover;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2em;
}

#trailers, #gallery {
	background: #222;
	font-weight: 300;
	letter-spacing: 2px;
}

#trailers h2, #gallery h2 {
	font-weight: 300;
}

#trailers p{
	color: #868686;
	font-weight: 300;
	line-height: 1.5em;
}

#synopsis p {
	line-height: 1.8em; 
	letter-spacing: 1px;
}

#synopsis h4 {
	font-weight: 300;
	text-decoration: underline;
}

#synopsis strong {
	color: #eee;
}

.headline {
	border-bottom: 1px solid #303030;
}

footer {
	background: #222;
	font-weight: 300;
	font-size:.75em;
	letter-spacing: 1px;
}

footer i {
	padding: 0 10px;
}


/* 
==================================================
Image Grid Layout
================================================== 
*/

.img-row {
	display: flex;
	flex-wrap: wrap;
	padding: 0 15px;
	margin: 0 auto;
}

/* Three column layout */
.img-column {
	flex: 33%;
	max-width: 33%;
	padding: 0 4px;
	margin: 0 auto;
}

.img-column img {
	margin-top: 8px;
	vertical-align: middle;
}



/* 
==================================================
Grid Layout
================================================== 
*/

.row {
	display: flex;
	margin: 0 0 0px 0;
}

.col {
	padding: 20px;
}

.row .col {
	flex: 1;
}

.row-halves,
.row-thirds,
.row-fourths {
	display: flex;
	justify-content: space-between;
}

.row-halves .col {
	width: 49%;
}

.row-thirds .col {
	width: 32%;
}

.row-fourths .col {
	width: 24%;
}

/* 
==================================================
Media Queries Grids + Image grid
================================================== 
*/

/* Grid layout */

@media (max-width: 768px) {
	.row,
	.row-halves,
	.row-thirds,
	.row-fourths {
		display: block;
	}

	.row .col,
	.row-halves .col,
	.row-thirds .col,
	.row-fourths .col {
		width: 100%;
		margin: 0 0 0px 0;
	}
}

/* One column layout */

@media (max-width: 800px) {
	.img-column {
		flex: 100%;
		max-width: 100%;
	}
}

/*
===================================
Media Queries Main
===================================
*/

@media (max-width: 701px) {
	.hero h1 {
		font-size: 1.5em;
	}
}

@media (max-width: 615px) {
	.hero h1 {
		font-size: 1em;
		line-height: 1.4em;
	}
	
	.sidenav {
		width: 50px;
		overflowX: auto;
	}

	main {
		margin-left: 50px;
	}

	iframe {
		width: 100%;
		height: 200px;
	}

	.sidenav a:nth-child(1) {
		-webkit-transform: rotate(90deg) translate(2rem, 0rem);
		        transform: rotate(90deg) translate(2rem, 0rem);
	}

	.sidenav a:nth-child(2) {
		-webkit-transform: rotate(90deg) translate(6rem, 0rem);
		        transform: rotate(90deg) translate(6rem, 0rem);
	}

	.sidenav a:nth-child(3) {
		-webkit-transform: rotate(90deg) translate(12.8rem, 0rem);
		        transform: rotate(90deg) translate(12.8rem, 0rem);
	}

	.sidenav a:nth-child(4) {
		-webkit-transform: rotate(90deg) translate(19.4rem, 0rem);
		        transform: rotate(90deg) translate(19.4rem, 0rem);
	}
}

@media (max-width: 470px) {
	.hero {
		height: 600px;
	}
}