@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

html {
    margin:0;
    padding:0;
    color:var(--colorBlack);
    font-weight: 400;
    font-size: 16px;
    background: var(--colorKrem);
}
body {
    margin:0;
    padding:0;
}
.end {
    clear:both;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    font-weight: 400;
	 font-family: "Rubik", sans-serif;
}
:root {
	--transitionTime: .25s;
	--colorWhite: #fff;
	--colorWhites: rgba(255,255,255,0.1);
	--colorWhitess: rgba(255,255,255,0.5);
	--colorBlacks: rgba(255,255,255,0.1);
	--colorBlackss: rgba(255,255,255,0.5);
	--colorBlack: #000000;;
	--colorBlack03: rgba(0,0,0,0.3);
    --colorGrey: #767676;
	--colorBlacks: rgba(0,0,0,0.1);
    --colorKremD: #fffcc9;
    --colorKremL: rgba(245,245,220,0.75);
    --colorKrem2:#ffb74d;
    --colorBrown:#242424;
    --colorRed: #c4070b;
    --colorRal: #fffcc9;
  --height: 100%;
  --border-width: 200px;
  --border-height: 200px;
}
img {
    max-width:100%;
    height:auto;
    float:left;
}
img.aligncenter {
    float: none;
    text-align: center;
    margin: 0 auto;
}
img.alignleft {
    padding: 20px;
}
img.emoji {
    float: none;
}

.centr {
    text-align: center;
}
p, ul {
    line-height: 1.6;
  text-rendering: optimizeLegibility;
    padding: 0 0 10px 0;
}
li {
    line-height: 1.3;
  text-rendering: optimizeLegibility;
}
b, strong {
    font-weight: 600;
}
a.btn, .btn a, .btn2 a {
    padding: 15px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: 10px;
    color: var(--colorBlack);
    text-align: center;
    text-transform: uppercase;
    background: var(--colorKrem2);
    font-weight: 700;
    font-size: 14px;
    line-height: 22px;
    display: inline-block;
    clear: both;
}
a.btn:hover, .btn a:hover {
    background: var(--colorGrey);
    color: var(--colorWhite);
}
.btn2 a:hover {
    background: none;
    color: var(--colorWhite);
}

a.btns, .btns a {
    min-width: 198px;
    padding: 10px 15px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: var(--colorBlack);
    text-align: center;
    text-transform: uppercase;
    background: var(--colorWhite);
    font-size: 14px;
    line-height: 22px;
    border:3px solid var(--colorWhite);
}
a.btns:hover, .btns a:hover {
    background:none;
    color:var(--colorWhite);
}



a.btnss {
    padding: 10px 15px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: var(--colorBlack);
    text-align: center;
    text-transform: uppercase;
    background: var(--colorWhite);
    font-size: 14px;
    line-height: 22px;
    border:3px solid var(--colorWhite);
    font-weight:500;
}
a.btnss:hover {
    background:none;
    color:var(--colorWhite);
}


@media (min-width:1300px) {	
	.cont {
		width:1200px;
		margin:0 auto;
	}
	.cont2 {
		width:80%;
		margin:0 auto;
	}
    .pads {
        padding: 40px;
    }
}
@media (min-width:860px)  and (max-width:1300px) {
	.cont, .cont2 {
		width:80%;
		margin:0 auto;
	}
}
@media (max-width:800px) {
	.cont, .cont2, header .fright {
		width:calc(100% - 50px);
		margin:0 auto;
	}
	header .cont {
		width:100%;
	}
}


  .gmap {
    position: relative;
    padding-bottom: 75%;
    height: 0;
    overflow: hidden;
  }
  .gmap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
  }


.page-divider{
  margin-top: 50px;
  margin-left: 5% !important;
  margin-right: 5% !important;
}

.wrapper{
  padding: 0 75px;
  display: flex;
  color: #ffffff;
}

.title-left-img{
  width: 90%;
  height: 60%;
  border-radius: 10px;
}

.left-column{
  width: 70%;
  text-align: center;
}

.left-column h3{
  font-size: 35px;
  margin-top: 40px;
  margin-bottom: 20px;
  font-weight: bold;
  color: black;
}

.left-column p{
  color: black;
}

.center-column{
  width: 30%;
  background: green;
}

.description-article{
  font-size: 18px;
}

.author{
  color: #828282;
  margin-top: 30px;
  font-size: 13px;
}
@media(min-width:760px) {
    header#top {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
        z-index: 9999;
    }
}
@media(max-width:760px) {
    header .logo img {
        width: 50%;
        float: none;
        margin-left: 25%;
    }
}
#mega-menu-wrap-menu-pl {
    background: none !important;
}

a.mPS2id-highlight

{
    background: var(--colorKrem2) !important;
    color: var(--colorBrown) !important;
}
@media only screen and (min-width: 768px) {
    
    .fle {
        display: flex;
        justify-content: center;
        padding: 10px 0;
    }
    
    header.fix .fle {
	}
    
    .pc-1 {
        display: inline-block;
        vertical-align: top;
        width: calc(100% - 150px);
    }
    .pc-2 {
        display: inline-block;
        vertical-align: top;
        width: calc(100% - 150px);
    }
    .pc-2 ul {
        text-align: right !important;
    }
    .logo {
        display: inline-block;
        vertical-align: top;
    }
    
    header .logo{
        width: 300px;
        max-width: 300px;
    }
    header.fix .logo{
        width: 80px;
    }
    
}


@media (min-width: 800px) {
    
    header.fix {
        -webkit-animation-name: fadeInDown;
      animation-name: fadeInDown;
      -webkit-animation-duration: 2s;
      animation-duration: 2s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
        height: 5.5em;
    }
	header.fix {
		position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(255,255,255,0.6);
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.1);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    z-index: 99999;
    transition: all .25s ease;
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
	}
    header.fix .plh {
        display: none;
    }
    header .max-mega-menu * {
        font-size: 16px !important;
        text-transform: uppercase !important;
        font-weight: 700 !important;
    }
    header.fix #mega-menu-menu-pl * {
        font-size: 16px !important;
    }
    header #mega-menu-menu-pl li {
        padding: 0 10px  !important;
    }
    header.fix li a {
        color: #000 !important;
    }
    header.fix ul {
        line-height: 5.5em !important;
    }
}


@-webkit-keyframes fadeInDown {
            0% {
               opacity: 0;
               -webkit-transform: translateY(-20px);
            }
            100% {
               opacity: 1;
               -webkit-transform: translateY(0);
            }
         }
         
         @keyframes fadeInDown {
            0% {
               opacity: 0;
               transform: translateY(-20px);
            }
            100% {
               opacity: 1;
               transform: translateY(0);
            }
         }
         
@media (min-width: 800px) {
  header#tops {
    width: 100%;
  }
}




footer {
    background: var(--colorWhite);
    color: var(--colorBlack);
    padding: 20px 0;
    text-align: right;
    font-size: 80%;
}
footer a {
    color: var(--colorDarkRed);
}

/* --- Banner --> --- */

.banner {
    position: relative;
    width: 100%;
    display: flex;
  justify-content: center;
}

.bg1 {
    background: var(--colorWhite);
}
.bg1 strong, .bg1 b, .bg1 h3 {
    color: var(--colorKrem2);
}
.bg2 {
    background: var(--colorBrown);
    color: var(--colorWhite);
}
.bg3 {
    background: var(--colorRal);
    color:var(--colorBlack);
}
.bg3 strong, .bg3 b, .bg3 h3 {
    color: var(--colorKrem2);
}
.bg3 em strong,
.bg3 em b,
.bg3 em {
    color: var(--colorKrem2);
}


.bg2 h2,
.bg2 h3,
.bg2 h4,
.bg2 h5 {
    color: var(--colorKrem2);
    font-size: 42px;
    font-weight: 600;
}

.bg1 h4 {
    color: var(--colorKrem2) !important;
    text-transform: uppercase;
    font-size: 24px;
}
.bg1 h1 {
    color: var(--colorBrown) !important;
    font-size: 36px;
    font-weight: 700;
}

.bg3 h4 {
    color: var(--colorKrem2) !important;
    text-transform: uppercase;
    font-size: 24px;
}
.bg3 h2 {
    color: var(--colorKrem) !important;
    font-size: 36px;
}

#Kontakt h2 {
    color: var(--colorKrem2) !important;
    text-transform: uppercase;
    font-size: 36px;
}
.p-t-1 {
    padding-top: 80px;
}
.p-b-1 {
    padding-bottom:  80px;
}
.p-relative {
  position: relative;
}

.nasze-koty-image::before {
  content: '';
  background: var(--colorKrem2);
  display: block;
  height: 50%;
  z-index: -1;
  position: absolute;
  width: calc(50% + 35px);
  right: 35px;
  left: 0px;
}
.nasze-koty-image img {
    padding-top: 0px;
    padding-left: 0px;
  padding-top: 35px;
  padding-left: 35px;
}

.flexx {
  display: flex;
      flex-direction: column;
}

.flexx .panel-grid-cell:first-child {
    order: 2;
}
.flexx .panel-grid-cell:last-child {
    order: 1;
}

@include desktop {
    #{$wrap} #{$menu} li.mega-menu-megamenu > ul.mega-sub-menu {
        max-height: 200px;
        overflow: auto;
    }
}

.bg1 .sow-accordion-panel-header-container {
    border-bottom: 1px solid rgba(0,0,0,0.2) !important;
}

.bg1 .sow-accordion-title {
    color: var(--colorBrown);
    text-transform: uppercase;
    font-size: 24px;
    border-bottom: 1px solid var(--colorBlackss);
}

.bg3 .sow-accordion-title {
    color: var(--colorBlack);
    text-transform: uppercase;
    font-size: 24px;
    border-bottom: 1px solid var(--colorKrem2);
    padding: 0 0 15px 0;
}

.bg1 ul > li,
.bg2 ul > li,
.bg3 ul > li {
  position: relative;
}

.bg1 ul li,
.bg2 ul li,
.bg3 ul li {
  overflow: hidden;
  margin: 0;
}

.bg1 ul li::before,
.bg3 ul li::before {
  display: inline-block;
  width: 25px;
  height: 10px;
  content: url('../images/bg1-pkt.png');
}


.bg2 ul li::before {
  display: inline-block;
  width: 25px;
  height: 10px;
  content: url('../images/bg2-pkt.png');
}

#Kontakt ul li::before {
    display: none;
}
#Kontakt ul li {
    padding-bottom: 20px;
}
#Kontakt ul li:last-child {
    padding-bottom: none;
}

.mr-2, .mx-2 {
  margin-right: .7rem !important;
    color: var(--colorWhite) !important;
    font-size: 18px;
}
#Kontakt h5 {
    font-size: 24px;
    border-bottom: 1px solid rgba(255,183,77, 0.2) !important;
    padding-bottom: 5px;
    margin-bottom: 5px;
}
#Kontakt h5 i {
    color: var(--colorKrem2) !important;
}
#Kontakt a {
    color: var(--colorBlack);
}

#Kontakt a:hover {
    color: var(--colorKrem2);
}

.bg1 a {
    color: var(--colorRed);
}

.bg2 #Kontakt form label input,
.bg2 #Kontakt form label textarea {
    width: 100%;
    padding: 10px;
    background: none;
    color: var(--colorWhite);
    border:1px solid var(--colorWhitess);
} 
.bg2 #Kontakt form label input:hover,
.bg2 #Kontakt form label textarea:hover,
.bg2 #Kontakt form label input:focus,
.bg2 #Kontakt form label textarea:focus,
.wpcf7-form-control:focus{
    border:1px solid var(--colorKrem2) !important;
}

input.wpcf7-submit {
    background:  var(--colorKrem2) !important;
    border: none !important;
    padding: 10px 20px;
    float: right;
}


.bg-tyt {
  margin: 0;
  padding: 0;
  background-image: url('../images/hotel-dla-kotow-skawina-banner.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.bg-tyt .tl {
  padding: 400px 0 20px 0;
  text-align: center;
}

.bg-tyt .tl h2, .bg-tyt .tl h1 {
    overflow-x: clip;
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  font-size: clamp(1.2rem, 8vw, 5rem);
  text-transform: uppercase;
  perspective: 2.5em;
}
.bg-tyt .tl h2, .bg-tyt .tl h1 {
  --glow-color: hsl(248, 16%, 39%);
  background: inherit;
  background-size: cover;
  background-position: center;
  background-clip: text;
  -webkit-background-clip: text;
  color: rgba(0, 0, 0, 0);
  mix-blend-mode: plus-lighter;
  -webkit-text-stroke: 0.012em rgba(241, 240, 255, 0.384);
  filter: drop-shadow(0px 0px 5px var(--glow-color)) 
    drop-shadow(0px 0px 10px var(--glow-color));
}





img.post-featured-image {
	position:relative;
}



.blog ul.lcp_catlist li .post-thumbnail-container .featured-image-meta {
	position: absolute;
	top: 30px;
    right: 0;
}
.blog ul.lcp_catlist li {
    position: relative;
}
.blog ul.lcp_catlist li h4 {
    text-align: center;
}
.blog ul.lcp_catlist li h4 a{
    color: var(--colorKrem2);
    font-size: 28px;
    text-align: center;
}
span.onDate {
	float:left;
}
span.bl_categ {
	float:right;
}
.featured-image-meta, .featured-image-meta a {
	color:#fff;
}

body:not(.single) article.hentry .post-thumbnail-container > a::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: auto;
    opacity: 0;
    -webkit-transition: .3s opacity ease-out;
    transition: .3s opacity ease-out;
}
#content-masonry article.hentry .post-thumbnail-container > a::before {
    content: "\e005";
    font-family: "iconmeta";
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 1em;
    height: 1em;
    margin: auto;
    opacity: 0;
    color: #FFF;
    background: transparent;
    border: none;
    -webkit-transition: .3s all ease-out;
    transition: .3s all ease-out;
}

article .post-thumbnail-container {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
}

.article-inner {
	padding:10px;
}
h2.entry-title {
	text-align:center;
	color:#e31e27;
}
h2.entry-title a {
	color:#334881;
}
h2.entry-title a:hover {
	color:#e31e27;
}
.post-continue-container {
	display:block;
	clear:both;
	border-top:1px solid #d9d9d9;
}
a.continue-reading-link {
	float:right;
	padding:20px;
	color:#334881;
	font-weight:700;
}
a.continue-reading-link:after {
    display: inline-block;
    content: attr(data-icon);
    font-family: 'FontAwesome';
    speak: none;
    margin-left: 5px;
    color: #e31e27;
    content: "\f101";
	padding-left:5px;
}
a.continue-reading-link:hover {
	color:#e31e27;
}

.pagination, .page-link {
    border-color: #eeeeee;
}
.pagination {
    display: table;
    float: none;
    clear: both;
    margin: 2.5em auto;
    padding: .5em 1.25em;
    border: 1px solid #d9d9d9;
    border-radius: 100px;
    text-align: center;
}
.pagination a {
	color:#e37564;
	padding:0 0  0 15px;
}
.nav-links {
	font-weight: bold;
}

@media (min-width:860px) {
	.blog ul li {
		display:inline-block;
		width:calc(100% / 3 - 15px);
		vertical-align:top;
		border:1px solid rgba(0,0,0,0.1);
		margin:5px
		
	}
}


@media (min-width:600px)  and (max-width:860px) {
	.blog ul li {
		display:inline-block;
		width:calc(100% / 2 - 15px);
		vertical-align:top;
		border:1px solid rgba(0,0,0,0.1);
		margin:5px
		
	}
}

@media (max-width:600px) {
	.blog ul li {
        display: block;
		vertical-align:top;
		border:1px solid rgba(0,0,0,0.1);
		margin:5px
		
	}
}
.blog ul li {
    border: 1px solid var(--colorBlack03);
}

.post-thumbnail-container {
  float: left;
  position: relative;
  margin-right: 14px;
  width: 100px;
}



span.onDate {
    background: var(--colorKrem2);
    padding: 10px 20px;
}

.post-thumbnail-container img {
    float: none;
}

.blog li .lcp_excerpt {
    padding: 20px;
}



.has-post-thumbnail img {
        display: block;
        clear: both;
        float: none;
    }

.lista-wpisow article {
    display: inline-block;
    width: 50%;
}

.img-rad img {
    border-radius: 50%;
}