:root {
  --xgold: #ffb338;
  --light-shadow: #77571d;
  --dark-shadow: #3e2904;
}
body {
	.color:white;
	background: black;
	--ba-grey: #919BAC;
	--gn-blue: #05359C;
    --gn-pink: #FF6584;
    --gn-black: #3F3D56;
    --gn-grey: grey;
    --gn-border-radius: 5vw;
    --gn-btn-border-radius: 15vw;

	--gn-background:#E7E5EB;
	--gn-white:#FFFFFF;
	--gn-purple:#5945FE;
	--gold:#FFD700;
	--silver:#c0c0c0;
	--main-bg: #000000;

}

#map {
	height: 80vh;
	
	.z-index: 0;
}
.auth{
    padding: 10px;
    border: 1px solid #ddd;
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 30px;
}
.ui-autocomplete {
	z-index: 2150000000;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.dots {
	display:flex;
	
}
.dot {
	background-color: var(--gn-black);
	height:2vh;
	width:2vh;
	margin : 1.5vh;
	
	border-radius: 50%;
}

.dot_highlighted {
	background-color: var(--gn-purple);
	height:3vh;
	width:3vh;
	margin : 1vh;
	border-radius: 50%;
}


/* The checkbox container */
.evoz {
  display: block;
  position: relative;
  padding-left: 43px;
  margin-bottom: 12px;
  cursor: pointer;
  /* font-size: 22px; */
  border-radius:25px;
  padding-top: 5px;
  padding-bottom:5px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* background-color: #2196F3; */
}

.evoz_checked {
	background-color: #2196F3;
	color:white;
}

/* Hide the browser's default checkbox */
.evoz input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 5px;
  height: 30px;
  width: 30px;
  background-color: #eee;
  border-radius: 100%;
}

/* On mouse-over, add a grey background color */
.evoz:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.evoz input:checked ~ .checkmark {
  background-color: #2196F3;
}


/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.evoz input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.evoz .checkmark:after {
  left: 9px;
  top: 5px;
  width: 7px;
  height: 14px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.go_back {
	left: 9px;
  top: 5px;
  width: 14px;
  height: 14px;
  border: solid black;
  border-width: 0 0 3px 3px;
  margin: 10px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

@keyframes animatedBackground {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}
.about {
	background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('../images/about.jpeg');
	background-size: cover;
	background-position: center;
  background-repeat: repeat-x;
  
  transition: all 0.3s ease-in-out;
}
#r1c1 {
	background-image: url('../images/girl_in_glass.jpeg');
	height:50vw;
	background-size: 100%;
	background-position: center;
  background-repeat: repeat-x;
  
  transition: all 0.3s ease-in-out;
}

#r1c2A {
	background-image: url('../images/two-girls.jpg');
	height:25vw;
	background-size: 100%;
	background-position: center;
  background-repeat: repeat-x;
  position: relative;
  transition: all 0.3s ease-in-out;
}
#r1c2A:hover  { background-size: 120%; opacity : 80%; }

#r1c2B {
	
	height:25vw;
	animation: fadeIn 5s; 
  transition: all 0.3s ease-in-out;
}
#r1c2B_overlay {
	background-image: url('../images/girl-2.jpg');
	height:25vw;
	background-size: 100%;
	background-position: center;
  background-repeat: repeat-x;
  /* opacity: 50%; */
  
  transition: all 0.3s ease-in-out;
}

#r1c2C {
	background-image: url('../images/girl-1.jpg');
	height:25vw;
	background-size: 150%;
	background-position: center;
  background-repeat: repeat-x;
  
  transition: all 0.3s ease-in-out;
}

.overlay { opacity: 0.5; }
#r2c1 {
	background-image: url('../images/girl-1.jpg');
	height:18vw;
	background-size: 150%;
	background-position: center;
  	background-repeat: repeat-x;
   animation: fadeIn 5s; 
   transition: all 0.8s ease-in-out; 
}


#r2c1:hover  { background-size: 120%;  }

#r1c1:hover  { background-size: 200%; opacity : 80%; }

#r1c2B:hover  { background-size: 200%; opacity : 80%; }
.center_btn {
	position:absolute; bottom: 10px; padding: 15px; border: 1px solid; 
	background: #0b00007a;
	height: fit-content; width: fit-content; }
.text { padding: 10px 0;  background: transparent; height: fit-content; width: fit-content; }
.spacer_50 { height : 50%; background: transparent; }
.parallax {
  background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('../images/main.webp');
  height: 1000px; /* Adjust as needed */
  width:100%;
  top:105px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.mainpage {
	display: none;
}
.mainpage_def {
	display: block;
}

.gold_bg {
/*	background-image: repeating-linear-gradient( 105deg,
    var(--gold) 0% , 
    var(--dark-shadow) 5%,
    var(--gold) 12%); 
  color: transparent;
  filter: drop-shadow(5px 15px 15px black); */
    background: var (--gold);
	color:black;
}
.float-text {
	background: rgb(0 0 0 / 50%);
	width:25vw;
	
}
.overlay {
	bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0;
}
.background {
	background: rgb(0 0 0 / 50%);
}
.m1 {
	background-image: url('../images/glow.jpeg');
	
	background-size: 100%;
	background-position: top;
  background-repeat: repeat-x;
  
  transition: all 0.3s ease-in-out;
  position: relative;
}
.m2  {
	background-image: url('../images/bathroom.jpeg');
	
	background-size: 100%;
	background-position: top;
  background-repeat: repeat-x;
  
  transition: all 0.3s ease-in-out;
  position: relative;
}
h2 {
  margin: 0;
  font-size: 11vw;
  color: rgba(255,200,0, .01);
  background-image: url("../images/kris2.jpg");
  background-repeat: repeat;
  -webkit-background-clip:text;
  animation: animate 25s ease-in-out infinite;
  text-align: center;
  text-transform: uppercase;
  font-weight: 900;
  
}

#about_modal {
  margin: 0;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, .9), rgba(0, 0, 0, 0.5)
  ), url("../images/bathtime.jpg");
  background-repeat: repeat;
  
  animation: animate 25s ease-in-out infinite;
  
  
}

.bcontainer { 
	position: relative;
	
	margin:2vw 0 ; height: 20vw;  border-radius:25px; color:white; padding: 1vw; font-size:2.5vw;
	background-size: auto 100%;
	animation: fadeIn 5s; 
   	transition: all 0.8s ease-in-out; 
}
.bcontainer:hover {
	animation: fadeIn 5s; 
   	transition: all 0.8s ease-in-out; 
   	transform: scale(1.05);
}
#lw { background-image: url('../images/lw.jpeg'); }
#tw { background-image: url('../images/tw.jpeg'); background-size: cover; background-position: 0px;}
#nw { background-image: url('../images/nw.jpeg'); background-size: cover; background-position: 0px}
#ss { background-image: url('../images/ss.jpeg'); background-size: cover; }
#rs { background-image: url('../images/rs.jpeg'); background-size: cover; }
#bp { background-image: url('../images/bp.webp'); background-size: cover;}
#gcg { background-image: url('../images/gcg.webp'); background-size: cover;}
#pe { background-image: url('../images/pe.webp'); background-size: cover;}
#lw:hover {
	
	
}

.s-lw { background-image: url('../images/s-lw.webp'); background-size: cover;}
.s-tw { background-image: url('../images/s-tw.webp'); background-size: cover; background-position: 0px;}
.s-nw { background-image: url('../images/s-nw.webp'); background-size: cover; background-position: 0px}
.s-ss { background-image: url('../images/s-ss.webp'); background-size: cover; }
.s-rr { background-image: url('../images/s-rr.webp');  background-size: cover; background-position: center;}
#glasses { 
	background-image: url('../images/glasses.webp'); 
	background-size: cover; 
	border-radius:25px; 
	min-height:60vw;
	}
#contact { 
	background-image: url('../images/contact.jpeg'); 
	background-size: auto 100%; 
	border-radius:25px; 
	min-height:60vw;
	}

.round {
	height: 32px;
	width:32px;
	background: white;
	border-radius:16px;
	background-image: url('../images/arrow.svg');
	transform: rotate(45deg);
	transition: transform .5s ease-in-out;
	position: absolute;
	bottom:16px;
	right:16px;
}
.round:hover {
  transform: rotate(0deg);
}
h3 {
	font-size:3rem;
	font-family: "Cormorant Garamond";
}
p {
	
	font-weight: lighter;
}
.lighter {
	font-weight: lighter;
}
@keyframes animate {
    0%, 100% {
      background-position: left top;
    }
    25%{
      background-position: right bottom;
     }
    50% {
      background-position: left bottom;
    }
    75% {
      background-position: right top;
    }   
}

.body { color: var(--main-bg); font-family: 'Montserrat', sans-serif; }
.spacer { height: 10vh; }
.center { display: table; margin: 0 auto ;}
.zoom { 
animation-duration: 3s;
  animation-name: slidein;
	xcolor:var(--main-bg);
	xbackground: black;
}

.datepicker-days { color: black; }
.datepicker {
	font-size: 0.875em;
	padding:0 5px;
}
/* solution 2: the original datepicker use 20px so replace with the following:*/
        
.datepicker td, .datepicker th {
	width: 1.5em;
	height: 1.5em;
}
div {
	// color:var(--main-bg);
	/* background: black; */
}


.navbar-light .navbar-brand {
    color: var(--main-bg);
}
.navbar-light .navbar-nav .nav-link {
    color: var(--main-bg);
}
.active>.nav-link {	
	color: red;
}


.nozoom {
	color:var(--main-bg);
	background: black;
};

.modal-body {
	background: black;
}
.modal-header {
	color: black;
	background: var(--main-bg);
}

.navbar-custom {
	background-color: black;
	color: white;
}
.navbar-custom-right {
	background-color: black;
	color:ba-grey;
}
a.navbar-custom {
	background-color: black;
	color:white;
}

.btn-rounded.btn-sm { 
            width: 250px; 
            height: 50px; 
            padding: 7px 10px; 
            border-radius: 25px; 
            background: var(--ba-grey);
            border: 1px solid black;
            color:black;
            text-align: center; 
           
} 
.btn-rounded.btn-md { 
           
            height: 40px; 
            padding: 7px 10px; 
            border-radius: 20px; 
            background: ba-grey;
            border: 1px solid black;
            color:black;
            text-align: center; 
            margin: 10px;
           
} 
.btn-black {
	background: black;
	color: white;
}
.form-check-input {
	color:black;
}
#client_application { color:black;}
.col-2dot4,
.col-sm-2dot4,
.col-md-2dot4,
.col-lg-2dot4,
.col-xl-2dot4 {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
.col-2dot4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 20%;
    flex: 0 0 20%;
    max-width: 20%;
}
.black_bg {
	background: black;
	color:white;
}
.grey_bg {
	background: var(--ba-grey);
	color:black;
}
.pfb {
	font-family: "Playfair Display";
	font-weight: bold;
}
.bh1 {
	font-size: 6vw;
	color:white;
	font-family: "Montserrat";
	margin:-2vw;
	animation: fadein 5s;
}

.bh1.is-visible {
	color:#333333;
}


.bh2 {
	font-size: 6vw;
	color:white;
	font-family: "Montserrat";
	animation: fadein 5s;
}
.bh3-black {
	font-size: 2.5vw;
	color:black;
	font-family: "Montserrat";
	font-style: italic;
	animation: fadein 5s;
}
.bh3 {
	color:white;
	font-size: 2.0vw;
	font-family: "Montserrat";
	margin: -4vw 0;
	animation: fadein 2s;
}
.bh4 {
	font-size: 4.5vw;
	
	font-family: "Montserrat";
	font-weight: bold;
	margin: 2vw;
	animation: fadein 2s;
}
.bh4i {
	font-size: 4.5vw;
	font-family: playfairdisplay-bold,playfair display,serif;
	font-style: italic;
	transition: all 0.8s ease-in-out;
}
.bh5 {
	font-size: 1.5vw;	
	font-family: "Montserrat";	
	margin: 0;
	transition: all 0.8s ease-in-out;
}
.bh6 {
	font-size: 1vw;	
	font-family: "Montserrat";	
	margin: 0;
	color:#eeeeee;
}
.bh6 a {
	color:#eeeeee;
}
.bh6 a:hover {
	color:white;
}

@media (max-width: 540px) {
    .col-2dot4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .bcontainer { 
		position: relative;
		
		margin:2vw 0 ; height: 34vw;  border-radius:25px; color:white; padding: 6vw; font-size:5vw;
		background-size: 100% auto;
	}
	#tw {  background-size: 100% auto; }
	#rs {  background-size: 100% auto; }
	.bh3 { font-size:4.5vw; }
	.bh5 { font-size:5vw; }
	.bh6 { font-size:4vw; }
	
}
@media (max-width: 720px) {
    .col-2dot4 {
        -webkit-box-flex: 0;
        .-ms-flex: 0 0 20%;
        .flex: 0 0 20%;
        max-width: 100%;
    }
    .bcontainer { 
		position: relative;
		margin:2vw 0 ; height: 30vw;  border-radius:25px; color:white; padding: 6vw; font-size:5vw;
		background-size: 100% auto;
	}
}
@media (max-width: 960px) {
    .col-lg-2dot4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        xmax-width: 20%;
    }
    .bcontainer { 
		position: relative;
		margin:2vw 0 ; height: 50vw;  border-radius:25px; color:white; padding: 1vw; font-size:2.5vw;
		background-size: 100% auto;
	}
}
@media (min-width: 1140px) {
    .col-xl-2dot4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        xmax-width: 20%;
    }
}
a {
	color:white;
}

@keyframes slidein {
  from {
    translate: -1vw 0;
    scale: 50% 1;
  }

  to {
    translate: 0 0;
    scale: 100% 1;
  }
}

.initout {
	opacity: 0.2;
}
.fadein { 
	animation-duration: 3s;
  	animation-name: fadein;
	
}

@keyframes fadein {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.fadeout { 
	animation-duration: 3s;
  	animation-name: fadeout;
	
}

@keyframes fadeout {
  0% { opacity: 1; }
  100% { opacity: 0.2; }
}