﻿.CVIMainMenu {
    width: 100%;
}
.CVIMainMenu .wrapper {
	min-width: 320px;
	max-width: 1200px;
	margin: 0 auto;
	font-size: 62.5%;
    padding: 0 40px;
}
.CVIMainMenu a {
	text-decoration: none;
}
.CVIMainMenu .header,
#main-menu .ImageContactWrapper {
	padding: 20px 40px;
	padding-left: 0;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}
#main-menu .ImageContactWrapper {
	font-size: 62.5%;
}
.CVIMainMenu .header-left,
#main-menu .ImageContactWrapper .ProfileImage {
	display: inline-block;
	position: relative;
}
.CVIMainMenu .header-left .logo-separator {
	display: inline-block;
	width: 1px;
	height: 95px;
	background-color: #616264;
	margin: 0 20px;
}
.CVIMainMenu .header-right {
	float: right;
	margin-top: 16px;
}
#main-menu .ImageContactWrapper {
	min-height: 107px;
}
#main-menu .ImageContactWrapper .ContactLinks {
	float: right;
	position: relative;
	font-size: 62.5%;
}
#main-menu .ImageAppWrapper .AppLinks {
	font-size: 62.5%;
}
#main-menu .ImageContactWrapper .ContactLinks a {
	text-decoration: none;
	color: #404041;
}
#main-menu .ImageContactWrapper .ProfileImage img,
#main-menu .ImageAppWrapper .ProfileImage img {
	max-width: 230px;
	max-height: 150px;
	object-fit: contain;
}
.CVIMainMenu h1 img,
#main-menu .ImageContactWrapper .ContactLinks img {
	position: relative;
	top: 3px;
    opacity: 0.5;
}
.CVIMainMenu h1:hover img,
#main-menu .ImageContactWrapper .ContactLinks h1:hover img {
    opacity: 1;
}
.CVIMainMenu .menu {
	display: block;
	position: relative;
	width: 100%;
	max-width: 1120px;
	min-width: 320px;
}
.CVIMainMenu .nav {
	text-align: justify;
    text-justify: distribute;
	font-size: 0;
	width: 100%;
}
.CVIMainMenu .nav:after {
	content: '';
	display: inline-block;
	width: 100%;
}
.CVIMainMenu .nav li {
	display: inline-block;
	font-size: 12px;
}
.CVIMainMenu .nav ul li:hover a {
	background-color: #ccc;
}
.CVIMainMenu .nav li ul li { 
	display: block;
}
.CVIMainMenu .nav li ul a {
	width: 100%;
	font-family: convergeFont-LatoRegular;
}
.CVIMainMenu .nav li a {
	padding: 1em;
}
.CVIMainMenu .compact-menu {
	display: none;
	height: 70px;
	padding: 20px 0;
}
.CVIMainMenu .compact-menu-button {
    display: inline-block;
	width: 55px; /* Size of image + padding */
	height: 55px; /* Size of image + padding */
	padding: 10px;
}
.CVIMainMenu .compact-menu-button:hover {
	cursor: pointer;
}
.CVIMainMenu .compact-menu-icon {
	display: inline-block;
	background-image: url('/images/default-source/cvi/common/icon_menunav_greybackground_35x35px.png?Status=Temp&sfvrsn=2');
	width: 100%;
	height: 100%;
}
.CVIMainMenu .compact-menu-booking {
	float: right;
}
.CVIMainMenu .compact-submenu-button {
	display: block;
	position: absolute;
	right: 0;
	width: 45px;
	height: 45px;
	padding: 5px 0;
}
.CVIMainMenu.compact-submenu-button:hover {
	cursor: pointer;
}
.CVIMainMenu .compact-submenu-button-icon-collapsed {
	display: block;
	width: 100%;
	height: 100%;
	border-left: 1px solid #616162;/* ------- */
}
.CVIMainMenu .compact-submenu-button-icon-collapsed:after {
	position: absolute;
	content: '';
	width: 20px;
	height: 20px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-image: url('/images/default-source/cvi/common/icon-arrow-down-20x20.png?Status=Temp&sfvrsn=2');
}
.CVIMainMenu .compact-submenu-button-icon-expanded {
	display: block;
	width: 100%;
	height: 100%;
	background-color: ;
	border-left: 1px solid #616162;/* ------- */
}
.CVIMainMenu .compact-submenu-button-icon-expanded:after {
	position: absolute;
	content: '';
	width: 20px;
	height: 20px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-image: url('/images/default-source/cvi/common/icon-arrow-down-20x20.png?Status=Temp&sfvrsn=2');
}
.CVIMainMenu .compact-submenu-button {
	display: none;
}
.CVIMainMenu .nav li ul li .compact-submenu-button {
	display: none;
}
.CVIMainMenu .hidden-menu {
	display: none;
}
.CVIMainMenu .visible-menu {
    display: block;
}
.CVIMainMenu h1,
#main-menu .ImageContactWrapper .ContactLinks h1 {
	font-family: convergeFont-LatoMedium;
	font-weight: normal;
	font-size: 1.75em;
	color: #404041;
	background-color: #f1f1f2;
	padding: 5px 10px;
	letter-spacing: 1px;
    text-align: center;
}
.CVIMainMenu h2,
#main-menu .ImageContactWrapper .ContactLinks h2 {
	font-family: convergeFont-LatoMedium;
	font-weight: normal;
	font-size: 1.6em;
	color: #404041;
	letter-spacing: 1px;
    margin-top: 10px;
    text-align: center;
}
.CVIMainMenu .nav a {
	/* Menu style */
	display: inline-block;
	background-color: white;
	font-family: convergeFont-LatoBold;
	font-size: 1.1em;
	color: #404041;
	padding: 1em 0;
}
#main-menu .ImageAppWrapper {
	display: none;
	max-width: 1200px;
	padding: 0 40px;
	margin: 0 auto;
	margin-bottom: 15px;
}
.CVIMainMenu .logo-app-wrapper {
	display: none;
	max-width: 1200px;
	height: 190px;
	padding: 0 40px;
	margin: 0 auto;
	margin-top: 20px
}
.CVIMainMenu .logo-wrapper,
#main-menu .ImageAppWrapper .ProfileImage {
	display: inline-block;
	position: relative;
	width: 49%;
	text-align: center;
	margin: 0 auto;
}
.CVIMainMenu .logo-wrapper img {
	margin-left: 20px; /* Should delete this once image white-space is removed from right-edge */
}
.CVIMainMenu .app-wrapper,
#main-menu .ImageAppWrapper .AppLinks {
	display: inline-block;
	vertical-align: top;
	width: 49%;
	text-align: center;
	margin: 0 auto;
}
#main-menu .ImageAppWrapper .AppLinks a {
	text-decoration: none;
}
.CVIMainMenu .app-wrapper img,
#main-menu .ImageAppWrapper .AppLinks img {
	display: inline-block;
	vertical-align: top;
	width: 140px;
	object-fit: contain;
}
.CVIMainMenu .logo-app-wrapper h3,
#main-menu .ImageAppWrapper .AppLinks h3 {
	font-family: convergeFont-LatoItalic;
	font-size: 1.5em;
	color: #404041;
}


@media screen and (min-width: 1120px) {
	.CVIMainMenu .hidden-menu { display: block; }
	.CVIMainMenu .nav li ul { display: none; }
	.CVIMainMenu .nav li:hover ul li { width: 200px; text-align: left; }
	.CVIMainMenu .nav li a:hover + .hidden, .CVIMainMenu .hidden:hover { display: block; position: absolute; z-index: 10; }
}
@media screen and (max-width: 1120px) {
	#main-menu .ImageContactWrapper { display: none; }
	#main-menu .ImageAppWrapper { display: block; }

	.CVIMainMenu .logo-app-wrapper { display: block; }
	.CVIMainMenu { margin-bottom: 20px; }
	.CVIMainMenu .header { display: none; }
    .CVIMainMenu .compact-menu { display: block; }
    .CVIMainMenu .compact-submenu-button {display: block; }
    .CVIMainMenu .outer-wrapper { background-color: #404041; }
    .CVIMainMenu .compact-menu h2 { color: white; }
    
	.CVIMainMenu .menu { border-top: 1px solid #7f7f7f; }
	.CVIMainMenu .hidden-menu { display: none; }
	
	.CVIMainMenu .menu { min-width: 100px; max-width: 100%; }
	.CVIMainMenu .nav { text-align: initial; text-justify: initial; min-width: 260px; }
	.CVIMainMenu .nav:after { display: block; }
	.CVIMainMenu .nav li { display: block; border-bottom: 1px solid #616162; }
	.CVIMainMenu .nav li:last-child { border: 0; }
	.CVIMainMenu .nav li a { width: 100%; padding-left: 20px; }
	.CVIMainMenu .nav li:hover ul li { width: 100%; }
	.CVIMainMenu .nav li ul li a { padding-left: 40px; }
	.CVIMainMenu .nav li a:hover + .hidden, .CVIMainMenu .hidden:hover { position: relative; }
	.CVIMainMenu .nav li ul li { margin-top: 1px; margin-bottom: -1px; border-bottom: 1px solid #616162;}
	.CVIMainMenu .nav li ul li:last-child { margin-bottom: 0;}
	.CVIMainMenu .nav li:hover a { background-color: white; }
	.CVIMainMenu .nav li ul li:hover a { background-color: #ccc; }
	.CVIMainMenu .compact-menu { height: 120px; }
	.CVIMainMenu .nav ul li:hover a { background-color: inherit; }
}
@media screen and (max-width: 659px) {
	.CVIMainMenu .app-wrapper img { margin-top: 5px; }
	#main-menu .ImageAppWrapper .AppLinks img { margin-top: 5px; }
}
@media screen and (max-width: 560px) {
	.CVIMainMenu .logo-app-wrapper { height: auto; margin-top: 0;}
	.CVIMainMenu .logo-wrapper { width: 100%; margin-top: 20px; position: relative; top:inherit; transform: translateY(0); }
	.CVIMainMenu .app-wrapper { width: 100%; margin-top: 10px; position: relative; top:inherit; transform: translateY(0); }
	.CVIMainMenu .app-wrapper img { margin-top: 0px; }

	#main-menu .ImageAppWrapper .ProfileImage { width: 100%; }
	#main-menu .ImageAppWrapper .AppLinks { width: 100%; }
	#main-menu .ImageAppWrapper { margin-bottom: 20px; }
}
@media screen and (max-width: 420px) {
	.CVIMainMenu .compact-menu-button { padding: 0; width: 35px; height: 35px; }
	.CVIMainMenu .compact-menu-booking h1 { font-size: 1.6em; }
	.CVIMainMenu .compact-menu-booking h2 { display: none; }
	.CVIMainMenu .compact-menu { height: 70px; }
}
@media screen and (max-width: 412px) {
	.CVIMainMenu .wrapper { padding: 0 20px; }
	.CVIMainMenu .logo-app-wrapper { padding: 0 20px; }
	#main-menu .ImageAppWrapper { padding: 0 20px; }
}
@media screen and (max-width: 345px) {
	.CVIMainMenu .compact-menu-booking h1 { font-size: 1.4em; }
}
@media screen and (max-width: 324px) {
	.CVIMainMenu .app-wrapper img { margin-top: 5px; }
}










