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

html,
body {
	padding: 0;
	margin: 0;
	height: 100%;
	font-family: 'Helvetica', 'Arial', sans-serif;
	color:#fff;
	line-height:30px;
	font-size:20px;

}
body{
		border-bottom: 3px solid #fff;
	border-left: 3px solid #fff;
}
h1{
	font-family: 'Tahoma', sans-serif;
	font-size:40px;
	line-height:1;
   font-weight: normal;
}
h2{
	font-family: 'Tahoma', sans-serif;
	font-size:30px;
	line-height:1;
   font-weight: normal;
}
body {
	background-color: #fff;
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: box;
	display: flex;
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	-o-box-flex: 1;
	box-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
	-webkit-box-orient: horizontal;
	-moz-box-orient: horizontal;
	-o-box-orient: horizontal;
	-webkit-box-lines: multiple;
	-moz-box-lines: multiple;
	-o-box-lines: multiple;
	-webkit-flex-flow: row wrap;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
   
    justify-content: space-between;
    padding: 1%;
	
}



/************************ Player */

#XXXplayer__wrapper.formaat_16_9 #player__video{
   padding-bottom: 39.375%;
   flex: 0 1 70%;
   
}
#XXXplayer__wrapper.formaat_4_3 #player__video{
   padding-bottom: 43.9%;/*45%;?????*/
   flex: 0 1 60%;
}

#player__wrapper{
	display:none;
	position:fixed;
   z-index: 3;
}
#player__wrapper.active{
	display:block;
   left:0;
   top:0;
}
#player__wrapper.active:after{
	content:'';
	position:fixed;
	background-color:rgba(0,0,0,.95);
	left:0;
	top:0;
	right:0;
	bottom:0;
	z-index:10;
}

#player__video__wrapper{
   z-index: 20;
   position: fixed;
   top: 0;
   left: 0;
   /* transform: translateX(-50%) translateY(-50%); */
   width: 100%;
   max-width: 100%;
   height: 100%;
   display: -webkit-box;
   display: -moz-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: box;
   display: flex;
   flex-flow: row nowrap;
   justify-content: space-between;
   align-content: center;
   align-items: center;
}

#player__video{
    position: relative;
	/* width: 70%; 
    float: left; */
    position: relative;
    display: block;
    margin: 0 auto;
    display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: box;
	display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-content: center;
    /* align-items: center; */
    /* height: 100%; */
/*   position: relative;
    padding-bottom: 70%;
   height:auto;*/
}

#player__video__list .playlist{
	display:none;
}
#player__video__list .playlist.active{
	display:block;
}
#player__video__list{
	    /* float: right; */
    width: 300px;
    overflow-y: auto;
    background-color: #333;
    justify-self: flex-end;
    display: block;
    position: relative;
    flex: 0 1 300px;
    max-height: 100%;
   border-top-left-radius: 20px;
   border-bottom-left-radius: 20px;
}
#player__video__list a{
	display:block;
	text-decoration:none;
	padding:10px 5px;
	border-bottom:1px solid rgba(255,255,255,.5);
		
	-webkit-transition: all .25s;
    transition: all .25s;
	cursor:pointer;
   
    display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: box;
	display: flex;
    flex-flow: row nowrap;
    align-items: center;
}
#player__video__list a.active{
	/*background-color:rgba(255,255,255,0.3);*/
   background-color:rgba(0,0,0,0.5);
}

#player__video__list a:hover{
	background-color:rgba(255,255,255,0.2);
	
}

#player__video__list a:before{
   content:'';
   background: url(../images/play_circle.svg) no-repeat center center;
   width:40px;height:40px;     
   margin: 0 10px 0 0;
   float:left;
   opacity: .4;
   filter: alpha(opacity=40);
}
#player__video__list a.active:before,
#player__video__list a:hover:before{
   opacity: 1;
   filter: alpha(opacity=100);
}
/*
#player__video__list a:first-child{border-top-left-radius: 20px;}
#player__video__list a:last-child{border-bottom-left-radius: 20px;}
*/
#player__video__list a:last-child{border-bottom:none;}

#player__video__list a img{
	max-width:50px;
	float:left;
	margin-right:10px;
}
#player__video__list a span{
	
	font-size:16px;
}
#player__video__list a p{
	font-size:12px;
	line-height:14px;
    margin: 0;
    padding: 0;	
}


#player__close {
	display:block;
	position: fixed;
	right: 32px;
	top: 32px;
	width: 66px;
	height: 66px;
	opacity: 0.6;
	z-index:25;
}
#player__close:hover {
	opacity: 1;
}
#player__close:before, #player__close:after {
	position: absolute;
	right: 32px;;
	content: ' ';
	height: 66px;
	width: 2px;
	background-color: #fff;
}
#player__close:before {
	transform: rotate(45deg);
}
#player__close:after {
	transform: rotate(-45deg);
}









/************************ Grid */

.flex__item {
	text-decoration:none;
	cursor:pointer;
	position:relative;
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: box;
	display: flex;
	-webkit-box-flex: 1;
	-moz-box-flex: 1; 
	-o-box-flex: 1;
	box-flex: 1;
	-webkit-flex: 0 0 50%;
	-ms-flex: 0 0 50%;
	flex: 0 0 50%;
	height: auto;
	background-color: #777;
	border-style: solid;
   border-color: #fff;
   padding:20px;
	align-items:center;
	
	-webkit-transition: all .5s;
    transition: all .5s;
   
   background-repeat:no-repeat;
   background-size:cover;
   background-position: center center;
   overflow: hidden;
   margin: 0;
}
.flex__item:before {
   position: absolute;
   top:0;left:0;width:100%;height:100%;
   order:1;
   content:'';
   /*background-color:rgba(0, 0, 0, 0.33);*/
   
   -webkit-filter: blur(5px);
   -moz-filter: blur(5px);
   -o-filter: blur(5px);
   -ms-filter: blur(5px);
   filter: blur(5px);
   background-repeat: no-repeat;
    background-size: cover;
   z-index: 1;
}
.flex__item div{order:2;position: relative;z-index: 2;}
.flex__item:hover:before{
   -webkit-filter: blur(0);
   -moz-filter: blur(0);
   -o-filter: blur(0);
   -ms-filter: blur(0);
   filter: blur(0);

}
.flex__item:hover div{opacity:0;filter: alpha(opacity=0);}

/******************************************************************************1ste video ANTILLIANEN*/
#player__video__list .playlist_a{
   background-image: -moz-linear-gradient(90deg, rgba(83, 104, 144, 0.6), rgba(199, 205, 234, 0.6)));
   background-image: -webkit-linear-gradient(90deg, rgba(83, 104, 144, 0.6), rgba(199, 205, 234, 0.6));
   background-image:  linear-gradient(0deg, rgba(83, 104, 144, 0.6), rgba(199, 205, 234, 0.6));
}
.flex__item.fl_1:before{      
   background-size: 100%;
   background-image: -moz-linear-gradient(90deg, rgba(83, 104, 144, 0.6), rgba(199, 205, 234, 0.6)), url(../images/a.jpg);
   background-image: -webkit-linear-gradient(90deg, rgba(83, 104, 144, 0.6), rgba(199, 205, 234, 0.6)), url(../images/a.jpg);
   background-image:  linear-gradient(0deg, rgba(83, 104, 144, 0.6), rgba(199, 205, 234, 0.6)), url(../images/a.jpg);
}
.flex__item.fl_1:hover:before{background-image: url(../images/a.jpg);}
/*
.flex__item.fl_1:hover:before{
	position:absolute;left:0;
	width:100%;
	height:100%;
	content:'';
	background-color:rgba(237,74,129,0.70);
}
.flex__item.fl_1 {
	background-color: #E91E63;
}*/
.flex__item.fl_1{border-top-left-radius: 50px; border-right-width:10px;border-bottom-width:10px;}

.flex__item.fl_1 div:nth-child(2)::-webkit-scrollbar-track{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
	background-color: #BE124C;
}
.flex__item.fl_1 div:nth-child(2)::-webkit-scrollbar{
	width: 12px;
	background-color: #E91E63;
}
.flex__item.fl_1 div:nth-child(2)::-webkit-scrollbar-thumb{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.2);
	background-color: #E91E63;
}
.flex__item.fl_1 div:first-child{order:2;}
.flex__item.fl_1 div:last-child{order:1;text-align: right;padding-right:20px;}

/******************************************************************************2de video CHINEZEN*/
#player__video__list .playlist_c{
   background-image: -moz-linear-gradient(90deg, rgba(228, 59, 129, 0.6), rgba(234, 125, 156, 0.6));
   background-image: -webkit-linear-gradient(90deg, rgba(228, 59, 129, 0.6), rgba(234, 125, 156, 0.6));
   background-image: linear-gradient(0deg, rgba(228, 59, 129, 0.6), rgba(234, 125, 156, 0.6));
}
.flex__item.fl_2:before{      
   background-size: 100%;
   background-image: -moz-linear-gradient(90deg, rgba(228, 59, 129, 0.6), rgba(234, 125, 156, 0.6)), url(../images/c.jpg);
   background-image: -webkit-linear-gradient(90deg, rgba(228, 59, 129, 0.6), rgba(234, 125, 156, 0.6)), url(../images/c.jpg);
   background-image: linear-gradient(0deg, rgba(228, 59, 129, 0.6), rgba(234, 125, 156, 0.6)), url(../images/c.jpg);
}
.flex__item.fl_2:hover:before{background-image: url(../images/c.jpg);}
/*
.flex__item.fl_2:hover:before{
	position:absolute;left:0;
	width:100%;
	height:100%;
	content:'';
	background-color:rgba(140,102,206,0.70);
}
.flex__item.fl_2 {
	background-color: #673AB7;
}*/
.flex__item.fl_2{border-top-right-radius: 50px;border-left-width:10px;border-bottom-width:10px;}

.flex__item.fl_2 div:nth-child(2)::-webkit-scrollbar-track{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
	background-color: #512D90;
}
.flex__item.fl_2 div:nth-child(2)::-webkit-scrollbar{
	width: 12px;
	background-color: #673AB7;
}
.flex__item.fl_2 div:nth-child(2)::-webkit-scrollbar-thumb{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.2);
	background-color: #673AB7;
}
.flex__item.fl_2 div:first-child{order:1;}
.flex__item.fl_2 div:last-child{order:2;}

/******************************************************************************3de video MAROKKANEN*/
#player__video__list .playlist_m{
   background-image: -moz-linear-gradient(90deg, rgba(34, 194, 230, 0.6), rgba(85, 224, 230, 0.6));
   background-image: -webkit-linear-gradient(90deg, rgba(34, 194, 230, 0.6), rgba(85, 224, 230, 0.6));
   background-image: linear-gradient(0deg, rgba(34, 194, 230, 0.6), rgba(85, 224, 230, 0.6));
}
.flex__item.fl_3:before{      
   background-size: 100%;
   background-image: -moz-linear-gradient(90deg, rgba(34, 194, 230, 0.6), rgba(85, 224, 230, 0.6)), url(../images/m.jpg);
   background-image: -webkit-linear-gradient(90deg, rgba(34, 194, 230, 0.6), rgba(85, 224, 230, 0.6)), url(../images/m.jpg);
   background-image: linear-gradient(0deg, rgba(34, 194, 230, 0.6), rgba(85, 224, 230, 0.6)), url(../images/m.jpg);
}
.flex__item.fl_3:hover:before{background-image: url(../images/m.jpg);}
/*
.flex__item.fl_3:hover:before{
	position:absolute;left:0;
	width:100%;
	height:100%;
	content:'';
	background-color:rgba(98,204,253,0.70);
}
.flex__item.fl_3 {
	background-color: #03A9F4;
}*/
.flex__item.fl_3{border-bottom-left-radius: 50px;border-right-width:10px;border-top-width:10px;}
.flex__item.fl_3 div:nth-child(2)::-webkit-scrollbar-track{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
	background-color: #0283BE;
}
.flex__item.fl_3 div:nth-child(2)::-webkit-scrollbar{
	width: 12px;
	background-color: #03A9F4;
}
.flex__item.fl_3 div:nth-child(2)::-webkit-scrollbar-thumb{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.2);
	background-color: #03A9F4;
}
.flex__item.fl_3 div:first-child{order:2;}
.flex__item.fl_3 div:last-child{order:1;text-align: right;padding-right:20px;}
/******************************************************************************4de video TURKEN*/
#player__video__list .playlist_t{
   background-image: -moz-linear-gradient(90deg, rgba(224, 65, 40, 0.6), rgba(232, 34, 34, 0.6));
   background-image: -webkit-linear-gradient(90deg, rgba(224, 65, 40, 0.6), rgba(232, 34, 34, 0.6));
   background-image: linear-gradient(0deg, rgba(224, 65, 40, 0.6), rgba(232, 34, 34, 0.6));  
}
.flex__item.fl_4:before{      
   background-size: 100%;
   background-image: -moz-linear-gradient(90deg, rgba(224, 65, 40, 0.6), rgba(232, 34, 34, 0.6)), url(../images/t.jpg);
   background-image: -webkit-linear-gradient(90deg, rgba(224, 65, 40, 0.6), rgba(232, 34, 34, 0.6)), url(../images/t.jpg);
   background-image: linear-gradient(0deg, rgba(224, 65, 40, 0.6), rgba(232, 34, 34, 0.6)), url(../images/t.jpg);
}
.flex__item.fl_4:hover:before{background-image: url(../images/t.jpg);}
/*
.flex__item.fl_4:hover:before{
	position:absolute;left:0;
	width:100%;
	height:100%;
	content:'';
	background-color:rgba(255,182,75,0.70);
}
.flex__item.fl_4 {
	background-color: #FF9800;
}*/
.flex__item.fl_4{border-bottom-right-radius: 50px;border-left-width:10px;border-top-width:10px;}
.flex__item.fl_4 div:nth-child(2)::-webkit-scrollbar-track{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
	background-color: #C67600;
}
.flex__item.fl_4 div:nth-child(2)::-webkit-scrollbar{
	width: 12px;
	background-color: #FF9800;
}
.flex__item.fl_4 div:nth-child(2)::-webkit-scrollbar-thumb{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.2);
	background-color: #FF9800;
}
.flex__item.fl_4 div:first-child{order:1;}
.flex__item.fl_4 div:last-child{order:2;}
/******************************************************************************/

.flex__item div{
	width:100%;
}
.flex__item div:nth-child(2){
	color:#fff;
	margin-left:2%;
	overflow:auto;
}
.flex__item div,
.flex__item:before,
.flex__item:after{
   -webkit-transition: all .5s;
    transition: all .5s;
	opacity: 1;
   filter: alpha(opacity=100);
}

.flex__item:hover:after{
	position:absolute;
	top:50%;
	left:50%;
	
	z-index:4;
	content:'';
	opacity: .7;
   filter: alpha(opacity=70);
   width:20%;
   padding-bottom:20%;
   margin: -10%;
   background: url('../images/play_circle.svg') no-repeat center center;
   
   
   -webkit-animation-name: bounceIn;
          animation-name: bounceIn;
  -webkit-animation-duration: 450ms;
          animation-duration: 450ms;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
   /*
   transform: translateX(-50%) translateY(-50%); 
   width: 0;
	height: 0;
	border-top: 8vw solid transparent;
	border-left: 16vw solid rgba(255,255,255,.7);
	border-bottom: 8vw solid transparent;
   */
}

.flex__item.no__after{pointer-events:none;}
.flex__item.no__after:after{content:none;}

.flex__item img{
	width:100%;
    max-width: 50vh;
    height: auto;	
	box-shadow: 10px 10px 10px rgba(0,0,0,.1); 
    -webkit-transition: all .5s;
    transition: all .5s;	
}


iframe.youtube_iframe{
   /*width:100%;
   height:100%;
   position:absolute;*/
}

@media screen and (max-width: 1000px) {
	
	#player__wrapper{
		position: absolute;
		width: 100%;
		height: 100%;
	}
	#player__video__wrapper{
		position:absolute;
		transform:none;
		left:0;
		top:0;
	}
	#player__video{
		width:100%;
		float:none;
	}
	#player__video__list {
    	float: none;
    	width: 100%;
		height:auto!important;
		overflow-y: hidden;
	}
}
@media screen and (max-width: 800px) {
	.flex__item{
		padding:5%;
		flex:none;
		display:block;
		width:100%;
		height:auto;
      border-radius:0 !important;
	}
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {/*IE Specifiek*/
  .flex__item {
      -webkit-flex: 1 0 40%;
      -ms-flex: 1 0 40%;
      flex: 1 0 40%;
   }   
}
/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {

   #player__wrapper.active{
      max-height: 1024px;
      max-width: 768px;
      background-color: yellow;
   }
}
/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {
   
   #player__wrapper.active{
      max-height: 768px;
      max-width: 1024px;
      background-color: green;
   }

}
@-webkit-keyframes bounceIn{
  0%{
    opacity: 0;
     filter: alpha(opacity=0);
    -webkit-transform: scale(0.3) translate3d(0,0,0);
            transform: scale(0.3) translate3d(0,0,0);
  }
  50%{
    opacity: 0.9;
     filter: alpha(opacity=90);
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  80%{
     filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform: scale(0.89);
            transform: scale(0.89);
  }
  100%{
     filter: alpha(opacity=70);
    opacity: .7;
    -webkit-transform: scale(1) translate3d(0,0,0);
            transform: scale(1) translate3d(0,0,0);
  }
}

@keyframes bounceIn{
  0%{
     filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: scale(0.3) translate3d(0,0,0);
            transform: scale(0.3) translate3d(0,0,0);
  }
  50%{
     filter: alpha(opacity=90);
    opacity: 0.9;
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  80%{
     filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform: scale(0.89);
            transform: scale(0.89);
  }
  100%{
     filter: alpha(opacity=70);
    opacity: .7;
    -webkit-transform: scale(1) translate3d(0,0,0);
            transform: scale(1) translate3d(0,0,0);
  }
}