/*
Theme Name: Okami
*/


@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Oswald:400,500,600&display=swap&subset=latin-ext');


.wp-block-separator {
	border-color: rgba(0,0,0,0.1);
}


body {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #000;
    line-height: 2.2em;
}

a {
	position: relative;
    color: #000;
    -webkit-transition: ease 0.2s;
    -moz-transition: ease 0.2s;
    -o-transition: ease 0.2s;
    transition: ease 0.2s;
}

a:after , a:before , button , .grid-post-header {
  	-webkit-transition: ease 0.3s;
    -moz-transition: ease 0.3s;
    -o-transition: ease 0.3s;
    transition: ease 0.3s;
}

a:hover {
    color: #be1622;
}

h1, h2, h3, h4, h5, h6, .headerstyle {
	font-family: 'Oswald', sans-serif;
	font-weight: 500;
    color: #000;
}

.my-page-title , h2 {
    font-size: 65px;
    text-transform: uppercase;
    margin-bottom: 3vh;
    line-height: 1.1em;
    position: relative;
}

.my-page-title:after , h2:after {
    content: ".";
    color: #be1622;
    font-family: initial;
    font-size: 90px;
    line-height: 0;
}

.page-id-13 h2:after {
    display: none;
}

h2.firstWord:after {
	display: none;
}

.firstWord span {
    position: relative;
    margin-bottom: 8vh;
    display: block;
    float: left;
    padding-right: 5px;
}

.firstWord span:after {
    content: ".";
    color: #be1622;
    font-family: initial;
    font-size: 90px;
    line-height: 0;
}

.padding-0 {
    padding-left: 0!important;
    padding-right: 0!important;
}

#myBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
    border: none;
    outline: none;
    border: 3px solid #be1622;
    color: #be1622;
    padding: 10px 14px;
    line-height: 1em;
    background: 0 0;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 300px;
}

#myBtn:hover {
	color: #fff;
	background-color: #be1622;
}

.navbar {
  font-size: 14px;
  text-transform: uppercase;
  font-weight: bold;
}

.navbar .navbar-brand , .footer-brand {
    background: url(img/logo.png) 50% 50% no-repeat;
    width: 129px;
    width: 13.623vh;
    height: 181px;
    height: 19.114vh;
    position: relative;
    background-size: contain;
}

.footer-brand {
	display: block;
    width: 100%;
    max-width: 70px;
    height: 100%;
}

.fixed.navbar .navbar-brand {
	height: 60px;
}

.main-nav.fixed {
    background: rgba(0, 0, 0, 0.85);
}

.main-nav .menu-item {
    padding: 0 2.2vh;
}

.main-nav .nav-link {
    color: #fff;
    border-bottom: 5px solid transparent;
    padding-left: 0!important;
    padding-right: 0!important;
}

.main-nav .nav-link:hover ,
.main-nav .current-menu-item > a , .main-nav .current-category-ancestor > a , .main-nav .current-post-ancestor > a , .main-nav a.active , .main-nav .current_page_parent > a {
	border-color: #be1622;
}


.my-page-header {
  padding: 120px 0 180px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
}

.my-page-header h1, .my-page-header a {
    color: #fff!important;
}

.player {
    position: relative;
    display: flex;
    overflow: hidden;
    width: 100%;
    min-height: 82vh;
    align-items: flex-end;
    justify-content: center;
}

.player > video {
    object-fit: cover;
    width: 100%;
    height: 100%;
    transform: rotateZ(0);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
}

.player:after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.75);
}

.video-caption {
    color: #fff;
    z-index: 1;
    font-size: 18px;
    padding-bottom: 5vh;
    position: relative;
    padding-right: 170px;
}

.video-caption > * {
    width: 100%;
    max-width: 610px;
    color: #fff;
}

.video-caption h2 {
    font-size: 65px;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 2.8vh;
}

.video-caption h2 > strong {
	color: #be1622;
}

.my-btn, .has-link a, .myback, .prev-post-btn > a, .next.page-numbers, .prev.page-numbers {
    position: relative;
    padding-right: 70px;
    font-size: 14px;
    font-weight: 600;
    color: #000 !important;
    text-decoration: none !important;
    min-height: 50px;
    display: inline-flex;
    align-items: center;
}

.my-btn:not(.my-btn-down , .myback , .prev-post-btn > a ):hover , .has-link a:not(.my-btn-down , .myback , .prev-post-btn > a ):hover , .next.page-numbers:hover {
	padding-left: 5px;
}

.my-btn.my-btn-down , .myback , .prev-post-btn > a , .prev.page-numbers {
	padding-right: 0;
	padding-left: 70px;
}

.my-btn:before , .has-link a:before , .myback:before , .prev-post-btn > a:before , .next.page-numbers:before , .prev.page-numbers:before {
    content: "→";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    color: #000;
    font-size: 20px;
    text-align: center;
    border: 3px solid #be1622;
    border-radius: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 22px 13px 24px;
}

.my-btn.my-btn-down:before , .myback:before , .prev-post-btn > a:before , .prev.page-numbers:before {
	content: "↓";
	font-size: 20px;
	right: auto;
	left: 0;
	padding: 21px 18px 25px;
}

.myback:before , .prev-post-btn > a:before , .prev.page-numbers:before {
    content: "←";
    color: #fff;
    padding: 21px 13px 25px;
}

.prev-post-btn > a:before , .prev.page-numbers:before {
    color: #000;
}

.my-btn:hover:before , .has-link a:hover:before , .myback:hover:before , .prev-post-btn > a:hover:before , .next.page-numbers:hover:before , .prev.page-numbers:hover:before {
	right: -5px;
	color: #fff;
	background-color: #be1622;
}

.my-btn.my-btn-down:hover:before {
	right: auto;
	top: 10px;
}

.myback:hover:before , .prev-post-btn > a:hover:before , .prev.page-numbers:hover:before {
	top: 0;
	left: -5px;
	right: auto;
}

.video-caption .my-btn:before , .video-caption .my-btn {
	color: #fff!important;
}

.video-caption .my-btn:before {
	-webkit-animation-duration: 1s;
  	animation-duration: 1s;
  	-webkit-animation-fill-mode: both;
  	animation-fill-mode: both;
  	-webkit-animation-timing-function: linear;
  	animation-timing-function: linear;
  	animation-iteration-count: infinite;
  	-webkit-animation-iteration-count: infinite;
	-webkit-animation-name: bounce;
  	animation-name: bounce;
}

.home .social-box {
    float: right;
    text-align: right;
    position: absolute;
    right: 15px;
    bottom: 4vh;
}

ul.social-box {
    list-style-type: none;
    padding: 0;
    display: flex;
    margin-bottom: 4vh;
}

footer ul.social-box {
	margin-bottom: 0;
}

.social-box a[href*="facebook.com"] ,
.social-box a[href*="instagram.com"] {
    display: inline-block;
    background-image: url(img/fb_1.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    font-size: 0;
    width: 52px;
    height: 52px;
}

.social-box a[href*="facebook.com"] {
	background-image: url(img/fb_1.png);
}

.social-box a[href*="instagram.com"] {
	background-image: url(img/ig_1.png);
}

.social-box a[href*="facebook.com"]:hover {
	background-image: url(img/fb_2.png);
}

.social-box a[href*="instagram.com"]:hover {
	background-image: url(img/ig_2.png);
}

.social-box:not(ul) a:last-of-type {
	margin-left: 25px;
}

ul.social-box > li:last-of-type a {
	margin-left: 25px;
}

.max-left {
    width: 100%;
    max-width: 555px;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: 0;
}

.max-left.visible img {
	-webkit-animation-name: fadein;
  	animation-name: fadein;

}

.wp-block-image img {
    max-width: 100%;
    width: 100%;
    height: auto;
}

p.max-left {
    font-size: 18px;
}

.max-right {
    width: 100%;
    max-width: 555px;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: 0;
    margin-right: auto;
}

.folie, .ceramika, .indywidualne, .wosk, .kolor, .rewitalizacja, .korekta, .wnetrze, .mycie {
    position: relative;
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    text-align: center;
    border: 1px solid #ddd;
    line-height: 1.2em;
    font-size: 18px;
    margin-bottom: 2px;
}

.folie a, .ceramika a, .indywidualne a, .wosk a, .kolor a, .rewitalizacja a, .korekta a, .wnetrze a, .mycie a {
	position: relative;
	display: block;
	overflow: hidden;
	padding: 13px;
	padding-top: 85px;
    min-height: 161px;
    text-decoration: none!important;
    opacity: 0;
    left: -3000px;
}

.folie a:before, .ceramika a:before, .indywidualne a:before, .wosk a:before, .kolor a:before, .rewitalizacja a:before, .korekta a:before, .wnetrze a:before, .mycie a:before {
	content: "";
	position: absolute;
	top: 13px;
	right: 0;
	left: 0;
	background-image: url(img/cut.png);
	background-repeat: no-repeat;
	width: 65px;
    height: 60px;
    margin: auto;
}

.folie a:hover, .ceramika a:hover, .indywidualne a:hover, .wosk a:hover, .kolor a:hover, .rewitalizacja a:hover, .korekta a:hover, .wnetrze a:hover, .mycie a:hover {
	color: #fff;
	background-color: #be1622;
}

.folie a:hover:before, .ceramika a:hover:before, .indywidualne a:hover:before, .wosk a:hover:before, .kolor a:hover:before, .rewitalizacja a:hover:before, .korekta a:hover:before, .wnetrze a:hover:before, .mycie a:hover:before {
	filter: invert(100%);
}

.folie a:before {
    background-position: -32px -605px;
}

.ceramika a:before {
	background-position: -120px -605px;
}

.indywidualne a:before{
	background-position: -210px -605px;
}

.wosk a:before {
	background-position: -32px -686px;
}

.kolor a:before {
	background-position: -120px -686px;
}

.rewitalizacja a:before {
	background-position: -210px -686px;
}

.korekta a:before {
	background-position: -37px -770px;
}

.wnetrze a:before {
	background-position: -120px -770px;
}

.mycie a:before {
	background-position: -210px -770px;
}


h3.first-line {
    color: #be1622;
    font-size: 34px;
    font-size: 3.79vh;
    font-weight: 400;
}

h3.first-line:first-line {
    color: #000;
}

.wp-block-column.myflex {
    position: relative;
    overflow: hidden;
    align-items: stretch;
    display: flex;
    flex-flow: wrap;
}

.wp-block-column.myflex > .has-link {
    align-self: flex-end;
}
.w-liczbach {
	overflow: unset;
    color: #fff;
}

.w-liczbach h2 {
    width: 100%;
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 8vh;
    margin-bottom: 6vh;
}

.w-liczbach h3 {
    font-size: 132px;
    font-size: 8.9vh;
    min-width: 20vh;
}

.box-liczyby {
    width: 100%;
    max-width: 630px;
    position: relative;
    margin-bottom: 10vh;
}

.box-liczyby:before {
    content: "";
    position: absolute;
    left: 88%;
    bottom: -18.5vh;
    width: 775px;
    width: 81.838vh;
    height: 308px;
    height: 32.525vh;
    background-image: url(img/audi_liczby.png);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 1;
}

.box-liczyby p {
	font-size: 18px;
    font-weight: 600;
}

.box-liczyby p {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.6em;
    z-index: 1;
    position: relative;
}

.home-paralax-box h2 {
    max-width: 520px;
    font-size: 5.7vh;
}

.home-paralax-box p {
    font-family: 'Oswald', sans-serif;
    max-width: 770px;
    font-size: 34px;
    font-size: 3.6vh;
    font-weight: 400;
    line-height: 1.45em;
}

.home-paralax-box h2:after {
	display: none;
}

.home-paralax-box h2 mark , .home-paralax-box p mark {
	color: #be1622;
	background: transparent;
	padding: 0;
}

.home-paralax-box {
    padding-top: 7vh;
    padding-bottom: 25vh;
}

.home-paralax-box {
    position: relative;
    z-index: 1;
}

.home .wp-block-cover.has-parallax:after{
     content: ' ';
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     background: #fff ;
     opacity: 0.6;
}

.my-page-header {
    padding: 21vh 0 6vh;
    background-size: auto;
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
}

.container.title-container {
    display: flex;
    width: 100%;
    align-items: flex-end;
    justify-content: space-between;
}

.container.title-container > * {
	margin-bottom: 15px;
}

.container.title-container > h1 {
	margin-bottom: 0;
}

.my-special-content {
    padding: 5vh 0;
    line-height: 1.65em;
    position: relative;
}

.my-special-content h2 {
    font-size: 40px;
    font-size: 4.25vh;
}

.my-special-content h3 {
    font-size: 24px;
    font-size: 2.53vh;
    font-weight: 400;
    margin-bottom: 20px;
}

.my-special-content mark {
    background-color: transparent;
    color: #be1622;
    padding: 0;
}

.my-paralax h2 {
    font-size: 34px;
    font-size: 3.59vh;
    text-transform: unset;
    font-weight: 400;
}

.my-paralax h2:after {
	display: none;
}

.my-paralax p {
    font-size: 18px;
    line-height: 1.65em;
}

.my-paralax {
    margin-top: 3vh;
    margin-bottom: 7vh;
}

footer {
    background: #000;
    color: #fff;
}

.footer-content {
    padding-top: 5vh;
    padding-bottom: 5vh;
}

.info-box {
	font-size: 12px;
    line-height: 1.6em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.info-box > div {
    padding-top: 3vh;
}

.info-box > div > strong {
    text-transform: uppercase;
    margin-bottom: 10px;
    display: block;
    font-size: 14px;
}

.info-box a , .lastrow a {
	color: #fff;
	text-decoration: none;
}

.info-box a:hover , .lastrow a:hover {
	color: #be1622;
}

.lastrow {
    padding: 10px 0;
    border-top: 1px solid #222;
    margin: 0;
}

.lastrow > .col {
	padding: 0;
}

.merc-uslugi {
    margin-top: -19vh;
    z-index: 1;
    position: relative;
}

div#folie {
    padding: 15vh 0;
    margin-top: -10vh;
    position: relative;
}

div#folie .wp-block-columns:last-of-type .wp-block-column:last-of-type {
    position: relative;
}

div#folie .wp-block-columns:last-of-type .wp-block-column:last-of-type:before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    margin: auto;
    display: block;
    width: 105px;
    height: 107px;
    background-image: url(img/cut.png);
    background-repeat: no-repeat;
    background-position: -35px -395px;
}

div#ceramika {
    padding: 15vh 0 5vh;
    background-image: url(img/tlo_powloki_ceramiczne.jpg);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

div#indywidualne {
    padding: 15vh 0 5vh;
    background-image: url(img/tlo_uslugi_indywidualne.jpg);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

div#wosk {
    padding: 15vh 0 5vh;
}

div#wosk img {
    margin: 0;
    margin-top: -10vh;
    margin-bottom: -15vh;
    right: -31vh;
    position: relative;
    max-width: 81vh;
}

div#kolor {
    padding: 15vh 0 5vh;
    background-image: url(img/tlo_zmiana_koloru.jpg);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

div#rewitalizacja {
    padding: 15vh 0 5vh;
    background-image: url(img/tlo_rewitalizacja_lakieru.jpg);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

div#korekta {
    padding: 15vh 0 5vh;
    background-image: url(img/tlo_korekta_lakieru.jpg);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

div#detailing {
    padding: 15vh 0 5vh;
    background-image: url(img/tlo_detailing_wnetrza.jpg);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

div#mycie {
    padding: 15vh 0 0;
    background-image: url(img/mycie_sprzatanie.png);
    background-position: 110vh 25vh;
    background-repeat: no-repeat;
    background-size: 62vh;
}

ul.icons {
    padding: 0;
    list-style-type: none;
    display: block;
}

ul.icons li {
    display: inline-flex;
    width: 25%;
    padding: 100px 12px 15px;
    text-align: center;
    position: relative;
    min-height: 172px;
    min-width: 138px;
    justify-content: center;
    font-weight: 600;
    line-height: 1.4em;
}

ul.icons li:before {
    content: "";
    position: absolute;
    top: 15px;
    right: 15px;
    left: 15px;
    margin: auto;
    display: block;
    width: 80px;
    height: 80px;
    background-image: url(img/cut.png);
    background-repeat: no-repeat;
    background-position: -23px -908px;
}

/* FOLIE */

#folie .icons li:nth-of-type(1):before {
	background-position: -23px -908px;
}

#folie .icons li:nth-of-type(2):before {
    background-position: -175px -908px;
}

#folie .icons li:nth-of-type(3):before {
	background-position: -323px -908px;
}

#folie .icons li:nth-of-type(4):before {
	background-position: -467px -908px;
}

#folie .icons li:nth-of-type(5):before {
	background-position: -25px -1060px;
}

#folie .icons li:nth-of-type(6):before {
	background-position: -175px -1060px;
}

#folie .icons li:nth-of-type(7):before {
	background-position: -323px -1060px;
}

/* CERAMIKA */

#ceramika .icons li:nth-of-type(1):before {
	background-position: -23px -1271px;
}

#ceramika .icons li:nth-of-type(2):before {
	background-position: -168px -1271px;
}

#ceramika .icons li:nth-of-type(3):before {
	background-position: -320px -1271px;
}

#ceramika .icons li:nth-of-type(4):before {
	background-position: -461px -1271px;
}

#ceramika .icons li:nth-of-type(5):before {
	background-position: -24px -1422px;
}

#ceramika .icons li:nth-of-type(6):before {
	background-position: -170px -1422px;
}

#ceramika .icons li:nth-of-type(7):before {
	background-position: -320px -1422px;
}

/* INDYWIDUALNE */

#indywidualne .icons li:nth-of-type(1):before {
	background-position: -23px -1624px;
}

#indywidualne .icons li:nth-of-type(2):before {
	background-position: -174px -1624px;
}

#indywidualne .icons li:nth-of-type(3):before {
	background-position: -323px -1624px;
}

#indywidualne .icons li:nth-of-type(4):before {
	background-position: -466px -1624px;
}

#indywidualne .icons li:nth-of-type(5):before {
	background-position: -27px -1774px;
}

#indywidualne .icons li:nth-of-type(6):before {
	background-position: -174px -1774px;
}

#indywidualne .icons li:nth-of-type(7):before {
	background-position: -320px -1774px;
}

#indywidualne .icons li:nth-of-type(8):before {
	background-position: -464px -1774px;
}

/* DETAILING */

#detailing .icons li:nth-of-type(1):before {
	background-position: -25px -1970px;
}

#detailing .icons li:nth-of-type(2):before {
	background-position: -179px -1970px;
}

#detailing .icons li:nth-of-type(3):before {
	background-position: -324px -1970px;
}

#detailing .icons li:nth-of-type(4):before {
	background-position: -469px -1970px;
}

#detailing .icons li:nth-of-type(5):before {
	background-position: -26px -2119px;
}

#detailing .icons li:nth-of-type(6):before {
	background-position: -180px -2119px;
}

#detailing .icons li:nth-of-type(7):before {
	background-position: -328px -2119px;
}

.page-id-13 .my-special-content .wp-block-group__inner-container .container {
	padding-left: 80px;
}

.page-id-13 .my-special-content .container h2 {
	margin-left: -70px;
}

.page-id-13 .my-special-content .container h4 {
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
    font-size: 16px;
}

.page-id-11 .my-special-content h3 {
    display: flex;
}

.page-id-11 .my-special-content h3 > mark {
    display: block;
    margin-left: auto;
    margin-right: 0;
    max-width: 135px;
    text-align: right;
    word-break: unset;
    min-width: 100px;
}

.page-id-19 #wpgmza_map {
    min-height: 50vh;
}

.page-id-16 .my-special-content , .single .my-special-content {
    width: 100%;
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.realizacje-grid .grid-post-header h2 {
    margin-bottom: 0;
    margin-top: 2vh;
}

.realizacje-grid .wp-block-gallery.columns-3 .blocks-gallery-item {
    margin-right: 0;
    margin-bottom: 0;
}

.realizacje-grid {
    padding-top: 5vh;
    padding-bottom: 5vh;
}

.realizacje-grid ul {
    padding: 6vh 0;
}

.realizacje-grid .blocks-gallery-item figure {
    position: relative;
}

.realizacje-grid .blocks-gallery-item figure figcaption, .grid-post-header {
    opacity: 0;
    color: #fff;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    text-align: center;
}

.realizacje-grid .blocks-gallery-item figure:hover figcaption , .projects-grid a:hover .grid-post-header {
    opacity: 1;
    background: rgba(0,0,0,.85);
}

.realizacje-grid .blocks-gallery-item figure figcaption h2, .grid-post-header h2 {
    font-size: 3vh;
    color: #fff;
    margin-bottom: 0;
}

.projects-grid {
    padding-left: 15px;
    padding-right: 15px;
}

.home .projects-grid {
    padding: 0;
    margin-bottom: 5vh!important;
}

.projects-grid a {
    min-height: 25vh;
    display: block;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.single .kt-svg-icon-list-single {
    color: #be1622;
}

.row.my-wp-gallery {
    margin: 0;
}

.row.my-wp-gallery > .my-gal-item {
    padding: 0;
}

.my-gal-item a {
    min-height: 75px;
    display: block;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    margin-right: 5px;
    margin-bottom: 5px;
}

.my-first-image {
    min-height: 350px;
    display: block;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    margin-right: 5px;
    margin-bottom: 5px;
}

.my-first-image:hover , .my-gal-item a:hover {
    opacity: 0.6;
}

.featherlight-next span, .featherlight-previous span {
    font-size: 40px;
    color: #b91621;
}

.my-post-nav {
    padding-top: 5vh;
    padding-bottom: 5vh;
}

.single hr {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
}

.my-first-image:hover, .my-gal-item a:hover {
    opacity: 1;
    box-shadow: inset 0px 0px 0px 3px #be1622;
    filter: brightness(1.1) contrast(1.3);
    transform: scale(1.05);
    z-index: 1;
}

.my-first-image:hover {
    transform: scale(1.01);
}

.uslugi-boxy {
    z-index: 2;
    position: relative;
}

.my-pagination h2.screen-reader-text {
    display: none!important;
}

.nav-links {
    width: 100%;
    max-width: 1920px;
    margin: auto;
    text-align: center;
    padding-top: 9vh;
    padding-bottom: 3vh;
    padding-left: 15px;
    padding-right: 15px;
}

.nav-links a.next.page-numbers {
    float: right;
    display: inline-flex;
}

.nav-links a.prev.page-numbers {
    float: left;
    display: inline-flex;
}

.page-numbers {
    display: none;
}

@media (min-width: 1200px) {

}

@media (max-width: 1199px) {

}

@media (min-width: 992px) {

}

@media (max-width: 991px) {

}

@media (min-width: 768px) {

}

@media (max-width: 767px) {

}

@media (min-width: 401px) {

}

@media (max-width: 400px) {

}

.myhidden {
    display: none;
}

.appear3 {
       -webkit-animation: fadeinbottom 1s forwards; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadeinbottom 1s forwards; /* Firefox < 16 */
        -ms-animation: fadeinbottom 1s forwards; /* Internet Explorer */
         -o-animation: fadeinbottom 1s forwards; /* Opera < 12.1 */
            animation: fadeinbottom 1s forwards;
}

.appear2 {
       -webkit-animation: fadein2 0.5s forwards; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein2 0.5s forwards; /* Firefox < 16 */
        -ms-animation: fadein2 0.5s forwards; /* Internet Explorer */
         -o-animation: fadein2 0.5s forwards; /* Opera < 12.1 */
            animation: fadein2 0.5s forwards;
}

.appear1 {
       -webkit-animation: fadein 0.5s forwards; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 0.5s forwards; /* Firefox < 16 */
        -ms-animation: fadein 0.5s forwards; /* Internet Explorer */
         -o-animation: fadein 0.5s forwards; /* Opera < 12.1 */
            animation: fadein 0.5s forwards;
}

.appear0 {
       -webkit-animation: fadeinbase 0.5s forwards; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadeinbase 0.5s forwards; /* Firefox < 16 */
        -ms-animation: fadeinbase 0.5s forwards; /* Internet Explorer */
         -o-animation: fadeinbase 0.5s forwards; /* Opera < 12.1 */
            animation: fadeinbase 0.5s forwards;
}

.bounce {
        -webkit-animation: mybounce 0.5s forwards; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: mybounce 0.5s forwards; /* Firefox < 16 */
        -ms-animation: mybounce 0.5s forwards; /* Internet Explorer */
         -o-animation: mybounce 0.5s forwards; /* Opera < 12.1 */
            animation: mybounce 0.5s forwards;
    }

@keyframes mybounce {
        0%   { transform: scale(1); }
        25%  { transform: scale(.9); }
        50%  { transform: scale(1.1); }
        100% { transform: scale(1); }
}

@-moz-keyframes mybounce {
        0%   { transform: scale(1); }
        25%  { transform: scale(.9); }
        50%  { transform: scale(1.1); }
        100% { transform: scale(1); }
}

@-webkit-keyframes mybounce {
        0%   { transform: scale(1); }
        25%  { transform: scale(.9); }
        50%  { transform: scale(1.1); }
        100% { transform: scale(1); }
}

@-ms-keyframes mybounce {
        0%   { transform: scale(1); }
        25%  { transform: scale(.9); }
        50%  { transform: scale(1.1); }
        100% { transform: scale(1); }
}

@-o-keyframes mybounce {
        0%   { transform: scale(1); }
        25%  { transform: scale(.9); }
        50%  { transform: scale(1.1); }
        100% { transform: scale(1); }
}

@keyframes fadeinbase {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadeinbase {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeinbase {
    from { opacity: 0;  }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadeinbase {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadeinbase {
    from { opacity: 0; }
    to   { opacity: 1; }
}



@keyframes fadeinbottom {
    from { opacity: 0; top: 1000px; }
    to   { opacity: 1; top: 0px;}
}

/* Firefox < 16 */
@-moz-keyframes fadeinbottom {
    from { opacity: 0; top: 1000px; }
    to   { opacity: 1; top: 0px;}
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeinbottom {
    from { opacity: 0; top: 1000px; }
    to   { opacity: 1; top: 0px;}
}

/* Internet Explorer */
@-ms-keyframes fadeinbottom {
    from { opacity: 0; top: 1000px; }
    to   { opacity: 1; top: 0px;}
}

/* Opera < 12.1 */
@-o-keyframes fadeinbottom {
    from { opacity: 0; top: 1000px; }
    to   { opacity: 1; top: 0px;}
}


@keyframes fadein {
    from { opacity: 0; left: -3000px; }
    to   { opacity: 1; left: 0px;}
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; left: -3000px; }
    to   { opacity: 1; left: 0px;}
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; left: -3000px; }
    to   { opacity: 1; left: 0px;}
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; left: -3000px; }
    to   { opacity: 1; left: 0px;}
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; left: -3000px; }
    to   { opacity: 1; left: 0px;}
}


@keyframes fadein2 {
    from { opacity: 0; right: -3000px; }
    to   { opacity: 1; right: 0px;}
}

/* Firefox < 16 */
@-moz-keyframes fadein2 {
    from { opacity: 0; right: -3000px; }
    to   { opacity: 1; right: 0px;}
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein2 {
    from { opacity: 0; right: -3000px; }
    to   { opacity: 1; right: 0px;}
}

/* Internet Explorer */
@-ms-keyframes fadein2 {
    from { opacity: 0; right: -3000px; }
    to   { opacity: 1; right: 0px;}
}

/* Opera < 12.1 */
@-o-keyframes fadein2 {
    from { opacity: 0; right: -3000px; }
    to   { opacity: 1; right: 0px;}
}

@-webkit-keyframes bounce {
  0%, 100% {
    -webkit-transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-5px);
  }
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

.comparison-slider-wrapper {
	position: relative;
	width: 100%;
	margin: 20px 0;
	background-color: white;
}

.comparison-slider {
		position: relative;
		width: 100%;
		margin: 0;
		border: 5px white solid;
		box-sizing: border-box;
	}

.comparison-slider > img {
	width: 100%;
			height: auto;
			display: block;
		}

	 .comparison-slider	.overlay {
			display: none;
			position: absolute;
			width: 250px;
			bottom: 20px;
			right: 20px;
			background-color: rgba(0, 0, 0, 0.4);
			padding: 10px;
			box-sizing: border-box;
			color: #DDD;
			text-align: right;
		}

	.comparison-slider .resize {
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 50%;
			overflow: hidden; }

	.comparison-slider .resize	> img {
				display: block;
			}
	.comparison-slider .resize	.overlay {
				right: auto;
				left: 20px;
				text-align: left;
			}


.comparison-slider .divider {
    position: absolute;
    width: 0px;
    height: 100%;
    left: 50%;
    top: 0;
    bottom: 0;
    margin-left: -1px;
    cursor: ew-resize;
}

.comparison-slider .divider:before {
    content: "";
    position: absolute;
    width: 90px;
    height: 100%;
    left: -45px;
    background-image: url(img/move.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.go-to-okami-performance {
    color: #fff;
    text-transform: none;
    line-height: 1.4em;
    text-align: center;
    width: 100%;
    max-width: 200px;
    margin: auto;
    font-weight: 300;
}

.go-to-okami-performance a {
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
}

.go-to-okami-performance a:hover {
    color: #be1622;
    text-decoration: none;
}

@media screen and (max-width: 1370px) {

    .projects-grid a {
        min-height: 32vh;
    }

}

@media screen and (max-width: 1340px) {

    article {
        overflow: hidden;
    }

    .box-liczyby:before {
        left: 50vw;
    }
}
@media screen and (max-width: 1370px) {

    .projects-grid a {
        min-height: 35vh;
    }

}

@media screen and (max-width: 1199px) {

    article {
        overflow: hidden;
    }

    .box-liczyby:before {
        left: 50vw;
    }

    .folie a, .ceramika a, .indywidualne a, .wosk a, .kolor a, .rewitalizacja a, .korekta a, .wnetrze a, .mycie a {
        min-height: 182px;
    }
}

@media screen and (max-width: 991px) {
    #homeUslugi , .wp-block-cover .wp-block-cover__inner-container {
        width: 100%;
        max-width: 740px;
        margin-left: auto;
        margin-right: auto;
    }

    #homeUslugi > div > .wp-block-columns , .home .container > div > .wp-block-columns.box-liczyby {
        flex-direction: column;
    }

    .home .container > div > .wp-block-columns {
        flex-direction: column-reverse;
    }

    #homeUslugi > div > .wp-block-columns .max-left {
        margin-left: 0;
        margin-right: 0;
    }

    #homeUslugi img {
        margin-bottom: 5vh;
    }

    .wp-block-column , .wp-block-image img {
        margin-left: auto!important;
        margin-right: auto!important;
    }

    .wp-block-columns.box-liczyby .wp-block-column {
        margin-left: 0!important;
    }

    .wp-block-column.myflex {
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: center!important;
    }

    .wp-block-column.myflex > .has-link {
        align-self: center;
        margin-top: 15px;
        margin-bottom: 15px;
    }

    .navbar-toggler-icon {
        display: block;
        width: 1.5em;
        height: 2px;
        margin-bottom: 7px;
        vertical-align: middle;
        content: "";
        background: no-repeat center center;
        background-size: 100% 100%;
        background-color: #be1622;
    }

    .navbar-toggler-icon:last-of-type {
        margin-bottom: 0;
    }

    .navbar-toggler {
        padding: 10px 15px;
        border: 1px solid #be1622;
        border-radius: 0;
    }

    .navbar.fixed-top.main-nav {
        background: rgba(0, 0, 0, 0.95);
    }

    .main-nav .menu-item {
        padding: 5px 0;
        text-align: center;
    }

    .home .social-box {
	    max-width: 40%;
	    margin-left: auto;
	    margin-right: auto;
	}

    .projects-grid a {
        min-height: 19vh;
    }

}

@media screen and (min-width: 600px) and (max-width: 991px ) {
    .page-id-13 .uslugi-boxy .wp-block-columns .wp-block-column {
        flex-basis: calc(30% - 16px)!important;
        flex-grow: 0!important;
    }

    .page-id-13 .uslugi-boxy .wp-block-columns {
        flex-wrap: wrap;
        margin-bottom: 0;
    }

    .merc-uslugi {
        margin-top: 50px;
    }

    div#folie {
        padding: 15vh 0;
        margin-top: -8vh;
    }

}

@media screen and (max-width: 767px) {
    .video-caption {
        padding-right: 15px;
        padding-top: 30vh;
    }

    .video-caption h2 {
        font-size: 35px;
    }

    .my-page-title, h2 {
        font-size: 35px;
    }

    h3.first-line {
        font-size: 3.19vh;
    }

    .box-liczyby:before {
        left: auto;
        right: -25px;
        width: 80%;
        bottom: -25vh;
        margin: auto;
    }

    .home-paralax-box {
        padding-top: 10vh;
        padding-bottom: 5vh;
    }

    .projects-grid a {
        min-height: 50vh;
    }

    .footer-content .col, .footer-content > div {
        display: block!important;
        width: 100%;
    }

    footer ul.social-box {
        float: none!important;
        text-align: right!important;
        position: relative!important;
        right: 0!important;
        bottom: 0!important;
        justify-content: center;
        margin-top: 20px;
    }

    .lastrow {
        padding: 10px 0;
        border-top: 1px solid #222;
        margin: 0;
        flex-direction: column;
    }

    .lastrow > div , .info-box {
        text-align: center!important;
    }

    .animuslugi .wp-block-columns {
        margin-bottom: 0;
    }

    .folie a, .ceramika a, .indywidualne a, .wosk a, .kolor a, .rewitalizacja a, .korekta a, .wnetrze a, .mycie a {
        min-height: 130px;
    }

    .has-link {
        margin-top: 60px;
    }

    .merc-uslugi {
        margin-top: 30px;
    }

    div#wosk img {
        margin: 0;
        margin-top: 0;
        margin-bottom: -20vh;
        right: 0;
        position: relative;
        max-width: 81vh;
    }

    .page-id-13 .my-special-content .container h2 {
        margin-left: 0;
    }

    .page-id-13 .my-special-content .wp-block-group__inner-container .container {
        padding-left: 15px;
    }

    .firstWord span {
        position: relative;
        margin-bottom: 0;
        display: inline-block;
        float: none;
        padding-right: 5px;
    }

    div#folie .wp-block-columns:last-of-type .wp-block-column:last-of-type:before {
        bottom: -100px;
    }

    .my-page-header {
        padding: 40vh 0 6vh;
    }

    .my-page-header ul.social-box {
        display: none;
    }

    .container.title-container > h1 {
        margin-bottom: 10px;
    }

    .my-post-nav {
        padding-top: 5vh;
        padding-bottom: 5vh;
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .my-post-nav > * {
        margin-top: 30px;
        margin-bottom: 30px;
        display: flex;
        flex-direction: row-reverse;
        line-height: 3.5em;
    }

    .my-post-nav > a {
        display: none;
    }

    .page-id-16 iframe {
        width: 100%;
    }

    .container.title-container>h1 {
	    max-width: 200px;
	}
    
    .go-to-okami-performance {
        text-align: center;
        width: 100%;
        max-width: 155px;
        margin: 0;
        margin-right: auto;
    }
}