/*
Theme Name: Möbelwerk 2026
Theme URI: http://www.cssigniter.com/ignite/themes/sixtyone
Author: Sebastian Auferoth
Author URI: http://www.cssigniter.com/
Description: Theme for Möbelwerk Lünen - 2026 Update
Version: 3.0
License: GNU General Public License
*/


:root {
    --grey-main: #333;
    --grey-dark: #1d1d1d;
    --grey-mid: #5f5f5f;
    --grey-light: #aaa;
    --grey-lighter: #ddd;
    --grey-lightest: #efefef;
    --grey-ambient: #f2eeeb;
    --red-main: #e2001a;
    --red-dark:#af0917;
    
    
    --red-light: #f8e0fa;
    --green-light: #d7eacc;
    --yellow-light: #f9eecc;
    --orange-light: #fae6d4;
    --blue-light: #c6dcf0;
    
    --font-small: 13px;
    --font-medium: 14px;
    --font-normal: 17px;
    --font-h1: 46px;
    --font-h2: 38px;
    --font-h3: 26px;
    --font-h4: 19px;
    --font-h5: 16px;
    
    --radius-std: 25px;
   
}

/* inter-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/inter-v20-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/inter-v20-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/inter-v20-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: italic;
  font-weight: 600;
  src: url('fonts/inter-v20-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/inter-v20-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/inter-v20-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, img, ins, kbd, q, s, samp,
small, strike, tt, var, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, details, figcaption, figure, 
header, hgroup, menu, nav,  {
    display: block;
    background: #FFF;
}


body{
    color: var(--grey-dark);
    font-family: "Inter", Arial, sans-serif;
    line-height: 1.5;
    -webkit-animation-name: fontfix;
    -webkit-animation-duration: 0.2s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -webkit-font-smoothing: antialiased; 
	-webkit-text-size-adjust: 100%;
}


p {font-size: var(--font-normal); margin: 0 0 10px 0; padding: 0; }
p.small, .small {font-size: var(--font-small) !important;}
p.medium, .medium {font-weight: 600;}

@-webkit-keyframes fontfix {
    from { opacity: 1; }
    to   { opacity: 1; }
}


ol, ul {list-style: none;}

p ul { margin-bottom: 20px;}
p li:before {
  content: "• ";
  margin: 0 5px 0 25px;
}

blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

::selection { background: #e2001a; color: #fff; }
::-moz-selection { background: #e2001a; color: #fff; }
table {
    border-collapse: collapse;
    border-spacing: 0;
}


*{
    -webkit-hyphens: none;
    -moz-hyphens: none;
    hyphens: none; 
}

/* Overriding the default 15px padding from left and right 
.column, .columns{
    padding: 0;}
}*/

.row .row{margin: 0;}

.four.columns + .eight.columns, .eight.columns + .four.columns{padding: 0 0 0 30px}

.mobile-only {display: none;}

/* =maps
------------------------------------------------------------------------------------------*/
iframe{
    width: 100%;
    max-width: 1120px;
    height: 600px;
    margin: 0 auto;
    overflow: hidden;
    display: block;
}

/* = text over image
------------------------------------------------------------------------------------------*/
.container {position: relative;text-align: center;color: white;}
.bottom-left {position: absolute;bottom: 8px;left: 16px;}
.top-left {position: absolute;top: 8px;left: 16px;}
.top-right {position: absolute;top: 8px;right: 16px;}
.bottom-right {position: absolute;bottom: 8px;right: 16px;}
.centered {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.copyright {position: absolute;top: 0px;right: 0px;text-shadow: 0px 0px 2px rgba(0,0,0,.8);font-size: 8px; padding: 2px 4px;}
.caption {position: absolute;top: 10px;right: 10px; padding: 8px 15px; background: rgba(0,0,0,.1); border-radius: 50px; 
  transition: all 0.25s ease-in-out;}
.container:hover .caption {background: white; color: var(--grey-dark);}

/* = GRID
------------------------------------------------------------------------------------------*/

.is-layout-flex {margin: 10px 0;}

.icon-50 {width: 50px; height:50px; color: white; background: var(--red-main); margin-bottom: 15px; border-radius: 10px;}
.bg-red {background: var(--red-main); padding: var(--radius-std); border-radius: var(--radius-std);}
.bg-white {background: white; padding: var(--radius-std); border-radius: var(--radius-std);}
.flex {display: flex; align-items: center; justify-content: space-between; column-gap: 0px; }
.items-start {align-items: flex-start; justify-content: flex-start;}
.items-center {align-items: center;}
.justify-center {justify-content: center;}
.gap {gap: var(--radius-std);}
.margin-top {margin-top: var(--radius-std);}
.border-b {border-bottom: 1px solid rgba(255,255,255,.5);}
.padding-20 {padding: 20px 0;} 

.grid {display: grid; grid-gap: 20px;}
.grid-gap-40 {display: grid; grid-column-gap: 40px; grid-row-gap: 20px;}
.grid-gapless {display: grid; grid-gap: 0px;}
.grid-4-1, .grid-4-2, .grid-4-3,.grid-4-4 {grid-template-columns: repeat(4, 1fr);}
.grid-3-1, .grid-3-2, .grid-3-3 {grid-template-columns: repeat(3, 1fr);}
.grid-2-1, .grid-2-2 {grid-template-columns: repeat(2, 1fr);}
.grid-center {align-items: center;}
.margin-30 {margin: 30px;}

.two-thirds {grid-column-start: 1; grid-column-end: 3;}
.merge_2-3 {grid-column: 2 / 4;}
.merge_1-2 {grid-column: 1 / 3;}
.merge_1-3 {grid-column: 1 / 4;}

.content-14 {grid-column: 1 / 4;}

article {padding: 30px 0;}

.flex {display: flex; align-items: center; justify-content: space-between; column-gap: 0px; }
.container {position: relative;}

section {padding: 60px 0;}
section#grey {background: var(--grey-main); color: white; padding: 20px 0;}
section#lightgrey {background: var(--grey-lightest);}
section#hero-image, section#half-hero-image {padding: 0;}
section#hero-image img {height: 80vh; object-fit: cover;}
section#half-hero-image img {height: 50vh; object-fit: cover;}
section#ambient {background: var(--grey-ambient);}

.distance-50 {height: 50px; display: block;}
.distance-30 {height: 30px; display: block;}

.sub-hero {min-height: 65vh;}
.no-gap {gap: 0;}
.grid-2-1 .image-left {
    flex: 1;
    position: relative;
    margin-left: calc(-50vw + 640px); /* breakout to left */
}


.grid-2-1 .image-left img {
    width: 100vw;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* CONTENT – vertically centered */
.grid-2-1 .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center; /* vertical centering */
    padding: 40px; /* optional breathing room */
}
    
.bg-red-gradient {
    background: linear-gradient(0deg, #af0917 0%,#e2001a 100%) ;
    display: flex;
   align-items: center;
    color: white !important;
}

.bg-grey-gradient {
    background: linear-gradient(0deg, #fff 0%,#efefef 100%) ;
}


/* = HEADER
------------------------------------------------------------------------------------------*/
img.logo {position: relative; height: 100px; margin: 30px 0px;float: left; display:inline-block;}

/* --- Modern Search Overlay --- */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 160px;
    background: rgba(255, 255, 255, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transform: translateY(-100%);
    visibility: hidden;
    transition: all 0.3s ease-in-out;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.search-overlay.is-active {transform: translateY(0); visibility: visible;}
.search-form-wrapper { width: 100%; display: flex;}
.search-form { width: 100%; display: flex;}
.search-form button {background: none; border: none;}
    
input[type="search"] {
  border: none;
    width: 90%;
  background: transparent;
  margin: 0;
  padding: 15px !important;
  font-size: var(--font-h4);
  color: var(--grey-dark);
  border: 0px solid transparent;
  border-radius: inherit;
    outline: none;
}

input[type="search"]::placeholder {color: var(--grey-mid);}
    
input[type="search"]:focus {background: white;}

.search-close, .close, .menu-close {
    position: absolute;
    cursor: pointer;
    top: 40px;
    right: 40px;
    font-size: 50px;
    cursor: pointer;
    background: none;
    border: none;
}
    
.search-close:hover, .close:hover, .menu-close:hover {color: var(--red-main); cursor: pointer;}
.menu-close {top: 20px;right: 20px;}

/* Backdrop for when side menu is open */
.overlay-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: none;
    z-index: 9998;
}
.overlay-backdrop.is-active { display: block; }

nav ul {display: inline;}
nav ul li {display: inline-block;}
nav ul li a {color: var(--grey-main); font-weight: 600; font-size: var(--font-h4); margin: 10px 20px; position: relative; text-decoration: none; display: inline-block;}
nav ul li a:hover {color: var(--grey-dark);}
nav ul li ul {display: none;}

nav ul li a::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
    transform-origin: bottom right;
  height: 2px;
  bottom: -1px;
  left: 0;
  background-color: var(--grey-dark);
  transition: transform 0.3s ease-in-out;
}

nav ul li a:hover::after {transform: scaleX(1); transform-origin: bottom left;}

header button.search-trigger, header button.menu-toggle {background: none; border: none; cursor: pointer;}
header button.search-trigger:hover, header button.menu-toggle:hover {color: var(--red-main);}


/* = STORIES
------------------------------------------------------------------------------------------*/

#stories a img {transition: all 0.7s cubic-bezier(0, 0, 0.2, 1);}
#stories a:hover img {transform: scale(1.05); transition: all 0.7s cubic-bezier(0, 0, 0.2, 1); filter: brightness(0.8);}

.intro {top:0;position: relative;-webkit-transition: all 0.3s ease;transition: all 0.3s ease; overflow: hidden; border-radius: var(--radius-std);}
.intro .title {position: absolute; left: 50%;transform: translate(-50%, 0%); width: 100%; text-align: center; bottom:10px;color: #fff;font-weight: 600;padding: 20px !important; font-size: var(--font-h3); line-height: 1.15;} 
.img-gradient {position:relative;}

.img-gradient::after {
  content: '';
  position: absolute;
  left: 0; top: 0px;
  width: 100%; height: 100%;
  background: linear-gradient(185deg, rgba(0, 0, 0, 0.0)50%, rgba(0, 0, 0, 0.75) 100%);
}

.image-34 {aspect-ratio: 3 / 4; overflow: hidden;}
.image-34 img {width: 100%; height: 100%; object-fit: cover; /* crops image */display: block;}


/* = SWIPER SLIDER
------------------------------------------------------------------------------------------*/

/* Prevent white flash */
.hero-slider {background: #000;}

.radius-desktop {border-radius: var(--radius-std); }

/* Make fade behave like true crossfade */
.swiper-fade .swiper-slide {
  opacity: 0 !important;
  transition-property: opacity !important;
}

.swiper-fade .swiper-slide-active,
.swiper-fade .swiper-slide-duplicate-active {
  opacity: 1 !important;
  z-index: 2;
}

/* Keep inactive slide visible during transition */
.swiper-fade .swiper-slide {
  pointer-events: none;
}

.swiper-fade .swiper-slide-active {
  pointer-events: auto;
}


.swiper-slide {
  position: relative;        /* important */
  background-size: cover;
  background-position: center;
  display: flex;
  align-self: flex-end;
}

.slide-content {
  position: absolute;
  color: #fff;
  padding: 4rem;
  z-index: 2;
    bottom: 0;
    left: 0;
    background: linear-gradient(190deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.65) 100%);
    width: 100%; 
    height: 100%;
    display: flex;
    align-items: flex-end;
}


/* Make sure the image is behind */
.swiper-slide img {
  width: 100%;
  height: 75vh;
  object-fit: cover;
  z-index: 1;
}


/* Arrows */
.swiper-button-next,
.swiper-button-prev {
  color: #fff;
}

/* Pagination container */
.swiper-pagination {
  bottom: 30px !important;
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* Dot base */
.swiper-pagination-bullet {
  width: 14px;
  height: 6px;
  background: rgba(255,255,255,0.5);
    opacity: 1;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  transition: width 0.3s ease;
}

/* Active dot */
.swiper-pagination-bullet-active {
  width: 40px;
  background: rgba(255,255,255,0.8);
    opacity: 1;
}

/* Progress bar */
.swiper-pagination-bullet::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: #fff;
}

.swiper-pagination-bullet-active::after {
  animation: progress 5s linear forwards;
}

@keyframes progress {
  from { width: 0%; }
  to { width: 100%; }
}

/* = ICON LISTING ------------------------------------------------------------------------------------------*/
.icon-listing {display: flex; flex-wrap: wrap; column-gap: 50px; row-gap: 20px; justify-content: center; }
.icon-listing div {font-size: var(--font-medium); font-weight: 600; color: var(--grey-mid);}
.icon-listing i {margin-right: 10px; font-size: 1.5rem;}

/* = LEISTUNGEN LISTING ------------------------------------------------------------------------------------------*/

    
.sortiment-button-list {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

/* Button */
.sortiment-button {
    display: inline-flex;
    align-items: center;
    padding: 16px 30px;
    border-radius: 999px;
    background: var(--grey-dark);
    color: white;
    text-decoration: none;
    font-size: var(--font-h3);
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.3s ease-in-out;
}

/* Text */
.sortiment-button .label {
    margin-right: 12px;
    transform: translateX(14px);
    transition: all 0.3s ease-in-out;
}

/* Icon — space is ALWAYS reserved */
.sortiment-button .icon {
    width: 18px;              /* fixed width */
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0;
    transform: translateX(-6px);
    transition: all 0.3s ease-in-out;
}

/* SVG */
.sortiment-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Hover — no size change */
.sortiment-button:hover {
    background: white;
    color: var(--grey-dark);
}

.sortiment-button:hover .icon, .sortiment-button:hover .label {
    opacity: 1;
    transform: translateX(0);
}


/* ------------- FRONT ------------- */


#hero-image .overlay, #half-hero-image .overlay {
    position: absolute;
    top: 50%;
    transform: translate(0%, -50%);
    background: linear-gradient(185deg, rgba(0, 0, 0, 0.0)50%, rgba(0, 0, 0, 0.75) 100%);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
    
#hero-image .content {
    max-width: 600px; text-align: left; padding: 30px;
    border-radius: 0px var(--radius-std) 0px 0px;
    background: #af0917;
    background: -moz-linear-gradient(left, #af0917 0%, #e2001a 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#af0917), color-stop(100%,#e2001a));
    background: -webkit-linear-gradient(left, #af0917 0%,#e2001a 100%);
    background: -o-linear-gradient(left, #af0917 0%,#e2001a 100%);
    background: -ms-linear-gradient(left, #af0917 0%,#e2001a 100%);
    background: linear-gradient(to right, #af0917 0%,#e2001a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#af0917', endColorstr='#e2001a',GradientType=1 );
    box-shadow: 10px 10px 20px rgba(0,0,0,.15);
}

#hero-image .overlay .row { width: 1280px; max-width: 100%; min-width: 768px; margin: 0 auto; }

#hero-image .content h1, #hero-image .content p {color: white; line-height: 1.25;}

/* -----------------------------------------
	Own Style
----------------------------------------- */




#tiles {display: grid; grid-template-columns: repeat(4, 1fr); grid-column-gap: 20px; grid-row-gap: 20px;}
#tiles .tile:nth-child(1) {grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3;}
#tiles .tile:nth-child(6) {grid-column-start: 3; grid-column-end: 5; grid-row-start: 2; grid-row-end: 4;}

#breaker {min-height: 70vh; margin: 0px 0;}
#breaker .container {
    background: #af0917;
    padding: 50px;
    background: -moz-linear-gradient(left, #af0917 0%, #e2001a 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#af0917), color-stop(100%,#e2001a));
    background: -webkit-linear-gradient(left, #af0917 0%,#e2001a 100%);
    background: -o-linear-gradient(left, #af0917 0%,#e2001a 100%);
    background: -ms-linear-gradient(left, #af0917 0%,#e2001a 100%);
    background: linear-gradient(to right, #af0917 0%,#e2001a 100%) ;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#af0917', endColorstr='#e2001a',GradientType=1 );
    display: flex;
   align-items: center;
}
#breaker .container h1, #breaker .container h2, #breaker .container h3, #breaker .container h4, #breaker .container h5, #breaker .container p {color: white !important;}
#breaker .content {max-width: 510px; text-align: left; position: relative;}
#breaker .geistwinkel {background: url(img/global/geistwinkel.jpg); background-position: center;background-repeat: no-repeat;background-size: cover;}

#head {display: flex;
  justify-content: space-between;
  align-items: center;}
        
#head .cta {font-size: 12px;  display: block; margin-bottom: 10px; text-align: right;}
#head .cta a {font-weight: bold; border: 1px solid var(--grey-lighter); padding: 3px 9px; border-radius: 50px; color: var(--grey-main);}

#hero img {max-height: 500px; object-fit: cover; width: 100%;}
#hero .content {
    max-width: 600px; position: relative; top: -150px; min-height: 200px; margin-bottom: -80px; text-align: left; padding: 30px;
    background: #af0917;
    background: -moz-linear-gradient(left, #af0917 0%, #e2001a 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#af0917), color-stop(100%,#e2001a));
    background: -webkit-linear-gradient(left, #af0917 0%,#e2001a 100%);
    background: -o-linear-gradient(left, #af0917 0%,#e2001a 100%);
    background: -ms-linear-gradient(left, #af0917 0%,#e2001a 100%);
    background: linear-gradient(to right, #af0917 0%,#e2001a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#af0917', endColorstr='#e2001a',GradientType=1 );
    box-shadow: 10px 10px 20px rgba(0,0,0,.15);
}

#hero .content h1, #hero .content p {color: white;}

.row {background: none;}

#referenzen {margin-bottom: 25px;}

#infokasten {background: #e2001a; padding: 25px; color: #fff !important; margin: 25px 0;}
#infokasten h3 {color: #fff !important; text-transform: uppercase; font-size: 24px; font-weight: lighter;}
#infokasten p {color: #fff !important; font-size: 15px;}

#infokasten::before {
	display: block;
	content: '';
	position: absolute;
	border: 6px solid transparent;
	border-top-color: #fff;
	width: 0;
	height: 0;
	opacity: 1;
	right: 60px;
	margin-top:-25px;
	clear: both;
}

#sortiment_tile > .thumb {position: relative;text-align: center;color: white;}
#sortiment_tile > .thumb >.top-right {position: absolute;top: 3px;right: 3px; font-size: 6px; opacity: 0.2;}
#sortiment_tile > .title {background: var(--grey-light); padding: 10px 20px; margin: 0 0 0 20px; color: white; text-transform: uppercase; font-weight: bold; box-shadow: 0px 0px 20px rgba(0,0,0,0.2); position: relative;transform: translateY(-50%); display: inline-block;top: 50%;}
#sortiment_tile:hover  .title {background: var(--red-main);
  background-image: -webkit-linear-gradient(right, var(--red-main), var(--red-dark));
  background-image: -moz-linear-gradient(right, var(--red-main), var(--red-dark));
  background-image: -ms-linear-gradient(right, var(--red-main), var(--red-dark));
  background-image: -o-linear-gradient(right, var(--red-main), var(--red-dark));
  background-image: linear-gradient(to left, var(--red-main), var(--red-dark));}

footer .widget h4 {text-transform: uppercase; font-size: 20px;}

ul#sortiment-nav {display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; justify-content: flex-start; padding-bottom: 10px; &::-webkit-scrollbar {display: none;} -ms-overflow-style: none; scrollbar-width: none;  }
ul#sortiment-nav li {flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; border: 1px solid var(--grey-lighter); color: var(--grey-main); border-radius: 50px; padding: 5px 15px; font-size: var(--font-small); margin: 0; transition: all 300ms ease-in-out;}
ul#sortiment-nav li.current-post {border: 1px solid var(--grey-light); background: rgba(0,0,0,.05); }
ul#sortiment-nav li:hover {border: 1px solid var(--red-main); color: var(--red-main); background: white;}


/* =top
------------------------------------------------------------------------------------------*/

    
.container {
  display: flex;
  flex-direction: column;
  justify-content: right;
  align-items: stretch;
}

form {
  border: none;
}


button[type="submit"]:hover {
  opacity: 1;
}

button[type="submit"]:focus,
input[type="search"]:focus {
  box-shadow: none;
  border-color: none;
  outline: none;
    background: white;
}

form.nosubmit {
 border: none;
 padding: 0;
}

input.nosubmit {
  border: 1px solid #555;
  width: 100%;
  padding: 9px 4px 9px 40px;
   background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 13px center;
}


.textual h1 {
	font-size: 30px;
	font-weight: bold;
	letter-spacing: -0.03em;
	line-height: 1em;
}

#panel_map {
	max-width: 1150px;
	min-height: 300px;
	margin: 0 auto;
}

#map { width: 100%; min-height: 300px; }
.googlemaps_iframe {
	width: 100%;
	height: 380px;
}
.diagonal_subtle{
	float: left;
	width: 100%;
	height: 1px;
  background: url(img/global/diagonal_subtle.png) repeat-x;
}


.single-room .entry .diagonal_subtle {
	margin-bottom: 15px;
}

.top p{
    font-size: 11px;
    font-style: normal;
    margin: 0;
    padding: 7px 0 7px 0;
    line-height: 1.5;
    text-transform: uppercase;
}

ul#misc{
    display: block;
    float: right;
    margin: 7px 0 7px 0;
    padding: 0;
}

ul#misc li{
    float: left;
    display: inline;
    margin: 0 25px 0 0;
    font-size: 14px;
}

ul#misc li:last-child{
    margin: 0;
}



/* =nav
------------------------------------------------------------------------------------------*/

#nav a {text-decoration: none; transition: 280ms all 120ms ease-out; z-index: 2;}
#nav a:hover {transition: 280ms all 120ms ease-out;}

ul#nav {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-weight: 500;
}

ul#nav > li {
    color: #fff;
    float: left;
}

ul#nav > li > a {
    color: #fff;
    display: inline-block;
    text-decoration: none;
    padding: 15px 20px;
    border-right: 1px solid rgba(149,17,29,.1); border-left: 1px solid rgba(149,17,29,.1);
    transition-duration: 0.5s;}

ul#nav li:hover {
    background: #e70022;
    cursor: pointer;
}

ul#nav > li > ul {
    display: none;
    position: absolute;
    background: #f9f9f9;
    color: #222;
    box-shadow: 0px 4px 15px rgba(0,0,0,0.2);
    min-width: 5rem;
    transition: all 0.5s ease;
    z-index: 1;
    list-style-position: inside;
    padding: 0; margin:0;
}

ul#nav li ul a {color: #222;}
ul#nav li ul li {border-bottom: 1px solid #F1F1F1; 
    border-top: 1px solid #F1F1F1;
    border-right: none;
    border-left: none;}
ul#nav > li ul li:hover  {background: #F2F2F2 !important;}
ul#nav > li ul li:hover a:before {
    content:'\f105'; 
    font-family: 'FontAwesome'; 
    position: absolute;
    right: 20px;
    animation: arrow 1s;}


ul#nav li:hover ul, ul#nav li ul:hover {
  display: block;
    transition: 1s all;
}

ul#nav li ul li {
    clear: both;
    width: 220px;
    padding: 8px 20px;
}
ul#nav > li.menu-item-has-children > a:after {content:'\f107'; font-family: 'FontAwesome'; padding-left: 10px;}


@keyframes arrow {
  0%   {opacity: 0;}
  100%  {opacity: 1;}
}

.nav_select {display: none;}


#navigation {
  background: #af0917;
background: -moz-linear-gradient(left, #af0917 0%, #e2001a 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#af0917), color-stop(100%,#e2001a));
background: -webkit-linear-gradient(left, #af0917 0%,#e2001a 100%);
background: -o-linear-gradient(left, #af0917 0%,#e2001a 100%);
background: -ms-linear-gradient(left, #af0917 0%,#e2001a 100%);
background: linear-gradient(to right, #af0917 0%,#e2001a 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#af0917', endColorstr='#e2001a',GradientType=1 );
  }

/* =slider
------------------------------------------------------------------------------------------*/


#home-slider {
	margin: 0 0 20px 0;
	color: #FFF !important;
	position: relative;
}

#home-slider img {height: 600px; width: 100%; object-fit: cover;}

.slide_description{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px 30px;
    max-width: 600px;
	text-align: center;
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    background: #af0917;
    background: -moz-linear-gradient(left, rgba(175, 9, 23,0.95) 0%, rgba(226, 0, 26,0.95) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#af0917), color-stop(100%,#e2001a));
    background: -webkit-linear-gradient(left, rgba(175, 9, 23,0.95) 0%,rgba(226, 0, 26,0.95) 100%);
    background: -o-linear-gradient(left, rgba(175, 9, 23,0.95) 0%,rgba(226, 0, 26,0.95) 100%);
    background: -ms-linear-gradient(left, rgba(175, 9, 23,0.95) 0%,rgba(226, 0, 26,0.95) 100%);
    background: linear-gradient(to right, rgba(175, 9, 23,0.95) 0%,rgba(226, 0, 26,0.95) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#af0917', endColorstr='#e2001a',GradientType=1 );
}

.slide_description .arrows{
    float: right;
    width: 40px;
    height: 80px;
}

.slide_description a.up{
    float: left;
    width: 40px;
    height: 40px;
    background-color: #222;
    background-color: rgba(0, 0, 0, .1);
}

.slide_description a.down{
    float: left;
    clear: both;
    width: 40px;
    height: 40px;
    background-color: #222;
    background-color: rgba(0, 0, 0, .1);
}

.slide_description a.down:hover,
.slide_description a.up:hover{
    background-color: ;
    background-color: rgba(0, 0, 0, .3);
}

.slide_description a img{
    display: block;
    width: 24px!important;
    height: 12px!important;
    float: left!important;
    margin: 10px 10px 10px 10px!important;
}

.slide_description_title {
	font-size: 36px; 
	color: #fff;
	font-weight: bold;
	}

.slide_description_text p, .slide_description_text {
    font-size: 18px;
    color: white !important;
    clear: both;
    margin: 0px 0px 0 0;
	}


.slider_description{
    position: absolute;
	text-align: left;
	right:0;
	top: 20px;   
    background: #e2001a;
    padding: 6px 10px;
    font-size: 14px;
    font-weight: bold;
}


/* = Jobs
------------------------------------------------------------------------------------------*/

ul.job-info {display: flex; flex-wrap: wrap; gap: 25px; justify-content: left; margin: 0; padding: 0;}
ul.job-info li {list-style-type: none;margin: 0; padding: 0; font-weight: bold; color: var(--grey-mid);}
.job-tile {border-top: 2px solid var(--grey-lighter); padding: 20px 0px;}

ul#service-amenities {display: flex; flex-wrap: wrap; gap: 15px; justify-content: left; margin: 0; padding: 0; margin: 25px 0;}
ul#service-amenities li {text-align: center;align-content: center;
    list-style-type: none;margin: 0; padding: 0; font-weight: bold; width: 160px; height: 180px;
    display: inline-block; border-radius: var(--radius-std); padding: 5px 15px; font-size: var(--font-h4);}
ul#service-amenities li.green {background: var(--green-light); border: none;}
ul#service-amenities li i {font-size: var(--font-h2); display: block; margin-bottom: 10px;}
ul#service-amenities li small {display: block; font-size: 10px; font-weight: normal; line-height: 1.0;}
ul#service-amenities li.green {background: var(--green-light); border: none;}
ul#service-amenities li.blue {background: var(--blue-light); border: none;}
ul#service-amenities li.orange {background: var(--orange-light); border: none;}
ul#service-amenities li.yellow {background: var(--yellow-light); border: none;}
ul#service-amenities li.red {background: var(--red-light); border: none;}


/* =booking
------------------------------------------------------------------------------------------*/
#contact-tile .tile {border: 1px var(--grey-lighter) solid; border-radius: var(--radius-std); padding: var(--radius-std);}
#contact-tile .tile i { background: var(--grey-ambient); border-radius: var(--radius-std); padding: 10px;}
        
.accordion {
    background: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: var(--font-normal);
  transition: 0.4s;
    font-weight: bold;
}

.active, .accordion:hover {
  background-color: white;
}

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
    border-bottom: 1px solid var(--grey-lighter);
}

.hero {
	background: #a7a7a7;
	box-shadow: 0px 0px 20px rgba(0,0,0,0.2)}
.hero:hover {
	background: #af0917;
background: -moz-linear-gradient(left, #af0917 0%, #e2001a 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#af0917), color-stop(100%,#e2001a));
background: -webkit-linear-gradient(left, #af0917 0%,#e2001a 100%);
background: -o-linear-gradient(left, #af0917 0%,#e2001a 100%);
background: -ms-linear-gradient(left, #af0917 0%,#e2001a 100%);
background: linear-gradient(to right, #af0917 0%,#e2001a 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#af0917', endColorstr='#e2001a',GradientType=1 ); 
	color: #fff !important;
	box-shadow: 0px 0px 30px rgba(0,0,0,0.2)}
	
.hero figure img {
	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	margin: 0 !important; padding: 0 !important;
}
.hero:hover figure img {
	opacity: .9;
}

.center {text-align: center !important;}
    
.room_intro{
    margin: 0px 0px 20px 0px;   
    padding: 0px;
    overflow:hidden;
    background: #a7a7a7;
	box-shadow: 0px 0px 20px rgba(0,0,0,0.2);}

.room_intro:hover {
	background: #af0917;
    background: -moz-linear-gradient(left, #af0917 0%, #e2001a 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#af0917), color-stop(100%,#e2001a));
    background: -webkit-linear-gradient(left, #af0917 0%,#e2001a 100%);
    background: -o-linear-gradient(left, #af0917 0%,#e2001a 100%);
    background: -ms-linear-gradient(left, #af0917 0%,#e2001a 100%);
    background: linear-gradient(to right, #af0917 0%,#e2001a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#af0917', endColorstr='#e2001a',GradientType=1 ); 
	color: #fff !important;
	box-shadow: 0px 0px 30px rgba(0,0,0,0.2)}

.room_intro_box{
    margin-top: 0px;
    z-index: 1000;
	padding: 10px;}

.room_intro_box p{
	margin: 0;
	color: white;
	font-size: 12px;}
.room_intro_title {
	text-transform: uppercase;
	font-size: 20px;
	font-weight: bold;
	color: #fff;
	position: relative;
	-webkit-transition: .5s ease-in-out;
	transition: .5s ease-in-out;}
.room_intro:hover .room_intro_thumb{opacity: 0.9; 
	-webkit-transition: .5s ease-in-out;
	transition: .5s ease-in-out;}
.room_intro:hover a{
	text-decoration: none;}

.room_intro img {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
	-webkit-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	object-fit: cover;}

.room_intro:hover .room_intro_thumb {
	-webkit-transform: scale(1.0);
	transform: scale(1.0);
	-webkit-transition: .5s ease-in-out;
	transition: .5s ease-in-out;}

.room_intro_thumb {
  overflow: hidden;
  height: 180px !important;}



/* = product_tile
------------------------------------------------------------------------------------------*/

.product_tile{
    overflow:hidden;
border-radius: var(--radius-std);}

.product_tile:hover {}

.product_tile .title {
    position: absolute;
    bottom: 0px;
    left: 0px;
    background: linear-gradient(to right, var(--myColor1) 0%,var(--myColor2) 100%);
    padding: 10px var(--radius-std);
    font-size: var(--font-h4);
    font-weight: bold;
    border-radius: 0px var(--radius-std) 0px 0px;
    text-align: left;
    transition: --myColor1 0.7s cubic-bezier(0, 0, 0.2, 1), --myColor2 0.7s cubic-bezier(0, 0, 0.2, 1);
}
.product_tile:hover .title {--myColor1: var(--grey-light);
  --myColor2: var(--grey-mid); transition: --myColor1 0.7s cubic-bezier(0, 0, 0.2, 1), --myColor2 0.7s cubic-bezier(0, 0, 0.2, 1);}

.product_tile img {transition: all 0.7s cubic-bezier(0, 0, 0.2, 1);}
.product_tile:hover img {transform: scale(1.05); transition: all 0.7s cubic-bezier(0, 0, 0.2, 1);}
.category-group-header {margin: 25px 0;}

@property --myColor1 {
  syntax: '<color>';
  initial-value: #e2001a;
  inherits: false;
}

@property --myColor2 {
  syntax: '<color>';
  initial-value: #af0917;
  inherits: false;
}


/* =contact
------------------------------------------------------------------------------------------*/
.contact_form{
    float: left;
    width: 100%;
    margin: 0 0 50px 0;
}

.contact_form input,
.reply input{
    width: 45%;
    height: 45px;
    font-size: 14px;
    font-style: italic;
    background-color: #fff;
    color: #686868;
    border: 1px solid #ebebeb;
    margin: 0 20px 20px 0;
    padding: 0 0 0 15px
}

::-webkit-input-placeholder{color: var(--grey-mid);}
:-moz-placeholder{color: var(--grey-mid);}
input[placeholder], [placeholder], *[placeholder]{color: var(--grey-mid);}

.contact_form input+input,
.reply input+input{
    margin: 0 0 20px 0;    
}

.contact_form textarea,
.reply textarea{
    float: left;
    width: 95%;
    height: 230px;
    font-size: 14px;
    font-style: italic;
    background-color: #fff;
    color: #686868;
    border: 1px solid #ebebeb;
    margin: 0 20px 30px 0;
    padding: 20px 0 0 20px;
    overflow: hidden;
}

.contact_form input.button,
.reply input.button{
    display: block;
    float: left;
    width: 20%;
    margin: 0 0 10px 0;
    background-color: #fab700;
    color: #fff;
    text-transform: uppercase;
    font-style: normal;
    border: none;
    padding: 6px 0;
    border: 1px solid #faa700;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear;
}

.contact_form input.button:hover,
.reply input.button:hover{
    background-color: #fac700;
    color: #333;
    border: 1px solid #faa700;
}

#formerrors, #formsuccess {
	font-size: 12px;
	padding: 10px;
	margin-bottom: 20px;
	background: rgba(233, 6, 0, 0.11);
	list-style: none;
}

#formsuccess {
	background: rgba(12, 233, 35, 0.10);
}
#formerrors li {
	padding: 5px 0;
	margin: 0;
}

/* =blog
------------------------------------------------------------------------------------------*/
.blog div.line{
    margin: 20px auto 40px auto;
    width: 100%;
    background: url(img/global/line.png) left center repeat-x;
    text-align: center;
    overflow: hidden;
}

.entry{
    float: left;
    width: 100%;
    padding: 25px 30px 10px 0px;    
}

h1.center {
	text-align: center !important;}

.entry a, .entry a:visited {
	color: #000;
}

.divider {
    width: 100%;
    height: 50px;
    display: block;
}

.divider-30 {height: 30px !important; display: block; width: 100%;}

div.pagination{
    clear: both;
    float: left;
    width: 100%;   
    padding: 10px 0 0 0;
}

div.pagination div.centered{
    width: 340px
}

div.pagination span {
    float: left;
    width: 24px;
    height: 24px;
    margin: 0px 5px 0 0;
    text-align: center;
}

#paging, .pagination { margin-bottom: 50px; font-size: 12px; }


/* =WordPress Core
-------------------------------------------------------------- */
.alignnone {
	margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
	display: block;
	margin: 5px auto 5px auto;
}

.alignright {
	float:right;
	margin: 5px 0 20px 20px;
}

.alignleft {
	float: left;
	margin: 5px 20px 20px 0;
}



.aligncenter {
	display: block;
	margin: 5px auto 5px auto;
}

a img.alignright {
	float: right;
	margin: 5px 0 20px 20px;
}

a img.alignnone {
	margin: 5px 20px 20px 0;
}

a img.alignleft {
	float: left;
	margin: 5px 20px 20px 0;
}

a img.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto
}

.wp-caption {
	max-width: 100%; /* Image does not overflow the content area */
	padding: 0px 0px 0px;
	text-align: left;
	background: #a7a7a7;
	font-weight: bold;
	text-transform: uppercase;
}

.wp-caption a{color: #fff !important;}

.wp-caption.alignnone {
	margin: 5px 20px 20px 0;
}

.wp-caption.alignleft {
	margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
	margin: 5px 0 20px 20px;
}

.wp-caption img {
	border: 0 none;
	height: auto;
	margin: 0;
	padding: 0;
	width: 100%;
}

.wp-caption p.wp-caption-text {
	font-size: 16px;
	margin: 0;
	color: #fff !important;
	padding: 10px;
}


/* =sidebar
------------------------------------------------------------------------------------------*/
aside{
    float: left;
    width: 100%;
    margin: 20px 0 10px 0;
}


.aside_container{
    float: left;
    width: 100%;
}

.aside_container h3{
    font-size: 18px;
}

.aside_container h3:after {content: ''; display: block; width: 30px; height: 3px; margin-top: 10px; background-color: #e2001a;}

.aside_container  {
    font-size: 13px;
    color: #333;
    line-height: 1.5;
    margin: 0 0 0px 0;
}

.aside_container p+p{
    margin: 0;
}


.aside_container .menu-item {
	display: block;
}

.aside_container .menu-item a {
	display: block;
	margin-bottom: 1px;
	background-color: #e2001a;
	color: #fff;
	font-size: 15px;
	font-weight: bold;
	line-height: normal;
	padding: 10px 15px;
	position: relative;
}

.aside_container .menu-item a::before {
	content: '';
	position: absolute;
	border: 6px solid transparent;
	border-left-color: #FFFFFF;
	width: 0;
	height: 0;
	top: 50%;
	margin-top: -6px;
	opacity: 0;
	left: -10px;
	-webkit-transition: opacity .18s ease, left .28s ease;
	transition: opacity .18s ease, left .28s ease;
}

.aside_container .menu-item a:hover {
	background-color: #cc0003;
	color: #fff;
	text-decoration: none;
}

.aside_container .menu-item a:hover::before {
	opacity: 1;
	left: 0;}



.widget_about img {
	max-width: 135px;
	height: auto;
}

.widget_about .alignleft,
.widget_about .alignright {
	margin-bottom: 8px;
}

aside .textwidget, aside .widget_about {
	font-style: normal;
}

aside .textwidget p {
	line-height: 1.5;
}

li.cat-item{
    font-size: 13px;
    padding: 10px 0;
    border-bottom: 1px solid #d2d2d2;
}
li.cat-item:last-child{ border-bottom: none;}

.widget ul li {font-size: 13px;}



/* =footer
------------------------------------------------------------------------------------------*/

#prefooter {box-shadow: 5px 5px 20px rgba(0,0,0,.10); margin: 50px auto;}

footer {
    background:url("img/global/swoosh.svg") no-repeat top right, linear-gradient(to left, var(--red-main), var(--red-dark));
    background-size: 30% auto, 100% auto;
    padding: 50px 0;
    color: white;
}

footer h1, footer h2, footer h3, footer h4, footer h5, footer p, footer a {color: white;}

footer a:hover {color: white; text-decoration: underline;}

.basement{
    background: url(img/global/basement.png) top center no-repeat;
    text-align: center;
    font-size: 11px;
    font-style: normal;
    overflow: hidden;
    line-height: 2;
    margin: 10px 0 0 0;
    padding: 10px 0 0 0;
    float: left;
}

.basement span{
    color: #adadad;
}


/* =typo
------------------------------------------------------------------------------------------*/

  


.font-bold, .bold, h1.bold, h2.bold, h3.bold, h4.bold, h5.bold {font-weight: bold !important;}
.text-xl {font-size: var(--font-h3);}
.block {display: block;}

h1, h2, h3, h4, h5 {font-weight: 700 !important;}
.text-white, h1.white, h2.white, h3.white, h4.white, h5.white {color: white !important;}
.text-red, h1.red, h2.red, h3.red, h4.red, h5.red {color: var(--red-main) !important;}
h1.primary, h2.primary, h3.primary, h4.primary, h5.primary {margin: 5px 0 !important;}
h1.secondary, h2.secondary, h3.secondary, h4.secondary, h5.secondary {margin: 5px 0 !important;}

h1{
    font-size: var(--font-h1);
    margin: 0 0 10px 0;
    padding: 0;
    line-height: 1.5;
}

h2 {
    font-size: var(--font-h2);
    margin: 0 0 25px 0;
    padding: 0;
    line-height: 1.2;
}

h3{
    font-size: var(--font-h3);
    margin: 0 0 15px 0;
    line-height: 1;
}

h4{
    font-size: var(--font-h4);
    line-height: 1;
    margin: 0 0 10px 0;
}

h4.service_title{
    font-size: 12px;    
    text-transform: uppercase;
    margin: 0 0 10px 0;
}

h5{
    font-size: var(--font-h5);
    font-weight: normal;
    margin: 0 0 15px 0;
    line-height: 1;
}

h6{
    font-size: 12px;
    font-weight: bold;
    width: 100%;
    text-transform: uppercase;
    padding: 5px 3px 5px 3px;
    margin: 0 0 5px 0;
    line-height: 1;
    text-decoration: none !important;
}

.red, h1.red, h2.red, h3.red, h4.red, h5.red {color: var(--red-main);}
.white, h1.white, h2.white, h3.white, h4.white, h5.white {color: white;}

.line {
 overflow: hidden;
 text-align: center;
}
.line:before,.line:after {
 background-color: var(--grey-lighter);
 content: "";
 display: inline-block;
 height: 1px;
 position: relative;
 vertical-align: middle;
 width: 50%;
}
.line:before {
 right: 0.5em;
 margin-left: -50%;
}
.line:after {
 left: 0.5em;
 margin-right: -50%;
}

.row .footer {background: transparent !important;}
.einezeile {white-space: nowrap;}

ul#menu-footer-menu{
    display: block;
    float: left;
    width: 100%;
    margin: 0 0 15px 0;
    padding: 0;
    color: #89272d;
    font-size: 12px;    
    text-transform: uppercase;
}

ul#menu-footer-menu li{
    margin: 0 25px 0px 0;
    line-height: 3.0;
	display: inline !important;
	transition: all ease 0.18s;
}

.special_offer p{
	margin: 0 20px 20px 0;
}


ul#featured_list{
    display: block;
    float: left;
    width: 100%;
    margin: 30px 0 0 0;
    padding: 0;
}

ul#featured_list li{
    font-size: var(--font-small);
    border-radius: 50px;
    margin: 0 10px 10px 0;
    padding: 5px 10px;
	display: inline-block;
    background: var(--grey-lightest);
    color: var(--grey-main);
}

#room_gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: left;
}
#room_gallery .img-wrap {overflow: hidden;}
#room_gallery img{
    transition: all .3s ease-in-out; display: block;}
#room_gallery img:hover{filter: brightness(0.9); transform: scale(1.05); cursor: zoom-in;}
/* =blog =typo
---------*/

.entry ul{
    list-style-type: square;
    float: none;
    margin: 0 0 15px 20px;
}

.entry ol{
    list-style-type: decimal;
    float: none;
    margin: 0 0 15px 20px;
}

article ul {list-style-type: square; padding-left: 20px;}
article ul li {padding-bottom: 10px;}


.entry ul li,
.entry ol li{
    float: none;
    background: none;
    width: auto;
    margin: 0 0 5px 0;
    padding: 0 0 0 0;
}

.entry strong{
    font-weight: bold;
}

.entry em{
    font-style: italic;
}

/* = caldera form
------------------------------------------------------------------------------------------*/


input[type=button], input[type=submit], input[type=reset] {
    background: var(--red-main);
  background-image: -webkit-linear-gradient(right, var(--red-main), var(--red-dark));
  background-image: -moz-linear-gradient(right, var(--red-main), var(--red-dark));
  background-image: -ms-linear-gradient(right, var(--red-main), var(--red-dark));
  background-image: -o-linear-gradient(right, var(--red-main), var(--red-dark));
  background-image: linear-gradient(to left, var(--red-main), var(--red-dark));
  color: #ffffff;
  padding: 10px 20px;
  border: 0px;
  text-decoration: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}
input:hover[type=button], input:hover[type=submit], input:hover[type=reset] {
  background: var(--red-dark);
  background-image: -webkit-linear-gradient(left, var(--red-main), var(--red-dark));
  background-image: -moz-linear-gradient(left, var(--red-main), var(--red-dark));
  background-image: -ms-linear-gradient(left, var(--red-main), var(--red-dark));
  background-image: -o-linear-gradient(left, var(--red-main), var(--red-dark));
  background-image: linear-gradient(to right, var(--red-main), var(--red-dark));
  text-decoration: none;
}

input[type=submit] {typadding: 15px 50px !important;}

/* =table
------------------------------------------------------------------------------------------*/
.table_container{
    float: left;
    width: 100%;
    margin: 20px 0;    
}

table{
    float: left;
    width: 94%;
    font-size: 13px;
    margin: 20px 3%;
}

th{
    border-bottom: 1px solid #686868;
    border-right: 1px solid #DEDCD3;
    color: #444;
    font-weight: normal;
    padding: 2%;
}

td{
    border-bottom: 1px solid #d7d7d7;
    border-right: 1px solid #DEDCD3;
    text-align: center;
		padding: 5px;
}

th:last-child,
td:last-child{
    border-right: none;
}

tr:last-child td{
    border-bottom: none;
}

/* =foot =typo
------------------------------------------------------------------------------------------*/
#footer ul{
    display: block;
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
}

#footer ul li, #footer ul li.cat-item {
	font-size: 12px;
	margin: 0 0 5px 0;
	padding: 0;
	border: none;
}


#footer .widget_about {
	font-size: 11px;
	line-height: 1.5;
}

#footer .widget,
.footer .columns { margin: 5px 0; }

/* =img
------------------------------------------------------------------------------------------*/
img.is-round {border-radius: var(--radius-std);}
.img-3x4 {aspect-ratio: 3 / 4;width: 100%;object-fit: cover;}
.img_left{
    float: left;
    margin: 0 30px 30px 0;
}
.welcome .img_left {
	margin-bottom: 20px;
}

.img_center{
    float: none;
    display: block;
    margin: 0 auto 30px;
}

/* =linkage
------------------------------------------------------------------------------------------*/
a, p a {
    color: var(--red-main);
    text-decoration: none;
    transition: text-decoration .2s ease;
}
a:hover, li.selected a{
	text-decoration: none;
	color: var(--red-dark);
    transition: text-decoration .2s ease;
}
h1 a, h2 a, h3 a, h4 a {color: var(--red-main) !important;}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover{
    border-bottom: none;
	text-decoration: none;
	color: var(--red-dark) !important;
}

.button, a.button {
    font-size: var(--font-normal);
    font-weight: 600;
    color: #fff;
    padding: 9px 18px;
    background: linear-gradient(to right, #af0917 0%,#e2001a 100%);
    margin: 5px 0;
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    transition: all .3s ease-in-out;
}

a.button div {display:inline;}

.button:hover, a.button:hover, .woocommerce a.button:hover{
    text-decoration: none;
    background: linear-gradient(to right, #e2001a 0%,#af0917 100%);
    color: white;
}

.no-shadow {text-shadow: none;}

.button.is-large {font-size: 1.3rem; padding: 15px 30px;}
.button.is-small {font-size: 0.8rem; padding: 6px 12px;}

.button.is-red {background: var(--red-main); color: #fff;}
.button.is-red:hover {background: var(--red-dark);}

.button.is-black {background: var(--grey-main); color: #fff;}
.button.is-black:hover {background: var(--grey-middle);}

.button.is-white {color: var(--grey-main); background: white; border-color: white;}
.button.is-white:hover {color: var(--red-main); background: white;}

.button.is-grey {background: var(--grey-lighter); color: var(--grey-light);}
.button.is-grey:hover {color: white; background: var(--grey-light);}

.button.is-round {border-radius: 50px;}
.button.is-round-light {border-radius: 3px;}
.button.is-round-10, .is-round-10 {border-radius: 10px;}

.button span {cursor: pointer; display: inline-block; position: relative;}
.button span:after {content: '\eaa0'; font-family: 'IcoFont'; position: absolute; opacity: 0; top: 0; right: -20px; transition: 0.5s;}
.button:hover span {padding-right: 25px; transition: 0.3s;}
.button:hover span:after {opacity: 1;right: 0; transition: 0.3s;}

.button.is-secondary {background: none; border-style: solid; border-width: 1px; padding: 8px 16px;}
.button.is-secondary.is-black {color: var(--grey-main); border-color: var(--grey-main);}
.button.is-secondary.is-red {color: var(--red-main); border-color: var(--red-main);}
.button.is-secondary.is-grey {color: var(--grey-light); border-color: var(--grey-lighter);}
.button.is-secondary.is-red:hover {border-color: var(--red-dark); color: white;}
.button.is-secondary.is-black:hover {border-color: var(--grey-main); background: var(--grey-main); color: white;}
.button.is-secondary.is-white:hover {border-color: white;}
.button.is-secondary.is-grey:hover {border-color: var(--grey-light); color: white;}

.button.is-outline.is-red {border-color: var(--red-main); color: var(--red-main); padding: 9px 17px;}
.button.is-outline.is-red:hover { background: var(--red-main); color: white;}


/*pagination links */
div.pagination a, .wp-pagenavi a, .wp-pagenavi a:visited, .wp-pagenavi span {
    float: left;
    display: inline-block;
    text-align: center;
    background-color: #fff;
    color: #444;
    font-size: 12px;
    margin: 0 5px 0 0 !important;
    padding: 7px 9px !important;
    line-height: 1;
		border: none !important;
}

div.pagination a:hover, .wp-pagenavi a:hover{
    background-color: #EFEFEF;
		border-bottom: none;
		text-decoration: none;
}

div.pagination a.selected, .wp-pagenavi span.current{
    background-color: #333;
    color: #fff;
}

.carousel_container{
	position: relative;
	margin: 0 auto 0px auto;
	padding: 0 0px !important; /*ovverriding the default flexslider values and getting it back to our grid */
}

#carousel{
	width: 100%;
	position: absolute;
	bottom: 0;
	background-color: #333;
	background-color: rgba(0, 0, 0, 0.05);
	padding: 10px 15px;
	overflow: hidden;
}

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

	#carousel{
		width: 100%;
		position: absolute;
		bottom: -110px;
		background-color: #000;
		padding: 0;
	}

}