@font-face {
    font-family: 'Noto Sans';
    font-display: swap;
    src: url('/wp-content/themes/brettfeld/assets/fonts/NotoSans-Bold.ttf');
	font-weight:700;
}

@font-face {
    font-family: 'Noto Sans';
    font-display: swap;
    src: url('/wp-content/themes/brettfeld/assets/fonts/NotoSans-Regular.ttf');
    font-weight: 400;
}

@font-face {
    font-family: 'Noto Sans';
    font-display: swap;
    src: url('/wp-content/themes/brettfeld/assets/fonts/NotoSans-Italic.ttf');
    font-weight: 400;
	font-style:italic;
}

/* ============================= CSS RESET ============================== */

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, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, 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, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
html {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
*, *:before, *:after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
  }
img,
video {
    vertical-align: middle;
}
h2 {
	font-weight:bold;
}
.clear {
	clear:both;
}


/* Preloader */
#preloader {
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
    background: rgba(211, 3, 28, 0.9);
	z-index:99;
}

.loader,
.loader:before,
.loader:after {
  background: #ffffff;
  -webkit-animation: load1 1s infinite ease-in-out;
  animation: load1 1s infinite ease-in-out;
  width: 1em;
  height: 4em;
}
.loader {
  color: #ffffff;
  text-indent: -9999em;
  margin: 88px auto;
  position: relative;
  font-size: 11px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  position: absolute;
  top: 0;
  content: '';
}
.loader:before {
  left: -1.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 1.5em;
}
@-webkit-keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}
@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}

/* ============================= CUSTOM CSS ============================== */

html { 
	-webkit-text-size-adjust: 100%;
	height: 100%;
}
body {
/*	background: url(images/Slider_Desktop_Bild1.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;	*/
	height:100%;
	overflow-x: hidden;
	overflow-y: scroll;
	font-family: 'Noto Sans', sans-serif;
	line-height:150%;
	font-size:100%;	
	display: block;

	-webkit-overflow-scrolling: touch;
}
 
html.scroll_no {
	height:100%;
	-webkit-overflow-scrolling: touch;	overflow: hidden !important; 
	}
body.info_page {
	background:none;
}
#dim {
	display:none;
	position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: rgba(76, 76, 76, 0.8);
	z-index:25;
}
	
.slogan {
	position: fixed;
	top:50%;
	margin-top:-150px;
	left:20%;
	color:#fff;
	font-size:34pt;
	line-height:50pt;
	font-weight:700;
	z-index:0;
	pointer-events: none;
	white-space:nowrap;
}
.slogan_stroke {
	margin-top:8px;
	width:70px;
	height:8pt;
	background:#fff;
	display:block;
}
.slogan_red_bg {
	background-image:url('/wp-content/uploads/slogan_red_bg.png');
	background-repeat: repeat-x;
	background-position:bottom;
}
.scroll_next {
	position:fixed;
	width:38px;
	bottom:0px;
	height:18px;
	overflow:hidden;
	left:50%;
	margin-left:-19px;
	background:#d3031c;
	cursor:pointer;
	z-index:0;
}

.scroll_top {
	display:none;
	position:fixed;
	bottom:0;
	right:0px;
	margin-right:0px;
	background:#d3031c;
	text-align:center;
	cursor:pointer;
	z-index:40;
}
.scroll_top a {	
	color:#fff;
	text-decoration:none;
	font-size:8pt;
	font-weight:700;
	letter-spacing:0.04em;
	padding:0 8px;
}
.logo_red_box {
	position:fixed;
	top:20px;
	right:0px;
	width:30px;
	height:80px;
	background:#d3031c;
	z-index:20;
	cursor:pointer;
}
.logo_text	{
	display:none;  
	position:fixed;
	top:20px;
	right:32px;
	z-index:20;
}
.logo_text img {
	max-height:80px;
	width:auto;
}
	
#wrapper {
	position:relative;
	width:100%;
	min-height:100vh;
	margin-top:100vh;
	background:#fff;
	z-index:10;
}
#section_01 .image_right {
	padding-top:80px;
}
body.info_page #wrapper {
	margin-top:0;
	min-height:100%;
}
#wrapper_box {
	max-width:1366px;
	margin: 0 auto;
	padding:0 55px;
	background:#fff;
	-webkit-transform: translate3d(0,0,0);
}

	
	
#menu_trigger,
#info_page_back {
	position:fixed;
	top:20px;
	left:20px;
	z-index:40;
	cursor:pointer;
}

#menu {
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:450px;
	height:100vh;
	background:#fff;
	padding:100px 20px 50px 50px;
	z-index:30;
}
#menu ul.main_menu li {
	margin:40px 0;
}
#menu ul.sub_menu {
	margin:100px 0 0 0;
}
#menu ul.sub_menu li {
	margin:30px 0;
}
#menu ul.main_menu li a {
	display:block;
	color:#4c4c4c;
	text-decoration:none;
	padding-left:15px;
	border-left:10px solid #fff;
	text-transform:uppercase;	
	font-size:18pt;
	line-height:18px;
	font-weight:700;
	letter-spacing:0.04em;
}
#menu ul.sub_menu li a {
	display:block;
	color:#999;
	text-decoration:none;
	padding-left:15px;
	border-left:10px solid #fff;
	text-transform:uppercase;	
	font-size:12pt;
	line-height:12px;
	font-weight:700;
	letter-spacing:0.04em;
}
#menu ul.main_menu li a:hover,
#menu ul.main_menu li a.active,
#menu ul.sub_menu li a:hover,
#menu ul.sub_menu li a.active {
	color:#d3031c;
	border-left:10px solid #d3031c;
}



.item_box {
	min-height:100vh;
}
.gallery {
	margin-top:50px;
	padding-bottom:160px;
}

#slider_menu ul {
	margin:0;
	padding:0;
	position:fixed;
	bottom:150px;
	right:0px;
	transform: rotate(-90deg);
}
#slider_menu ul li {
	display:inline;
}
#slider_menu ul li {
	margin-left:50px;
}
#slider_menu ul li:first-child {
	margin-left:0px;
}
#slider_menu ul li a {
	color:#fff;
	text-decoration:none;
	font-weight:700;
	font-size:8pt;
	letter-spacing:0.1em;
	padding:2px 3px;
}
#slider_menu ul li a:hover {
	background-color:#d3031c;
}


#slider_counter ul {	
	position:fixed;
	top:50%;
	right:58px;
	transform: rotate(90deg);
}
#slider_counter ul li {
	display:inline-block;
	margin:0 5px;
	border:1px solid rgba(255, 255, 255, 0);
	cursor:pointer;
}
#slider_counter ul li .counter_point {
    background: rgba(255, 255, 255, 0.5);
	display:block;
	margin:3px;
	width:8px;
	height:8px;
}	
#slider_counter ul li:hover,
#slider_counter ul li.one.active,
#slider_counter ul li.two.active,
#slider_counter ul li.three.active {
	border:1px solid rgba(255, 255, 255, 0.5) !important;
	border-collapse: collapse;
}

#gallery_tischler li,
#gallery_brettfeld li,
#gallery_brettspiel li,
#gallery_ferienwohnung li { 
	display:none;
}
.gallery ul li {
	width:32.3333333333%;
	float:left;
	display:inline-block;
	margin:0.5%;
	position:relative;
}
.gallery ul li img,
.gallery ul li video {
	width:100%;
	height:auto;
	aspect-ratio: 640 / 445;
	object-fit: cover;
}	
#loadMore_tischler,
#showLess_tischler,
#loadMore_brettfeld,
#showLess_brettfeld,
#loadMore_brettspiel,
#showLess_brettspiel,
#loadMore_ferienwohnung,
#showLess_ferienwohnung {
	width:282px;
	height:26px;
	margin:30px auto;
	cursor:pointer;
}

.overlay {
	display: none;
	position:absolute;
	top:0;
	left:0;
	cursor:crosshair;
}
.custom_next,
.custom_prev {
	position:fixed;
	top:50%;
	margin-top:-50px;
	height:60px;
	width:25px;
	z-index:1002;
}
.custom_prev {
	left:0;
}
.custom_next {
	right:0;
}
.custom_close {
	position:fixed;
	top:50px;
	right:50px;
}
a.disabled {
	display:none !important;
}
.highslide-number {
	margin-top:15px;
}
.highslide-number_red {
	color:#d3031c;
	display:inline-block;
	border-right:1px solid #d3031c;
	padding-right:5px;
	margin-right:5px;
	line-height:30px;
}
.highslide-number_black {
	display:inline-block;
	line-height:30px;
	color:#000;
}
.single_image .highslide-number  {
	display:none !important;
	visibility:hidden !important;
}

.image_left,
.text_left {
	float:left;
}
.text_right,
.image_right {
	float:right;
}
.image_left,
.text_right,
.text_left,
.image_right {
	width:50%;
	padding:50px;
	display:inline-block;
	background:#fff !important;
}
.image_left img,
.image_right img {
	max-width:100%;
	height:auto;
}
.header_box_right h2,
.header_stroke_right {
	margin-left:-95px;
}
.header_box_left {
	text-align:left;
	float:right;
	margin-right:-145px;
}
.header_box_right,
.header_box_left {
	margin-top:140px;
	margin-bottom:60px;
}
.header_box_right {
	float:right;
	width:50%;
}
.header_box_right h2,
.header_box_left h2,
h2.kontakt_header {
	font-size:40pt;
	font-weight:700;
	letter-spacing:0.075em;
	line-height:45pt;
}
.header_stroke_right,
.header_stroke_left {
	width:58pt;
	height:8pt;
	background-color:#d3031c;
	display:block;
	margin-top:10px;
}
.item_box p {
	color:#6b6b6b;
	font-size:15pt;
	line-height:23pt;
	margin:10px 0;
	letter-spacing:0.025em;
}
.item_box p.intro_text {
	color:#d3031c;
	font-size:18pt;
	line-height:28pt;
	font-weight:700;
	margin-bottom:50px;
}	



#footer {
	width:100%;
	padding:80px 80px 70px 80px; 
	background-color:#b1b2b4;
	position:relative;
	z-index:10;
	color:#4d4d4d;
	letter-spacing:0.02em;
}
.footer_left,
.footer_center {
	float:left;
}
.footer_right {
	float:right;
}
.footer_center {
	margin:0 150px;
}
.footer_center ul li {
	margin-left:30px;
}
.footer_center ul li:first-child {
	margin-left:0px;
}
.footer_right ul li {
	margin-left:30px;
}
.footer_right ul li:first-child {
	margin-left:0px;
}
#footer ul li {
	display:inline;
}
#footer ul li a {
	color:#4d4d4d;
	text-decoration:none;
	font-weight:700;
	text-transform:uppercase;
}
#footer ul li a:hover {
	color:#fff;
}
.footer_left {
	font-size:13pt;
	font-weight:700;
}
.footer_center ul li a {
	font-size:9pt;
}
.footer_right ul li a {
	font-size:7pt;
}
.footer_left_stroke {
	height:6px;
	width:45px;
	background-color:#4d4d4d;
	display:block;
	margin-top:4px;
}


body.info_page .info_page_header_box {
	margin-top:160px;
	margin-left:10%;
	margin-bottom:50px;
}
body.info_page .info_page_header_box h1 {
	font-size:40pt;
	font-weight:700;
	letter-spacing:0.075em;
}
body.info_page .info_page_header_box .info_page_header_stroke {
	width:58pt;
	height:8pt;
	background-color:#d3031c;
	display:block;
	margin-top:20px;
}
body.info_page .info_page_left {
	margin-left: 20%;
	margin-right:10%;
	width:40%;
	float:left;
}
body.info_page .info_page_right {
	width:30%;
	float:left;
}
body.info_page h2 {
	font-weight:700;
	font-size:15pt;
	line-height:15px;
	letterspacing:0.75em;
	color:#4c4c4c;
	margin:25px 0 10px 0;
	padding-left:7px;
	border-left:6px solid #d3031c;
}
body.info_page p {
	font-size:10pt;
	line-height:16pt;
	letterspacing:0.03em;
	color:#4c4c4c;
}
body.info_page p a,
.kontakt_left p a {
	color:#000;
	text-decoration:none;
}
body.info_page p a:hover,
.kontakt_left p a:hover {
	color:#d3031c;
	text-decoration:none;
}
body.info_page #wrapper_box {
	padding-bottom:100px;
}


.kontakt_left,
.kontakt_right {
	width:50%;
	padding:50px;
}
.kontakt_left {
	float:left;
}
.kontakt_right {
	float:right;
}
.kontakt_left .header_stroke_left {
	margin-bottom:60px;
}
.kontakt_left h2 {
	margin-top:60px;
}
.kontakt_right img{
	width:100%;
	height:auto;
	display:block;
}





.menu_trigger_desktop {
	display:block;
}
.menu_trigger_mobile {
	display:none;
}



/* ============================= MEDIA QUERIES ============================== */
@media (max-width: 1400px) {
	
#wrapper_box {
	padding:0 100px;
}	
#footer {
	padding:40px;
}
.footer_left {
	float:left;
	width:100%;
	margin:0px 0 0 0;
}
.footer_center {
	float:left;
	width:50%;
	margin:30px 0 0 0;
}
.footer_right {
	float:right;
	margin:30px 0 0 0;
	padding-top:77px;
}
.footer_center ul li,
.footer_right ul li {
    margin-left: 0px;
}
#footer ul li {
	display:block;
}
}	
@media (max-width: 1000px) {
#wrapper_box {
	padding:0;
}
.info_page_left,
.info_page_right {
	padding:0 50px;
}
.gallery ul li {
	width:49%;
	margin:0.5%;
}
.slogan {
	top:100%;
	left:15%;
	font-size:14pt;
	line-height:18pt;
}

body.info_page .info_page_left {
	margin-left: 0%;
	margin-right:0%;
	width:100%;
}
body.info_page .info_page_right {
	width:100%;
}
#menu {
	width:280px;
	padding:70px 0px 50px 0px;
}

#menu ul.sub_menu {
    margin: 0;
}
#menu ul.main_menu li,
#menu ul.sub_menu li  {
	border-top:1px dotted #666;
	height:100%;
	padding:15px 0;
	margin:0 0 0 30px;
}
#menu ul.sub_menu li:last-child  {
	border-bottom:1px dotted #666;
}
#menu ul.main_menu li a,
#menu ul.sub_menu li a {
	font-size:12pt;
	line-height:100%;
}
#slider_menu, 
.scroll_next,
.scroll_top {
	display:none !important;
}
.item_box p {
	font-size:11pt;
	line-height:16pt;
}
.item_box p.intro_text {
	font-size:12pt;
	line-height:18pt;
	margin-bottom:30px;
}
.header_box_right h2,
.header_box_left h2,
h2.kontakt_header  {
	font-size:18pt;
	line-height:22pt;
}
.header_box_left {
	margin-right:-100px;
	margin-top:130px;
}
.header_box_right {
	float:right;
	width:40%;
	margin-top:130px;
}
.header_box_right h2,
.header_stroke_right {
	margin-left:-100px;
}
#slider_counter ul {	
	top:50%;
	right:0px;
}
#slider_counter ul li:hover {
	border:1px solid rgba(255, 255, 255, 0) !important;
}
}
@media  (orientation: landscape) {

/*
.logo_red_box,
.logo_text,
#menu_trigger	{
	top:50px;
}
#menu	{
	top:20px;
	height:100%;
}	
#menu ul.sub_menu {
    display:none;
} */
}
@media  (max-height: 550px) {

	
#menu ul.sub_menu {
		display:none;
	}
.logo_red_box {
	top:10px;
	right:0px;
	width:15px;
	height:30px;
	background:#d3031c;
	z-index:20;
	cursor:pointer;
}
.logo_text	{
	top:10px;
	right:20px;
	height:30px;
}

.logo_text img	{
	height:30px;
	width:auto;
}
.menu_trigger_desktop {
	display:none;
}
.menu_trigger_mobile {
	display:block;
}
#menu_trigger,
#info_page_back {
	top:10px;
	left:0px;
	width:30px;
	height:30px;
}	
}


@media (max-width: 640px) and (orientation: portrait) {

body { 
/*	background: url(images/platzhalter_mobile_01.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;	*/
	}


.gallery ul li {
	width:100%;
	margin:5px 0 0 0;
}
body.info_page .info_page_header_box h1 {
	font-size:20pt;
}
#menu_trigger,
#info_page_back {
	top:10px;
	left:0px;
	width:30px;
	height:30px;
}
#menu_trigger img,
#info_page_back img {
	width:100%;
	height:auto;
}
.logo_red_box {
	top:10px;
	right:0px;
	width:15px;
	height:30px;
	background:#d3031c;
	z-index:20;
	cursor:pointer;
}
.logo_text	{
	top:10px;
	right:20px;
	height:30px;
}

.logo_text img	{
	height:30px;
	width:auto;
}
.text_left,
.text_right {
	width:100%;
	float:left;
}
.image_right,
.image_left {
	width:60%;
	padding:0;
}

#loadMore_tischler,
#showLess_tischler,
#loadMore_brettfeld,
#showLess_brettfeld {
	width:100%;
	height:100%;
	margin:0;
	padding:10px 0;
	background:#d3031c;
	color:#fff;
	text-align:center;
	font-size:16pt;
	letter-spacing:0.075em;
	font-weight:700;
}
#loadMore_tischler img,
#showLess_tischler img,
#loadMore_brettfeld img,
#showLess_brettfeld img {
	display:none;
}
#loadMore_tischler:before,
#loadMore_brettfeld:before {
	content: 'WEITERE LADEN';
}
#showLess_tischler:before,
#showLess_brettfeld:before {
	content: 'GALERIE SCHLIESSEN';
}
.header_box_left {
	margin-right:-40px;
	margin-top:130px;
}
.header_box_right {
	float:right;
	width:40%;
	margin-top:130px;
}
.header_box_right h2,
.header_stroke_right {
	margin-left:-40px;
}
.kontakt_left,
.kontakt_right {
	width:100%;
	padding:50px;
}
.menu_trigger_desktop {
	display:none;
}
.menu_trigger_mobile {
	display:block;
}
}