@font-face {
        font-family: 'supermarketRegular';
         src: url('../fonts/supermarket.eot');
         src: url('../fonts/supermarket.eot#iefix') format('embedded-opentype'),
              url('../fonts/supermarket.woff') format('woff'),
              url('../fonts/supermarket.ttf') format('truetype');
			  font-weight: normal;
              font-style: normal;
		 }	 
html,body {

    font-family:tahoma, "Microsoft Sans Serif", Vanessa;
	font-size:13px;
	color:#666666;
	padding: 0;   
        margin: 0;   
        width: 100%;   
        height: 100%;    
	}

    #overlay {   
        position: absolute;  
        top: 0px;   
        left: 0px;  
        background: #ccc;   
        width: 100%;   
        height: 100%;   
        opacity: .75;   
        filter: alpha(opacity=75);   
        -moz-opacity: .75;  
        z-index: 999;  
        background: #fff url(KUJoe.gif) 50% 50% no-repeat;
    }   
    .main-contain{
        position: absolute;  
        top: 0px;   
        left: 0px;  
        width: 100%;   
        height: 100%;   
        overflow: hidden;
    }	
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {font-family:'supermarketRegular';}	
img {
  max-width: 100%important;
  height:auto;
}
@media print {
  .no-print {
    display: none;
  }
  aside,
  header,
  footer {
    display: none;
  }
  .ads {
    margin: 0;
  }
}

.col-item
{
    border: 1px dotted #E1E1E1;
    background: #FFF;
	height:356px;
	margin-bottom:20px;
}
.col-item .photo img
{
    margin: 0 auto;
    width: 95%;
	height:250px;
}

.col-item .info
{
    padding: 5px;
    border-radius: 0 0 5px 5px;
    margin-top: 1px;
}
 /*
.col-item:hover .info {
    background-color:#F8F8F8;
}
*/
.col-item .price
{
    /*width: 50%;*/
    float: left;
    margin-top: 5px;
	height:40px;
	overflow:hidden;
}

.col-item .price h5
{
    line-height: 20px;
    margin: 0;
}

.price-text-color
{
    color: #219FD1;
}

.col-item .info .rating
{
    color: #777;
}

.col-item .rating
{
    /*width: 50%;*/
    float: left;
    font-size: 17px;
    text-align: right;
    line-height: 52px;
    margin-bottom: 10px;
    height: 52px;
}

.col-item .separator
{
    border-top: 1px solid #E1E1E1;
}

.clear-left
{
    clear: left;
}

.col-item .separator p
{
    line-height: 20px;
    margin-bottom: 0;
    margin-top: 10px;
    text-align: center;
}

.col-item .separator p i
{
    margin-right: 5px;
}
.col-item .btn-add
{
    width: 50%;
    float: left;
}

.col-item .btn-add
{
    border-right: 1px solid #E1E1E1;
}

.col-item .btn-details
{
    width: 50%;
    float: left;
    padding-left: 10px;
}
.controls
{
    margin-top: 20px;
}
[data-slide="prev"]
{
    margin-right: 10px;
}


h3{padding:0px; font-size:26px;}
h3{padding:0px; font-size:16px;}
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
}
header{
       display:block; 
	   width:100%; 
	   height:60px;
	   }
aside{
       display:block;
	   left: 0;
	   float:left;
	   position:relative;
	   width:15%;
	   min-height: 100%;
       height: auto !important;
       height: 100%;
	   background-color:#F7F7F7;
	   overflow:hidden; 
	   padding-bottom:999999px; /* จุดสำคัญ */
       margin-bottom:-999999px; /* จุดสำคัญ */ 
	   border-right:dotted 1px #000000;
	   
	  }
article{
       display:inline; 
	   float:right; 
	   width:85%;
	   min-height: 100%;
       height: auto !important;
       height: 100%;
	   background:#FFFFFF;
	   padding:10px;
	   
	   }
article img{max-width:100%;height: auto;}	
aside img{max-width:100%;height: auto;}	   
footer{
       clear:both;
	   display:block; 
	   width:100%; 
	   height:90px;
	   margin-bottom: 0px;
	   border-top:dotted 1px #000000;
	   background-color:#F7F7F7;
	   
	   }
.footer_left{
       display:block;
	   left: 0;
	   margin-bottom: 0px;
       float:left;
	   width:15%;
	   height:90px;
	    border-right:dotted 1px #000000;
       }	
.footer_right{
       display:block;
	   margin-bottom: 0px;
	   right:0; float:right;
	   width:85%;
	   height:90px;
	   top:0px;
	   white-space:wrap;overflow:hidden;
       }
.foot{ margin:0 auto; text-align:center;padding:10px; clear:both;}	   	      
.top_left{
       clear:both;
       display:block;
	   left:0; float:left; 
	   width:15%;
	   height:60px;
	   border-top:dotted 1px #000000;
	   border-bottom:dotted 1px #000000;
	   border-right:dotted 1px #000000;
	   background:#1871CE;
       }	
.top_right{
       display:block;
	   right:0; float:right;
	   width:85%;
	   height:60px;
	   background:#1871CE;
	   border-top:dotted 1px #000000;
	   border-bottom:dotted 1px #000000;
	   
       }	      
.main{ 
      clear:both;
	  position:inherit;
	  margin:0 auto;
	  width:100%;
	  min-height: 100%;
      height: auto !important;
      height: 100%;
	  overflow: hidden;
	  
	  }
 	  
.input-group{width:100% !important; padding:5px;}
input{width:100% !important;}	
.media-list li{ display:block; height:24px;overflow:hidden;text-overflow: ellipsis;text-overflow: '...?';}
.media{ display:block; border-bottom:dotted 1px #EFEFEF; padding-bottom:1px; padding-left:1px; padding-right:1px;} 
ul.v_menu{ /* กำหนดขอบเขตของเมนู */
	list-style:none;
	margin:0px;
	padding:0px;
	font-family:'supermarketRegular';
	font-size:14px;
}
ul.v_menu > li{ /* กำหนดรูปแบบให้กับเมนูเ */
	display:block;
	height:26px;
	text-indent:5px;
	float:right;
	text-align:center;
}
ul.v_menu > li:hover{ /* กำหนดรูปแบบให้กับเมนูเมื่อมีเมาส์อยู่เหนือ */
	display:block;	
}
ul.v_menu > li > a{ /* กำหนดรูปแบบให้กับลิ้งค์ */
	text-decoration:none;
	background-color:#1871CE;
	color:#FFFFFF;
	padding-left:10px;
	padding-right:10px;
	border-right:dotted 1px #000000;
	line-height:26px;
	height:26px;
	display:block;
	height:26px;
	text-indent:5px;
	border-bottom:dotted 1px #000000;
}
/*--------------------- top */
ul.v_menu_top{ /* กำหนดขอบเขตของเมนู */
	list-style:none;
	margin:0px;
	padding-top:35px;
	font-family:'supermarketRegular';
	font-size:14px;
	
}
ul.v_menu_top > li{ /* กำหนดรูปแบบให้กับเมนูเ */
	display:block;
	height:25px;
	text-indent:5px;
	float:right;
	text-align:center;
}
ul.v_menu_top > li:hover{ /* กำหนดรูปแบบให้กับเมนูเมื่อมีเมาส์อยู่เหนือ */
	display:block;	
}
ul.v_menu_top > li > a{ /* กำหนดรูปแบบให้กับลิ้งค์ */
	text-decoration:none;
	background-color:#1871CE;
	color:#FFFFFF;
	padding-left:10px;
	padding-right:10px;
	border-right:dotted 1px #000000;
	line-height:25px;
	height:26px;
	display:block;
	height:25px;
	text-indent:5px;
	border-top:dotted 1px #000000;
	
}
#time{clear:both; color:#FFFFFF; display:block; margin:0 auto;font-size:26px;padding-top:10px; padding-left:20px;text-shadow: 4px 4px 2px rgba(0, 0, 0, 5);}

.small_time{clear:both;color:#666666; float:left; font-size:12px; font-family:'supermarketRegular';padding-left:20px; padding-top:0px; margin-top:0px;}
.logo{margin:0 auto; float:left;font-size:26px;padding-top:0px; padding-left:20px;}
.logo{color:#000000;-webkit-font-smoothing: antialiased;}
.logo span{color:#CC3300;font-size:26px;-webkit-font-smoothing: antialiased;}
.logo img{margin-bottom:5px;margin-left:2px;margin-right:2px;border:0;}
.logo a{font-family:'supermarketRegular'; white-space:nowrap; text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);}
.logo element {overflow:hidden;}

.time_tile{font-family:'supermarketRegular';color:#1871CE; float:left; padding-top:15px; padding-left:210px; font-size:20px;white-space: wrap;}
.nav-tabs-justified {
  border-bottom: 0;
}
.nav-tabs-justified > li > a {
  margin-right: 0px;
  border-radius: 0px;
  text-align:right; 
  border-bottom: 1px dotted #000000;
}
.nav-tabs-justified > .active > a,
.nav-tabs-justified > .active > a:hover,
.nav-tabs-justified > .active > a:focus {
  border: 1px solid #000000;
}
.overflow-hidden {
	display: block;
	white-space: wrap;
	height:112px !important;
	margin-bottom:10px !important;
	margin-left:0px;
	margin-right:0px;
	padding-left:0px;
	padding-right:0px;
    overflow:hidden;
	text-overflow:ellipsis;text-overflow: '...?';
    }
a.overflow-hidden:hover,
a.overflow-hidden:focus {
  text-decoration: none;
  background-color: #f5f5f5;
  }

.overflow-hidden.active,
.overflow-hidden.active:hover,
.overflow-hidden.active:focus {
  z-index: 2;
  color: #ffffff;
  background-color: #428bca;
  border-color: #428bca;
}

.overflow-hidden.active .overflow-hidden-heading,
.overflow-hidden.active:hover .overflow-hidden-heading,
.overflow-hidden.active:focus .overflow-hidden-heading {
  color: inherit;
}

.overflow-hidden.active .overflow-hidden-text,
.overflow-hidden.active:hover .overflow-hidden-text,
.overflow-hidden.active:focus .overflow-hidden-text {
  color: #e1edf7;
}
.navbar-inverse  .navbar-brand {width:185px;color:#FFFFFF;font-size:22px;-webkit-font-smoothing: antialiased;}
.navbar-inverse  .navbar-brand span{color:#FF0000;font-size:24px;-webkit-font-smoothing: antialiased;}
.navbar-inverse  .navbar-brand img{margin-bottom:3px;margin-left:2px;margin-right:2px;border:0}
.navbar-inverse  .navbar-brand a{white-space:nowrap;}
.navbar-inverse  .navbar-brand element {overflow:hidden;}

.ads{clear:both; 
	 margin-left:5px;
	 overflow:hidden; 
	 padding-bottom:999999px; /* จุดสำคัญ */
     margin-bottom:-999999px; /* จุดสำคัญ */ }
.left{float:left; display:block; width:75%;white-space:wrap;overflow:hidden;}
.right{float:right;display:block; width:25%;  padding-left:10px;}
.left_1{float:left; display:block; width:40%;white-space:wrap;overflow:hidden;}
.right_1{float:right;display:block; width:60%;}
.right img{max-width:100%;min-width:1px;padding:5px;}
.c{clear:both;}
.bar{ display:block;
	  border-bottom:solid 1px #1871CE;
      width:100%;  margin-bottom:10px; height:25px; text-align:left;}
.bar_topic{
font-family:'supermarketRegular';
display:block;
background-color:#1871CE;
background-image:url(../images/topic.jpg);
background-position:right;
background-repeat:no-repeat;
height:25px;
float: left;font-size:18px;color: #FFF;
padding-right:40px;
border-bottom:solid 1px #1871CE;
border-left:dotted 1px #1871CE; 	
padding-left:8px; 	
}	  
.comment{width: 100% !important;}
iframe{width: 100% !important;}
section{
    display: block;
	white-space: wrap;
	height:auto;
	padding-top:10px !important;
	padding-bottom:10px !important;
	border-bottom:dotted 1px #CCCCCC;
    overflow:hidden;
	text-overflow:ellipsis;text-overflow: '...?';

}
.forum{ background-color:#FFFFFF;}
/* Page Header */
.page-header {
  margin: 10px 0 20px 0;
  font-size: 22px;
}
.page-header > small {
  color: #666;
  display: block;
  margin-top: 5px;
}
.breadcrumb{
  border-bottom:solid 1px #999999;
  border-radius: 0px;
  font-family:'supermarketRegular';
  }
.share{clear:both; font-size:36px; color:#FFFFFF; margin-top:0px; padding-bottom:10px;}
.right{overflow:hidden;}
.hot{margin-right: 10px; padding-right:10px; margin-right:dotted 1px #CCCCCC;}
.page-header-title{
	text-align:right;
	vertical-align: middle;
	border-bottom:1px black dotted;
	color:white;
	margin-top:0px;
	margin-bottom:0px;
	color:#000000;
	padding-right:10px;
	font-family:'supermarketRegular';
}









.social-share [class^="iconf-"], .social-share [class*="iconf-"] { 
  speak: none; 
  font-style: normal; 
  font-weight: normal; 
  font-variant: normal; 
  text-transform: none; 
  line-height: 25px;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
}


.social-share ul {
  margin: 0;
  padding-left:2px; margin-left:2px;
}
.social-share ul li {
  position: relative;
  float: left;
  width: 25%;
  text-align: center;
  padding-bottom: 0;
  list-style: none; 
}
.social-share ul li:first-child a {
  border-left: 1px solid #dfdfdf;
}
.social-share ul li.last-child a {
  border-right: 1px solid #dfdfdf;
}
.social-share ul li a {
  background: #FFF;
  color: #444444;
  position: relative;
  text-decoration: none;
  display: block;
  border-bottom: 1px solid #dfdfdf;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.social-share ul li a span {
  display: block;
  padding: 4px 0;
  font-size: 14px;
  font-weight: 700;
}
.social-share ul li a .social-icon {
  padding:0px;
  font-size: 20px;
  color: #FFF;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  height: 30px;
}
.social-share ul li a small {
  display: none;
  /*padding: 5.5px 0;*/
  padding: 5.5px 0;
  font-size: 14px;
}
.social-share ul li a:hover span {
  display: none !important;
}
.social-share ul li a:hover small {
  display: block;
}
.social-share ul li a.fb-btn .social-icon {
  background-color: #2d5f9a;
}
.social-share ul li a.fb-btn:hover, .social-share ul li a.fb-btn:hover .social-icon {
  background-color: #214773;
  color: #FFF;
}
.social-share ul li a.tw-btn .social-icon {
  background-color: #66cbf9;
}
.social-share ul li a.tw-btn:hover, .social-share ul li a.tw-btn:hover .social-icon {
  background-color: #35baf7;
  color: #FFF;
}
.social-share ul li a.gg-btn .social-icon {
  background-color: #eb4026;
}
.social-share ul li a.gg-btn:hover, .social-share ul li a.gg-btn:hover .social-icon {
  background-color: #cb2b13;
  color: #FFF;
}
.social-share ul li a.pt-btn .social-icon {
  background-color: #d3222a;
}
.social-share ul li a.pt-btn:hover, .social-share ul li a.pt-btn:hover .social-icon {
  background-color: #a71b21;
  color: #FFF;
}

/* read page */
.entry-share, .social-share.entry {
  float: right;
}

.social-share.entry ul {
  float: left;
}
.social-share.entry ul li {
  width: 63px;
}
.social-share.entry ul li a {
  color: #444444;
  position: relative;
  text-decoration: none;
  display: block;
  border-bottom: 1px solid #dfdfdf;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.social-share.entry ul li a span {
  padding: 5px 0;
  font-size: 16px;
  font-weight: 700;
}
.social-share.entry ul li a small {
  padding: 6.5px 0;
  font-size: 14px;
}
.social-share.entry ul li a .social-icon {
  padding: 1px 0;
  line-height: 32px;
  font-size: 18px;
  color: #FFF;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;ป
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.iconf-twitter { #zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ''); }
.iconf-pinterest { #zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ''); }
.iconf-share { #zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ''); }
.iconf-facebook { #zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ''); }
.iconf-gplus { #zoom: expression(this.runtimeStyle['zoom'] = '1', this.innerHTML = ''); }

/*.iconf-twitter, .iconf-pinterest, .iconf-share, .iconf-facebook, .iconf-gplus { background-image: url("http://www.job-108.com/templates/html5/bootstrap/css/template.css?v=1002"); }

.iconf-twitter { }
.iconf-pinterest { }
.iconf-share { }
.iconf-facebook { }
.iconf-gplus { }*/

.iconf-twitter:before { content: "\e615"; }
.iconf-facebook:before { content: "\e60b"; }
.iconf-gplus:before { content: "\e60c"; }
.iconf-pinterest:before { content: "\e60d"; }

.total-shares { 
    overflow: hidden; 
    float:left; 
    text-align:center; 
    padding-right:0px; 
    color:#adadad; 
    position:relative; 
    margin-right:0px; 
    font-size: 13px; 
}
.total-shares>em { 
    font-size:430% !important; 
    display:block; 
    font-weight: 400; 
    line-height:85%; 
    position:relative; 
    font-style:normal; 
    height:48px; 
}

/* tablet */
    .social-share.tablet ul li a:hover small { display: none; }
    .social-share.tablet ul li a:hover span { display:  block!important; }
    .social-share.tablet ul li a { 
        -webkit-transition: none;
        -moz-transition: none;
        -ms-transition: none;
        -o-transition: none;
        transition: none;
    }

    .social-share.tablet ul li a .social-icon {
        -webkit-transition: none;
        -moz-transition: none;
        -ms-transition: none;
        -o-transition: none;
        transition: none;
    }

    .social-share.tablet ul li a:hover { background: transparent!important; color: #444!important; }
    .social-share.tablet ul li a.fb-btn:hover .social-icon {
      background-color: #2d5f9a;
    }
    .social-share.tablet ul li a.tw-btn:hover .social-icon {
    background-color: #66cbf9;
    }

    .social-share.tablet ul li a.gg-btn:hover .social-icon {
    background-color: #eb4026;
    }

    .social-share.tablet ul li a.pt-btn:hover .social-icon {
    background-color: #d3222a;
    }

/* mobile */
 .social-share.mobile .total-shares { 
        height: 55px; 
        padding-top: 10px; 
        padding-right: 30px; 
        font-size: 80%; 
        margin-right: 5px !important;
    }
  .social-share.mobile .total-shares>em { 
        line-height: auto; 
        height: auto; 
        font-size: 210% !important;
    }
  .social-share.mobile .entry-share {
    margin-bottom: 10px;
  }

    .social-share.mobile ul li a:hover small { display: none; }
    .social-share.mobile ul li a:hover span { display:  block!important; }
    .social-share.mobile ul li a { 
        -webkit-transition: none;
        -moz-transition: none;
        -ms-transition: none;
        -o-transition: none;
        transition: none;
    }

    .social-share.mobile ul li a .social-icon {
        -webkit-transition: none;
        -moz-transition: none;
        -ms-transition: none;
        -o-transition: none;
        transition: none;
    }

    .social-share.mobile ul li a:hover { background: transparent!important; color: #444!important; }
    .social-share.mobile ul li a.fb-btn:hover .social-icon {
      background-color: #2d5f9a;
    }
    .social-share.mobile ul li a.tw-btn:hover .social-icon {
    background-color: #66cbf9;
    }

    .social-share.mobile ul li a.gg-btn:hover .social-icon {
    background-color: #eb4026;
    }

    .social-share.mobile ul li a.pt-btn:hover .social-icon {
    background-color: #d3222a;
    }

@media (min-width: 1024px) {.navbar{display:none;}}
@media (max-width: 1023px) {

      body {
	    font-family: sans-serif;
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
	    background:#F7F7F7;
      margin-bottom: 100px;
      padding-bottom: 100px;
      }
	  .logo{margin:0 auto;font-size:26px;padding-top:15px; padding-left:10px;}
      .logo {color:#000000;-webkit-font-smoothing: antialiased;}
      .logo span{color:#CC3300;font-size:26px;-webkit-font-smoothing: antialiased;}
      .logo img{margin-bottom:5px;margin-left:2px;margin-right:2px;border:0}
      .logo a{font-family:'supermarketRegular'; white-space:nowrap;}
      .logo element {overflow:hidden;}
	  .share{ font-size:36px; color:#006699; margin-top:0px;}
      aside{display:none;}
	  article{width:100%;border:none; margin: 0 auto; padding:10px;}
	  footer{border-top:dotted 1px #333333; border-right:none; margin-bottom: 100px;}
	  header{display:none;}
	  .top_left{width:100%;border:none; padding-top:0px;}
	  .top_right{width:100%; background-color:#FFFFFF; border-top:none; border-bottom:solid #CCCCCC;}
	  .time_tile{display:none;}
	  .logo{display:none;}
	  .footer_left{display:none;}
	  .main{border:none;}
	  ul.v_menu{display:none;}
	  ul.v_menu_top{display:none;}
	  .ads{clear:both;border:none;margin:0px; padding:0px;}
	  .input-group{width:100% !important; padding:5px;}
       input{width:100% !important;}
	  .forum{display:none;}
	  .comment{display:none;}
	  section{
      display: block;
	  height:auto!important;
	  padding-bottom:10px !important;
	  margin-bottom:5px !important;
	  border-bottom:dotted 1px #CCCCCC;
      overflow:hidden;
	  text-overflow:ellipsis;text-overflow: '...?';
      }
	  .left{float:left; display:block; width:100%;white-space:wrap;overflow:hidden;}
      .right{float:left; display:block; padding:0px; margin:0px; width:100%;white-space:wrap;overflow:hidden;}
      .hot{margin-left: 0px; padding-left:0px; margin-left:none;}
	  .hot img{ float:right; padding-left:5px; padding-top:20px; max-width:100px  !important; max-height:100px !important;}
	  .l{ float:right;}
	  .overflow-hidden {
	display: block;
	white-space: wrap;
	height:auto !important;
	margin-bottom:10px !important;
	margin-left:0px;
	margin-right:0px;
	padding-left:0px;
	padding-right:0px;
	border-bottom:dotted 1px #CCCCCC;
    }
	.text{ display:none;}
	.left_1{ display:none;}
    .right_1{width:100%;}
	  }	 
	  @media (max-width: 900px) {
	  #time{clear:both; display:block; margin:0 auto;font-size:20px;padding-top:10px; padding-left:10px;}

     .small_time{clear:both;color:#666666; float:left; font-size:10px; font-family:'supermarketRegular';padding-left:80px; padding-top:0px; margin-top:0px;}
	  } 
	  @media (max-width: 700px) {
	  .hot img{ float:right; padding-left:5px; padding-top:20px; max-width:200px;  !important; max-height:100px !important;}
	  }
	  @media (max-width: 400px) {
	  .hot img{ float:right; padding-left:5px; padding-top:20px; max-width:100%  !important; max-height:100px !important;}
	  .total-shares{display:none;}
	  }
	  @media (min-width: 501px) {
	  .lineshare{display:none;}
	  }
	  @media (max-width: 500px) {
	  .lineshare{display:inline; margin:0px; padding:0px;}
	  }


.youtube {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.youtube iframe,
.youtube object,
.youtube embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}