@font-face {
font-family: 'Titillium Web'; 
font-style: italic; 
font-weight: 400; 
src: url(//www.holzhaus-und-mehr.de/wp-content/themes/wp_holzhaus-2024/fonts/titillium-web-v15-latin-italic.eot); src: local(''),
url(//www.holzhaus-und-mehr.de/wp-content/themes/wp_holzhaus-2024/fonts/titillium-web-v15-latin-italic.eot?#iefix) format('embedded-opentype'), url(//www.holzhaus-und-mehr.de/wp-content/themes/wp_holzhaus-2024/fonts/titillium-web-v15-latin-italic.woff2) format('woff2'), url(//www.holzhaus-und-mehr.de/wp-content/themes/wp_holzhaus-2024/fonts/titillium-web-v15-latin-italic.woff) format('woff'), url(//www.holzhaus-und-mehr.de/wp-content/themes/wp_holzhaus-2024/fonts/titillium-web-v15-latin-italic.ttf) format('truetype'), url(//www.holzhaus-und-mehr.de/wp-content/themes/wp_holzhaus-2024/fonts/titillium-web-v15-latin-italic.svg#TitilliumWeb) format('svg'); } @font-face {
font-family: 'Titillium Web'; 
font-style: normal; 
font-weight: 400; 
src: url(//www.holzhaus-und-mehr.de/wp-content/themes/wp_holzhaus-2024/fonts/titillium-web-v15-latin-regular.eot); src: local(''),
url(//www.holzhaus-und-mehr.de/wp-content/themes/wp_holzhaus-2024/fonts/titillium-web-v15-latin-regular.eot?#iefix) format('embedded-opentype'), url(//www.holzhaus-und-mehr.de/wp-content/themes/wp_holzhaus-2024/fonts/titillium-web-v15-latin-regular.woff2) format('woff2'), url(//www.holzhaus-und-mehr.de/wp-content/themes/wp_holzhaus-2024/fonts/titillium-web-v15-latin-regular.woff) format('woff'), url(//www.holzhaus-und-mehr.de/wp-content/themes/wp_holzhaus-2024/fonts/titillium-web-v15-latin-regular.ttf) format('truetype'), url(//www.holzhaus-und-mehr.de/wp-content/themes/wp_holzhaus-2024/fonts/titillium-web-v15-latin-regular.svg#TitilliumWeb) format('svg'); } @font-face {
font-family: 'Titillium Web'; 
font-style: normal; 
font-weight: 600; 
src: url(//www.holzhaus-und-mehr.de/wp-content/themes/wp_holzhaus-2024/fonts/titillium-web-v15-latin-600.eot); src: local(''),
url(//www.holzhaus-und-mehr.de/wp-content/themes/wp_holzhaus-2024/fonts/titillium-web-v15-latin-600.eot?#iefix) format('embedded-opentype'), url(//www.holzhaus-und-mehr.de/wp-content/themes/wp_holzhaus-2024/fonts/titillium-web-v15-latin-600.woff2) format('woff2'), url(//www.holzhaus-und-mehr.de/wp-content/themes/wp_holzhaus-2024/fonts/titillium-web-v15-latin-600.woff) format('woff'), url(//www.holzhaus-und-mehr.de/wp-content/themes/wp_holzhaus-2024/fonts/titillium-web-v15-latin-600.ttf) format('truetype'), url(//www.holzhaus-und-mehr.de/wp-content/themes/wp_holzhaus-2024/fonts/titillium-web-v15-latin-600.svg#TitilliumWeb) format('svg'); }
:root {
--grey-main: #222; 
--grey-light: #aaa; 
--grey-lightest: #f6f7f8; 
--grey-lighter: #e6e8eb; 
--grey-middle: #5f5f5f; 
--green: #3FA844; 
--green-dark: #18921b; 
--green-light: #D3FFD4; 
--orange: #f59721; 
--orange-dark: #E3681E; 
--orange-light: #f6ab4e; 
--red: #e2001a; 
--small: 13px; 
--medium: 14px; 
--normal: 17px; 
--h1: 42px; 
--h2: 34px; 
--h3: 26px; 
--h4: 20px; 
--h5: 16px; 
}
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-style: normal; 
font: inherit; 
vertical-align: baseline; 
transition: all .2s linear; 
-webkit-transition: all .2s linear; 
-moz-transition: all .2s linear; 
-o-transition: all .2s linear; 
} article, details, figcaption, figure, 
header, hgroup, menu, img  {display: block; }
body{
color: var(--grey-main); 
font-family: "Titillium Web", Arial, sans-serif; 
line-height: 1.5; 
}
::selection { background: var(--green);  color: #fff;  }
::-moz-selection { background: var(--green);  color: #fff;  }
table {border-collapse: collapse; border-spacing: 0; }
*{-webkit-hyphens: none; -moz-hyphens: none; hyphens: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} h1 {font-size: var(--h1); color: var(--green-dark); 
line-height: 1.5; 
font-weight: 600; 
margin: 20px auto 20px auto; }
h1.welcome {
text-align: center; 
margin-top: 20px; }
h2{
color: var(--green-dark); 
font-size: var(--h2); 
margin: 20px 0; 
padding: 0; 
line-height: 1.2; 
}
h2.line {
color: var(--green-dark); 
display: flex; 
width: 100%; 
justify-content: center; 
align-items: center; 
text-align: center; 
font-weight: bold; 
}
h2.line:before, h2.line:after {
content: ''; 
color: var(--grey-lighter); 
border-top: 1px solid; 
margin: 0 40px 0 0; 
flex: 1 0 20px; 
}
h2.line:after {margin: 0 0 0 20px; }
div.line h2{
display: inline-block; 
margin: 0; 
padding: 0 30px; 
background: #FFF; 
}
div.line h1{
display: inline-block; 
margin: 0; 
padding: 0 30px; background: #FFF; 
}
div.line h2.trans{ background: #FFF; }
div.line h2.gallery_title{background-color: #f0f0f0; }
.entry h2{text-transform: none; }
h3 {font-size: var(--h3); margin: 0 0 15px 0; line-height: 1.2;  color: var(--green); }
h4 {font-size: var(--h4); line-height: 1.2; margin: 0 0 20px 0;  font-weight: 600;  color: var(--grey-main); }
h4.service_title {text-transform: uppercase; margin: 0 0 10px 0; }
h5 {font-size: var(--h5);  color: #333; margin: 0 0 15px 0; line-height: 1; }
h6 {font-size: var(--h6); color: #fff !important; background: var(--green); font-weight: 600; width: 100%; text-transform: uppercase; padding: 5px 3px; margin: 0 0 5px 0; line-height: 1;  }
p {
font-size: var(--normal); 
color: var(--grey-main); 
line-height: 1.5; 
margin: 0 0 20px 0; 
padding: 0 
}
p.hero{
font-size: var(--normal); 
text-align: center; 
}
strong, b, .bold, .extrabold {font-weight: 600;  letter-spacing: normal !important; }
.grey {color: var(--grey-light);}
.green {color: var(--green);}
.center {text-align: center !important; }
ul {list-style-position: inside;  margin-bottom: 20px; }
ul li {margin-bottom: 10px; }
ul.check {list-style: none; }
ul.check li::before {content:'\eed8';  font-family: "IcoFont";  margin-right: 15px;  color: var(--green); }
ul.inline li {display: inline-block;  margin-right: 10px;  margin-left: 20px; }
ul.inline li:first-child {margin-left: 0px; }
p ul { margin-bottom: 20px; }
P li {font-size: 13px; }
P li:before {
content: "• "; 
margin: 0 5px 0 25px; 
}
blockquote, q {quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
content: ''; 
content: none; 
} .row .row {margin: 0; }
.row.full{width: 100%; background-color: #f9f9f9; margin: 0 0 10px 0; }
.prisoned{max-width: 1120px; margin: 20px auto 0 auto; overflow: hidden; }
.grid {display: grid;  grid-gap: 20px; }
.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-container-2 {
display: grid; 
grid-template-columns: repeat(2, 1fr); 
grid-gap: 20px; }
.grid-container-4 > div {background-color: white; }
.grid-container-4 {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 20px; }
.grid-padding {padding: 0 10px; }
.grid-padding-50 {padding: 0 50px; }
.grid-padding-100 {padding: 0 100px; }
.grid-padding-200 {padding: 0 200px; }
.grid-padding-300 {padding: 0 300px; }
.column {column-gap: 20px; display: block;}
.column > div {break-inside: avoid-column; margin-bottom: 20px;}
.columns-4-1, .columns-4-2, .columns-4-3, .columns-4-4 {columns: 4;}
.columns-3-1, .columns-3-2, .columns-3-3 {columns: 3;}
.columns-2-1, .columns-2-2 {columns: 2;}
.content-14 {grid-column: 1 / 4; }
@media only screen and (max-width: 600px){}
.four.columns + .eight.columns, .eight.columns + .four.columns {
padding: 0 0 0 30px}
iframe{
width: 100%; 
max-width: 1120px; 
height: 600px; 
margin: 0 auto; 
overflow: hidden; 
display: block; 
}
.containered {width: 100%; margin: 0px auto 80px auto; } header {box-shadow: 0px 0px 20px rgba(0,0,0,0.15); z-index:2; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 0 25px;}
.logo {height: 70px !important;  margin: 15px 5px; }
.mobile-only {display: none !important;}
a.headerbutton {color: var(--grey-main); padding: 5px 10px; display: inline-block; clear: right; text-align: center; cursor: pointer; font-size: 12px; font-weight: 600;}
a.headerbutton i{display: block;}
a.headerbutton:hover {color: var(--green);}
.search-container form {background: var(--grey-lightest); color: var(--grey-main); display: flex; border-radius: 20px; padding: 0; border: none;}
.search-container input[type="search"] {
border: none;
background: transparent;
margin: 0;
padding: 10px 10px;
font-size: 14px;
color: inherit;
border: 1px solid transparent;
border-radius: inherit;
border-radius: none !important;}
.search-container button[type="submit"] {
text-indent: -999px;
overflow: hidden;
float: right;
width: 40px;
padding: 0;
margin: 0 10px 0 0;
border: 1px solid transparent;
border-radius: inherit;
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 center;
cursor: pointer;
opacity: 0.5;}
.search-container button[type="submit"]:hover {opacity: 1;}
.search-container button[type="submit"]:focus, header .search-container input[type="search"]:focus {
box-shadow: 0 0 3px 0 #1183d6;
border-color: #1183d6;
outline: none;}
header #widget {display: flex; justify-content: flex-end; align-items: center;}
#header-bar {background: var(--grey-lightest) !important;  font-size: var(--small);  padding: 5px 0;  text-align: right; }
#header-bar i {margin-right: 5px; } #hero {max-height: 600px;  width: 100%;  position: relative;  color: white;  text-shadow: 1px 1px 15px rgba(0,0,0,1), 0px 0px 5px rgba(0,0,0,1);  text-align: center; }
#hero img {max-height: 500px;  object-fit: cover;  filter: brightness(75%); width: 100%; }
#hero h1 {background: var(--green-dark); display: inline-block;  text-shadow: none;  box-shadow: 5px 5px 20px rgba(0,0,0,0.2);  padding: 5px 20px;  transform: rotate(-1deg);  color: white; }
#hero .safe {display: block; transform: rotate(0.5deg); }
#hero .text-green {background: var(--orange);  color: white;  font-size: var(--h5);  padding: 3px 5px;  -webkit-box-decoration-break: clone;  box-decoration-break: clone;  text-shadow: none;  box-shadow: 5px 5px 20px rgba(0,0,0,0.2);  }
#hero .preline {text-transform: uppercase;  letter-spacing: 1px; }
#hero .copy {color: white; }
#hero a.button3 {text-shadow: none; }
.centered {position: absolute;  top: 50%;  left: 50%;  max-width: 100%;  transform: translate(-50%, -50%); }
.bottom-centered {position: absolute; bottom: 60px; left: 50%; transform: translate(-50%, 0%); }
#white, #lightgrey {padding: 40px 0; }
#lightgrey, .lightgrey {background: #f5f5f5; }
.lightgreen {background: var(--green-light); }
#lightorange {background: var(--orange-light); }
#title {padding: 30px 0;}
#title img {box-shadow: 10px 10px 0px white; transform: rotate(0deg); border-radius: 20px; display: block;}
#title h1 {line-height: 1.2;}
#wald {background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(//www.holzhaus-und-mehr.de/wp-content/themes/wp_holzhaus-2024/img/global/wald.jpg) no-repeat center center;  background-size: cover;  padding: 60px 0;  color: white; }
#green {background: var(--green-dark);  padding: 60px 0;  color: white; }
.white {color: white !important; }
#image-box .container {position: relative;  color: white;  font-size: var(--font-h4); }
#image-box .centered-left {padding: 30px; }
#image-box .card {background: white;  box-shadow: 2px 2px 15px rgba(0,0,0,.1); }
#image-box .card .content-slide {padding: 15px 20px; }
#block-404 {max-width: 400px !important; float: none;}
#block-404 .search-container input[type="search"] {width: 100%;}
#blog-list .entry {
position: relative; 
display: inline-block; 
}
#blog-list .entry img {
display: block; 
width: 100%; 
height: auto; 
filter: brightness(0.85); 
}
#blog-list .entry .overlay {
position: absolute; 
bottom: 0; 
left: 0; 
width: 100%; 
height: 100%; 
background: linear-gradient(to top right, rgba(0,0,0,0.65), rgba(0,0,0,0)); padding: 20px; 
display: flex; 
justify-content: flex-start; align-items: flex-end; }
#blog-list .entry .overlay .text-container {text-align: left; }
#blog-list .entry .overlay h2 {color: white;  margin-bottom: 0px;  font-size: var(--h3);  font-weight: bold; }
#saleheader {
border: 1px solid var(--orange) !important; 
color: var(--grey-main); 
font-size: var(--medium);  
padding: 10px 15px; 
margin: 0px 0px 20px 0px; 
display: block; 
text-align: center; 
position: relative; 
border-radius: 2px; 
box-shadow: 1px 1px 2px rgba(0,0,0,0.05); }
#saleheader:hover {background:  var(--orange-light) !important;  cursor: pointer; }    
.katalog {border: 1px solid #f5f5f5;  padding: 15px; }
#saleheader .close-it {
color: white; 
cursor: pointer; 
position: absolute; 
top: 10px; 
right: 10px; 
width: 20px; 
background: rgba(0,0,0,.2); 
}
#shop-bar {
color: white;  
max-width: 500px; 
padding: 40px;  
position: relative; 
margin: 0 auto; 
text-align: center; 
text-shadow: rgba(0,0,0,0.2) 0px 0px 10px; }
#shop-bar h4 {color: white; }
#shop-bar img {filter: brightness(60%); }
#shop-bar .link {background: var(--orange);  padding: 5px 10px; border-radius: 2px; }
#shop-bar:hover {background: var(--grey-lightest); }
#shop-bar:hover .link {background: var(--orange-light); }
#shop-bar .centered {
position: absolute; 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%); 
width: 80%; 
}
.widget_opening {background: var(--green);  padding: 15px; }
.opening {font-size: 18px; }
.opening-title {font-size: 18px !important;  font-weight: 600;  color: white; }
.opening-time {background: var(--green-dark);  padding: 3px 5px;  border-radius: 8px;  display:inline-block;  margin: 2px;  font-size: var(--medium);  text-align: right;  width: 120px; }
.opening-day {font-size: var(--medium);  width: 110px;  display:inline-block;  }
.widget_about {margin: 10px 0;  color: white; }
.widget_opening a {color: #fff !important; }
.widget_opening a:hover {color: #ccc !important; }
.widget_opening::before {
display: block; 
content: ''; 
position: absolute; 
border: 6px solid transparent; 
border-top-color: #fff; 
width: 0; 
height: 0; 
opacity: 1; 
right: 50px; 
margin-top:-5px; 
clear: both; 
}
a.widgetbutton {
width: 100% !important;  
text-align: center;  
background: var(--green);  
color: white; 
padding: 5px; 
margin: 10px 10px 10px 10px; 
display: block; 
font-size: 14px; 
}
a.widgetbutton:hover {background: var(--green-dark);  color: white; }
#katalog {
padding: 15px 0; 
}
#katalog h3{color: #333; }
#infokasten {background: var(--green);  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; }
.rand {position: relative; left: -20px; margin-right:}
.big {font-size: 18px;  font-weight: 600; } 
.tipp{
margin-bottom: 20px; 
position: relative; 
background: var(--green); 
color: #fff; 
padding: 5px; 
}
.tipp::after{content: ''; position: absolute; left: 20px; top: 100%; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid var(--green); clear: both; }
#offers {margin: 0px; }
#offers img {border-radius: 15px; }
#offers ul {
align-items: flex-start; 
display: flex; 
flex-wrap: nowrap; 
list-style: none; 
margin: 1rem 0; 
overflow-x: scroll; 
padding: 0 0 0 1rem; 
scroll-padding-left: 1rem; 
scroll-snap-type: x mandatory; 
scrollbar-width: none; 
}
#offers ul::-webkit-scrollbar {
display: none; 
}
#offers ul li {
padding: 0 1rem 0 0; 
scroll-snap-align: start; scroll-snap-stop: always; 
}
#offers ul li div.home-room {
width: 300px; 
}
#offers #prev, #offers #next {
position: absolute; 
top: 50%; 
transform: translateY(-50%); 
width: 35px;  height: 35px; 
z-index: 2; 
background-color: white; 
border-radius: 20px; 
border: none; 
font-size: 0.8rem; 
padding: 0.8rem; 
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15); 
color: var(--green-main); 
cursor: pointer; 
display:flex; justify-content: center; 
align-items: center; 
}
#offers #prev {left: 4px; }
#offers #next {right: 4px; }
#offers #prev:hover, #offers #next:hover {background: var(--green-dark);  color: white;  }
#banner {
background: var(--green-dark);
padding: 20px; text-align: center; color: white; font-size: var(--h4); font-weight: bold; margin: 20px 0;}
.highlight{
display: inline-block;
padding: .1em 0.2em;
background: black;
color: #ffffff;
}
a #banner, #banner a {color: white;}
#gallery {margin: 0px; }
#gallery #image-box {
align-items: flex-start; 
display: flex; 
flex-wrap: nowrap; 
list-style: none; 
margin: 0; 
overflow-x: scroll; 
padding: 0; 
scroll-padding-left: 1rem; 
scroll-snap-type: x mandatory; 
scrollbar-width: none; 
}
#gallery #image-box::-webkit-scrollbar {
display: none; 
}
#gallery #image-box .card {
padding: 0 0 0 0; 
margin: 10px 10px; 
scroll-snap-align: start; scroll-snap-stop: always; 
}
#gallery #image-box .card .container {
width: 350px; 
}
#gallery #prev, #gallery #next {
position: absolute; 
top: 50%; 
transform: translateY(-50%); 
width: 35px;  height: 35px; 
z-index: 2; 
background-color: white; 
border-radius: 20px; 
border: none; 
font-size: 0.8rem; 
padding: 0.8rem; 
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15); 
color: var(--green-main); 
cursor: pointer; 
display:flex; justify-content: center; 
align-items: center; 
}
#gallery #prev {left: 4px; }
#gallery #next {right: 4px; }
#gallery #prev:hover, #gallery #next:hover {background: var(--green-dark);  color: white;  } #musterhaus .item {background: white; }
#musterhaus .container {position: relative; }
#musterhaus .nummer {background: #e2001a;  border: 3px solid white;  height: 40px;  width: 40px;  position: absolute; top: 5px; right: 5px;  font-weight: bold;  text-align: center;  color: white;  font-size: 20px; }
#musterhaus .content {margin:15px; }
#musterhaus .name {font-weight: bold;  color: white;  font-size: var(--h3); }
#musterhaus .type {color: white;  background: var(--green);  display: inline-block;  font-size: var(--small);  border-radius: 20px;  padding: 3px 9px; }
#musterhaus .bottom-left {position: absolute; bottom: 5px; left: 0px;  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.3));  padding: 20px;  width: 100%; }
#musterhaus .details {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 15px; }
.label {font-size: var(--small);  font-weight: bold; }
#musterhaus .preis {text-align: right;  font-weight: bold;  color: var(--green);  font-size: var(--h3); }
#musterhaus .musterpreis {text-align: right;}
#musterhaus .musterpreis b {font-weight: bold;  color: var(--red);}
#musterhaus .icon {width: 52px;  float: left;  padding-right: 10px; }
.widget_search {margin-right: 10px; }
.widget_search input{
box-shadow: 1px 1px 2px rgba(0,0,0,0.05); 
font-size: 14px; 
color: #999 !important; 
border: 1px solid; 
background: var(--grey-lightest); 
border-radius: 2px; 
width: 400px; 
height: 48px; 
padding: 12px 15px !important; 
cursor: pointer; 
position: relative; 
top:-19px !important; 
}
.widget_search input:hover {border: 1px solid var(--green-light); }
.magnifier {position:absolute;  right:10px; top:20px; font-size: 20px !important;  color: #999 !Important;  cursor: pointer; }
.widget_search input:focus{color: #333 !important; }
.widget_search input.searchsubmit{display: none; }
.widget_search #submit_magnifier {top:-2px !important; } .step {background: green; padding: 100px 0; color: white;}
#schritte .preline {color: grey; text-transform: uppercase; font-size: var(--small); letter-spacing: 3px;}
#step1 {background: linear-gradient(15deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3)), url(//www.holzhaus-und-mehr.de/wp-content/themes/wp_holzhaus-2024/img/global/schritt1.jpg) no-repeat center center;  background-size: cover;  color: white; }
#step2 {background: linear-gradient(15deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3)), url(//www.holzhaus-und-mehr.de/wp-content/themes/wp_holzhaus-2024/img/global/schritt2.jpg) no-repeat center center;  background-size: cover;  color: white; }
#step3 {background: linear-gradient(15deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3)), url(//www.holzhaus-und-mehr.de/wp-content/themes/wp_holzhaus-2024/img/global/schritt3.jpg) no-repeat center center;  background-size: cover;  color: white; }
#step4 {background: linear-gradient(15deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3)), url(//www.holzhaus-und-mehr.de/wp-content/themes/wp_holzhaus-2024/img/global/schritt4.jpg) no-repeat center center;  background-size: cover;  color: white; }
#step5 {background: linear-gradient(15deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3)), url(//www.holzhaus-und-mehr.de/wp-content/themes/wp_holzhaus-2024/img/global/schritt5.jpg) no-repeat center center;  background-size: cover;  color: white; } .nav{
font-weight: 600; 
font-size: 15px; 
position: relative; 
margin-top: 20px; 
z-index: 12; 
}
ul#main-nav {margin: 0;}
ul#main-nav > li {
display: inline-block;
font-size: 17px;
padding: 39px 0;
}
ul#main-nav > li > a {
color: var(--color-text-main);
font-weight: 600;
padding: 5px 0;
border-bottom: 2px solid white;
margin: 0px 12px;}
ul#main-nav li a:hover {color: var(--green); border-bottom: 2px solid var(--green); color: var(--green);}
ul#main-nav li.menu-item-has-children > a::after {
content: '\eab2'; position: relative; color: var(--grey-lighter);
margin-left: 5px;
font-family: "IcoFont"; }    
ul#main-nav li.menu-item-has-children > a::after {
color: var(--grey-lighter); 
}
ul#main-nav li.menu-item-has-children:hover > a::after {
color: var(--green); 
}
ul#main-nav li ul {display: none; font-size: 15px; }
ul#main-nav > li:hover > ul {
text-align: left;
top: 90px;
display:block;
position:absolute;
margin: 0;
float: none;
background: var(--color-grey-lighter);
width: auto;
padding: 0px;
box-shadow: 0 10px 10px rgba(0,0,0,.1);
border-top: 1px solid #eaeaea;
transition: 1s 1s;
z-index: 3;
background: white;
transition-delay:1s;
}
ul#main-nav i {display: none;}
ul#main-nav li ul li {display: block; padding: 0; margin: 0;}
ul#main-nav li ul li a {font-size: 15px; display: block; color: var(--grey); font-weight: normal; border-bottom: none; padding: 7px 20px !important; margin: 0;}
ul#main-nav li ul li a:hover {border-bottom: none; background: var(--green-dark); color: white;}
ul#main-nav > li.current_page_item > a {color: var(--grey-middle);}
.small {font-size: var(--small);}
nav img.ausstellung {height: 120px; float: right; margin-top: 30px; transform: rotate(3deg); box-shadow: 2px 2px 8px rgba(0,0,0,.2); border: 3px solid white; border-radius: 100%;}
#section > ul {list-style: none; } .top-right {position: absolute; top: 3px; right: 5px;  }
.copyright {text-shadow: 0px 0px 3px rgba(0,0,0,.5);  font-size: 8px;  color: white;  opacity: 0.75; }
.top-left {position: absolute; top: 3px; left: 3px;  }
.counter {font-size: var(--small);  color: white;  background: rgba(0,0,0,.2);  padding: 1px 3px; border-radius: 3px; } .checklist-container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
max-width: 800px;
margin: 0 auto;
border: 2px solid #e0e0e0;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); background-color: #f9f9f9;
background-image: repeating-linear-gradient(
to bottom,
#f2f2f2 0,
#f2f2f2 1px,
transparent 1px,
transparent 30px
);
background-size: 100% 30px;
}
.checklist-container ul {list-style: none; padding: 0; margin: 0;}
.checklist-container li {margin: 5px 0; padding: 10px;}
.checklist-container input[type="checkbox"] {
width: 24px;
height: 24px;
margin-right: 15px;
vertical-align: middle;
accent-color: var(--green); transform: scale(1.2);
transition: transform 0.2s ease;
}
.checklist-container input[type="checkbox"]:checked {transform: scale(1.2);}
.checklist-container label {font-size: 1.1em; color: #333; vertical-align: middle; display: inline; font-weight: bold;}
.details {
font-size: var(--medium);
margin-top: 5px;
margin-bottom: 5px;
}
#progress-container {
margin-top: 20px;
background-color: #ddd;
height: 20px;
border-radius: 10px;
}
#progress-bar {
height: 100%;
background-color: #4CAF50;
width: 0%;
border-radius: 10px;
transition: width 0.3s;
}
#status-message, #success-message {
margin-top: 20px;
font-size: 1.2em;
color: #333;
}
.confetti {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
z-index: 9999;
}
.wp-block-image {margin-bottom: 10px;} #home-hero-widgets {margin-top: 10px;}
#home-hero-widgets .grid.grid-2-1 {grid-gap: 10px;}
.front-category {background: #ebebeb; color: var(--grey-main); padding: 10px; font-weight: 600; font-size: 14px; }
.front-category:hover {background: var(--green); color: white; }
.room-menu-nav {text-align: center; display: flex; align-items: center; justify-content: center}
ul.room-menu{display: block; float: left; margin: 0; padding: 15px 0; }
ul.room-menu li{float: left; display: inline; margin-bottom: 10px; }
ul.room-menu li:first-child{margin-left: 0; 	}
ul.room-menu li a{padding: 5px 10px !important; background: #efefef; margin: 0 10px; font-size: 13px; color: var(--grey-main); }
ul.room-menu li a:after { margin-left: 5px; content: "\eaa0";  font-family: "IcoFont" }
ul.room-menu li a:hover{background: var(--green); text-decoration: none; color: white; }
#shop {margin-bottom: 20px;}
#shop h4 {color: white; text-shadow: 0 0 15px rgba(0,0,0,.2);}
#shop a:hover img.pic {filter: brightness(0.9);}
#shop .container {position: relative; text-align: center; color: white;}
#shop .top-center {position: absolute; top: 0px; left: 50%; transform: translate(-50%, 0);}
#shop .bottom-center {position: absolute; width: 100%; bottom: 0px; left: 50%; transform: translate(-50%, 0); padding: 20px 20px 10px 20px;}
#shop .gradient {position: absolute;bottom: 0px;left: 0px;width: 100%; height: 100%;background: linear-gradient(rgba(0, 0, 0, 0.0)30%, rgba(0, 0, 0, 0.5) 100%);}
#shop .partnerlogo {background: rgba(255,255,255,0.9); padding: 10px; height: 100px; box-shadow: 3px 3px 3px rgba(0,0,0,.2); border-radius: 0 0 10px 10px;}
.shiftup {top: 0px;  position:relative;  opacity:1; }
.shiftup:hover {top: 10px;  position:relative;  opacity:0.8; }
.offer {position: absolute; background: var(--green); left:20px; right: 20px; bottom:20px; color: #FFF; font-weight: 600; font-size: 20px; padding: 5px 5px; line-height: normal; }
.offer::before{content: ''; position: relative; left: 15px; top: -36px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid var(--green); clear: both; }   
.item-thumb .text { color: #fff;  font-weight: 600;  text-align: left; padding: 35px; line-height: normal; position: absolute;bottom: 0px;left: 0px;} 
.item-thumb .text > h2 {
font-size: var(--h1);
color: white !important;
display: block; margin-bottom: 10px; 
line-height: 1.0;  
text-shadow: 0px 0px 10px rgba(0,0,0,0.75);  }
.item-thumb .text > .teaser {font-size: var(--h4);  display: block;  margin-bottom: 10px;  text-shadow: 0px 0px 10px rgba(0,0,0,0.75); } 
.item-thumb .text > .button {background: var(--green-dark);  color: white; margin-bottom: 0px; font-size: var(--h5);  padding: 8px 12px; bottom: 10px; border-radius: 2px; border: none;}
.item-thumb img {opacity: 1;}
.item-thumb {position: relative; overflow: hidden; display: block;}
.item-thumb > a {position: relative; display: block;  } 
.item-thumb .linear-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(10deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 60%);
}
.item-thumb:hover .text {bottom: 10px; }
.item-thumb:hover img {filter: brightness(0.7); transform: scale(1.05); }
.item-thumb:hover .button {background: var(--green); }
.widget-page {
background: var(--grey-lightest); 
}
.widget-page .abstand{padding: 10px 20px 20px 20px; }
.home-room {position: relative; }
.home-room .bottom-left {
position: absolute; 
bottom: 18px; 
left: 10px; 
padding: 7px 10px; 
font-size: var(--h4); 
color: var(--grey-main); 
font-weight: 600; 
background: rgba(255,255,255,0.9); 
}
.home-room .bottom-left::after {
content: '\eaa0'; 
font-size: var(--h5); 
margin-left: 10px; 
font-family: "IcoFont"; 
}
.home-room:hover .bottom-left {padding: 7px 20px;  background: white; }
.room_intro:hover .offer {padding: 15px 5px; } 
.room_intro:hover .offer::before{top: -46px; }
.room_intro:hover .item-thumb {top: -20px; opacity: 0.4; }
.room_intro {margin: 0px 0px 20px 0px;    padding: 0px; overflow:hidden; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); bottom: 0; position:relative;  }
.room_intro_container {position: relative; width: 100%; background: black; }
.room_intro_image {opacity: 1; display: block; width: 100%; height: auto;  backface-visibility: hidden; }
.room_intro_middle {opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); text-align: center; }
.room_intro_container:hover .room_intro_image {opacity: 0.9; }
.room_intro_container:hover .room_intro_middle {opacity: 1; }
.room_intro_container .room_intro_text{animation-play-state: paused; color: white; }
.room_intro_container:hover .room_intro_text, .room_intro:hover ~ .room_intro_text, .room_intro_box:hover ~ .room_intro_text {border: 2px solid white; border-radius: 3px; color: white; text-transform: uppercase; font-weight: 600; font-size: 16px; padding: 8px 20px; animation: infinite; animation-name: example; animation-duration: 10s; animation-timing-function: ease-out; animation-play-state: running; }
@keyframes example {
0% {transform: scale(1.2); }
10% {transform: scale(1.0); }
90% {transform: scale(1.0); background: none; }
95% {background: var(--green); }
100% {transform: scale(1.2); background: none; }
}
.room_intro_box{padding: 0 10px 10px 10px; margin-top: -6px; background: white; }
.room_intro_box:after, .room_intro_title:after{bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-bottom-color: #ffffff; border-width: 20px; margin-left: -20px;  } 
.room_intro:hover {bottom: 10px; position: relative; }
.room_intro_title {text-transform: uppercase; margin-top: 15px; text-align: center; font-size: 16px; font-weight: 600; color: #4f4f4f; position: relative;}
.room_intro:hover .room_intro_thumb{opacity: 0.8; }
.room_intro:hover a{text-decoration: none; }
.room_intro img {object-fit: cover; }
.room_intro:hover .room_intro_title {color: var(--green); }
.room_intro_thumb {overflow: hidden; height: 194px !important; }
#room-kontakt {background: var(--grey-lightest);  padding: 40px;  margin-top: 40px; }
ul.columns-2 {column-count: 2;  column-gap: 40px; }
ul#check{list-style-type: none; padding: 0; }
ul#check li {position: relative; padding-left: 30px;  margin-bottom: 10px;  font-size: var(--normal)}
ul#check li:before {content: '\eed8'; font-family: "IcoFont"; position: absolute; left: 0; top: 0; color: var(--green); }
#ausstellung-gallery {column-count: 4;  column-gap: 15px; margin-bottom: 30px;  }
.ausstellung-image {position: relative;  margin-bottom: 15px; }
.ausstellung-image .bottom-left {
position: absolute; 
width: auto;
bottom: 0px; 
left: 0px;
padding: 3px 6px; 
margin: 0; 
font-size: var(--small); 
color: white; 
background: rgba(0,0,0,0.7);  
}
.ausstellung-image .bottom-left::before {
content: '\ef4e'; 
margin-right: 5px; 
font-family: "IcoFont"; 
}
#blog .container {position: relative;  color: white;  font-size: var(--font-h3); }
#blog img {filter: brightness(0.7); }
.bottom-left {position: absolute; bottom: 0px; left: 0px; padding: 20px; color: white; font-size: var(--font-h3); } dl dt{
display: block; 
float: left; 
width: 100%;    
padding: 20px 0 0 0; 
}
dl dd{
display: block; 
float: right;     
width: 100%; 
} #service-entry {background: var(--grey-lightest); border-radius: 20px;}
#service-entry h2, #service-list h2 {font-weight: bold;}
#service-entry img {border-radius: 20px;}
#service-entry .overlay {position: absolute;
top: 0px;
left: 0px;}
#service-entry.orange {background: var(--orange) !important;  color: white !important; }
#service-entry.orange h2, #service-entry.orange p {color: white !important; }
#service-entry .details {padding: 0 20px 20px 20px;}
#service-list {padding: 20px; border-radius: 20px; border: 1px solid var(--grey-lighter);
display: flex;
align-items: flex-start;
gap: 20px;
margin-bottom: 20px;
}
.thumbnail-wrapper {
flex-shrink: 0;
width: 70px;
height: 70px;
border-radius: 50%;
overflow: hidden;
}
.thumbnail-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 50%;
}
#service-list .details h2 {margin: 0 0 10px;}
#service-list .details {flex: 1;}
#service-list .details p {font-size: var(--medium);}
.details p:last-of-type {margin-bottom: 0;}
.entry-thumb {
padding: 0; 
margin: 0;  }
.entry-thumb img.alignnone {
margin: 0;  }
.entry-service img {margin:0 !important; 
width: 100% !important; }
.special-title {
font-size: 20px; 
text-transform: uppercase; 
color: #fff; 
font-weight: 600; 
margin: 0 !important; 
padding: 7px 5px; 
background: var(--green); 
top: -6px; 
position: relative; 
}
.special-title::before {
content: ''; 
position: relative; 
left: 14px; 
top: -30px; 
width: 0; 
height: 0; 
border-left: 7px solid transparent; 
border-right: 7px solid transparent; 
border-bottom: 7px solid var(--green); 
}
.entry-excerpt {
padding: 0px 5px; }
::-webkit-input-placeholder{color: #686868; }
:-moz-placeholder{color: #686868; }
input[placeholder], [placeholder], *[placeholder]{color:#686868!important} #entry{
float: left; 
width: 100%; 
}
#entry h3 {color: var(--grey-main) !important; }
#entry:hover h3 {color: var(--green) !important; }
#entry p {margin: 10px; }
#categories {text-align:center; }
#categories a {background: #eee; color: var(--grey-main); padding: 2px 4px; font-size: 10px; }
#categories a:hover {background: var(--grey-main); color: #ffffff; }
#categories a:first-child {display: none; }
img a:hover, a img:hover {filter: brightness(0.9); }
h1.center {text-align: center !important; }
#divider {display: block; width: 100%; height: 15px; background: linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.03) 40%); margin: 15px 0;}
#divider-20 {display: block; width: 100%; height: 20px; } .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; }
.wp-caption {max-width: 100%;  padding: 0px 0px 0px; text-align: left; background: var(--green); color: white; }
.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, .wp-caption-text {font-size: 15px; line-height: 17px; margin: 0; color: #fff !important; padding: 8px; }
.wp-caption p.wp-caption-text::before, .wp-caption-text::before {content: ''; position: relative; left: 20px; top: -32px; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid var(--green); clear: both; } aside{float: left; width: 100%; margin: 20px 0 10px 0; }
.aside_container{float: left; width: 100%; font-size: 13px; color: #333; line-height: 1.5; margin: 0 0 0px 0; }
.aside_container h3{font-size: 18px; }
.aside_container h3:after {content: '';  display: block;  width: 30px;  height: 3px;  margin-top: 10px;  background-color: var(--green); }
.aside_container p+p{margin: 0; }
.aside_container .menu-item {display: block; }
.aside_container .menu-item a {
display: block; 
margin-bottom: 1px; 
background-color: var(--green); 
color: #fff; 
font-size: 15px; 
font-weight: 600; 
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; 
}
.aside_container .menu-item a:hover {background-color: var(--green-dark); color: #fff; text-decoration: none; }
.aside_container .menu-item a:hover::before {opacity: 1; left: 0; } #search-result {border-radius: 20px;  padding: 20px; }
#search-result > p, #search-result > p .span {font-size: var(--medium);  margin-bottom:10px;  }
#search-result img {border-radius: 10px; margin-bottom: 5px;}
#search-result:hover {box-shadowe: 0px 0px 20px rgba(0,0,0,0.1); background: rgba(0,0,0,.05);}
.navigation li a, .navigation li a:hover, .navigation li.active a, .navigation li.disabled {color: #fff; text-decoration:none; }
.navigation li {display: inline; }
.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
background-color: #eee; 
border-radius: 3px; 
cursor: pointer; 
padding: 10px 20px; 
color: var(--grey-main); 
}
.navigation li a:hover {background-color: var(--green); color:white; }
.navigation li.active a {font-weight: 600; }
.widget_about img {max-width: 135px; height: auto; }
.widget_about .alignleft,.widget_about .alignright {margin-bottom: 8px; }
aside .textwidget, aside .widget_about, aside .widget_about p {font-style: normal !important; }
aside .textwidget p {line-height: 1.5; }
.tul{font-size: 13px; color: #333; }
.tul li{
clear: both; 
float: left; 
width: 100%; 
margin: 0 0 10px 0; 
padding: 0 0 10px 0; 
border-bottom: 1px solid #d2d2d2; 
}
.tul li:last-child{
border-bottom: none; 
}
.tul span{
float: left; 
width: 100%; 
color: #686868; 
}
select[name="orderby"] {padding: 5px;  border: 0px; }
input[type=text], input[type=tel],input[type=number], input[type=email], input[type=password], input[type=search], textarea, select {
padding: 10px;  border: 1px solid #ddd;  border-radius: 3px; font-family:"Titillium Web";  font-size: 14px; }
textarea {min-height: 150px; }
button[type=submit].button {color:white; }
input[type=button], input[type=submit], input[type=reset] {
background: var(--green); 
color: #fff; 
padding: 10px 20px 10px 20px; 
border: 0px; 
text-decoration: none; 
cursor: pointer; 
font-size: 14px; 
font-weight: 600; 
border: 1px solid var(--green); 
}
input:hover[type=button], input:hover[type=submit], input:hover[type=reset] {
background: #fff; 
color: var(--green-dark); 
text-decoration: none; 
}
input.btn.btn-default {background: var(--green);  color: white;  padding: 15px 20px;  font-size: var(--h4); }
input.btn.btn-default:hover {background: var(--green-dark);  color: white; } #footer{
padding: 40px 0; 
background: var(--green-dark) !important; 
width: 100%; 
color: white; 
}
#footer h4 { color: white;  padding: 0px 0;  margin-bottom: 10px; }
#footer p {color: white;  font-size: var(--medium);  margin-bottom: 0; }
ul#menu-footer-menu{
display: block; 
width: 100%; 
padding: 0; 
display: block; 
list-style-type: none; 
text-transform: uppercase; 
font-size: var(--medium);     
text-transform: uppercase; 
}
ul#menu-footer-menu li{
margin: 0; 
display: inline-block; 
line-height: 2.0;  
}
#footer ul li a {color: white;  background: var(--green);  padding: 2px 6px;  margin: 0; }
#footer ul li a:hover {background: white;  color: var(--green-dark)}
#ausstellung .safe {display: block;margin-bottom: 20px;}
#ausstellung .text-green {background: var(--orange); color: white; font-size: var(--h3); padding: 3px 5px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
#ausstellung h4, #ausstellung p {color: white;}
#map {position: relative;}
#map > img {height: 350px; width: 100%; object-fit: cover; border: 5px solid white; box-shadow:2px 2px 5px rgba(0,0,0,.2);}
#map .top-left {position: absolute; top: 5px; left: 5px; background: white; font-size: 12px; box-shadow: 2px 2px 5px rgba(0,0,0,.2); padding: 5px; margin: 10px; border-radius: 2px; color: black;}
.grid-map {grid-column: 2 / 4;}
@media only screen and (max-width: 600px){.grid-map {grid-column: unset;}}
a.social {
width: 50px;  
height: 50px;  
background: var(--green); 
border-radius: 60px; 
text-align: center; 
vertical-align: center; 
display: inline-block; 
color: white; }
a.social > i {font-size: 26px;  color: white;  top:50%;  position: relative;  transform: translateY(-50%)}
a.social:hover {background: var(--green-light);  transform: scale(1.1); color: var(--green);} .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; }
.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: 600; }
.entry em{font-style: italic; } .table_container{
float: left; 
width: 100%; 
margin: 20px 0;     
}
table{
float: left; 
font-size: 13px; 
}
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; 
padding: 5px; 
}
th:last-child,
td:last-child{
border-right: none; 
}
tr:last-child td{
border-bottom: none; 
} a, p a, h1 a, h2 a, h3 a, h4 a, h5 a {color: var(--green); text-decoration: none; }
a:hover, li.selected a, h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover{
text-decoration: none; 
color: var(--green-dark); 
}
a.button, .text-container .button, .button{
font-size: var(--normal); 
font-weight: 600; 
cursor: pointer; 
margin: 10px auto; 
border: 1px solid var(--green-dark); 
background: var(--green); 
color: white; 
padding: 12px 15px; 
border-radius: 2px; 
line-height: 1.1; 
display: inline-block; 
box-shadow: 1px 1px 2px rgba(0,0,0,0.05); 
}
a.button:hover, .text-container .button:hover, .button:hover {
text-decoration: none; 
background: var(--green-dark); 
cursor: pointer; 
}
a.buttonorange, .text-container .buttonorange, .buttonorange{
font-size: var(--normal); 
font-weight: 600; 
cursor: pointer; 
margin: 10px auto; 
border: 1px solid var(--orange-dark); 
background: var(--orange); 
color: white; 
padding: 12px 15px; 
border-radius: 2px; 
line-height: 1.1; 
display: inline-block; 
box-shadow: 1px 1px 2px rgba(0,0,0,0.05); 
}
a.buttonorange:hover, .text-container .buttonorange:hover, .buttonorange:hover {
text-decoration: none; 
background: var(--orange-dark); 
cursor: pointer; 
}
a.button2{
display: inline-block; 
font-family: "Titillium Web", "Helvetica Neue", Helvetica, Arial, sans-serif; 
margin: 10px auto 10px auto; 
border: var(--green) solid 1px; 
color: var(--green); 
cursor: pointer; 
text-align: center; 
padding: 10px 20px; 
border-radius: 2px; 
font-weight: 600; 
margin: 20px auto; 
position:relative; 
bottom: 0; 
}
a.button2:hover{
background: var(--green); 
text-decoration: none; 
color: white; 
bottom: 5px; 
}
a.button3 {
border-radius: 3px; 
background: var(--green); 
color: white; 
margin: 0; 
text-align: center; 
font-size: 14px; 
font-weight: 600; 
padding: 7px 15px; 
width: 200px;  
cursor: pointer; 
}
a.button3:hover{
background: var(--green-dark); 
color: white; 
}
a.button3 span {
cursor: pointer; 
display: inline-block; 
position: relative; 
}
a.button3 span:after {
content: '\eaa0'; 
font-family: 'IcoFont'; 
position: absolute; 
color: white; 
opacity: 0; 
top: 0; 
right: -20px; 
}
a.button3:hover span {
padding-right: 25px; 
}
a.button3:hover span:after {
opacity: 1; 
right: 0; 
}
a.button4 {
font-size: var(--medium); 
font-weight: 600; 
text-align: center; 
margin: 0 auto 30px auto; 
display: block; 
border: 1px solid var(--grey-light); 
background: #f5f5f5; 
color: var(--grey); 
padding: 6px 12px; 
border-radius: 2px; 
box-shadow: 1px 1px 2px rgba(0,0,0,0.05); 
}
a.button4:hover{
text-decoration: none; 
background: var(--green); 
color: white; 
border: 1px solid var(--green-dark); 
cursor: pointer; 
}
table a.button{
float: none; 
width: 100px; 
font-size: 13px; 
margin: 10px auto; 
padding: 3px 0; 
}
.button4 {
border-radius: 3px; 
background: white; 
border: 2px solid white; 
color: #333; 
text-align: center; 
font-size: 16px; 
font-weight: 600; 
padding: 7px 15px; 
width: 200px; 
cursor: pointer; 
}
.button4:hover{
background: none; 
color: white; 
}
.button4 span {
cursor: pointer; 
display: inline-block; 
position: relative; 
}
.button4 span:after {
content: '\eaa0'; 
font-family: 'IcoFont'; 
position: absolute; 
color: white; 
opacity: 0; 
top: 0; 
right: -20px; 
}
.button4:hover span {
padding-right: 25px; 
}
.button4:hover span:after {
opacity: 1; 
right: 0; 
} @media (min-width: 960px) {
.grid-container-4 > div {background-color: white; }
.grid-container-4 {display: grid; grid-template-columns: repeat(4, 1fr); }
}