/********************************************************************************/
/*                                                                              */
/*                        Spielmannszug Singhofen e.V.                          */
/*                                Website-CSS                                   */
/*                                                                              */
/*                      Farben:     schwarz:   #181818    024, 024, 024         */
/*                                  rot:       #d52e28    213, 046, 040         */
/*                                  gelb:      #f0e720    240, 231, 032         */
/*                                  blau:      #1c4295    028, 066, 149         */
/*                                                                              */
/*                      Schriftfarbe:          #333333    051, 051, 051         */
/*                                                                              */
/*                            Bootstrap-Version 4.3.1                           */
/*                                                                              */
/********************************************************************************/
/* === === ===                Schriftarten & Größe                  === === === */

@font-face {
	font-family: 'Kanit-Regular';
	font-weight: 400;
	src: local('Kanit-Regular'), local('Kanit-Regular'), url('../fonts/Kanit-Regular.ttf') format('truetype');
}

@font-face {
	font-family: 'Kanit-Bold';
	src: local('Kanit-Bold'), local('Kanit-Bold'), url('../fonts/Kanit-Bold.ttf') format('truetype');
}

@font-face {
	font-family: 'MavenPro-Regular';
	font-weight: 400;
	src: local('MavenPro-Regular'), local('MavenPro-Regular'), url('../fonts/MavenPro-Regular.ttf') format('truetype');
}

@font-face {
	font-family: 'MavenPro-Bold';
	src: local('MavenPro-Bold'), local('MavenPro-Bold'), url('../fonts/MavenPro-Bold.ttf') format('truetype');
}

body,
p {
	font-family: 'MavenPro-Regular', sans-serif;
	font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Kanit-Bold', sans-serif;
}

h1 {
	font-weight: bold;
	white-space: nowrap;
}

@media (max-width: 767px) {
	h1 {
		font-size: 2em;
	}

	h2 {
		font-size: 1.75em;
	}

	h3 {
		font-size: 1.5em;
	}

	h4 {
		font-size: 1.25em;
	}

	h5 {
		font-size: 1em;
	}

	h6,
	p {
		font-size: 0.85em;
	}
}

.center {
	text-align: center;
}

.strong,
strong {
	font-weight: 900;
}

.icon-arrow-up {
	font-weight: 900;
}

.figure-caption {
	font-size: 80%;
}

#impressum h4,
#impressum h5 {
	text-align: left;
}

#impressum .table {
	line-height: 1.5em;
	margin: auto 0;
	padding: 0;
}

p,
#kontakt address {
	text-align: justify;
}



/********************************************************************************/
/* === === ===                 Abstände & Größen                    === === === */

@media all {

	html,
	body {
		height: 100%;
	}

	body {
		position: relative;
	}

	.form {
		padding-bottom: 20px;
	}

	.center {
		text-align: center;
	}

	button {
		margin-top: 30px;
	}

	.alert {
		margin-top: 20px;
		display: none;
	}
}

#vorstand .table td {
	width: 20%;
} 




#verein .table th, 
#impressum .table th {
	width: 170px;
}

#termin th {
	width: 165px;
}

.bootom_20 {
	padding-bottom: 20px;
}

.small {
	line-height: 15px;
}

.smallright{
	line-height: 12px;
	text-align: right;
	font-size: 9px;
}

/* Section */
section {
	padding: 150px 0;
}

/* Seitenelemente */
.container {
	height: 100%;
}

.row {
	height: 80%;
}

/* Bilder */

.card-columns {
	-webkit-column-gap: 0;
	-moz-column-gap: 0;
	column-gap: 0;
}

.card-columns .card {
	margin-bottom: -1px;
	border: 0;
}

/********************************************************************************/
/* === === ===                   Hintergründe                       === === === */

@media (min-width: 768px) {
	.start-bg {
		background: url('../grafics/Background_2.jpg') center center fixed no-repeat;
		min-height: 100vh;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		background-size: cover;
		-o-background-size: cover;
	}
	.logo_R-bg {
		background: url('../grafics/Background_3.jpg') center center fixed no-repeat;
		min-height: 100vh;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		background-size: cover;
		-o-background-size: cover;
	}
	.logo_L-bg {
		background: url('../grafics/Background_4.jpg') center center fixed no-repeat;
		min-height: 100vh;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		background-size: cover;
		-o-background-size: cover;
	}
}

@media (max-width: 767px) {
	.start-bg {
		background: url('../grafics/Background_sm.jpg') center center fixed no-repeat;
		min-height: 100vh;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		background-size: cover;
		-o-background-size: cover;
	}
}

.card-body {
	background-image: linear-gradient(90deg, #333 0%, #eee 1%, #eee 99%, #333 100%);
}



/********************************************************************************/
/* === === ===                    Farben                            === === === */

/* Schriftfarben % Effekte */

.text-white {
	color: white;
}

.text-red {
	color: red;
}

.text-shadow-red {
	text-shadow: 0px 0px 1px #d52e28, 0 0 15px #d52e28, 0 0 5px #d52e28;
}

.text-shadow-white {
	text-shadow: 0px 0px 1px white, 0 0 15px white, 0 0 5px white;
}

.text-outline-white {
	letter-spacing: 0.08em;
	text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}

.text-outline-red {
	letter-spacing: 0.08em;
	text-shadow: -2px 0 #d52e28, 0 2px #d52e28, 2px 0 #d52e28, 0 -2px #d52e28;
	color: #eee;
}

.figure-caption,
p,
#kontakt address,
a,
a:visited,
table a,
table a:visited,
address a,
address a:visited,
#datenschutz ul {
	color: #333333;
}

.text-white a,
.nav-item a {
	text-decoration: none;
	color: #FFF;
}

.icon-arrow-up,
.text-red,
a:hover,
table a:hover,
address a:hover {
	text-decoration: none;
	color: #d52e28;
}

a:hover>.icon-arrow-up {
	color: #333333;
}



.headline {
	background-color: rgba(024, 024, 024, 0.7);
	margin: 0 auto;
}


@media (min-width: 768px) {
	.headline {
		width: 60%;
	}
}

@media (max-width: 767px) {
	.headline {
		width: 80%;
	}
}

@media (max-width: 400px) {
	.headline {
		width: 100%;
	}
}

/* Bild Hover */

#bilder img {
	filter: grayscale(60%);
	-webkit-transition: filter 0.3s;
	-o-transition: filter 0.3s;
	transition: filter 0.3s;
}

#bilder img:hover {
	filter: none;
}

/* Horizontale Linie */
hr {
	background-color: #32302E;
	border: solid #32302E 1px;
}

/* Footer */
.bg-black {
	background-image: linear-gradient(0deg, #181818 95%, #d52e28 96%);
}

/* Button */
.btn-outline-primary {
	color: #d52e28;
	background-color: rgba(024, 024, 024, 0.5);
	background-image: none;
	border: 2px solid #d52e28;
}

.btn-outline-primary:hover {
	color: #181818;
	background-color: #d52e28;
	border: 2px solid #181818;
}



/********************************************************************************/
/* === === ===                 Back-to-Top Button                   === === === */

#back-to-top-button {
	display: none;
	position: fixed;
	right: 40px;
	bottom: 70px;
}

/********************************************************************************/
/* === === ===                    Bugfixing                         === === === */

h1,
h2,
h3,
h4,
h5,
h6,
.font-alt,
p,
button,
a {
	filter: blur(0);
}