@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=PT+Serif:wght@400;700&display=swap");
body {
margin: 0;
padding: 0;
font-family: 'Inter', sans-serif;
background-color: #fff;
} .container {
width: 100%;
max-width: 1080px;
margin: 0 auto;
} .header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 10px 0 10px; background-color: white;
border-bottom: 1px solid #CCC;
}
.logo img {
height: 80px;
}
.nav {
display: flex;
overflow-x: auto;
white-space: nowrap;
-ms-overflow-style: none; scrollbar-width: none; }
.nav::-webkit-scrollbar {
display: none;
}
.nav a {
text-decoration: none;
color: #333;
font-size: 16px;
margin: 0 10px;
flex-shrink: 0;
} .breadcrumbs {
font-size: 14px;
margin: 20px 0;
display: flex;
align-items: center;
padding: 0 10px;
}
.breadcrumbs a {
color: #333;
}
.breadcrumbs img {
margin: 0 10px;
width: auto;
height: 12px;
} @media screen and (max-width: 767px) {
.breadcrumbs {
display: none;
}
} .image-breadcrumbs {
position: absolute;
top: 20px;
left: 20px;
color: white;
font-size: 14px;
display: none; align-items: center;
}
.image-breadcrumbs img {
margin: 0 10px;
height: 12px;
width: auto;
}
.checkin{
line-height: 12px;
} @media screen and (min-width: 768px) {
.chevron-mobile {
display: none;
}
} @media screen and (max-width: 767px) {
.chevron-desktop {
display: none;
}
.image-breadcrumbs a {
color: #FFF;
}
.overlay-button {
font-size: 12px;
}
} .overlay-button {
position: absolute;
bottom: 20px;
right: 16px;
background-color: rgba(0, 0, 0, 0.6); color: #fff; padding: 10px 20px;
font-size: 16px;
border-radius: 20px; cursor: pointer;
text-align: center;
text-decoration: none;
white-space: nowrap;
} .gallery-container {
width: 100%;
display: flex;
flex-direction: column;
gap: 10px;
padding: 0;
}
.main-photo {
position: relative;
width: 100%;
height: 400px;
background-size: cover;
background-position: center;
background-image: url(//www.365noci.cz/wp-content/themes/365/assets/css/hotel.jpg);
}
.main-photo::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100px;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.small-photos {
display: flex;
gap: 10px;
}
.small-photo {
background-size: cover;
background-position: center;
height: 200px;
width: 100%;
position: relative;
}
.meal-type {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 180px; }
.roominfo{
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 180px;    
} .tags-container {
display: flex;
gap: 0px;
flex-wrap: wrap;
}
.tag {
background-color: #f5f5f5;
color: #666;
padding: 10px 16px;
border-radius: 20px;
font-size: 12px;
border:0px none !important;
} .main-content {
display: flex;
flex-wrap: wrap;
margin-top: 16px;
max-width: 100%;
}
.content-left {
width: 740px;
flex-shrink: 0;
}
.content-right {
flex: 1;
}
.address-container {
display: flex;
margin-top: 4px;
gap: 16px;
font-size: 16px;
}
.address {
color: #666;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
.showmap a {
color: #333;
}
.rating {
color: #666;
display: flex;
align-items: center;
gap: 5px; }
.rating strong {
color: #000;
}
.rating img {
width: 16px; height: 16px; }
.structured-reviews {
margin: 20px 0;
font-size: 16px;
color: #333;
min-width: 230px;;
}
.review-item {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
align-items: baseline;
}
.review-item-text{
flex-direction: column;
display: flex;
justify-content: space-between;
margin-bottom: 8px;
}
.review-item span {
font-weight: normal;
color: #666;
}
.review-item strong {
font-weight: bold;
color: #000;
}
.review-c{
display: flex;
}
h1 {
font-family: 'PT Serif', serif;
font-size: 40px;
font-weight: normal;
margin: 0;
}
.price {
font-size: 28px;
color: #349467;
font-weight: bold;
margin-top: auto;
}
.availability {
font-size: 16px;
margin: 5px 0;
font-weight: 100;
}
.meal-type {
display: flex;
align-items: center;
gap: 5px;
font-size: 16px;
color: #349467;
}
.meal-type img {
width: 24px;
height: 24px;
}
.reserve-button {
background-color: #349467;
color: white;
padding: 16px 48px;
border: none;
font-size: 14px;
border-radius: 32px;
font-weight: 600;
cursor: pointer;
margin: 24px 0;
text-decoration: none;
display: inline-block;
}
.navigate-button {
background-color: #FFF;
color: #000;
padding: 12px 20px;
border: 1px solid #CCC;
font-size: 14px;
border-radius: 20px;
font-weight: 600;
cursor: pointer;
margin: 8px 0px;
display: inline-block;
}
.description {
font-size: 18px;
color: #000;
line-height: 1.8;
}
strong {
font-weight: bold;
}
.offer {
margin-top: 16px;
display: flex;
align-items: flex-end;
gap: 16px;
}
.additional-content-left {
position: relative;
}
.additional-content-left::before {
content: '';
position: absolute;
top: -10px; left: 0;
width: 64px;
height: 1px;
background-color: #CCC;
} @media screen and (min-width: 768px) {
.gallery-container {
flex-direction: row;
}
.structured-reviews {
max-width: 300px;
margin: 20px 0;
font-size: 16px;
color: #333;
min-width: 230px;;
}
.main-photo {
width: 740px;
height: 500px;
flex-shrink: 0;
}
.small-photos {
flex: 1;
height: 500px;
display: flex;
flex-direction: column;
}
.small-photo {
height: calc(50% - 5px);
} .image-breadcrumbs {
display: none;
}
} @media screen and (max-width: 767px) {
.main-content {
flex-direction: column;
padding: 16px;
}
.main-content {
margin-top: 0px;
}
.gallery-container {
gap: 8px;
}
.small-photos {
gap: 8px;
}
h1 {
font-size: 32px;
}
.small-photo {
height: 120px;
}
.main-photo {
height: 280px;
}
.offer {
align-items: flex-start;
flex-direction: column;
}
.address-container {
display: flex;
gap: 8px;
flex-direction: column;
}
.content-left {
width: 100%;
}
.content-right {
margin-top: 20px;
}
} .additional-block {
display: flex;
flex-wrap: wrap;
margin-top: 64px;
}
.additional-content-left {
width: 375px;
flex-shrink: 0;
}
.additional-content-right {
flex: 1;
}
.short-description {
font-size: 18px;
line-height: 1.8;
padding-right: 20px;
}
.additional-photo img {
width: 100%;
height: auto;
display: block;
} @media screen and (max-width: 767px) {
.additional-block {
flex-direction: column;
padding: 0 16px;
}
.additional-content-left {
width: 100%;
}
.short-description {
padding-right: 0;
}
}
.benefits-container {
margin: 64px 10px;
}
.benefits-heading {
position: relative;
margin-bottom: 24px;
}
.benefits-heading::before {
content: '';
position: absolute;
top: -24px; left: 0;
width: 64px;
height: 1px;
background-color: #CCC;
}
h2 {
font-size: 24px;
font-weight: bold;
margin: 0;
padding-left: 0;
}
.benefits-section {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.benefit-item {
display: flex;
align-items: flex-start;
gap: 10px;
width: calc(33.333% - 20px); margin-bottom: 20px;
}
.benefit-item img {
width: 24px;
height: 24px;
}
.benefit-item p {
margin: 0;
font-size: 16px;
line-height: 1.4;
}
.photo-gallery {
position: relative;
width: 100%;
margin: 50px 0;
overflow: hidden;
max-height: 550px;
}
.masonry-grid {
column-count: 2; column-gap: 10px;
}
.masonry-item {
break-inside: avoid;
margin-bottom: 10px;
}
.masonry-item img {
width: 100%;
height: auto;
display: block;
cursor: pointer;
}
.gradient-overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 220px;
background: linear-gradient(to top, white, transparent);
}
.gallery-button {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background-color: black;
color: white;
padding: 16px 24px;
font-size: 16px;
border: none;
border-radius: 30px;
cursor: pointer;
}
.gallery-button:hover {
background-color: #333;
} @media screen and (max-width: 767px) {
.overlay-button {
font-size: 12px;
}
}
@media screen and (max-width: 767px) {
.benefits-section {
flex-direction: column;
}
.benefit-item {
width: 100%;
}
.masonry-grid {
column-count: 1;
}
}
.map-container {
position: relative;
width: 100%;
height: 500px;
margin: 16px 0;
}
#map {
width: 100%;
height: 100%;
}
.map-overlay {
position: absolute;
top: 20px;
left: 20px;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
max-width: 300px;
z-index: 10;
}
.map-overlay h3 {
margin: 0;
font-size: 24px;
text-transform: none;
text-align: left;
font-weight: normal;
font-family: 'PT Serif', serif;
margin-bottom: 10px;
}
.map-overlay p {
margin: 5px 0;
font-size: 14px;
color: #666;
}
.map-overlay .price {
font-size: 16px;
color: #349467;
font-weight: bold;
margin: 10px 0;
}
.map-overlay .reserve-button {
background-color: #349467;
color: white;
padding: 10px 20px;
border: none;
font-size: 16px;
border-radius: 20px;
cursor: pointer;
margin-top: 10px;
display: inline-block;
}
.map-overlay .reserve-button:hover {
background-color: #2d7d5a;
} .modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100vw; height: 100vh; overflow: hidden;
background-color: rgba(0, 0, 0, 0.9);
}
.modal-content {
margin: auto;
display: block;
width: 90vw; height: 90vh; object-fit: contain; }
.modal-caption {
margin: auto;
display: block;
width: 80%;
text-align: center;
color: #ccc;
padding: 10px 0;
} .close {
position: absolute;
top: 30px;
right: 30px;
color: #fff;
font-size: 32px;
font-weight: normal; font-family: Arial, sans-serif; cursor: pointer;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
padding: 16px;
color: #fff;
font-weight: normal; font-size: 32px;
user-select: none;
transform: translateY(-50%);
font-family: Arial, sans-serif; }
.prev {
left: 20px;
}
.next {
right: 20px;
} @media screen and (max-width: 767px) {
.image-breadcrumbs {
display: flex;
}
.map-overlay {
top: 300px;
}
} @media screen and (max-width: 600px) {
.prev, .next, .close {
font-size: 30px;
padding: 12px;
}
.modal-content {
width: 90vw;
height: 90vh;
}
} .review-container {
display: flex;
gap: 20px;
padding: 20px 0;
position: relative;
align-items: flex-start;
margin: 64px 0;
color: #FFF;
background: #000;
}
.review-heading {
position: relative;
}
.review-heading h2::before {
content: '';
position: absolute;
top: -24px; left: 0;
width: 64px;
height: 1px;
background-color: #CCC;
}
.left-column {
flex: 1;
max-width: 250px;
position: relative;
z-index: 2;
overflow: visible;
}
.video-wrapper {
position: absolute;
top: -50px;
left: 32px;
width: calc(100% + 50px);
height: 460px;
overflow: hidden;
}
.video-wrapper iframe {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%) scale(1.5); border-radius: 0;
}
.right-column {
flex: 1.5;
padding: 64px;
margin-left: 32px;
display: flex;
flex-direction: column;
justify-content: flex-start;
position: relative;
z-index: 1;
}
.review-heading h2 {
margin: 0;
font-size: 18px;
margin-bottom: 20px;
}
.review-content {
display: flex;
gap: 20px;
}
.structured-rating {
display: flex;
flex-direction: column;
gap: 10px;
width: 30%;
color: #CCC;
font-size: 16px;
margin-top: 8px;
}
.rating-item {
display: flex;
align-items: center;
justify-content: space-between;
}
.rating-value {
display: flex;
align-items: center;
gap: 5px;
color: #FFF;
justify-content: flex-end;
flex: 1;
}
.rating-value img {
width: 24px;
height: 24px;
vertical-align: middle;
}
.textual-review {
width: 65%;
font-family: 'PT Serif', serif;
font-size: 24px;
line-height: 1.6;
}
p.review-author {
font-size: 16px;
}
.textual-review p {
margin: 0;
margin-bottom: 10px;
}
.avg-review{
font-size: 24px;
}
.reviews-list {
max-width: 800px;
margin: 20px auto;
padding: 0 20px;
}
.review-item-text,.review-item {
border-bottom: 1px solid #ddd;
padding: 15px 0;
}
.review-header {
font-size: 14px;
color: #555;
margin-bottom: 5px;
}
.review-author {
font-weight: bold;
margin-right: 10px;
}
.review-segment {
font-style: italic;
margin-right: 10px;
}
.review-date {
color: #999;
}
.review-text {
font-size: 16px;
color: #333;
line-height: 1.5;
} @media screen and (max-width: 767px) {
.review-container {
flex-direction: column;
align-items: center;
padding: 20px 0;
}
.left-column {
max-width: 100%;
width: 100%;
position: relative;
z-index: 2;
overflow: visible;
}
.video-wrapper {
position: relative;
top: 0;
left: 0;
width: 100%;
height: auto;
overflow: hidden;
margin-bottom: 20px;
}
.video-wrapper iframe {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 420px;
transform: none;
}
.right-column {
max-width: 100%;
margin: 0;
padding: 20px;
color: #FFF;
background: #000;
display: flex;
flex-direction: column;
position: relative;
z-index: 1;
}
.review-content {
flex-direction: column;
}
.structured-rating,
.textual-review {
width: 100%;
}
.structured-rating {
margin-bottom: 20px;
}
.additional-block{
flex-direction: column-reverse;
}
.additional-content-left{
margin-top:32px;
text-align:center;
}
.additional-content-left::before{
display: none;
}
.review-c{
flex-direction: column;
}
.structured-reviews{
width: 100%;
}
}