/* --------------- PRZYCISK POCHYLNY Z ANIMACJĄ - START --------------- */
.skew-button {
  cursor: pointer;
  outline: none;
  position: relative;
  display: block;
  right: 0px;
  padding: 0; 
  background-color: transparent;
  border: none;
  font: 1.2vw 'Anton', sans-serif;
  letter-spacing: 0.1em;
  color: #fff;
}
.skew-button span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 17px 10px;
  z-index: 3;
  text-align: center;
}
.skew-button:before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%) skewX(-20deg);
          transform: translate(-50%, -50%) skewX(-20deg);
  width: 100%;
  height: 40px;
  border: 1px solid #0e3876;
  z-index: 2;
  
  background-color: rgba(14, 56, 118, 0.18);
}
.skew-button:after {
  transition: all 100ms ease-out;
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transform: skewX(-20deg) scaleX(0);
          transform: skewX(-20deg) scaleX(0);
  width: 100%;
  height: 100%;
  background-color: #0e3876;
  border: 1px solid transparent;
  z-index: 1;
}
.skew-button:hover:before {
  -webkit-animation: fill .5s ease-out;
          animation: fill .5s ease-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.skew-button:hover:after {
  -webkit-animation: swoosh .7s ease-in;
          animation: swoosh .7s ease-in;
}
.skew-button:active:before {
  background-color: #030d1b;
}
.skew-button-on-slider {
  margin: 70px 50px 0 0; 
}
.skew-button-on-slider div {
  padding: 0 20px; 
  margin: 0; 
  margin-bottom: 10px;
  width: 100%; 
}
@media only screen and (max-width: 768px) {
  .skew-button {
    font: 1.8vw 'Anton', sans-serif;
  }
  .skew-button-on-slider {
    margin: 0; 
  }
}
@media only screen and (max-width: 575px) {
  .skew-button {
    font: 2vw 'Anton', sans-serif;
  }
  .skew-button-on-slider {
    margin: 0; 
  }
}

@-webkit-keyframes swoosh {
  0% {
    -webkit-transform-origin: left center;
            transform-origin: left center;
  }
  20% {
    -webkit-transform: skewX(-20deg) scaleX(1);
            transform: skewX(-20deg) scaleX(1);
    -webkit-transform-origin: left center;
            transform-origin: left center;
  }
  21% {
    -webkit-transform-origin: right center;
            transform-origin: right center;
  }
  50% {
    -webkit-transform: skewX(-20deg) scaleX(0);
            transform: skewX(-20deg) scaleX(0);
    -webkit-transform-origin: right center;
            transform-origin: right center;
  }
}
@keyframes swoosh {
  0% {
    -webkit-transform-origin: left center;
            transform-origin: left center;
  }
  20% {
    -webkit-transform: skewX(-20deg) scaleX(1);
            transform: skewX(-20deg) scaleX(1);
    -webkit-transform-origin: left center;
            transform-origin: left center;
  }
  21% {
    -webkit-transform-origin: right center;
            transform-origin: right center;
  }
  50% {
    -webkit-transform: skewX(-20deg) scaleX(0);
            transform: skewX(-20deg) scaleX(0);
    -webkit-transform-origin: right center;
            transform-origin: right center;
  }
}

@-webkit-keyframes fill {
  0% {
    background-color: rgba(14, 56, 118, 0);
  }
  20% {
    opacity: .5;
    border-width: 15px;
    border-color: #092248;
  }
  100% {
    opacity: .5;
    border-width: 1px;
    background-color: rgba(14, 56, 118, 0.5 );
  }
}
@keyframes fill {
  0% {
    background-color: rgba(14, 56, 118, 0);
  }
  20% {
    opacity: .5;
    border-width: 15px;
    border-color: #092248;
  }
  100% {
    opacity: .5;
    border-width: 1px;
    background-color: rgba(14, 56, 118, 0.5);
  }
}
/* --------------- PRZYCISK POCHYLNY Z ANIMACJĄ - END --------------- */





/* --------------- ANIMACJA DLA GRAFIKI PRZY AKTUALNOŚCIACH I INNYCH - START --------------- */
.swoosh-box {
  cursor: pointer;
  outline: none;
  position: relative;
  display: block;
  left: 0px;
  padding: 0; 
  width: 100%;
  height: auto;
  background-color: transparent;
  border: none;
  font: 1.3rem 'Anton', sans-serif;
  letter-spacing: 0.1em;
  color: #fff;
}
.swoosh-box:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  
  background-color: rgba(14, 56, 118, 0);
}
.swoosh-box:after {
  transition: all 100ms ease-out;
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transform: skewX(-20deg) scaleX(0);
          transform: skewX(-20deg) scaleX(0);
  width: 100%;
  height: 100%;
  background-color: #0e3876;
  opacity: .3;
  border: 1px solid transparent;
  z-index: 1;
}
.swoosh-box:hover:before {
  -webkit-animation: fill2 .5s ease-out;
          animation: fill2 .5s ease-out;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.swoosh-box:hover:after {
  -webkit-animation: swoosh2 .7s ease-in;
          animation: swoosh2 .7s ease-in;
}
.swoosh-box:active:before {
  background-color: #030d1b;
}

@-webkit-keyframes swoosh2 {
  0% {
    -webkit-transform-origin: left center;
            transform-origin: left center;
  }
  20% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform-origin: left center;
            transform-origin: left center;
  }
  21% {
    -webkit-transform-origin: right center;
            transform-origin: right center;
  }
  50% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transform-origin: right center;
            transform-origin: right center;
  }
}

@keyframes swoosh2 {
  0% {
    -webkit-transform-origin: left center;
            transform-origin: left center;
  }
  20% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform-origin: left center;
            transform-origin: left center;
  }
  21% {
    -webkit-transform-origin: right center;
            transform-origin: right center;
  }
  50% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transform-origin: right center;
            transform-origin: right center;
  }
}

@-webkit-keyframes fill2 {
  0% {
    background-color: rgba(14, 56, 118, 0);
  }
  20% {
    opacity: .9;
    border-width: 15px;
    border-color: #092248;
  }
  100% {
    opacity: .9;
    border-width: 1px;
    background-color: rgba(14, 56, 118, 0.6);
  }
}
@keyframes fill2 {
  0% {
    background-color: rgba(14, 56, 118, 0);
  }
  20% {
    opacity: .9;
    border-width: 15px;
    border-color: #092248;
  }
  100% {
    opacity: .9;
    border-width: 1px;
    background-color: rgba(14, 56, 118, 0.6);
  }
}
/* --------------- ANIMACJA DLA GRAFIKI PRZY AKTUALNOŚCIACH I INNYCH - END --------------- */





/* --------------- PRZYCISK PRZY AKTUALNOŚCIACH - START --------------- */
.btn-news {
  background-color: white;
  border: 1px solid #fff;
  color: #1578A9;
  padding: 7px 18px;
  font-size: 13px;
  cursor: pointer;
  display: inline;
  transition: .3s;
}
.btn-news.active {
  border: 1px solid #1578A9;
}
.btn-news:hover,
.btn-news:active {
  border: 1px solid #1578A9;
}

#PokazWiecej.displayOn {
    display: block !important;
}

#PokazWiecej.displayOff {
    display: none !important;
}
/* --------------- PRZYCISK PRZY AKTUALNOŚCIACH - END --------------- */