/* CSS Dokument */

@import url('/assets/css/navi.css');
@import url('/assets/css/coco.min.css');
@import url('/assets/css/dropdown.css');
@import url('/assets/css/animation.css');

@font-face {
  font-family: 'Bai Jamjuree';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/Bai-Jamjuree_300.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Bai Jamjuree';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/Bai-Jamjuree_500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ALLGEMEIN */

*						{ margin: 0; padding: 0; outline: none; }

html				{ background: #211f20; color: #e4e4e4; cursor: default; font-size: 16px; font-family: 'Bai Jamjuree', sans-serif; font-weight: 300; line-height: 1.5; }
h1					{ font-size: 1.75rem; font-weight: 300; margin: 0 0 2rem; text-transform: uppercase; }
h1 .subline	{ color: #cfa590; display: block; font-size: 1.25rem; text-transform: none; }
h2					{ font-size: 1.25rem; font-weight: 500; margin: 0 0 0.75rem; }
h3					{ font-size: 1.25rem; font-weight: 500; margin: 0 0 0.75rem; }
h4					{ font-size: 1.375rem; font-weight: 300; margin: 0 0 2rem; text-transform: uppercase; }
h5					{ font-size: 1.125rem; font-weight: 500; margin: 0 0 0.75rem; }
h6					{ color: #cfa590; font-size: 1rem; font-weight: 500; margin: 0 0 1rem; text-transform: uppercase; }
img					{ display: block; max-width: 100%; }
a						{ font-size: 1.125rem; color: #cfa590; text-decoration: none; }
b, strong		{ color: #cfa590; font-weight: 500; text-transform: uppercase; }
p						{ font-size: 1.125rem; margin: 0 0 1rem; }
ul					{ font-size: 1.125rem; margin: 0 0 1rem; }
hr					{ border: 1px solid #393e46; width: 50%; }
figure img	{ width: 100%; }

.border					{ position: relative; }
.border:after		{ content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 0.675rem solid rgba(33, 31, 32, 0.3); transition: ease 0.5s;}
.centered				{ text-align: center; }
.glow						{ border: 0.09375rem solid #af836e; border-radius: 50%; box-shadow: 0 0 11px #fff, 0 0 19px #fff, 0 0 40px #af836e, 0 0 80px #af836e; margin: 0 auto; position: relative; width: 96%; z-index: 100; }
.justified			{ text-align: justify; }
.date						{ color: #cfa590; display: block; font-size: 0.875rem; font-style: italic; font-weight: 500; margin: 0 0 0.5rem; }
.last						{ background: #cfa590; background: linear-gradient(180deg, #af836e 0%, #cfa590 33%, #deb5a0 50%, #cfa590 66%, #af836e 100%); color: #211f20; font-weight: 500; overflow: hidden; padding: 2.5rem 0 1.5rem; text-align: center; }
.last img				{ height: auto; margin: 0 auto 1rem; width: 2rem; }
.more						{ background: #af836e; background: linear-gradient(180deg, #af836e 0%, #cfa590 33%, #deb5a0 50%, #cfa590 66%, #af836e 100%); /*background: url('/data/site/rose-metall.jpg') center top no-repeat; background-size: cover*/; color: #211f20; display: inline-block; font-size: 0.875rem; font-weight: 500; margin: 0 0 1rem; padding: 0.75rem 1.25rem; text-transform: uppercase;  }
.other					{ background: #af836e; background: linear-gradient(180deg, #af836e 0%, #cfa590 33%, #deb5a0 50%, #cfa590 66%, #af836e 100%); /*background: url('/data/site/rose-metall.jpg') center top no-repeat; background-size: cover*/; color: #211f20; display: inline-block; font-size: 1rem; font-weight: 500; hyphens: auto; margin: 1rem 0; padding: 0.75rem 1.25rem; text-align: center; text-transform: uppercase; width: 48%;  }
.other span			{ display: block; margin: 0; width: 75%; }
.other img			{ display: block; margin: 0; width: 10%; }
.other:first-child span	{ text-align: right; }
.other:last-child span	{ text-align: left; }
.red						{ color: #af836e; font-weight: 500; }
.small					{ font-size: 1rem!important; }
.text						{ padding: 0 15%; }
.texture				{ background: #af836e; background: linear-gradient(180deg, #af836e 0%, #cfa590 33%, #deb5a0 50%, #cfa590 66%, #af836e 100%); /*background: url('/data/site/rose-metall.jpg') center top no-repeat; background-size: cover*/; }

/* SEITENSTRUKTUR */

#bgvid								{ background: #211f20; bottom: 0; object-fit: cover; position: absolute; left: 0; width: 100%; height: 100%; right: 0; z-index: -100;  }

header								{ background: url('/data/site/hobd-back-altern.jpg') no-repeat center 35%; background-size: cover; position: relative; overflow: hidden; text-align: center; }
header .logo					{ padding: 1rem; }
header .logo img			{ margin: 0 auto 1rem; max-width: 40%; }
header .logo span			{ font-size: 1.25rem; font-weight: 500; margin: 0 0 0.5rem; text-transform: uppercase; }

#intro								{ padding: 4rem 0; min-height: 60vh; position: relative; }
#intro .start					{ background: rgba(33, 31, 32, 0.75); }

#disruptor						{ background: #af836e; background: linear-gradient(180deg, #af836e 0%, #cfa590 33%, #deb5a0 50%, #cfa590 66%, #af836e 100%); color: #211f20; font-weight: 500; margin: 0 0 1rem; }
#disruptor .more			{ background: #211f20; color: #e4e4e4; display: inline-block; font-size: 0.875rem; font-weight: 500; margin: 0 0 1rem; padding: 0.75rem 1.25rem; text-transform: uppercase;  }


#latest 							{ /*background: #4f4c4d; color: #e4e4e4;*/ }
.latest								{ padding: 2rem 0 1rem; text-align: center; }
.latest > div					{ margin: 0 0 2.5rem; }
.latest > a						{ background: #af836e; background: linear-gradient(180deg, #af836e 0%, #cfa590 33%, #deb5a0 50%, #cfa590 66%, #af836e 100%); /*background: url('/data/site/rose-metall.jpg') center top no-repeat; background-size: cover*/; color: #211f20; display: inline-block; font-size: 0.875rem; font-weight: 500; margin: 0 auto; padding: 0.75rem 1.25rem; text-transform: uppercase; }
.latest .entry				{ background: #4f4c4d; border-bottom: 5px solid #af836e; margin: 0 auto; padding: 1rem; transform: scale(1); transition: ease 0.5s; width: 27%; }
.latest .entry:hover	{ transform: scale(1.1); transition: ease 0.5s; }
.latest .entry img		{ width: 100%; margin: 0 0 1rem; }

.toggleMenu						{ display:  none; color: #211f20; text-transform: uppercase; display: block; text-align: center; margin: 0 auto; padding: 1rem 0 0.5rem; }
.toggleMenu img				{ display: inline-block; width: 2.5rem; }

nav										{ background: #af836e; background: linear-gradient(180deg, #af836e 0%, #cfa590 33%, #deb5a0 50%, #cfa590 66%, #af836e 100%); position: relative; z-index: 1; }
nav ul								{ list-style: none; margin: 0 auto;  }
nav ul li							{ text-align: center; min-width: 10%; }
nav ul li a						{ border-bottom: 4px solid transparent; color: #211f20; display: block; font-size: 1.125rem; font-weight: 500; padding: 1rem 1rem 0.75rem; text-transform: uppercase; transition: all ease 0.5s; }
nav ul:hover li a			{ opacity: .5; transition: all ease 0.5s; }
nav ul li a:hover,
nav ul li.current > a	{ border-bottom: 4px solid #211f20; color: #211f20; opacity: 1; transition: all ease 0.5s; }

nav ul li ul					{ background: #af836e; min-width: 300px; position: relative;  z-index: 300; }
nav ul li ul li				{ text-align: left; }
nav ul li ul li	a			{ font-size: 1rem; }
nav ul li ul li > a:hover	{ border-bottom: 4px solid #211f20; color: #211f20; opacity: 1; transition: all ease 0.5s; }

main									{ position: relative; }
main section					{ padding: 2rem 0; }
main ul								{ margin-bottom: 1rem; list-style: none; }
main ul li						{ margin: 0 0 0.5rem 1rem; }
main ul li:before			{ color: #af836e; content: "◼"; font-size: 0.875rem; margin: 0 0.5rem 0 -1rem; }

footer								{ background: url('/data/site/footer-bg-altern.jpg') no-repeat top center fixed; background-size: cover; color: #eeeeee; font-size: 0.875rem; }
footer ul							{ list-style: none; }
footer a							{ color: #e4e4e4; }
footer a:hover				{ color: #cfa590; }
footer img						{ margin: 0 0 1rem; }
footer .headline			{ color: #cfa590; font-size: 1rem; font-weight: 500; text-transform: uppercase; }
footer .social				{ display: inline-block; margin: 0 0.25rem 0 0; width: 1.75rem; }
footer .social img		{ filter: invert(100%) sepia(3%) saturate(814%) hue-rotate(201deg) brightness(115%) contrast(79%); }

footer .back					{ background: #211f20; padding: 0.5rem 0; }
footer .back span,
footer .back img			{ display: block; margin: 0 1rem; }
footer .back span			{ font-weight: 500; text-transform: uppercase; }

.headline							{ color: #e4e4e4; font-weight: 500; text-transform: uppercase; }
.texture .headline		{ color: #211f20; }

.language							{ top: 0; position: absolute; right: 0; z-index: 999999; }
.language img					{ width: 3.5rem; }

.flex									{ display: -ms-flexbox; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: start; }
.flx-start						{ justify-content: start; }
.flx-center						{ justify-content: center; }
.flx-around						{ justify-content: space-around; }
.flx-between					{ justify-content: space-between; }
.align-center					{ align-items: center; }
.content							{ margin: 0 auto; max-width: 1300px; position: relative; width: 90%; }

.bbx									{ box-sizing: border-box!important; -webkit-box-sizing: border-box!important; }
.bx100								{ padding: 1.5rem; width: 100%; }
.bx75									{ padding: 1.5rem; width: 75%; }
.bx66									{ padding: 1.5rem; width: 66.666%; }
.bx50									{ padding: 1.5rem; width: 50%; }
.bx33									{ padding: 1.5rem; width: 33.333%; }
.bx25									{ padding: 1.5rem; width: 25%; }

#notice 								{ /*background: #4f4c4d;*/ text-align: center; }


#team									{ background: #211f20; color: #e4e4e4; }
.team									{ padding: 1rem 0; }
.team .slick-prev,
.team .slick-next,
.team .slick-prev:hover,
.team .slick-next:hover,
.team .slick-prev:active,
.team .slick-next:active { background: #af836e; /*background: url('/data/site/rose-metall.jpg') center top no-repeat; background-size: cover*/; height: 80px; width: 3.5rem; z-index: 9999; }

.team .slick-prev					{ left: 0; }
.team .slick-next					{ right: 0; }
.team .slick-slide figure	{ background: #211f20; position: relative; }
.team .slick-slide figure figcaption	{ background: rgba(33, 31, 32, 0.75); bottom: 2rem; font-size: 1.25rem; font-weight: 500; left: 0; opacity: 0; padding: 1rem 0; position: absolute; right: 0; text-align: center; transition: ease 0.5s; }
.team .slick-slide img								{ opacity: 0.35; transition: ease 0.5s; filter: grayscale(100%); }
.team .slick-slide.slick-current img	{ opacity: 1; transition: ease 1.5s; filter: grayscale(0%); }
.team .slick-slide.slick-current figure figcaption		{ opacity: 1; transition: ease 1.5s; }

#contact							{ /*background: #4f4c4d; color: #e4e4e4;*/ }

#teaser								{ background: linear-gradient(180deg, #af836e 0%, #cfa590 33%, #deb5a0 50%, #cfa590 66%, #af836e 100%);  color: #211f20; text-align: center; }
#teaser p							{ font-size: 1.5rem; font-weight: 500; margin: 0; text-transform: uppercase; }
#teaser a							{ color: #211f20; display: inline-block; }
#teaser img						{ display: inline-block; margin: 1rem 1rem 0; }
#teaser img						{ height: auto; width: 2rem; }

#special a						{ background: #cfa590; /*background: url('/data/site/rose-metall.jpg') center top no-repeat; background-size: cover*/; color: #211f20; display: block; font-size: 0.875rem; font-weight: 500; margin: 0 0.5rem 0.75rem 0; padding: 0.75rem 1.25rem; text-transform: uppercase; width: auto; }

#error 								{ /*background: #4f4c4d; color: #e4e4e4;*/ }

.subheading						{ font-size: 1.375rem; font-weight: 500; text-align: center; margin: 0 auto 2rem; text-transform: uppercase; }
.subheading:after			{ border: 0.09375rem solid #af836e; border-radius: 50%; box-shadow: 0 0 11px #fff, 0 0 19px #fff, 0 0 40px #af836e, 0 0 80px #af836e; content: ""; display: block; margin: 1rem auto 1rem; width: 5rem; }

/* UNTERSEITEN */

/* Ladies */

.ladies										{ margin: 0 0 2rem; }
.ladies .entry 						{ margin: 1rem 1.5%; transform: scale(1); transition: ease 0.5s; width: 22%; }
.ladies .entry:hover			{ transform: scale(1.1); transition: ease 0.5s; }
.ladies figure						{ background: #ffffff; height: 100%; position: relative; width: 100%; }
.ladies figure figcaption { background: rgba(33, 31, 32, 0.75); bottom: 2rem; font-size: 1rem; font-weight: 500; left: 0; opacity: 1; padding: 1rem; position: absolute; right: 0; text-align: center; transition: ease 0.5s; }
.ladies img								{ height: 100%; opacity: 1; object-fit: cover; transition: ease 1.5s; width: 100%; }



#gallery											{ /*background: #4f4c4d; color: #e4e4e4;*/ }
#gallery a										{ display: block; margin: 0.675rem 0.5%; width: 9%; }
#gallery .border:hover:after	{ border: 0.675rem solid rgba(33, 31, 32, 0.7); }

#video										{ /*background: #4f4c4d; color: #e4e4e4;*/ }
.video										{ display: block; padding: 0 15%; margin: 0 auto; }
.video video							{ height: auto; width: 100%; }

#note 										{ /*background: #4f4c4d;*/ color: #211f20; font-size: 0.875rem; }
#note strong							{ color: #211f20; }


/* Ambiente */

.rooms .entry							{ margin: 1rem 1.5%; transform: scale(1); transition: ease 0.5s; width: 22%; }
.rooms .entry:hover				{ transform: scale(1.1); transition: ease 0.5s; }
.rooms figure							{ background: #ffffff; height: 100%; position: relative; width: 100%; }
.rooms figure figcaption	{ background: rgba(33, 31, 32, 0.75); bottom: 2rem; font-size: 1rem; font-weight: 500; left: 0; opacity: 1; padding: 1rem; position: absolute; right: 0; text-align: center; transition: ease 0.5s; }
.rooms img								{ height: 100%; opacity: 1; object-fit: cover; transition: ease 1.5s; width: 100%; }


/* Equipment */

.tools										{ margin: 0 0 2rem; }
.tools .entry							{ margin: 1rem 1.5%; transform: scale(1); transition: ease 0.5s; width: 22%; }
.tools .entry:hover				{ transform: scale(1.1); transition: ease 0.5s; }
.tools figure							{ background: #ffffff; height: 100%; position: relative; width: 100%; }
.tools figure figcaption	{ background: rgba(33, 31, 32, 0.75); bottom: 2rem; font-size: 1rem; font-weight: 500; left: 0; opacity: 1; padding: 1rem; position: absolute; right: 0; text-align: center; transition: ease 0.5s; }
.tools img								{ height: 100%; opacity: 1; object-fit: cover; transition: ease 1.5s; width: 100%; }

/* Rental */

.rental										{ margin: 0 0 2rem; }
.rental .entry						{ margin: 1rem 1.5%; transform: scale(1); transition: ease 0.5s; width: 22%; }
.rental .entry:hover			{ transform: scale(1.1); transition: ease 0.5s; }
.rental figure						{ background: #ffffff; height: 100%; position: relative; width: 100%; }
.rental figure figcaption	{ background: rgba(33, 31, 32, 0.75); bottom: 2rem; font-size: 1rem; font-weight: 500; left: 0; opacity: 1; padding: 1rem; position: absolute; right: 0; text-align: center; transition: ease 0.5s; }
.rental img								{ height: 100%; opacity: 1; object-fit: cover; transition: ease 1.5s; width: 100%; }


/* News */

.news .entry							{ background: #4f4c4d; color: #e4e4e4; border-bottom: 5px solid #cfa590; margin: 1rem 2%; width: 46%; }

/* KONTAKT */

form { margin: 0 auto; width: 80%; }
form input[type='text'],
form input[type='email'],
form input[type='date'],
form input[type='tel'],
form textarea,
form select									{ background: #ffffff; border: 1px solid #cccccc; border-radius: 3px; color: #555555; font-family: 'Asap', sans-serif; font-size: 1.125rem; font-weight: 300; margin: 0 0 1.25rem; padding: 1.25rem; width: 100%; }
form input[type='submit']		{ background: #af836e; border: none; cursor: pointer; font-family: 'Asap', sans-serif; font-size: 1.125rem; font-weight: 500; margin: 0 0 1.25rem; padding: 1.5rem; width: 100%; color: #ffffff; text-transform: uppercase; letter-spacing: 1px;  }
form input[type='submit']:disabled	{ background: #dddddd; color: #bbbbbb;  cursor: default; }
form select														{ width: 100%; border-color: #cccccc!important; border-radius: 0; border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
form a																{ font-size: 1rem; }

.block { margin: 0 auto; width: 31.333%; }
.blocklong { margin: 0 auto; width: 98%; }
.fieldapprove { border: 1px solid #af836e; border-radius: 3px; text-align: left; margin: 0 0 1.5rem; padding: 1rem; }
.fieldapprove input { margin: 0 0 0; }
.fieldapprove a { color: #cfa590; display: inline-block; }
.fielddate table { margin: 0; width: 100%; }
.fielddate table tbody, .fielddate table tr, .fielddate table td { display: block; width: 100%; }
.fielddate select { display: inline-block; width: 32%; }
.captchapic			{ overflow: hidden; }
.captchapic img { background: #af836e; border: none; float: left; margin: 0 0 2rem; width: 100%; }
.captchafield input { height: 70px; float: left; width: 100%; margin: 0 0 2rem 3%; }
.required:after { content: '*'; color: #8c8c8c; float: right; font-size: 1.375rem; line-height: 1rem; padding: 0.375rem 0 0 0.375rem; }
.subject											{ position: absolute; visibility: hidden; z-index: -1; width: 5rem!important; }

#map_canvas			{ width: 100%; height: 55vmin; height: 27vmax; }
#map_canvas h5	{ text-transform: none; font-size: 1.75em; color: #ac924d; margin: 0; }
#map_canvas p		{ font-size: 1em; color: #000000; line-height: 1.25em; }


/* Animationen */


.in-view.slide-top {
	-webkit-animation: slide-top 1s ease;
	animation: slide-top 1s ease;
}

.in-view.slide-top:nth-child(2n) { animation-delay: .025s; }
.in-view.slide-top:nth-child(3n) { animation-delay: .05s; }

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

.last						{ background: #af836e; color: #211f20; font-size: 1rem; font-weight: 500; overflow: hidden; padding: 1.5rem 0 1.125rem; text-align: center; }
.last img				{ height: auto; margin: 0 auto 1rem; width: 1.5rem; }

	}

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

	.bx25				{ padding: 1rem; width: 50%; }
	.bx25 ul li	{ line-height: 2; }			
	.bx33				{ padding: 1rem; }
	.bx50				{ padding: 1rem; width: 100%; }
	.bx66				{ padding: 1rem; }
	.bx100			{ padding: 1rem; }

	.ladies .entry,
	.rooms .entry,
	.tools .entry			{ width: 47%; }

	#gallery a		{ width: 15.666%; }

	.text { padding: 0 10%; }

	#intro { min-height: 30vh; }	
	#teaser p { font-size: 1.125rem; }

}

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

	nav ul li						{ width: 100%; }

	
	.bx25				{ padding: 0.75rem; width: 50%; }
	.bx33				{ padding: 0.75rem; width: 100%; }
	.bx50				{ padding: 0.75rem; width: 100%; }
	.bx66				{ padding: 0.75rem; width: 100%; }
	.bx100			{ padding: 0.75rem; }

	#gallery a		{ margin: 0.25rem 1%; width: 23%; }

	.text { padding: 0; }
	.other { width: 100%; }
	.border:after { border: 0.5rem solid rgba(33, 31, 32, 0.3); }
	#gallery .border:hover:after	{ border: 0.5rem solid rgba(33, 31, 32, 0.7); }
	
	.block { margin: 0 auto; width: 98%; }
	
}

@media only screen and (max-width: 520px) {
	
	.bx25				{ padding: 0.75rem; width: 100%; }
	.latest .entry	{ margin: 0 0 1.5rem; width: 98%; }
	.news .entry { width: 98%; }
	
	form { margin: 0 auto; width: 100%; }
	
	}