/* CSS Document */
/* CSS Document */
/*

        @include flex-row(space-between);
            @include background-tlo-full(contain);


*/
@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}
@-moz-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}
@-o-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}
@keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}
@-webkit-keyframes roll-right {
  0% {
    margin-left: 1rem;
  }
  50% {
    margin-left: 2rem;
  }
  100% {
    margin-left: 1rem;
  }
}
@-moz-keyframes roll-right {
  0% {
    margin-left: 1rem;
  }
  50% {
    margin-left: 2rem;
  }
  100% {
    margin-left: 1rem;
  }
}
@-o-keyframes roll-right {
  0% {
    margin-left: 1rem;
  }
  50% {
    margin-left: 2rem;
  }
  100% {
    margin-left: 1rem;
  }
}
@keyframes roll-right {
  0% {
    margin-left: 1rem;
  }
  50% {
    margin-left: 2rem;
  }
  100% {
    margin-left: 1rem;
  }
}
@-webkit-keyframes upDown {
  0% {
    margin-bottom: 0;
  }
  50% {
    margin-bottom: -10px;
  }
  100% {
    margin-bottom: 0;
  }
}
@-moz-keyframes upDown {
  0% {
    margin-bottom: 0;
  }
  50% {
    margin-bottom: -10px;
  }
  100% {
    margin-bottom: 0;
  }
}
@-o-keyframes upDown {
  0% {
    margin-bottom: 0;
  }
  50% {
    margin-bottom: -10px;
  }
  100% {
    margin-bottom: 0;
  }
}
@keyframes upDown {
  0% {
    margin-bottom: 0;
  }
  50% {
    margin-bottom: -10px;
  }
  100% {
    margin-bottom: 0;
  }
}
@-webkit-keyframes btnHrefB {
  0% {
    top: 0;
    opacity: 1;
  }
  50% {
    top: 100%;
    opacity: 0;
  }
  100% {
    top: -1px;
    opacity: 1;
  }
}
@-moz-keyframes btnHrefB {
  0% {
    top: 0;
    opacity: 1;
  }
  50% {
    top: 100%;
    opacity: 0;
  }
  100% {
    top: -1px;
    opacity: 1;
  }
}
@-o-keyframes btnHrefB {
  0% {
    top: 0;
    opacity: 1;
  }
  50% {
    top: 100%;
    opacity: 0;
  }
  100% {
    top: -1px;
    opacity: 1;
  }
}
@keyframes btnHrefB {
  0% {
    top: 0;
    opacity: 1;
  }
  50% {
    top: 100%;
    opacity: 0;
  }
  100% {
    top: -1px;
    opacity: 1;
  }
}
@-webkit-keyframes btnHrefA {
  0% {
    top: 100%;
    opacity: 1;
  }
  50% {
    top: 0;
    opacity: 0;
  }
  100% {
    top: calc(100% + 1px);
    opacity: 1;
  }
}
@-moz-keyframes btnHrefA {
  0% {
    top: 100%;
    opacity: 1;
  }
  50% {
    top: 0;
    opacity: 0;
  }
  100% {
    top: calc(100% + 1px);
    opacity: 1;
  }
}
@-o-keyframes btnHrefA {
  0% {
    top: 100%;
    opacity: 1;
  }
  50% {
    top: 0;
    opacity: 0;
  }
  100% {
    top: calc(100% + 1px);
    opacity: 1;
  }
}
@keyframes btnHrefA {
  0% {
    top: 100%;
    opacity: 1;
  }
  50% {
    top: 0;
    opacity: 0;
  }
  100% {
    top: calc(100% + 1px);
    opacity: 1;
  }
}
header#ps {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
header#ps .items {
  padding: 50px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  width: 100vw;
}
header#ps .items .logo {
  /*font-size: 55px;
  font-weight: 900;
  line-height: 1em;
  color: rgba(255,255,255,.5);*/
  width: 233px;
  height: 60px;
    opacity: 0.5;
    display: none;
}

header#ps .items .logo .imgBack {
  background-size: contain;
    background-position: 0 50%;
}
header#ps .items .nawigacja {
  background: #000;
  color: #FFF;
  padding: 0 50px;
  line-height: 40px;
  height: 40px;
}
header#ps .items .nawigacja a {
  font-size: 14px;
  cursor: pointer;
}
header#ps .items .nawigacja a.kontakt {
  border-left: 1px solid #FFF;
  padding-left: 10px;
  margin-left: 10px;
}
header#ps .items .nawigacja a.wybrane {
  position: relative;
}
header#ps .items .nawigacja a.wybrane:before {
  content: '\f177';
  position: absolute;
  left: -25px;
  color: rgba(255, 255, 255, 0.8);
}
header#ps .items .nawigacja a.wybrane:hover:before {
  color: #FFF;
}
#inwestycja {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #000;
}
#inwestycja .items {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
#inwestycja .items .swiper-wrapper {
  width: 100vw;
  height: 100vh;
}
#inwestycja .items .swiper-wrapper .content {
  width: 100vw;
  height: 100vh;
}
#inwestycja .items .swiper-wrapper .content iframe {
  min-width: 100vw;
  min-height: 100vh;
}
#inwestycja .items .swiper-wrapper .content .easyhtml5video .playVideo-btn {
  width: 130px;
  height: 130px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -65px;
  margin-top: -65px;
}
#inwestycja .items .swiper-wrapper .content .easyhtml5video .playVideo-btn:before {
  content: '\f144';
  font-size: 130px;
  font-weight: 900;
  opacity: .5;
  line-height: 1;
}
#inwestycja .items .swiper-wrapper .content .easyhtml5video .playVideo-btn.off {
  display: none;
}
#inwestycja .items .swiper-wrapper .content video {
  max-height: 100vh;
}
#inwestycja .info {
  width: 320px;
  position: absolute;
  right: 50px;
  top: 95px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.9);
}
#inwestycja  .logo {
  height: 65px;
  margin: 20px;
}
#inwestycja .logo .imgBack {
  background-size: contain;
}
#inwestycja  .legenda {
  font-size: 18px;
    padding: 0 0 20px;
}
#inwestycja  .legenda .opis {
  padding: 0 30px;
  font-size: 13px;
  line-height: 1.2em;
  margin-bottom: 15px;
}
#inwestycja .legenda .miasto {
  text-transform: uppercase;
  padding: 0 30px;
  font-size: 15px;
}
#inwestycja  .legenda ul {
  list-style: disc;
  padding: 0 30px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
#inwestycja  .legenda ul li {
  margin: 0 20px;
  font-size: 13px;
  line-height: 1.2em;
  width: 30%;
}
#inwestycja  .galThumb {
  margin: 20px 10px 10px;
  /*max-height: 290px;
  height: calc(40vh + 10px);*/
  overflow: hidden;
  position: relative;
}
#inwestycja  .galThumb .swiper-slide-active {
  /* display: none;*/
}
#inwestycja .galThumb .imgBack {
  /*max-height: 140px;
  height: 20vh;
  margin-bottom: 10px;
  
  flex: 1;*/
  height: 55px;
  width: 55px;
  margin: 0 5px 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
#inwestycja .galThumb .imgBack.off {
  display: none;
}
#inwestycja  .nawigacja {
  height: 50px;
  width: 106px;
  position: absolute;
  right: 0;
  bottom: -60px;
  z-index: 2;
}
#inwestycja .nawigacja .swiper-button-white {
  border: 1px solid #000;
  /*rgba(255,255,255,.8);*/
  width: 50px;
  height: 50px;
  background: #FFF;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin: 0;
  top: 0;
  position: absolute;
}
#inwestycja  .nawigacja .swiper-button-white:before {
  margin: auto;
  color: #000;
  font-weight: 300;
  font-size: 18px;
}
#inwestycja  .nawigacja .swiper-button-white.swiper-button-next {
  right: 0;
}
#inwestycja  .nawigacja .swiper-button-white.swiper-button-next:before {
  content: '\f054';
}
#inwestycja  .nawigacja .swiper-button-white.swiper-button-prev {
  left: 0;
}
#inwestycja  .nawigacja .swiper-button-white.swiper-button-prev:before {
  content: '\f053';
}
#inwestycja .nawigacja .swiper-button-white:hover {
  background: #000;
}
#inwestycja  .nawigacja .swiper-button-white:hover:before {
  color: #fff;
}
#inwestycja .info-mobile {
    display: none;
}
body.on header#ps .nawigacja {
  opacity: .1;
}
body.on #inwestycja .info {
  background: rgba(255, 255, 255, 0.1);
}
body.on #inwestycja .info .logo {
  opacity: .1;
}
body.on #inwestycja  .legenda {
  opacity: .1;
}

body.playvideo header#ps .nawigacja {
  opacity: .1;
}
body.playvideo #inwestycja .info {
  background: rgba(255, 255, 255, 0.1);
}
body.playvideo #inwestycja .info .logo {
  opacity: .1;
}
body.playvideo #inwestycja .info .legenda {
  opacity: .1;
}
body.playvideo #inwestycja .info .nawigacja {
  opacity: .1;
}

@media only screen and (max-width: 800px) {
  header#ps .items {
    padding: 20px;
  }
  header#ps .items .logo {
    height: 50px;
    width: 50vw;
      display: block;
  }
  header#ps .items .nawigacja {
    padding: 0;
    line-height: normal;
    height: 50px;
     
  }
  header#ps .items .nawigacja a.wybrane {
    width: 50px;
    height: 50px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    background: #000;
  }
  header#ps .items .nawigacja a.wybrane span {
    display: none;
  }
  header#ps .items .nawigacja a.wybrane:before {
    position: relative;
    left: auto;
    margin: auto;
  }
  header#ps .items .nawigacja a.kontakt {
    display: none;
  }
    #inwestycja {
        width: 100vw;
        height: auto;
    }
  #inwestycja .swiper-container, #inwestycja .items {
    height: 50vh;
      position: relative;
  }
    #inwestycja .items .swiper-wrapper .content video {
        max-height: 50vh;
    }
    #inwestycja .items .swiper-wrapper .content .easyhtml5video .playVideo-btn {
    width: 20vw;
    height: 20vw;
    position: absolute;
    top: 50vw;
    left: 50vw;
    margin-left: -10vw;
    margin-top: -10vw;
}
    #inwestycja .items .swiper-wrapper .content .easyhtml5video .playVideo-btn:before {
        font-size: 20vw;
    }
    #inwestycja .info-mobile {
       display: block;
        min-height: 50vh;
        background: #FFF;
        padding: 20px;
    }
    
    #inwestycja .swiper-container .swiper-wrapper {
        height: 100%;
    }
    #inwestycja .swiper-container .swiper-wrapper .content {
        max-height: 100%;
            background-size: 100%;
    }
     #inwestycja .swiper-container .swiper-wrapper .content iframe {
        min-height: auto;
         min-width: auto;
         height: 100%;
         width: 100%;
         max-width: 100vw;
         max-height: 50vh;
    }
  #inwestycja .info {
    
    display: none;
  }
  
  #inwestycja  .legenda {
   display: grid;
      grid-template-columns: 30% 1fr;
      grid-gap: 30px;
   
  }
    #inwestycja  .legenda .logo {
        height: auto;
        width: 100%;
        margin: auto;

  }
    #inwestycja  .legenda .logo img {
        
        width: 100%;
        display: block;

  }
    #inwestycja .legenda .opis {
        padding: 0;
    }
  #inwestycja  .legenda .miasto {
    margin: auto 0 0;
      padding: 0;
  }
  #inwestycja  .legenda ul {
    margin: 0 0 auto;
      padding: 0;
  }
  #inwestycja  .legenda ul li {
    font-size: 13px;
  }
  #inwestycja  .galThumb {
    margin: 20px 0;
      background: none;
          overflow: hidden;
  }
    #inwestycja .galThumb .imgBack {
        width: 80px;
        margin: auto 5px;
    }
    #inwestycja .galThumb .swiper-slide-active {
        border-color: #000;
    }
  #inwestycja .nawigacja {
    bottom: auto;
    right: auto;
    position: relative;
     display: flex;
      flex-direction: row;
      justify-content: flex-end;
      margin: 0 auto;
      width: auto;
  }
    #inwestycja .nawigacja .swiper-button-white.swiper-button-next {
        position: relative;
        top: auto;
    }
    #inwestycja .nawigacja .swiper-button-white.swiper-button-prev {
        position: relative;
        top: auto;
    }
}