/* -------------------------------------------------- 
  Nav off canvas
---------------------------------------------------*/

.offcanvas {
	display: none;
}

@media (max-width: 767px) {
	.offcanvas {
		display: block;
		transform: translateX(100%);
		transition: 0.4s;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background-color: #000000;
		z-index: 1001;
	}
	.offcanvas.visible {
		transition: 0.4s;
		transform: translateY(0);
		height: 100%;
		overflow: scroll;
	}
	/* menu */
	.close-offcanvas {
		position: absolute;
		right: 0px;
		top: 0;
		width: 60px;
		height: 60px;
		line-height: 60px;
		font-size: 30px;
		text-align: center;
        color: #fff;
        background-color: transparent;
        border: 0;
	}
	.nav-mobile {
		padding: 80px 30px;
	}
	.nav-mobile li a,
	.reservar {
		color: #ffffff;
		text-transform: uppercase;
		margin-bottom: 30px;
		font-size: 20px;
		display: inline-block;
		line-height: 24px;
	}
	.nav-mobile li a:hover {
		color: #fff;
		opacity: 0.6;
	}
	.reservar {
		padding-top: 10px;
		padding-bottom: 10px;
		margin-bottom: 60px;
		position: relative;
	}
	.reservar:after {
		content: '';
		display: inline-block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: #fff;
	}
	.reservar:before {
		content: '';
		display: inline-block;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: #fff;
	}
	.nav-mobile .rrss ul li {
		display: inline-block;
		padding: 0;
		padding-top: 15px;
		margin: 0px 10px;
	}
	.nav-mobile .rrss ul li a {
		padding: 5px;
		width: 18px;
		height: 18px;
		background-size: cover;
		background-position: center center;
		transition: 0.2s background-image;
		display: inline-block;
		margin-right: 5px;
	}
}