@charset "UTF-8";
@font-face {
  font-family: Handelson-Two;
  src: url("../fonts/Handelson-Two.otf");
}

*, *::after, *::before {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  position: relative;
  font-family: 'Raleway', sans-serif;
  background-color: #333;
  background-image: url("../img/WG_BG_tlo.jpg");
}

h2 {
  text-transform: uppercase;
  color: #ffffff;
  text-align: center;
}

.scroll-fix::before {
  content: '';
  display: block;
  height: 93px;
  margin-top: -93px;
}

.wrapper {
  max-width: 2560px;
  width: 80%;
  margin: 0 auto;
}

.jumbotron {
  margin: 0;
}

.underline {
  margin: 0 auto 40px;
  width: 60px;
  height: 4px;
  background-color: #000;
}

header {
  color: #ffffff;
  overflow: hidden;
}

header .hero-img {
  position: relative;
  height: 100vh;
  background-image: url("../img/Header_WilczaGawra.jpg");
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  z-index: 0;
}

header .hero-shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: -10;
}

header .hero-text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: center;
  padding: 10px;
}

header .hero-text p {
  padding: 10px;
}

header .btn-outline-light {
  text-transform: uppercase;
}

header .fa-caret-down {
  display: none;
}

header .alert {
  background-color: rgba(0, 0, 0, 0.7);
}

header .homeFWW {
  font-family: Handelson-Two;
  font-size: 50px;
}

header .homeGodslayer {
  font-family: Handelson-Two;
  font-size: 50px;
}

nav {
  background-color: rgba(0, 0, 0, 0.95);
  text-transform: uppercase;
  -webkit-transition: background-color .6s;
  transition: background-color .6s;
  font-weight: bold;
  text-shadow: 0 0 2px #348;
}

nav a, nav i {
  color: #0c7915;
  -webkit-transition: color .3s;
  transition: color .3s;
}

nav a:hover {
  color: #a32121d8;
}

nav i {
  padding: 10px;
}

nav .active {
  color: #a32121d8;
}

.shadow-bg {
  background-color: rgba(78, 95, 79, 0.95);
  text-shadow: 0 0 2px #345;
}

.shadow-bg a, .shadow-bg i {
  color: #000000;
}

.shadow-bg a:hover {
  color: #3c80c4;
}

.shadow-bg i {
  padding: 10px;
}

.shadow-bg .nawbar-brand {
  font-weight: bold;
}

.shadow-bg .active {
  color: #3c80c4;
}

#welcome .jumbotron {
  position: relative;
  background-image: url("../img/welcome.jpg");
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  z-index: 0;
}

#welcome .welcome-shadow {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -10;
}

#welcome p {
  color: #fff;
}

#welcome i {
  padding: 10px;
  font-size: 34px;
}

#welcome .wrapper {
  padding: 10px;
}

#welcome .wrapper .cards .card {
  position: relative;
  margin: 10px;
  width: auto;
  height: 360px;
  text-align: center;
  background-position: center;
  background-size: cover;
  border-radius: 15px;
  -webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.7);
          box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

#welcome .wrapper .cards .card button {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 10px;
  background: none;
  border: none;
  color: #127c17;
  font-size: 36px;
  text-shadow: 2px 2px 5px black;
  cursor: crosshair;
  z-index: 10;
}

#welcome .wrapper .cards .card button:hover ~ .text {
  -webkit-clip-path: polygon(58% 10%, 0 0, 25% 13%, 0 14%, 0 26%, 23% 6%, 100% 20%, 0 40%, 0 41%, 11% 39%, 67% 0, 88% 0, 100% 45%, 100% 100%, 0 100%, 12% 0, 43% 0, 56% 0);
          clip-path: polygon(58% 10%, 0 0, 25% 13%, 0 14%, 0 26%, 23% 6%, 100% 20%, 0 40%, 0 41%, 11% 39%, 67% 0, 88% 0, 100% 45%, 100% 100%, 0 100%, 12% 0, 43% 0, 56% 0);
}

#welcome .wrapper .cards .card .text {
  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: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 50px 30px;
  background-color: rgba(0, 0, 0, 0.85);
  color: #ffffff;
  -webkit-clip-path: polygon(53% 0, 0 0, 0% 0%, 0 0%, 0 0%, 1% 1%, 1% 0%, 0 0%, 0 0%, 1% 0%, 1% 4%, 0 6%, 1% 0%, 1% 10%, 0 10%, 29% 0, 43% 0, 65% 0);
          clip-path: polygon(53% 0, 0 0, 0% 0%, 0 0%, 0 0%, 1% 1%, 1% 0%, 0 0%, 0 0%, 1% 0%, 1% 4%, 0 6%, 1% 0%, 1% 10%, 0 10%, 29% 0, 43% 0, 65% 0);
  -webkit-transition: -webkit-clip-path .8s;
  transition: -webkit-clip-path .8s;
  transition: clip-path .8s;
  transition: clip-path .8s, -webkit-clip-path .8s;
}

#welcome .wrapper .cards .card h1 {
  color: sandybrown;
}

#welcome .wrapper .cards .card h2 {
  margin-bottom: 30px;
  color: slategray;
}

#welcome .wrapper .cards .one {
  background-image: url("../img/Gramy.jpg");
}

#welcome .wrapper .cards .two {
  background-image: url("../img/Tworzymy.jpg");
}

#welcome .wrapper .cards .three {
  background-image: url("../img/Praca.jpg");
}

#welcome .wrapper .cards .card-footer {
  position: relative;
  top: 300px;
  margin: 5px;
  height: 50px;
  width: auto;
  text-align: center;
  background-position: center;
  background-size: cover;
  background-color: black;
  border-radius: 10px;
  -webkit-box-shadow: 5px 5px 5px #8bc548b3;
          box-shadow: 5px 5px 5px #8bc548b3;
  z-index: 20;
}

#welcome .wrapper .cards h3 {
  text-transform: uppercase;
  text-align: center;
}

#welcome .wrapper .cardsMobile .card {
  position: relative;
  margin: 1px;
  width: 360px;
  height: 360px;
  text-align: center;
  background-position: center;
  background-size: cover;
  border-radius: 15px;
  -webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.7);
          box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

#welcome .wrapper .cardsMobile .card button {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 10px;
  background: none;
  border: none;
  color: #127c17;
  font-size: 36px;
  text-shadow: 2px 2px 5px black;
  cursor: crosshair;
  z-index: 10;
}

#welcome .wrapper .cardsMobile .card button:hover ~ .text {
  -webkit-clip-path: inset(3% 2% 3% 2%);
          clip-path: inset(3% 2% 3% 2%);
}

#welcome .wrapper .cardsMobile .card .text {
  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: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 50px 30px;
  background-color: rgba(0, 0, 0, 0.85);
  color: #ffffff;
  -webkit-clip-path: inset(100% 100% 0% 0%);
          clip-path: inset(100% 100% 0% 0%);
  -webkit-transition: -webkit-clip-path .8s;
  transition: -webkit-clip-path .8s;
  transition: clip-path .8s;
  transition: clip-path .8s, -webkit-clip-path .8s;
}

#welcome .wrapper .cardsMobile .card h1 {
  color: sandybrown;
}

#welcome .wrapper .cardsMobile .card h2 {
  margin-bottom: 30px;
  color: slategray;
}

#welcome .wrapper .cardsMobile .one {
  background-image: url("../img/Gramy.jpg");
}

#welcome .wrapper .cardsMobile .two {
  background-image: url("../img/Tworzymy.jpg");
}

#welcome .wrapper .cardsMobile .three {
  background-image: url("../img/Praca.jpg");
}

#welcome .wrapper .cardsMobile .card-footer {
  position: absolute;
  top: 300px;
  height: auto;
  width: 100%;
  text-align: center;
  background-position: center;
  background-size: cover;
  background-color: #f2f3edd8;
  border-radius: 10px;
  -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.7);
          box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.7);
}

#welcome .wrapper .cardsMobile h3 {
  text-transform: uppercase;
}

.carousel-item a:hover {
  opacity: .6;
}

#ItWilczaGawra .jumbotron {
  background-image: url("../img/ItWilczaGawra_tło.png");
}

#Gry .jumbotron {
  background-image: url("../img/WG_BG_tlo.jpg");
}

#Gry .underline {
  background-color: #999;
}

#historiaFWW h4 {
  border-radius: 5px;
  background-color: #fee;
  color: #972828;
}

#historiaFWW .jumbotron {
  position: relative;
  background-image: url("../img/Figurki.jpg");
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  z-index: 0;
}

#historiaFWW .welcome-shadow {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: -10;
}

#historiaFWW p {
  color: #fff;
}

#historiaFWW i {
  padding: 10px;
  font-size: 34px;
}

#historiaFWW .wrapper {
  padding: 10px;
}

#zasadyGry .jumbotron {
  position: relative;
  background-image: url("../img/Bitwa1.jpg");
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
  z-index: 0;
}

#zasadyGry .zasadyGry-shadow {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(78, 153, 238, 0.767);
  z-index: -10;
}

#zasadyGry h4 {
  font-family: Handelson-Two;
  color: #972828;
}

#zasadyGry h2 {
  color: #972828;
}

#zasadyGry h3 {
  text-transform: uppercase;
  color: #972828;
  text-align: center;
}

#zasadyGry a {
  color: #e7e41a;
  font-weight: bold;
}

#zasadyGry .kartaGry {
  border-radius: 10px;
  -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.7);
          box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.7);
}

#historiaGodslayer h4 {
  border-radius: 5px;
  background-color: #fee;
  color: #972828;
}

#historiaGodslayer .jumbotron {
  position: relative;
  background-image: url("../img/Godslayer.jpg");
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  z-index: 0;
}

#historiaGodslayer .welcome-shadow {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: -10;
}

#historiaGodslayer p {
  color: #fff;
}

#historiaGodslayer i {
  padding: 10px;
  font-size: 34px;
}

#historiaGodslayer .wrapper {
  padding: 10px;
}

#contakt .jumbotron {
  background-image: url("../img/bfbg.jpg");
  background-position: center;
  background-size: cover;
}

#contakt .card {
  text-align: center;
  border-radius: 25px;
  -webkit-box-shadow: 5px 5px 5px #226cceb3;
          box-shadow: 5px 5px 5px #226cceb3;
}

#contakt .card-img-top {
  padding: 5px;
  border-radius: 25px;
  -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.7);
          box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.7);
}

#contakt .card-footer {
  border-radius: 10px;
  -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.7);
          box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.7);
}

#contakt .alert {
  background-color: green;
  text-align: center;
}

footer .footer_img {
  position: relative;
  height: 80px;
  line-height: 80px;
  background-image: url("../img/WB_BG_tlo.jpg");
}

footer .mapaStrony {
  width: 100%;
  height: 100px;
  padding: 30px;
}

footer .mapaStrony li {
  color: #fff;
}

footer .mapaStrony h6 {
  color: #fff;
}

footer .footer_text {
  color: #fff;
  text-align: center;
  font-weight: bold;
  background: -webkit-gradient(linear, left top, left bottom, from(#131313), color-stop(9%, #1c1c1c), color-stop(14%, #242424), color-stop(18%, rgba(43, 43, 43, 0.95)), color-stop(29%, rgba(17, 17, 17, 0.82)), color-stop(43%, rgba(0, 0, 0, 0.64)), color-stop(51%, rgba(44, 44, 44, 0.54)), color-stop(53%, rgba(49, 49, 49, 0.52)), color-stop(61%, rgba(71, 71, 71, 0.52)), color-stop(73%, rgba(89, 89, 89, 0.52)), color-stop(84%, rgba(102, 102, 102, 0.52)), to(rgba(76, 76, 76, 0.52)));
  background: linear-gradient(to bottom, #131313 0%, #1c1c1c 9%, #242424 14%, rgba(43, 43, 43, 0.95) 18%, rgba(17, 17, 17, 0.82) 29%, rgba(0, 0, 0, 0.64) 43%, rgba(44, 44, 44, 0.54) 51%, rgba(49, 49, 49, 0.52) 53%, rgba(71, 71, 71, 0.52) 61%, rgba(89, 89, 89, 0.52) 73%, rgba(102, 102, 102, 0.52) 84%, rgba(76, 76, 76, 0.52) 100%);
}

footer p {
  margin: 0;
}

@media (min-width: 100px) {
  header .homeFWW {
    font-size: 35px;
  }
}

@media (min-width: 500px) {
  header .homeFWW {
    font-size: 50px;
  }
}
/*# sourceMappingURL=main.css.map */