

div.shorts {
	position: fixed;
	height: 100%;
	box-sizing: border-box;
	top: 0px;
	right: 0px;
	width: 100%;
	background: rgba(0,0,0,0.85);
	display: none;
	overflow-y: auto; 
	z-index: 100;
}
	div.shorts div.frame {
		display: table;
		width: 100%;
		max-width: 1300px;
		margin: 0 auto; 
	}

	div.shorts div.left, div.shorts div.center, div.shorts div.right {
		display: table-cell;
		vertical-align: top;
	}

		
		div.shorts div.left {
			width: 65px;		
		}
			div.shorts div.left div.cnt {
				position: absolute;
				color: #ffffff;
				top: 2vh;
				left: 2vw;
				font-size: 28px;
				font-weight: 500;
			}
									
			
		div.shorts div.center {
			vertical-align: middle;
			text-align: center;
			padding: 0px;
			
		}
			div.shorts div.center div.elem {
				display: none;
			}
				div.shorts div.center div.elem div.textlayer {
					top: 10vh;
					margin: 0 auto;
					position: absolute;
					width: 80%;
					left: 10%;
					text-align: center;
					color: #ffffff;
					font-size: 3.4vw;
					font-weight: 700;
					text-shadow: 0px 5px 20px #000000;
				}
				
			div.shorts div.center div.progress {
				width: 0%;
				background: #ffffff;
				font-size: 2px;
				position: absolute;
				top: 1px;
				left: 0px;
			}
				@keyframes progressbar {
					
					0% { 
						width: 0%;
					}
					100% {
						width: 100%;
					}
				}
				
				div.shorts div.center video {
					max-height: 90vh; 
					max-width: 90vw;
				}
				div.shorts div.center img {
					max-height: 90vh; 
					max-width: 90vw;
				}
			
			div.shorts div.center div.top {
				height: 5vh;
			}
			div.shorts div.center div.bottom{
				height: 4vh;
			}
		
	
		div.shorts div.right {
			width: 65px;
			height: 100%;
		}
		
			div.shorts div.close {
				margin: 1vh 0px 0px 0px;
				border-radius: 10px;
				height: 98vh;
				background-image: url(../images/close.png);
				background-position: center 10px;
				background-repeat: no-repeat;
				cursor: pointer;
			}
				div.shorts div.close:hover {
					background-color: rgba(255,255,255,0.1);
				}
			
			


	
					


@media screen and (max-width: 750px) {
	
	div.shorts div.left {
		width: 60px;			
	}
	div.shorts div.right {
		width: 60px;
			
	}

}

@media screen and (max-width: 525px) { 
	div.shorts div.left {
		width: 30px;			
	}
	div.shorts div.right {
		width: 30px;
	}
	
	div.shorts div.right div.close {
		background-size: 24px 24px;
	}

	div.shorts div.center video {
		max-height: 82vh; 
		max-width: 82vw;
	}
	div.shorts div.center img {
		max-height: 82vh; 
		max-width: 82vw;
	}
	
}

