.cbp-rfgrid {
	margin: 0px 0 0 0;
	padding: 0;
	list-style: none;
	position: relative;
	width: 100%;
	display: inline-block;
}

.cbp-rfgrid li {
	position: relative;
	float: left;
	overflow: hidden;
		width: 20%; /* Fallback */
		width: -webkit-calc(100% / 5);
		width: calc(100% / 5);
}

.cbp-rfgrid li a,
.cbp-rfgrid li a img {
	display: block;
	width: 100%;
	cursor: pointer;
}

.cbp-rfgrid li a img {
	max-width: 100%;
}

/* Flexbox is used for centering the heading */
.cbp-rfgrid li a div {
	position: absolute;
	left: 20px;
	top: 20px;
	right: 20px;
	bottom: 20px;
	background: rgba(71,163,218,0.2);
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: flex;
	-webkit-align-items: center;
	-moz-align-items: center;
	-ms-align-items: center;
    align-items: center;
    text-align: center;
    opacity: 0;
}

.cbp-rfgrid li a:hover div {
	opacity: 1;
}

.cbp-rfgrid li a div h3 {
	width: 100%;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.4em;
	letter-spacing: 2px;
	padding: 0 10px;
}

/* Example for media query: change number of items per row */

@media screen and (max-width: 1200px) {
	.cbp-rfgrid li {
		width: 25%; /* Fallback */
		width: -webkit-calc(100% / 4);
		width: calc(100% / 4);
	}
}

@media screen and (max-width: 1100px) {
	.cbp-rfgrid li {
		width: 33.3333333%; /* Fallback */
		width: -webkit-calc(100% / 3);
		width: calc(100% / 3);
	}
	
	body {
		width: 100%;
		margin: 0 0 0 0;
		min-width: 250px;
	}	
	
	.body_wrapper {
		padding: 0;
	}	
}

@media screen and (max-width: 750px) {
	.cbp-rfgrid li {
		width: 33.3333333%; /* Fallback */
		width: -webkit-calc(100% / 3);
		width: calc(100% / 3);
	}
	
}

@media screen and (max-width: 600px) {
	.cbp-rfgrid li {
		width: 50%; /* Fallback */
		width: -webkit-calc(100% / 2);
		width: calc(100% / 2);
	}
}

@media screen and (max-width: 300px) {
	.cbp-rfgrid li {
		width: 100%; /* Fallback */
	}
}

/* Dieses ist wenn man bei mobile page BROWSER 1-spaltrig möchte !
@media screen and (max-width: 400px) {
	.cbp-rfgrid li {
		width: 100%;
	}
}
*/

@media screen and (max-width: 950px) {
	#ytm_sidebar_wrapper {
		float:left;
		width: 100%;
		display:block;
		margin-top: 20px;		
	}
	#ytm_res_wrapper{
		width: 100%;
	}
	#ytm_res_wrapper_watch{
		width: 100%;
	}		
}

/* ---------------------------------------------------------------- */

/*  ytm css */
.ytm_hide{
	display: none;
}

.ytm_submit_btn {
    height: 2em;
    font-size: 1.5em;
}

.ytm_submit_btn_mobile {
    height: 1.8em;
    font-size: 1.4em;
}

.ytm_input {
    width: 50%;
    height: 1.3em;
    font-size: 1.5em;
    padding: 5px;
}

.ytm_input_mobile {
    width: 50%;
    height: 1.4em;
    font-size: 1.3em;
    padding: 3px;
}

.ytm_input_scroll_top {
    width: 50%;
    height: 1.3em;
    font-size: 1.5em;
    padding: 5px;
}

.ytm_div_fixed_top {
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 999999;
	width: 100%;	
}

.ytm_responsive_img{
	width:100%;
	height:auto;
}

.ytm_maxwh_img{
	max-width: 402px;
	max-height: 302px;
}

.ytm_fs_sm{
	font-size: 0.85em;
}

.ytm_fs_mid{
	font-weight: 800;
	line-height: 18px;
}

.ytm_fs_cat{
	font-size: 1.4em;
	/*word-wrap: break-word;*/
}

.ytm_fs_top{
	font-size: 1.4em;
	/*word-wrap: break-word;*/
}

.ytm_fs_subcat{
	font-size: 1.1em;
	margin-top: 0.3em;
	/*word-wrap: break-word;*/
}

.ytm_fs_big{
	font-size: 1.3em;
}

.ytm_title{
	overflow:hidden;
	position:relative;
	margin-left: 10px;
	margin-right: 10px;
}

.ytm_title_home{
	margin-top: 3px;
	/*max-width: 196px;*/
	position:relative;
}

.ytm_fs_norm_em{
	font-size: 1.0em;
	/*font-weight: bold;*/	
}

.ytm_descr{
	height: 53px;
	position:relative;
}

.ytm_thumb{
	position:relative;
	margin-left: 10px;
	margin-right: 10px;
}

.ytm_margin_title{
   	font-size: 13px;
   	margin-bottom: 1px;
   	max-width:  196px;
	word-wrap: break-word;
}
/* with buttons */
.ytm_res_body{
    /*display: inline-block;*/
    height: 300px;
    width: 100%;
    overflow: hidden;
    position: relative;
}
/* res_body for MOBILE */
.ytm_res_body_mobile{
    /*display: inline-block;*/
    height: 240px;
    width: 100%;
    overflow: hidden;
    position: relative;
}
/* without buttons */
.ytm_res_body_sm{
    display: inline-block;
    height: 250px;
    overflow: hidden;
    position: relative;
}

/* without buttons */
.ytm_res_body_mini{
    display: inline-block;
    height: 200px;
    position: relative;
    width: 196px;
}

/*Bei EDIT sichtbar*/
.ytm_margin_res{  
   	margin-right: 8px; /* tablet mobile result padding, sonst ist das aneinander geklebt*/	
}

.ytm_margin_resright{
   	margin-left: 8px; /* tablet mobile result padding, sonst ist das aneinander geklebt*/	
}

.ytm_centertx{ 
	text-align: center;
}

.ytm_inline{
	display: inline-block;
	width: 100%;
}

.ytm_margin_top {
	margin-top: 10px;
}

.ytm_margin_bottom {
	margin-bottom: 7px;
}

.ytm_margin_top_sm {
	margin-top: 5px;
}

.ytm_margin_top_panels {
	margin-top: 17px;
}

.ytm_pad_top {
	padding-top: 10px;
}

/*unique wegen ajax sel add cat, mit add wegen 2 verschiedenen buttons*/
.ytm_sapad{
	padding: 3px;
}
.ytm_sapad_add{
	padding: 3px;
}

/* Categories Dropdown */
.ytm_dropdown_cat {
    height: 2.3em;
    font-size: 1em;
}

.ytm_adm_pad{
	position:relative;
	padding: 30px;
}

.ytm_adm_dropd_font{
	font-size: 20px;
}

.ytm_adm_padtlr {
	/*position:relative;*/
	padding-top: 0px;
	padding-left: 10px;
	padding-right: 10px;	
}


/* Categories Dropdown */

/* background color bei Error */
.ytm_err_bg{
	background-color: pink;
}

/*in thumb (duration)*/
.ytm_inthumb {
	background-color: black;
	font-weight: 600;
	font-size: 0.7em;
	color: white;
	padding: 0.3rem;
	margin-top: -21px;
	position: absolute;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
    right: 0;
}

.ytm_inthumb_index {
	background-color: black;
	font-weight: 600;
	font-size: 0.7em;
	color: white;
	padding: 0.3rem;
	margin-top: -21px;
	position: absolute;
	display: inline;
	box-decoration-break: clone;
	width: auto;
	right: 0px;
}

.ytm_inthumb_bottom_index {
	background-color: black;
	font-weight: 600;
	font-size: 0.7em;
	color: white;
	padding: 0.3rem;
	bottom: 0px;
	position: absolute;
	display: inline;
	box-decoration-break: clone;
	width: auto;
	right: 0px;
}



.ytm_inthumb_m {
	background-color: black;
	width: 196px;
	font-weight: bold;
	font-size: 10px;
	color: white;
	padding: 0.3rem;
	position: absolute;
	left: 0;
}

.ytm_inthumb2 {
	background-color: black;
	font-weight: bold;
	font-size: 9px;
	color: white;
	padding: 0.2rem;
	position: absolute;
    display: block;	
    bottom: 0;
	position: absolute;
	right: 0;
}

/*ist wichtig für bottomcat indexpage*/
.ytm_inthumb3 {
	background-color: black;
	font-weight: bold;
	font-size: 9px;
	color: white;
	padding: 0.2rem;
	position: absolute;
    display: block;	
    margin-top: 92px;
}

.ytm_home_thumb{
	position: relative;
}

.ytm_transp_bg{
	background: transparent none repeat scroll 0 0;
}

.ytm_results_home{
	float:left;
	width:74%;
	display:block;
}
.ytm_sidebar_home{
	float:right;
	width: 25%;
	display:block;
}

.ytm_overflow{
	overflow: auto;
}

.ytm_bold{
	font-weight: 600;
}

/* Grid 2 */
/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
	text-align:center;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF FOUR  */
.span_4_of_4 {
	width: 100%;
}
.span_3_of_4 {
	width: 74.6%;
}
.span_2_of_4 {
	width: 49.2%;
}
.span_1_of_4 {
	width: 23.8%;
}

@media only screen and (max-width: 700px) {
	.span_1_of_4 {
		width: 48%;
		margin: 1% 0 1% 3.2%;
	}
	
	.span_1_of_4:nth-child(2n+1) {
		clear: both;
		margin-left: 0;
	}
}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 300px) {
	.col {  margin: 1% 0 1% 0%; }
	.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; }
}

/* Grid 2 */

/*Youtube responsive*/
.responsive-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


.responsive-video {
	position: relative;
	padding-bottom: 56.25%; /* Default for 1600x900 videos 16:9 ratio*/
	padding-top: 0px;
	height: 0;
	overflow: hidden;
}


/*Youtube responsive ytm_play.php*/
.responsive_play-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


.responsive_play-video {
	top: 0;
	left: 0;
	padding-bottom: 56.25%; /* Default for 1600x900 videos 16:9 ratio*/
	padding-top: 0px;
	height: 0;
	overflow: hidden;
}


/* LOGO */
.ytm_logo{
	color: white;
	position:absolute;
	z-index:99999;
	padding:8px;
	top: 0px;
	right:0px;
}


/* BROWSER CLOSE WINDOW BUTTON */
.ytm_back{
	position:absolute;
	z-index:99997;
	padding:8px;
	top: 0px;
	left: 0px;
	/*width: 50px; 
	height: 50px;
	background-color: #ffffff;*/
}



/* PLAYER MASK */
.ytm_mask{
	position:absolute;
	z-index:99997;
	padding:0px;
	bottom: 50px;
	right: 0px;
	width: 120px; /*77 33 überdeckt*/ 
	height: 40px;
	margin-right: 6px;
	/*background-color: #ffffff;*/
}


/*related more media watch */
.ytm_rel {
    float: left;
    margin: 0 5px 0 0;
}

.ytm_relimg {
	width: 120px;
	height: 90px;
	float: left;
	margin: 0 5px 0 0;
	position: relative;
}

.ytm_relimgright {
	width: 120px;
	height: 90px;
	float: right;
	margin: 0 0 0 5px;
}

.ytm_bottomcat {
	/*max-width: 196px;
	max-height: 110px;*/
	float: left;
	margin: 0 5px 0 0;
}

.ytm_bottomcatright {
	/*width: 196px;
	height: 110px;*/
	float: right;
	margin: 0 0 0 5px;
}


.ytm_relright {
    float: right;
    margin: 0 0 0 5px;
}

.ytm_fs_link{
	font-size: 1.0em;
	font-weight: bold;
	cursor: pointer;
	word-wrap: break-word;
}


/*  RELMEDIA  title unter thumb */
@media only screen and (max-width: 1100px) {
	.ytm_relimg { 
		width:100%;
		height:auto;		
		margin-bottom: 5px;
	} 
	.ytm_relimgright { 
		width:100%;
		height:auto;		
		margin-bottom: 5px;
	} 	
}
/*  RELMEDIA  title neben thumb */
@media only screen and (max-width: 800px) {
	.ytm_relimg {
		width: 120px;
		height: 90px;
		float: left;
		margin: 0 5px 0 0;
	}
	
	.ytm_relimgright {
		width: 120px;
		height: 90px;
		float: right;
		margin: 0 0 0 5px;
	}	
}
/*  RELMEDIA  title unter thumb */

.ytm_valignc {
	display: flex;
	align-items: center;
}

.ytm_margin_lr{
	margin-left: 6px;
	margin-right: 6px;
}

.ytm_pointer{
	cursor: pointer;
}

/* Bei Input Yt Add*/
.ytm_line_height{
	line-height: 20px;
}
.ytm_width{
	width: 96%;
}

.ytm_width_addbox{
	width: 55%; 
}

.ytm_width100{
	width: 100%;
}

.ytm_fs_textarea{ 
	font-size: 1.1em;
}

/*  SECTIONS  */
.section_add {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col_add {
	display: block;
	float:left;
	margin: 1% 0 1% 0%;
}
.col_add:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF TWO  */
.span_2_of_2 {
	width: 100%;
}
.span_1_of_2 {
	width: 50%;
}

/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 700px) {
	.col_add { 
		margin: 1% 0 1% 0%;
	}
}

@media only screen and (max-width: 700px) {
	.span_2_of_2, .span_1_of_2 { width: 100%; }
}

/* Bei Input Yt Add*/

/*#thumbupid:hover {
  background-color: #ace63c; 
}*/

/*.jwplayer{overflow:visible !important;}
.jw-skin-seven .jw-controlbar{display:block !important;bottom: 0px;}*/


.ytm_del_btn {
	cursor: pointer;
}


.ytm_resbits {
	display: block; width: 100%;
}
.ytm_mbit {
    position: relative;
	width: 100%;
}

.ytm_mbit_bottom{
    position: relative;
	width: 130px;
}


.ytm_imgSet {
	width: 196px;
	height: 110px;
} 

.ytm_imgSet_bottom {
	width: 130px;
	height: 90px;
}

.ytmleft {
	text-align: left;

}

.ytmright {
	text-align: right;

}


.wrapper_bits {
    margin-top: 10px;   
}
.wrapper_bits ul {   
    margin: 0 auto;
    padding: 0;
    /* For IE, the outcast */
    /*display: inline-block;*/
    zoom:1;
}
.wrapper_bits li {
    /*border: 1px solid grey;*/
    display: inline;
}

.wrapbit_marginleft{
	margin-left: 0px;
	margin-right: auto;  	
}

.wrapbit_marginright{
	margin-right: 0px;
	margin-left: auto;  	
}



/*
 * Responsive Thumbnails by DrummerHead
 * http://mcdlr.com/responsive-thumbnails/
 *
 * Released under the MIT license
 * If you like this, find me and buy me a beer
 *
 */


.responsive-thumbnails:before,
.responsive-thumbnails:after {
  content: '';
  display: table;
}
.responsive-thumbnails:after {
  clear: both;
}

.responsive-thumbnails,
.responsive-thumbnails * {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/*
 * Set this class to a `ul` or `ol` element
 */
.responsive-thumbnails {
  display: block;
  list-style-type: none;
  padding: 0;
  border: none;
}

/*
 * Use `li` as a container only, if you set borders or margins to it
 * the calculation will not account for it and will be wrong.
 *
 * If you want to have borders, set them to a child element to the li
 */
.responsive-thumbnails li {
  float: left;
  margin: 0;
  border: none;
}

/*
 * You can remove this if you want. What's important is for
 * the child elements of li to be fluid.
 */
.responsive-thumbnails li * {
  max-width: 100%;
}
.responsive-thumbnails li img {
  display: block;
  width: 100%;
  height: auto;
}

/*Bottom index imgs*/
.responsive-thumbnails_btm img {
  display: block;
  width: 100%; 
  height: auto;
}


.fullScreenVideo {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
	z-index: 99998;
}

/*css fullscreen http://stackoverflow.com/questions/28590661/expand-a-div-to-full-screen*/
#yt_player.fullscreen{
    z-index: 9999; 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    top: 0; 
    left: 0; 
}

/*Smilies Box Comments onclick Show*/
.ytm_box{
	float: left;
	width: 50%;
}


/*relmedia margin*/
.ytm_margin_topbtm_rel{
	margin-top: 15px;
}