/**
*	Fonts
**/
@font-face { font-family: OpenSans-Regular; font-display: swap; src: url(../font/OpenSans/OpenSans-Regular.ttf); } 
@font-face { font-family: OpenSans-SemiBold; font-display: swap; src: url(../font/OpenSans/OpenSans-SemiBold.ttf); } 
@font-face { font-family: OpenSans-Medium; font-display: swap; src: url(../font/OpenSans/OpenSans-Medium.ttf); } 
@font-face { font-family: OpenSans_Condensed-Light; font-display: swap; src: url(../font/OpenSans_Condensed/OpenSans_Condensed-Light.ttf); } 

/**
*	Globals
**/
body{
	/*background-color: #d9d9d9;*/
}

/* General, Mobile Sizes */
p{ font-family: OpenSans-Regular, sans-serif; letter-spacing: 0.06em; line-height: 18pt; font-size: 10pt; color: #020925; margin-bottom: 1rem; }
a{ font-family: OpenSans-Regular, sans-serif; letter-spacing: 0.06em; color: #7c7c7c ;  text-decoration: none; }
a:active, a:focus, a:hover { color: #020925; outline: none; text-decoration: underline #d99120;  }
h1{ font-family: OpenSans-SemiBold, sans-serif; letter-spacing: 0.06em; line-height: 22pt; font-size: 16pt; color: #020925;	 }
h2{ font-family: OpenSans-SemiBold, sans-serif; letter-spacing: 0.06em; line-height: 20pt; font-size: 14pt; color: #020925;	 }
h3{ font-family: OpenSans-SemiBold, sans-serif; letter-spacing: 0.06em; line-height: 18pt; font-size: 12pt; color: #020925;	 }
h4{ font-family: OpenSans-SemiBold, sans-serif; letter-spacing: 0.06em; line-height: 12pt; font-size: 10pt; color: #454545; text-transform: uppercase; }

/*Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
	p{ font-family: OpenSans-Regular, sans-serif; letter-spacing: 0.06em; line-height: 18pt; font-size: 12pt; color: #020925; margin-bottom: 1rem; }
	a{ font-family: OpenSans-Regular, sans-serif; letter-spacing: 0.06em; color: #7c7c7c ;}
	h1{ font-family: OpenSans-SemiBold, sans-serif; letter-spacing: 0.06em; line-height: 30pt; font-size: 26pt; color: #020925;	 }
	h2{ font-family: OpenSans-SemiBold, sans-serif; letter-spacing: 0.06em; line-height: 28pt; font-size: 22pt; color: #020925;	 }
	h3{ font-family: OpenSans-SemiBold, sans-serif; letter-spacing: 0.06em; line-height: 24pt; font-size: 18pt; color: #020925;	 }
	h4{ font-family: OpenSans-SemiBold, sans-serif; letter-spacing: 0.06em; line-height: 12pt; font-size: 10pt; color: #454545; text-transform: uppercase; }
}


.text-error{ color: red; }
.font-weight-bold { font-weight: bold;}


/* FLAGS */
.flag-icon {
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
  position: relative;
  display: inline-block;
  width: 1.33333333em;
  line-height: 1em;
}
.flag-icon::before {
  content: '\00a0';
}
.flag-icon-de {
  background-image: url("/assets/images/flags/de.svg");
}
.flag-icon-en {
  background-image: url("/assets/images/flags/en.svg");
}

/**
* CI Colors
**/
.sportainment-orange{ color: #eab650; }
.sportainment-white{ color: #fff; }
.sportainment-grey{ color: #686868; }
.sectionUnderline{ border-bottom: 3px solid #f39200;}
.bg-grey{ background-color: #d5d5d5;}
/**
*	GLOBALS
**/

#btn-back-to-top { position: fixed; width: 50px; height: 50px; z-index: 100; bottom: 50px; right: 20px; display: none; background-color: rgba(234,182,81,0.5); color: #fff; font-weight: 800;}
#btn-back-to-top:focus{ box-shadow: none;}

@media (min-width: 576px) {
	#btn-back-to-top {right: 50px; }
}


/**
*	Navigation
**/
.navbar{ font-family: OpenSans-SemiBold, sans-serif; letter-spacing: 0.06em; box-shadow: 1px 3px 5px 2px rgba(0, 0, 0, 0.05); }
.navbar-brand img{ width: 120px;}
.bg-sportainment-white{ background-color: #fff; }
.nav-link{ color: #d5d5d5 !important; text-transform: uppercase; }
.nav-link.active, .nav-link:hover{ color: #1d2a3b !important; }
.dropdown-menu[data-bs-popper]{ top: 40px !important; }
.dropdown-menu{ border-radius: 0; border-top: none; border-left: none; border-right: none; border-bottom: 3px solid #eab650; padding-top: 0px; padding-bottom: 15px; padding-right:  40px; box-shadow: -15px 1px 5px -15px #ddd, 15px 0 5px -15px #ddd;}
.dropdown-toggle::after{ content: none; }
.dropdown-item{ line-height: 2.0em; color: #020925; }
.nav-item > .show{ outline: none; }
.dropdown-item:hover, .dropdown-item:active, .dropdown-item.active, .dropdown-item:focus{ outline: none; background-color: #fff; color: #1e2125; text-decoration: underline #d99120; }
@media (min-width: 576px) {
	.navbar-brand img{ width: 200px;}
	.dropdown-menu{ border-radius: 0; border-top: none; border-left: none; border-right: none; border-bottom: 3px solid #eab650; padding-top: 50px; padding-bottom: 15px; padding-right:  40px; box-shadow: -15px 1px 5px -15px #ddd, 15px 0 5px -15px #ddd;}
}
/**
*	Carousel
**/
.carousel-caption {  position: absolute; right: 15%; top: 15%; left: 15%; padding-top: 2rem; color: #fff; }
.carousel-caption h1{ font-size: 1.2rem; color: #fff; line-height: 1em; }
.carousel-caption p{ font-size: 0.8rem; color: #fff; }	
/*Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
	.carousel-caption {  position: absolute; right: 15%; top: 15%; left: 15%; color: #fff; }
	.carousel-caption h1{ font-size: 2rem; color: #fff; line-height: 1em; }
	.carousel-caption p{ font-size: 0.8rem; color: #fff; }	
}
/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
	.carousel-caption {  position: absolute; right: 15%; top: 20%; left: 15%; padding-top: 2rem; color: #fff; }
	.carousel-caption h1{ font-size: 2.5rem; color: #fff; line-height: 1em; }
	.carousel-caption p{ font-size: 1.5rem; color: #fff; }	
}
/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
	.carousel-caption {  position: absolute; right: 15%; top: 30%; left: 15%; padding-top: 2rem; color: #fff; }
	.carousel-caption h1{ font-size: 3rem; color: #fff; line-height: 1em; }
	.carousel-caption p{ font-size: 1.5rem; color: #fff; }	
}
/*X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
	.carousel-caption {  position: absolute; right: 15%; top: 30%; left: 15%; padding-top: 2rem; color: #fff; }
	.carousel-caption h1{ font-size: 4rem; color: #fff; line-height: 1em; }
	.carousel-caption p{ font-size: 1.5rem; color: #fff; }
}
/*XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) { 
	.carousel-caption {  position: absolute; right: 15%; top: 30%; left: 15%; padding-top: 2rem; color: #fff; }
	.carousel-caption h1{ font-size: 5rem; color: #fff; line-height: 1em; }
	.carousel-caption p{ font-size: 1.5rem; color: #fff; }
}
/**
*	Tab-Navigation
**/
.nav-tabs { padding-bottom: 20px; border: none; }
.nav-tabs .nav-link, 
.nav-tabs .nav-link.active, 
.nav-tabs .nav-link:focus, 
.nav-tabs .nav-link:hover, 
.nav-tabs .nav-link:active{ padding: 0rem 1rem; border: none !important; }
.nav-tabs .nav-link:hover{ text-decoration: underline #d99120; }
.nav-tabs .language-link{ text-decoration: none !important; }


/**
*	Content-Block
**/
.content-block-link{ display: inline-block; color: #454545 !important; text-decoration: none; }
.content-block-link:hover, .content-block-link:active, .content-block-link:focus{ text-decoration: underline #d99120; }

/**
*	ABOUTSECTION
**/
#aboutsection a{ color: #020925; text-decoration: underline; }
#aboutsection a:hover, #footer-main a:active, #footer-main a:focus{ color: #eab650; text-decoration: underline; }

/**
*	COMPANYSECTION
**/
#companysection .company-headline{  font-size: 1.5em; }
#companysection .company-subline{ font-size: 1em; text-transform: uppercase; line-height: 1em; margin-bottom: 1em; }
#companysection p.data-block{ line-height: 1.5em; margin-bottom: 0px;}
#companysection a{ color: #020925; text-decoration: underline; }
#companysection a:hover, #footer-main a:active, #footer-main a:focus{ color: #eab650; text-decoration: underline; }
/*Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
	#companysection .company-headline{  font-size: 1.8em; }
	#companysection .company-subline{ font-size: 1.5em; text-transform: uppercase; line-height: 1em; margin-bottom: 1em; }
}


/**
*	Footer
**/
footer{ background: #000 url("/assets/images/ci/footer_background.webp"); background-size: cover; }
#footer-main{ }
.footer-paragraph{color: #fff !important; margin-bottom: 1.5rem; line-height: 16pt; font-size: 10pt; }
.footer-headline{ color: #fff !important; font-weight: 600; line-height: 16pt; font-size: 10pt;}
#footer-main a{ color: #fff; text-decoration: underline; }
#footer-main a:hover, #footer-main a:active, #footer-main a:focus{ color: #eab650; text-decoration: underline; }
#footer-sub{ background-color: #d9d9d9; border-top: 5px solid #eab650; font-weight: 600; color: #1d2a3d !important; }
#footer-sub .container .nav .nav-item .nav-link{ font-size: 10pt; padding: .5rem; color: #020925 !important; text-transform: uppercase; }
#footer-sub .container .nav .nav-item .nav-link:hover{ color: #020925 !important; text-decoration: underline #d99120; }
@media (min-width: 576px) {
	#footer-sub .container .nav .nav-item .nav-link{ font-size: 10pt; color: #020925 !important; text-transform: uppercase; }
	#footer-sub .container .nav .nav-item .nav-link:hover{ color: #020925 !important; text-decoration: underline #d99120; }
}

/**
*	Breadcrumbs
**/
.breadcrumb-item a{ font-size: 0.8em; font-family: OpenSans-Regular, sans-serif; letter-spacing: 0em; color: #454545; text-decoration: none; text-transform: uppercase; content: var(--bs-breadcrumb-divider, "/");}
.breadcrumb-item.active a, .breadcrumb-item.active a:active, .breadcrumb-item a:hover { text-decoration: underline #d99120;  }
@media (min-width: 576px) {
	.breadcrumb-item a{ font-size: 1em; font-family: OpenSans-Regular, sans-serif; letter-spacing: 0.06em; color: #454545; text-decoration: none; text-transform: uppercase; content: var(--bs-breadcrumb-divider, "/");}
	.breadcrumb-item.active a, .breadcrumb-item.active a:active, .breadcrumb-item a:hover { text-decoration: underline #d99120;  }
}