/*
Theme Name: Hydraulik
Author: Pakietyreklamowe
Author URI: http://pakietyreklamowe.pl/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

body {font-family: 'Lato', sans-serif; color:#000;}

p {font-size:16px; letter-spacing:2px; font-weight:900;}


.navbar-brand {height:auto;}
.navbar {background:transparent; border:none;}
.header {height:900px; background:#fff; position:relative; animation: 2s ease-in 0s 1 opacity;}
.header .container {position:relative; z-index:10;}
.header h2 {font-size:4.8rem; font-weight:900; color:#fff; letter-spacing:6px; line-height:1.5em;}
.header h2 span {font-size:4rem; font-weight:300; display:block;}
.header:before {background:#2f3767; position:absolute; content:""; top:0; right:50vw; width:75vw; height:75vh; z-index:1; animation: 2s ease-out 0s 1 moveRight;}
.header:after {position:absolute; content:""; top:75vh; width:0; right:50vw; height:0;  border-left: 37.5vw solid transparent; border-right: 37.5vw solid transparent;  border-top: 25vw solid #2f3767; animation: 2s ease-out 0s 1 dropTriangle, 2s ease-out 0s 1 moveRight;}
.tel {position:absolute; top:0; right:0; padding:20px 20px 20px 180px; overflow:hidden;}
.tel:before {content:""; position:absolute; top:-90px; right:0; bottom:0; left:-40px; margin:auto; width:500px; height:200px; background:#2f3767; transform:rotate(30deg); border:10px #ed1c24 solid;}
.tel span {position:relative; z-index:2; color:#fff; font-size:21px; font-weight:300;}
@media (max-width:600px) {
  .tel {padding-left:120px; z-index:11;}
}
@media (max-width:991px) {
  .header:before {right:10vw; width:90vw;}
  .header:after {right:10vw; border-left:45vw solid transparent; border-right:45vw solid transparent;}
  .header h2 {font-size:2.5rem;}
  .header h2 span {font-size:2rem;}
  .col-custom {padding-right:10vw; padding-top:50px;}
}
@keyframes dropTriangle {
  0% {border-top: 0vw solid #2f3767;}
  100% {border-top: 25vw solid #2f3767;}
}
@keyframes opacity {
  0% {opacity:0;}
  100% {opacity:1;}
}
@keyframes moveRight {
  0% {transform:translateX(-50%);}
  100% {transform:translateX(0);}
}


.fade-slider {position:absolute; top:0; left:0; height:100vh; width:100%;}
.fade1 {background-image: url('img/slider1.jpg'); background-size:cover; background-position:center center;}
.sticky-navbar { width:100%;}
.sticky-nav {list-style:none; margin:0; padding:0; text-align:right; width:100%; z-index:10; position:Relative;}
.sticky-nav .first-of-type {padding:30px 60px;}
.sticky-nav .first-of-type:before {display:none;}
.sticky-nav > li {text-align:center; display:inline-block; font-weight:900; text-transform:uppercase; letter-spacing:1.5px; position:relative; overflow:hidden; margin:0;}
.sticky-nav a {padding:30px 20px 30px 110px; display:inline-block; color:#000; position:relative; z-index:1; border-right:10px transparent solid; transition:.4s;}
@media (min-width:768px) {
  .sticky-nav > li:before {content:""; position:absolute; background:#2f3767; top:0; right:-130px; height:300px; width:300px; transform:rotate(50deg); opacity:0; transition: .4s;}
.sticky-nav > li:hover:before {opacity:1;}
}
.sticky-nav > li:hover a { color:#fff; text-decoration:none; border-right: 10px #ed1c24 solid;}
  .sticky {position:fixed; top:0; z-index:8999;background:#fff;}
  .btn-bg {display:block; height:60px; width:60px; margin:0 auto; background:url('img/btn.png') no-repeat center center; border:none;}
@media (min-width:768px) {
  .btn-bg {display:none;}
}
@media (max-width:1200px){
  .sticky-nav a ,
  .sticky-nav .first-of-type {padding:15px 20px 15px 45px;}
}
@media (max-width:768px) {
  .sticky-nav > li {width:100%; text-align:center;}
  .sticky-nav a {width:100%;}
  .sticky-nav a:hover { background:#2f3767;}
  .sticky-nav .first-of-type {display:none;}
  .sticky-nav {}
}
.onas {position:relative;padding:0 0 200px 0;}
.onas .container,
.onas .row {position:static;}
.h2 {font-size:64px; font-weight:900; text-transform:uppercase; letter-spacing:8px;text-align:center;}
@media (max-width:600px) {
  .h2{font-size:36px; letter-spacing:4px;}
}
.onas .h2 {word-spacing:999px;  margin-bottom:100px;}
.img-btm-right {position:absolute; right:-5vw; bottom:-10vw; width:40vw;}

@media (max-width:768px) {
  .img-btm-right { width:80vw;}
}
@media (max-width:992px) {
  .img-btm-right {right:0; }
}
.ikony {text-align:center; background: #333 url('img/bg2.jpg') no-repeat top center; background-size:cover; background-attachment:fixed; padding:50px 0;}



.oferta {background: #fff url('img/rury.jpg') no-repeat top center; background-size:cover; background-attachment:fixed; padding:200px 0 50px 0;}
.oferta p {font-wieght:700; color:#000;}
.oferta .h2 {}
  .h2-desc {text-align:center; font-size:36px; font-weight:300; color:#333;  letter-spacing:3px;}
  @media (max-width:600px) {
    .h2-desc {font-size:26px; letter-spacing:2px;}
  }
  .h3 {font-size:54px; font-weight:900; letter-spacing:6px; text-transform:uppercase; margin-top:80px; margin-bottom:30px;}
  @media (max-width:600px) {
    .h3 {font-size:28px; letter-spacing:2px;}
  }
.gal {list-style:none; margin:0; padding:0; text-align:center; font-size:16px; font-weight:900; color:#000; letter-spacing:2px;}
.gal > li {display:inline-block; margin:10px;}
.dostawcy {list-style:none; margin:0; padding:0; text-align:center;}
.dostawcy > li {display:inline-block; background:#fff; width:170px; height:120px; position:relative; margin:20px;}
.dostawcy > li img {position:absolute; top:0; right:0; bottom:0; left:0; max-width:80px; max-height:80px; margin:auto;}


.galeria-box {padding-top:100px;}

.galeria-mini { margin:0; padding:0; list-style:none; -webkit-display:flex; display:flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: flex-start; align-items: flex-start; list-style:none; text-align:center;}
.galeria-mini li {display:block; width:33.333%; height:50vh; margin:0; cursor:pointer;  background-size:cover; background-position:center center; transition:.4s; border:none; overflow:hidden; transition:3s;}
.galeria-mini li:hover { box-shadow:0 0 5px rgba(0,0,0,.6); border-radius:3px;}
.galeria-mini li img {display:block; opacity:0; transition:1s;}
.galeria-mini .img-full img {opacity:1; display:block; position:fixed; z-index:9900; top:0; bottom:0; left:10px; right:10px; max-width: 96%; width:auto; max-height:96%; height:auto;  margin:auto; opacity:1; border-radius:10px; box-shadow:0 0 13px 1px black;}

.img-full:before {content:""; position:fixed; top:0; right:0; bottom:0; left:0; z-index:9500; background:rgba(0,0,0,.9);}

.close-img-full {display:none;position:fixed; top:10px; right:10px; border:0 transparent solid; width:30px; height:30px; border-radius:50%; line-height:30px; text-align:center; background:rgba(0,0,0,.5); color:#fff; z-index:9950; transition:.4s;}
.next-img {display:none;position:fixed; top:48%; right:10px; border:0 transparent solid; width:40px; height:40px; border-radius:50%; line-height:40px; text-align:center; background:rgba(0,0,0, .5); color:#fff; z-index:9950; transition:.4s;}
.prev-img {display:none; position:fixed; top:48%; left:10px; border:0 transparent solid; width:40px; height:40px; border-radius:50%; line-height:40px; text-align:center; background:rgba(0,0,0,.5); color:#fff; z-index:9950; transition:.4s;}
.close-img-full:focus, .next-img:focus, .prev-img:focus,
.close-img-full:hover, .next-img:hover, .prev-img:hover {outline:0; box-shadow:0 0 4px 0 #fff;}


.kontakt {background: #2f3767; color:#fff; padding:50px 0 0 0; position:relative;}
.kontakt .h2 {color:#fff;}
.kontakt .h2-desc {color:#fff;}
.kontakt-klucz {max-width:48px; width:100%; margin:30px auto; display:block;}
.input {height:50px; line-height:50px; background:transparent; border:1px #fff solid; margin-bottom:15px; width:100%; background:#2f3767; text-align:center;}
.textarea {height:115px; padding:15px; background:transparent; border:1px #fff solid; margin-bottom:15px; width:100%; background:#2f3767; position:relative; z-index:1; }
@media (min-width:992px) {
  .clearmargin {padding-right:0;}
}
.submit {height:50px; line-height:50px; background:#fff; color:#333; text-align:right; display:block; width:100%; padding-right:75px; border:none;}

#map {width:100%; height:400px; background:#ddd; margin-top:15px;}
#map iframe {height:100%; width:100%;}
.div_copy{
   height: 70px;
   background: #2f3767; 
}
@media (max-width:377px) {
  .div_copy{
    height: 100px;
  }
}
.copy {position:absolute; right:0; padding:20px 20px 20px 180px; overflow:hidden; margin:0; z-index:9999;}
.copy:before {content:""; position:absolute; top:-60px; right:0; bottom:0; left:70px; margin:auto; width:800px; height:300px; background:#2f3767; transform:rotate(-30deg); border:10px #ed1c24 solid;}
.copy a {position:relative; z-index:2; color:#fff; font-size:21px; font-weight:300;color:#fff; text-decoration:none;}