:root{--photo-offset:100px; --bg-primary:#000000; --loader-size: 100px; --loader-border: 8px; --loader-color: #ffffff}
*, html, body{ margin: 0px; padding: 0px; box-sizing: border-box}
body.page-template, body.page-template-default, body.error404 , body.blog { background: #000; }
/* Wrapper */
#wrapper {width: 100%; overflow: hidden; }
#loading {display:flex; align-items:center;justify-content:center; position:fixed; top:0; right:0; bottom:0; left:0; z-index: 999; background: var(--bg-primary)}
#loading .loader-container {position:relative; text-align:center}
#loading .loader-container img {max-width:100%; height:auto; display:block; margin: 0 auto}
#loading .loader {width: var(--loader-size); height: var(--loader-size); animation: rotateLoader 1s linear infinite; position: relative; margin: 0 auto; z-index: 9}
#content { overflow: hidden; width: 100%}


header{width: 100%; float: left; position:absolute; padding:0 30px} 
header .logo {position:relative; z-index:100; max-width:300px; margin-top:25px;}
.brand {width:auto; float:left; position: absolute;}
.logo-class, .logo-class-loader {max-width:250px}
header .hamburger{pointer-events:all;margin-left:20px;width:48px;height:48px;position:absolute; top:20px; right:30px; z-index:100}
header .hamburger .lines{height:48px;cursor:pointer;position:relative;width:48px}
header .hamburger .line{width:22px;height:2px;border-radius:2px;background-color:#fff;position:absolute;top:50%;margin-top:0;-webkit-transform-origin:center center;transform-origin:center center;transition:all .25s 0s cubic-bezier(.645,.045,.355,1);left:13px}
header .hamburger .line#line-1{top:calc(50% - 7px)} 
header .hamburger .line#line-3{top:calc(50% + 7px)}
header .hamburger.active .line#line-1{top:50%;-webkit-transform:rotate(45deg) scale(1) ;transform:rotate(45deg) scale(1)}
header .hamburger.active .line#line-2 {opacity:0}
header .hamburger.active .line#line-3{top:50%;-webkit-transform:rotate(-45deg) scale(.7);transform:rotate(-45deg)scale(1)}
header .hamburger .dot{position: absolute;  top:0; left:0; -webkit-transform-origin: center center; transform-origin: center center;   -webkit-transform: scale(1); transform: scale(1);  opacity:1;   width:48px;    height:48px;    border-radius:50%;   background:rgba(0, 0, 0, .3); transition:all .25s 0s cubic-bezier(.645,.045,.355,1);    z-index: -1;}
header .hamburger.active .dot {-webkit-transform: scale(1);   transform: scale(1); opacity: 1;  background: #000}

/* Menu CSS */
.menu-area{position:fixed; top:0; left:0; width:100%; height:100vh; z-index:99; text-align:center; display:none}
.menu-area #menu{width: 100%;padding-top: 120px; margin-bottom:30px;}
.menu-area #menu li{padding-bottom: 28px;list-style: none;}
.menu-area #menu ul{padding:60px 0 0 0;  display:flex; flex-direction:column; justify-content:center; align-items:center; height:100vh}
.menu-area #menu li a{text-decoration: none; font-weight:bold; text-transform: uppercase;  transition: all .4s ease 0s;}
.menu-area #menu li a:hover{color: #b8af92;}
.menu-area .menu-inner-area{width: 100%; float: left;position: relative;}
.menu-area .menu-line{margin: 0 auto;text-align: center; background:center center no-repeat;height: 100vh; background-size: cover; position: absolute;left: 0;right: 0;top: 0;z-index:999;} 
.menu-area .menu-inner{width: 100%;float: left;height: 100vh;}
.menu-area .menu-bottom ul{padding: 0;}
.menu-area .menu-bottom ul li{list-style: none; color: #fff;display: inline-block; padding: 0 3px;vertical-align: middle;}
.menu-area .menu-bottom ul li a{text-decoration: none; color: #fff;font-size: 12px;font-family: 'PT Serif', serif; transition: all .4s ease 0s;line-height: 16px;}
.menu-area .menu-bottom p{color: #fff;font-size: 12px;line-height: 17px;padding-top: 4px;font-family: 'PT Serif', serif;}
.menu-area .menu-bottom ul li a:hover{color: #b8af92;}
.menu-area .reservation-block {position: absolute; right: 0; bottom: 0; margin: 54px 0;z-index: 99;}
.menu-area .reservation-block .reservation-btn{display: inline-block;position: relative;}
.menu-area .menu-bottom {position: absolute;left: 0;right: 0;bottom: 40px;}
.menu-area .reservation-block .reservation-btn{width: 170px;height: 45px;}
.menu-area .reservation-block .reservation-btn:hover::before{height: 61px;}
.menu-area .reservation-block .reservation-btn:hover::after {width: 202px;}
.menu-area .reservation-block .reservation-btn:hover span::before{height: 61px;}
.menu-area .reservation-block .reservation-btn:hover span::after{width:202px;}
.menu-area .reservation-block .reservation-btn{line-height: 42px;}

/* --------------------- Main page CSS Start --------------------- */

.brickred{float:left; width:33.33%; height:100vh; position:relative; transition: all .4s ease-in-out!important}
.blockred { width: calc(100% + var(--photo-offset)); position:absolute; top: 0; left: calc(-1 * var(--photo-offset)); clip-path: polygon(var(--photo-offset) 0, 100% 0, calc(100% - var(--photo-offset)) 100%, 0 100%);  -webkit-clip-path: polygon(var(--photo-offset) 0, 100% 0, calc(100% - var(--photo-offset)) 100%, 0 100%); background: center center / cover no-repeat; z-index: 1}
.brickred::after{opacity:0; -webkit-transition:.4s ease; -o-transition:.4s ease; transition:.4s ease;position: absolute; top: 0;left: 0; content: ""; width:100%; height: 100%; display: block; background-color:rgba(0,0,0,.4);}
.brickred:nth-child(3) .blockred{clip-path: polygon(100px 0,100% 0,100% 100%,0 100%);} 
.main-button{position:absolute;top:50%;left:50%;transform:translateX(-50%);width:auto;opacity:1;z-index:10;text-align:center;transition:all .4s ease}
.main-button{position:absolute;top:50%;left:50%;transform:translateX(-50%);width:auto;opacity:1;z-index:10;text-align:center;transition:all .4s ease}
.main-button a{display:block;width:200px;line-height:30px;padding:0;border:none;background:transparent;color:#d3ab76;text-decoration:none}
.main-button span{position:relative;display:block;width:100%;height:100%;font-size:16px;color:#fff;text-transform:uppercase;text-shadow:1px 1px 1px #000,3px 3px 5px #3f3f4d}
.main-button::before,.main-button::after{content:"";position:absolute; right:-16px;bottom:-8px; background:#fff;transition:all .3s ease;text-shadow:1px 1px 1px #000,3px 3px 5px #3f3f4d}
.main-button::before{width:2px;height:60%}
.main-button::after{width:30%;height:2px}
.main-button span::before,.main-button span::after{content:"";position:absolute;left:-16px;top:-8px; background:#fff;transition:all .3s ease;text-shadow:1px 1px 1px #000,3px 3px 5px #3f3f4d}
.main-button span::before{width:2px;height:60%}
.main-button span::after{width:30%;height:2px}
.main-button:hover::before{height:46px}
.main-button:hover::after{width:232px}

/* reservation-block */
.reservation-block {position: absolute; bottom: 40px; right: 50px;  z-index: 9;  display: block;}
.reservation-block .reservation-btn {width:130px; height:40px; display:block; position:relative; line-height:36px; padding:0; border:none; background:transparent; color:#fff; text-decoration:none; cursor:pointer; pointer-events:all}
.reservation-block .reservation-btn span {position: relative; display: block;  width: 100%; height: 100%; color: #fff; font-size: 22px; text-transform: uppercase}
.reservation-block .reservation-btn:before,
.reservation-block .reservation-btn:after {position: absolute; content: "";  background:#fff; transition:all 350ms ease-in-out}
.reservation-block .reservation-btn:before {right:-16px;  bottom:0px; height:24px; width: 2px}
.reservation-block .reservation-btn:after {right: -16px; bottom:0px;  width:30%;  height:2px}
.reservation-block .reservation-btn span:before,
.reservation-block .reservation-btn span:after {position: absolute; content: "";  background: #fff; transition: all 350ms ease-in-out}
.reservation-block .reservation-btn span:before {left:-32px; top:-8px;  width:2px; height:24px}
.reservation-block .reservation-btn span:after {left:-32px;  top: -8px; width:30%; height: 2px;}

/*
.reservation-block .reservation-btn:hover:before {height:54px}
.reservation-block .reservation-btn:hover:after {width:162px}
.reservation-block .reservation-btn span:hover:before {height: 54px;}
.reservation-block .reservation-btn span:hover:after {width:162px}
*/



/* --------------------- Responsive Css Start --------------------- */	
@media only screen and (max-width: 1600px) {
	.menu-area #menu{padding-top:0px;}
	.menu-area #menu li{padding-bottom: 24px;}
	.menu-area .menu-bottom{bottom: 20px;}
	.home .reservation-block {right: 50px;}
}

@media only screen and (max-width: 1023px) {
	.menu-area #menu li a{font-size:22px;}
	.menu-area .reservation-block{margin:115px 0 0;}
}
		
@media only screen and (max-width: 767px) {
	 header {padding:0 15px}
	.brand {top:20px;}
	.logo-class {max-width:130px}
     header .hamburger {right:10px}
    .menu-area #menu{padding-top: 160px; background-image:none; background-color:#000;}
    .menu-area #menu li{padding-bottom:25px}
    .menu-area #menu li a{font-size:24px;}
    .menu-area .menu-bottom{bottom:0}
    .menu-area .reservation-block{margin:24px 0 0; display:none;}
    .menu-area .menu-line{width:100%;}	
	.image-banner {height:100vh; padding:0!important; margin:0!important}
	.brickred{width:100%; height:33.33vh!important; display:flex}
	.brickred:nth-child(1) .align-middle-center{top:95%!important} 
	.brickred:nth-child(3) .align-middle-center{top:5%!important} 
    .brickred .blockred img{opacity:0!important; display:none}
    .reservation-block {bottom: 20px; right:30px}
    .reservation-block .reservation-btn {width: 96px; height: 28px; line-height: 28px;}
    .reservation-block .reservation-btn span {font-size:16px}
    .reservation-block .reservation-btn:hover:before {height:42px}
    .reservation-block .reservation-btn:hover:after {width:126px}
    .reservation-block .reservation-btn span:hover:before {height:44px}
    .reservation-block .reservation-btn span:hover:after {width:128px}
  }
  
  @media only screen and (max-width:600px){
.main-button{top:47%;left:50%}
.main-button a{line-height:35px}
.main-button::before,.main-button::after{right:0;bottom:0}
.main-button::before{height:100%}
.main-button::after{width:100%}.main-button span::before,.main-button span::after{left:0;top:0}.main-button span::before{height:100%}
.main-button span::after{width:100%}.main-button:hover::before{height:100%}.main-button:hover::after{width:100%}
}

@media(min-width:768px){.main-button span:hover::before{height:46px}.main-button span:hover::after{width:232px}}



/* Loader Animation */
@keyframes rotateLoader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes rotateLoader {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
