/* Styles f�r badges */
.badge {
	/*border:2px solid #fff;*/
	background-color: #000;
	background-image: url(/badge.png);
	background-repeat: no-repeat;
	/*background-size: contain;*/
	background-position: center;
	display: inline-block;
	height: 60px;
	width: 195px;
	margin: 0 0.5rem 0.5rem auto;
	-webkit-border-top-left-radius: 6px;
	-moz-border-radius-topleft: 6px;
	border-top-left-radius: 6px;
	-webkit-border-top-right-radius: 6px;
	-moz-border-radius-topright: 6px;
	border-top-right-radius: 6px;
	-webkit-border-bottom-right-radius: 6px;
	-moz-border-radius-bottomright: 6px;
	border-bottom-right-radius: 6px;
	-webkit-border-bottom-left-radius: 6px;
	-moz-border-radius-bottomleft: 6px;
	border-bottom-left-radius: 6px;
	opacity: 1;
}

.badge-play {
	background-image: url(/badge_play.png);
}
.badge-amazon {
	background-image: url(/badge_amazon.png);
}
.badge-roku {
	background-image: url(/badge_roku.png);
}
.badge-desktop {
	background-color: #5c5c5c;
	background-image: url(/badge_desktop.png);
}		
.badge-huawei {
	background-image: url(/badge_huawei.png) !important;
}
.badge-windows {
	border:1px solid #999;
	background-image: url(/badge_windows2.png) !important;
}
.badge-mac{
	border:1px solid #999;
	background-image: url(/badge_mac.png) !important;
}	
.badge-chromeos{
	border:1px solid #999;
	background-image: url(/badge_chromeos.png) !important;
}	
.badge-other{
	width: 195px;
	font-weight:bold;
	box-shadow:none !important;
	color:#fff;
	-webkit-border-top-left-radius: 6px;
	-moz-border-radius-topleft: 6px;
	border-top-left-radius: 6px;
	-webkit-border-top-right-radius: 6px;
	-moz-border-radius-topright: 6px;
	border-top-right-radius: 6px;
	-webkit-border-bottom-right-radius: 6px;
	-moz-border-radius-bottomright: 6px;
	border-bottom-right-radius: 6px;
	-webkit-border-bottom-left-radius: 6px;
	-moz-border-radius-bottomleft: 6px;
	border-bottom-left-radius: 6px;
	opacity: 1;	
}

/* Styles for tv cast badges */
.cast-edition{
	padding:10px;
}

/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
	visibility: hidden; /* Hidden by default. Visible on click */
	/*min-width: 250px; /* Set a default minimum width */
	width:70%;
	/*margin-left: -140px; /* Divide value of min-width by 2 */
	background-color: #f62459; /* Black background color */
	color: #fff; /* White text color */
	text-align: center; /* Centered text */
	border-radius: 30px; /* Rounded borders */
	/*padding: 10px 20px 10px 20px; /* Padding */
	position: fixed; /* Sit on top of the screen */
	z-index: 11; /* Add a z-index if needed */
	left: 50%; /* Center the snackbar */
	bottom: 10px; /* 30px from the bottom */
	transform: translate(-50%, 0%);  /* centers image/element on "left: 50%" position */
	-webkit-transform: translate(-50%, 0%); /* WebKit */
	-moz-transform: translate(-50%, 0%); /* Mozilla */
	-o-transform: translate(-50%, 0%); /* Opera */
	-ms-transform: translate(-50%, 0%); /* Internet Explorer */	
}

#snackbar.show {
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 1 seconds to fade in and out the snackbar.
  However, delay the fade out process for 5 seconds */
  -webkit-animation: fadein 1s, fadeout 1s 5s;
  animation: fadein 1s, fadeout 1s 5s;
}

/* Styles, die vorher inline in der index.html waren */
#cookieAlert {
	padding: 10px 10px 10px 10px;
	background-color: rgba(0,0,0, 0.8);
	border-radius: 10px;
	color: rgb(255, 255, 255);
}
#cookieAlert .btnCookieAlert {
	margin-top: 10px;
	color: #e91e63;
	font-size:0.9em;
	font-weight: normal;
}
#cookieAlert .btnCookieAlert-primary{
	margin-top: -10px;
	background-color: #e91e63;
	color: white;
	font-weight: bold;
	text-align: center;
	border-radius: 10px;
	padding: 10px;
	float: right;
}
.cookie-alert {
	position: fixed;
	bottom: 0px;
	left: 0px;
	width: auto;
	margin: 0 !important;
	margin-right: 5px;
	z-index: 10;
	opacity: 0;
	transform: translateY(100%);
	transition: all 500ms ease-out;
}
.cookie-alert.show {
	opacity: 1;
	transform: translateY(0%);
	transition-delay: 1000ms;
}
.cookie-alert p {
	font-size:0.9em;
}


/* Styles, die vorher schon in der styles.css genutzt wurden und weiter gebraucht werden */

.icon.icon-other {
  color: #333333;
}

.icon.icon-chromecast {
  color: #00bcd4;
}

.icon.icon-samsung {
  color: #034EA2;
}

.icon.icon-lg {
  color: #e91e63;
}

.icon.icon-roku {
  color: #9c27b0;
}

.icon.icon-firetv {
  color: #ff9800;
}

.icon.icon-sony {
  color: #333333;
}

.icon.icon-playstation {
  color: #003087;
}

.icon.icon-xbox {
  color: #4caf50;
}

.icon.icon-nintendo {
  color: #f44336;
}

.icon.icon-tcl {
  color: #ff0000;
}

.icon.icon-hisense {
  color: #008f78;
}

 

#iframe_tutorials .col-md-6 p{
  margin-top: -8px;
  padding-top: 18px;
  background-image: linear-gradient(180deg,rgba(66, 64, 64, 0.459) 1%, white 25%);
  text-align: center;
  margin-bottom: 60px;
}

#iframe_tutorials .col-md-6 p a{
  color:black;
  text-shadow: 1px 1px 1px white;
}

.video_container { position: relative; }
.video_container img { display: block; }
.video_container .material-icons { position: absolute; bottom:42%; left:42%;}
.video_container i { color:rgba(220, 220, 220); opacity: 0.8; -moz-opacity: 0.8; -khtml-opacity: 0.8; filter: alpha(opacity=80);}
.video_container i:hover { color:rgba(255, 0, 0); opacity: 0.8; -moz-opacity: 0.8; -khtml-opacity: 0.8; filter: alpha(opacity=80);}

.twitter i:hover {
  color: rgb(29,161,242);
}

.facebook i:hover {
  color: rgb(66,103,178);
}

.youtube i:hover{
  background-image:linear-gradient(0deg,red, red, red,black, black);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.instagram i:hover{
  background-image:linear-gradient(170deg,#405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D, #F56040, #F77737, #FCAF45, #FFDC80);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 991px){
  .twitter i {
      color: rgb(29,161,242);
  }
  
  .facebook i{
      color: rgb(66,103,178);
  }
  
  .youtube i{
      background-image:linear-gradient(0deg,red, red, red,black, black);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
  }
  
  .instagram i{
      background-image:linear-gradient(170deg,#405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D, #F56040, #F77737, #FCAF45, #FFDC80);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
  }
}