/* =============================================================================================== */
/* VIDEO ========================================================================================= */
/* =============================================================================================== */

section.video {
    position: relative;
	float: left;
	width: 100%;
	max-height: calc(100vh - 85px);
	background-color: var(--frame-dark-grey); }
	section.video.show-bars {
   		margin: 0 0 100px; }

	section.video .embed {
		float: left;
		width: 100%;
		max-height: calc(100vh - 85px);
		transition: 0s; }
		section.video.left .embed {
			float: left;
			width: 65%; }
		section.video.right .embed {
			float: right;
			width: 65%; }
		@media (max-width: 768px) {
			section.video.left .embed { width: 100%; }
			section.video.right .embed { width: 100%; }
		}

		section.video .embed .top-box,
		section.video .embed .bot-box {
			display: none; }

		section.video .embed iframe {
			display: block;
			max-height: calc(100vh - 85px);
			line-height: 0;
			transition: 0s; }
			/*section.video .embed iframe {
				width: 100%; }*/

		section.video .embed div#jwembed {
			display: block;
			max-height: calc(100vh - 85px);
			line-height: 0;
			transition: 0s; }
			section.video .embed div#jwembed {
				width: 100%; }

		section.video .embed.on-side {
		    position: fixed; right: 25px; bottom: 55px; 
		    width: 400px;
		    height: 400px;
	        background-color: black;
		    z-index: 3000; }		
			@media (max-width: 425px) {
			    section.video .embed.on-side {
				    top: calc(85px + 50px);
				    right: 0; 
				    width: 100%; }
				}

			section.video.show-bars .embed .top-box,
			section.video.show-bars .embed .bot-box,
			section.video .embed.on-side .top-box,
			section.video .embed.on-side .bot-box { 
				display: block;
				width: 100%;
				background-color: var(--frame-dark-grey); }
				section.video.show-bars .embed.on-side .top-box,
				section.video.show-bars .embed.on-side .bot-box,
				section.video .embed.on-side .top-box,
				section.video .embed.on-side .bot-box { 
					position: absolute; }

				section.video.show-bars .embed .top-box,
				section.video .embed.on-side .top-box {
    				height: 50px;
					padding: 5px 15px; }
					section.video .embed.on-side .top-box {
						top: -50px; }
					section.video.show-bars .embed .top-box .title,
					section.video.show-bars .embed .top-box .subtitle,
					section.video .embed.on-side .top-box .title,
					section.video .embed.on-side .top-box .subtitle {
						color: white; }
						section.video.show-bars .embed .top-box .title,
						section.video .embed.on-side .top-box .title {
							font-weight: bold;
							text-transform: uppercase; }
						section.video .embed.on-side .top-box .title {
							padding-right: 30px; }

				section.video.show-bars .embed .bot-box,
				section.video .embed.on-side .bot-box {
    				height: 30px; }
					section.video .embed.on-side .bot-box {
						bottom: -30px; }
    				section.video.show-bars .embed .bot-box .share,
    				section.video .embed.on-side .bot-box .share {
					    float: left;
					    width: 50%;
    					height: 100%;
					    color: white;
					    text-align: center;
    					padding: 5px; }
    					section.video.show-bars .embed .bot-box .share.fb,
    					section.video .embed.on-side .bot-box .share.fb { 
    						background-color: var(--frame-social-fb); }
    					section.video.show-bars .embed .bot-box .share.tw,
    					section.video .embed.on-side .bot-box .share.tw {
    						background-color: var(--frame-social-tw); }

	section.video .sidebar {
		width: 35%;
		padding: 15px;
		overflow-y: scroll; }
		section.video .sidebar::-webkit-scrollbar-track {
			-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
			background-color: var(--frame-main-grey); }
		section.video .sidebar::-webkit-scrollbar {
			width: 6px;
			background-color: var(--frame-main-grey); }
		section.video .sidebar::-webkit-scrollbar-thumb {
			background-color: var(--frame-main); }

		section.video.left .sidebar {
			float: left;
			border-left: 2px solid white; }
		section.video.right .sidebar {
			float: right;
			border-radius: 2px solid white; }

		@media (max-width: 768px) {
			section.video.left .sidebar { width: 100%; border: none; }
			section.video.right .sidebar { width: 100%; border: none; }
		}

		section.video .sidebar .box {
			float: left;
			width: 100%;
   			border-bottom: 1px solid rgba(255,255,255,0.1);
			margin: 0 0 10px; } 

			section.video .sidebar .box .image {
				position: relative;
				float: left;
			    background-color: var(--frame-lght-grey);
			    background-position: center;
			    background-size: cover;
				background-blend-mode: multiply;
			    width: 40%;
			    height: 200px;
			    transition: 0.5s; }
				@media (max-width: 425px) { section.video .sidebar .box .image { width: 50% } }
			    section.video .sidebar .box:hover .image {
					background-color: transparent; 
					transition: 0.3s; }
				section.video .sidebar .box .image svg,
				section.video .sidebar .box .image i { 
				    position: absolute; top: calc(50% - 60px); left: calc(50% - 20px);
				    width: 40px;
					height: 40px;
				    color: white;
				    background-color: rgba(0,0,0,0.3);
				    font-size: 20px;
				    border-radius: 100%;  
				    padding: 10px 12px;
				    opacity: 0;
					transform: scale(1) rotate(45deg);
					transition: 0.5s; }
					section.video .sidebar .box:hover .image svg,
					section.video .sidebar .box:hover .image i {  
						top: calc(50% - 20px);  
						opacity: 1;
						transform: scale(1) rotate(0deg);
						transition: 0.3s; }

		section.video .sidebar .box .inner {
			float: left;
			width: 60%;
			padding: 0 10px }
			@media (max-width: 425px) { section.video .sidebar .box .inner { width: 50% } }
		section.video .sidebar .box .head {
			float: left;
			width: 100%;
		    color: white;
		    font-weight: bold;
		    text-transform: uppercase;
		    white-space: nowrap;
			padding: 5px 30px; } 
			section.video .sidebar .box .head.now {
				background-color: var(--frame-main); } 
			section.video .sidebar .box .head.next {
				background-color: var(--frame-main-grey); } 

	    section.video .sidebar .box .category,
	    section.video .sidebar .box .title {
			float: left;
			width: 100%;
			color: white;
			font-size: 14px;
			line-height: 1;
			padding: 5px 10px;
			overflow: hidden; }
	    	section.video .sidebar .box .category {
	    		margin: 5px 0 0; }
	    	section.video .sidebar .box .title { 
				height: 42px;
				font-weight: bold;
				padding: 0 10px; }

	section.video .embed .top-box .close-pop {
		display: none;
	    position: absolute; right: 10px; top: 5px;
	    color: white;
	    font-size: 20px;
	    cursor: pointer; }
		section.video .embed.on-side .top-box .close-pop { display: block; }

	section.video .embed.hidden {
		top: unset;
	    bottom: calc(-100% - 500px); }