/**
 * Mobile nav
 */

.mobile-nav {
	position: fixed;
	z-index: 1000010;
	top: -250px;
	left: 100%;
	height: 100vh;
	width: 100vw;
	background: #ffffff;
	overflow-y: auto;
	opacity: 0;
	transform: scale(0.1, 0.1);
	transition: all 0.5s ease-in-out;
}
.mobile-nav.st--display {
	top: 0px;
	left: 0px;
	opacity: 1;
	transform: scale(1, 1);
}
.mobile-nav a {
	color: #393939;
	text-decoration: none;
}

.mobile-nav-controls {
	width: 100%;
	background-color: #ff7b7b;
	color: #fff;
	text-align: center;
}
.mobile-nav-close {
	display: block;
	width: 100%;
	padding: 0.5rem;
	cursor: pointer;
}
.mobile-nav-close * {
	display: inline-block;
	vertical-align: middle;
}

.mobile-nav-close i.fa {
	font-size: 20px;
	margin-right: 5px;
}
.mobile-nav-close span {
	font-size: 16px;
	text-transform: uppercase;
	font-weight: bold;
}

.mobile-nav-logo {
	padding: 1rem;
	margin-bottom: 2rem;
	background-color: #00746B;
	background-image: url('../../images/layout/header-gradient.png');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	text-align: center;
}
.mobile-nav-logo a {
	display: inline-block;
}
.mobile-nav-logo img {
	max-width: 100%;
	display: block;
	margin: 0 0;
}

.mobile-nav-phone {
	text-align: center;
	margin-bottom: 2rem;
}
.mobile-nav-phone .header-phone-grid,
.mobile-nav-phone .header-phone-grid * {
	color: #000000 !important;
}
.mobile-nav-phone .header-phone-grid__icon {
	background-image: url('../../images/icons/phone--black--large.png');
}

.mobile-nav-section {
	border-top: 5px solid #b3b3b3;
}
.mobile-nav-section > .inner {
	padding: 2rem 2rem;
}
.mobile-nav-section__title {
	color: #e75454;
	text-align: center;
	margin-bottom: 2rem;
}
.mobile-nav-section__content {
	font-size: 16px;
}

.mobile-nav-menu {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-column-gap: 15px;
	grid-row-gap: 15px;
	width: 600px;
	margin:  0 auto;
}
.mobile-nav-menu-item {
}
.mobile-nav-menu-item a {
	display: inline-block;
}
.mobile-nav-menu--header-nav {
	grid-template-columns: repeat(2, 1fr);
}
@media only screen and (max-width: 580px) {
	.mobile-nav-menu {
		grid-template-columns: repeat(3, 1fr);
	}
	.mobile-nav-menu--header-nav {
		grid-template-columns: repeat(1, 1fr);
	}
}
@media only screen and (max-width: 380px) {
	.mobile-nav-menu {
		grid-template-columns: repeat(2, 1fr);
	}
	.mobile-nav-menu--header-nav {
		grid-template-columns: repeat(1, 1fr);
	}
}