#menuToggle {
    display: inline-block;
    position: relative;
    margin-top: 25px;
    margin-bottom: 25px;
    width: 40px;
    height: 25px;
    cursor: pointer;
    vertical-align: middle;
}
#menuToggle span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: rgba(0, 0, 0, 0.52);
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}
#menuToggle span.first {
    top: 0;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -ms-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
}
#menuToggle span.second {
    top: 12px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -ms-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
}
#menuToggle span.third {
    top: 24px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -ms-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
}
#menuToggle.is-active span.first {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: -2px;
    left: 5px;
}
#menuToggle.is-active span.second {
    width: 0;
    opacity: 0;
}
#menuToggle.is-active span.third {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 26px;
    left: 5px;
}

.header {
	position: relative;
	z-index: 5000;
	margin-bottom: 5rem;
}

.logo-site {
	margin: 3.5rem 0;
}

.header-rightop { width: 100%; position: relative; }
.menu-menu-principal-container { display: none; position: absolute; top: 8rem; left: 0; right: 0; z-index: 10000; background: #3C5D55; }
.menu-menu-principal-container.toggled { display: block; }
.mainMenu { padding-left: 0; text-align: center; padding: 2rem 0; margin-bottom: 0; }
.mainMenu > .menu-item { display: block; padding: 1rem 1.3rem; position: relative; }
.mainMenu > .menu-item:last-child { margin-right: 0; }
.mainMenu > .menu-item > a {
	font-size: 1.2rem;
	font-weight: 500;
	text-transform: uppercase;
	color: #fff;
/* 	padding: 1rem 0; */
	padding: 1.5rem 0;
	letter-spacing: 0.03rem;
	border-bottom: 0.1rem solid transparent;
}
.mainMenu > .menu-item:hover > a { color: #fff; font-weight: 600; border-bottom: 0.1rem solid #3C5D55; }
.mainMenu > .menu-item:first-child > a { margin-left: 0; }
.mainMenu > .menu-item:last-child > a { margin-right: 0; }

.mainMenu > .menu-item.bt-reserv > a { padding: 1.6rem; border: 0.1rem solid #B62337; }
/* .mainMenu > .menu-item.bt-rouge > a:hover { padding: 1.6rem; border: 0.1rem solid #B62337; } */


.mainMenu .sub-menu { display: none; list-style: none; padding-top: 1rem; padding-left: 0; }

.mainMenu .sub-menu > .menu-item {
	margin: 1rem 0;
}
.mainMenu .sub-menu > .menu-item > a {
	font-size: 1.2rem;
	font-weight: 600;
	text-transform: uppercase;
	padding: 0.5rem 0;
	color: #B62337;
}
.mainMenu .sub-menu > .menu-item > a:hover {
	font-weight: 800;
	text-decoration: underline;
}



@media (min-width: 992px) {
	.header { margin-bottom: 0; }
	.header-rightop { width: auto; }
	#menuToggle { display: none; }
	.menu-menu-principal-container { display: block; position: static; background: none; }
	.mainMenu {  }
	.mainMenu > .menu-item { display: inline-block; margin: 0 1.3rem; padding: 0 0 1.5rem; }
	.mainMenu > .menu-item > a { color: #373E44; padding: 1rem 0 0.5rem; }
	.mainMenu > .menu-item:hover > a { color: #3C5D55; }
	
	.mainMenu > .menu-item:hover .sub-menu {
		display: block;
		position: absolute;
		top: 3.4rem;
		left: -50%;
		right: -50%;
		background: #3C5D55;
		color: #fff;
		padding: 1rem 2rem;
		text-align: left;
	}
	.mainMenu .sub-menu > .menu-item > a { color: #fff; }
}