* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	line-height: 1.5em;
}
#loading {
	position: fixed;
	display: block;
	width: 100vw;
	height: 100%;
	top: 0;
	left: 0;
	text-align: center;
	opacity: 0.8;
	background-color: rgb(255, 255, 255);
	z-index: 99;
}

#loading-image {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 100;
	transform: translate(-100px, -100px);
}

body {
	position: relative;
	font-family: 'Montserrat', sans-serif;
	background-color: rgb(252, 250, 241);
	line-height: 1;
}

.container {
	max-width: 1920px;
	padding: 0;
}
nav {
	background-color: rgb(252, 250, 241);
	text-transform: uppercase;
	z-index: 10;
}
.navbar-brand {
	padding-left: 20px;
	max-width: 50%;
}
/* likwiduje obramowanie hamburgera*/
.navbar-toggler:focus,
.navbar-toggler-icon:focus {
	outline: none;
	box-shadow: none;
}
a {
	text-decoration: none;
}
a.nav-link,
a.navbar-brand,
i.burger {
	color: rgb(0, 0, 0);
	padding-left: 20px;
}

a.nav-link:hover,
a.navbar-brand:hover,
i.burger:hover {
	color: rgb(133, 133, 133);
	transition-duration: 50ms;
}
a.nav-link.active {
	/*aktywne linki w menu*/
	color: rgb(173, 173, 85) !important;
}
i.burger {
	padding: 10px;
}
.kontakt > a {
	color: black;
	transition: 0.3s;
}
.kontakt > a:hover {
	color: darkgray;
}
p {
	font-family: 'Montserrat', sans-serif;
}
h1 {
	font-size: 5vw;
	font-weight: lighter;
}
h2 {
	font-size: 2.5em;
	font-weight: bold;
	font-family: 'Cormorant', serif;
}
h3 {
	color: white;
	font-weight: bold;
}
h4 {
	height: 200px;
	font-weight: bold;
	color: white;
	font-family: 'Cormorant', serif;
	text-align: justify;
}

.herotxt {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: white;
	z-index: 5;
	text-align: center;
	transform: translateZ(0);
}

#cytat {
	background-color: rgb(252, 250, 241);
	padding-top: 50px;
	padding-bottom: 50px;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: rgb(0, 0, 0);
	z-index: 5;
}
#opis {
	font-family: 'Montserrat', sans-serif;
	width: 40%;
	text-align: justify;
}
.tekstr {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60vw;
	min-height: 400px;
	background-color: rgb(252, 250, 241);
}
#odpocznij {
	font-family: 'Montserrat', sans-serif;
	width: 40%;
	font-size: 1em;
	text-align: right;

}
.teksty {
	padding: 40px 0px 40px 0px;
	width: 60%;
	text-align: left;
}
.teksty_atrakcje {
	padding: 0px 20px 0px 20px;
	width: 40%;
}
.teksty_cennik {
	text-align: center;
}
#miejsce_obraz {
	background-image: url(http://serwer2223309.home.pl/cicho_chat/img/chichochat_dom.jpg);
}
.kot_bg {
	background-image: url(http://serwer2223309.home.pl/cicho_chat/img/kocie_lapki.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: right;
}
.obraz {
	height: initial;
	width: 40vw;
	min-height: 400px;

	background-position: center;
	background-size: cover;
}

.image {
	height: 100vh;
	position: relative;
	background-image: url(http://serwer2223309.home.pl/cicho_chat/img/chichochat_dom.jpg);
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
	z-index: 0;
}
.image-dark {
	filter: brightness(60%);
}
.flexy_image {
	min-height: 400px;
	background-position: center;
	background-size: cover;
}

.shadow {
	position: absolute;
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: -10;
}
.room {
	position: relative;
	height: 80vh;
	overflow: hidden;
}
.room > a {
	height: inherit;
}
.room_in {
	position: absolute;
	background-position: center;
	background-size: cover;
	filter: brightness(90%);

	height: inherit;
	width: 100%;
	transition: 0.5s;
}
.room_in:hover {
	transform: scale(1.05);
	filter: brightness(100%);
}

.room_name {
	position: absolute;
	bottom: 0px;
	margin: 0;
	color: black;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: normal;
	height: 25%;
	width: 100%;
	text-align: center;
	background-color: rgba(255, 255, 255, 0.7);
}

.content_white {
	background-color: rgb(255, 255, 255);
}
.content_bege {
	background-color: rgb(252, 250, 241);
}
.flexy {
	display: flex;
	align-items: center;
	justify-content: center;
}

strong {
	font-weight: bold;
	font-size: 1em;
}

.atrakcje {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
}

#kontakt {
	background-color: white;
}
#miejsce,
#pokoje,
#kontakt,
#cennik {
	scroll-margin-block-start: 56px;
}
.hlogo {
	max-width: 50vw;
}
.gallery {
	aspect-ratio: 1;
  
	background-size: cover;
	background-position: center;
	transition: 1500ms;
	border-style: solid;
	border-color: white;
  }
  .gallery:hover {
	opacity: 0.5;
  
	transition: 500ms;
  }
  .light {
	opacity: 0.7;
  }
  .link {
	height: 100%;
	width: 100%;
	opacity: 0;
  }
  .popup-image {
	display: none;
 
	width: 100vw;
	height: 100vh;
	backdrop-filter: blur(10px);
	left: 0;
	top: 0;
	background-color: rgba(255, 255, 255, 0.5);
	object-fit: contain;
  }
  .popup-image-active {
	transition: 300ms;
	display: block;
  
  }
  .popup-image-inactive {
	transition: 300ms;
	display:none;
  
  }
  .popup-image img {
	box-shadow: 10px 10px 50px rgb(97, 97, 97);
	border-radius: 5px;
	position: absolute;
	border: 1rem solid;
	border-color: white;
	max-width: 90%;
	max-height: 90%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	
  }
  
  .next-icon, .prev-icon,.close-icon{
	width:50px;
	height:50px;
  background-color: #fff;
	border-radius: 50%;
	position: absolute;
	background-size:30%;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.5;
  transition: opacity 300ms;
  }
  .next-icon:hover, .prev-icon:hover,.close-icon:hover {
  opacity:1;
  transition: opacity 300ms;
  }
  .next-icon{
	top:50%;
	transform: translateY(-50%);
  right: 25px;
  background-image: url(../img/icons/next.svg);
  
  }
  .prev-icon{
	top:50%;
	transform: translateY(-50%);
  left: 25px; 
  background-image: url(../img/icons/prev.svg);
  }
  .close-icon{
	top:10px;
	right:25px;

	background-image: url(../img/icons/close.svg);
  }
  .next-icon img{
  scale:2;
  }
@media only screen and (max-width: 576px) {
	* {
		line-height: 1.2;
	}
	h2 {
		font-size: 2em;
	}

	.blok {
		height: 50vh;
	}
	#room-thumbnail {
		display: none;
	}
	.gallery:hover{
		opacity:1;
	  }
}

@media only screen and (max-width: 765px) {
	.room {
		height: 40vh;
	}
	.atrakcje {
		flex-direction: column;
	}

	.blok1l {
		flex-direction: column-reverse;
	}
	.tekstl,
	.obraz,
	.tekstr,
	.tekstr_kot {
		width: 100vw;
	}
	.teksty_atrakcje {
		width: 80%;
		padding: 20px 0px 20px 0px;
	}
	h1 {
		font-size: 3em;
	}

	#opis,
	#odpocznij {
		width: 90%;
	}
	.teksty {
		width: 80%;
	}

	#kot {
		display: none;
	}
	.rev {
		flex-direction: column-reverse;
	}
}
@media only screen and (max-width: 900px) {
	.logo {
		width: 80%;
	}
	.pokojein {
		flex-direction: column;
		padding: 0;
	}
	.pokoj {
		margin: 10px 0px 0px 0px;
		max-width: 100vw;
		width: 100%;
		height: 50vh;
		padding: 0px 40px 20px 40px;
	}
	h4 {
		height: auto;
	}
}
[class*='col-'] {
	padding: 0px;
	margin: 0px;
}

[class*='row'] {
	padding: 0px;
	margin: 0px;
}

section {
	position: relative;
	width: 100%;
	height: 100%;
}

.bg-wrap {
	clip: rect(0, auto, auto, 0);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.bg {
	position: fixed;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center center;
	transform: translateZ(0);
	will-change: transform;
}

.overlay {
	position: fixed;
	right: 0;
	bottom: 30px;
	left: 0;
	padding: 0 15px;
	z-index: 10;
}