@import url('https://fonts.googleapis.com/css?family=Oswald');
@import url('https://fonts.googleapis.com/css?family=Tinos:400,700');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-size: 16px;
	background-color: rgba(247,234,218,.5);
}

header {
	padding: 1.5em;
	text-align: center;
    width: 50%;
    float: left;
}

header a {
    border-bottom: none;
}

nav {
    text-align: center;
    width: 50%;
    float: left;
 	padding: 2.5em;
}

nav a {
	font-family: 'Oswald', sans-serif;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 1em;
	border-bottom: none;
	padding-right: 2em;
	}

h1 {
	font-family: 'Tinos', serif;
	font-weight: 700;
	font-size: 2em;
	text-align: center;
}

a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgb(22,23,22);
	padding-bottom: .1em;
}

h2 {
	font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 1.25em;
	display: block;
	margin: 1em 0 0 0;
	padding: 1em;
}

#television, #commercials  h2 {
	color: #451500;
}

#features, #additional, #production h2 {
	color: white;
}

#intro {
	padding-bottom: 1em;
}

#praise {
	border-top: 1px solid black;
}

h4 {	
	font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 1em;
	border-bottom: none;
	display: block;
	margin: 1em 0;
	padding: 1em;
}

#intro p {
	font-family: 'Tinos', serif;
	font-weight: 400;
	font-size: 1.5em;
	color: rgb(22,23,22);
	width: 100%;
	max-width: 36em;
	line-height: 1.55em;
	margin: auto;
	padding: 1em;
	text-align: left;
}

.clear:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: "";
	height: 0;
	clear: both;
}

.film, .vimeo {
	float: left;
	width: 33.3333%;
}

.additional {
	float: left;
	width: 33.3333%;
}

.film img {
	display: block;
	width: 100%;
	padding: .25em;
	max-height: 800px;
	max-width: 540px;
}

.tvtall {
	width: auto;
	height: 100%;
	display: block;
	margin: auto;
}

.tvmed {
	width: 100%;
}

.tvshort {
	width: 90%;
	position: absolute;
	left:5%;
	top: 53%;
	-webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.tv {
	padding: 1em;
	height: 230px;
	width: 20%;
	float: left;
	/*height: 180px;*/
	position: relative;
}

.comm img {
	display: 100%;
}

.comm {
	float: left;
	padding: 2em;
	max-height: 175px;
	width: 33.3333%;
}

.production img {
	width: 100%;
}

.production {
	display: block;
	width: 33.3333%;
	padding: 1em;
	float: left;
	margin: 0 auto;
}

.additional img {
	display: block;
	width: 100%;
	padding: .25em;
	max-height: 800px;
	max-width: 540px;
}

.soundcloud, .vimeo {
	float: left;
	width: 33.3333%;
	height: 0;
	padding-bottom: 40%;
	overflow: hidden;
}

.soundcloud {
	float: left;
	width: 33.3333%;
	overflow: hidden;
}

.soundcloud iframe {
	display: block;
	padding: .75em;
}

.vimeo iframe {
	display: block;
	width: 100%;
	padding: 1em;
	max-height: 450px;
	width: 100%;
}

#features, #commercials, #production {
	background-color: rgba(22,23,22,.9);
	margin: auto;
	padding: 1.5em;
	clear: both;
}

#additional {
	background-color: rgba(22,23,22,.9);
	margin: auto;
	padding: 1.5em;
    clear: both;	
}

/*.bigger img {
	display: block;
	width: 25%;
	padding: 1em;
	float: left;
	margin: 0 auto;
}*/

.introtext {
	font-family: 'Oswald', sans-serif;
	font-size: .9em;
	text-transform: uppercase;
	letter-spacing: 2px;
	/*padding-right: .375em;*/
}

.icon img, .other-icon img {
	width: 100%;
}

.icon  {
	width: 6em;
	padding: .5em;
	float: left;
}

.other-icon {
	width: 6em;
	padding: .5em;
	float: right;
}

#icons {
	width: 45%;
	float: left;
}

#bottomnav {
	width: 45%;
	float: right;
}

#commercials img {
	width: 100%;
}

#television, #commercials {
	background-color: white;
	padding: 1.5em;
}

p {
	font-family: 'tinos', serif;
	font-weight: 400;
	font-size: 1em;
	color: rgb(22,23,22);
	width: 100%;
	max-width: 36em;
	line-height: 1.5em;
	padding: 1em;
}

h2 + p {
	padding-top: 0;
}

#lander img {
	width: 100%;
}

#praise {
	/*background-color: rgba(22,23,22,.9);*/
	margin: auto;
	padding: 1.5em;
	padding-bottom: 2em;
}

#praise p {
	text-align: center;
	margin: auto;
	font-size: 1.2em;
}

#praise img {
	margin: auto;
	width: 250px;
}

#praise h1 {
	font-family: 'Tinos', serif;
	/*font-weight: 700;*/
	margin: auto;
	text-align: center;
}

.praise  {
	font-family: 'Tinos', serif;
	/*font-weight: 700;*/
}

.logo {
	margin: auto;
	max-width: 250px;
	/*padding-bottom: 2em;*/
}


#slogan {
	font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
	letter-spacing: 4px;
	font-size: .95em;
	margin-bottom: 1em;
	margin: auto;
}

#slogan p {
	text-align: center;
}

#contact {
	text-align: center;
	padding: 1em;
}

.icon a, .other-icon a {
	border-bottom: none;
}

.title {
	font-style: italic;
}

#wrapper {
	margin: auto;
	max-width: 1300px;
}

#toggle {
	display: none;
}

label {
	font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 1em;
	display: none;
}

a:hover {
	color: rgba(22,23,22,.7);
}

a:active {
	color: inherit;
}

footer a {
	text-decoration: none;
}

.comm a {
	border-bottom: none;
}

@media screen and (max-width:1378px){
	.tv {
		width: 25%;
	}
}

/*@media screen and (max-width:1308px){
	.tv {
		width: 25%;
		height: 163px;
	}
}*/

@media screen and (max-width:1150px){
	.soundcloud{
		width:50%;
		height: 50%;
		padding-bottom: 1em;
	}
	.vimeo{
		width: 50%;
		height: 100%;
		padding-bottom: 1em;
	}	
}

@media screen and (max-width:1064px){
	.comm {
		width: 50%;
		padding: 3em;
	}
	.tv {
		/*height: 164px;*/
	}
}

@media screen and (max-width:900px){
	.tv {
		height: 220px;
		padding: 2em;
		width: 33.3333%;
	}
}


@media screen and (max-width:768px){
	body {
		font-size: 16px;
	}
	.soundcloud {
		width:100%;
		padding: 0;
	}
	.vimeo {
		width: 100%;
		padding: 0;
	}
	header {
		width: 100%;
		float: none;
		text-align: center;
		padding: 1em 1em 0 1em;
	}
	nav {
		display: none;
	}
	label {
		display: block;
		text-align: center;
		padding: 1em;
		font-size: 1.25em;
	}
	#toggle:checked + nav{
		width: 100%;
		display: inline;
		font-size: .95em;	
		text-align: center;
		padding: .5em 0 .75em 0;
	}
	.navlinks {
		padding: 0 1.25em 0 1.25em;
		margin-top: 0;
	}
	.film {
		width: 50%;
	}
	.additional {
		width: 50%;
	}
}

@media screen and (max-width:700px){
	.production {
		width: 100%;
		float: none;
		margin: auto;
	}
	#intro {
		padding: 1em;
	}
	.tv{
		width: 50%;
		padding: 3em;
	}
	.comm {
		padding: 2em;
	}
}

@media screen and (max-width:639px){
	.icon, .other-icon {
		width: 5em;
	}

	.tv{
		padding:1em 3em;
		height:200px;
	}

	.tvtall{
		width:90%;
		height:auto;
	}
}


@media screen and (max-width:595px){
	/*p, #intro p {
		font-size: 1em;
	}*/	
	.tv{
		padding: 1em 2em;
		height:190px;
	}

	.tvtall{
		width:75%;
	}

	.comm {
		padding: 1em;
	}
}

@media screen and (max-width:533px){
	.icon, .other-icon  {
		width: 33.3333%;
	}

@media screen and (max-width:500px){
	p {
		font-size: 1em;
		text-align: center;
	}
	#intro p {
		text-align: left;
		font-size: 1.1em;
	}
	#praise p {
		font-size: 1.1em;
	}


	h2 {
		text-align: center;
	}

	#slogan {
		font-size: .75em;
		letter-spacing: 3px;
		}	

	.tv {
		padding: 0;
	}	
}