:root {
  --fade-in-translate-value: -40px;
  --fade-in-animation-time: .75s;
}

::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

.fade-in {
  opacity: 0;
  transform: translateX(var(--fade-in-translate-value));
}

.fade-in--start {
  animation: fade-in var(--fade-in-animation-time);
}

.fade-in--end {
  opacity: 1;
  transform: translate(0);
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateX(var(--fade-in-translate-value));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

::selection {
  background-color: #941b0c;
}

body {
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: white;
  color: #FFFFFF;
  line-height: 1.5;
  font-family: 'Poppins', sans-serif;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

header {
  transition: padding .15s ease, background-color .1s ease-in;
  z-index: 100;
  background-color: #FFFFFF;
}

body:not([data-page="home"]) header {
  background-color: #FFFFFF;
}

.nav-open header {
  background-color: #FFFFFF;
  box-shadow: 0 0 11px 0 rgba(0,0,0,.9);
}

.header-scroll-bg-cover {
  padding: .25rem 1rem !important;
  background-color: #FFFFFF;
  box-shadow: 0 0 11px 0 rgba(0,0,0,.9);
}

#logo {
  transition: transform .15s ease-in;
  /*width: 180px;*/
}

.header-scroll-bg-cover #logo {
  transform: scale(.8);
}

/* mobile nav */
.offcanvas-collapse {
  position: fixed;
  top: 123px;
  bottom: 0;
  right: -300px;
  left: 100%;
  width: 100%;
  padding-top: 25px;
  padding-right: 1rem;
  padding-left: 1rem;
  border: 0!important;
  overflow-y: auto;
  visibility: hidden;
  background-color: #1a1a1a;
  transition-timing-function: ease;
  transition-duration: .125s;
  transition-property: top, left, visibility;
}

.offcanvas-collapse {
  align-items:start;
  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  background-clip: padding-box;
  border-right:5px solid rgba(0, 0, 0, 0.2);
}

.nav-open .offcanvas-collapse {
  left: 0;
  visibility: visible;
}

.nav-link {
  color:  #000000;
  font-weight: bold;
  font-size: 1.2rem;
}

.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
  color: #7f7f7f;
}

.header-scroll-bg-cover .offcanvas-collapse {
  top: 75px;
}

h1 {
  color: #FFFFFF;
  font-family: 'Poppins';
  font-size: 60px;
  font-weight: 500;
  text-align: center;
}

h5 {
  color: #000000;
}

.h5white {
  color: #FFFFFF; !important;
}

.top-spacing {
  margin-top: 110px;
}

.container {
  padding: 100px 0px 100px 0px;
}

#main-container {
  padding-top: 120px;
}

main {
  min-height: 950px;
  font-size: 16px;
  padding-bottom: 100px;
  background-color: #1a1a1a;
}

main a {
  color: #83c441;
}

main a:hover {
  color: #941b0c;
}

#slider {
  background:
    linear-gradient(
      rgba(0, 0, 0, 0.3),
      rgba(0, 0, 0, 0.3)
    ),
    url("../img/slide.jpg");
  background-repeat: no-repeat;
  /* background-attachment: fixed; */
  background-size: cover;
  height: 100vh;
  width: 100%;
}

.nd-clr {
  color: #941b0c;
}

.btn-home {
  font-size: 32px;
  color: #000000;
  background-color: #FFFFFF;
  padding: 20px;
  border-radius: 0;
}

.text-bg-grafik-dark {
    color: #FFFFFF !important;
    background-color: #000000 !important;
}

.text-bg-grafik-light {
    color: #000000 !important;
    background-color: #FFFFFF !important;
    border: 1px #DCDCDC solid;
}

.offer-cards {
  margin-bottom: 170px;
}

.offer-category {
  margin-bottom: 130px;
}

.card-title {
  color: #000000;
}

.btn-offer {
  font-size: 16px;
  color: #000000;
  padding: 5px;
  border: none;
  font-weight: bold;
}

.btn-offer:focus, .btn-offer:hover {
  color: #941b0c;
}

.btn {
  border-radius: 0;
}

.all-main-text {
  font-size: 19px;
}

.welcome-main-text {
  font-size: 80px;
  font-weight: 800;
  text-align: center;
}

.why-we {
  font-size: 55px;
}

.card-text {
  color: #000000;
}

.home-about {
  font-size: 20px;
}

.grafik {
  margin-top: 80px;
  color: #000000;
  background-color: #FFFFFF;
  font-size: 19px;
}

.thead-grafik {
  background-color: #000000;
  color: #FFFFFF;
}

.trener-jpg {
  margin-bottom: 10px;
  transition: 0.2s linear 0s;
}

.trener-jpg:hover {
  opacity: 0.7;
  filter: alpha(opacity=7);
}

.trener {
  text-align: center;
}

.imie-trenera {
  margin-top: 100px;
  font-size: 20px;
  color: #FFFFFF;
  font-weight: 700;
}

.opis-trenera {
  font-size: 14px;
}

.ig-icon {
  width: 22px;
  height: 22px;
}

.in-offer {
  margin:  0;
  padding: 0;
}

.btn-primary {
  background-color: #941b0c;
  border-color: #910528;
}

.btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-primary:visited, .btn-primary:target {
  background-color: #941b0c;
  border-color: #910528;
}

.btn-link {
  color: #FFF;
  text-decoration: none;
  background-color: #000;
}

.btn-link:focus {
  box-shadow: none;
  text-decoration: none;
}

.btn-link:hover {
  color: #83c441;
  text-decoration: none;
}

.brand-rounded-box {
  margin-top: 40px;
  background-color: #83c441;
  color: #FFF;
  border: 5px solid rgba(110, 133, 83, .75);
}

/* początek -- KONTAKT -- początek */

.youtube-icon {
  width: 30px;
  margin-top: 5px;
}

.facebook-icon {
  width: 30px;
}

.social-contact-text {
  font-size: 1rem;
  align-items: center;
  display: flex;
}

footer {
  background-color: #0d0d0d;
  margin-left: auto;
  margin-right: auto;
  min-height: 100px;
  line-height: 85px;
}

a.author-www {
  text-decoration: none;
  color: #941b0c;
  transition: 0.25s linear 0s;
}

a:hover.author-www {
  text-decoration: none;
  color: #ad5045;
}

/*  // Small devices (landscape phones, 576px and up)  */
@media (max-width: 576px) {
  .navbar-nav .nav-link {
    padding-right: 0;
    padding-left: 0;
    font-size: 20px;
    color: #FFFFFF;
    font-weight: 300;
  }

  #slider {
    background-position: top center;
  }

  #logo {
    margin: 0;
    padding: 0;
    width: 110px;
  }

  .container {
    padding: 100px 25px 100px 25px;
  }

  .welcome-main-text {
    font-size: 45px;
    font-weight: 900;
    letter-spacing: 0;
  }

  .all-main-text {
    font-size: 17px;
  }

  .home-about {
    font-size: 18px;
  }

  .why-we {
    font-size: 44px;
  }

  .trener {
    margin-bottom: 15px;
  }

  .table-flex {
    font-size: 13px;
    text-align: left;
  }

  .mobile-offer-m {
    margin-top: 60px;
  }

  .btn-home {
    font-size: 25px;
    padding: 15px;
  }

  .brand-rounded-box {
    padding: 10px 20px 20px 20px;
  }

  h1 {
    font-size: 40px;
    font-weight: 500;
  }

  h2 {
    font-size: 1.5rem;
  }

  .contact-text {
    font-size: 18px;
  }

  footer {
    font-size: 15px;
  }

  .txt-mobile {
    font-size: 10px;
  }
}

/*  // Medium devices (tablets, 768px and up)  */
@media (max-width: 767px) {
  .table-flex {
    display: flex;
  }

  .first-table-flex {
    flex: 1;
  }

  .second-table-flex {
    flex: 1;
  }

  .third-table-flex {
    flex: 1;
  }

  .fourth-table-flex {
    flex: 1;
  }
  
  .txt-mobile {
    font-size: 12px;
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  .navbar-nav .nav-link {
    padding-right: 0;
    padding-left: 10px;
    font-size: 24px;
  }

  .welcome-main-text {
    font-size: 55px;
    letter-spacing: 1px;
  }

  .btn-home {
    font-size: 30px;
    padding: 15px;
  }

  .first-flex-home {
    margin-bottom: 50px;
  }

  .second-flex-home {
    margin-bottom: 50px;
  }

  .third-flex-home {
    margin-bottom: 50px;
  }
}

/*  // Large devices (desktops, 992px and up)  */
@media (min-width: 769px) and (max-width: 1199px) {
  .navbar-nav .nav-link {
    padding-right: 0;
    padding-left: 10px;
    font-size: 26px;
  }

  .welcome-main-text {
    font-size: 55px;
    letter-spacing: 3px;
  }

  .circle-about-text {
    padding: 10px 0 0 30px;
  }
}

/*  // Extra large devices (large desktops, 1200px and up)  */
@media (min-width: 1200px) and (max-width: 1385px) {
  .navbar-expand-xl .navbar-nav .nav-link {
    padding-right: 0;
    padding-left: 0;
    font-size: 14px;
  }

  .welcome-main-text {
    letter-spacing: 3px;
  }
}