@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@font-face {
    font-family:'Quentin';
    src: url('Quentin.eot');
	src: url('https://wp.localserverweb.com/creperiecila/wp-content/themes/creperiecila-child/assets/font/Quentin.eot?#iefix') format('embedded-opentype'),
		url('https://wp.localserverweb.com/creperiecila/wp-content/themes/creperiecila-child/assets/font/Quentin.woff2') format('woff2'),
		url('https://wp.localserverweb.com/creperiecila/wp-content/themes/creperiecila-child/assets/font/Quentin.woff') format('woff'),
		url('https://wp.localserverweb.com/creperiecila/wp-content/themes/creperiecila-child/assets/font/Quentin.svg#Quentin') format('svg');
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    unicode-range: U+0020-00FD;
}


@font-face {
	font-family:'Arthines';
	src:url(../font/Arthines.otf) 
	
	}
	



.open{font-family: 'Open Sans', sans-serif;}

ul{padding:0;}
li{list-style: none;}
.rob{
font-family: 'Roboto', sans-serif;
}


p {
	font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    color: #6f6f6f;
    line-height: 29px;
}
.prettyprint {
	color: #fff;
	background: red;
	width: 100%;
	padding: 10px;
	display: block;
	font-size: 12px;
	border-radius: 10px;
}
.error {
	font-size:14px;
	color:red;
	clear:both;
	display:block;
}
body {
	font-family: 'Ubuntu', sans-serif;
	overflow-x:hidden;
}

a {
	cursor: pointer;
}

a:hover{text-decoration: none;}
.mt-0 {
	margin-top:0px;
}
.mt-9 {
	margin-top:9px;
}
.mt-10 {
	margin-top:10px;
}
.mt-15 {
	margin-top:15px;
}
.mt-20 {
	margin-top:20px;
}
.mt-30 {
	margin-top:30px;
}
.mt-40 {
	margin-top:40px;
}
.mt-50 {
	margin-top:50px;
}
.mt-60 {
	margin-top:60px;
}
.mt-70 {
	margin-top:70px;
}
.mt-80 {
	margin-top:80px;
}
.mb-10 {
	margin-bottom:10px;
}
.mb-20 {
	margin-bottom:20px;
}
.mb-30 {
	margin-bottom:30px;
}
.mb-40 {
	margin-bottom:40px;
}
.mb-50 {
	margin-bottom:50px;
}
.mb-60 {
	margin-bottom:60px;
}
.mb-70 {
	margin-bottom:70px;
}
.mb-80 {
	margin-bottom:80px;
}




  .main-header-cls {
	position: absolute;
	top: 0;
	margin: 20px 0 0 0;
	z-index: 99;
	left: 0;
	padding: 0 35px;
	right: 0;
}
.main-header-cls .header-lftcls {
}

.darkHeader .navigation nav li a {
	color: #545454;
}

.darkHeader .header-contact-btn {
    display: inline-block;
    margin: 0 50px 0 0px;
    float: right;
    position: relative;
    top: -15px !important;
}




.darkHeader .number-detail ul li a {
	font-weight: 500;
	color: #545454;
}
.darkHeader .header-logo-cls {
	background: white;
	padding: 4px;
}
.darkHeader {
	padding: 35px 0 1px 0 !important;
	position: fixed !important;
    background: #ffffff;
    transition: all 0.7s;
    top: 0;
    transform: translateY(0);
    -webkit-transition: all 0.7s;
    float: left;
    z-index: 9999 !important;
    animation: moveInRight 1s ease-out;
    width: 100% !important;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(0, 0%, 0);
    -webkit-transition: height 0.3s;
    -moz-transition: height 0.3s;box-shadow: 0px 8px 52px 6px rgb(88 90 88 / 10%);
    transition: height 0.3s;
}
.darkHeader .header-bottom-bar {
	padding: 0px 0;
}
.darkHeader .header-bottom {
	padding: 9px 0 0 0;
	box-shadow: 0px 8px 52px 6px rgb(88 90 88 / 10%);
}
.darkHeader .header-topbar .social-links ul li a {
	font-size: 15px;
}
.darkHeader .header-topbar {
	padding: 0px 0 0px 0;
}
.darkHeader .header-bottom .header-navigation .box-body p {
	font-size: 15px;
}
.darkHeader .header-bottom .header-navigation nav ul li a {
	padding: 15px 15px 15px 15px;
	font-size: 16px;
}
.darkHeader .header-bottom .header-logo img {
	max-width: 90px;
	top: -5px;
}
.darkHeader .logo img {
	max-width: 115px;
}
.darkHeader .main-header-cls .header-lftcls {
	position: relative;
	top: 11px;
}
.darkHeader .header-ryt-cls nav ul li a {
	padding: 34px 11px;
}
.darkHeader .sub-menu li a {
	padding:17px 11px !important;
}
.darkHeader .header-ryt-cls nav ul li a {
}
.darkHeader .header-navigation .logo-header img {
	max-width: 150px;
}
.darkHeader .main-header-cls {
	background: #415d4f;
	margin: 0;
	padding: 0px 30px 0px 30px;
}


	/*menu dropdown css*/

	

	

.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.9);
	z-index: -1;
	opacity: 0;
	transition: 1s all;
}
.navbar {
	align-items: center;
	float: right;
	margin-bottom: 0;
	position: relative;
	background-color: transparent;
}
.navbar-logo {
	color: #ff3f34;
	text-decoration: none;
	font-size: 25px;
	padding: 0px 20px;
}
.navbar-links {
	list-style-type: none;
	display: flex;
}
.navbar-links li a {
	display: block;
	text-decoration: none;
	color: #444;
	padding-top: 27px;
	padding-bottom: 15px;
	font-weight: 700;
	transition: 0.4s all;
}
.navbar-links li.navbar-dropdown {
	position: relative;
}
.navbar-links li.navbar-dropdown:hover .dropdown {
	visibility: visible;
	opacity: 1;
	transform: translateY(0px);
}
.navbar-links li.navbar-dropdown .dropdown {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	padding: 20px 0;
	top: 100%;
	transform: translateY(50px);
	left: 0;
	width: 250px;
	background-color: #fff;
	box-shadow: 0px 10px 10px 3px rgba(0, 0, 0, 0.3);
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	z-index: 111;
	transition: 0.4s all;
}
.navbar-links li.navbar-dropdown .dropdown li {
	display: block;
	padding-left: 0px;
	padding-right: 0px;
}
.navbar-links li.navbar-dropdown .dropdown a {
	padding-top: 10px;
	padding-left:24px;
	padding-right:24px;
	padding-bottom: 10px;
	color: #4e4e4e;
	text-transform: capitalize;
	font-weight: 500;
}
.navbar-dropdown .dropdown a:hover {
	padding-left:30px !important;
	color: #f8931f !important;
}
.navbar-links li a:hover {
	color: #f0d105;
}
.header {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100vw;
	height: 90vh;
	/* background-color: #f00; */

  background-image: url("https://lorempixel.com/1366/698/food/");
	background-size: cover;
}
.header-inner {
	text-align: center;
	color: #ff3f34;
	text-shadow: 0px 10px 10px rgba(0, 0, 0, .8);
}
.header-inner h1 {
	font-family: "Great Vibes", cursive;
	font-size: 130px;
}
.header-inner form input[type="search"] {
	position: relative;
	width: 500px;
	border: none;
	padding: 15px;
	border-radius: 27px;
	box-shadow: 0px 0px 15px 3px rgba(0, 0, 0, 0.3);
	z-index: 11;
}
.header-inner form input[type="search"]:focus {
	outline: none;
}
.header-inner form input[type="search"]:focus + div {
	z-index: 1;
	opacity: 1;
}



::placeholder {
 color: #666;
 font-weight: 400;
}
/*menu dropdown css*/

	

	

	
header{transition: top .2s ease-in-out;}
.main-home-header{padding: 0px 0 0 0;
    z-index: 9;
    position: absolute;
    top: 0;background: rgba(25,25,25,.3);
    box-shadow: 0px 10px 60px rgb(0 0 0 / 0%);
    width: 100%;}
.main-home-header .header-inner-cls{}
.banner-img-txt-nw{padding: 0 0 0 80px;}
.banner .banner-text{margin: 260px 0 0 0;}
.title{position: relative;}

.head-icon{margin-bottom: 35px;position: relative;
    margin-top: 15px;}


.text-center.title h6::before{display: none;}


.title h6{font-size: 16px;    z-index: 9;
    color: #3B5774;text-transform: uppercase;
    padding: 0 0 0 18px;

    font-weight: 500;
    line-height: 26px;position: relative;
    text-transform: uppercase;}


	.title h6::before{content:'';position: absolute;
		width: 8px;
		height: 8px;
		background: #062b50;
		border-radius: 50%;
		top: 9px;
		left: 0;
	}





.title h2{color: #464646;
    font-size: 50px;
    /* font-weight: 800; */
    text-transform: capitalize;
    z-index: 9;
    position: relative;
    font-family: 'Arthines';
    line-height: 48px;
    letter-spacing: 1px;}
.title span{font-family: 'Quentin';
    color: #dddddd;
    -webkit-text-stroke-color: #3B5774;
    opacity: 1;
    font-size: 100px;
    line-height: 130px;
    position: absolute;
    top: -73px;
  
    text-transform: capitalize;}

.title .watermark{font-family: 'Quentin';
    color:#f2f2f2;
    -webkit-text-stroke-color: #3B5774;
    opacity: 1;
    font-size: 100px;
    line-height: 130px;
    position: absolute;
    top: -35px;
    
    text-transform: capitalize;}

.opacity-one-cls{    opacity: 0.2 !important;}


	.center-watermark{left: 0;
		right: 0;}

.banner .banner-text p{font-size: 21px;
    color: #062b50;
    line-height: 30px;}


	



	.header-custom-container{padding: 0 80px;}





/*video icon css*/
	  
	  .video-play-button {
		z-index: 10;
    /* top: 50%; */
    /* left: 50%; */
    /* transform: translateX(-50%) translateY(-50%); */
    box-sizing: content-box;
    display: inline-block;
    width: 32px;
    height: 44px;
    /* background: #fa183d; */
    border-radius: 50%;
    padding: 18px 20px 18px 28px;
	  }
	  
	  .video-play-button:before {
		content: "";
    position: absolute;
    z-index: 0;
    left: 35px;
    top: 35px;
    display: block;
    width: 61px;
    height: 61px;
    background: #062b50;
    border-radius: 50%;
    animation: pulse-border 1500ms ease-out infinite;
	  }
	  
	  .video-play-button:after {
		content: "";
		position: absolute;
		z-index: 1;
		left: 0;
		top: 0;
		display: block;
		width: 70px;
		height: 70px;
		background: #062b50;
		border-radius: 50%;
		transition: all 200ms;
	  }
	  
	  .video-play-button:hover:after {
		background-color: darken(#fa183d, 10%);
	  }
	  
	  .video-play-button img {
		position: relative;
		z-index: 3;
		max-width: 100%;
		width: auto;
		height: auto;
	  }
	  
	  .video-play-button span {
		display: block;
    position: relative;
    z-index: 3;
    width: 0;
    top: 4px;
    left: 1px;
    height: 0;
    border-left: 18px solid #fff;
    border-top: 12px solid transparent;
    border-bottom: 13px solid transparent;
	  }
	  
	  @keyframes pulse-border {
		0% {
		  transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
		  opacity: 1;
		}
		100% {
		  transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
		  opacity: 0;
		}
	  }
	  
	  
	  
	  .video-overlay {
		position: fixed;
		z-index: -1;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(0,0,0,0.80);
		opacity: 0;
		transition: all ease 500ms;
	  }
	  
	  .video-overlay.open {
		position: fixed;
		z-index: 1000;
		opacity: 1;
	  }
	  
	  .video-overlay-close {
		position: absolute;
		z-index: 1000;
		top: 15px;
		right: 20px;
		font-size: 36px;
		line-height: 1;
		font-weight: 400;
		color: #fff;
		text-decoration: none;
		cursor: pointer;
		transition: all 200ms;
	  }
	  
	  .video-overlay-close:hover {
		color: #fa183d;
	  }
	  
	  .video-overlay iframe {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		/* width: 90%; */
		/* height: auto; */
		box-shadow: 0 0 15px rgba(0,0,0,0.75);
	  }


/*video icon css*/










  /* button hover css */
  
  
  .btn, .btn2, .btn3, .btn4, .btn5, .btn6, .btn7, .btn10{
	padding: 15px 100px;
	margin:10px 4px;
	color: #fff;
	font-family: sans-serif;
	text-transform: uppercase;
	text-align: center;
	position: relative;
	text-decoration: none;
	display:inline-block;
	
  }
  
  .btn::before {
	content: '';
	position: absolute;
	bottom: 50%;
	left: 0px;
	width: 100%;
	height: 1px;
	background: #6098FF;
	display: block;
	-webkit-transform-origin: left top;
	-ms-transform-origin: left top;
	transform-origin: left top;
	-webkit-transform: scale(0, 1);
	-ms-transform: scale(0, 1);
	transform: scale(0, 1);
	-webkit-transition: transform 0.4s cubic-bezier(1, 0, 0, 1);
	transition: transform 0.4s cubic-bezier(1, 0, 0, 1)
  }
  
  .btn:hover::before {
	-webkit-transform-origin: right top;
	-ms-transform-origin: right top;
	transform-origin: right top;
	-webkit-transform: scale(1, 1);
	-ms-transform: scale(1, 1);
	transform: scale(1, 1)
  }
  
  /* button7 */
  
  
  .btn7 {
	  box-shadow: inset 000px 0px 0px 0px #6098FF;
	-webkit-transition: all 0.6s cubic-bezier(.9, .24, .40, 1);
	transition: all 0.6s cubic-bezier(.9, .24, .40, 1)
  }
  
  .btn7::before {
	  content: '';
	  width: 100%;
	  height: 0%;
	  display: block;
	  background: #80ffd3;
	  position: absolute;
	  left: 0%;
	  opacity: 0;
	  top: 0;
	  z-index: -1;
	  -webkit-transition: height .4s cubic-bezier(0.9, 1, 0.32, 1), opacity .1s ease;
	  transition: height .4s cubic-bezier(0.9, 1, 0.32, 1), opacity .1s ease;
	
  }
  
  .btn7:hover::before {
	  opacity: 1;
	  height: 100%;
  }
  
  .btn7:hover {
	  box-shadow: inset 00px 100px 0px 0px #6098FF;
	  color: #ffffff;
  }
  .bar-anchor{
	padding: 20px 10px;
	margin:10px 4px;
	color: #fff;
	font-family: sans-serif;
	text-transform: uppercase;
	text-align: center;
	position: relative;
	text-decoration: none;
	display:inline-block;
	 overflow:hidden;
  /*    border:1px solid #6098FF; */
  }
  .bar-anchor span{
	background:#00002E;
	width:100%;
	position:relative;
	padding:10px 70px;
	 -moz-transition: all .65s cubic-bezier(0.77, 0, 0.175, 1);
	-o-transition: all .65s cubic-bezier(0.77, 0, 0.175, 1);
	-webkit-transition: all .65s cubic-bezier(0.77, 0, 0.175, 1);
	transition: all .65s cubic-bezier(0.77, 0, 0.175, 1);
  /*   border:1px solid #6098FF;  */
  }
  .transition-bar{
	  position: absolute;
	  top: 0;
	  left: 0%;
	  width: 0;
	  height: 100%;
	  background: #80ffd3;
	  z-index:-1;
  /*     -ms-transform: skewX(-20deg); 
	  -webkit-transform: skewX(-20deg); 
	  transform: skewX(-20deg); */
  }
  .bar-anchor:hover span{
	color: #80ffd3!important;
  }
  .bar-anchor:hover .transition-bar{
	width:120%;
	left:110%;
	-moz-transition: all .65s cubic-bezier(0.77, 0, 0.175, 1);
	-o-transition: all .65s cubic-bezier(0.77, 0, 0.175, 1);
	-webkit-transition: all .65s cubic-bezier(0.77, 0, 0.175, 1);
	transition: all .65s cubic-bezier(0.77, 0, 0.175, 1);
  }
    /* button hover css */

	.nav .open > a, 
	.nav .open > a:hover, 
	.nav .open > a:focus {background-color: transparent;}
	
	/*-------------------------------*/
	/*           Wrappers            */
	/*-------------------------------*/
	
	#wrapper {
		padding-left: 0;
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		-o-transition: all 0.5s ease;
		transition: all 0.5s ease;
	}
	
	#wrapper.toggled {
		padding-left: 220px;
	}
	
	#sidebar-wrapper {
		z-index: 1000;
		left: 220px;
		width: 0;
		height: 100%;
		margin-left: -220px;
		overflow-y: auto;
		overflow-x: hidden;
		background: #1a1a1a;
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		-o-transition: all 0.5s ease;
		transition: all 0.5s ease;
	}
	
	#sidebar-wrapper::-webkit-scrollbar {
	  display: none;
	}
	
	#wrapper.toggled #sidebar-wrapper {
		width: 220px;
	}
	
	#page-content-wrapper {
		width: 100%;
		padding-top: 70px;
	}
	
	#wrapper.toggled #page-content-wrapper {
		position: absolute;
		margin-right: -220px;
	}
	
	/*-------------------------------*/
	/*     Sidebar nav styles        */
	/*-------------------------------*/
	.navbar {
	  padding: 0;
	}
	
	.sidebar-nav {
		position: absolute;
		top: 0;
		width: 220px;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
	.sidebar-nav li {
		position: relative; 
		line-height: 20px;
		display: inline-block;
		width: 100%;
	}
	
	.sidebar-nav li:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		height: 100%;
		width: 3px;
		background-color: #1c1c1c;
		-webkit-transition: width .2s ease-in;
		  -moz-transition:  width .2s ease-in;
		   -ms-transition:  width .2s ease-in;
				transition: width .2s ease-in;
	
	}
	.sidebar-nav li:hover{
	  background: skyblue !important;
	  border-radius: 10px;
	  margin-left: 10px;
	  margin-right: 10px;
	}
	.sidebar-nav li:hover:before,
	.sidebar-nav li.open:hover:before {
		width: 100%;
		-webkit-transition: width .2s ease-in;
		  -moz-transition:  width .2s ease-in;
		   -ms-transition:  width .2s ease-in;
				transition: width .2s ease-in;
	
	}
	
	.sidebar-nav li a {
		display: block;
		color: #ddd;
		text-decoration: none;
		padding: 10px 15px 10px 30px;    
	}
	
	.sidebar-nav li a:hover,
	.sidebar-nav li a:active,
	.sidebar-nav li a:focus,
	.sidebar-nav li.open a:hover,
	.sidebar-nav li.open a:active,
	.sidebar-nav li.open a:focus{
		color: #fff;
		text-decoration: none;
		background-color: transparent;
	}
	.sidebar-header {
		text-align: center;
		font-size: 20px;
		position: relative;
		width: 100%;
		display: inline-block;
	}
	.sidebar-brand {
		height: 65px;
		position: relative;
		background:#212531;
		background: linear-gradient(to right bottom, #2f3441 50%, #212531 50%);
	   padding-top: 1em;
	}
	.sidebar-brand a {
		color: #ddd;
	}
	.sidebar-brand a:hover {
		color: #fff;
		text-decoration: none;
	}
	.dropdown-header {
		text-align: center;
		font-size: 1em;
		color: #ddd;
		background:#212531;
		background: linear-gradient(to right bottom, #2f3441 50%, #212531 50%);
	}
	.sidebar-nav .dropdown-menu {
		position: relative;
		width: 100%;
		padding: 0;
		margin: 0;
		border-radius: 0;
		border: none;
		background-color: #222;
		box-shadow: none;
	}
	.dropdown-menu.show {
		top: 0;
	}
	/*Fontawesome icons*/
	.nav.sidebar-nav li a::before {
		font-family: fontawesome;
		content: "\f12e";
		vertical-align: baseline;
		display: inline-block;
		padding-right: 5px;
	}
	a[href*="#home"]::before {
	  content: "\f015" !important;
	}
	a[href*="#about"]::before {
	  content: "\f129" !important;
	}
	a[href*="#events"]::before {
	  content: "\f073" !important;
	}
	a[href*="#events"]::before {
	  content: "\f073" !important;
	}
	a[href*="#team"]::before {
	  content: "\f0c0" !important;
	}
	a[href*="#works"]::before {
	  content: "\f0b1" !important;
	}
	a[href*="#pictures"]::before {
	  content: "\f03e" !important;
	}
	a[href*="#videos"]::before {
	  content: "\f03d" !important;
	}
	a[href*="#books"]::before {
	  content: "\f02d" !important;
	}
	a[href*="#art"]::before {
	  content: "\f1fc" !important;
	}
	a[href*="#awards"]::before {
	  content: "\f02e" !important;
	}
	a[href*="#services"]::before {
	  content: "\f013" !important;
	}
	a[href*="#contact"]::before {
	  content: "\f086" !important;
	}
	a[href*="#followme"]::before {
	  content: "\f099" !important;
	  color: #0084b4;
	}
	/*-------------------------------*/
	/*       Hamburger-Cross         */
	/*-------------------------------*/
	
	.hamburger {
	  position: fixed;
	  top: 20px;  
	  z-index: 999;
	  display: block;
	  width: 32px;
	  height: 32px;
	  margin-left: 15px;
	  background: transparent;
	  border: none;
	}
	.hamburger:hover,
	.hamburger:focus,
	.hamburger:active {
	  outline: none;
	}
	.hamburger.is-closed:before {
	  content: '';
	  display: block;
	  width: 100px;
	  font-size: 14px;
	  color: #fff;
	  line-height: 32px;
	  text-align: center;
	  opacity: 0;
	  -webkit-transform: translate3d(0,0,0);
	  -webkit-transition: all .35s ease-in-out;
	}
	.hamburger.is-closed:hover:before {
	  opacity: 1;
	  display: block;
	  -webkit-transform: translate3d(-100px,0,0);
	  -webkit-transition: all .35s ease-in-out;
	}
	
	.hamburger.is-closed .hamb-top,
	.hamburger.is-closed .hamb-middle,
	.hamburger.is-closed .hamb-bottom,
	.hamburger.is-open .hamb-top,
	.hamburger.is-open .hamb-middle,
	.hamburger.is-open .hamb-bottom {
	  position: absolute;
	  left: 0;
	  height: 4px;
	  width: 100%;
	}
	.hamburger.is-closed .hamb-top,
	.hamburger.is-closed .hamb-middle,
	.hamburger.is-closed .hamb-bottom {
	  background-color:#ffffff;
	}
	.hamburger.is-closed .hamb-top { 
	  top: 5px; 
	  -webkit-transition: all .35s ease-in-out;
	}
	.hamburger.is-closed .hamb-middle {
	  top: 50%;
	  margin-top: -2px;
	}
	.hamburger.is-closed .hamb-bottom {
	  bottom: 5px;  
	  -webkit-transition: all .35s ease-in-out;
	}
	
	.hamburger.is-closed:hover .hamb-top {
	  top: 0;
	  -webkit-transition: all .35s ease-in-out;
	}
	.hamburger.is-closed:hover .hamb-bottom {
	  bottom: 0;
	  -webkit-transition: all .35s ease-in-out;
	}
	.hamburger.is-open .hamb-top,
	.hamburger.is-open .hamb-middle,
	.hamburger.is-open .hamb-bottom {
	  background-color: #1a1a1a;
	}
	.hamburger.is-open .hamb-top,
	.hamburger.is-open .hamb-bottom {
	  top: 50%;
	  margin-top: -2px;  
	}
	.hamburger.is-open .hamb-top { 
	  -webkit-transform: rotate(45deg);
	  -webkit-transition: -webkit-transform .2s cubic-bezier(.73,1,.28,.08);
	}
	.hamburger.is-open .hamb-middle { display: none; }
	.hamburger.is-open .hamb-bottom {
	  -webkit-transform: rotate(-45deg);
	  -webkit-transition: -webkit-transform .2s cubic-bezier(.73,1,.28,.08);
	}
	.hamburger.is-open:before {
	  content: '';
	  display: block;
	  width: 100px;
	  font-size: 14px;
	  color: #fff;
	  line-height: 32px;
	  text-align: center;
	  opacity: 0;
	  -webkit-transform: translate3d(0,0,0);
	  -webkit-transition: all .35s ease-in-out;
	}
	.hamburger.is-open:hover:before {
	  opacity: 1;
	  display: block;
	  -webkit-transform: translate3d(-100px,0,0);
	  -webkit-transition: all .35s ease-in-out;
	}
	
	/*-------------------------------*/
	/*            Overlay            */
	/*-------------------------------*/
	
	


	.logo-area{}
	.logo-area a{}
	.logo-area img{width: 100%;    margin-top: 17px;
		max-width: 85px;}
	.main-nav{}
	.main-nav ul{}
	.main-nav ul li{display: inline-block;}
	.main-nav ul li a{    padding: 35px 10px;
		font-size: 15px;
		font-weight: 700;
		letter-spacing: .3px;
		text-decoration: none;    color: white;
		text-transform: uppercase;
		display: inline-block;
		font-family: 'Open Sans', sans-serif;}
	.main-nav ul .active{}
	.main-nav ul .table-btn{}
	.main-nav ul .table-btn a{border: 1px solid #6eab42;
		padding: 9px 20px;}
	.header-toggle{}
	.header-toggle .sidenav{}
	.header-toggle .sidenav .side-bar{}
	.header-toggle .sidenav .side-bar .sidenav-txt-top{}
	.sidenav-social-icons{}
	.sidenav-social-icons ul{}
	.sidenav-social-icons ul li{}
	.sidenav-social-icons ul li a{}
	.sidenav-social-icons ul li a .fa{}





	.banner{position: relative;}
	.banner .main-banner{}
	.banner .main-banner .banner-content-cls{height: 100vh;
	}
	.banner .main-banner .banner-content-cls figcaption{left: 0;
		top: 0;
		bottom: 0;
		text-align: center;
		position: absolute;
		bottom: 0;
		right: 0;
		z-index: 99;
		width: 100%;
		padding: 0 15px 0 53px;
		align-items: center;
		display: flex;
		height: 100%;
		vertical-align: middle;
		justify-content: center;
		top: 0;
		
		flex-flow: column;}
	.banner .main-banner .banner-content-cls figcaption h3{color: white;
		font-size: 58px;
		font-family: 'Arthines';}
	.banner .main-banner .banner-content-cls figcaption p{      margin-top: 18px;  color: white;
		font-size: 18px;}
	.banner .main-banner .banner-content-cls figcaption .main-button{}
	.banner .main-banner .banner-content-cls figcaption .main-button a{ text-transform: capitalize;
		background: #6eab42;
		padding: 11px 35px;
		font-size: 15px;
		font-weight: 600;
		color: white;
		line-height: normal;}



		.main-button a{font-family: 'Open Sans', sans-serif;}

		.welcome-area{}
		.welcome-area .wel-inner{max-width: 1350px;    text-align: center;
			width: 100%;padding: 70px 0 90px 0;
			margin: auto;}
		.welcome-area .wel-inner .row{margin:0;}
		.welcome-area .wel-inner .meals-area{margin-top: 40px;
		}
		.welcome-area .wel-inner .meals-area .meals-detail{}
		.welcome-area .wel-inner .meals-area .meals-detail .meals-img{}
		.welcome-area .wel-inner .meals-area .meals-detail .meals-img img{    width: 100%;
			object-fit: cover;}
		.welcome-area .wel-inner .meals-area .meals-detail .meals-des{padding: 15px 10px 0 10px;}
			
			
		.welcome-area .wel-inner .meals-area .meals-detail .meals-des h3{font-size: 27px;
			font-family: 'Arthines';
			text-transform: capitalize;
			letter-spacing: 1px;
			color: #6eab42;}
		.welcome-area .wel-inner .meals-area .meals-detail .meals-des p{font-size: 18px;
			margin: 24px 0;}
		.welcome-area .wel-inner .meals-area .meals-detail .meals-des .main-btn{}
		.welcome-area .wel-inner .meals-area .meals-detail .meals-des .main-btn a{}


.main-btn{}
.main-btn a{	text-transform: capitalize;
	background: #6eab42;
	padding: 11px 35px;
	font-size: 15px;
	font-weight: 600;
	color: white;
	line-height: normal;
}
	
.special-area{}
.special-overlay{    background: #517f38de;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.special-inner{position: relative;
    padding: 80px 0;
    text-align: center;}


	.special-inner::before{content: '';
		background: white;
		position: absolute;
		width: 50p;
		width: 60px;
		height: 60px;
		left: 0;
		right: 0;
		top: -27px;
		z-index: 9;
		text-align: center;
		margin: auto;
		border-radius: 50%;}


		
	.special-inner::after{content: '';
		background: white;
		position: absolute;
		width: 50p;
		width: 60px;
		height: 60px;
		left: 0;
		right: 0;
		bottom: -27px;
		z-index: 9;
		text-align: center;
		margin: auto;
		border-radius: 50%;}

.special-inner .head-icon{    position: relative;}
.special-area .menu-area{position: relative;
    background: white;
    max-width: 950px;
    padding: 70px 0;
    margin: auto;}
.special-area .menu-area .price{    font-family: 'Arthines';
    line-height: 48px;
    letter-spacing: 1px;
    font-size: 35px;}
.special-area .menu-area .menu-name{font-family: 'Arthines';
    /* line-height: 48px; */
    letter-spacing: 1px;
    font-size: 29px;
    color: #6eab42;
    margin: 17px 0;}
.special-area .menu-area p{font-size: 18px;}
.special-area .menu-area .line-img{}

.white-text{color:white !important;}
.menu-specail-cls{margin-bottom: 30px;}

.menu-tab-cls{}
.menu-tab-cls .menu-tab-inner{  }
.menu-tab-cls .menu-tab-inner p{}



#tile-1 .tab-pane
{
  padding:15px;
  height:80px;
}
#tile-1 .nav-tabs
{
  position:relative;
  border:none!important;
  background-color:#fff;
/*   box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2); */
  border-radius:6px;
}
#tile-1 .nav-tabs li
{
  margin:0px!important;
}
#tile-1 .nav-tabs li a
{
  position:relative;
  margin-right:0px!important;
  padding: 20px 40px!important;
  font-size:16px;
  border:none!important;
  color:#333;
}
#tile-1 .nav-tabs a:hover
{
  background-color:#fff!important;
  border:none;
}
#tile-1 .slider
{
  display:inline-block;
  width:30px;
  height:4px;
  border-radius:3px;
  background-color:#39bcd3;
  position:absolute;
  z-index:1200;
  bottom:0;
  transition:all .4s linear;
  
}
#tile-1 .nav-tabs .active
{
  background-color:transparent!important;
  border:none!important;
  color:#39bcd3!important;
}



.guest-area{}
.guest-area .guest-inner{position: relative;
    padding: 80px 0;
    text-align: center;}

	.guest-area .guest-inner #owl-demo15{padding: 0 90px;}


	.guest-box{    background: white;
		margin: 14px;
		padding: 50px 50px;
		border-radius: 3px;}
	.guest-box .fa{    color: #6eab42;
		font-size: 45px;}
	.guest-box p{font-family: 'Arthines';
		font-size: 23px;margin: 35px 0 35px 0;
		letter-spacing: 1px;
		line-height: 33px;
	}
	.guest-box .author-img{margin: auto;
		border-radius: 50%;
		width: 100%;
		max-width: 94px;}
	.guest-box .name{font-size: 17px;
		font-weight: 600;
		color: #464646;font-family: 'Open Sans', sans-serif;
		margin: 22px 0 0 0;
		display: block;
	}
	.guest-box .Customer{color: #aaa;
		font-size: 17px;
		margin: 2px 0 0 0;}




#owl-demo15 .slick-dots{text-align: center;
    left: 0;
    right: 0;}

.slick-dots li.slick-active button:before {
    opacity: .75;
    color: black;
}
#owl-demo15 .slick-dots li{}
#owl-demo15 .slick-dots .slick-active{}
#owl-demo15 .slick-dots .slick-active button{}
.slick-dots li button:before{}


.slick-dots li button{    opacity: 1;
    background: white !important;
    width: 4px !important;
    height: 4px !important;
    border-radius: 50%;
    padding: 4px !important;}










	.menu,
	.nav-icon span {
		transition: all .3s ease-in-out
	}
	
	.menu .nav-menu li a,
	.nav-menu li a {
		line-height: 56px
	}
	
	*,
	::after,
	::before {
		margin: 0;
		padding: 0;
		box-sizing: border-box
	}
	
	.effectTab-header .caption,
	.effectTab-header .title {
		font-weight: 700;
		padding-bottom: 20px;
		position: relative;
		display: inline-block;
		color: #555;
		margin: 0 0 20px;
		text-align: center;
		text-transform: uppercase
	}
	
	.effectTab-header .title {
		font-size: 36px;
		font-family: Oswald, sans-serif
	}
	
	.effectTab-header .caption {
		font-size: 30px;
		font-family: 'Open Sans', sans-serif
	}
	
	.column-1,
	.column-10,
	.column-11,
	.column-12,
	.column-2,
	.column-3,
	.column-4,
	.column-5,
	.column-7,
	.column-8,
	.column-9 {
		float: left;
		padding: 15px
	}
	
	.effectTab-header .title::after,
	.effectTab-header .title::before {
		position: absolute;
		background: linear-gradient(to right, #ed6ea0 0, #ec8c69 100%);
		content: ""
	}
	
	.effectTab-header .title::before {
		left: 0;
		width: 156%;
		height: 3px;
		margin-left: -28%;
		bottom: -1.5px
	}
	
	.effectTab-header .title::after {
		left: 50%;
		width: 25px;
		height: 25px;
		bottom: -26px;
		margin: 0 0 0 -10px;
		-webkit-clip-path: polygon(75% 0, 75% 69%, 41% 93%, 0 68%, 0 0);
		clip-path: polygon(75% 0, 75% 69%, 41% 93%, 0 68%, 0 0)
	}
	
	



	.chef-area{}
	.chef-area .chef-inner{
	padding: 90px 0;position: relative;
		text-align: center;
		margin: auto;
	}
	.chef-area .chef-inner .chef-detail{}
	.chef-area .chef-inner .chef-detail .chef-img{width: 100%;}
	.chef-area .chef-inner .chef-detail{}
	.chef-area .chef-inner .chef-detail .icons-block{}
	.chef-area .chef-inner .chef-detail .icons-block ul{}
	.chef-area .chef-inner .chef-detail .icons-block ul li{}
	.chef-area .chef-inner .chef-detail .icons-block ul li a{}
	.chef-area .chef-inner .chef-detail .icons-block .fa{}





	
  

  /*********************** Demo - 1 *******************/

.box1 img,

.box1:after,

.box1:before {

  width: 100%;

  transition: all 0.3s ease 0s;

}

.box1 .icon,

.box2,

.box3,

.box4,

.box5 .icon li a {

  text-align: center;

}

.box10:after,

.box10:before,

.box1:after,

.box1:before,

.box2 .inner-content:after,

.box3:after,

.box3:before,

.box4:before,

.box5:after,

.box5:before,

.box6:after,

.box7:after,

.box7:before {

  content: "";

}

.box1,

.box11,

.box12,

.box13,

.box14,

.box16,

.box17,

.box18,

.box2,

.box20,

.box21,

.box3,

.box4,

.box5,

.box5 .icon li a,

.box6,

.box7,

.box8 {

  overflow: hidden;

}

.box1 .title,

.box10 .title,

.box4 .title,

.box7 .title {

  letter-spacing: 1px;

}

.box3 .post,

.box4 .post,

.box5 .post,

.box7 .post {

  font-style: italic;

}

.mt-30 {

  margin-top: 30px;

}

.mt-40 {

  margin-top: 40px;

}

.mb-30 {

  margin-bottom: 30px;

}

.box1 .icon,

.box1 .title {

  margin: 0;

  position: absolute;

}

.box1 {

  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);

  position: relative;

}

.box1:after,

.box1:before {

  height: 50%;

  background: rgba(0, 0, 0, 0.5);

  position: absolute;

  top: 0;

  left: 0;

  z-index: 1;

  transform-origin: 100% 0;

  transform: rotateZ(90deg);

}

.box1:after {

  top: auto;

  bottom: 0;

  transform-origin: 0 100%;

}

.box1:hover:after,

.box1:hover:before {

  transform: rotateZ(0);

}

.box1 img {

  height: auto;

  transform: scale(1) rotate(0);

}

.box1:hover img {

  filter: sepia(80%);

  transform: scale(1.3) rotate(10deg);

}

.box1 .title {

  font-size: 19px;

  font-weight: 600;

  color: #fff;

  text-transform: uppercase;

  text-shadow: 0 0 1px #004cbf;

  bottom: 10px;

  left: 10px;

  opacity: 0;

  z-index: 2;

  transform: scale(0);

  transition: all 0.5s ease 0.2s;

}

.box1:hover .title {

  opacity: 1;

  transform: scale(1);

}

.box1 .icon {

  padding: 7px 5px;

  list-style: none;

  background: #004cbf;

  border-radius: 0 0 0 10px;

  top: -100%;

  right: 0;

  z-index: 2;

  transition: all 0.3s ease 0.2s;

}

.box1:hover .icon {

  top: 0;

}

.box1 .icon li {

  display: block;

  margin: 10px 0;

}

.box1 .icon li a {

  display: block;

  width: 35px;

  height: 35px;

  line-height: 35px;

  border-radius: 10px;

  font-size: 18px;

  color: #fff;

  transition: all 0.3s ease 0s;

}

.box2 .icon li a,



.box4 .icon li a:hover,

.box5 .icon li a,

.box6 .icon li a {

  border-radius: 50%;

}

.box1 .icon li a:hover {

  color: #fff;

  box-shadow: 0 0 10px #000 inset, 0 0 0 3px #fff;

}

@media only screen and (max-width: 990px) {

  .box1 {

    margin-bottom: 30px;

  }

}

/*********************** Demo - 2 *******************/

.box2 {

  position: relative;

}

.box2 img {

  width: 100%;

  height: auto;

}

.box2 .box-content {

  width: 100%;

  height: 100%;

  position: absolute;

  top: 50%;

  left: 50%;

  z-index: 2;

  transform: translate(-50%, -50%);

}

.box2 .box-content:after,

.box2 .box-content:before,

.box2:after,

.box2:before {

  content: "";

  width: 80%;

  height: 80%;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%) rotate(45deg);

  transition: all 0.5s ease 0s;

}

.box2:before {

  background: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 49%, transparent 50%);

  left: -100%;

}

.box2:after {

  background: linear-gradient(45deg, transparent 49%, rgba(0, 0, 0, 0.2) 50%);

  left: 160%;

}

.box2 .box-content:after,

.box2 .box-content:before {

  width: 65%;

  height: 65%;

  background: linear-gradient(45deg, rgba(0, 0, 0, 0.3) 49%, transparent 50%);

  left: -100%;

  transition-delay: 0.1s;

}

.box1 .box-content:after {

  background: linear-gradient(45deg, transparent 49%, rgba(0, 0, 0, 0.3) 50%);

  left: 160%;

}

.box2:hover .box-content:after,

.box2:hover .box-content:before,

.box2:hover:after,

.box2:hover:before {

  left: 50%;

}

.box2 .inner-content {

  width: 50%;

  height: 50%;

  color: #fff;

  padding: 40px 0;

  position: absolute;

  top: 50%;

  left: 50%;

  z-index: 2;

  transform: translate(-50%, -50%) scale(0);

  transition: all 0.3s ease 0.2s;

}

.box2 .inner-content:after {

  width: 100%;

  height: 100%;

  background: rgba(255, 79, 79, 0.8);

  position: absolute;

  top: 50%;

  left: 50%;

  z-index: -1;

  transform: translate(-50%, -50%) rotate(45deg);

}

.box2:hover .inner-content {

  transform: translate(-50%, -50%) scale(1);

  transition: all 0.3s ease 0s;

}

.box2 .title {

  font-size: 18px;

  font-weight: 700;

  text-transform: uppercase;

  margin-bottom: 5px;

}

.box2 .post {

  display: block;

  font-size: 14px;

  text-transform: capitalize;

  margin-bottom: 7px;

}

.box10 .title,

.box11 .title,

.box4 .title,

.box5 .title,

.box6 .box-content,

.box7 .title {

  text-transform: uppercase;

}

.box2 .icon {

  padding: 0;

  margin: 0;

  list-style: none;

  transform: rotateY(360deg) scale(0);

  transition: all 0.3s ease 0s;

}

.box2:hover .icon {

  transform: rotateY(0) scale(1);

}

.box2 .icon li {

  display: inline-block;

  margin: 0 3px;

}

.box2 .icon li a {

  display: block;

  width: 35px;

  height: 35px;

  line-height: 35px;

  background: #fff;

  font-size: 16px;

  color: #505050;

  transition: all 0.3s ease 0s;

}

.box2 .icon li a:hover {

  box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.5);

  background: #fff;

  color: #ff4f4f;

}

@media only screen and (max-width: 990px) {

  .box2 {

    margin-bottom: 30px;

  }

}

@media only screen and (max-width: 320px) {

  .box2 .inner-content {

    padding: 25px 0;

  }

  .box2 .title {

    font-size: 16px;

  }

}

/*********************** Demo - 3 *******************/

.box3 {

  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);

  position: relative;

}

.box3 .box-content,

.box3:after,

.box3:before {

  position: absolute;

  left: 7%;

  right: 7%;

  transition: all 0.3s;

}

.box3:after,

.box3:before {

  display: block;

  background: rgba(0, 0, 0, 0.3);

      top: 6%;

    bottom: 12%;

  z-index: 1;

  transform: scale(0, 1);

}

.box3:after {

  top:6.8%;

    bottom: 12.8%;

  transform: scale(1, 0);

}

.box3:hover:after,

.box3:hover:before {

  transform: scale(1);

  animation: animate 1.5s;

}

.box3:hover:before {

  border-top: 3px solid #fff;

  border-bottom: 3px solid #fff;

}

.box:hover:after {

  border-left: 3px solid #fff;

  border-right: 3px solid #fff;

}

.box img {

  width: 100%;

  height: auto;

  transition: all 0.3s;

}

.box3:hover img {

  transform: scale(1.2);

  filter: blur(5px);

  -moz-filter: blur(5px);

  -webkit-filter: blur(5px);

}

.box3 .box-content {

  padding: 30px 10px;

  top: 0;

  bottom:0;

  opacity: 0;

  z-index: 2;justify-content: center;

    align-items: center;

    display: flex;

    height: 100%;

    vertical-align: middle;

}

.box3:hover .box-content {

  box-shadow: 0 0 0 35px rgba(255, 255, 255, 0.3);

  opacity: 1;

  transition: all 0.3s;

}

.box3 .title {

  font-size: 24px;

  font-weight: 600;

  color: #88c425;

  margin: 0 0 5px;

}

.box3 .post {

  display: block;

  margin: 0 0 5px;

  font-size: 14px;

  color: rgba(255, 255, 255, 0.8);

}

.box3 .description {

  font-size: 14px;

  color: #fff;

  margin: 0 0 20px;

}

.box3 .icon {

  padding: 0;

  margin: 0;

  list-style: none;

}

.box3 .icon li {

  display: inline-block;

  margin: 0 10px 0 0;

}

.box3 .icon li a {

  display: block;



  line-height: 30px;

  color: #fff;

  background: #88c425;

  transition: all 0.5s;

}



@keyframes animate {

  0%,

  100% {

    opacity: 1;

  }

}

@keyframes animate-hover {

  0% {

    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3);

  }

  50% {

    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.3);

  }

  100% {

    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3);

  }

}

.box10,

.box11,

.box12,

.box14,

.box4,

.box5,

.box6,

.box7,

.box9 {

  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);

}

@media only screen and (max-width: 990px) {

  .box3 {

    margin-bottom: 30px;

  }

  .box3 .box-content {

    padding: 10px;

  }

  .box3 .description {

    margin-bottom: 10px;

  }

}

@media only screen and (max-width: 479px) {

  .box3 .title {

    margin: 0;

  }

}



/*********************** Demo - 4 *******************/

.box4 {

  position: relative;

}

.box4:before {

  width: 0;

  height: 200%;

  background: rgba(0, 0, 0, 0.5);

  position: absolute;

  top: 0;

  left: -250px;

  bottom: 0;

  transform: skewX(-36deg);

  transition: all 0.5s ease 0s;

}

.box4:hover:before {

  width: 200%;

}

.box4 img {

  width: 100%;

  height: auto;

}

.box4 .box-content {

  width: 100%;

  height: 100%;

  padding-top: 20%;

  position: absolute;

  top: 0;

  left: 0;

  transform: scale(0);

  transition: all 0.3s ease 0s;

}

.box4 .icon,

.box5 .icon {

  list-style: none;

  padding: 0;

}

.box4:hover .box-content {

  transform: scale(1);

}

.box4 .title {

  font-size: 22px;

  font-weight: 700;

  color: #fff;

  margin: 0 0 10px;

}

.box4 .post {

  display: block;

  font-size: 15px;

  font-weight: 600;

  color: #fff;

  margin-bottom: 20px;

}

.box4 .icon {

  margin: 0;

}

.box4 .icon li {

  display: inline-block;

}

.box4 .icon li a {

  display: block;

  width: 35px;

  height: 35px;

  line-height: 35px;

  font-size: 20px;

  background: #fff;

  color: #ee4266;

  margin-right: 10px;

  transition: all 0.3s ease 0s;

}

.box5 .icon,

.box5 .icon li {

  display: inline-block;

}

@media only screen and (max-width: 990px) {

  .box4 {

    margin-bottom: 30px;

  }

}

@media only screen and (max-width: 767px) {

  .box4:before {

    left: -400px;

  }

  .box4:hover:before {

    width: 300%;

  }

}



/*********************** Demo - 5 *******************/

.box5 {

  background: #444;

  position: relative;

}

.box5:after,

.box5:before {

  width: 50px;

  height: 50px;

  border-radius: 50%;

  background: #10a5b8;

  position: absolute;

  top: -80px;

  left: 15px;

  opacity: 0;

  z-index: 1;

  transition: all 0.35s ease;

}

.box5:after {

  top: auto;

  left: auto;

  bottom: -80px;

  right: 15px;

}

.box5:hover:after,

.box5:hover:before {

  opacity: 0.75;

  transform: scale(8);

  transition-delay: 0.15s;

}

.box5 img {

  width: 100%;

  height: auto;

  transition: all 0.35s ease-out 0s;

}

.box5:hover img {

  opacity: 0.4;

}

.box5 .icon {

  margin: 0;

  position: absolute;

  bottom: 15px;

  right: 15px;

  z-index: 2;

  transform: scale(0);

  transition: all 0.35s ease-out;

}

.box5:hover .icon {

  transform: scale(1);

  transition-delay: 0.15s;

}

.box5 .icon li a {

  display: block;

  width: 35px;

  height: 35px;

  line-height: 35px;

  background: #fff;

  font-size: 18px;

  color: #444;

  margin-right: 10px;

  position: relative;

  transition: all 0.5s ease 0s;

}

.box5 .icon li a:hover {

  background: #444;

  color: #fff;

}

.box5 .box-content {

  padding: 20px 15px;

  position: absolute;

  top: 0;

  left: 0;

  z-index: 1;

}

.box5 .title {

  font-size: 20px;

  font-weight: 800;

  color: #fff;

  margin: 0 0 5px;

  opacity: 0;

  transform: translate(-20px, -20px);

  transition: all 0.35s ease-out;

}

.box5:hover .title {

  opacity: 1;

  transform: translate(0, 0);

  transition-delay: 0.15s;

}

.box5 .post {

  display: inline-block;

  font-size: 16px;

  color: #fff;

  opacity: 0;

  transform: translate(-20px, -20px);

  transition: all 0.35s ease-out;

}

.box5:hover .post {

  opacity: 1;

  transform: translate(0, 0);

  transition-delay: 0.15s;

}

.box6 .title,

.box6 img,

.box6:after {

  transition: all 0.35s ease 0s;

}

@media only screen and (max-width: 990px) {

  .box5 {

    margin-bottom: 30px;

  }

}

/*********************** Demo - 6 *******************/

.box6 {

  background: #000;

  position: relative;

}

.box6:after {

  background: rgba(0, 0, 0, 0.7);

  position: absolute;

  top: 0;

  left: -30%;

  bottom: 0;

  right: 70%;

  transform: skew(20deg) translateX(-75%);

}

.box6:hover:after {

  transform: skew(20deg) translateX(0);

}

.box6 img {

  width: 100%;

  height: auto;

}

.box6:hover img {

  opacity: 0.5;

}

.box6 .box-content {

  padding: 20px;

  text-align: right;

  position: absolute;

  top: 0;

  right: 0;

  z-index: 1;

}

.box6 .icon,

.box7 .icon {

  padding: 0;

  list-style: none;

}

.box10 .icon li a,

.box11,

.box12,

.box13,

.box14,

.box6 .icon li a,

.box7,

.box7 .icon li a,

.box8,

.box8 .icon li a {

  text-align: center;

}

.box6 .title {

  font-size: 20px;

  font-weight: 900;

  color: #fff;

  margin: 0 0 10px;

  transform: scale(0);

}

.box6:hover .title {

  transform: scale(1);

}

.box6 .icon li,

.box6 .post {

  opacity: 0;

  transform: translateX(40px);

  transition: all 0.35s ease 0s;

}

.box6 .post {

  display: block;

  font-size: 14px;

  color: #fff;

  margin-bottom: 5px;

}

.box6 .icon {

  display: inline-block;

  margin: 0;

}

.box6:hover .icon li,

.box6:hover .post {

  opacity: 1;

  transform: translateX(0);

}

.box6:hover .icon li:first-child {

  transition-delay: 0.1s;

}

.box6:hover .icon li:nth-child(2) {

  transition-delay: 0.2s;

}

.box6 .icon li a {

  display: block;

  width: 35px;

  height: 35px;

  line-height: 35px;

  background: #fff;

  font-size: 18px;

  color: #605f5f;

  margin-bottom: 5px;

  transition: all 0.35s ease;

}

.box6 .icon li a:hover {

  background: #605f5f;

  color: #fff;

}

@media only screen and (max-width: 990px) {

  .box6 {

    margin-bottom: 30px;

  }

}



/*********************** Demo - 7 *******************/

.box7 {

  position: relative;

}

.box7:after,

.box7:before {

  width: 100%;

  height: 100%;

  background: rgba(11, 33, 47, 0.9);

  position: absolute;

  top: 0;

  left: 0;

  opacity: 0;

  transition: all 0.5s ease 0s;

}

.box7:after {

  background: rgba(255, 255, 255, 0.3);

  border: 2px solid #0dab76;

  top: 0;

  left: 170%;

  opacity: 1;

  z-index: 1;

  transform: skewX(45deg);

  transition: all 1s ease 0s;

}

.box7:hover:before {

  opacity: 1;

}

.box7:hover:after {

  left: -170%;

}

.box7 img {

  width: 100%;

  height: auto;

}

.box7 .box-content {

  width: 100%;

  position: absolute;

  bottom: -100%;

  left: 0;

  transition: all 0.5s ease 0s;

}

.box7:hover .box-content {

  bottom: 30%;

}

.box7 .title {

  display: block;

  font-size: 22px;

  font-weight: 700;

  color: #fff;

  margin: 0 0 10px;

}

.box7 .post {

  display: block;

  font-size: 15px;

  font-weight: 600;

  color: #fff;

  margin-bottom: 10px;

}

.box7 .icon {

  margin: 0;

}

.box7 .icon li {

  display: inline-block;

}

.box7 .icon li a {

  display: block;

 

  line-height: 35px;

  border-radius: 50%;

  background: #0dab76;

  font-size: 14px;

  color: #fff;

  margin-right: 10px;

  transition: all 0.5s ease 0s;

}

.box8 .icon li,

.box8 .title {

  display: inline-block;

}

.box7 .icon li a:hover {

  transform: rotate(360deg);

}

@media only screen and (max-width: 990px) {

  .box {

    margin-bottom: 30px;

  }

}



/*********************** Demo - 8 *******************/

.box8 .icon,

.box8 .title {

  margin: 0;

  position: absolute;

}

.box8 {

  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);

  position: relative;

}

.box8 img {

  width: 100%;

  height: auto;

}

.box8 .box-content {

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.6);

  opacity: 0;

  position: absolute;

  top: 0;

  left: 0;

  transform: perspective(400px) rotateX(-90deg);

  transform-origin: center top 0;

  transition: all 0.5s ease 0s;

}

.box8 .icon li a,

.box8 .title {

  background: #ef4050;

  font-size: 20px;

  color: #fff;

}

.box8:hover .box-content {

  opacity: 1;

  transform: perspective(400px) rotateX(0);

}

.box8 .title {

  padding: 5px 7px;

  border-radius: 5px;

  font-weight: 600;

  bottom: 20px;

  left: 20px;

  transition: all 0.9s ease 0s;

}

.box8 .icon li a,

.box9 .box-content,

.box9 .icon li,

.box9 img {

  transition: all 0.35s ease 0s;

}

.box8:hover .title {

  bottom: -40px;

}

.box8 .icon {

  list-style: none;

  padding: 0;

  top: 42%;

  left: 0;

  right: 0;

}

.box8 .icon li a {

  display: block;

  width: 40px;

  height: 40px;

  line-height: 40px;

  border-radius: 50%;

  margin-right: 7px;

}

.box9 .icon,

.box9 .title {

  width: 100%;

  font-size: 22px;

}

.box8 .icon li a:hover {

  background: #fff;

  color: #000;

}

@media only screen and (max-width: 990px) {

  .box8 {

    margin-bottom: 20px;

  }

}



/*********************** Demo - 9 *******************/

.box9 {

  background: #000;

  text-align: center;

  position: relative;

}

.box9 img {

  width: 100%;

  height: auto;

}

.box9:hover img {

  opacity: 0.5;

}

.box9 .box-content {

  padding: 30px 10px 30px 0;

  background: rgba(0, 0, 0, 0.65);

  position: absolute;

  top: 0;

  left: 0;

  bottom: 0;

  right: 0;

  opacity: 0;

}

.box9:hover .box-content {

  top: 10px;

  left: 10px;

  bottom: 10px;

  right: 10px;

  opacity: 1;

}

.box9 .title {

  font-weight: 700;

  color: #fff;

  line-height: 17px;

  margin: 5px 0;

  position: absolute;

  bottom: 55%;

}

.box10 .icon li a,

.box9 .icon li a {

  line-height: 35px;

  border-radius: 50%;

}

.box9 .icon {

  list-style: none;

  padding: 0;

  margin: 0;

  position: absolute;

  top: 50%;

}

.box9 .icon li {

  display: inline-block;

  opacity: 0;

  transform: translateY(40px);

}

.box9:hover .icon li {

  opacity: 1;

  transform: translateY(0);

}

.box9:hover .icon li:first-child {

  transition-delay: 0.1s;

}

.box9:hover .icon li:nth-child(2) {

  transition-delay: 0.2s;

}

.box9 .icon li a {

  display: block;

  width: 35px;

  height: 35px;

  background: #f39c12;

  font-size: 20px;

  color: #000;

  margin-right: 5px;

  transition: all 0.35s ease 0s;

}

.box9 .icon a:hover {

  background: #fff;

}

@media only screen and (max-width: 990px) {

  .box9 {

    margin-bottom: 20px;

  }

}

/*********************** Demo - 10 *******************/

.box10 {

  background: #000;

  overflow: hidden;

  position: relative;

}

.box10:after,

.box10:before {

  border-width: 0 180px 140px;

  border-style: solid;

  border-color: transparent transparent #0d5f45;

  position: absolute;

  bottom: 0;

  left: 50%;

  z-index: 1;

  transform: translate(-55%, 100%);

  transition: all 0.5s 0s cubic-bezier(0.6, -0.28, 0.735, 0.045);

}

.box10:after {

  border-width: 150px 250px;

  border-color: transparent #18ab69 #18ab69 #008148;

  top: 25%;

  transform: translate(-60%, 100%);

}

.box10:hover:before {

  transition: all 0.4s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  transform: translate(-55%, 0);

  transition-delay: 0.2s;

}

.box10:hover:after {

  transition: all 0.4s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  transform: translate(-60%, 0);

  transition-delay: 0s;

}

.box10 img {

  width: 100%;

  height: auto;

  opacity: 1;

  transform: scale(1.1) translateY(3%);

  transition: all 0.5s ease 0s;

}

.box10:hover img {

  transform: scale(1.1) translateY(-3%);

  opacity: 0.4;

}

.box10 .box-content {

  padding: 20px 0 0 20px;

  position: absolute;

  top: 0;

  left: 0;

  opacity: 0;

  z-index: 2;

  transform: translateY(20%);

  transition: all 0.5s ease 0s;

}

.box10:hover .box-content {

  opacity: 1;

  transform: translate(0);

  transition-delay: 0.1s;

}

.box10 .title {

  font-size: 23px;

  font-weight: 800;

  color: #fff;

}

.box10 .icon {

  padding: 0;

  margin: 0;

  list-style: none;

}

.box10 .icon li {

  display: inline-block;

}

.box10 .icon li a {

  display: block;

  width: 35px;

  height: 35px;

  background: #18ab69;

  font-size: 18px;

  color: #fff;

  margin-right: 10px;

  transition: all 0.3s ease 0s;

}

.box11 .icon li,

.box11 .icon li a,

.box11 .title,

.box12 .icon li,

.box12 .title {

  display: inline-block;

}

.box10 .icon li a:hover {

  transform: rotate(360deg);

}

@media only screen and (max-width: 990px) {

  .box10 {

    margin-bottom: 20px;

  }

}

@media only screen and (max-width: 767px) and (min-width: 600px) {

  .box10:before {

    border-width: 0 250px 240px;

  }

  .box10:after {

    border-width: 260px 460px;

  }

}

@media only screen and (max-width: 599px) and (min-width: 430px) {

  .box:before {

    border-width: 0 220px 120px;

  }

  .box10:after {

    border-width: 260px 460px;

  }

}

/*********************** Demo - 11 *******************/

.box11 {

  background: #000;

  color: #fff;

  position: relative;

}

.box11:after,

.box11:before {

  position: absolute;

  content: "";

}

.box11:before {

  width: 100%;

  height: 100%;

  background: #83437d;

  opacity: 0.5;

  top: 100%;

  left: 0;

  z-index: 1;

  transition: all 0.35s ease-in 0.3s;

}

.box11:hover:before {

  top: 0;

  transition: all 0.35s ease-out 0s;

}

.box11:after {

  bottom: 100%;

  left: 50%;

  border-width: 200px 200px 0;

  border-style: solid;

  border-color: #83437d transparent transparent;

  opacity: 0.9;

  transform: translateX(-50%);

  transition: all 0.35s ease-out 0s;

}

.box11:hover .post,

.box11:hover .title {

  transform: translate(0, -50%);

}

.box11:hover:after {

  bottom: 25%;

  transition: all 0.35s ease-in 0.2s;

}

.box11 img {

  width: 100%;

  height: auto;

}

.box11:hover img {

  opacity: 0.5;

}

.box11 .icon,

.box11 .post,

.box11 .title {

  width: 100%;

  position: absolute;

  left: 0;

  opacity: 0;

  transition: all 0.35s ease 0.5s;

}

.box11 .box-content {

  width: 100%;

  height: 100%;

  position: absolute;

  top: 0;

  left: 0;

  z-index: 1;

}

.box11 .title {

  padding: 0 30px;

  margin: 0;

  font-weight: 300;

  top: 45%;

}

.box11 .post,

.box14 .post {

  text-transform: capitalize;

}

.box11 .post {

  font-size: 15px;

  top: 57%;

}

.box11 .icon {

  padding: 0;

  margin: 0;

  list-style: none;

  bottom: 5px;

}

.box11 .icon li a {

  width: 40px;

  height: 40px;

  line-height: 40px;

  padding: 0 5px;

  font-size: 20px;

  color: #fff;

  opacity: 0.7;

  transition: all 0.35s ease 0.5s;

}

.box11 .icon li a:hover {

  opacity: 1;

  transition: all 0.35s ease;

}

.box11:hover .icon,

.box11:hover .post,

.box11:hover .title {

  opacity: 1;

}

@media only screen and (max-width: 990px) {

  .box11 {

    margin-bottom: 20px;

  }

}

@media only screen and (max-width: 767px) {

  .box11:after {

    border-width: 500px 500px 0;

  }

}



/*********************** Demo - 12 *******************/

.box12 {

  position: relative;

}

.box12 .box-content,

.box12:after {

  position: absolute;

  transition: all 0.3s ease 0s;

}

.box12:after {

  content: "";

  width: 65%;

  background: rgba(28, 28, 28, 0.8);

  padding-bottom: 65%;

  opacity: 0;

  top: 50%;

  left: 50%;

  transform: rotate(0) translate(-50%, -50%);

  transform-origin: 0 0 0;

}

.box12:hover:after {

  transform: rotate(-45deg) translate(-50%, -50%);

  opacity: 1;

}

.box12 img {

  width: 100%;

  height: auto;

}

.box12 .box-content {

  width: 100%;

  top: 35%;

  left: 0;

  opacity: 0;

  z-index: 1;

}

.box12:hover .box-content {

  opacity: 1;

}

.box12 .title {

  padding: 10px 0;

  color: #fff;

  margin: 0;

  border-top: 2px solid #fff;

  border-bottom: 2px solid #fff;

}

.box12 .icon {

  padding: 0;

  margin: 12px 0 0;

  list-style: none;

}

.box12 .icon li a {

  display: block;

  width: 35px;

  height: 35px;

  line-height: 35px;

  border-radius: 50%;

  border: 1px solid #fff;

  font-size: 18px;

  color: #fff;

  margin-right: 10px;

  transition: all 0.3s ease 0s;

}

.box12 .icon li a:hover {

  border-radius: 0;

}

@media only screen and (max-width: 990px) {

  .box12 {

    margin-bottom: 20px;

  }

}

/*********************** Demo - 13 *******************/

.box13 {

  position: relative;

  transition: all 0.2s ease-out 0s;

}

.box13 .box-content,

.box13:after {

  position: absolute;

  left: 20px;

  right: 20px;

}

.box13:after {

  content: "";

  display: block;

  background: #463f9f;

  top: 20px;

  bottom: 20px;

  opacity: 0;

  transform: rotate3d(-1, 1, 0, 100deg);

  transition: all 0.4s ease-in-out 0s;

}

.box13:hover:after {

  opacity: 0.9;

  transform: rotate3d(0, 0, 0, 0deg);

}

.box13 img {

  width: 100%;

  height: auto;

}

.box13 .box-content {

  top: 45%;

  opacity: 0;

  z-index: 1;

  -webkit-transform: translate(10%, -30%);

  transform: translate(10%, -30%);

  transition: all 0.2s ease-out 0s;

}

.box13:hover .box-content {

  opacity: 1;

  transform: translate(0, -50%);

  transition-delay: 0.2s;

}

.box13 .title {

  display: block;

  font-size: 22px;

  font-weight: 700;

  color: #39b54a;

  margin: 0 0 10px;

}

.box13 .post {

  display: block;

  font-size: 15px;

  color: #f7f7b9;

  margin-bottom: 20px;

}

.box13 .social {

  padding: 0;

  margin: 0;

  list-style: none;

}

.box13 .social li {

  display: inline-block;

}

.box13 .social li a {

  display: block;

  width: 35px;

  height: 35px;

  background: #f7f7b9;

  border-radius: 50%;

  font-size: 17px;

  color: #1b1462;

  line-height: 35px;

  margin-right: 5px;

  transition: all 0.4s ease-in-out 0s;

}

.box14 .icon li,

.box14 .post {

  display: inline-block;

}

.box13 .social li a:hover {

  color: #f7f7b9;

  background: #39b54a;

}

@media only screen and (max-width: 990px) {

  .box13 {

    margin-bottom: 30px;

  }

}



/*********************** Demo - 14 *******************/

.box14 {

  position: relative;

}

.box15,

.box17,

.box18 {

  box-shadow: 0 0 5px #7e7d7d;

  text-align: center;

}

.box14:before {

  content: "";

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.5);

  position: absolute;

  top: 0;

  left: 0;

  opacity: 0;

  transition: all 0.35s ease 0s;

}

.box14:hover:before {

  opacity: 1;

}

.box14 img {

  width: 100%;

  height: auto;

}

.box14 .box-content {

  width: 90%;

  height: 90%;

  position: absolute;

  top: 5%;

  left: 5%;

}

.box14 .box-content:after,

.box14 .box-content:before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  bottom: 0;

  right: 0;

  opacity: 0;

  transition: all 0.7s ease 0s;

}

.box14 .box-content:before {

  border-bottom: 1px solid rgba(255, 255, 255, 0.5);

  border-top: 1px solid rgba(255, 255, 255, 0.5);

  transform: scale(0, 1);

  transform-origin: 0 0 0;

}

.box14 .box-content:after {

  border-left: 1px solid rgba(255, 255, 255, 0.5);

  border-right: 1px solid rgba(255, 255, 255, 0.5);

  transform: scale(1, 0);

  transform-origin: 100% 0 0;

}

.box14:hover .box-content:after,

.box14:hover .box-content:before {

  opacity: 1;

  transform: scale(1);

  transition-delay: 0.15s;

}

.box14 .title {

  font-size: 21px;

  font-weight: 700;

  color: #fff;

  margin: 15px 0;

  opacity: 0;

  transform: translate3d(0, -50px, 0);

  transition: transform 0.5s ease 0s;

}

.box14:hover .title {

  opacity: 1;

  transform: translate3d(0, 0, 0);

}

.box14 .post {

  font-size: 14px;

  color: #fff;

  padding: 10px;

  background: #d79719;

  opacity: 0;

  border-radius: 0 19px;

  transform: translate3d(0, -50px, 0);

  transition: all 0.7s ease 0s;

}

.box14 .icon,

.box15 .icon {

  padding: 0;

  list-style: none;

}

.box14:hover .post {

  opacity: 1;

  transform: translate3d(0, 0, 0);

  transition-delay: 0.15s;

}

.box14 .icon {

  width: 100%;

  margin: 0;

  position: absolute;

  bottom: -10px;

  left: 0;

  opacity: 0;

  z-index: 1;

  transition: all 0.7s ease 0s;

}

.box14:hover .icon {

  bottom: 20px;

  opacity: 1;

  transition-delay: 0.15s;

}

.box14 .icon li a {

  display: block;

  width: 40px;

  height: 40px;

  line-height: 40px;

  border: 1px solid #fff;

  border-radius: 0 16px;

  font-size: 14px;

  color: #fff;

  margin-right: 5px;

  transition: all 0.4s ease 0s;

}

.box14 .icon li a:hover {

  background: #d79719;

  border-color: #d79719;

}

@media only screen and (max-width: 990px) {

  .box14 {

    margin-bottom: 30px;

  }

}



/*********************** Demo - 15 *******************/

.box15 {

  position: relative;

}

.box15 img {

  width: 100%;

  height: auto;

}

.box15 .box-content {

  width: 100%;

  height: 100%;

  position: absolute;

  top: 0;

  left: 0;

  transition: all 0.5s ease 0s;

}

.box15:hover .box-content {

  background-color: rgba(255, 242, 242, 0.8);

}

.box15 .box-content:after,

.box15 .box-content:before {

  content: "";

  width: 50px;

  height: 50px;

  position: absolute;

  opacity: 0;

  transform: scale(1.5);

  transition: all 0.6s ease 0.3s;

}

.box15 .box-content:before {

  border-left: 1px solid #040404;

  border-top: 1px solid #040404;

  top: 19px;

  left: 19px;

}

.box15 .box-content:after {

  border-bottom: 1px solid #040404;

  border-right: 1px solid #040404;

  bottom: 19px;

  right: 19px;

}

.box15:hover .box-content:after,

.box15:hover .box-content:before {

  opacity: 1;

  transform: scale(1);

}

.box15 .title {

  font-size: 22px;

  color: #000;

  margin: 0;

  position: relative;

  top: 0;

  opacity: 0;

  transition: all 1s ease 10ms;

}

.box15:hover .title {

  top: 39%;

  opacity: 1;

  transition: all 0.5s cubic-bezier(1, -0.53, 0.405, 1.425) 10ms;

}

.box15 .title:after {

  content: "";

  width: 0;

  height: 1px;

  background: #040404;

  position: absolute;

  bottom: -8px;

  left: 0;

  right: 0;

  margin: 0 auto;

  transition: all 1s ease 0s;

}

.box15:hover .title:after {

  width: 80%;

  transition: all 1s ease 0.8s;

}

.box15 .icon {

  width: 100%;

  margin: 0 auto;

  position: absolute;

  bottom: 0;

  opacity: 0;

  transition-duration: 0.6s;

  transition-timing-function: cubic-bezier(1, -0.53, 0.405, 1.425);

  transition-delay: 0.1s;

}

.box15:hover .icon {

  bottom: 39%;

  opacity: 1;

}

.box15 .icon li {

  display: inline-block;

}

.box15 .icon li a {

  display: block;

  width: 40px;

  height: 40px;

  line-height: 40px;

  border-radius: 50%;

  font-size: 18px;

  color: #000;

  border: 1px solid #000;

  margin-right: 5px;

  transition: all 0.3s ease-in-out 0s;

}

.box15 .icon li a:hover {

  background: #000;

  color: #fff;

}

@media only screen and (max-width: 990px) {

  .box15 {

    margin-bottom: 30px;

  }

}



/*********************** Demo - 16 *******************/

.box16 {

  text-align: center;

  color: #fff;

  position: relative;

}

.box16 .box-content,

.box16:after {

  width: 100%;

  position: absolute;

  left: 0;

}

.box16:after {

  content: "";

  height: 100%;

  background: linear-gradient(

    to bottom,

    rgba(0, 0, 0, 0) 0,

    rgba(0, 0, 0, 0.08) 69%,

    rgba(0, 0, 0, 0.76) 100%

  );

  top: 0;

  transition: all 0.5s ease 0s;

}

.box16 .post,

.box16 .title {

  transform: translateY(145px);

  transition: all 0.4s cubic-bezier(0.13, 0.62, 0.81, 0.91) 0s;

}

.box16:hover:after {

  background: linear-gradient(

    to bottom,

    rgba(0, 0, 0, 0.01) 0,

    rgba(0, 0, 0, 0.09) 11%,

    rgba(0, 0, 0, 0.12) 13%,

    rgba(0, 0, 0, 0.19) 20%,

    rgba(0, 0, 0, 0.29) 28%,

    rgba(0, 0, 0, 0.29) 29%,

    rgba(0, 0, 0, 0.42) 38%,

    rgba(0, 0, 0, 0.46) 43%,

    rgba(0, 0, 0, 0.53) 47%,

    rgba(0, 0, 0, 0.75) 69%,

    rgba(0, 0, 0, 0.87) 84%,

    rgba(0, 0, 0, 0.98) 99%,

    rgba(0, 0, 0, 0.94) 100%

  );

}

.box16 img {

  width: 100%;

  height: auto;

}

.box16 .box-content {

  padding: 20px;

  margin-bottom: 20px;

  bottom: 0;

  z-index: 1;

}

.box16 .title {

  font-size: 22px;

  font-weight: 700;

  text-transform: uppercase;

  margin: 0 0 10px;

}

.box16 .post {

  display: block;

  padding: 8px 0;

  font-size: 15px;

}

.box16 .social li a,

.box17 .icon li a {

  border-radius: 50%;

  font-size: 20px;

  color: #fff;

}

.box16:hover .post,

.box16:hover .title {

  transform: translateY(0);

}

.box16 .social {

  list-style: none;

  padding: 0 0 5px;

  margin: 40px 0 25px;

  opacity: 0;

  position: relative;

  transform: perspective(500px) rotateX(-90deg) rotateY(0) rotateZ(0);

  transition: all 0.6s cubic-bezier(0, 0, 0.58, 1) 0s;

}

.box16:hover .social {

  opacity: 1;

  transform: perspective(500px) rotateX(0) rotateY(0) rotateZ(0);

}

.box16 .social:before {

  content: "";

  width: 50px;

  height: 2px;

  background: #fff;

  margin: 0 auto;

  position: absolute;

  top: -23px;

  left: 0;

  right: 0;

}

.box16 .social li {

  display: inline-block;

}

.box16 .social li a {

  display: block;

  width: 40px;

  height: 40px;

  line-height: 40px;

  background: #6d3795;

  margin-right: 10px;

  transition: all 0.3s ease 0s;

}

.box17 .icon li,

.box17 .icon li a {

  display: inline-block;

}

.box16 .social li a:hover {

  background: #bea041;

}

.box16 .social li:last-child a {

  margin-right: 0;

}

@media only screen and (max-width: 990px) {

  .box16 {

    margin-bottom: 30px;

  }

}



/*********************** Demo - 17 *******************/

.box17 {

  position: relative;

}

.box17:after {

  content: "";

  width: 100%;

  height: 100%;

  background: rgba(2, 162, 221, 0.9);

  position: absolute;

  top: 0;

  left: 0;

  opacity: 0;

  transition: all 0.5s ease 0s;

}

.box17:hover:after {

  opacity: 1;

}

.box17 img {

  width: 100%;

  height: auto;

  transition: all 1.5s ease 0s;

}

.box17 .box-content,

.box17 .icon li a {

  position: absolute;

  transition: all 0.6s ease 0s;

}

.box17:hover img {

  transform: scale(1.2);

}

.box17 .icon {

  width: 100%;

  height: 100%;

  list-style: none;

  padding: 0;

  margin: 0 auto;

  position: absolute;

  top: 0;

  left: 0;

  z-index: 1;

}

.box17 .icon li a {

  width: 45px;

  height: 45px;

  line-height: 45px;

  margin: 0 auto;

  top: 50%;

  border: 1px solid #fff;

  opacity: 0;

}

.box17:hover .icon li a {

  top: 30%;

  opacity: 1;

}

.box17 .icon li a:hover {

  background: #fff;

  color: #02a2dd;

}

.box17 .icon li:first-child a {

  left: -90%;

  right: 0;

}

.box17:hover .icon li:first-child a {

  left: -55px;

}

.box17 .icon li:last-child a {

  right: -90%;

  left: 0;

}

.box17:hover .icon li:last-child a {

  right: -55px;

}

.box17 .box-content {

  width: 100%;

  padding: 20px 10px;

  background: rgba(0, 0, 0, 0.1);

  bottom: -100px;

  left: 0;

  z-index: 1;

}

.box17:hover .box-content {

  bottom: 0;

}

.box17 .title {

  font-size: 18px;

  font-weight: 700;

  color: #fff;

  margin-top: 0;

}

.box17 .post {

  display: block;

  font-size: 14px;

  color: #fff;

}

@media only screen and (max-width: 990px) {

  .box17 {

    margin-bottom: 30px;

  }

}



/*********************** Demo - 18 *******************/

.box18 {

  background: #3c3c3c;

  position: relative;

  -webkit-transition: all 0.35s ease;

  transition: all 0.35s ease;

}

.box18:after,

.box18:before {

  content: "";

  width: 100%;

  height: 100%;

  position: absolute;

  top: 0;

  left: 0;

  background: #3c3c3c;

  border-left: 3px solid #fff;

  border-right: 3px solid #fff;

  opacity: 0.9;

  z-index: 1;

  -webkit-transition: all 0.35s ease;

  transition: all 0.35s ease;

}

.box18 img,

.box19 img {

  height: auto;

  width: 100%;

}

.box18:before {

  -webkit-transform: skew(45deg) translateX(-155%);

  transform: skew(45deg) translateX(-155%);

}

.box18:hover:before {

  -webkit-transform: skew(45deg) translateX(-55%);

  transform: skew(45deg) translateX(-55%);

}

.box18:after {

  -webkit-transform: skew(45deg) translateX(155%);

  transform: skew(45deg) translateX(155%);

}

.box18:hover:after {

  -webkit-transform: skew(45deg) translateX(55%);

  transform: skew(45deg) translateX(55%);

}

.box18 img {

  -webkit-transition: all 0.35s ease;

  transition: all 0.35s ease;

}

.box18:hover img {

  opacity: 0.5;

}

.box18 .box-content {

  position: absolute;

  top: 50%;

  left: 50%;

  -webkit-box-shadow: 0 0 10px #3c3c3c;

  box-shadow: 0 0 10px #3c3c3c;

  opacity: 0;

  z-index: 2;

  -webkit-transform: translate(-50%, -50%) scale(0.5);

  transform: translate(-50%, -50%) scale(0.5);

  -webkit-transition: all 0.35s ease;

  transition: all 0.35s ease;

}

.box19,

.box20,

.box21 {
    outline: 5px solid #6eab42;
    outline-offset: -20px;
  box-shadow: 0 0 5px #a3a3a3;

}

.box18:hover .box-content {

  -webkit-transform: translate(-50%, -50%) scale(1);

  transform: translate(-50%, -50%) scale(1);

  opacity: 1;

}

.box18 .post,

.box18 .title {

  font-size: 18px;

  font-weight: 600;

  letter-spacing: 1px;

  text-transform: uppercase;

  background: #3c3c3c;

  border: 2px solid #fff;

  color: #fff;

  padding: 15px 20px;

  margin: 0;

}

.box18 .post,

.box19 .title,

.box20 .post,

.box20 .title {

  text-transform: capitalize;

}

.box18 .post {

  display: block;

  font-size: 14px;

  font-weight: 400;

  padding: 5px 10px;

  margin-top: 15px;

}

@media only screen and (max-width: 990px) {

  .box18 {

    margin-bottom: 30px;

  }

}



/*********************** Demo - 19 *******************/

.box19 {

  text-align: center;

  position: relative;

}

.box19 .box-content {

  width: 100%;

  height: 100%;

  background: 0 0;

  padding-top: 25%;

  position: absolute;

  top: 0;

  left: 0;

  transition: all 0.3s ease 0s;

}

.box19 .icon,

.box19 .title {

  transition: all 0.2s ease 0s;

}

.box19:hover .box-content {

  background: rgba(0, 0, 0, 0.5);

}

.box19 .title {

  font-size: 24px;

  color: #fff;

  transform: scale(0);

}

.box19:hover .title {

  transform: scale(1);

}

.box19 .icon {

  list-style: none;

  padding: 0;

  margin: 0;

  opacity: 0;

}

.box19:hover .icon {

  opacity: 1;

}

.box19 .icon li {

  display: inline-block;

}

.box19 .icon li:first-child a,

.box19 .icon li:last-child a {

  display: block;

  width: 50px;

  height: 50px;

  line-height: 50px;

  font-size: 24px;

  color: #fff;

  border: 1px solid #fff;

  position: relative;

}

.box19 .icon li a {

  top: -150px;

}

.box19:hover .icon li a {

  top: 0;

}

.box19:hover .icon li a:hover {

  background: #a46789;

  border-color: #a46789;

}

.box19 .icon li:first-child a {

  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s;

}

.box19 .icon li:last-child a {

  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s;

}

@media only screen and (max-width: 990px) {

  .box19 {

    margin-bottom: 30px;

  }

}

@media only screen and (max-width: 360px) {

  .box19 .box-content {

    padding-top: 20%;

  }

}



/*********************** Demo - 20 *******************/

.box20 {

  position: relative;

}

.box20:after,

.box20:before {

  position: absolute;

  content: "";

}

.box20:before {

  width: 80%;

  height: 220%;

  background: #ff402a;

  top: -50%;

  left: -100%;

  z-index: 1;

  transform: rotate(25deg);

  transform-origin: center top 0;

  transition: all 0.5s ease 0s;

}

.box20:hover:before {

  left: 10%;

}

.box20:after {

  width: 55%;

  height: 175%;

  background-color: rgba(0, 0, 0, 0.8);

  bottom: -1000%;

  left: 53%;

  transform: rotate(-33deg);

  transform-origin: center bottom 0;

  transition: all 0.8s ease 0s;

}

.box20 .box-content,

.box20 .icon {

  width: 100%;

  padding: 0 20px;

  position: absolute;

  left: 0;

  z-index: 2;

  transition: all 1.1s ease 0s;

}

.box20:hover:after {

  bottom: -70%;

}

.box20 img {

  width: 100%;

  height: auto;

}

.box20 .box-content {

  top: -100%;

  color: #fff;

}

.box20:hover .box-content {

  top: 30px;

}

.box20 .title {

  font-size: 24px;

  margin: 0;

}

.box20 .icon li a,

.box20 .post {

  display: inline-block;

  font-size: 14px;

}

.box20 .post {

  margin-top: 5px;

}

.box20 .icon {

  list-style: none;

  margin: 0;

  bottom: -100%;

}

.box20:hover .icon {

  bottom: 25px;

}

.box20 .icon li {

  display: inline-block;

}

.box20 .icon li a {

  width: 35px;

  height: 35px;

  line-height: 35px;

  background: #444;

  border-radius: 50%;

  margin: 0 3px;

  color: #fff;

  text-align: center;

  transition: all 0.5s ease 0s;

}

.box20 .icon li a:hover {

  background: #fff;

  color: #ff402a;

}

@media only screen and (max-width: 990px) {

  .box20 {

    margin-bottom: 30px;

  }

}

@media only screen and (max-width: 479px) {

  .box20 .title {

    font-size: 20px;

  }

}



/*********************** Demo - 21 *******************/

.box21 {

  /*text-align: center;*/

  position: relative;

}

.box21:after,

.box21:before {

  content: "";

  width: 2px;

  height: 2px;

  border-radius: 50%;

  background: rgba(0, 0, 0, 0.35);

  position: absolute;

  top: 50%;

  left: 50%;

  -webkit-transform: scale(0);

  -moz-transform: scale(0);

  -ms-transform: scale(0);

  -o-transform: scale(0);

  transform: scale(0);

}

.box21:hover:after,

.box21:hover:before {

  -webkit-transform: scale(400);

  -moz-transform: scale(400);

  -ms-transform: scale(400);

  -o-transform: scale(400);

  transform: scale(400);

}

.box21:before {

  -o-transition: all 0.5s linear 0.3s;

  -moz-transition: all 0.5s linear 0.3s;

  -ms-transition: all 0.5s linear 0.3s;

  -webkit-transition: all 0.5s linear 0.3s;

  transition: all 0.5s linear 0.3s;

}

.box21:hover:before {

  -moz-transition-delay: 0s;

  -webkit-transition-delay: 0s;

  -o-transition-delay: 0s;

  -ms-transition-delay: 0s;

  transition-delay: 0s;

}

.box21:after {

  -o-transition: all 0.5s linear 0.6s;

  -moz-transition: all 0.5s linear 0.6s;

  -ms-transition: all 0.5s linear 0.6s;

  -webkit-transition: all 0.5s linear 0.6s;

  transition: all 0.5s linear 0.6s;

}

.box21:hover:after {

  -moz-transition-delay: 0.2s;

  -webkit-transition-delay: 0.2s;

  -o-transition-delay: 0.2s;

  -ms-transition-delay: 0.2s;

  transition-delay: 0.2s;

}

.box21 img {

  width: 100%;

  height: auto;

}

.box21 .box-content {

  width: 100%;

  height: 100%;

  position: absolute;

  top: 0;

  left: 0;

  background: 0 0;

  color: #fff;

  padding-top: 0px;

  -webkit-transform: scale(0);

  -moz-transform: scale(0);

  -ms-transform: scale(0);

  -o-transform: scale(0);

  transform: scale(0);

  -ms-transition: all 0.3s linear 0s;

  -o-transition: all 0.3s linear 0s;

  -webkit-transition: all 0.3s linear 0s;

  -moz-transition: all 0.3s linear 0s;

  transition: all 0.3s linear 0s;

  z-index: 1;

}

.box21:hover .box-content {

  -webkit-transform: scale(1);

  -moz-transform: scale(1);

  -ms-transform: scale(1);

  -o-transform: scale(1);

  transform: scale(1);

  -moz-transition-delay: 0.4s;

  -webkit-transition-delay: 0.4s;

  -o-transition-delay: 0.4s;

  -ms-transition-delay: 0.4s;

  transition-delay: 0.4s;

}

.box21 .title {

  font-size: 21px;

  font-weight: 700;

  text-transform: uppercase;

  border-bottom: 1px solid #fff;

  padding-bottom: 20px;

  margin-top: 20px;

}

.box21 .description {

  font-size: 14px;

  font-style: italic;

  padding: 0 10px;

  margin: 15px 0;

}

.box21 .read-more {

  display: block;

  width: 120px;

  background: #178993;

  border-radius: 5px;

  font-size: 14px;

  color: #fff;

  text-transform: capitalize;

  padding: 10px 0;

  margin: 0 auto;

}

@media only screen and (max-width: 990px) {

  .box21 {

    margin-bottom: 0px;

  }

}

@media only screen and (max-width: 479px) {

  .box21 .box-content {

    padding-top: 0;

  }

}

@media only screen and (max-width: 359px) {

  .box21 .title {

    padding-bottom: 10px;

  }

}







.chef-area-sd{
    justify-content: center;
    align-items: center;
    display: flex;
    height: 100%;
    vertical-align: middle;
}

.border-img{}

.chef-area-sd .big {
}

.chef-img{margin: 0 11px;}

.chef-area-sd .fa {
	display: block;
    width: 35px;
    height: 35px;
    line-height: 32px;
    border-radius: 50%;
    font-size: 3px;
    border: 2px solid white;
   
    text-align: center;
    font-size: 14px;
    margin: auto;
    color: #fff;
    transition: all .5s ease 0s;
}


.chef-social-icon{}
.chef-social-icon li{ display: inline-block;}
.chef-social-icon li a{margin: 0 2px;
    display: inline-block;}
.chef-social-icon li .fa{}



.prof-caption{    margin: 17px 0;}
.prof-caption a{font-size: 18px;
    color: #181818;
    text-transform: capitalize;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;}




.reservation-block.style-two .date:after {
    right: 27px;
}
.reservation-block.style-two .date:after, .reservation-block.style-three .date:after {
    color: white;
    opacity: 0.7;
}
.reservation-block .date:after {
    content: '\f073';
    font-family: "Font Awesome 5 Free";
    display: block;
    pointer-events: none;
    position: absolute;
    right: 0px;
    top: 50%;
    color: #8F8F8F;
    -webkit-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
    font-weight: 800;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}


.date-picker-field{}
.date-picker-field{}



.book-table{}
.book-table .book-table-inner{position: relative;
    padding: 80px 0;}
.book-table .book-table-inner .boxes{    margin-top: 55px;}

.book-table .book-table-inner .boxes form{}
.book-table .book-table-inner .boxes form .form-control{height: 45px;
    border-radius: 0;
    background: transparent;    color: white;
    border: 2px solid white;
    margin-bottom: 25px;}
.book-table .book-table-inner .boxes form select{    color: white;}
.book-table .book-table-inner .boxes form select option{    color: black;}
.book-table .book-table-inner .boxes .book{text-align: center;
    padding: 10px 30px;
    text-transform: capitalize;
    font-weight: 600;
    margin: auto;
    font-family: 'Open Sans', sans-serif;
    display: block;
    background: white;
    border: 0;
    font-size: 15px;
    color: #202020;}


.input-group{    display: block;}


/* do not group these rules*/
::-webkit-input-placeholder { color: white; }
FF 4-18 
:-moz-placeholder           { color:  white; }
 FF 19+
::-moz-placeholder          { color:white; }
 IE 10+
:-ms-input-placeholder      { color:  white; } 
.book-table .book-table-inner .boxes form .form-control::-webkit-input-placeholder{color:white;}
.book-table .book-table-inner .boxes form .form-control::-moz-placeholder{color:white;}
.book-table .book-table-inner .boxes form .form-control::-ms-input-placeholder{color:white;}

.foo-reserv .title h2{color: #ffffff;
    font-size: 30px;}

.book-table .book-table-inner .boxes form textarea{min-height:100px;}

.green-txt{color:#6eab42;}

.footer-copyright{background: #101010;
    padding: 26px;}
.footer-copyright p{margin-bottom: 0;
    color: white;
    text-align: center;}
footer{}
footer .main-footer{position: relative;padding: 90px 0;}
footer .main-footer .foo-cont{    text-align: center;}
footer .main-footer .foo-cont .title{     display: block;
    font-size: 22px;
    font-family: 'Arthines';padding-top: 125px;
    font-weight: 600;
    padding-bottom: 15px;
    color: white;
    letter-spacing: 1px;
}
.foo-reserv .main-btn{margin: 40px 0 20px 0;}
footer .main-footer .foo-cont .detail{}
footer .main-footer .foo-cont .detail p{color: white;}
footer .main-footer .foo-cont .detail p a{color: white;}
footer .main-footer .foo-cont a{}
.foo-reserv{    display: block;
    color: #fff;
    text-align: center;
    background: #101010;
    padding: 30px;
    position: relative;
    max-width: 360px;
    margin: 0 auto;}


	.foo-reserv .detail .list {
		display: flex;
		line-height: 32px;
		justify-content: space-between;
		padding: 5px 0;
		border-bottom: 1px dotted rgba(255,255,255,.1);
	}
	
	.foo-reserv:before {
		content: '';
		display: block;
		position: relative;
		top: -50px;
		width: 60px;
		height: 60px;
		background: #101010;
		border-radius: 50px;
		margin: 0 auto -52px;
		z-index: 99;
	}

	.foo-reserv:after {
		content: '';
		display: block;
		position: relative;
		bottom: 0px;
		width: 60px;
		height: 60px;
		background: #101010;
		border-radius: 50px;
		margin: 0 auto -52px;
		z-index: 99;
	}

.black-overlay{position: absolute;
    background: #000000eb;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;}



	  
	  
	  #owl-demo16 .slick-dots{display:none !important;}
	  
	  
	  .slick-dots{}
	  
	  #owl-demo16 .prev-btn{position: absolute;
		right: 80px;
		top: -97px;z-index: 999;
		margin: 0;}
	  

	  #owl-demo16 .next-btn {    position: absolute;right: 15px;
		top: -97px;
		}


	  #owl-demo16 .prev-btn button{border: 0;
		position: relative;
		background: transparent;
		padding: 12px 23px;
		text-transform: uppercase;
		font-size: 12px;
		letter-spacing: 3px;
		font-weight: 600;
		color: #8f8f8f;}

		#owl-demo16 .prev-btn button::before{content: '';
			background: white;
			height: 30px;
			width: 3px;
			position: absolute;
			right: 36px;
			top: 7px;
			z-index: 1;}


			#owl-demo16 .prev-btn button::after{content: '';
				border: 2px solid #8f8f8f;
				position: absolute;
				width: 100%;
				left: -13px;
				height: 100%;
				top: 0;
				max-width: 66px;
				}
	  

	  #owl-demo16 .next-btn  button{
		border: 0;
		position: relative;
		background: #41414100;
		padding: 12px 23px;
		text-transform: uppercase;
		font-size: 12px;
		letter-spacing: 3px;
		font-weight: 600;
		color: #8f8f8f;
		z-index: 99999;}




		#owl-demo16 .next-btn button::before{ content: '';
			background: white;
			height: 30px;
			width: 2px;
			position: absolute;
			left: 28px;
			top: 7px;
			z-index: -1;
			}
	  

			#owl-demo16 .next-btn button::after {
				content: '';
    border: 2px solid #8f8f8f;
    position: absolute;
    width: 100%;
    left: 28px;
    height: 100%;
    top: 0;
    max-width: 66px;
    z-index: -2;
			}
			





	  .sidenav {
		height: 100%;
		width: 0;
		position: fixed;
		z-index: 1;
		top: 0;
		left: 0;
		background-color: #111;
		overflow-x: hidden;
		transition: 0.5s;
		padding-top: 60px;
	  }
	  
	  .sidenav a {
		padding: 8px 8px 8px 32px;
		text-decoration: none;
		font-size: 25px;
		color: #818181;
		display: block;
		transition: 0.3s;
	  }
	  
	  .sidenav a:hover {
		color: #f1f1f1;
	  }
	  
	  .sidenav .closebtn {
		position: absolute;
		top: 0;
		right: 25px;
		font-size: 36px;
		margin-left: 50px;
	  }
	  
	  @media screen and (max-height: 450px) {
		.sidenav {padding-top: 15px;}
		.sidenav a {font-size: 18px;}
	  }







	#owl-demo15  .slick-prev{display: none !important;}




	.gall-in1 {
		position: relative;
	}

	.gall-in1 .demo {
		min-height: auto;
		/* margin: 2px; */
		z-index: 99;
		position: relative;
		padding: 0px 0px;
	}

	.gall-in1 .demo .img-gl {
		position: relative;
	}




	.gall-in1 .demo .img-gl img {
		width: 100%;
	}


	.vid-overlay {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: #0e0e0e4f;
	}


	.box7 .box-content {
		width: 100%;
		position: absolute;
		bottom: -100%;
		left: 0;
		transition: all 0.5s ease 0s;
	}


	

	.menu-tab-cls{}
	.menu-tab-cls .gall-in1{min-height: 315px;}
	.menu-tab-cls .gall-in1 .text-gal{padding: 40px 14px;
		text-align: center;}
	.menu-tab-cls .gall-in1 .text-gal span{font-family: 'Arthines';
		line-height: 48px;
		letter-spacing: 1px;
		display: block;
		color: #517f38;
	
		font-size: 17px;}
	.menu-tab-cls .gall-in1 .text-gal .gal-line-img{}
	.menu-tab-cls .gall-in1 .text-gal h4{font-family: 'Arthines';
		color: #517f38;
		font-size: 24px;}
	.menu-tab-cls .gall-in1 .text-gal p{    font-size: 15px;
		line-height: 25px;}





	.menu-tab-cls #exTab1 .tab-content {
		color : white;
		background-color: #428bca;
		padding : 5px 15px;
	  }
	  
	  .menu-tab-cls  #exTab2 h3 {
		color : white;
		background-color: #428bca;
		padding : 5px 15px;
	  }
	  
	  /* remove border radius for the tab */
	  
	  .menu-tab-cls  #exTab1 .nav-pills > li > a {
		border-radius: 0;
	  }
	  
	  /* change border radius for the tab , apply corners on top*/
	  
	  .menu-tab-cls  #exTab3 .nav-pills > li > a {
		border-radius: 4px 4px 0 0 ;
	  }
	  
	  .menu-tab-cls  #exTab3 .tab-content {
		color: white;position: relative;
		top: -50px;
    background-color: #f0f0f0;
    padding: 0px 0px;
	  }
	  
	  

	  .menu-tab-cls .nav-pills{}


	  .menu-tab-cls .nav-pills .active{}

	  .menu-tab-cls .nav-pills .active a{background: transparent;
		
		color: #252525;
		border-bottom: 4px solid #6eab42;}

	  .menu-tab-cls .nav-pills li{}
	  .menu-tab-cls .nav-pills li a{font-size: 16px;}




	  .menu-tab-cls .menu-tab-inner .col-lg-4{padding:0px;}


.menu-content-cls-dse{  max-width: 1350px;
    text-align: center;
    width: 100%;
    padding: 70px 0 90px 0;
    margin: auto;}




.img-popup-cls-jh{padding: 0 125px;
  
    margin: 0 0 0 0;}














.responsive-toggle {
	display: none;
}
.header-responsive-topbar-cls {
	display: none;
}



@media only screen and (max-width : 1500px) {


	.location-bar .fa-search{right: 50px;margin: 0 -13px 0 0;}
	.list-inline-location .sub{max-width: inherit;min-width: auto;
	}

	.tour-area {
		padding: 120px 50px;}


		.service-user-cls .ser-cls-des .satisfy-user-txt .user-txt {
		
			font-size: 15px;
			
		}
		.service-user-cls .ser-cls-des .satisfy-user-txt h5 {
		
			font-size: 16px;
			
		}
	
	
		.service-user-cls .col-md-6{padding-right: 0;}
	


}





@media only screen and (max-width : 1400px) {

	
	.title h2 br{display: none;}


}







 @media only screen and (max-width : 1300px) {

	.service-lft-txt {
		padding: 0 0 0 190px;
	}
	.real-services::before{width: 233px;
		height: 390px;}


	

	#owl-demo15 .slick-prev {
		left: 0;
	}

	#owl-demo15 .slick-next {
		right: 0;
	}


.team-area .team-inner .team-name .item-contact .item-phn-no{padding: 9px 8px 9px 15px;}

	.team-area .team-inner .team-name .team-detail{padding: 0 0 0 5px;}

	.property-type-area .pro-ty-inner-cls #owl-demo14 .pro-content-cls {
	
		margin: 4px;}

	.banner .main-banner .row figure {
		float: right;
		margin: 125px 0 0 0;
	}

	.location-bar .fa-search {
		right: 23px;
		margin: 0 -13px 0 0;
	}
	.banner .main-banner .row figure{    margin: 125px 0 0 0;}
.tour-area .tour-inner .watermark {
    font-size: 60px;}




 
}
 @media only screen and (max-width : 1200px) {
	.real-services::before {
		width: 152px;
		height: 250px;
	}

	.service-lft-txt {
		padding: 0 0 0 100px;
	}

	.satisfy-user-txt {
		display: inline-block;
		padding: 0px 0 0 14px;
	}
	.wh-cls-des img {
		
		max-width: 60px;
	}

	.header-custom-container {
		padding: 0 50px;
	}

	.main-home-header .header-inner-cls .header-contact-btn {
		display: inline-block;
		margin: 0;}

		.banner-img-txt-nw {
			padding: 0 0 0 30px;
		}

}
 @media only screen and (max-width : 1100px) {
 
}



 @media only screen and (max-width : 1000px) {



	.service-user-cls .ser-cls-des .fa{width: 29px;
		height: 29px;
		line-height: 34px;
		font-size: 14px;
		
	}





 .responsive-toggle {
display: block;
float: right;
margin-top: -64px;
}
 .darkHeader .responsive-toggle {
 display: block;
 float: right;
 margin-top: -46px;
}
 .navbar-links {
display: none;
}
 .header-bottom-bar {
 padding: 15px 0;
}
 .darkHeader .header-bottom-bar {
 padding: 9px 0;
 height: 88px;
}

		

	/*toggle css*/





#menu-wrapper {
 overflow: hidden;
 max-width: 100%;
 cursor: pointer;
}
 #menu-wrapper #hamburger-menu {
 position: relative;
 width: 25px;
 height: 20px;
margin-right: 12px !important;
 margin: 15px;
margin-top: 0 !important;
}
 #menu-wrapper #hamburger-menu span {
 opacity: 1;
 left: 0;
 display: block;
 width: 100%;
 height: 3px;
 border-radius: 10px;
 color: #062b50;
 background-color:#062b50;
 position: absolute;
 transform: rotate(0deg);
 transition: .4s ease-in-out;
}
 #menu-wrapper #hamburger-menu span:nth-child(1) {
 top: 0;
}
 #menu-wrapper #hamburger-menu span:nth-child(2) {
 top: 9px;
}
 #menu-wrapper #hamburger-menu span:nth-child(3) {
 top: 18px;
}
 #menu-wrapper #hamburger-menu.open span:nth-child(1) {
 transform: translateY(9px) rotate(135deg);
}
 #menu-wrapper #hamburger-menu.open span:nth-child(2) {
 opacity: 0;
 transform: translateX(-60px);
}
 #menu-wrapper #hamburger-menu.open span:nth-child(3) {
 transform: translateY(-9px) rotate(-135deg);
}
 #menu-container .menu-list .menu-submenu {
 padding-top: 0;
 padding-bottom: 0;
}
 #menu-container .menu-list .menu-submenu li {
}
 #menu-container .menu-list .menu-submenu li a {
font-size: 14px;
 background: #efefef;
 
}
 #menu-container .menu-list {
 padding-left: 0;
 display: block;
 position: absolute;
 width: 100%;
 max-width: -webkit-fill-available;
 background: white;
 box-shadow: rgba(100, 100, 100, 0.2) 6px 2px 10px;
 z-index: 999;
 overflow-y: scroll;
 margin-top: 13px;
 overflow-x: hidden;
 left: -100%;
 height: 100vh;
}
 #menu-container .menu-list li {padding: 0 0 0 25px;
    width: 100%;line-height: 30px;
    border-bottom: 1px dashed gainsboro;
}


#menu-container .menu-list li .fa{color: #062b50;}


 #menu-container .menu-list li a {
display:inline-block;
 padding:13px 15px 13px 10px;
letter-spacing: 0;
 text-transform: capitalize;
 font-size: 14px;
 color:#404040;
 font-family: 'Rubik', sans-serif;
}
 #menu-container .menu-list li.accordion-toggle, #menu-container .menu-list .menu-login {
 font-size: 14px;
 padding: 0;
 text-transform: capitalize;
 border-top: 0;
}
 #menu-container .menu-list li:first-of-type {
 border-top: 0;
}
 .accordion-toggle, .accordion-content {
 cursor: pointer;
 font-size: 16px;
 position: relative;
 letter-spacing: 1px;
}
 .accordion-content {
 display: none;
}



/*.accordion-toggle a:before, .accordion-toggle a:after {

    content: '';

    display: block;

    position: absolute;

    top: 50%;

    right: 30px;

    width: 15px;

    height: 2px;

    margin-top: -1px;

    background-color: #5a5858;

    transform-origin: 50% 50%;

    transition: all 0.3s ease-out;

}



.accordion-toggle a:before {

    transform: rotate(-90deg);

    opacity: 1;

    z-index: 2;

}

*/
/*
.accordion-toggle.active-tab {
 background:#f8931f;
 transition: all 0.3s ease;
}
 .accordion-toggle.active-tab a {
color:white !important;
font-weight: 500;
}
 .accordion-toggle a.active:before {
 transform: rotate(0deg);
 background: #fff !important;
}
 .accordion-toggle a.active:after {
 transform: rotate(180deg);
 background: #fff !important;
 opacity: 0;
}
 .overlay.open li {
 -webkit-animation: fadeInRight .5s ease forwards;
 animation: fadeInRight .5s ease forwards;
 -webkit-animation-delay: .35s;
 animation-delay: .35s;
}
 .overlay.open li:nth-of-type(2) {
 -webkit-animation-delay: .4s;
 animation-delay: .4s;
}
 .overlay.open li:nth-of-type(3) {
 -webkit-animation-delay: .45s;
 animation-delay: .45s;
}
 .overlay.open li:nth-of-type(4) {
 -webkit-animation-delay: .50s;
 animation-delay: .50s;
}
 .overlay nav {
 position: relative;
 height: 70%;
 top: 50%;
 -webkit-transform: translateY(-50%);
 transform: translateY(-50%);
 text-align: center;
}
 .accordion-toggle span[class^='icon-'] {
 position: absolute;
 right: 25px;
 color:#009f4c;
z-index: 99;
 font-size: 30px;
 top: calc(42% - 16px);
}
 .accordion-toggle span.icon-plus, .accordion-toggle span.icon-minus {
 -webkit-transform-origin: 50% 50%;
 transform-origin: 50% 50%;
 -webkit-transition: all .5s ease;
 transition: all .5s ease;
}
 .accordion-toggle span.icon-plus {
 -webkit-transform: rotate(90deg);
 transform: rotate(90deg);
z-index: 9999;
}
 .icon-minus:before {
 content: "\2013";
color:#06b3ef;
}
 .icon-plus:before {
 content: "+";
 color:#06b3ef;
}
 .button_container {
 position: absolute;
 top: 13px;
 right: 2%;
 height: 27px;
 width: 31px;
 cursor: pointer;
 z-index: 100;
 -webkit-transition: opacity .25s ease;
 transition: opacity .25s ease;
}
 .button_container:hover {
 opacity: .7;
}
 .button_container.active .top {
 -webkit-transform: translateY(11px) translateX(0) rotate(45deg);
 transform: translateY(11px) translateX(0) rotate(45deg);
 background:#009f4c;
}
 .button_container.active .middle {
 opacity: 0;
 background: #f00;
}
 .button_container.active .bottom {
 -webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
 transform: translateY(-11px) translateX(0) rotate(-45deg);
 background: #009f4c;
 top: 21px;
}
 .button_container span {
 background:#8c1c40;
 border: none;
 height:3px;
 width: 100%;
 position: absolute;
 top: 0;
 left: 0;
 -webkit-transition: all .35s ease;
 transition: all .35s ease;
 cursor: pointer;
}
 .button_container span:nth-of-type(2) {
 top: 10px;
}
 .button_container span:nth-of-type(3) {
 top: 20px;
}
 .overlay {
 position: fixed;
 background: #0c0c0c;
 top: 0;
 left: 0;
 width: 100%;
 height: 0%;
 opacity: 0;
 visibility: hidden;
 -webkit-transition: opacity .35s, visibility .35s, height .35s;
 transition: opacity .35s, visibility .35s, height .35s;
 overflow-y: scroll;
 overflow-x: hidden;
 z-index: 99;
}
 .overlay.open {
 opacity:1;
 visibility: visible;
 height: 100%;
}
 .overlay.open li {
 -webkit-animation: fadeInRight .5s ease forwards;
 animation: fadeInRight .5s ease forwards;
 -webkit-animation-delay: .35s;
 animation-delay: .35s;
}
 .overlay.open li:nth-of-type(2) {
 -webkit-animation-delay: .4s;
 animation-delay: .4s;
}
 .overlay.open li:nth-of-type(3) {
 -webkit-animation-delay: .45s;
 animation-delay: .45s;
}
 .overlay.open li:nth-of-type(4) {
 -webkit-animation-delay: .50s;
 animation-delay: .50s;
}
 .overlay nav {
 position: relative;
 height: 70%;
 top: 50%;
 -webkit-transform: translateY(-50%);
 transform: translateY(-50%);
 text-align: center;
}
 .overlay ul {
 list-style: none;
 padding: 0;
 margin: 0 auto;
 position: relative;
 height: 100%;
}
 .overlay ul li {
 display: block;
 line-height: 35px;
 position: relative;
 opacity: 0;
 width: 100%;
}
 .overlay ul li a {
 display: block;
 position: relative;
 color: #4e4e4e;
 padding: 6px 0;
 text-transform: capitalize;
 text-decoration: none;
 overflow: hidden;
 font-size: 17px;
 border-bottom: 0;
 background: #eaeaea;
 margin-bottom: 8px;
 margin-left: 10px;
 margin-right: 10px;
}
 .overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
 width: 100%;
}
 .overlay ul li a:after {
 content: '';
 position: absolute;
 bottom: 0;
 left: 50%;
 width: 0%;
 -webkit-transform: translateX(-50%);
 transform: translateX(-50%);



 background: #FFF;
 -webkit-transition: .35s;
 transition: .35s;
}
 @-webkit-keyframes fadeInRight {
 0% {
 opacity: 0;
 left: 20%;
}
 100% {
 opacity: 1;
 left: 0;
}
}
 @keyframes fadeInRight {
 0% {
 opacity: 0;
 left: 20%;
}
 100% {
 opacity: 1;
 left: 0;
}
}
*/

	

	

	

	

	

	



}
 @media only screen and (max-width : 1024px) {
}
 @media only screen and (max-width : 991px) {


  
  .side-toggle-gallery .boxo img{width: 100%;}

  .menu-tab-cls .gall-in1{min-height: auto;}

  body, html{overflow: hidden;
    overflow-y: auto;
}


	.darkHeader .responsive-toggle{    margin-top: -35px;}

	.darkHeader .header-inner-cls .logo-area {
		margin-top: 6px;
	}

	.darkHeader {
		padding: 19px 0 16px 0 !important;}
		

	.property-type-area .pro-ty-inner-cls {
		padding: 60px 0 160px 0;}


	footer .main-footer .footer-inn {
		margin-top: 40px;
	}


	.testimonial-area .testi-inner {
		padding: 60px 0 125px 0;
	}

	
	#owl-demo14 .slick-prev{left: calc(100%/2 - 20px);
		width: 47px;
		top: inherit;
		bottom: -100px;
		text-align: center;
		right: 0;
		height: 47px;}

		#owl-demo14 .slick-next {
			width: 47px;
			height: 47px;
			right: calc(100%/2 - 20px);
			top: inherit;
			bottom: -100px;
			text-align: center;
		}

	#owl-demo15 .slick-next {
		width: 47px;
		height: 47px;
		right: calc(100%/2 - 55px);
		top: inherit;
		bottom: -100px;
		text-align: center;
	}
	#owl-demo15 .slick-prev {
		left: calc(100%/2 - 55px);
		width: 47px;
		top: inherit;
		bottom: -100px;
		text-align: center;
		right: 0;
		height: 47px;
	}




	.service-user-cls .ser-cls-des {
		border: 0 !important;
	}

	.real-services::before{display: none;}
	.real-services::after{display: none;}


	.service-user-cls .ser-cls-des {
		margin-bottom: 13px;
	}

	.service-lft-txt {
		padding: 0;
	}

	.real-services .real-services-inner .service-img img{float: none;
		max-width: inherit;}

	.testimonial-area .testi-inner #owl-demo15 .testimonial-content-cls p br{display: none;}

	/*#owl-demo15 .slick-prev {
		left: 0;
		top: auto;
		bottom: 0;
	}
	#owl-demo15 .slick-next {
		right: 0;
		top: auto;
		bottom: 0;
	}*/

	#owl-demo15 .slick-prev:before, #owl-demo15 .slick-next:before{width: 47px;
		height: 47px;
		
		line-height: 50px;}




	.tour-area {
		padding: 70px 50px 30px 50px;}



	.tour-area .tour-inner .watermark{margin: 0;    top: 0;    position: relative;}


	.tour-area .tour-inner .tour-txt {
		margin-top: 45px;
	}



	.team-area .team-inner .team-name {
	
		margin: 0 0 15px 0;
	}



	.title h2{    z-index: 1;}
	
	.banner-img-txt-nw {
		padding: 0 10px 0 10px;
	}
	.banner .main-banner .row figure {
		margin: 70px 0 0 0;
	}
	.banner .main-banner .row figure {
		float: none;}



	.main-home-header .header-inner-cls .main-nav {
		display: none;
	}
	.main-home-header .header-inner-cls .header-contact-btn{float: right;top: 0 !important;
		margin: 0 55px 0 14px;}

		.main-home-header .header-inner-cls .header-contact-btn a{    padding: 12px 40px;}



	.header-custom-container {
		padding: 0 35px;
	}
	.main-home-header {
		padding: 40px 0 0 0;}

		.responsive-toggle{margin-top: -35px;}
		#menu-wrapper #hamburger-menu {
			position: relative;
			width: 25px;
			height: 20px;
			margin-right: 25px !important;}


 
}
 @media only screen and (max-width : 800px) {
}
 @media only screen and (max-width : 768px) {


	.darkHeader{position: absolute !important;background: transparent !important;box-shadow: none;}
	.darkHeader .header-contact-btn{margin: 0 55px 0 14px;}
	.main-home-header .header-inner-cls .header-contact-btn {
	
		margin: -14px 55px 0 14px;
	}


	.responsive-toggle {
		margin-top: -34px;
	}

	.location-bar {
		
		position: relative;
		z-index: 1;
	}
	footer .main-footer {
		padding: 30px 0 30px 0;}



	.real-services{padding: 40px 20px 80px 15px;}



	.team-area .team-inner .team-name {
		background: #f9f9f9;
		padding: 40px 7px;}



	.banner .main-banner .row figure img{    max-width: initial;}


	.title h2 br{display: none;}

	.banner .banner-text p br{display: none;}


	.banner-img-txt-nw {
		padding: 0 0 0 10px;
	}




	.location-bar {
		margin: 30px 0 0 0;
	}





 
}
 @media only screen and (max-width : 700px) {
 
}


@media only screen and (max-width : 600px) {

	.who-we-are-area .who-wrapper .who-img::after{right: 30px;}
	#owl-demo15 .slick-prev:before{width: 47px !important;
		height: 47px !important;
		line-height: 50px !important;}

}




 @media only screen and (max-width : 520px) {
	.banner::before{    width: 211px;
		height: 186px;}
	
	.title span{font-size: 36px;}


	.tour-area .tour-inner .tour-video {
		
		padding: 27px;
	}
	.tour-area .tour-inner .watermark {
		margin: 0;
		top: 0;
		position: relative;
		line-height: 40px;
		font-size: 37px;
	}

	.tour-area {
		padding: 55px 20px 30px 20px;
	}

	.team-area {
    padding: 50px 0;
}
	.title .watermark{font-size: 55px;}
	.satisfy-user-txt h5, .tour-area .tour-inner .tour-video h2, .title h2{font-size: 23px; line-height: 35px;}
	.satisfy-user-txt .user-txt{    font-size: 14px;}
	.satisfy-user-txt {
		
		padding: 0px 0 0 8px;
	}

	.who-we-are-area .who-wrapper .who-img {
		
		padding: 0;}
 
.banner .banner-text {
    margin: 185px 0 0 0;
}


	/*.title h2{font-size: 26px;
		margin-top: 0;
		line-height: 34px;}
*/

		.banner .banner-text p br{display: none;}
		.banner .banner-text p{font-size: 15px;
			color: #062b50;
			line-height: 26px;}

	.list-inline-location li{width: 100%;}

	.list-inline-location .form-control{padding: 0;}


	.list-inline-location .sub{border-top-right-radius: 0;border: 0;
		border-bottom-right-radius: 0;}

		.who-we-are-area .who-wrapper::before{width: 138px;
			height: 133px;}

}

 @media only screen and (max-width : 480px) {

	.main-home-header .header-inner-cls .header-contact-btn a {
		padding: 10px 25px;font-size: 14px;
	}
	.responsive-toggle {
		margin-top: -23px;
	}
	.main-home-header .header-inner-cls .logo-area img {
		width: 100%;
		max-width: 110px;
	}

	.header-custom-container {
		padding: 0 22px;
	}
	.satisfy-user .col-xs-6{width: 100%;}

	.satisfy-user-txt {
		padding: 3px 0 0 8px;
	}


	.wh-cls-des {
		margin-bottom: 13px;
	}





	.wh-cls-des{border-right: 0 !important;}




}