/*************************************/
/* MEGA-MENU
/*************************************/
body .header-menu .main-menu { margin-top:5px; }
body .header-menu .main-menu > li > a { padding:14px 14px; margin:0px 3px; }

.header-menu .main-menu li.mega-menu { position:static; }

body .header-menu .main-menu li.menu-item-has-children a { padding-right:18px !important; }

.header-menu .main-menu li.mega-menu:hover .sub-menu,
.header-menu .main-menu li.mega-menu .sub-menu li:hover .sub-menu { display:none; }
.header-menu .main-menu li.open-menu.menu-item-has-children > a { 
	background:white; 
	color:#d40000 !important; 
}
.header-menu .main-menu li.open-menu > .sub-menu { display:block !important; }

.header-menu .main-menu li.mega-menu.menu-item-has-children:after { display:none; }
.header-menu .main-menu li.mega-menu.menu-item-has-children > a { position:relative; }
.header-menu .main-menu > li.mega-menu.menu-item-has-children > a:after {
	content: "\f107";
    font-family: 'Font Awesome\ 5 Free', 'FontAwesome';
    font-weight: 900;
    font-size: 13px;
    color: #838893;
    margin-top: 15px;
    top: 0;
    right:7px;
    position: absolute;
}

.header-menu .main-menu li.mega-menu .sub-menu {
	columns: 4;
	-webkit-columns: 4;
	-moz-columns: 4;
	padding:20px;
	background:white;
}

.header-menu .main-menu li.mega-menu:hover .sub-menu { display:none; }

/* TIER 1 */
.header-menu .main-menu li.mega-menu .sub-menu { min-height:150px; margin:0 !important; left:0; width:100%; }
.header-menu .main-menu li.mega-menu .sub-menu li { position:static; }
.header-menu .main-menu li.mega-menu .sub-menu li a { font-size:16px; display:inline-block; width:100%; padding:3px 0; color:black; }
.header-menu .main-menu li.mega-menu .sub-menu li a:hover { color:#d40000 !important; }
.header-menu .main-menu li.mega-menu .sub-menu li.menu-item-has-children:after { display:none; }

.header-menu .main-menu li.mega-menu .sub-menu:not(.active-menu) { 
	height:150px !important;
}

/* TIER 2 */
.header-menu .main-menu li.mega-menu .sub-menu li .sub-menu { 
	margin:0;
	background:white;
	padding-left:200px;
	padding-right:170px;
	left:0;
	top:0;
	position:absolute;
	width:100%;
	height:auto;
	min-height:150px;
}

.sub-menu-img {
	position:absolute !important;
	left:0;
	top:0;
	width:150px; 
	height:100%;
	background-color:rgba(0, 0, 0, 0.1);
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
}
.header-menu .main-menu li .sub-menu li.sub-menu-img a { padding-right:0 !important; }
.sub-menu-img img { width:150px; height:150px; }

.sub-menu-img a:before {
	content:'';
	position:absolute;
	display:block;
	top:0;
	left:0;
	width:100%;
	height:80px;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+22,000000+100&0.65+22,0+100 */
background: -moz-linear-gradient(top,  rgba(0,0,0,0.65) 22%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0.65) 22%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0.65) 22%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}

.sub-menu-name {
	position:absolute;
	display:block;
	text-align:center;
	top:13px;
	padding-left:5px;
	padding-right:5px;
	line-height:1;
	font-size:16px;
	font-weight:700;
	width:100%;
	color:white;
}

.sub-menu-back {
	box-shadow:0px 0px 20px rgba(0, 0, 0, 0.2);
	position:absolute;
	z-index:10;
	top:50%;
	margin-top:-20px;
	right:-20px;
	background:white;
	display:block;
	width:40px;
	height:40px;
	line-height:40px;
	text-align:center;
	border-radius:100%;
	cursor:pointer;
	transition:all 0.4s;
}
.sub-menu-back:hover {
	background:#d4af37;
	color:white;
}

.sub-menu-parent-back {
	display:none !important;
	margin-bottom:10px;
	cursor:pointer;
	background:rgba(0, 0, 0, 0.1);
	padding:14px;
}

.sub-menu-search {
	position:absolute;
	z-index:10;
	top:50%;
	margin-top:-20px;
	left:50%;
	margin-left:-20px;
	color:white;
	background:rgba(0, 0, 0, 0.5);
	display:block;
	width:40px;
	height:40px;
	line-height:40px;
	text-align:center;
	border-radius:100%;
	cursor:pointer;
	transition:all 0.4s;
}

.sub-menu-description {
	position:absolute !important;
	right:0;
	top:0;
	padding:10px;
	width:150px;
	height:100%;
	background:rgba(0, 0, 0, 0.1);
	text-align:center;
	align-items: center;
	justify-content: center;
	display: flex !important;
	font-weight:600;
	
}
.sub-menu-description > div {
	text-align:center;
}

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

	.header-menu .main-menu-container.mobile { top:0; }

	.header-menu .main-menu li.mega-menu .sub-menu { 
		columns: 1;
	    -webkit-columns: 1;
	    -moz-columns: 1;
	    top: 0;
    	position: absolute;
    	height: auto;
	}
	
	.header-menu .main-menu li.mega-menu .sub-menu:not(.active-menu) { height:100% !important; }

	.header-menu .main-menu li.mega-menu .sub-menu li a { padding:6px 0px; }

	.header-menu .main-menu > li.mega-menu.menu-item-has-children > a:after { right:20px; margin-top:22px; }

	.header-menu .main-menu-container.mobile .main-menu li { /*position:relative !important;*/ }

	.header-menu .main-menu li.mega-menu .sub-menu li .sub-menu {
		padding:0px;
		top:0;
		right:0;
		left:0;
		width:100%;
		height:100%;
		padding:10px;
	}	

	.sub-menu-img {
		position:relative !important;
		margin-bottom:20px;
		height:100px;
	}
	.sub-menu-img a:before {
		width:100%;
		height:100%;
		background:rgba(0, 0, 0, 0.3);
	}

	.sub-menu-back {
		right:auto;
		top:auto;
		bottom:-20px;
		left:50%;
		margin-left:-20px;
		transform: rotate(90deg);
	}

	.mega-menu .sub-menu-parent-back {
		display:block !important;
	}

	.sub-menu-search {
		left:auto;
		right:10px;
	}

	.sub-menu-name {
		text-align:left;
		top:50%;
		margin-top:-7px;
		padding-left:7px;
	}

	.sub-menu-description {
		height:150px;
		width:100%;
		top:auto;
		bottom:0;
	}
}