/*** Schriftarten ******************************/
@font-face{
	font-family: 'font_content';
	src: url('candara.woff');
	font-weight: normal;
	font-style: normal;
}


/*** Allgemeine Definitionen *******************/
:root{
	--fontsize_header: 18pt;
	--fontsize_content: 15pt;

	--distance_top: 15px;
}

html, body{
	margin: 0;
	padding: 0;

	width: 100%;
	text-align: center;
}

img{
	border: none;
}

#background{
	background: url('pix/sbow.jpg') no-repeat center center;
	background-attachment: fixed;
	background-size: cover;
}


/*** Inhalt Startseite *************************/
#header{
	padding-top: var(--distance_top);

	font-family: 'font_content';
	font-size: var(--fontsize_header);
	color: #777777;
}

#counter{
	padding-top: var(--distance_top);

	font-family: 'font_content';
	font-size: var(--fontsize_content);
	color: #ff0000;
}

#calendar{
	padding-top: var(--distance_top);
}

#divider{
	padding-top: var(--distance_top);
}

#divider img{
	height: 10px;
	width: 100%;
}


/*** Inhalt der Tage (iFrame) ******************/
.animate_calendar_day{
	position: relative;
	animation: animatetop 0.4s;
}

@keyframes animatetop{
	from{top: -100px; opacity:0} to {top: 0; opacity: 1}
}

#calendar_day{
	z-index: 999;
	display: none;
	padding-top: 85px;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: #2e312f;
	background-color: rgba(0, 0, 0, 0.6);
}

#calendar_day_content{
	margin: auto;
	background-color: #2e312f;
	position: relative;
	padding: 0;
	outline: 0;
	width: 600px;
	height: 450px;
}

#calendar_day_content_top{
	position: relative;
	float: left;
	width: 100%;
	height: 400px;
}

#calendar_day_content_top iframe{
	width: 100%;
	height: 100%;

	border: none;
	padding: 0;
	outline: 0;
}

#calendar_day_close{
	position: relative;
	float: right;

	padding: 10px 16px;

	display: flex;
	align-items: center;
	justify-content: center;
}

#calendar_day_close_button{
	padding: 5px;
	border: none;
	text-align: center;
	text-decoration: none;

	font-family: 'font_content';
	font-size: var(--fontsize_content);
	letter-spacing: 0.05em;
	font-weight: bold;
	color: #ffffff;

	background-color: #256d4e;

	cursor: pointer;
}

#calendar_day_close_button:hover, #calendar_day_close_button:focus, #calendar_day_close_button:active{
	background-color: #eb533b;
	box-shadow: 0 0 5px #eb533b;
}


/*** Inhalt der Tage ***************************/
#calendar_day_day_header{
	padding-top: var(--distance_top);

	font-family: 'font_content';
	font-size: var(--fontsize_header);
	color: #ffffff;
}

#calendar_day_day_header img{
	padding-top: 5px;
	height: 40px;
}

#calendar_day_day{
	padding-top: 30px;

	font-family: 'font_content';
	font-size: var(--fontsize_content);
	color: #ffffff;
}

#calendar_day_day img{
	padding-top: 5px;

	width: auto;
	height: 240px;
}