/********************************************************************************/
/*                                                                              */
/*                        Spielmannszug Singhofen e.V.                          */
/*                               Navigation-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         */
/*                                                                              */
/********************************************************************************/
/* === === ===                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');
}

.nav-link {
	font-family: 'Kanit-Regular';
	font-size: 1.05em;
	font-weight: 600;
	white-space: nowrap;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.navbar-collapse {
	font-size: 0.85em;
	font-weight: 600;
}

.dropdown-item {
	font-size: 0.83em;
	line-height: 1.4em;
}

.icon-home {
	font-size: 1.1em;
	font-weight: 600;
}

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

.bg-custom {
	background-image: linear-gradient(180deg, #181818 97%, #d52e28 98%);
}

.bg-trans {
	background-color: transparent;
}

.bg-nav {
	background-color: rgba(024, 024, 024, 0.7);
}

.nav-item {
	background-color: transparent;
}

.dropdown-menu {
	background-color: rgba(024, 024, 024, 0.7);
	width: 160px;
}

.navbar a {
	color: #FFF;
}

.navbar a:hover,
nav-link.active {
	background-color: transparent;
	color: rgba(213, 046, 040, 0.9);
	font-weight: bold;
}

.navbar .dropdown-divider {
	color: white;
	margin: 0 5px;
}

.dropdown-header {
	color: white;
	font-size: 0.75em;
	line-height: 0.8em;
}

/* Toggler-Balken */
.navbar-toggler {
	border-color: #FFF;
}

.navbar-toggler-icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h23M4 15h23M4 23h23'/%3E%3C/svg%3E");
}

.navbar-toggler:hover {
	border-color: rgba(213, 046, 040, 0.9);
}

.navbar-toggler-icon:hover {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(213, 046, 040, 0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h23M4 15h23M4 23h23'/%3E%3C/svg%3E");
}

/********************************************************************************/
/* === === ===                 Logo & Schriftzug                    === === === */

.headerpic {
	max-width: 1200px;
	position: relative;
}

.header_line {
	margin-top: 5px;
	border-top: 2px solid rgba(213, 046, 040, 0.8);
	padding-top: 5px;
}

.img-height {
	max-height: 50px;
	margin: 0 auto;
}

#headerpic {
	display: block;
	margin: 0 auto;
}

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

.navbar {
	padding-top: 5px;
	padding-bottom: 3px;
	line-height: 1.4em;
	top: 0;
	position: relative;
}

#navbar-toggle {
	margin: 0;
	padding: 0;
}

#homeIcon,
#navbarDropdownA,
#navbarDropdownB,
#navbarDropdownC,
#navbarDropdownD {
	padding: 0 20px;
}

.navbar-toggler {
	margin: 0;
	padding: 0;
}

/********************************************************************************/
/* === === ===                       Effekte                        === === === */

.nav-item::after {
	content: '';
	display: block;
	width: 0px;
	height: 2px;
	background: #d52e28;
	transition: 0.2s;
}

.nav-item:hover::after {
	width: 100%;
}

.nav-link {
	transition: 0.2s;
}