/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

/* *------------------------------------------------------------------
[Table of contents]

1.  Template default CSS
	1.1	Variables
	1.2	Mixins
	1.3	Flexbox
	1.4	Reset
2.  Helper Css
3.  Header Section
4.  Start Section
5.  Feature Section
6.  Services Section
7.  Trainer Section
8.  Upcoming Events
9.  Footer
10. Other Pages Style

-------------------------------------------------------------------*/

/* Included all fonts because the firefox ad-blocker blocked the google cdn fonts
- ttf downloaded from Google: https://fonts.google.com/specimen/Roboto
- woff2 and woff generated by: https://www.fontsquirrel.com/tools/webfont-generator
- style template from original url: https://fonts.googleapis.com/css?family=Roboto:100,300,300i,400,500,700,900
- still missing styles: ThinItalic, Italic, MediumItalic, BoldItalic, BlackItalic
*/

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: local('Roboto Thin'), local('Roboto-Thin'), url('../fonts/roboto-thin-webfont.woff2') format('woff2'),
    url('../fonts/roboto-thin-webfont.woff') format('woff'), url('../fonts/Roboto-Thin.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: local('Roboto Light Italic'), local('Roboto-LightItalic'),
    url('../fonts/roboto-lightitalic-webfont.woff2') format('woff2'),
    url('../fonts/roboto-lightitalic-webfont.woff') format('woff'),
    url('../fonts/Roboto-LightItalic.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url('../fonts/roboto-light-webfont.woff2') format('woff2'),
    url('../fonts/roboto-light-webfont.woff') format('woff'), url('../fonts/Roboto-Light.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url('../fonts/roboto-regular-webfont.woff2') format('woff2'),
    url('../fonts/roboto-regular-webfont.woff') format('woff'), url('../fonts/Roboto-Regular.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url('../fonts/roboto-medium-webfont.woff2') format('woff2'),
    url('../fonts/roboto-medium-webfont.woff') format('woff'), url('../fonts/Roboto-Medium.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url('../fonts/roboto-bold-webfont.woff2') format('woff2'),
    url('../fonts/roboto-bold-webfont.woff') format('woff'), url('../fonts/Roboto-Bold.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  src: local('Roboto Black'), local('Roboto-Black'), url('../fonts/roboto-black-webfont.woff2') format('woff2'),
    url('../fonts/roboto-black-webfont.woff') format('woff'), url('../fonts/Roboto-Black.ttf') format('truetype');
  font-display: swap;
}

/*----------------------------------------*/
/* Default CSS
/*----------------------------------------*/

html,
body {
  height: 100%;
  font-family: 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  background: none;
}

h5 {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

article,
li,
p {
  color: #5e5e5e;
  line-height: 1.8;
  font-size: 0.9rem;
}
@media only screen and (max-width: 479px) {
  article,
  li,
  p {
    font-size: 0.8rem;
  }
}

/*
to prevent layout shifts after loading the images
https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/
- width and height must be set in the <img> tag
-> can probably removed in future, if this CSS is included in the browser stylesheet
*/
img {
  max-width: 100%;
  height: auto;
  aspect-ratio: attr(width) / attr(height);
}

input:focus,
select:focus,
button:focus,
textarea:focus {
  outline: none;
}

a {
  color: #5e5e5e;
  text-decoration: underline;
}
a:hover,
a:focus {
  text-decoration: none;
  outline: none;
  color: #a5211d;
}

/*---------------------
  Helper CSS
-----------------------*/

.section-title {
  margin-bottom: 84px;
}

.section-title span {
  color: #a5211d;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 6px;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: block;
}

.section-title h2 {
  font-weight: 700;
  letter-spacing: 6px;
  text-transform: uppercase;
}

@media only screen and (max-width: 767px) {
  .section-title h2 {
    font-size: 2.5rem;
  }
}

@media only screen and (max-width: 479px) {
  .section-title h2 {
    font-size: 2rem;
  }
}

.set-bg {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}

.spad {
  padding-top: 120px;
  padding-bottom: 90px;
}

.dark-bg {
  background-color: rgb(51, 51, 51);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media only screen and (max-width: 767px) {
  .spad {
    padding-top: 80px;
    padding-bottom: 70px;
  }
}

.spad-2 {
  padding-top: 50px;
  padding-bottom: 20px;
}

.spad-3 {
  padding-top: 96px;
  padding-bottom: 90px;
}

/* actually in bootstrap, but useful for inheriting to all child elements */
.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white li,
.text-white a,
.text-white span,
.text-white div,
.text-white article {
  color: #fff;
}

.modal header .close {
  color: #a5211d;
}

/* buttons */

.primary-btn {
  display: inline-block;
  font-weight: 700;
  padding: 20px 45px;
  color: #fff;
  background: #a5211d;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  text-decoration: none;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .primary-btn {
    padding: 20px 41px;
  }
}

#probetrButton {
  position: fixed;
  bottom: 1vw;
  right: 1vw;
  z-index: 900;
}

#newOpenButton {
  position: fixed;
  bottom: calc(1vw + 80px);
  right: 1vw;
  z-index: 900;
}

/*---------------------
  Header Navigation
-----------------------*/

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 1);
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar .navbar-brand {
    min-width: 60px;
  }
  .navbar .navbar-nav .nav-link {
    font-size: 0.8rem;
  }
}

@media only screen and (max-width: 767px) {
  .navbar .navbar-brand {
    min-width: 45px;
  }
}

/*---------------------
  Start Slider
-----------------------*/

/* .start-slider {
  height: 100vh;
} */
.start-slider .single-slide {
  height: 100vh;
  padding-top: 25vh;
  text-align: center;
}

.single-slide h3 {
  color: #fff;
  text-shadow: -1px -1px 0 rgba(128, 128, 128, 0.5), 1px -1px 0 rgba(128, 128, 128, 0.5),
    -1px 1px 0 rgba(128, 128, 128, 0.5), 1px 1px 0 rgba(128, 128, 128, 0.5);
  font-size: 4rem;
  font-weight: 400;
  opacity: 0;
  margin-bottom: 40px;
}

.single-slide h1 {
  color: #fff;
  /* rand um text */
  text-shadow: -1px -1px 0 rgba(128, 128, 128, 1), 1px -1px 0 rgba(128, 128, 128, 1), -1px 1px 0 rgba(128, 128, 128, 1),
    1px 1px 0 rgba(128, 128, 128, 1);
  font-size: 6rem;
  font-weight: 500;
  opacity: 0;
  margin-bottom: 40px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .single-slide h3 {
    font-size: 3rem;
  }
  .single-slide h1 {
    font-size: 5.2rem;
  }
  .start-slider .single-slide {
    height: 85vh;
    padding-top: 20vh;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .single-slide h3 {
    font-size: 2.8rem;
  }
  .single-slide h1 {
    font-size: 4rem;
  }
  .start-slider .single-slide {
    height: 70vh;
    padding-top: 18vh;
  }
}

@media only screen and (min-width: 361px) and (max-width: 575px) {
  .single-slide h3 {
    font-size: 2.1rem;
  }
  .single-slide h1 {
    font-size: 2.7rem;
  }
  .start-slider .single-slide {
    height: 65vh;
    padding-top: 15vh;
    box-shadow: 0 0px 5px lightgray;
  }
}

/* actually should be 360px, but because of shuga's head in the 2nd pic extended to 450px */
@media only screen and (max-width: 360px) {
  .single-slide h3 {
    font-size: 1.5rem;
  }
  .single-slide h1 {
    font-size: 2rem;
  }
  .start-slider .single-slide {
    height: 40vh;
    padding-top: 10vh;
  }
}

.start-slider .tns-outer {
  position: relative;
}

/* every element inside with aria or data-action */
.start-slider .tns-outer [aria-controls],
.start-slider .tns-outer [data-action] {
  cursor: pointer;
}

.start-slider .tns-nav {
  position: absolute;
  bottom: 30px;
  width: 100%;
  text-align: center;
}

.start-slider .tns-nav > button {
  width: 10px;
  height: 10px;
  padding: 0;
  margin: 0 11px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  position: relative;
}

/* circle around nav dots */
.start-slider .tns-nav > .tns-nav-active::after {
  position: absolute;
  border: 3px solid #fff;
  left: -10px;
  top: -10px;
  height: 30px;
  width: 30px;
  content: '';
  border-radius: 50%;
}

.start-slide-items .tns-slide-active .play-btn,
.start-slide-items .tns-slide-active .primary-btn,
.start-slide-items .tns-slide-active h3,
.start-slide-items .tns-slide-active h1 {
  opacity: 1;
}

.start-slide-items .tns-slide-active h3 {
  -webkit-transition: all 0.5s ease 0.2s;
  -o-transition: all 0.5s ease 0.2s;
  transition: all 0.5s ease 0.2s;
}

.start-slide-items .tns-slide-active h1 {
  -webkit-transition: all 0.5s ease 0.4s;
  -o-transition: all 0.5s ease 0.4s;
  transition: all 0.5s ease 0.4s;
}

/* .start-slide-items .tns-slide-active .primary-btn {
	-webkit-transition: all 0.5s ease 0.4s;
	transition: all 0.5s ease 0.6s;
} */

/*---------------------
  About Us
-----------------------*/

.single-features .features-img img {
  min-width: 100%;
}

.single-features .feature-text {
  padding-left: 15px;
  padding-right: 15px;
  text-align: center;
}

.single-features .feature-text .feature-icon {
  display: inline-block;
  height: 88px;
  width: 88px;
  background: #a5211d;
  border-radius: 50%;
  line-height: 83px;
  margin-bottom: 40px;
  margin-top: -34px;
  /* for stacking */
  position: relative;
}
.single-features .feature-text .feature-icon img {
  height: 50px;
  width: 50px;
}

.single-features .feature-text h5 {
  color: #353535;
  margin-bottom: 22px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .features-section .single-features {
    text-align: center;
    margin-bottom: 50px;
  }
  .features-section.spad {
    padding-bottom: 40px;
  }
}

@media only screen and (max-width: 767px) {
  .features-section .single-features {
    text-align: center;
    margin-bottom: 50px;
  }
  .features-section.spad {
    padding-bottom: 40px;
  }
}

/* responsive Youtube Video
https://techstacker.com/how-to-responsive-youtube-videos/ */
.youtube-video-container {
  position: relative;
  overflow: hidden;
}

.youtube-video-container::after {
  display: block;
  content: '';
  padding-top: 56.25%;
}

#fightzoneVideoAboutUs {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*---------------------
  Services
-----------------------*/

.services-section {
  padding-bottom: 100px;
}

.single-service {
  text-align: center;
}

.single-service img {
  margin-bottom: 50px;
}

.single-service h5 {
  margin-bottom: 22px;
}

.single-service p {
  opacity: 0.8;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .services-section .section-title {
    margin-bottom: 60px;
  }
  .services-section .single-service {
    margin-bottom: 50px;
  }
}

@media only screen and (max-width: 767px) {
  .services-section .section-title {
    margin-bottom: 60px;
  }
  .services-section .single-service {
    margin-bottom: 50px;
  }
}

@media only screen and (max-width: 479px) {
  .services-section .single-service h5 {
    font-size: 0.8rem;
  }
}

/*
Timetable
*/

.timetable {
  overflow: hidden;
}

.timetable_filtering ul {
  list-style: none;
  margin-bottom: 0px;
  /* color: #5e5e5e; */
}
.timetable_filtering ul li {
  position: relative;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  margin-bottom: 20px;
}
.timetable_filtering ul li:not(:last-of-type) {
  margin-right: 59px;
}
.timetable_filtering ul li.active,
.timetable_filtering ul li:hover {
  color: #a5211d;
}
.timetable_filtering ul li.active::after {
  display: block;
  position: absolute;
  left: -5px;
  bottom: -8px;
  width: calc(100% + 10px);
  height: 2px;
  background: #a5211d;
  content: '';
}
.timetable_container {
  position: relative;
  width: calc(100% + 60px);
  left: -30px;
}
.tt_title {
  width: 100%;
  height: 46px;
  background: #a5211d;
  text-align: center;
  line-height: 46px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #ffffff;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.tt_class {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  height: 100px;
  background: #4d79c2;
  /* background: rgb(174, 184, 228); */
}
.tt_class:not(:last-child) {
  margin-bottom: 0.5rem;
}
.tt_class.halfhour {
  /* für richtiges verhältnis hätte das 40px sein müssen, aber zu klein. */
  height: 50px !important;
}
.tt_class.hour {
  height: 75px !important;
}
.tt_class.hour2 {
  /* Fridays is no half hour training.
	to have a smooth layout, we need a little more pixel*/
  height: 80px !important;
}
.tt_class.onehalfhour {
  height: 100px !important;
}
.tt_class.onehalfhour2 {
  /* Fridays is no half hour training.
	to have a smooth layout, we need a little more pixel*/
  height: 120px !important;
}
.tt_class.empty {
  background: #c5c5c5;
}
.tt_class_title {
  font-size: 1rem;
  font-weight: 500;
  /* color: #262626; */
  color: #fff;
  line-height: 1.1;
  max-width: 90%;
  text-align: center;
  margin-bottom: 0.5rem;
}
.tt_class_time {
  font-size: 1.2rem;
  font-weight: 600;
  color: #c5c5c5;
  line-height: 0.75;
}

.training_hint {
  border: 2px solid #e5e7f3;
  margin-top: 1rem;
}

@media only screen and (max-width: 1199px) {
  .timetable_filtering ul li:not(:last-of-type) {
    margin-right: 1.9rem;
  }
  .tt_title {
    font-size: 0.8rem;
  }
  .tt_class_title {
    font-size: 0.8rem;
  }
  .tt_class_time {
    font-size: 1rem;
  }
  .timetable_filtering ul li {
    font-size: 0.9rem;
  }
}
@media only screen and (max-width: 991px) {
  .tt_class_title {
    font-size: 0.7rem;
  }
}
@media only screen and (max-width: 767px) {
  .tt_title {
    margin-bottom: 8px;
  }
}
@media only screen and (max-width: 575px) {
  .timetable_container {
    position: static;
    width: 100%;
  }
}
@media only screen and (max-width: 450px) {
  .tt_title {
    font-size: 0.8rem;
  }
  .tt_class_title {
    font-size: 0.6rem;
  }
  .tt_class_time {
    font-size: 0.8rem;
  }
  .timetable_filtering ul li {
    font-size: 0.9rem;
  }
  .timetable_filtering ul li:not(:last-of-type) {
    margin-right: 1.5rem;
  }
}

/*---------------------
  Trainer
-----------------------*/

.trainer-section .section-title span {
  color: #fff;
}

.trainer-img {
  overflow: hidden;
}

.trainer-img img {
  /* width: 100%; */
  -webkit-transform-origin: 50% 5%;
  -ms-transform-origin: 50% 5%;
  transform-origin: 50% 5%;
  -webkit-transition: -webkit-transform 1s ease;
  transition: -webkit-transform 1s ease;
  -o-transition: transform 1s ease;
  transition: transform 1s ease;
  transition: transform 1s ease, -webkit-transform 1s ease;
}

.trainer-img:hover img {
  -webkit-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
}

.trainer-text {
  text-align: center;
  padding-top: 48px;
}

.trainer-text .mehrAnzeigen {
  letter-spacing: 1.5px;
  font-variant: small-caps;
}

.trainer-text p,
.trainer-text ul,
.trainer-text li {
  opacity: 0.8;
}
.trainer-text ul {
  text-align: left;
  margin-left: 20px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .trainer-section {
    padding-bottom: 45px;
  }
  .single-trainer {
    text-align: center;
    margin-bottom: 50px;
  }
}

@media only screen and (max-width: 767px) {
  .trainer-section .section-title .trainer-btn {
    position: relative;
    margin-top: 50px;
    text-align: center;
  }
  .trainer-section .section-title {
    position: relative;
  }
  .trainer-section {
    padding-bottom: 45px;
  }
  .single-trainer {
    text-align: center;
    margin-bottom: 50px;
  }
}

/*---------------------
Mitgliedschaft
-----------------------*/
#membership header div {
  font-weight: 900;
  letter-spacing: 4px;
  text-transform: uppercase;
}

.mitglied header h5 {
  display: inline-block;
}

.mitglied {
  border: 2px solid #a5211d;
  height: 100%;
}

.mitglied:not(header),
.mitglied li {
  color: #7b7b7b;
}

.mitglied ul {
  margin-left: 0;
  padding-left: 15px;
}

.mitglied li {
  padding-left: 10px;
  margin-bottom: 10px;
}

.mitglied table caption {
  caption-side: top;
  font-weight: 600;
}

.mitglied footer {
  opacity: 0.7;
  letter-spacing: 1.2px;
  font-size: 0.8rem;
}

.privatstunde {
  height: 100%;
}

.privatstunde header div {
  color: #a5211d;
}

/*---------------------
  Contact
-----------------------*/

.contact-section {
  position: relative;
}
.contact-info {
  position: relative;
  z-index: 5;
}

.map {
  /* https://getbootstrap.com/docs/5.1/getting-started/introduction/#box-sizing */
  box-sizing: content-box;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 35%;
  background: #ccc;
  z-index: 1;
}

.map iframe {
  height: 100%;
  width: 100%;
}

@media only screen and (max-width: 991px) {
  .map {
    position: relative;
    margin-bottom: 50px;
    height: 300px;
    width: 100%;
  }
}

.contact-section .modalTriggerLink {
  font-weight: 700;
  font-style: italic;
  font-variant: small-caps;
  text-decoration: underline;
  cursor: pointer;
}

.contact-section .contact-details .address li {
  list-style: none;
  letter-spacing: 1.5px;
}

.contact-section .social-links a {
  display: inline-block;
  margin-right: 10px;
  padding: 2px;
}

.contact-section .primary-btn {
  background: #000;
  opacity: 0.7;
}

/*---------------------
  Friends
-----------------------*/

.friends-section article {
  overflow-wrap: break-word;
}

@media only screen and (max-width: 576px) {
  .friends-section article h6 {
    font-size: 0.9rem;
  }

  .friends-section article p {
    font-size: 0.8rem;
  }
}

/*---------------------
  Footer
-----------------------*/

.footer-section {
  min-height: 641px;
  padding-top: 239px;
}

.footer-content {
  text-align: center;
}

.footer-content .footer-menu ul li {
  list-style: none;
  display: inline-block;
  margin-right: 2rem;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.footer-content .footer-menu ul li:last-child {
  margin-right: 0;
}

.footer-content .social-links a {
  margin-right: 4rem;
}

.footer-content .social-links a:last-child {
  margin-right: 0;
}

@media only screen and (max-width: 767px) {
  .footer-content .footer-menu ul li {
    margin-right: 0.7rem;
  }
  .footer-content .social-links a {
    margin-right: 2rem;
  }
  .footer-content .copyright {
    margin-bottom: 6rem;
  }
}
/*---------------------
 Pop Up
-----------------------*/
#popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  background-color: #a5211d;
  font-weight: 700;
  padding: 25px 45px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  z-index: 999;
  text-align: center;

  p {
    color: white;
    font-size: 1.5rem;
  }

  #closeBtn {
    position: absolute;
    top: -2px;
    right: 5px;
    background: none;
    border: none;
    font-size: 25px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    /* opacity: 0; */
    transition: opacity 0.5s ease;
  }
}

/*---------------------
 Impressum
-----------------------*/

#impressum a:hover,
#impressum a:focus {
  text-decoration: none;
  outline: none;
  color: #a5211d;
}