:root {
  --red:       rgb(172	39	29);
  --gold:      rgb(181, 166, 147);
  --gold_50:   rgba(181, 166, 147, 0.5);
  --ltgold:    rgb(224, 218, 209);
  --ltgold_50: rgba(224, 218, 209, 0.5);
  --dkgold:    rgb(152, 131, 103);
  --dkgold_50: rgba(152, 131, 103, 0.5);
  --vdkgold:    rgb(121, 105,  83);


  --white:     rgb(255,255,255);
  --red:       rgb(188, 13, 13);
  --red_20:    rgba(188, 13, 13, 0.2);

  --fontcolor: rgb(85, 85, 85);
  --border:    rgba(0, 0, 0, 0.1);
  --border_button:  rgba(0, 0, 0, 0.3);
  --vltgold: rgba(208, 194, 169, 0.21);

}

html {
	scroll-behavior: smooth;
}


body, html, p {
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
    line-height: 1.6em;
    color: var(--fontcolor) !important;
    
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6 {
	font-family: "Montserrat", sans-serif;
	font-weight: 300;
	color: var(--fontcolor) !important;
  	margin: 10px 0px;
  	
}

h1  {
	font-size: 30px;
	margin: 0 0 30px;
	line-height: 1.5em;
}

h2  {
	font-size: 18px;	
}

a {
	text-decoration:none;
}

.y3-hyphens a {
	border-bottom: 1px solid var(--red_20);
	font-weight: 500;
	color: var(--fontcolor) !mportant;
}

.y3-hyphens a:hover {
	border-bottom: 2px solid var(--red);
}

label {
	color: var(--fontcolor) !important;
}

/* --------------------------------------------------------------------  L I S T S   -- */

li {
	color: var(--fontcolor) !important;
}

ul > li::marker  {
	content: "▶  ";
	color: var(--fontcolor);
	font-family: "arial", sans serif;
	font-size: 0.75em;
}

ul > li, ol > li {
	padding-top:0.5em;
}


ul.list-icon {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
}

ul.list-icon > li::marker  {
	content: none;
}

ul.list-icon li {
    margin: 0 0 10px 0;
    padding: 0 0 0 35px;
    position: relative;
}

.list-icon li i {
    position: absolute;
    left: 0;
    top: 5px;
}

/* ------------------------------------------------------------------  B A N N E R   -- */

.banner-wrapper {
    background-color: #cec2ac !important;
}

.banner {
	text-align: center;
    padding: 45px 0;
    background-size: contain;
    background-position: right bottom !important;
    min-height: 250px;
    background-repeat: no-repeat;
    background-color: transparent;
    
}

.banner .title {
    margin-right: 300px !important;
    /* margin-left: -30px; */
    padding: 10px 30px 10px 30px;
    text-align: left;
    background: rgba(195, 174, 151, 0.9);
}

.banner .title {
    font-size: 28px;
    line-height: 1.3em;
}


@media only screen and (max-width: 1024px) {
    .banner .title {
        font-size: 24px;
        line-height: 1.3em;
    }
}

@media only screen and (max-width: 768px) {
    .banner .title {
        font-size: 21px;
        line-height: 1.2em;
    }
}

@media only screen and (max-width: 600px) {
    .banner .title {
        font-size: 18px;
        line-height: 1.1em;
    }
}

/* ----------------------------------------------------------------------  L O G O   -- */


/* ------------------------------------------------------------------------  N A V   -- */

#topbar {
	color:white;
	font-size: 14px;
}


#navbar {
   	position:sticky;
   	top:0;
   	z-index:1000;
   	background-color: #fffffffa;
   	border-bottom: 1px solid var(--border);
   }

#navbar #logo {
	display: inline-block;
	padding: 20px;

}

#navbar #logo, 
#navbar #logo svg, 
#navbar #logo svg #wappen,
#navbar #logo svg #michelsco,
#navbar #logo svg #immobilien  {
		transition: all 1s;	
	}

#navbar #logo.small {
	padding: 10px 20px 5px 20px;

}

#navbar #logo.small svg {
		height:50px;
	}
	
#navbar #logo.small svg #wappen  {
	 transform: translate(-60px, 0px);
	}

#navbar #logo.small svg #michelsco  {
	 transform: translate(60px, -40px);
	}

#navbar #logo.small svg #immobilien  {
	 transform: translate(35px, -40px);
	}


#navbar .w3-button  {
	color: var(--fontcolor);
   	font-size:14px;
   	font-weight: 400;
   	text-transform: uppercase;
}

#navbar .w3-button.active {
	color: var(--dkgold);
}



.dropdown  {
	border: .5px solid var(--border);
	border-top-width: 4px;

}

#redbar  {
	background-color: var(--red);
	height:43px;
	margin-top:-20px; 
	position:relative;
	z-index:99;
}

@media (max-width:890px) {
	.y3-hide-small-menu  {display:none!important}
}

@media (min-width: 891px) and (max-width: 930px) {
	.y3-hide-large-menu  {display:none!important}
	#navbar .w3-button  {padding-left: 4px; padding-right: 4px;}
}

@media (min-width: 931px) and (max-width: 999px) {
	.y3-hide-large-menu  {display:none!important}
	#navbar .w3-button  {padding-left: 8px; padding-right: 8px;}
}



@media (min-width:1000px) {
	.y3-hide-large-menu  {display:none!important}
}

/* ----------------------------------------------------------------------  C A R D   -- */

.card {
	border: 1px solid var(--border);
	background-color:white;
	

}

.card .image-wrapper  {
	overflow:hidden;
}

.card .image {
	background-size: cover;
	
}

.card .image  {
	transition: all 1s ease;
}

.card .image:hover  {
	transform: scale(1.03);
}


.card .title  {
	font-size: 1.3em;
    line-height: 1.4em;	
	margin: 5px 0 10px 0;
}

.card .content {
	padding:15px 15px 0 15px;
}

.card .phone  {
	font-size: 18px;
	padding: 3px 10px;
	background-color: #fffc;
}

.card .email {
	font-size: 14px;
	padding: 0px 6px;
	color: #fff;
	background-color: #ac9e8ccc;
}



/* ------------------------------------------------------------------  F O O T E R   -- */
footer h4 {
	font-family: "Montserrat", sans-serif;
	text-transform: uppercase;
	font-size: 0.8rem;
	margin: 4em 0 0 0;
	}

footer  {
	font-size: 14px;}

footer svg#veek {
	fill: white;
}





/* ----------------------------------------------------------  Y 3 - A D D   O N S   -- */

.y3-button {
	padding: 5px 12px  !important;
}

.y3-border-color  {
	border-color:var(--border_button) !important;
	}

.y3-red {
	background-color: var(--red) !important;
	color:white;
}


.y3-bold {
	font-weight:900;
}
.y3-text-red  {
	color: var(--red) !important;
}

.y3-text-ltgold, .y3-text-hover-ltgold:hover  {
	color: var(--ltgold) !important;
}


.y3-text-gold, .y3-text-hover-gold:hover  {
	color: var(--gold) !important;
}

.y3-text-vdkgold, .y3-text-hover-vdkgold:hover {
   color: var(--vdkgold) !important;
}

.y3-text-dkgold, .y3-text-hover-dkgold:hover {
	color: var(--dkgold) !important;
}

.y3-vltgold, .y3-hover-vltgold:hover  {
	background-color: var(--vltgold) !important;
}


.y3-ltgold, .y3-hover-ltgold:hover  {
	background-color: var(--ltgold) !important;
}

.y3-gold, .y3-hover-gold:hover {
	background-color: var(--gold) !important;
	color: white !important;
}

.y3-dkgold, .y3-hover-dkgold:hover  {
	background-color: var(--dkgold) !important;
}

.y3-vdkgold, .y3-hover-vdkgold:hover  {
	background-color: var(--vdkgold) !important;
}

.y3-grey  {
	background-color: rgba(0,0,0,20%)!important;
}

.y3-white  {
	background-color: var(--white) !important;
}


.y3-petite-caps  {
	font-variant-caps: petite-caps;
}

.y3-small-caps  {
	font-variant-caps: small-caps;

}

.y3-upper  {
	font-variant: small-caps;
}
.y3-uppercase  {
	 text-transform: uppercase;
}

.y3-plain  {
	text-decoration:none;
}

.y3-xl   { font-size:  84px !important; } 
.y3-xxl  { font-size:  96px !important; } 
.y3-xxxl { font-size: 124px !important; }

svg :root {
  fill: context-fill;
}

.y3-shadow {
  filter: drop-shadow(4px 4px 2px rgb(0 0 0 / 0.1));
}


.y3-icon-s    { width: 40px; height: 40px; }
.y3-icon-m    { width: 60px; height: 60px; }
.y3-icon-l    { width: 80px; height: 80px; }
.y3-icon-xl   { width:100px; height:100px; }
.y3-icon-xxl  { width:120px; height:120px; }
.y3-icon-xxxl { width:140px; height:140px; }
.y3-icon-4xl { width:160px; height:160px; }
.y3-icon-5xl { width:200px; height:200px; }

.y3-center { margin-left:auto; margin-right:auto;}

.w3-bar .w3-button {
  padding: 16px;
}

/* --------------------------------------------------------  T E S T I M O N I A L   -- */

.testimonial blockquote {
  
  background: transparent;
  margin:20px 50px;
  position:relative;
  font-style: italic;
}


.testimonial blockquote:before,
.testimonial blockquote:after {
  font-family: "Bitter", serif;
  position: absolute;
  font-size: 200px;
  color: var(--gold_50);
  font-style: normal;
}

.testimonial blockquote:before {
  background: transparent;
  content: "\201D";
  top: -20px;
  left: -65px;
  line-height:1;
  
}

/*
.testimonial blockquote:after {
  background: transparent;
  content: "\201D";
  right: -50px;
  bottom: -40px;
  line-height:1;
  height:90px;
}
*/

.testimonial p {
  margin: 0px;
  text-align: left;
  font-size: 24px;
}

/* ----------------------------------------------------------  A N I M A T I O N S   -- */

.w3-animate-opacity{
	animation:opac;
	animation-duration: 2s;
	animation-delay: .5s;
	opacity:0;
	animation-fill-mode: forwards;
}
@keyframes opac{
	from{opacity:0} to {opacity:1}
}

/* --------------------------------------------------  I T E M   C O N T A I N E R   -- */


.item_container {
  border: 1px solid var(--dkgold_50);
  border-radius: 20px;
  margin: 8px 0;
  aspect-ratio: 8/5;
  position:relative;
}


.item_container div  {	
  width:100%;
  padding: 10%;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/* ------------------------------------------------------------  F L I P   C A R D   -- */

/* source: https://www.w3schools.com/howto/howto_css_flip_card.asp  */
.flip-card {
	background-color: transparent;
	width: 100%;
	perspective: 1000px;
	aspect-ratio: 8/5;
	margin: 8px 0;
}

.flip-card-inner {
	position: relative;
	width: 100%;
	text-align: center;
	transition: transform 0.6s;
	transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
	transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
	border: 1px solid var(--dkgold_50);
	border-radius: 20px;
	position: absolute;
	width: 100%;
	-webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
	aspect-ratio: 8/5;
}

.flip-card-front {
	background-color: white;
}

.flip-card-back {
	background-color: white;
	transform: rotateY(180deg);
}

.flip-card-front div.wrapper, .flip-card-back div.wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width:100%;
	padding: 10%;
	margin: 0;
	
}

.flip-card-back div.wrapper {
	padding: 5%;
	margin-top:5px;
}
.flip-card-back svg {
	/* background-color: #0003; */
}

.flip-card-back svg text{
		fill: #666;
}
.flip-card-back svg text a{
		fill: blue;
		text-decoration:underline;
}


/* --------------------------------------------------------------------  T O O L S   -- */

ins {color:green;}
del {color:red;}

/* --------------------------------------------------------------------  O F F E R   -- */

.offer-wrapper  {
	border: 1px solid var(--border);
	overflow:hidden;
}


.offer-wrapper .offer-image  {
	transition: all 0.2s linear;
}

.offer-wrapper:hover .offer-image  {
	transform: scale(1.1);
}


.offer-wrapper .offer-text  {
	background-color: rgba(173,146,118, 0.75);
	opacity:0;
	transition: all 0.4s ease-in-out;
}




.offer-wrapper .offer-text .title {
	border-bottom: 1px solid #fff;
	color: #fff !important;
	font-size: 20px;
	margin: 20px 0 0;
	padding: 7px;
	position: relative;
	text-align: center;
	text-transform: uppercase;

  	transform: translateY(-100px);
	transition: all 0.2s ease-in-out;
	opacity:0;
}


.offer-wrapper .offer-text .desc {
	margin-bottom: 20px !important;
	color: #fff !important;
	font-size: 16px;
	line-height: 24px !important;
	padding: 10px 20px 0;
	position: relative;
	text-align: center;

  	transform: translateY(100px);
	transition: all 0.2s linear;
	transition-delay: 0.1s;
	opacity:0;


}

.offer-wrapper .offer-text .subline  {
	text-transform: uppercase;
	font-size:18px;
}


.offer-wrapper:hover .offer-text  {
	opacity:1;
}

.offer-wrapper:hover .offer-text .title,
.offer-wrapper:hover .offer-text .desc {
	transform: translateY(0px);
	opacity:1;
}

/* ------------------------------------------------------------------------  O W L   -- */


/*  ---  navigation bottons --- */

.owl-carousel .owl-nav {
    font-size: 30px;
    position: absolute;
    top: 45%;
    width: 100%;
    left: 0;
}

.owl-carousel .owl-nav .owl-prev, 
.owl-carousel .owl-nav .owl-next {
    position: absolute;
    top: 0;
    opacity: 0;
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 100px;
    width: 50px;
    height: 50px;
    line-height: 0px !important;
    text-align: center;
    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.2);
    transition: all ease 300ms;
}

.owl-carousel .owl-nav .owl-prev i {
	padding-right: 3px;
	color: var(--fontcolor);
}
.owl-carousel .owl-nav .owl-next i {
	padding-left: 3px;
	color: var(--fontcolor);
}

.owl-carousel .owl-nav .owl-prev {
    left: -50px;
    padding: 15px 15px 15px 10px;
}

.owl-carousel .owl-nav .owl-next {
    right: -50px;
    padding: 15px 10px 15px 15px;
}

.owl-carousel:hover .owl-nav .owl-prev {
	opacity: 0.75;
	transform: translate(25px, 0);
}

.owl-carousel:hover .owl-nav .owl-next {
	opacity: 0.75;
	transform: translate(-25px, 0);
}

/*  ---  for displaying shadow --- */
.owl-stage-outer  {
	margin: -15px; 
	padding: 15px;
}