/*
Blauw: 	#6cbedd
Roze:	#ED9AA3
Geel: 	#D1CAA4
Rood:	#ec6384

*/
html{
	margin:0;
	padding:0;
	background-color:#141414;
	background-repeat:no-repeat;
	background-size:cover;
	background-position: center center;
	-webkit-background-size:cover;
}

body{
	margin:0;
	padding:0;
	color:#000;
	

	text-rendering: optimizeLegibility;
	/*background:url(../../img/gridDot.png) repeat;*/
	overflow:hidden;
}

.wrapper{
	width:1600px;
	height:900px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+50&0.7+0,0+50 */
	background: -moz-linear-gradient(left,  rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 50%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 50%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */

}

strong.prog-date {
	font-size: 135%;
}
span.prog-date {
    font-size: 110%;
    white-space: nowrap;
}

.topTitle{
	box-sizing: border-box;
	width:100%;
	height:113px;
	padding-top:30px;
	text-align: center;
}

.container{
	margin:auto;
	width:1600px;
}

.textColumn{
	float:left;
	box-sizing: border-box;
	padding-left:50px;
	padding-right:50px;
	width:430px;
}

	.textColumn ul{
		padding:0;
		margin-bottom:60px;
	}
	.textColumn li{
		padding:0;
		
		margin-bottom:10px;
		list-style: none;
	}
	
	.textColumn li:before{
		font-family: 'fontello';
		content:'';
		margin-right:5px;
		float:left;
		color:#ffc638;
		margin-top:4px;
	}

		.textColumn h3{
				color:#FFC638;
		}

	span.linkBig{
		
	}

.leftColumn{
	float:left;
	width:426px;
	min-height:50px;
	height:100%;
	margin-right:10px;
}

.leftColumn div:nth-child(3) {
	margin-right:10px;
}

.centerColumn{
	float:left;
	width:433px;
	min-height:50px;
	margin-right:10px;
}

.rightColumn{
	float:left;
	width:250px;
	min-height:50px;
}

.tile{
	float:left;
	color:#fff;
	box-sizing: border-box;
	margin-bottom:10px;
	background-color:#0A0A0A;
	overflow: hidden;
}

	.tile h2{
		
		
	}

	.tile h4{
		
	}

	.tile.socialImages{
		height:324px;
		width:100%;
	}
	.tileWrapSocial{
		height:324px;
		width:100%;
		margin-bottom:10px;
	}
	
	.tile.twitter{
		width:426px;
		height:245px;
        right: -54px;
		padding:25px;
	}


    .fontello-twitter {
        
        float:left;
        color: #E32D39;
    }
	#swiper-container-twitter{
    float: left;
    width: 425px;
    height: 224px;
    margin-bottom: 10px;
    right: -25px;
    margin-right: 0px;
	}


		span.tweet{
			
			line-height:120%;
			color:#0A0A0A;
			width:100%;
			display:block;
			height:110px;
		}

		span.tweetSub{
			float:right;
			
		}
		span.tweetSub i{
			
		}

	.tile.nuIn{
		width:208px;
		height:170px;
		padding:20px;
	}
		.tile.nuIn h2{
			
		}


	.tileWrap{
		float:left;
		width:208px;
		height:170px;
	}

	.tile.logo{
		width:269px;
		height:164px;
		padding:30px;
	}
		.logoImage{
			float:left;
		}
		.logoImage img{
			width:80px;
		}

		.logoText{
			padding-left:15px;
			display:table-cell;
		}

			.logoText h2{
				
				color:#0A0A0A;
				margin-top:10px;
			}
			.logoText h3{
				color:#fff;
				
			}


	.tile.clock{
		width:154px;
		height:164px;
		text-align: center;
		padding:40px;
		padding-top:10px;
		
	}
		.tile.clock i{
			margin:0;
			
			color:#FFC638;
		}

	.tile.verwacht{
		width:100%;
		height:256px;
	}

	.verwachtPoster{
		float:left;
		height:256px;
		overflow: hidden;
	}

	.verwachtPoster img{
		opacity: 0;
		height:256px;
		transform: translate3d(100%, 0, 0);
		
		-webkit-transition: all 1s ease;
		-moz-transition: all 1s ease;
		-ms-transition: all 1s ease;
		-o-transition: all 1s ease;
		transition: all 1s ease;
	}

	.swiper-slide-active .verwachtPoster img{
		opacity: 0;
		animation-name:PosterAnimation;
		animation-duration: 1.4s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
		animation-delay:0.6s;
	}


	.verwachtText{
		display:table-cell;
		height:256px;
		padding-left:30px;
		padding-right:30px;
		vertical-align: middle;
	}
		.verwacht h2,.verwacht h4{
			opacity: 0;
			-webkit-transition: opacity 0.6s ease;
			-moz-transition: opacity 0.6s ease;
			-ms-transition: opacity 0.6s ease;
			-o-transition: opacity 0.6s ease;
			transition: opacity 0.6s ease;
		}
		.verwacht h3{
			opacity: 0;
			
			-webkit-transition: opacity 0.6s ease;
			-moz-transition: opacity 0.6s ease;
			-ms-transition: opacity 0.6s ease;
			-o-transition: opacity 0.6s ease;
			transition: opacity 0.6s ease;
		}

		.swiper-slide-active .verwachtText h2{
			opacity: 0;
			animation-name:fadeInRight;
			animation-duration: 1.4s;
			animation-timing-function: ease;
			animation-fill-mode: forwards;
		}
		.swiper-slide-active .verwachtText h3{
			opacity: 0;
			animation-name:fadeInRight;
			animation-duration: 1.4s;
			animation-timing-function: ease;
			animation-fill-mode: forwards;
			animation-delay:0.2s;
		}
		.swiper-slide-active .verwachtText h4{
			opacity: 0;
			animation-name:fadeInRight;
			animation-duration: 1.4s;
			animation-timing-function: ease;
			animation-fill-mode: forwards;
			animation-delay:0.4s;
		}


	.tile.special{
		width:100%;
		height:466px;
	}

		.specialSlide{
			background-position: top center;
			background-repeat:no-repeat;
			height:466px;
			position: relative;
			background-size: 100% auto;
			background-position:center 0px;
		}

		.swiper-slide-active .specialSlide{
			animation-name: backgroundAnimation;
			animation-duration: 1.2s;
			animation-timing-function: ease;
			animation-fill-mode: forwards;
		}

			.specialText{
				width:100%;
				bottom:0;
				padding:30px;
				padding-top:120px;
				padding-bottom:60px;
				box-sizing: border-box;
				position: absolute;
				/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0a0a0a+0,0a0a0a+50&0+0,1+50 */
				background: -moz-linear-gradient(top,  rgba(10,10,10,0) 0%, rgba(10,10,10,1) 50%); /* FF3.6-15 */
				background: -webkit-linear-gradient(top,  rgba(10,10,10,0) 0%,rgba(10,10,10,1) 50%); /* Chrome10-25,Safari5.1-6 */
				background: linear-gradient(to bottom,  rgba(10,10,10,0) 0%,rgba(10,10,10,1) 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000a0a0a', endColorstr='#0a0a0a',GradientType=0 ); /* IE6-9 */
			}

			.specialText h2,.specialText h3,.specialText h4{opacity:0;}

			.swiper-slide-active .specialText h2{
				animation-name: fadeInUp;
				animation-duration: 1.2s;
				animation-timing-function: ease;
				animation-fill-mode: forwards;
			}

			.swiper-slide-active .specialText h3{
				animation-name: fadeInUp;
				animation-duration: 1.2s;
				animation-timing-function: ease;
				animation-fill-mode: forwards;
				animation-delay:0.1s;
			}

			.swiper-slide-active .specialText h4{
				animation-name: fadeInUp;
				animation-duration: 1.2s;
				animation-timing-function: ease;
				animation-fill-mode: forwards;
				animation-delay:0.2s;
			}
				.specialText h3{
					
				}

	.tileWrapWeather{
		width:250px;
		float:left;
		height:219px;
	}

	.tile.weather{
		width:100%;
		height:219px;
		text-align: center;
		padding:40px;
		padding-top:30px;
		
		color:#0A0A0A;
	}

	.tile.weather.degrees{
		padding-top:60px;
		
	}

		.weather .demo-icon{
			margin-bottom:-20px;
		}

			span.degrees{
				display:block;
				margin-top:-10px;
				
			}
			span.degrees:after{
				content:'';
				font-family: 'fontello';
				margin-left:-25px;
				margin-right:-20px;

			}

.marginRight{
	margin-right:10px;
}

.colored{
	background-color:#FFC638;
}

h1,h2,h3,h4{
	font-weight: normal;
	margin:0;
}

h1,h2{
	
}

.clearer{
	clear: both;
}



.bottom-label{
	position: absolute;
	z-index:1000;
	bottom:0;
	left:0;
	width:100%;
	color:#fff;
	padding-top:40px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0a0a0a+0,0a0a0a+100&0+0,0.6+100 */
	background: -moz-linear-gradient(top,  rgba(10,10,10,0) 0%, rgba(10,10,10,0.6) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(10,10,10,0) 0%,rgba(10,10,10,0.6) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(10,10,10,0) 0%,rgba(10,10,10,0.6) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000a0a0a', endColorstr='#990a0a0a',GradientType=0 ); /* IE6-9 */
}

	.bottom-label .inner{
		padding-left:30px;
		padding-bottom: 20px;
	}


.facebook-label i.demo-icon:before{
	font-style: normal;
	font-family: 'fontello';
	content:'';
	margin-right:8px;
	color:#fff;

}
.instagram-label i.demo-icon:before{
	font-style: normal;
	font-family: 'fontello';
	content:'';
	margin-right:8px;
	color:#fff;
	
}

.tweetName{
	
	color:#0A0A0A;
	width:100%;
	display: block;
}

.tweetName:before{
	content:'-';
	margin-right:4px;
}
	


	.swiper-container-socialItems .swiper-slide{
		background-repeat:no-repeat;
		background-size: cover;
		background-position: center center;
		overflow: hidden;
		background-color:#0a0a0a;
	}

	.swiper-container-socialItems .swiper-slide img{
		width:100%;
	}
/******* swiper *******/

 .swiper-container {
        width: 100%;
        height: 100%;
    }

/******* FLIP TILE *******/

.flipcard {
  position: relative;
  perspective: 500px;
}
.flipcard.v.flip .front{
  transform: rotateX(180deg);
}
.flipcard.v.flip .back{
  transform: rotateX(0deg);
}
.flipcard.v .back{
  transform: rotateX(-180deg);
}
.flipcard.h.flip .front{
  transform: rotateY(180deg);
}
.flipcard.h.flip .back{
  transform: rotateY(0deg);
}
.flipcard.h .back{
  transform: rotateY(-180deg);
}
.flipcard .front, .flipcard .back{
  position:absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: all 0.8s ease-in;
  color: white;
  background-color: #000;
  backface-visibility: hidden;
}


@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 20%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(30%, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes PosterAnimation {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}


@keyframes backgroundAnimation {
  from {
  	/* opacity: 0; */
  	background-size:100% auto;
   /*  background-position:center -50px; */
  }

  to {
  	/* opacity: 1;*/ 
  	background-size:120% auto;
    /* background-position:center 0px; */
  }
}

.fadeInUp {
  
}


.swiper-container-movies .title {
	position: absolute;
	z-index: 999;
	background: white;
	padding: 10px;
	top: 0;
	right: 0;
	opacity: 0;
}
.swiper-container-movies .title.active {

	opacity: 1;
}