@import url(../fonts/Trenda7/fonts.css);
@import url(../fonts/fontawesome/css/solid.css);
@import url(../fonts/fontawesome/css/brands.css);

@font-face {
    font-family: 'Mrs Saint Delafield';
    src: url('../fonts/MrsSaintDelafield-Regular.eot');
    src: url('../fonts/MrsSaintDelafield-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/MrsSaintDelafield-Regular.woff2') format('woff2'),
        url('../fonts/MrsSaintDelafield-Regular.woff') format('woff'),
        url('../fonts/MrsSaintDelafield-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Lora';
    src: url('../fonts/Lora-Regular.eot');
    src: url('../fonts/Lora-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Lora-Regular.woff2') format('woff2'),
        url('../fonts/Lora-Regular.woff') format('woff'),
        url('../fonts/Lora-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Trenda';
    src: url('../fonts/Trenda-Semibold.eot');
    src: url('../fonts/Trenda-Semibold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Trenda-Semibold.woff2') format('woff2'),
        url('../fonts/Trenda-Semibold.woff') format('woff'),
        url('../fonts/Trenda-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Trenda';
    src: url('../fonts/Trenda-Bold.eot');
    src: url('../fonts/Trenda-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Trenda-Bold.woff2') format('woff2'),
        url('../fonts/Trenda-Bold.woff') format('woff'),
        url('../fonts/Trenda-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Trenda';
    src: url('../fonts/Trenda-Regular.eot');
    src: url('../fonts/Trenda-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Trenda-Regular.woff2') format('woff2'),
        url('../fonts/Trenda-Regular.woff') format('woff'),
        url('../fonts/Trenda-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Trenda';
    src: url('../fonts/Trenda-Light.eot');
    src: url('../fonts/Trenda-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Trenda-Light.woff2') format('woff2'),
        url('../fonts/Trenda-Light.woff') format('woff'),
        url('../fonts/Trenda-Light.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

html {
	height: 100%;
	overflow: hidden;
	overflow-y: scroll;
	-webkit-font-smoothing: antialiased;
}
* {
	margin: 0;
	padding: 0;
	  box-sizing: border-box;
}
body {
	position: relative;
	min-height: 100%;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	font-family: 'Trenda', sans-serif;
	font-size: 16px;
	line-height: 22px;
	font-style: normal;
	font-weight: 100;
	letter-spacing: 0;
	background-color: #1e121e;
	-webkit-appearance:none;
}

a{
	text-decoration: none;
	color: #323032;
	font-weight: 400;
}
a:hover {color: #c49669;}
	
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  font-family: 'Lora', serif;
	letter-spacing: 2px !important;
}	
	
h1 {
	font-size: 32px;
	font-weight: 500;
	padding-bottom: 10px;	
}

h4, h5, h6 {
	line-height: 1.3;
	margin-bottom: 5px;
	font-weight: 400;
	letter-spacing: 1px !important;
}

small {
	display: block;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.5px;	
	padding-top: 5px;
	
}

#preloader {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;	
  width: 100vw;
  height: 100vh;
	opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
	background-color: #1e121e;
	background-image: url(../img/bg.jpg);
}

#preloader .bezel {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;	
  display: flex;
  justify-content: center;
  align-items: center;
	padding: 0;
	width: 300px;
	height: 300px;
	text-align: center;
	transform-origin: left;
	-webkit-transform: scale(0) translate(-50%, -50%);
	transform: scale(0) translate(-50%, -50%);
	-webkit-transition: all 0.9s linear;
	transition: all 0.9s linear;
}

#preloader .bezel .inline {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	aspect-ratio: 3/2;
	border: 2px solid #c49669;	
}

#preloader .bezel .inline img {
	width: 100%;
}

body header, body main {
	opacity: 0;
	-webkit-transition: opacity 0.3s linear 1.8s;
	transition: opacity 0.3s linear 1.8s;	
}

body.on header, body.on main {
	opacity: 1;
}

body header * {color: #c49669;}

body.on #preloader {
	opacity: 0;
	-webkit-transition: opacity 0.3s linear 1.3s;
	transition: opacity 0.3s linear 1.3s;	
}
body.on #preloader .bezel {
	-webkit-transform: scale(1) translate(-50%, -50%);
	transform: scale(1) translate(-50%, -50%);
}


header {
	position: relative;
	display: block;
	width: 100%;
	padding-top: 3rem;	
	color: #323032;
  background-color: #1e121e;
	background-image: url(../img/bg.jpg);
	box-shadow: 0 -5px 40px 7px rgba(0,0,0,0.08);
}

header a{
	text-decoration: none;
	color: #323032;
}
header a:hover {color: #c49669;}

header .inner .bezel .logo {
	width: 65%;
	margin: 0 auto 50px auto;
}
header .inner .bezel .logo img, header .inner .bezel .logo object {
	width: 100%;
}

main {
	display: block;
	width: 100%;
	position: relative;
	color: #323032;
	font-weight: 400;
	margin-bottom: 40px;
}

.outer {
	display: block;
	width: 100%;
	max-width: 620px;
	width: 100%;
	margin: 0 auto;
	padding: 0 2rem;
}

.inner {
	position: relative;
	display: block;
	width: 100%;
	text-align: center;
	margin: 0 auto;
	padding: 3rem;
	overflow: hidden;
  background-color: #fffffa;	
	box-shadow: 0 30px 30px rgba(0,0,0,0.08);
}

.inner .row {
	display: inline-block;	
	position: relative;
	width: 100%;
	padding: 1.2rem 70px 1.2rem 70px;
	width: 100%;
	text-align: left;
}

.inner .row:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 70px;
	display: block;
	height: 1px;
	background-color: #c49669;
	width: calc(100% - 90px);
}

.inner .row::before {
	font-family: "Font Awesome 6 Free";
	position: absolute;
	top: 50%;
	left: 0;
	content: "";
	font-size: 24px;
	color: #c49669;
	-webkit-transition: all 0s ease;
	transition: all 0s ease;	
	-webkit-transform: translateY(-50%) rotateY(0);
	transform: translateY(-50%) rotateY(0);
}
.inner .row.tel:before {content: "\f879";}
.inner .row.mail:before {content: "\f0e0";}

.inner .row.facebook:before {content: "\f39e"; font-family: "Font Awesome 6 Brands";}
.inner .row.instagram:before {content: "\f16d"; font-family: "Font Awesome 6 Brands";}
.inner .row.pinterest:before {content: "\f231"; font-family: "Font Awesome 6 Brands";}

.inner .row.company:before {content: "\f1ad";}
.inner .row.map:before {content: "\f3c5";}
.inner .row.web:before {content: "\f0ac";}

.inner .row:hover:before {
	-webkit-transform: translateY(-50%) scale(1.3);
	transform: translateY(-50%) scale(1.3);
	
	-webkit-transition: all 0.6s ease;
	transition: all 0.6s ease;
		
}

header .inner {
	padding-bottom: 0;
	box-shadow: 0 -5px 40px 7px rgba(0,0,0,0.08);
}

header .inner .bezel {
	display: inline-block;
	padding: 50px 0;
	margin-bottom: 15px;
	border: 4px solid #c49669;
	margin: 0 auto 30px auto;
	text-align: center;
	width: 100%;
	width: calc(100% - 2px);
}

header .inner ul {
	display: block;
	list-style-type: none;
	width: 100%;
	text-align: center;
	font-size: 0;
}
header .inner ul li {
	display: inline-block;
	width: 33.334%;
}
header .inner ul li a {
	font-size: initial;
	display: block;
	position: relative;
	padding: 15px 20px;
	text-align: center;
	border-right: 1px solid #c49669;	
}
header .inner ul li:last-child a {
	border-right: none;	
}

header .inner ul li a:before {
	font-family: "Font Awesome 6 Free";
	position: relative;
	content: "\f1d8";
	font-size: 24px;
	color: #c49669;
	width: 100%;
	padding-bottom: 10px;
	display: inline-block;
	
	-webkit-transition: all 0s ease;
	transition: all 0s ease;
	
	-webkit-transform: rotateY(0);
	transform: rotateY(0);	
}
header .inner ul li:first-child a:before {content: "\f879";}
header .inner ul li:last-child a:before {content: "\f3c5";}
header .inner ul li a.back:before {content: "\f060";}

header .inner ul li a:hover:before {
	-webkit-transform: rotateY(360deg);
	transform: rotateY(360deg);	
	
	-webkit-transition: all 0.6s ease;
	transition: all 0.6s ease;	
}

main .inner a.btn {
	display: inline-block;
	position: relative;
	padding: 15px 20px;
	width: calc(50% - 20px);
	background-color: #fff;
	color: #c49669;
	margin: 50px 5px 0 5px;
	text-align: center;
	box-shadow: 0px 10px 14.1px 0.9px rgba(0,0,0,0.05),0px 4px 16.6px 0.4px rgba(0,0,0,0.05);
	cursor: pointer;	
	-webkit-transition: all 0.6s ease;
	transition: all 0.6s ease;
}
main .inner a.btn:before {
	font-family: "Font Awesome 6 Free";
	position: relative;
	content: "";
	font-size: 24px;
	color: #c49669;
	width: 100%;
	padding-right: 25px;
	display: inline-block;
  padding: 6px;
  margin-bottom: 2px;
}
main .inner a.btn.vcard:before {content: "\f2bb";}
main .inner a.btn.share:before {content: "\f1e0";}

main .inner a.btn span {
	display: inline-block;
	position: relative;
	top: -2px;
}
main .inner a.btn:hover {
	background-color: #c49669;
	color: #fff;
}
main .inner a.btn:hover:before {
	color: #fff;
}

main .inner .row.imprint, main .inner .row.privacy {
	padding: 0;
	padding-bottom: 20px;
	width: 100%;	
}

/* main .inner .row a {white-space: nowrap;} */

main .inner .row.imprint p,
main .inner .row.privacy p,
main .inner .row.imprint ul li,
main .inner .row.imprint ol li,
main .inner .row.privacy ul li,
main .inner .row.privacy ol li{
	padding: 0 0 10px 0;
}

main .inner .row.imprint ul,
main .inner .row.imprint ol,
main .inner .row.privacy ul,
main .inner .row.privacy ol{
padding: 10px 0 10px 10px;
}

main .inner .row.imprint {
	text-align: center;
}

main .inner .row.imprint h2,
main .inner .row.privacy h2,
main .inner .row.imprint h3,
main .inner .row.privacy h3,
main .inner .row.imprint .h3,
main .inner .row.privacy .h3 {
	color: #c49669;
	font-weight: 400;	
}

main .inner .row.imprint .h3,
main .inner .row.privacy .h3 {
	font-size: 16px;
	font-weight: 500;
	text-transform: uppercase;
	padding-top: 20px;
	padding-bottom: 10px;
}

main .inner .row.privacy p.lnk-list a{
	position: relative;
	display: block;
	width: 90%;
	width: calc(100% - 20px);
	color: #c49669;
	padding-left: 20px;
	padding-top: 0;
}
main .inner .row.privacy p.lnk-list a:before{
	content: "\f063";
	position: absolute;
	display: inline-block;
	width: 20px;
	height: 20px;
	
	font-family: "Font Awesome 6 Free";
	top: 3px;
	left: 0;
	font-size: 12px;
	color: #c49669;	
}
main .inner .row.privacy p.lnk-list a:hover{
	color: #323032;
}

main .inner ul.footer{
	display: inline-block;
	width: 100%;
	text-align: center;
	list-style-type: none;
	padding-top: 50px	
}
main .inner ul.footer li{
	display: inline-block;
	text-align:center;
}
main .inner ul.footer li a{
	display: block;
	text-align:center;
	text-transform:uppercase;
	color: #c49669;
	padding: 0 20px 10px 20px;
}
main .inner ul.footer li a:hover{
	color: #323032;
}

.choice-box {
	position: absolute;
	top: 30%;
	margin: 0 auto;
	display: none;
	padding: 3rem;
	background-color: #fff;
	box-shadow: 0 -5px 40px 7px rgba(0,0,0,0.08);
}
.choice-box a.close {
	position: absolute;
	right: 5px;
	top: 5px;	
	z-index: 2;
	padding-top: 14px;
	width: 40px;
	height: 40px;
	text-align: center;
	font-size: 16px;
	font-weight: 500;
}

.choice-box.on {
	display: block;
}

.choice-box a.lnk {
	position: relative;
	display: inline-block;
	width: calc(100% - 50px);
	padding: 10px 0 10px 50px;	
}
.choice-box a.lnk:before {
	position: absolute;
	left: 0;
	top: 10px;
	font-family: "Font Awesome 6 Free";
	content: "";
	font-size: 24px;
	color: #c49669;
	display: inline;	
}
.choice-box a.lnk.email:before {content: '\f0e0';}
.choice-box a.lnk.save:before {content: '\f019';}
.choice-box a.lnk.facebook:before {content: '\f39e'; font-family: "Font Awesome 6 Brands";}
.choice-box a.lnk.twitter:before {content: '\f081'; font-family: "Font Awesome 6 Brands";}
.choice-box a.lnk.instagram:before {content: '\f16d'; font-family: "Font Awesome 6 Brands";}
.choice-box a.lnk.google:before {content: '\f1a0';}
.choice-box a.lnk.pinterest:before {content: '\f231'; font-family: "Font Awesome 6 Brands";}
.choice-box a.lnk.linkedin:before {content: '\f0e1'; font-family: "Font Awesome 6 Brands";}
.choice-box a.lnk.whatsapp:before {content: '\f232'; font-family: "Font Awesome 6 Brands";}
.choice-box a.lnk.url:before {content: '\f0c5';}

.choice-box h2 {
	color: #c49669;
	font-weight: 400;
}





@media screen and (max-width: 730px){
	main .inner a.btn {	width: calc(100% - 54px);}
}

@media screen and (max-width: 530px){
	.inner {
		width: 100%;
		padding: 1.5rem;
	}
	
	.inner .row {
    padding: 1.2rem 0px 1.2rem 40px;
    width: calc(100% - 20px);
	}

	.inner .row:after {
		left: 50px;
		width: calc(100% - 70px);
	}	
	h1 {
		font-size: 22px;
		padding-bottom: 4px;	
	}
}

@media screen and (max-width: 400px){
	main .inner a.btn span {
		margin-top: 10px;
	}
	main .inner a.btn:before {
		display: block;		
	}
}

@media screen and (max-width: 370px){
	.inner {
		width: 100%;
		padding: 1rem;
	}
	
	.inner .row:after {
		left: 30px;
		width: calc(100% - 30px);
	}	
	
	header .inner ul li a {
    padding: 15px 5px;
		font-size: 14px;
	}
	header .inner ul li a:before, .inner .row:before {
    font-size: 20px;	
	}
	.inner .row:before {
    top: 22px;	
	}
	
	main .inner a.btn {
    padding: 15px 0;
		width: calc(100% - 10px);
	}
	
	main .inner a.btn span {
    font-size: 15px;
	}

	h1 {
		font-size: 18px;
		padding-bottom: 3px;	
	}
}