/*== common css =*/
* {box-sizing: border-box;}
html {height: 100%;}
body, ul, ol, li, p {margin: 0; padding: 0; list-style: none;}
.clearfix:before {content: " "; display: table;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden}
.clearfix{display: inline-block}                        
* html .clearfix{height: 1%}
.clearfix{display: block}
.townhall_wrapper {width: 1195px; margin: 0 auto; box-sizing: border-box;}
.townhall_bg {background: #000000 url("//stat.moneycontrol.co.in/mcnews/ms/assets/images/townhall/townhall_bg.png") no-repeat top center; margin: 0 auto; background-size: cover; position: relative; min-height: 100%;}
.townhall_wrapper p {font: 30px/36px 'PT Serif', serif; color: #fff;}
.w70per {width: 70%;}
.yellow_btn {background-color: #000000; width: 120px; height: 30px; font: 500 13px/30px 'Roboto', sans-serif; color: #fec00f; overflow: hidden; text-transform: uppercase; text-decoration: none; display: inline-block; vertical-align: top; text-align: center; border: 1px solid #000000; border: 1px solid #fec00f;}
.yellow_btn:hover {background-color: #fec00f; color: #000;}
section {margin-bottom: 10px;}
/*== common css =*/

/*== top sectin ==*/
.top_section {background-color: #363636; height: 30px;}
.logo__share_container {text-align: right; padding-top: 4px; color: #8e8e8e; font: 400 13px 'Roboto', sans-serif;}
.mc_logo {background: url("//stat.moneycontrol.co.in/mcnews/ms/assets/images/townhall/townhall_sprite.png") no-repeat; width: 82px; height: 18px; display: inline-block; vertical-align: middle; background-position: -1px -2px;}
.fb_icon {background: url("//stat.moneycontrol.co.in/mcnews/ms/assets/images/townhall/townhall_sprite.png") no-repeat; width: 19px; height: 20px; display: inline-block; vertical-align: middle; background-position: 0px -21px; margin: 0 10px;}
.tt_icon {background: url("//stat.moneycontrol.co.in/mcnews/ms/assets/images/townhall/townhall_sprite.png") no-repeat; width: 19px; height: 20px; display: inline-block; vertical-align: middle; background-position: -25px -21px;}
/*== top sectin ==*/

/*== introduction section ==*/
.introduction_section {margin-top: 30px;}
.introduction_section p {font-size: 25px; display: inline-block; vertical-align: top; margin-top: 10px;}
/*== introduction section ==*/

/*== episode ==*/
.title_block {position: relative; margin-bottom: 17px;}
.cam_icon {background: url("//stat.moneycontrol.co.in/mcnews/ms/assets/images/townhall/townhall_sprite.png") no-repeat; width: 78px; height: 49px; display: inline-block; vertical-align: middle; background-position: 0px -40px;}
.title_block .title {position: absolute; font: 700 35px Century Gothic; color: #fec00f; left: 44px; top: 10px; display: inline-block; vertical-align: top; margin: 3px 0 0 2px;}
.episode_section .left_block {width: 802px; display: inline-block; vertical-align: top; position: relative; overflow: hidden;}
.episode_section .right_block {width: 17%; display: inline-block; vertical-align: top; border-left: 1px dashed #707070; padding-left: 26px; position: relative; margin-left: 12px; margin-top: 218px;}
.episode_section .right_block:before {width: 0; height: 0; border-left: 16px solid #707070; border-top: 11px solid transparent; border-bottom: 12px solid transparent; display: inline-block; content: ""; position: absolute; left: 0;}
.video_frame {background: url("//stat.moneycontrol.co.in/mcnews/ms/assets/images/townhall/video_frame.png") no-repeat; width: 800px; height: 472px; position: relative; padding: 25px;}
.big_vid_icon {border: 1px solid #fec00f; background-color: #000000; border-radius: 5px; width: 50px; height: 50px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto;}
.video_frame .big_vid_icon:after {position: absolute; left: 2px; right: 0; top: 0; bottom: 0; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent;  
  border-left: 15px solid #fec00f; display: inline-block; content: ""; margin: auto;}
.video_frame:hover .big_vid_icon {background-color: #febd14;}
.video_frame:hover .big_vid_icon:after {border-left: 15px solid #000;}
.name {font: 30px 'PT Serif', serif; color: #fec00f; position: absolute; width: 32%; top: 50px; right: 40px; display: inline-block;}
.designation {font: 400 15px/17px Century Gothic; color: #ffcc66; border-bottom: 1px dashed #707070; margin-bottom: 10px; padding-bottom: 15px;}
.description {font: 30px/36px 'PT Serif', serif; color: #ffffff;}
.video_block {position: relative; width: 200px; height: 112px;}
h3.video_content {margin-top: 10px; white-space: normal;}
.video_content a {width: 200px; font: 16px 'Roboto', sans-serif; color: #fff; text-decoration: none; display: inline-block; vertical-align: top;}
ul.episode_list {display: inline-block; margin-top: 20px;}
.episode_list li {display: inline-block; vertical-align: top; margin: 0 35px;}
.episode_list li:nth-of-type(1) {margin-left: 15px;}
.small_vid_icon {border: 1px solid #fec00f; background-color: #000000; border-radius: 3px; width: 23px; height: 23px; position: absolute; bottom: 7px; left: 5px;}
.video_block .small_vid_icon:after {position: absolute; left: 2px; right: 0; top: 0; bottom: 0; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent;  
  border-left: 8px solid #fec00f; display: inline-block; content: ""; margin: auto;}
.video_block:hover .small_vid_icon {background-color: #febd14;}
.video_block:hover .small_vid_icon:after {border-left: 8px solid #000;}
.img_overlay {width: 747px; left: auto; top: auto; z-index: 999; display: block;}
.video_container {display: none;}
.main_video_block img {width: 100%;}
/*== episode ==*/

/*== footer ==*/
.last_section {padding-bottom: 120px;}
footer {background-color: #363636; width: 100%; padding: 10px 0; bottom: 35px; position: absolute;}
footer .left_block {width: 66%; float: left; font: 15px/24px 'Roboto', sans-serif; color: #8e8e8e;}
footer .right_block {width: 30%; float: right; margin-left: 20px; text-align: right;}
ul.footer_links li {display: inline-block; vertical-align: top;}
ul.footer_links li a {font: 13px/24px 'Roboto', sans-serif; color: #8e8e8e; text-decoration: none; text-transform: uppercase;}
ul.footer_links li:after {content: "|"; display: inline-block; vertical-align: top; color: #8e8e8e; height: 14px; margin: 0 5px;}
ul.footer_links li:last-child {margin-right: 0;}
ul.footer_links li:last-child:after {content: "";}
/*== footer ==*/

@media screen and (max-width: 1279px){
.townhall_wrapper {width: 100%; padding: 0 20px;}
.townhall_bg {background-size: contain;}
.episode_section .left_block {width: 81%;}
.episode_section .right_block {margin-top: 0; width: 95%;} 
.episode_section {margin-bottom: 45px;}
footer .left_block {width: 60%;}
footer .right_block {width: 37%;}
.episode_list li {margin: 0 34px;}
}

@media screen and (max-width: 980px){
.episode_section .left_block {width: 100%;}
.video_frame {width: 100%; background-size: contain; background-position:center; height: unset; padding: 18px 15px;}
.video_frame img {width: 100%; height: auto;}
.img_overlay {width: 100%; height: unset; background-color: #000;}
.episode_list li {margin: 0 21px;}
}

@media screen and (max-width: 767px){
.introduction_section img {width: 100%;}
.introduction_section p {font-size: 18px; line-height: 30px; width: 100%;}
.title_block .title {font-size: 25px;}
.name {font-size: 15px; top: 32px; right: 20px; width: 37%;}
.designation {font-size: 10px; margin-bottom: 5px; padding-bottom: 5px; line-height: normal;}
.description {font-size: 14px; line-height: 15px;}
.big_vid_icon {width: 26px; height: 26px;}
.video_frame .big_vid_icon:after {border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid #fec00f;}
.video_frame:hover .big_vid_icon:after {border-left: 10px solid #000;}
.video_block, .video_block img {width: 105px; height: 70px; text-decoration: none;}
h3.video_content {display: inline-block; vertical-align: top; width: 60%; margin-top: 0; margin-left: 5px;}
.episode_section .right_block {margin-left: 0; margin-top: 10px;}
.video_content a {white-space: normal; font-size: 12px; width: 150px; line-height: 18px;}
.episode_section .townhall_wrapper {padding: 0 10px;}
.episode_list li:nth-of-type(1) {margin-left: 0;}
.episode_list li:nth-of-type(2) {margin: 0;}
.episode_list li {width: 260px; margin: 0 15px;}
.episode_section .right_block {border-top: 1px dashed #707070; border-left: none;}
.episode_section .right_block {padding-left: 20px; width: 94%;}
.episode_section .right_block:before {border-top: 16px solid #707070; border-left: 11px solid transparent; border-right: 12px solid transparent;}
.episode_section .right_block .video_block {display: block; padding-top: 30px; width: 200px; height: auto;}
.episode_section .right_block .video_block img {width: 100%; height: auto;}
.episode_section .right_block h3.video_content {margin-left: 0; display: block;}
.episode_section .right_block .video_content a {font-size: 18px; line-height: normal;}
footer .left_block, footer .right_block {width: 100%;}
footer .right_block {margin-left: 0; text-align: center;}
ul.footer_links li a {font-size: 10px;}
.small_vid_icon {width: 19px; height: 19px;}
.video_block .small_vid_icon:after {border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 5px solid #fec00f; left: 0;}
ul.episode_list {margin-bottom: 20px;}
footer {bottom: -50px; margin-bottom: 20px;}
.footer_links {margin: 10px 0;}
.last_section {padding-bottom: 150px;}
.episode_container {overflow-x: auto; overflow-y: hidden; white-space: nowrap;}
}

@media screen and (max-width: 320px){
.name {font-size: 15px; top: 15px; right: 8px; width: 37%;}
.video_frame {padding: 12px;}
}