* { box-sizing: border-box; }
body1{font-family: 'Roboto', sans-serif;/* background: #00bcd4; *//* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,d5ff96+35,95ffe8+100 */background: #ffffff; /* Old browsers */background: -moz-linear-gradient(top,  #96ffe7 0%, #d5ff96 35%, #95ffe8 100%); /* FF3.6-15 */background: -webkit-linear-gradient(top,  #96ffe7 0%,#d5ff96 35%,#95ffe8 100%); /* Chrome10-25,Safari5.1-6 */background: linear-gradient(to bottom,  #95ffe7 0%,#d5ff96 35%,#95ffe8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#95ffe8',GradientType=0 ); /* IE6-9 */}

body {font-family: 'Roboto', sans-serif;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,d5ff96+35,95ffe8+100 */ /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */background: linear-gradient(to bottom,  #ffffff 20%,#ffedf8 35%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ /* IE6-9 */}
header{padding: 30px 50px;/* background: white; */}
a.bnf_logo {display: inline-block;}
button.hamburger-menu{display: none;}
.col-md-31{width: 280px !important;margin-right: 30px;}
.form-horizontal {padding: 0px 20px;}
.form-horizontal input{padding: 13px 30px;width: 100%;background: #0e0e0e;border: none;font-size: 12px;text-transform: uppercase;}

.leftPanel {/* background: #95ffe8; */padding-top: 60px;}
.videoStyleList {margin: 0px;padding: 0px;list-style-type: none;text-align: center;}
.videoStyleList li {color: #666666;display: inline-block;cursor: pointer;padding: 10px 25px;border-radius: 0px;font-size: 13px;font-weight: 500;letter-spacing: 0px;text-transform: uppercase;transition: all 500ms ease-in-out;}
.videoStyleList li.is-checked{color: #ec018c;font-weight: 700 !important;transition: all 500ms ease-in-out;}
.videoStyleList li:nth-last-child() {border-bottom: 0px;}
.videoStyleList li:nth-first-child() {border-top: 0px;} 

.rightPanel {padding: 50px 50px 100px 50px;/* background: #95ffe8; */}
.jnjVideoBox.font-white{color: #fff;}
.jnjVideoBox.font-black{color: #000;}
a.jnjVideoBox{text-align: center;display: block;position: relative;/* overflow: hidden; */margin-bottom: 50px;width: 100%;background-size: cover;background-position: center center;transition: all 200ms ease-in-out;}

a.jnjVideoBox:after{content:"";height: 50%;min-height: 50%;width: 100%;position: absolute;bottom: -0.1rem;left: 0;background: linear-gradient(transparent,#000);z-index: 0;}
a.jnjVideoBox.height_full{padding-bottom: 150%;/*521px*/}
a.jnjVideoBox.height_quaterHalf{height: 490px;/*440px*/}
a.jnjVideoBox.height_half{height: 390px;/*340px*/}

span.video_wrp {position: absolute;top: 0;left: 0;z-index: 1;width: 100%;height: 100%;border: 1px solid #ccc;opacity: 0;transform: scale(1);transition: all 200ms ease-in-out;}
a.jnjVideoBox .videoThumb video,
a.jnjVideoBox .videoThumb iframe{/* height: 100% !important; */width: 100% !important;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%) scale(1.5);}
a.jnjVideoBox .videoTxt{display: block;height: 50%;background: #fff;position: relative;}
a.jnjVideoBox .videoTxt h3{color: #000;font-size: 24px;margin-bottom: 15px;display: none;}
a.jnjVideoBox .videoTxt p{color: #000;font-size: calc(3px + 0.8vw);line-height: 1.3;width: 100%;position: absolute;top: 50%;left: 50%;margin: auto;padding: 20% 8% 8% 8%;transform: translate(-50%,-50%);}
a.jnjVideoBox .videoThumb{display: block;height: 50%;overflow: hidden;position: relative;}
a.jnjVideoBox .videoThumb img{}

a.jnjVideoBox:hover{transform: scale(1.03);transition: all 200ms ease-in-out;}
a.jnjVideoBox .client-logo {width: 120px;margin-bottom: 10px;margin-left: -3px;}

.video-logo {padding: 0px 7%;position: absolute;bottom: 0;left: 0;width: 100%;height: 50%;z-index:1;text-align: center;}

.video-logo img{/* height: 90px; */filter:invert(10);margin-top: 15%;}
a.jnjVideoBox .videoPlay{display: flex;align-items: center;position: absolute;bottom: 15px;left: 50%;transform: translateX(-50%);z-index: 9;filter: brightness(100) grayscale(100);}
a.jnjVideoBox .videoPlay .playIcon{display: inline-block;width: 20px;height: 20px;filter: invert(1);} 
a.jnjVideoBox .videoPlay .playTxt{display: inline-block;padding-left: 6px;}
a.jnjVideoBox .videoPlay .playIcon:after{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-position: center center;background-repeat: no-repeat;background-size: cover;} 
a.jnjVideoBox .videoPlay .playTxt:after{font-size: 12px;font-weight: 700;text-transform: uppercase;position: relative;top: -2px;} 

.film a.jnjVideoBox .videoPlay .playIcon:after{background-image: url("../img/icon/film.png");} 
.film a.jnjVideoBox .videoPlay .playTxt:after{content: "Film";} 

.podcast a.jnjVideoBox .videoPlay .playIcon:after{background-image: url("../img/icon/podcast.png");} 
.podcast a.jnjVideoBox .videoPlay .playTxt:after{content: "Podcast";} 

.series a.jnjVideoBox .videoPlay .playIcon:after{background-image: url("../img/icon/series.png");} 
.series a.jnjVideoBox .videoPlay .playTxt:after{content: "Series";} 

.documentary a.jnjVideoBox .videoPlay .playIcon:after{background-image: url("../img/icon/documentary.png");} 
.documentary a.jnjVideoBox .videoPlay .playTxt:after{content: "Documentary";} 

.music-video a.jnjVideoBox .videoPlay .playIcon:after{background-image: url("../img/icon/series.png");} 
.music-video a.jnjVideoBox .videoPlay .playTxt:after{content: "Music Video";} 

a.jnjVideoBox:hover .videoPlay{bottom: -10px;}
a.jnjVideoBox:hover .video-logo{}
a.jnjVideoBox:hover .video-logo img{margin-top: 0;filter: inherit;}
a.jnjVideoBox:hover .videoPlay .playIcon{filter: inherit;}
a.jnjVideoBox:hover .videoPlay .playTxt{color: #000;}

div#html5-watermark{display: none !important;}
div#html5-lightbox-box{width: 60% !important; transition: all 500ms ease-in-out;}
div#html5-elem-wrap {width: 100% !important;height: 65vh !important;transition: all 500ms ease-in-out;}


a.jnjVideoBox:hover span.video_wrp{opacity: 1;transform: scale(1.1);transition: all 200ms ease-in-out;}
.btn-back-menu{color: #fff;font-size: 15px;text-transform: uppercase;padding: 0px 0px 0px 40px;transition: all .7s;position: relative;}
.btn-back-menu .arrow{position: absolute;top: 50%;left: 0;width: 30px;height: 2px;background: #ffffff;transition: all .7s;}
.btn-back-menu .arrow:after{content:"";position:absolute;top: -4px;left: 2px;width: 10px;height: 10px;box-shadow: -2px 2px 0px #ffffff;transform: rotate(45deg);transition: all .7s;}
.btn-back-menu .txt{}
.btn-back-menu:hover{color: #fff;text-decoration: none;padding: 0px 0px 0px 60px;transition: all .7s;}
.btn-back-menu:hover .arrow{background: #fff;width: 40px;transition: all .7s;}
.btn-back-menu:hover .arrow:after{box-shadow: -2px 2px 0px #fff;transition: all .7s;}

section.sec-podcast-01{padding: 80px 50px;background: #f3dcea;}
section.sec-podcast-01 h5{font-size: 15px;}
section.sec-podcast-01 h2{font-size: 5rem;font-weight: 400;margin-top: 1rem;margin-bottom: 1rem;}
section.sec-podcast-01 p{font-size: 24px;font-weight: 400;}


@media (min-width: 992px) and (max-width: 1366px)
{
	.col-lg-4 {-webkit-box-flex: 0;-ms-flex: 0 0 33.333333% !important;flex: 0 0 33.333333% !important;max-width: 33.333333% !important;}
}

@media (max-width: 768px)

{	
	a.bnf_logo {padding: 5px 15px;display: inline-block;}		
	.rightPanel{width: 100%;padding: 100px 10px;}	
	.leftPanel{width: 100%;height: auto;}
	button.hamburger-menu{display: block;width: 60px;height: 60px;float: right;background: #ec018c;border: none;cursor: pointer;position: relative;z-index: 6;outline: none !important;box-shadow: 2px 0px 7px rgba(0, 0, 0, 0.2);transition: all 300ms ease-in-out;}
	button.hamburger-menu:before{content: "";position: absolute;top: 18px;left: 15px;width: 30px;height: 2px;background: white;transition: all 300ms ease-in-out;}
	button.hamburger-menu:after{content: "";position: absolute;top: 40px;left: 15px;width: 30px;height: 2px;background: white;transition: all 300ms ease-in-out;}
	button.hamburger-menu .hm-line{content: "";position: absolute;top: 29px;left: 0px !important;right: 0px !important;margin: 0px auto;width: 30px;height: 2px;background: white;transition: all 300ms ease-in-out;}
	button.hamburger-menu .hm-text{content: "";display: none;position: absolute;top: 51px;left: 20px;width: 30px;color: #fff;text-transform: uppercase;font-size: 12px;letter-spacing: 2px;transition: all 300ms ease-in-out;}
	button.hamburger-menu.tab-hm-close:before{top: 28px;background: white;transform: rotate(45deg);transition: all 300ms ease-in-out;}
	button.hamburger-menu.tab-hm-close:after{top: 28px;transform: rotate(-45deg);transition: all 300ms ease-in-out;}
	button.hamburger-menu.tab-hm-close .hm-line{width: 0px;transition: all 300ms ease-in-out;}
	span.hm-open {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;}
	span.hm-close{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;}
	#hamburger-menu.tab-hm-open span.hm-open{z-index: 2;}
	#hamburger-menu.tab-hm-close span.hm-close{z-index: 2;}
	#menu-wrp.menu-close{background: #151515;position: absolute;left: -0%;width: 100%;padding-top: 30px;transition: all 500ms ease-in-out;}
	#menu-wrp.menu-open{background: #fff;position: absolute;left: -100%;width: 100%;padding-top: 30px;transition: all 500ms ease-in-out;}
}