/* Common styles of menus */
body,html { overflow-x:hidden; }
.dl-menuwrapper {width: 100%; float: left; position: relative; background: #082240;}
.dl-menuwrapper:first-child {margin-right: 100px;}
.dl-menuwrapper button {background: #ccc; border: none; width: 48px; height: 45px; text-indent: -900em; overflow: hidden; position: relative; cursor: pointer; outline: none;}
.dl-menuwrapper button:after {content: ''; position: absolute; width: 68%; height: 5px; background: #fff; top: 10px; left: 16%; box-shadow: 0 10px 0 #fff,  0 20px 0 #fff;}

.dl-menuwrapper ul {
	padding: 0;
	margin:0;
	list-style: none;
	background: #082240;
}

.dl-menuwrapper.sub-menu-nav ul{
	background: #fff;
	-webkit-overflow-scrolling: touch;
}

.dl-menuwrapper li {
	position: relative;
	text-align: left;
	float:left;
	width:100%;
	background:#082240;
}
.dl-menuwrapper.sub-menu-nav li{
	background: #fff;
}
.dl-menuwrapper.sub-menu-nav li.bottom-links{
	color: #999;
}
.dl-menuwrapper.sub-menu-nav li.bottom-links.bottom-first{
	margin-top: 30px;
}
.dl-menuwrapper li.dl-back{
	margin-top: 16px;
}
.dl-menuwrapper.sub-menu-nav li.dl-back{
	margin-left: -16px;
}
.dl-menuwrapper li.last-links.bottom-first{
	margin-top:30px;
}
.dl-menuwrapper li.last-links a{
	color: #9ca7b3;
	font-size: 17px;
}

.dl-menuwrapper li a {
	display: block;
	position: relative;
	padding: 10px 0;
	font-size: 16px;
	line-height: 20px;
	font-weight: 400;
	color: #fff;
	outline: none;
	border-bottom:1px solid #394e66;
	text-decoration:none;
}
.dl-menuwrapper.sub-menu-nav li a{
	color: #082240;
	border-bottom: 1px solid #ccc;
	font-size: 18px;
    pointer-events: all;
}

.dl-menuwrapper li.dl-back > a {
	float: left;
	background: #069dd6;
	color: #fff;
	padding: 6px 11px 6px 28px;
	font-size: 14px;
	text-transform: capitalize;
    pointer-events: none;
}

.dl-menuwrapper li.dl-back:after,
.dl-menuwrapper li > a:not(:only-child):after {
	content: "";
	background: url(../images/mobile-arrow.png) no-repeat left top;
	position: absolute;
	right: 0;
	width: 7px;
	height: 12px;
	position: absolute;
	right: 6px;
	top: 14px;
	left: auto;
	border: none;
	display: block;
}

.dl-menuwrapper li.dl-back:after {
	left: 10px;
	top: 10px;
	background: url(../images/menu-back-icon.png) no-repeat left top;
}

.dl-menuwrapper li > a:after {
	right: 10px;
	color: rgba(0,0,0,0.15);
}

.dl-menuwrapper .dl-menu {
	opacity: 1;
	position: absolute;
	width: 100%;
	pointer-events: all;
	background: #082240;
	padding: 0 0 100px;
	display: none;
	top:0;
	left:0;
}
.dl-menuwrapper.sub-menu-nav .dl-menu{
	background: #fff;
	z-index: 99;
	top: 0;
	padding:0;
}
.dl-menuwrapper.sub-menu-nav .dl-menu.dl-menuopen{
	/* overflow: scroll; */
	-webkit-overflow-scrolling: touch;
}
.dl-menuwrapper .dl-menu > li{
	padding-left: 16px;
	padding-right: 16px;
}
.dl-menuwrapper .dl-menu > li:first-child{
	margin-top: 16px;
}
.dl-menuwrapper .dl-menu.dl-subview > li:first-child{
	margin-top: 0;
}

.dl-menuwrapper .dl-menu.dl-menuopen {
	opacity: 1;
	pointer-events: auto;
	display:block;
	transform: translateX(0);
	-webkit-transform: translateX(0);
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}
.dl-menuwrapper .dl-menu.dl-menuopen.dl-subview{
	transform: translateX(-100%);
	-webkit-transform: translateX(-100%);
}
.dl-menuwrapper .dl-menu.dl-menuopen.dl-subview .dl-subviewopen{
	transform: translateX(0);
	-webkit-transform: translateX(0);
}


/* Hide the inner submenus */
.dl-menuwrapper li .dl-submenu {
	display:block;
	position: fixed;
	width: 100%;
	left: 0;
	height: 100vh;
    min-height: 100%;
	padding: 0 15px;
	transform: translateX(100%);
	-webkit-transform: translateX(100%);
	top: 0px;
	transition: all 0.4s;
	z-index:9;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}
.dl-menuwrapper li .dl-submenu.open {
	display:block;
	 transform: translateX(0);
}

/*20/08/18*/
.dl-menuwrapper.sub-menu-nav .dl-menu, .dl-menuwrapper .dl-menu {
	transition: all 0.4s;
    transform: translateX(100%);
	display:block;
}
.dl-menuwrapper.sub-menu-nav .dl-menu.open, .dl-menuwrapper .dl-menu.open {
    transform: translateX(0);
	z-index:99;
	display:block;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}
.new-menu .dl-menuwrapper li .dl-submenu { height:auto; overflow-x: hidden; }
.new-menu .dl-menuwrapper .dl-menu.open { overflow-y:inherit; }
/*20/08/18*/


/* 
When a submenu is openend, we will hide all li siblings.
For that we give a class to the parent menu called "dl-subview".
We also hide the submenu link. 
The opened submenu will get the class "dl-subviewopen".
All this is done for any sub-level being entered.
*/
.dl-menu.dl-subview li,
.dl-menu.dl-subview li.dl-subviewopen > a,
.dl-menu.dl-subview li.dl-subview > a {
	/* display: none; */
}

.dl-menu.dl-subview li > .dl-submenu{
	visibility:hidden;
}
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu, .dl-menu.dl-subview li > .dl-submenu > li{
	visibility:visible;
}

.dl-menu.dl-subview li.dl-subview,
.dl-menu.dl-subview li.dl-subview .dl-submenu,
.dl-menu.dl-subview li.dl-subviewopen,
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu,
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu > li {
	display: block;
}

/* Dynamically added submenu outside of the menu context */
.dl-menuwrapper > .dl-submenu {position: absolute; width: 100%; top: 0; left: 16px; margin: 0;}

/* Animation classes for moving out and in */

.dl-menu.dl-animate-out-2 {
	-webkit-animation: MenuAnimOut2 0.4s ease-in-out;
	animation: MenuAnimOut2 0.4s ease-in-out;
}

@-webkit-keyframes MenuAnimOut2 {
	0% { -webkit-transform: translateX(0);}
	100% {
		-webkit-transform: translateX(0);
	}
}

@keyframes MenuAnimOut2 {
	0% { -webkit-transform: translateX(0); transform: translateX(0);}
	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}
}

.dl-menu.dl-animate-in-2 {
	-webkit-animation: MenuAnimIn2 0.4s ease;
	animation: MenuAnimIn2 0.4s ease;
}

@-webkit-keyframes MenuAnimIn2 {
	0% {
		-webkit-transform: translateX(-100%);
	}
	100% {
		-webkit-transform: translateX(0px);
	}
}

@keyframes MenuAnimIn2 {
	0% {
		-webkit-transform: translateX(-100%);
		transform: translateX(-100%);
	}
	100% {
		-webkit-transform: translateX(0px);
		transform: translateX(0px);
	}
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-2 {
	-webkit-animation: SubMenuAnimIn2 0.4s ease-in-out;
	animation: SubMenuAnimIn2 0.4s ease;
}

@-webkit-keyframes SubMenuAnimIn2 {
	0% {
		-webkit-transform: translateX(100%);
	}
	100% {
		-webkit-transform: translateX(0px);
	}
}

@keyframes SubMenuAnimIn2 {
	0% {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
	}
	100% {
		-webkit-transform: translateX(0px);
		transform: translateX(0px);
	}
}

.dl-menuwrapper > .dl-submenu.dl-animate-out-2 {
	-webkit-animation: SubMenuAnimOut2 0.4s ease-in-out;
	animation: SubMenuAnimOut2 0.4s ease-in-out;
}


@-webkit-keyframes SubMenuAnimOut2 {
	0% {
		-webkit-transform: translateX(0%);
	}
	100% {
		-webkit-transform: translateX(100%);
	}
}

@keyframes SubMenuAnimOut2 {
	0% {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
	}
	100% {
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
	}
}

/* No JS Fallback */
.no-js .dl-menuwrapper .dl-menu {position: relative; opacity: 1; -webkit-transform: none; transform: none;}
.no-js .dl-menuwrapper li .dl-submenu {display: block;}
.no-js .dl-menuwrapper li.dl-back {display: none;}
.no-js .dl-menuwrapper li > a:not(:only-child) {background: rgba(0,0,0,0.1);}
.no-js .dl-menuwrapper li > a:not(:only-child):after {content: '';}

/* Colors for demos */
/* Demo 2 */
.demo-2 .dl-menuwrapper button {background: #e86814;}
.demo-2 .dl-menuwrapper button:hover, .demo-2 .dl-menuwrapper button.dl-active, .demo-2 .dl-menuwrapper ul {background: #082240;}

.country-list{margin-top:34px;}
.dl-menu .outer-list a{color:#999999;}
.dl-menu .outer-list img{margin-right:15px;}

.dl-menuwrapper li > span{border-bottom: 1px solid #394e66; padding: 7px 0;font-size: 18px;font-weight: bold;color: #fff;width: 100%; float: left;}

.new-menu{float:left; width:100%; background:#082240;}
body{width:100%; }


@media (min-width: 320px) and (max-width:736px) {
	#sub-menu.dl-menuwrapper.sub-menu-nav .dl-menu.open, #sub-menu.dl-menuwrapper .dl-menu.open {height: calc(100vh - 100px);}
	
}
@media (min-width: 592px) and (max-width:736px) {
	#sub-menu.dl-menuwrapper.sub-menu-nav .dl-menu.open, #sub-menu.dl-menuwrapper .dl-menu.open{height: calc(100vh - 100px);}
}