@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: 'codropsicons';
	src:url('../fonts/codropsicons/codropsicons.eot');
	src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
		url('../fonts/codropsicons/codropsicons.woff') format('woff'),
		url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
		url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
}

.mp-menu .icon { float:none; width:auto; height:auto; background:none; }
.mp-menu a { color:#fff; text-decoration:none!important; font-family:"Open Sans"; font-weight:normal !important; }
.mp-menu a:hover,.mp-menu a:focus { color:#fff; text-decoration:none!important; }




#trigger { /*background:#436075; */border-right: 1px solid#2c475a; color:#fff; padding:10px 15px; font-size:21px; display:inline-block; }
#trigger:hover { }
#trigger img {/* margin-top:6px; */}

.menu-trigger { position: relative; padding-left: 60px; font-size: 0.9em; }
.menu-trigger:before { position: absolute; top: 2px; left: 0; width: 40px; height: 6px; background:#fff;
box-shadow: 0 6px #34495e, 0 12px #fff, 0 18px #34495e, 0 24px #fff; content: ''; }

.mp-menu { position: absolute; /* we can't use fixed here :( */ top: 0; left: 0; z-index: 1; width: 300px; height: 100%;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0); 
}
.mp-level { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
background:#436075;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.mp-level a .icon { font-size:11px; }

/* overlays for pusher and for level that gets covered */
.mp-pusher::after, .mp-level::after, .mp-level::before { position: absolute; top: 0; right: 0; width: 0; height: 0; content: ''; opacity: 0; }
.mp-pusher::after, .mp-level::after { background: rgba(0,0,0,0.3);
-webkit-transition: opacity 0.3s, width 0.1s 0.3s, height 0.1s 0.3s;
-moz-transition: opacity 0.3s, width 0.1s 0.3s, height 0.1s 0.3s;
transition: opacity 0.3s, width 0.1s 0.3s, height 0.1s 0.3s;
}

.mp-level::after { z-index: -1; }
.mp-pusher.mp-pushed::after, .mp-level.mp-level-overlay::after { width: 100%; height: 100%; opacity: 1;
-webkit-transition: opacity 0.3s;
-moz-transition: opacity 0.3s;
transition: opacity 0.3s;
}

.mp-level.mp-level-overlay { cursor: pointer; }
.mp-level.mp-level-overlay.mp-level::before { width: 100%; height: 100%; background: transparent; opacity: 1; }
.mp-pusher, .mp-level {
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
}

/* overlap */
.mp-overlap .mp-level.mp-level-open {
	box-shadow: 1px 0 2px rgba(0,0,0,0.2);
	-webkit-transform: translate3d(-40px, 0, 0);
	-moz-transform: translate3d(-40px, 0, 0);
	transform: translate3d(-40px, 0, 0);
}

/* First level */
.mp-menu > .mp-level,
.mp-menu > .mp-level.mp-level-open,
.mp-menu.mp-overlap > .mp-level,
.mp-menu.mp-overlap > .mp-level.mp-level-open {
	box-shadow: none;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

/* cover */
.mp-cover .mp-level.mp-level-open {
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.mp-cover .mp-level.mp-level-open > ul > li > .mp-level:not(.mp-level-open) {
	-webkit-transform: translate3d(-100%, 0, 0);
	-moz-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
}

/* content style */
.mp-menu ul { margin: 0; padding: 0; list-style: none; }
.mp-menu h2 { margin: 0; padding: 1em; color:#fff; font-weight: 300; text-align:center; font-size:20px; }
.mp-menu.mp-overlap h2::before { position: absolute; top: 0; right: 0; margin-right: 8px; font-size: 75%; line-height: 1.8; opacity: 0;
-webkit-transition: opacity 0.3s, -webkit-transform 0.1s 0.3s;
-moz-transition: opacity 0.3s, -moz-transform 0.1s 0.3s;
transition: opacity 0.3s, transform 0.1s 0.3s;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
transform: translateX(-100%);
}

.mp-menu.mp-cover h2 {
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 1px;
	font-size: 1em;
}

.mp-overlap .mp-level.mp-level-overlay > h2::before {
	opacity: 1;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	transform: translateX(0);
}

.mp-menu ul li > a {
	display: block;
	padding: 0.7em 1em 0.7em 1.8em;
	outline: none;
	box-shadow: inset 0 -1px rgba(0,0,0,0.2);
	font-size:16px;
	-webkit-transition: background 0.3s, box-shadow 0.3s;
	-moz-transition: background 0.3s, box-shadow 0.3s;
	transition: background 0.3s, box-shadow 0.3s;
}

.mp-level ul li .mp-level ul li .mp-level a { font-size:14px !important; padding:7px 15px !important; }

.mp-menu ul li::before { position: absolute; left: 10px; z-index: -1; color:#fff; line-height: 3.7; font-size:13px; }
.mp-level > ul > li:first-child > a { box-shadow: inset 0 -1px rgba(0,0,0,0.2), inset 0 1px rgba(0,0,0,0.2); }
.mp-menu ul li a:hover, .mp-level > ul > li:first-child > a:hover { background:#2c475a; box-shadow: inset 0 -1px rgba(0,0,0,0); }
.mp-menu .mp-level.mp-level-overlay > ul > li > a, .mp-level.mp-level-overlay > ul > li:first-child > a { 
box-shadow: inset 0 -1px rgba(0,0,0,0); }
.mp-level > ul > li:first-child > a:hover, .mp-level.mp-level-overlay > ul > li:first-child > a {
box-shadow: inset 0 -1px rgba(0,0,0,0), inset 0 1px rgba(0,0,0,0); }
 /* seems like Chrome 34.0.1847.131 needs the second shadow otherwise the transition breaks */

.mp-back { background: rgba(0,0,0,0.1); outline: none; color: #fff !important; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; 
display: block; font-size: 0.8em; padding: 1em; position: relative;
box-shadow: inset 0 1px rgba(0,0,0,0.1);
-webkit-transition: background 0.3s;
-moz-transition: background 0.3s;
transition: background 0.3s;
}

.mp-back::after { font-family: 'linecons'; position: absolute; content: "\e037"; right: 10px; font-size: 1.3em; color:#fff; }
.mp-menu .mp-level.mp-level-overlay > .mp-back, .mp-menu .mp-level.mp-level-overlay > .mp-back::after {
background: transparent; box-shadow: none; color: transparent; }
/* Fallback example for browsers that don't support 3D transforms (and no JS fallback) */
/* We'll show the first level only */
.no-csstransforms3d .mp-pusher, .no-js .mp-pusher { padding-left: 300px; }
.no-csstransforms3d .mp-menu .mp-level, .no-js .mp-menu .mp-level { display: none; }
.no-csstransforms3d .mp-menu > .mp-level, .no-js .mp-menu > .mp-level { display: block; }


.mp-back {
    background: rgba(0,0,0,0.1);
    outline: none;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    display: block;
    font-size: 0.8em;
    padding: 1em;
    position: relative;
    box-shadow: inset 0 1px rgba(0,0,0,0.1);
    -webkit-transition: background 0.3s;
    -moz-transition: background 0.3s;
    transition: background 0.3s;
}
.mp-level .product_nav { }
.mp-level .product_nav .thumbnail { padding:0px; background:none; border:none; }

/* ===== Icons Style ===== */

@font-face {
	font-family: 'linecons';
	src:url('../fonts/linecons/linecons.eot');
	src:url('../fonts/linecons/linecons.eot?#iefix') format('embedded-opentype'),
		url('../fonts/linecons/linecons.woff') format('woff'),
		url('../fonts/linecons/linecons.ttf') format('truetype'),
		url('../fonts/linecons/linecons.svg#linecons') format('svg');
	font-weight: normal;
	font-style: normal;
}

.icon:before { font-family: 'linecons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none;
line-height: 1; display: inline-block; margin-right: 0.6em; -webkit-font-smoothing: antialiased; }
.icon-female:before { content: "\f182"; }
.icon-male:before { content: "\f183"; }
.icon-arrow-left:before    { content: "\e032"; }
.icon-arrow-left-2:before  { content: "\e034"; }
.icon-arrow-left-3:before  { content: "\e036"; }
.icon-arrow-left-4:before  { content: "\e038"; }
.icon-arrow-right:before   { content: "\e035"; }
.icon-arrow-right-2:before { content: "\e037"; }
.icon-arrow-right-3:before { content: "\e039"; }
.icon-arrow-right-4:before { content: "\e033"; }
.icon-phone:before 		{ content: "\e000"; }
.icon-news:before 		{ content: "\e001"; }
.icon-photo:before		{ content: "\e002"; }
.icon-shop:before 		{ content: "\e003"; }
.icon-wallet:before		{ content: "\e004"; }
.icon-t-shirt:before	{ content: "\e005"; }
.icon-heart:before		{ content: "\e006"; }
.icon-cloud:before 		{ content: "\e007"; }
.icon-display:before 	{ content: "\e008"; }
.icon-diamond:before 	{ content: "\e009"; }
.icon-banknote:before 	{ content: "\e00a"; }
.icon-data:before		{ content: "\e00b"; }
.icon-music:before 		{ content: "\e00c"; }
.icon-location:before	{ content: "\e00d"; }
.icon-star:before		{ content: "\e00e"; }
.icon-tv:before			{ content: "\e00f"; }
.icon-eye:before 		{ content: "\e010"; }
.icon-megaphone:before	{ content: "\e011"; }
.icon-study:before 		{ content: "\e012"; }
.icon-bubble:before		{ content: "\e013"; }
.icon-sound:before 		{ content: "\e014"; }
.icon-video:before 		{ content: "\e015"; }
.icon-stack:before 		{ content: "\e016"; }
.icon-lab:before 		{ content: "\e017"; }
.icon-food:before 		{ content: "\e018"; }
.icon-cup:before 		{ content: "\e019"; }
.icon-trash:before 		{ content: "\e01a"; }
.icon-user:before 		{ content: "\e01b"; }
.icon-key:before 		{ content: "\e01c"; }
.icon-fire:before		{ content: "\e01d"; }
.icon-clip:before 		{ content: "\e01e"; }
.icon-mail:before 		{ content: "\e01f"; }
.icon-search:before 	{ content: "\e020"; }
.icon-settings:before 	{ content: "\e021"; }
.icon-like:before 		{ content: "\e022"; }
.icon-calendar:before	{ content: "\e023"; }
.icon-camera:before 	{ content: "\e024"; }
.icon-tag:before 		{ content: "\e025"; }
.icon-note:before 		{ content: "\e026"; }
.icon-clock:before 		{ content: "\e027"; }
.icon-lock:before		{ content: "\e028"; }
.icon-vynil:before 		{ content: "\e029"; }
.icon-truck:before		{ content: "\e02a"; }
.icon-paperplane:before { content: "\e02b"; }
.icon-bulb:before		{ content: "\e02c"; }
.icon-pen:before 		{ content: "\e02d"; }
.icon-params:before		{ content: "\e02e"; }
.icon-world:before 		{ content: "\e02f"; }