/*
 * Created on 11.04.2020
 *
 * View: Mobil
 */

body {
	font-size:0.8em;
	font-family: 'Roboto', sans-serif;
	background-color:  #1b1b1b;
	}
	
*{
	padding: 0;
	margin: 0;
}


header {
	background-image:linear-gradient(180deg, #5d8d8f 0%, #0f4649 100%);
	padding-top: 20px;
	padding-bottom: 0;
	text-align: center;
}

header img {
	max-width: 60%;
	height: auto;
	margin-bottom: -20px;
}

header h1 {
	display: inline-block;
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 500;
	font-size: 3.8em;
	background-color: rgba(255, 255, 255, 0.25);
	backdrop-filter: blur(4px);
	border-radius: 10px;
	padding-top: 1px;
	padding-bottom: 5px;
	padding-left: 15px;
	padding-right: 15px;
	margin-bottom: 20px;
}

div.abobutton {
	padding-top: 15px;
	padding-left: 3%;
	padding-right: 3%;
	padding-bottom: 15px;
	background-color: #0e3a3b;
	text-align: center;
}

main {
	background-color: #424242;
	padding-left: 3%;
	padding-right: 3%;
	padding-top: 30px;
}

article {
	float: left;
	width: 100%;
	padding-left: 3%;
	padding-right: 3%;
	padding-top: 30px;
	padding-bottom: 10px;
	background-color: #353535;
	margin-bottom: 30px;
	box-sizing: border-box;
	border-radius: 10px;
	text-align: center;
}

footer {
	background-color: #212121;
	padding-left: 3%;
	padding-right: 3%;
	padding-top: 30px;
	padding-bottom: 20px;
}


/*
 * --- Styles --- */

 audio {
 	width: 100%;
 	outline: none;
 }

 .article-info-term {
 	display: none;
 }

 header div.nextepisode p{
 	display: inline-block;
 	color: #ca8e5c;
 	border: 3px dashed #ca8e5c;
 	padding-top: 10px;
 	padding-bottom: 10px;
 	padding-left: 20px;
 	padding-right: 20px;
 	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 1.1em;
	margin-bottom: 20px;	
 }

 div.abobutton iframe{
 	border-radius: 10px;
 	box-shadow: 0px 0px 8px #212121;
 }
 
 dd.published {
 	background-color: rgba(255, 255, 255, 0.25);
	backdrop-filter: blur(4px);
 	display: inline-block;
 	color: #fff;
 	padding-top: 8px;
 	padding-bottom: 8px;
 	padding-left: 20px;
 	padding-right: 20px;
 	margin-bottom: 20px;
 }

 article h2{
 	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 500;
	font-size: 1.8em;
	text-transform: uppercase;
 }

 article h3{
 	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 1.6em;
	color: #fff;
	margin-bottom: 15px;
 }

 article p{
 	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 1.2em;
	color: #fff;
	line-height: 1.3;
	margin-bottom: 20px;
 }

 article p.readmore {
 	text-align: center;
 	font-weight: 500;
 	margin-top: 30px;
 	font-size: 1.4em;
 }

 article p.readmore a {
 	display: block;
 	text-decoration: none;
	background-color: #0f4649;
	color: #fff;
	border-radius: 10px;
	padding-top: 8px;
	padding-bottom: 8px;	
	text-align: center;
	box-shadow: 0px 0px 8px #212121;
 }

 footer ul.nav li {
 	list-style-type: none;
 	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	font-size: 1.6em;
	margin-bottom: 10px;
 }

 footer ul.nav li a {
 	display: block;
 	text-decoration: none;
	background-color: #0f4649;
	color: #fff;
	border-radius: 10px;
	padding-top: 8px;
	padding-bottom: 8px;	
	text-align: center;
 }

div.pagination {
	float: left;
	width: 100%;
	text-align: center;
	box-sizing: border-box;
	margin-bottom: 30px;
}

div.pagination li {
	display: inline;
	list-style-type: none;
	padding: 8px;
	box-sizing: border-box;
	background-color: #0f4649;
	border-radius: 10px;
	box-shadow: 0px 0px 8px #212121;
	color: 424242;
	font-size: 1.2em;
}

div.pagination li a{
	text-decoration: none;
	color: #fff;
}

.tooltip {
  position: absolute;
  z-index: 1030;
  display: block;
  font-size: 11px;
  line-height: 1.4;
  opacity: 0;
  filter: alpha(opacity=0);
  visibility: visible;
}

.tooltip.in {
  opacity: 0.8;
  filter: alpha(opacity=80);
}

.tooltip-inner {
  max-width: 200px;
  padding: 8px;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  background-color: #000000;
  border-radius: 4px;
}