/****************************************************************/
/**************** MAIN STYLING GENERAL *************************/
/**************************************************************/

html, body {
	height:100% !important;
	/*background-color:#da2028;*/
	background-color: #787171;
}

.fb-like {
	margin-top:20px;
	margin-bottom:20px;
	display:block;
	width:100%;
}

.g-follow {
	display:block;
	width:100%;
	margin-top:20px;
}

.cite_spinner .content_container .cite_container {
	display:none;
}

#container {
	width:100%;
	height:100%;
	font-family:"Lato", sans-serif;
}

#container header {
	padding:50px;
	width:100%;
	background-color:#da2028;
	box-sizing:border-box;
}

#container #main_content_outer {
	width:100%;
	/*background-color:#787171;*/
	min-height:100%;
	margin-top:-130px;
	padding-top:130px;
	margin-bottom:-92px;
	padding-bottom:92px;
	box-sizing:border-box;
}

#container #main_content_outer #main_content_inner {
	width:100%;
	max-width:1100px;
	margin:auto;
	padding:20px;
	box-sizing:border-box;
}

#main_content_inner::after {
	content:"";
	display:block;
	clear:both;
}

#container footer {
	padding:20px;
	width:100%;
	background-color:#da2028;
	box-sizing: border-box;
}

#container footer::after {
	content:"";
	display:block;
	clear:both;
}

.footer_left {
	float:left;
	line-height:52px;
}

.footer_right {
	float:right;
	text-align:right;
}

.footer_right a {
	text-decoration:none;
}

.footer_right a img {
	width:50px;
	height:50px;
	margin-right:20px;
	border-radius:10px;
}

/*NAVIGATION*/

#header_infos {
	color:#fff;
	font-size:30px;
	font-weight:300;
	width:40%;
	float:left;
}

#container nav {
	margin:auto;
	width:60%;
	float:left;
	min-height:30px;
	text-align:right;
}

#container nav a {
	color:#fff;
	font-size:20px;
	padding:20px;
	text-decoration:none;
	font-weight:300;
	line-height:30px;
	white-space:nowrap;
}

#container nav a:hover {
	background-color:rgba(255,255,255,0.2);
}

#container nav a.active {
	background-color:rgba(255,255,255,0.2);
}

#container header::after {
	content:"";
	display:block;
	clear:both;
}

@media screen and (max-width:1550px) {

	#header_infos {
		font-size:25px;
	}

	#container nav a {
		font-size:15px;
	}

}

@media screen and (max-width:1230px) {

	#header_infos {
		font-size:20px;
		width:100%;
		margin-bottom:20px;
		text-align:center;
	}

	#container nav {
		width:100%;
		font-size:15px;
		text-align:center;
	}

	#container header {
		padding:15px;
	}

}

.read_all {
	padding:20px;
	color:#fff;
	font-size:20px;
	border-radius:5px;
	border:1px solid #ccc;
	box-shadow:0 2px 4px rgba(0,0,0,0.2);
	text-decoration:none;
	background-color:#da2028;
	margin-top:30px;
	display:inline-block;
	box-sizing:border-box;
	width:49%;
	text-align:center;
}

.read_all:first-child,
.read_all:nth-child(2n){
	margin-right:2%;
}

.read_all.video {
	width:100%;
}

/*START CONTENT*/
.start_picture {
	float:left;
	margin-top:30px;
	margin-bottom:30px;
	width:35%;
	height:500px;
	background-image:url('../images/main_picture.png');
	background-size:contain;
	background-repeat: no-repeat;
}

.start_info {
	float:left;
	padding:20px;
	margin-top:30px;
	margin-bottom:30px;
	width:60%;
	box-sizing: border-box;
}

.start_info h1 {
	font-size:25px;
	margin-bottom:20px;
	color:#fff;
}

.start_info p {
	color:#fff;
	font-size:17px;
	font-weight:300;
}

@media screen and (max-width:700px) {

	.start_info {
		width:100%;
		float:none;
		display:inline-block;
	}

	.start_picture {
		float:none;
		display:inline-block;
		margin:auto;
		margin-top:20px;
		width:200px;
		height:300px;
		margin-bottom:0px;
	}

}

/*FOOTER*/

#container footer {
	color:#fff;
	font-weight:300;
}

/************************************************************/
/******************  IMPRESSUM STYLING  **********************/
/**********************************************************/

.impressum h1 {
	font-size:30px;
	color:#fff;
	font-weight:300;
	margin: 40px 0px;
}

.impressum p {
	font-size:17px;
	margin-bottom:15px;
	color:#fff;
	font-weight:300;
}

.impressum p b {
	font-weight:bold;
}

/************************************************************/
/******************  GENERAL STYLING  **********************/
/**********************************************************/

.content_container {
	margin-top:40px;
	width:100%;
}

.cite_container > span {
	color:#fff;
	font-weight:300;
}

.int_box a span{
	color:#444;
}

#container_kommentare,
#container_rezensionen,
#container_interviews,
#container_interviews_rhi {
	display:none;
}

/*********************************************************/
/******************  SWITCHBUTTON  **********************/
/*******************************************************/

#container_switch_button {
	width:100%;
	background-color:#f3f3f3;
	box-sizing:border-box;
	border-radius:5px;
	border:1px solid #ccc;
	text-align:center;
	box-shadow:0 4px 8px rgba(0,0,0,0.2);
}

.cont_switch_btn {
	padding:15px;
	width:25%;
	color:#da2028;
	font-weight:bold;
	text-decoration:none;
	display:inline-block;
	float:left;
	box-sizing:border-box;
	white-space:pre-wrap;
}

@media screen and (max-width:740px) {
	.cont_switch_btn {
		width:50%;
	}

	.dropdown {
		width:50% !important;
	}

	#container nav a {
		padding:10px;
	}

}

@media screen and (max-width:450px) {
	.dropdown {
		font-size:13px;
		line-height:16px;
	}
}

.cont_switch_btn.dropbtn {
	width:100%;
	float:none;
}

#show_qut {
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}

#show_int {
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}

.cont_switch_btn:hover {
	background-color:#ddd;
}

.cont_switch_btn.active,
.cont_switch_btn.active {
	background-color:#ddd;
}

#container_switch_button::after {
	content:"";
	display:block;
	clear:both;
}

/******************************************************************/
/******************  DROPDOWN SWITCHBUTTON  **********************/
/****************************************************************/

/* The container <div> - needed to position the dropdown content */
.dropdown {
	width:25%;
    position: relative;
    display: inline-block;
    word-break: break-all;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f8f8f8;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* Links inside the dropdown */
.dropdown-content a {
    color:#da2028;
    font-weight:bold;
    padding: 10px 20px;
    text-decoration: none;
    display: block;
    text-align:left;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

/********************************************************/
/******************  BLOCKQUOTES  **********************/
/******************************************************/

.cite_container {
	margin-bottom:35px;
	float:left;
	width:100%;
}

.cite_container.komm_cont {
	margin-bottom:20px;
}

.cite_container blockquote {
  background: #f8f8f8;
  border-left: 10px solid #da2028;
  margin: 5px 0 5px 0;
  padding: 0.8em 10px 0em 10px;
  quotes: "\201C""\201D""\2018""\2019";
  box-shadow:0 4px 8px rgba(0,0,0,0.2);
}

.cite_container blockquote::before {
  color: #da2028;
  content: "\201C";
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.1em;
  vertical-align: -0.4em;
}

.cite_container blockquote::after {
  color: #da2028;
  content: "\201D";
  font-size: 4em;
  line-height: 0.1em;
  /*margin-left: 0.1em;*/
  vertical-align: -0.6em;
}

.cite_container blockquote p {
  display: inline;
}

.cite_container span {
	/*font-weight:bold;*/
}

.cite_container a {
	font-weight:300;
	color:#fff;
	text-decoration:none;
	font-size:0.9em;
	margin-left:10px;
}

.cite_container a:hover {
	color:#ccc;
}

/*******************************************************/
/******************  INTERVIEWS  **********************/
/*****************************************************/

.int_box {
	background-color:#f8f8f8;
	border-radius:5px;
	box-shadow: 0 4px 8px rgba(0,0,0,0.2);
	width:100%;
	display:block;
	box-sizing:border-box;
	margin-top:5px;
	margin-bottom:10px;
	overflow:hidden;
	padding:20px;
}

.int_box a {
	display:inline-block;
	word-break: break-line;
	width:100%;
	font-size:1em;
	color:#444;
}

.int_box a.second_link {
	padding-top:0;
}

.int_box a span {
	font-weight:bold;
}

.int_box:hover {
	box-shadow:0 8px 16px rgba(0,0,0,0.2);
}

.int_box a:hover {
		color:#333;
}

.int_box i {
	margin-right:5px;
	color:#da2028;
	font-size:20px;
}


/***************************************************/
/******************  MEDIEN  **********************/
/*************************************************/

.media-image-link {
	text-decoration:none;
	margin:0;
	padding:0;
}

.media-image {
	width:18.5%;
	border-radius:5px;
	margin-right:1%;
	margin-bottom:1%;
	box-sizing:border-box;
	border:1px solid #555;
	box-shadow:0 4px 8px rgba(0,0,0,0.2);
}

@media screen and (max-width:750px) {
	.media-image {
		width:31%;
	}
}

/****************************************************************/
/************************ KOMMENTARBOX *************************/
/**************************************************************/

#online_comments {
	display:inline-block;
	width:100%;
	box-sizing:border-box;
}

#comment_form_holder {
	vertical-align:top;
	display:table;
	border-radius:5px;
	border:1px solid #ccc;
	background-color:#f8f8f8;
	padding:20px;
	margin:auto;
	width:100%;
	max-width:520px;
	box-sizing:border-box;
	margin-bottom:40px;
}

#comment_form input,
#comment_form textarea {
	width:100%;
}

#comment_form textarea {
	height:150px;
	margin-bottom:20px;
}

#comment_form input[type="submit"] {
	padding:10px;
	font-weight:bold;
}

.comment_form_text {
	font-weight:bold;
	margin-bottom:5px;
	display:block;
}

.comment_form_text .form_hint {
	font-size:13px;
}

.form_success {
	font-size:20px;
	padding:10px;
	background-color:#fff;
	border:1px solid #ccc;
	box-shadow:0 2px 4px rgba(0,0,0,0.2);
	border-radius:5px;
	display:none;
}