@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,400;0,700;1,100;1,400;1,700&display=swap');


body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif;}
body, html {
  height: 100%;
  line-height: 1.8;
  scroll-behavior: smooth;
  color:rgb(39, 39, 39);
  min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.xin-middle {    
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.xin-middle-small {    
  position:absolute;
  top: 18%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.xin-arrow {
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.arrow-hover {
  opacity: 80%;
  transition: 0.3s;
}

.arrow-hover:hover {opacity: 60%;}

body {background-color:ghostwhite}

.hero, .hero-small {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: inset 0px 0px 20px -1px #000000;
}

.hero {  
  background-image: url('../images/hero.jpg');
  min-height: 100%;
}

.hero-small {
  background-image: url('../images/hero.jpg');
  min-height: 35%;
}

.xin-nav {
    box-shadow: 0px 0px 26px 10px rgba(0,0,0,0.5);
    position: fixed;
    width: 100%;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    -moz-backdrop-filter: blur(5px);
    -ms-backdrop-filter: blur(5px);
    -o-backdrop-filter: blur(5px)
}

.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
    color: rgba(255,255,255,1);
}

i {
  font-size: 5vh;
  color:white;
}

a:link {
  color: rgb(255, 255, 255);
}

a:visited {
  color: rgb(255, 255, 255);
}

a:active {
  color: rgb(255, 255, 255);
}

a {text-decoration: none;}

.footer {
	display: block;
	background-color:cornflowerblue;
	color: white;
	text-align: center;
}

.footerrow {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--bs-gutter-y) * -1);
    margin-right: calc(var(--bs-gutter-x)/ -2);
    margin-left: calc(var(--bs-gutter-x)/ -2);
}

.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 2; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background: rgba( 255, 255, 255, 0.70 );
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  -moz-backdrop-filter: blur(7px);
  -ms-backdrop-filter: blur(7px);
  -o-backdrop-filter: blur(7px);
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
  box-shadow: 0px 0px 0px 0px #000000;
  display: block;
}

/* The navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #ffffff;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #dfdfdf;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

#bars:hover {
  opacity: 50%;
}

.xin-link {
  font-size: 20px;
}

.rightnav a{
  transition: 0.2s;
}

.rightnav a:hover{
  opacity: 70%;
}

.text-shadow {text-shadow: 0px 0px 5px #000000;}

.w100 {width: 100%}

.h100 {height: 100%}

.title {
	font-size: 13vmin;
	box-shadow: 0px 0px 0px 8px #FFFFFF;
	color: white;
	font-family: Pinyon Script
}

.min-navbar {
  background: rgba( 255, 255, 255, 0.20 );
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  -moz-backdrop-filter: blur(7px);
  -ms-backdrop-filter: blur(7px);
  -o-backdrop-filter: blur(7px);
  font-size: 1.4vmin;
  box-shadow: 0px 0px 20px -1px rgba(0,0,0,0.5);
}

.xin-card {
  width: 60%;
}

.xin-star {
  color:rgb(255, 189, 45);
  font-size: 21px;
  align-content: center;
}

.btn {
  border-radius: 0;
}

#book {
  opacity:100%;
  transition: 0.3s;
}

#book:hover {opacity:70%;}

#facebook{
  font-size: 20px;
  color: rgb(104, 104, 104);
  transition: 0.3s;
}

#facebook:hover{color:#4267B2}

#facebookcontact{
  font-size: 30px;
  color: rgb(104, 104, 104);
  transition: 0.3s;
}

#facebookcontact:hover{color:#4267B2}

#instagram{
  font-size: 20px;
  color: rgb(104, 104, 104);
  transition: 0.3s;
}

#instagram:hover{color:#E1306C}

#instagramcontact{
  font-size: 30px;
  color: rgb(104, 104, 104);
  transition: 0.3s;
}

#instagramcontact:hover{color:#E1306C}


.sidenav a{color:#777}

@media screen and (max-width: 768px) {
  .xin-card {width: 100%;}
}

@media screen and (min-width: 768px) {
  .sidenav {display: none;}
}

.xin-hover-opacity {
  opacity: 100%;
  transition: 0.3s;
}

.xin-hover-opacity:hover {
  opacity: 70%;
}

.xin-gallery-hover {
  opacity: 100%;
  padding-top: 0.3vmin;
  transition: 0.3s;
}

.xin-gallery-hover:hover {
  opacity: 70%;
}

.xin-price {
  width: 100%;
  margin: auto;
  min-width: 200px;
}

.modal-body a {color:rgb(39, 39, 39);}

#footer {
  margin-top: auto;
  width: 100%;
}

.contactinfo p, .contactinfo a:link {
	font-size: 20px;
	color: #696969;
}

.contact-hover {
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
}

.contact-hover:hover {
  font-size: 18px;
  background-color:#ececec;
}

.sarina-regular {
  font-family: "Sarina", cursive;
  font-weight: 400;
  font-style: normal;
}

.gallery {
	padding:15px;
	text-align:center;
	padding-bottom: 5vw;
}

.gallery img{
	width: 600px;
	height: 600px;
	object-fit: cover;
	object-position: top;
	padding:10px;
	transition: 0.5s;
}

.gallery img:hover{
	width: 610px;
	height: 610px;
	margin-top: -5px;
	margin-right: -5px;
	margin-bottom: -5px;
	margin-left: -5px;
	opacity:90%;
}

@media screen and (max-width: 1250px) {
  .gallery img {width: 450px;height:450px}
  .gallery img:hover{
	width: 460px;
	height: 460px;
	margin-top: -5px;
	margin-right: -5px;
	margin-bottom: -5px;
	margin-left: -5px;
	opacity:90%;
}
}

@media screen and (max-width: 950px) {
  .gallery img {width: 300px;height:300px}
  .gallery img:hover{
	width: 310px;
	height: 310px;
	margin-top: -5px;
	margin-right: -5px;
	margin-bottom: -5px;
	margin-left: -5px;
	opacity:90%;
}
}

@media screen and (max-width: 768px) {
  .gallery img {width: 200px;height:200px}
  .gallery img:hover{
	width: 210px;
	height: 210px;
	margin-top: -5px;
	margin-right: -5px;
	margin-bottom: -5px;
	margin-left: -5px;
	opacity:90%;
}
}

@media screen and (max-width: 576px) {
  .gallery img {width: 150px;height:150px}
  .gallery img:hover{
	width: 160px;
	height: 160px;
	margin-top: -5px;
	margin-right: -5px;
	margin-bottom: -5px;
	margin-left: -5px;
	opacity:90%;
}
}

.scissors{
	width:350px;
	height:auto;
	opacity:89%
}

.scissorsbox {
	padding-left: 20%;
	padding-right: 20%;
	padding-top:10px;
	padding-bottom:10px;
	}
	
@media screen and (max-width: 1200px) {
	.scissorsbox {
		padding-left: 10%;
		padding-right: 10%;
		padding-top:10px;
		padding-bottom:10px;
	}
}

@media screen and (max-width: 992px) {
	.scissorsbox {
		padding-left: 7%;
		padding-right: 7%;
		padding-top:10px;
		padding-bottom:10px;
	}
	.scissors{
	width:250px;
	height:auto;
	opacity:89%
	}
}

@media screen and (max-width: 768px) {
  	.scissorsbox {
		padding-left: 0%;
		padding-right: 0%;
		padding-top:10px;
		padding-bottom:10px;
	}
	.scissors {
		width:150px;
		height:auto;
		opacity:89%
	}
	.scissorstext {font-size:16px}
}