/* ALGEMEEN */

* {
    margin: 0;
    padding: 0;
    border: 0;
}

#mobileHeader,
#respHeader {
	display: none;
}

#ieWarning {
	height: 40px;
	width: 100%;
	text-align: center;
	background-color: #fff200;
	line-height: 40px;
	font-size: 14px;
	font-weight: bold;
	color: #414042;
	position: fixed;
	bottom: 0;
	z-index: 9000000;
}

html {
	overflow-y: scroll;
	height: 100%;
}
body {
	font-family: Arial, sans-serif;
	font-size: 17px;
	font-weight: 400;
	letter-spacing: 0px;
	line-height: 30px;
	height: 100%;
	color: #444444;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
@media only screen and (min-width: 768px) and (max-width: 1365px)
{
	body {
		font-size: 14px;
		line-height: 24px;
	}
}

#content .alignright {
	float: right;
	margin-left: 1em;
	margin-bottom: 1em;
}
#content .alignleft {
	float: left;
	margin-right: 1em;
	margin-bottom: 1em;
}
.clear {
	clear: both;
}

a,
input {
	transition:         all .4s ease-in-out;
	-moz-transition:    all .4s ease-in-out; /* Firefox 4 */
	-webkit-transition: all .4s ease-in-out; /* Safari and Chrome */
	-o-transition:      all .4s ease-in-out; /* Opera */
	color: #7d726a;
	text-decoration: none;
}

ul, ol {
	list-style: none;
}

b, strong {
	font-weight: 600;
}

/* HEADER */

#header {
	width: 380px;
	height: 100%;
	position: fixed;
	overflow-x: hidden;
	overflow-y: auto;
	left: 0;
	top: 0;
	background-color: #03abdd;
	padding: 60px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	z-index: 999999999;
}

#header #logo {
	width: 260px;
	height: 270px;
	background-image: url('images/awards-logo.png');
	background-size: contain;
	background-repeat: no-repeat;
	margin-bottom: 30px;
}

#header #intro {
	color: #ffffff;
	font-weight: 700;
	margin-bottom: 30px;
}

#header #popweek {
	display: block;
	width: 100%px;
	height: 55px;
	background-image: url('images/popweek-logo-l.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

@media only screen and (min-width: 768px) and (max-width: 1199px)
{
	#header {
		width: 280px;
		padding: 45px;
	}

	#header #logo {
		width: 200px;
		height: 208px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 999px)
{
	#header #logo {
		width: 200px;
		height: 167px;
		background-position: center center;
	}
}

/* CONTENT */

#content {
	margin-left: 380px;
}

.award-poll {
	overflow: hidden;
	position: relative;
	padding: 60px;
}

@media only screen and (min-width: 768px) and (max-width: 1199px)
{
	#content {
		margin-left: 280px;
	}

	.award-poll {
		padding: 45px;
	}
}


.award-poll:nth-child(odd) {
	background-color: #efefef;
}

#content button.yop-poll-answers,
#content button.yop-poll-forms {
	overflow: hidden;
}

#content .yop-poll-question {
	margin-bottom: 30px;
}

#content h1 {
	font-family: 'Alegreya Sans', Arial, sans-serif;
	margin-bottom: 30px;
	color: #1a171b;
	padding-bottom: 10px;
	border-bottom: 2px solid #1a171b;
}

@media only screen and (min-width: 768px) and (max-width: 999px)
{
	#content h1 {
		margin-right: 20px;
	}
}
@media only screen and (width: 768px)
{
	#content h1 {
		font-size: 26px;
	}
}

.yop-poll-container-success {
	display: none;
}

/* BESTE CLIP */

.clip {
	position: relative;
	float: left;
	display: block;
	width: 22%;
	margin-left: 4%;
	margin-bottom: 30px;
	height: auto;
	overflow: hidden;
}
.awards2016 .clip {
	width: 16%;
	margin-left: 5%;
}

.clip img {
	display: block;
	width: 100%;
	height: auto;
}

.clip .play {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: #ffffff;
	opacity: 0;
	transition:         all .4s ease-in-out;
	-moz-transition:    all .4s ease-in-out;
	-webkit-transition: all .4s ease-in-out;
	-o-transition:      all .4s ease-in-out;
	background-image: url('images/play.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}
.clip:hover .play {
	opacity: 1;
	transition:         all 1s ease-in-out;
	-moz-transition:    all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;
	-o-transition:      all 1s ease-in-out;
}

.clip div.text {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(25,25,25,0.75);
	color: #ffffff;
	padding: 20px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.clip:hover div.text {
	background-color: transparent;
}

@media only screen and (min-width: 1200px) and (max-width: 1365px)
{
	.clip div.text {
		padding: 20px;
	}
}
@media only screen and (min-width: 1000px) and (max-width: 1199px)
{
	.clip div.text {
		padding: 15px;
	}
}
@media only screen and (min-width: 768px) and (max-width: 999px)
{
	.clip div.text {
		padding: 15px;
	}

	.awards2015 .clip.broederliefde,
	.awards2015 .clip.halfwaystation,
	.clip {
		width: 140px;
		height: 140px;
		margin-left: 0 !important;
		margin-right: 20px;
	}

	.award-poll {
		padding: 45px 25px 45px 45px;
	}
}
@media only screen and (width: 768px)
{
	.clip div.text {
		padding: 20px;
	}

	.clip {
		width: 181px;
		height: 181px;
	}
}

.clip div.artist {
	font-weight: 900;
	padding-bottom: 5px;
	margin-bottom: 5px;
	border-bottom: 1px solid #ffffff;
}
.clip:hover div.artist {
	border-bottom: 1px solid transparent;
}
.clip:hover div.artist,
.clip:hover div.song {
	color: transparent;
}

.clip div.text,
.clip div.song,
.clip div.artist {
	transition:         all 1s ease-in-out;
	-moz-transition:    all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;
	-o-transition:      all 1s ease-in-out;
}
.clip:hover div.text,
.clip:hover div.song,
.clip:hover div.artist {
	transition:         all .4s ease-in-out;
	-moz-transition:    all .4s ease-in-out;
	-webkit-transition: all .4s ease-in-out;
	-o-transition:      all .4s ease-in-out;
}

.awards2016 .clip.junglebae,
.awards2016 .clip.sevdaliza,
.awards2016 .clip.iet,
.awards2016 .clip.therefreshedorchestra,
.awards2016 .clip.latiyahartista,
.awards2016 .clip.accidentalsea,
.awards2015 .clip.feis,
.awards2015 .clip.oliverheldens,
.awards2015 .clip.guusbok,
.awards2015 .clip.jayfonseca,
.awards2015 .clip.sevdaliza,
.awards2014 .clip.dillenburg,
.awards2014 .clip.halfwaystation,
.awards2014 .clip.wesellguns,
.awards2014 .clip.broederliefde,
.awards2014 .clip.sevdaliza {
	margin-left: 0;
}

.awards2016 .clip .text {
	line-height: 25px;
}

.awards2015 .clip.broederliefde,
.awards2015 .clip.halfwaystation {
	margin-left: 4%;
}

@media only screen and (min-width: 1341px) and (max-width: 1420px)
{
	.awards2016 .clip .text {
		padding: 15px;
		line-height: 22px;
	}
}

@media only screen and (min-width: 1201px) and (max-width: 1340px)
{
	.awards2016 .clip .text {
		padding: 10px;
		line-height: 20px;
	}
}

@media only screen and (min-width: 1000px) and (max-width: 1120px)
{
	.awards2016 .clip .text {
		padding: 10px;
		line-height: 14px;
		font-size: 12px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 999px)
{
	.awards2016 .clip div.text {
		padding: 15px;
	}

	.awards2016 .clip {
		width: 140px;
		height: 140px;
		margin-left: 0;
		margin-right: 20px;
	}
}
@media only screen and (width: 768px)
{
	.awards2016 .clip div.text {
		padding: 20px;
	}

	.awards2016 .clip {
		width: 181px;
		height: 181px;
	}
}

/* OVERIGE GENOMINEERDEN */

.nominee {
	position: relative;
	float: left;
	display: block;
	width: 16%;
	margin-left: 5%;
	margin-bottom: 30px;
	height: auto;
	overflow: hidden;
}

.nominee img {
	display: block;
	width: 100%;
	height: auto;
}

.nominee div.text {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(25,25,25,0.75);
	color: #ffffff;
	padding: 20px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	font-weight: 700;
	transition:         all .4s ease-in-out;
	-moz-transition:    all .4s ease-in-out;
	-webkit-transition: all .4s ease-in-out;
	-o-transition:      all .4s ease-in-out;
}
.nominee:hover div.text {
	background-color: transparent;
	color: transparent;
}

@media only screen and (min-width: 1200px) and (max-width: 1365px)
{
	.nominee div.text {
		padding: 15px;
	}
}
@media only screen and (min-width: 1000px) and (max-width: 1199px)
{
	.nominee div.text {
		padding: 10px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 999px)
{
	.nominee div.text {
		padding: 15px;
	}

	.nominee {
		width: 140px;
		height: 140px;
		margin-left: 0;
		margin-right: 20px;
	}
}
@media only screen and (width: 768px)
{
	.nominee div.text {
		padding: 20px;
	}

	.nominee {
		width: 181px;
		height: 181px;
	}
}

.awards2015 .nominee.chips,
.awards2015 .nominee.timverhaal,
.awards2015 .nominee.rotown,
.awards2015 .nominee.afestivaldowntown,
.awards2015 .nominee.ratsonrafts,
.awards2016 .nominee.sevdaliza,
.awards2016 .nominee.oliverpesch,
.awards2016 .nominee.bird,
.awards2016 .nominee.blijdorpfestival,
.awards2016 .nominee.prspct,
.nominee.timverhaal,
.nominee.bird,
.nominee.eendrachtfestival,
.nominee.contra {
	margin-left: 0;
}

/* SELECT */

.yop-poll-footer,
.yop-poll-answers {
	position: relative;
	overflow: hidden;
	float: left;
}

.yop-poll-answers {
	width: 74%;
	margin-right: 4%;
}
.yop-poll-footer {
	width: 22%;
}

#content select {
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 100%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	text-indent: 0.01px;
	text-overflow: "";
	border-radius: 0;
	background-color: #ffffff;
	border: 2px solid #03abdd;
	color: #03abdd;
	background-image: url('images/dropdown.png');
	background-position: right center;
	background-repeat: no-repeat;
	background-size: 30px;
	padding: 15px;
	font-size: 100%;
	-webkit-appearance: none;
	font-family: Arial, sans-serif;
	margin: 0;
	float: left;
}
#content select:hover {
	cursor: pointer;
}
#content select:focus {
	-moz-box-shadow: none !important;
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
	outline-color: transparent;
	outline-style: none;
}

#content button.yop_poll_vote_button {
	background-color: transparent;
	border: 2px solid #03abdd;
	border-radius: 0;
	background-color: #03abdd;
	color: #ffffff;
	font-weight: 600;
	width: 100%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	padding: 15px;
	font-size: 100%;
	-webkit-appearance: none;
	font-family: Arial, sans-serif;
	margin: 0;
	float: left;
	transition:         all .4s ease-in-out;
	-moz-transition:    all .4s ease-in-out; /* Firefox 4 */
	-webkit-transition: all .4s ease-in-out; /* Safari and Chrome */
	-o-transition:      all .4s ease-in-out; /* Opera */
}
#content button.yop_poll_vote_button:hover {
	cursor: pointer;
	background-color: transparent;
	color: #03abdd;
}

@media only screen and (min-width: 1601px)
{
	.clips,
	.nominees,
	h1,
	.yop-poll-question {
		width: 1100px;
	}

	.yop-poll-answers {
		width: 814px;
		margin-right: 44px;
	}

	#content select {
		width: 100%;
	}

	.yop-poll-footer {
		width: 242px;
	}

	#content button.yop_poll_vote_button {
		width: 100%;
	}
}

@media only screen and (min-width: 768px) and (max-width: 999px)
{
	.yop-poll-container {
		margin-right: 20px;
		position: relative;
	}
}