.main-menu {
	position: fixed;
	overflow: hidden;
	top: 0;
	left: 0;
	height: 100%;
	list-style-type: none;
	margin: 0;
	padding: 0;
	background: #666;
	z-index: 100;
}
.sub-menu {
	position: fixed;
	overflow: hidden;
	height: 5em;
	list-style-type: none;
	margin: 0;
	padding: 0;
	background: #999;
	z-index: 100;
}

.sub-menu.size-2 {
	left: -5em;
    width: 10em;
}
.sub-menu.size-3 {
	left: -10em;
    width: 15em;
}

.createorder-sub-menu {
    top: 10em;
}

.drivers-sub-menu {
    top: 20em;
}

.users-sub-menu {
    top: 25em;
}

.diesel-sub-menu {
    top: 35em;
}

.drivers-workreport-sub-menu {
    top: 40em;
}

.main-menu li a {
    display: block;
    text-indent: -500em;
    height: 5em;
    width: 5em;
    line-height: 5em;
    text-align: center;
    color: #fff;
    position: relative;
    -webkit-transition: background 0.1s ease-in-out;
    -moz-transition: background 0.1s ease-in-out;
    transition: background 0.1s ease-in-out;
}
.sub-menu li a {
	display: block;
	float: left;
	text-indent: -500em;
	height: 5em;
	width: 5em;
	line-height: 5em;
	text-align: center;
	color: #fff;
	position: relative;

	-webkit-transition: background 0.1s ease-in-out;
	-moz-transition: background 0.1s ease-in-out;
	transition: background 0.1s ease-in-out;
}

.main-menu li:first-child a {
	background-image: url('../img/trucks.jpg');
	background-size: 15em;
	color: #fff;
}
.main-menu li.blue a:hover {
	background: #47a3da;
	color: #fff;
}
.main-menu li.orange a:hover, .sub-menu li a:hover {
	background: #ea452b;
	color: #fff;
}
.main-menu li.green a:hover {
	background: #80b534;
	color: #fff;
}
.main-menu li.purple a:hover {
	background: #f23c50;
	color: #fff;
}
.main-menu li.turq a:hover {
	background: #409fb8;
	color: #fff;
}

/* class for current item */
.main-menu li.cbp-vicurrent.blue a, .main-menu li.cbp-vicurrent.blue a:hover  {
	background: #fff;
	color: #47a3da;
}
.main-menu li.cbp-vicurrent.orange a, .main-menu li.cbp-vicurrent.orange a:hover, .sub-menu li.cbp-vicurrent.orange a  {
	background: #fff;
	color: #ea452b;
}
.main-menu li.cbp-vicurrent.green a, .main-menu li.cbp-vicurrent.green a:hover  {
	background: #fff;
	color: #80b534;
}
.main-menu li.cbp-vicurrent.purple a, .main-menu li.cbp-vicurrent.purple a:hover {
	background: #fff;
	color: #f23c50;
}
.main-menu li.cbp-vicurrent.turq a, .main-menu li.cbp-vicurrent.turq a:hover {
	background: #fff;
	color: #409fb8;
}
.main-menu li a:before, .sub-menu li a:before{
	speak: none;
	font-style: normal;
	font-weight: normal;
	text-indent: 0em;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	font-size: 2.6em;
	-webkit-font-smoothing: antialiased;
}


/* Example for media query (depends on total height of menu) */
@media screen and (max-height: 34.9375em) { 

	.cbp-vimenu {
		font-size: 70%;
	}

}