/* mika videoplayer -------------------------- */

    .videoplayer{
        //width:66vw;
		height:100%;
        width:100%;
	
    }

    .videoplayer .video{
        position: relative;
        z-index: 100;
		//height:calc(50vh - 64px);
		height:100%;
        aspect-ratio:1.78;
        //background:rgba(0,0,0,1);
        transition: margin 0.3s;
    }
    .videoplayer.play .video{
        margin-bottom:40px;
    }
    .videoplayer iframe{
        display: block;
        width:100%;
        height:100%;
        pointer-events: none;

    }
	.videoplayer .videoframe{
		position: absolute;
		width:100%;
		height:100%;
		top:0px;
		left:0px;
		z-index: 0;
	}
	.videoplayer .stillframe{
		position: absolute;
		width:100%;
		height:100%;
		top:0px;
		left:0px;
		background-position: center;
		background-size:cover;
		background-repeat: no-repeat;
		//background-color:red;
		z-index: 10;
		opacity:0;
		transition: all 0.4s;
		
	}
	.videoplayer .stillframe.on{
		opacity:1;
		
	}
	.videoplayer .playframe{
		position: absolute;
		width:100%;
		height:100%;
		top:0px;
		left:0px;
		z-index: 20;
        pointer-events: none;
	}
    .videoplayer .playbut{
        position: absolute;
        width:60px;
        height:60px;
        border-radius:100%;
        top:50%;
        left:50%;
        margin-top:-30px; 
        margin-left:-30px; 			
        //transition:all 0.3s;
        background:url(../img/icon_play2.svg) no-repeat center;
        background-size:cover;
        cursor:pointer;		
        z-index: 200;
        box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
		opacity: 0;

    }
	
    .topic .video.is-selected .playbut{
        opacity: 1;
        pointer-events: auto;
    }
	.topic.text .video.is-selected .playbut{
        opacity: 0;
        pointer-events: none;
    }
    .videoplayer.loading .playbut.center{
        //background-image:url(../img/icon_close.svg);
		animation: spin-v 1s ease-in infinite;
    }
    .videoplayer.play .playbut.center{
        opacity: 0;
        pointer-events: none;
    }

    .videoplayer .playbut:hover{
        opacity: 1;
    }
    .videoplayer.play .playbar .playbut{
        background-image:url(../img/icon_pause.svg);
    }
	.videoplayer.paused .playbar .playbut{
        background-image:url(../img/icon_play2.svg);
    }

    .videoplayer .playbar{
		position: relative;
        left:0px;
        bottom:0px;
        height:40px;
        width:100%;
        display: flex;
        margin-top:-40px;
        opacity: 0;
        transition: opacity 0.3s;
		z-index: 100;
    }
	.videoplayer.fullscr .playbar{
		margin-top:-80px;
		padding:0px 10px;
	}
	
    .videoplayer.play .playbar{
        //bottom:-40px;
        opacity: 1;
    }

    .playbar .but{
        position: relative;
        width: 40px;
        height: 30px;
        left: 0px;
        top: 0px;
        margin: 5px 0px;
        opacity: 1;
        border: 1px solid black;
        border-radius:2px; 
        z-index: 50;
        box-shadow: none;
		background-position: center;
		cursor:pointer;
    }
	.playbar .but.playbut{
		margin-right:10px;
	}
	.playbar .but.fullscreen{
		margin-left:10px;
		background-image:url(../img/icon_fullscreen.svg)
	}
    .playbar .slider{
        flex:1 0;
        padding:0px 10px;
    }

    .playbar .slider .bar{
        position: relative;
        top:50%;
        margin-top:-1px;
        height:2px;
        background: rgba(0,0,0,0.25);
    }

    .playbar .slider .in{
        position: absolute;
        top:0px;
        left:0px;
        width:10%;
        height:2px;
        background:black;
    }

    .playbar .slider .nob{
        position: absolute;
        top:-8px;
        width: 20px;
        height: 20px;
		//margin-left:-10px;
        border:1px solid black;
        border-radius: 100%;
        background:var(--color);
        //transform-origin: center;
        //transform: translate(-50%, 0%);
    }
    .playbar .slider .nob:hover{
         border:2px solid black;
    }

    .playbar .time{
        width:40px;
    }

    .inline-videotitel{
        padding:8px 0px 20px;
		opacity:0;
    }
    .inline-videotitel p{
        margin:0;
    }
	.topic.text .inline-videotitel{
		opacity:0;
	}
	.topic .video.is-selected .inline-videotitel{
		opacity:1;
	}
    .inline-videotext{
        padding-bottom:24px;	
        display: none;
    }

    .videoplayer.play .inline-videotext{
        display: block;
    }

    .global-videotext{
        font-size:16px;
        margin:0px auto 0px;
		opacity: 0;
		transition:opacity 0.3s;
		
    }
	.global-videotext.on{
		margin:12px auto 24px;
		padding-bottom:24px;
		opacity: 1;
	}
        
	@keyframes spin-v {
		0% { transform:rotate(0deg);}
		50% {transform:rotate(120deg);}
		100% {transform:rotate(120deg);}
	}