@charset "UTF-8";
/*!
* Start Bootstrap - Business Casual v7.0.9 (https://startbootstrap.com/theme/business-casual)
* Copyright 2013-2023 Start Bootstrap
* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-business-casual/blob/master/LICENSE)
*/
/*!
 * Bootstrap  v5.2.3 (https://getbootstrap.com/)
 * Copyright 2011-2022 The Bootstrap Authors
 * Copyright 2011-2022 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */

:root {
  --myheight: 65px;
  --myanimeseconds: 1s;
  --myanimesecondsInt: 1;
  --mycolorgreen: #828569; /*#7B825D; */
  
}
header {
  padding-right: 1rem;
  padding-left: 1rem;
  position: sticky;
  top: 0;
  transition: box-shadow 0.3s ease;
	background: #e1d9c5;
  z-index: 10;
  height: 6rem;
}

/*should actually workd when user scrolls down. 
then the sticky header gets a border...*/
body:has(header.sticky) header {
  box-shadow: 0px 4px 8px green; /* Adds a shadow when scrolled */
  border-bottom: 2px solid #ff6600; /* Or a solid line */
}




/*bis hier die buttons... */



.blocksatz_j {
    hyphens: auto!Important;
    text-align: justify!Important; /* für Edge */

    -moz-text-align-last: left!Important; /* für Firefox vor 58.0 */
    text-align-last: left!Important;
	
}

.thaiflowlistsmaller {
	font-size: .8rem !important;
	line-height: 1 !important;
  
}

/*
.color-javi {
	color: var(--mycolorgreen);
	#2d2526;
	#7B825D
	
}
*/
.color-background-green-javi {
	background-color: var(--mycolorgreen);
	
}

.color-green-javi {
	color: var(--mycolorgreen); /*#938D6B;*/
}

  .note-img-massage {
	position: absolute;
	width: 350px;
	height: 350px;
	/*top: 2rem;  */
  }


.note-img-massage-right {
	/*right: 13rem;*/
	right: 15rem;
}

.note-img-massage-left {
    left: min( 16rem , 33% );
}


.note-text {	
	position: relative;
	top: -17rem;
	left: 6rem;
	/*width: 200px; 	*/
	width: 70%; /*60*/
	height: 51%; /*50*/
	overflow: hidden;	
}
.fontbold
	font-weight: bold;
}
	
.navbar input[type="checkbox"],
.navbar .hamburger-lines {
  display: none;
}

.navbar {
  position: fixed;
  /*width: 100%;*/
  width: 0;
  background: transparent;
  
  color: #000;
  opacity: 0.85;
  /*height: 50px;*/
  height: 0;

  z-index: 12;
}

.menu-items {
  /*order: 2;
  display: flex;
  text-align: center;
  */
}

.menu-items li {
  list-style: none;
  margin-left: 1.5rem;
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

.menu-items a {
  text-decoration: none;
  /*color: var(--hota-color-one); #444;*/
  color: var(--bs-body-color); /*#444;*/
  
  /*font-size: 2rem;*/
  font-weight: 800;
  transition: color 0.3s ease-in-out;
}

.menu-items a:hover {
  /*color: #000; #117964;*/
  color: var(--hota-color-one);
  transition: color 0.3s ease-in-out;

	.arrow{
	border: solid var(--hota-color-one); 
	
	transition: border-color 0.3s ease-in-out;
		border-top-width: medium;
		border-right-width: medium;
		border-bottom-width: medium;
		border-left-width: medium;
	  border-width: 0 3px 3px 0;
	  display: inline-block;
	  padding: 3px;
	  margin-left: 10px;
	}

}
.logo {
  order: 1;
  font-size: 2.3rem;
  margin-bottom: 0.5rem;
}


  .navbar {
    /* opacity: 0.95; */
	opacity: 1;
	top: 0;
	/*top: 1em;*/
  }

  .navbar-container input[type="checkbox"],
  .navbar-container .hamburger-lines {
    display: block;
  }

  .navbar-container {
    display: block;
    position: relative;
    height: 34px;
	margin-left:0;
	width: 10px; /*no need to width full page. other elements not working...*/
  }

  .navbar-container input[type="checkbox"] {
    position: absolute;
    display: block;
    height: 32px;
    width: 35px;
    top: 15px;
    left: 20px;
    z-index: 5;
    opacity: 0;
  }

  .navbar-container .hamburger-lines {
    display: block;
    height: 20px;
    width: 30px;
    position: absolute;
    top: 17px;
    left: 20px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .navbar-container .hamburger-lines .line {
    display: block;
    height: 4px;
    width: 100%;
    border-radius: 10px;
    /*background: #2d2526; */
	/*background: var(--hota-color-one);*/
	background: var(--mycolorgreen);
	
	
	
  }

  .navbar-container .hamburger-lines .line1 {
    transform-origin: 0% 0%;
    transition: transform 0.4s ease-in-out;
  }

  .navbar-container .hamburger-lines .line2 {
    transition: transform 0.2s ease-in-out;
  }

  .navbar-container .hamburger-lines .line3 {
    transform-origin: 0% 100%;
    transition: transform 0.4s ease-in-out;
  }

  .navbar .menu-items {
    padding-top: 100px;
    background: #EDEAE0F5; /*#FCFCFCA3;*/
	
	/*background: #CCCECD47;
    height: 440px;
    width: 250px;
	*/
    
	height: 95vh;
    width: 95vw;
    transform: translate(-250%);
    display: flex;
    flex-direction: column;
    /*margin-left: -40px;
    padding-left: 50px;*/
	padding: 50px;
    transition: transform 0.5s ease-in-out;
    box-shadow: 10px 10px 10px 0px #aaa;
	border-radius: 20px;
  }

  .navbar .menu-items li {
    /*margin-bottom: 1.5rem;*/
	margin-bottom: 0;

    font-size: 1.3rem;
    font-weight: 500;
  }

  .logo {
    position: absolute;
    
	top: 5px;
    /*
	right: 15px;
    font-size: 2rem;
	*/
	left:calc(50% - 100px);
  }

  .navbar-container input[type="checkbox"]:checked ~ .menu-items {
    transform: translateX(0);
	 
  }

  .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
    transform: rotate(35deg);
	background: var(--mycolorgreen);
  }

  .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
    transform: scaleY(0);
	background: var(--mycolorgreen);
  }

  .navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
    transform: rotate(-35deg);
	background: var(--mycolorgreen);
  }



.container-hota  {	
	/*z-index: 1;
	position: relative;*/
	width: 100%;
	padding: 0 8%;
	margin-right: auto;
	margin-left: auto;
	max-width: 1440px;
}

.container-hota:before {
  content: "";
  position: absolute;
  z-index: -1;
  /*top: 0;
  bottom: 0;
  */
  left: -13rem;
  right: 13rem;
  opacity: 0.05;
  overflow: hidden;
  /*height: 100vh; test*/
}

.container-hota.m-hota:before {
	background-image: url("../assets/img/Massagebtn.svg");
	background-color: rgba(0, 0, 0, 0);
	background-position-x: center;
	background-position-y: center;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-size: contain;
	background-origin: padding-box;
	background-clip: border-box;	
	
}


.container-hota.a-hota:before {
	background-image: url("../assets/img/Alchemybtn.svg");
	background-color: rgba(0, 0, 0, 0);
	background-position-x: center;
	background-position-y: center;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-size: contain;
	background-origin: padding-box;
	background-clip: border-box;	
	
}

.container-hota.h-hota:before {
	background-image: url("../assets/img/Habitbtn.svg");
	background-color: rgba(0, 0, 0, 0);
	background-position-x: center;
	background-position-y: center;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-size: contain;
	background-origin: padding-box;
	background-clip: border-box;	
	
}


.fontstyleInpx {
	font-size: 13px;
}	
.hota-img {
	/*box-shadow: 10.2px 11px 21.9px 5.1px rgba(0, 1, 1, 0.34);*/
    border: solid 11px #edece8;
    overflow: hidden;
}




 
.imgzoom, .pillarszoom{
	transition: transform .5s;
}

.btn-mobile-pos {
  left: 1rem;
  margin-top: -42%; /*-10rem;*/
  position: absolute;
}
/* .note-pin-massage:hover { */
  /* -ms-transform: scale(1.5);  */
  /* -webkit-transform: scale(1.5); */
  /* transform: scale(1.5);  */
	
/* } */

.imgdims{
	width: 15vw;
	max-width: 150px;
}
 

  .intro-massage-text {
	position: absolute;
	top: 1rem;
	width: min(40vw,600px);
	min-width: 350px;
	text-align: center;  
	opacity: 0;
  }


  .intro-flowmassage-text {
	
	position: absolute;
	top: 1rem;
	left: min(10vw,50px);
    width: min(70vw,500px);	
	text-align: center;  
	opacity: .9;
  }


.intro-img {
  /*width: auto!Important;*/
  width: 100%;
  
  }
  
  
.intro-text-javi {  

  /*box-shadow: 10.2px 1px 51.9px 15.1px rgba(0, 1, 1, 0.34); nur das war drin */
  /*border: solid 5px #edece8;*/
 }
 
 .intro-button-desktop {
  width: 100%;
  left: 0;
  position: absolute;
  bottom: -2rem;
 }
 
.intro-button-massage {
/*   left: -3rem;
  position: relative;
  bottom: 18rem;
  width: fit-content; */
  
  left: 6rem;
  position: absolute;
  bottom: 3rem; 
  
 }

 
.intro-button-flow-massage {
  width: 100%;
  left: 0;
  position: absolute;
  bottom: -1rem;
 }

  
.color-creamy-javi {		
  background-color: #e1d9c5;
} 

.links__text{
	text-align:center;
	/*margin-top:-50px;*/
	text-decoration:none;
	font-size: clamp(0.8rem, 2vw, 1rem);
}	

.btn-column {
text-align:center;
  float: left;
  width: 33%;
  padding: 10px;
}

/* Clear floats after the columns */
.btn-row:after {
  content: "";
  display: table;
  clear: both;
}


.color-background-gradiant-javi {		
background: linear-gradient(360deg, rgb(33, 37, 41) 12%, rgb(255, 255, 255) 100%);
}

.background-transition-javi {
background: linear-gradient(to right, rgba(255,255,255,0) 20%,
              rgba(255,255,255,1)), url("file:///C:/Users/ax1/Desktop/javi/javi_website/startbootstrap-business-casual-gh-pages/assets/img/bggraphite.png");
}

.background-color-white-javi {
	/*background: #fff;*/
	background: inherit;
	
}
.text-color-white-javi {
	color: #000;
	text-decoration: none;
}

.links__link {
	color: unset;
  text-decoration: none;
}


hr {
	width: calc(250px + (100vw - 600px) * 0.1); /* 250px + 10% of the viewport width when viewport width is more than 600px */
	max-width: 400px;
}

.d-none {
	display:none;
}

.fade-in-submenu { 
  animation: fadeIn var(--myanimeseconds); 
}
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}


.fade-out-submenu { 
  animation: fadeOut var(--myanimeseconds); 
}
@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.arrow {
  border: solid var(--bs-body-color);
  /*border: solid var(--hota-color-one);*/
  transition: border-color 0.3s ease-in-out;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  margin-left: 10px;
}

.arrow.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.arrow.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.submenuItems li {
	font-size: 1rem!Important;
}

.makebig {
	animation: makebig var(--myanimeseconds);
}

@keyframes makebig {
  from {height:0};
  to {height: var(--myheight)};
}

.makesmall {
	animation: makesmall var(--myanimeseconds);
}

@keyframes makesmall {
  from {height:var(--myheight)};
  to {height:0};
}



.center {
display: block;
  margin-left: auto;
  margin-right: auto;
  padding: 15px;
  width: 100px;
  /*width: 20vw;
  max-width: 150px;
  min-width: 100px;
  */
  z-index: 100;	/*damit über navi und klickbar von ganzem img */
  position: relative;
 }
 
 
 	.intro-massage-text-right {
		right: 10rem;
	}

	.intro-massage-text-left {
		left: min( 16rem , 33% );
		/* left: min( 33vw, 33%); */
	}
 
 	.padall {
		padding: 1rem 3rem
	}
 
 /*..........................*/
@media (min-width: 575px) {
	  .container {
		max-width: 540px;
	  }
	  .display-mobile-only {
		display: none;
	  }
	  
	  .display-mobile {
		display: none;
	  }  
		.display-desktop{
			display: block;
		}	  
	  .flex-mobile-only {
		display: block;
	  }
	  .container-hota {
		margin-bottom: 4rem;
	  }
	  
	  .display-desktop-only {
		display:inherit;
	  }
	  
	  .intro-massage-img-right {
		height: 400px;
		float: right;
		/* max-width: 20vw; */
		/* min-width: 300px; */
	  }

	  .intro-flowmassage-img-right {
		height: 500px;
		float: right;
	  }



	  .intro-massage-img-left {
		height: 260px;
		float: left;
		/* max-width: 30vw; */
		/* float: left; */
		/* min-width: 300px;	 */
	  }    
	  
	.imgzoom:hover, .pillarszoom:hover {
	  -ms-transform: scale(1.5); 
	  -webkit-transform: scale(1.5);
	  transform: scale(1.5); 
	}
	
	.padall {
		padding: 1rem 4rem
	}
 
  
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
	.padall {
		padding: 1rem 6rem
	}
  
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}




@media (max-width: 767px) {
  
	.site-heading {
	  margin-top: 1rem;
	}  
	
	.navbar {
	  /*top: 1em;*/
	}

	.navbar-container .hamburger-lines {
	/*width:30px;*/
	} 

}	

	
@media (max-width: 575px) {
	
	.display-desktop{
		display: none;
	}	
	.display-mobile {
		display: block;
	}  	
	
	.display-mobile-only {
		display: flex;
	}
	.flex-mobile-only {
		display: flex;
		flex-direction: column-reverse;	
	}
	.display-desktop-only{
		display: none;
	}
	.mb-none-javi {
		margin-bottom: 0;
	}

	.intro-massage-img-right, .intro-flowmassage-img-right {
		/* margin: -200px 0 0 0; */
		height: 100%;
		width: 100%;
		object-fit: cover;
	}  

	.intro-massage-img-left {
		height: 100%;
		width: 100%;
		object-fit: cover;
	}  	

	.intro-massage-img-div {
		height: 300px;
		/*box-shadow: 10.2px 11px 21.9px 5.1px rgba(0, 1, 1, 0.34);*/
		border: solid 11px #edece8;
		overflow: hidden;
	}

	.intro-flowmassage-img-div {
		/* height: 700px; */
		height: 500px;
		box-shadow: 10.2px 11px 21.9px 5.1px rgba(0, 1, 1, 0.34);
		border: solid 11px #edece8;
		overflow: hidden;
	}


	 .intro-massage-text {
		right: unset;
		left: unset;
		width: 100%;
		position: relative;
		top: unset;
		max-width: unset;
		min-width:280px;
		opacity: 1;
	  }

	 .intro-flowmassage-text {
		left: unset;
		width: 100%;
		max-width: unset;
	  }

	  
	.hota-img-unset {
	  box-shadow: unset;
	  border: unset;
	}  
	
	.intro-button-massage {
		left: 3rem;		
	}

	.note-text {
		top: -9rem;
		left: 3rem;
		height: 4rem;

	}

	.note-pin-massage {
		/* height: 100%; */
		/* width: 100%; */
		/* top: 19rem; */
		/* position: relative; */
		height: 100%;
		width: 100%;
	}

	.note-pin-massage-2 {
		height: 100%;
		width: 100%;
		top: 19rem;
		position: relative;
	}
	.note-img-massage {
		/* position: absolute; */
		top: 12rem;
		left: -13%;
		width: 200px;
		height: 200px;
	}	
	
	.pillarszoom:hover, .pillarszoom:active {
 	  -ms-transform: none; 
	  -webkit-transform: none;
	  transform: none;
	}
		
	.imgzoom:hover, .imgzoom:active {
		transition: all .5s;
		left: 0;
		width: 370px;
		height: 370px;
		top: 1rem;
	}	
	.imgzoom:hover .display-desktop, .imgzoom:active .display-desktop {
		display:block!important;
	}
	.imgzoom:hover .note-header {
		display:none;
	}

	.imgzoom:hover .display-mobile, .imgzoom:active .display-mobile {
		display:none!important;
	}
	.imgzoom:hover .note-text, .imgzoom:active .note-text {
		position: relative;
		top: -16.5rem;
		left: 6rem;
		/*width: 200px;	
		height: auto;
		width: 50%;*/
		width: 60%;	
		height: 50%;
		overflow: hidden;		
	}	
	 
	.imgzoom:hover .intro-button-massage, .imgzoom:active .intro-button-massage {

	  left: 6rem;
	  position: absolute;
	  bottom: 4rem;
	}	

		
}


@media (max-width: 450px) {
	.btn-mobile-pos {
	  width: 100px;
	}


} 

 
 /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 390px) {
  .btn-column {
    width: 100%;
  }
}


.divnotemovenotecenter {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: all .5s ease-in;
    -moz-transition: all .5s ease-in;
    -o-transition: all .5s ease-in;
    transition: all .5s ease-in;	
    width: 350px;
    height: 350px;
}

.divnotemovenotecenter.transition {
    width: 50px;
    height: 50px;

}

 
.prenotepartd {
	display:none;
}
.prenotefull {

	display: block;

}
.prenotefull.transition {
	display:none;
}

.no-zoom-note-text {
	top: -16rem;
    left: 7rem;
}


.no-zoom-intro-button-massage {
	top: -16.5rem;
    left: -2rem;	
	width: fit-content;
}

.hideme {
	display: none;
}



.containerflow {
	max-width: 992px;
}

.containerbooking {
	max-width: 768px;
}


.box {
  width: 50%;
  min-width: 250px;
  display: block;
  height: 50px;
  position: relative;
  border-radius: 5px;
  background: linear-gradient(to right, #abbd73 35%, #d6e2ad 100%);
  margin-bottom: 40px;
  padding: 15px 25px 0 40px;
  color: darkslategray;
  box-shadow: 1px 2px 1px -1px #777;
  transition: background 200ms ease-in-out;
}

.shadow:before {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 13px;
  right: 7px;
  width: 25%;
  top: 0;
  box-shadow: 0 15px 10px #777;
  transform: rotate(4deg);
  transition: all 150ms ease-in-out;
}

.box:hover {
  background: linear-gradient(to right, #abbd73 0%, #abbd73 100%);
}

.shadow:hover:before {
  transform: rotate(0deg);
  bottom: 20px;
  z-index: -10;
}

.circle {
  position: absolute;
  top: 14px;
  left: 15px;
  border-radius: 50%;
  box-shadow: inset 1px 1px 1px 0px rgba(0, 0, 0, .5), inset 0 0 0 25px antiquewhite;
  width: 20px;
  height: 20px;
  display: inline-block;
}


.pin {
  --pin-color: #d02627;
  --pin-dark: #9e0608;
  --pin-light: #fc7e7d;

  position: absolute;
  left: 20px;
  width: 60px;
  height: 50px;
}

.shadowpin {
  position: absolute;
  top: 18px;
  left: -8px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: radial-gradient(var(--paper-shadow), 20%, rgba(201, 191, 141, 0));
}

.metal {
  position: absolute;
  width: 5px;
  height: 20px;
  background: linear-gradient(to right, #808080, 40%, #eae8e8, 50%, #808080);
  border-radius: 0 0 30% 30%;
  transform: rotate(50deg);
  transform-origin: bottom left;
  top: 15px;
  border-bottom: 1px solid #808080;
}

.bottom-circle {
  position: absolute;
  right: 15px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: var(--pin-color);
  background: radial-gradient(
    circle at bottom right,
    var(--pin-light),
    25%,
    var(--pin-dark),
    90%,
    var(--pin-color)
  );
}

/* Barrel */
.bottom-circle::before {
  content: "";
  position: absolute;
  top: 0;
  left: -2px;
  width: 20px;
  height: 30px;
  transform: rotate(55deg);
  transform-origin: 100% 100%;
  border-radius: 0 0 40% 40%;
  background: linear-gradient(
    to right,
    var(--pin-dark),
    30%,
    var(--pin-color),
    90%,
    var(--pin-light)
  );
}

/* Top circle */
.bottom-circle::after {
  content: "";
  position: absolute;
  right: -10px;
  top: -5px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: radial-gradient(
    circle at right,
    var(--pin-light),
    30%,
    var(--pin-color),
    var(--pin-dark) 80%
  );
}


/*subscription */
.subscription-body {
	padding-top: 1rem;
	
	font-weight: bold;
	/*font-size: 14px;*/
	font-size: calc(10px + .2vw);
	color: #171D23;
	margin: 00;
}

.subscription-container {	
	width: 350px;
	margin: 20px auto;
	
}

.login_bar_cc, .login_bar_request, .login_bar_contact {
	/*width: 90vw;
	max-width: 350px;
	height: 250px;*/
	background: white;
	border-radius: 10px;
	
	top: 50%;
	position: relative;
	z-index: 1;
	overflow: hidden;
}

.login_bar_request {
	background:inherit;
	/*max-width: 500px;*/
	margin: auto;
	/*padding-bottom: 10px;	damit die fehlermeldung tooltip gezeigt wird!!*/
	overflow: visible;
}
.login_bar_request-child {
	border-radius: 10px;
	background: white;
}
.login_bar, .login_bar_book {
	width: 350px;
	height: 35px; /*test 40px;*/
	background: white;
	border-radius: 10px;
	top: 50%;
	position: relative;
	z-index: 1;
	overflow: hidden;
	margin: auto;
}

.login_cc, .login_request, .login_contact {
	
	background: rgba(165, 155, 155, 0.5);
	border-radius: 10px;
	border: none;
	position: relative;
	height: 50px;
	padding: 10px;
	text-align: left;
	vertical-align: middle;
	cursor: text;
	z-index: 10;
	font-size: 13px;
	color: var(--bs-body-color);	
	line-height: 30px;
	white-space: nowrap;	
	
	overflow: hidden;
	-webkit-transition: transform 0.2s ease-in-out 0s;
	   -moz-transition: transform 0.2s ease-in-out 0s;
	     -o-transition: transform 0.2s ease-in-out 0s;
	        transition: transform 0.2s ease-in-out 0s;
}

.login_msg_contact {
	line-height: inherit;
	height: auto;
    min-height: 100px;
	max-height: 300px;
	overflow: auto; /*gives scrollbar after heigt reaches max-height ...*/
}

.login_request {
	background: transparent;

	margin-bottom: 15px;
}

.login, .login_book {
	background: transparent;
	border: none;
	position: absolute;
	height: 100%;
	width: 250px;
	padding-left: 10px;
	text-align: left;
	line-height: 50px;
	vertical-align: middle;
	cursor: text;
	z-index: 10;
	
	color: var(--bs-body-color);	
	line-height: 40px;
	
	white-space: nowrap;
	
	-webkit-transition: transform 0.2s ease-in-out 0s;
	   -moz-transition: transform 0.2s ease-in-out 0s;
	     -o-transition: transform 0.2s ease-in-out 0s;
	        transition: transform 0.2s ease-in-out 0s;
}




.login:focus {
  outline: none;
}
.login_cc:focus-visible {
  outline: none;
}	
.login_book:focus-visible {
  outline: none;
}	

.login_contact:focus-visible {
  outline: none;
}	



.login_request:focus-visible {
  outline: none;
}	
.login_active {
	-webkit-transform: translateX(350px);
	   -moz-transform: translateX(350px);
	    -ms-transform: translateX(350px);
	     -o-transform: translateX(350px);
	        transform: translateX(350px);
}

.subscribe_button:hover{
	background-color: #222A33;
	cursor:pointer;
}
.subscribe_button_book:hover{
	background-color: #222A33;
	cursor:pointer;
}


.subscribe_button, .subscribe_button_book{
	background: #171D23;
	position: absolute;
	/*top: -50px;*/
	left: 250px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	/*height: 150px;*/
	width: 100px;
	text-align: center;
	line-height: 40px; /*150px;*/
	vertical-align: middle;	
	color: white;
	-webkit-transition: transform 0.5s ease 0s;
	   -moz-transition: transform 0.5s ease 0s;
	     -o-transition: transform 0.5s ease 0s;
	        transition: transform 0.5s ease 0s;
}

.subscribe_button_active{
	-webkit-transform: translateY(50px);
	   -moz-transform: translateY(50px);
	    -ms-transform: translateY(50px);
	     -o-transform: translateY(50px);
	        transform: translateY(50px);
}

.subscribing{
	background: #CDD4DC;
	height: 100%;
	width: 350px;
	z-index: 5;
	position: absolute;
	left:-350px;
	
	display: inline-block;
	-webkit-transition: transform 1s ease 0s ;
	   -moz-transition: transform 1s ease 0s ;
	     -o-transition: transform 1s ease 0s ;
	        transition: transform 1s ease 0s ;
}

.subscribing_active {
	
	-webkit-transform: translateX(350px);
	   -moz-transform: translateX(350px);
	    -ms-transform: translateX(350px);
	     -o-transform: translateX(350px);
	        transform: translateX(350px); 

}

.thanks{
	background: transparent;
	height: 100%;
	width: 350px; 
	z-index: 5;
	text-align: left;
	/*line-height: 50px; test*/
	line-height: 40px;
	vertical-align: middle;
	padding-left: 10px;
	position: absolute;
	top:50px;
	display: inline-block;
	-webkit-transition: transform 0.5s ease 0s ;
	   -moz-transition: transform 0.5s ease 0s ;
	     -o-transition: transform 0.5s ease 0s ;
	        transition: transform 0.5s ease 0s ;
}

.thanks_active {
	-webkit-transform: translateY(-50px);
	   -moz-transform: translateY(-50px);
	    -ms-transform: translateY(-50px);
	     -o-transform: translateY(-50px);
	        transform: translateY(-50px);
}


.tooltip, .tooltip_book, .tooltip_request {
  position: absolute;
  margin-top:10px;
  width: 250px;
  background-color: rgb(0, 0, 0, 0.7);
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  
}

.tooltip_request {
	width: 100%!important;
}

.hota-seemeno {
	position: absolute;
	left: -9999px;
	height: 0;
	width: 0;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
}


.hota-placeholder {
  opacity: .3;
}



.modal-window {
  position: fixed;
  background-color: rgba(165, 155, 155, 0.45);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
}
.modal-window:target {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.modal-window > div {
  width: 400px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 2em;
  background: white;
}

.modal-close {
  color: #aaa;
  
  font-size: 50px;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 70px;
  text-decoration: none;
}
.modal-close:hover {
  color: black;
}


.modal-window > div {
  border-radius: 1rem;
}
.modal-window div:not(:last-of-type) {
  margin-bottom: 15px;
}
	
	
	
.tooltip-cc, .tooltip-contact {
  position: relative;
  margin-top:10px;
  background-color: rgb(0, 0, 0, 0.7);
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  height: 30px;
  z-index: 99;
}
	
@media (max-width: 575px) {
	.modal-window > div {
	transform: translate(-50%, -80%);
	}
}

h4 {
	font-size: min(calc(0.8rem + 2vw),1.5rem);
	
	font-weight: bold;
}

h5 {
	font-size: min(calc(0.5rem + 2vw),1.3rem);
	font-weight: bold;
}



/* body {
  font-family: 'Inter', sans-serif;
  color: #333;
}

h1, h2, h3 {
  font-family: 'Merriweather', serif;
}
 */

h1 { font-size: 2.5rem!important; } /* Desktop */
h2 { font-size: 2rem!important; }
h3 { font-size: 1.8rem!important; }
h4 { font-size: 1.4rem!important; }
h5 { font-size: 1.2rem!important; }
h6 { font-size: 0.8rem!important; }

p { font-size: 1rem!important; line-height: 1.6!important; }


@media (max-width: 768px) {
  h1 { font-size: 2.2rem!important; } /* Reduce by ~12% */
  h2 { font-size: 1.8rem!important; }
  h3 { font-size: 1.6rem!important; }
  h4 { font-size: 1.3rem!important; }
  h5 { font-size: 1.1rem!important; }
  h6 { font-size: 0.75rem!important; }
  p { font-size: 0.95rem!important; line-height: 1.5!important; }
}



@media (max-width: 480px) {
  h1 { font-size: 1.8rem!important; } /* Reduce by ~28% */
  h2 { font-size: 1.5rem!important; }
  h3 { font-size: 1.3rem!important; }
  h4 { font-size: 1.1rem!important; }
  h5 { font-size: 1rem!important; }
  h6 { font-size: 0.7rem!important; }
  p { font-size: 0.9rem!important; line-height: 1.5!important; }
}


.fade-in {
  opacity: 0;
  transform: translateY(20px)!important;
  transition: opacity 0.8s ease-out, transform 0.8s ease-out!important;
}

.fade-in.visible {
  opacity: 1!important;
  transform: translateY(0)!important;
}


a {
  transition: color 0.3s ease-in-out!important;
}

a:hover {
  color: #ff6600!important;
}

button {
  transition: transform 0.3s ease, background-color 0.3s ease!important;
}

button:hover {
  transform: scale(1.05)!important;
  background-color: #ff6600!important;
}

img {
  transition: transform 0.3s ease-in-out!important;
}

img:hover {
  transform: scale(1.03)!important;
}


.nav-menu {
  transform: translateY(-20px)!important;
  opacity: 0!important;
  transition: opacity 0.4s ease, transform 0.4s ease!important;
}

.nav-menu.open {
  opacity: 1!important;
  transform: translateY(0)!important;
}



.tri-state-toggle {
	position: relative;
	float: right;
	background: #8A9FA2; /*rgba(0,0,0,0.8);*/
    box-shadow: inset 0 2px 8px 0 rgba(165,170,174,0.25);
    /*border-radius: 24px;
	*/
	border-top-left-radius: 2em;
	  border-top-right-radius: 2em;
	  border-bottom-left-radius: 2em;
	  border-bottom-right-radius: 2em;	
	
    display: inline-block;
    overflow: hidden;
    display: inline-flex;
    flex-direction: row;
	transition: all 500ms ease; 
	
right: 10px;
  top: 10px;	
	
	z-index: 20;
}

.tri-state-toggle-button {
	font-family: 'Lumanosimo', Arial, sans-serif;
    font-weight: bold;
	font-size: 12px;	
    border-radius: 22px;
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    background-color: transparent;
    border: 0px solid transparent;
    margin: 4px 2px;
    color: white;
    cursor: pointer;
  
/*    -webkit-transition: all 0.5s ease-in-out;
  -moz-transition:    all 0.5s ease-in-out;
  -ms-transition:     all 0.5s ease-in-out;
  -o-transition:      all 0.5s ease-in-out; 
  transition:         all 0.5s ease;
  
  */
}

.tri-state-toggle-button.active {

  background-image: linear-gradient( 90deg, #fff 0%, #fff 35%, #fff 100% );
 /* border: 0px solid rgba(207,207,207,0.6);
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.1);
  transition: all .5s ease-in;

*/
  color: inherit;
 
}
.uppercase{
text-transform: uppercase;
}

.makedivcontentcenter {
				  width: 50%; /* Make div 50% of the parent width */
  margin: 0 auto; /* Center horizontally */
  text-align: center; /* Center text inside */
}



@media (max-width: 450px) {

	.subscription-container {	
		/*width: 300px;*/
	}

	.subscribe_button, .subscribe_button_book{
		left: 200px;
	}

	.login_bar, .login_bar_book {
		width: 300px;
	}
	.login {
		width: 200px;
	}

	.subscribing{
		width: 300px; 
		left:-250px;
	}


	.subscribing_active {
				
		-webkit-transform: translateX(300px);
		   -moz-transform: translateX(300px);
			-ms-transform: translateX(300px);
			 -o-transform: translateX(300px);
				transform: translateX(300px);			
				
	}

	.thanks{
		width: 300px;
	}

	.subscribing{
		width: 300px;
		left:-300px;
	}
	
} 