#page {width:100%; max-width:1050px; min-width:300px}
#footer {width:100%; padding-left:0; padding-right:0; min-width:300px!important}

#headlogo #screenlogo img {width:119%}
#headlogo img:last-of-type {/*width:28%*/}

.titleG, .titleG a {background-color: #4E8421; color: #fff; padding:.3em .5em; margin-bottom:0; text-decoration:none }
.titleG a:hover    {color:#ff6600}

.enDirecto div:nth-child(1) {width: 15%!important; text-align: center}
.enDirecto div:nth-child(2) {width: 83%!important}	

.enDirectoAnuncio {margin:.5em auto 0 auto; font-family: 'Archivo Narrow', 'Open Sans',sans-serif, Raleway; position:relative; clear:both }
.enDirectoAnuncio h1 {width:50%; font-size:1em; position:absolute; top: 26%; left:1em; color:#58595B }


#FlickrPhotoGallery  {margin-left:-.6em!important}

#columnaIzq {float:left; width: 75.68%; max-width:775px; margin-top:10px}
#columnaIzq .comunicados {float:left; margin-left:1em; width:64.52%; margin-top: 15px; min-height: 690px; font-family: 'Open Sans',sans-serif, Raleway; visibility:hidden}
#columnaIzq .comunicados h3 {font-size:.9em;}
#columnaIzq .comunicados li {font-size:.9em;background:linear-gradient(180deg, rgba(233,232,219,1) 0%, rgba(245,245,239,1) 30%, rgba(245,245,239,1) 70%, rgba(233,232,219,1) 100%); margin:0 0 7px 0!important; padding:.75em!important; }
#columnaIzq .comunicados li a { text-decoration: none; font-weight:600;}
#columnaIzq .comunicados #FlickrPhotoGallery  li {padding-right:0!important; margin-right:-.45em!important; margin-bottom:-1.1em!important}
#columnaIzq .comunicados #FlickrPhotoGallery img {width:80px; height:60px; object-fit: cover; object-position: center center; }
#columnaIzq .twitter {float:right; width:32.26%; margin-top: 15px; background:#e6e6e6; visibility:hidden}


#columnaDer {font-size:.82em;}
#columnaDer a {text-decoration: none}
#columnaDer {float:left; margin:10px 0 0 .95%; width:24.41%; max-width: 250px; background:-webkit-gradient(linear, left top, left bottom, from(#d1dae8), to(#fff)); }
#columnaDer img {margin:.75em .55em; width:93.75%; visibility:hidden;  }
#columnaDer a:last-of-type img {margin-bottom:0}
#columnaDer img:hover {	opacity: 1;	-webkit-animation: flash 1.5s;	animation: flash 1.5s; transform:scale(1.03)}
@-webkit-keyframes flash {0% {opacity: .4;}	100% {opacity: 1;}}
@keyframes flash 		 {0% {opacity: .4;}	100% {opacity: 1;}}

#columnaDer ul {margin:1em .5em}
#columnaDer ul li {
	background: url('/imgs/orange_bullet.gif') no-repeat 0 .5em;
	background-repeat: no-repeat;
	padding:0 1em;
	margin-left:.5em;
	margin-bottom: .75em;
	font-weight:520;
}
#columnaDer div {visibility:hidden; background:#fff; margin:.75em .55em 1.5em; width:94%; font-family: 'Open Sans',sans-serif, Raleway; }
#columnaDer div p {margin:-1em auto 1em 1em; padding:1em!important; width:auto; font-size:1em; text-align:center; }
#columnaDer div img {width:100%; margin-left:0}
#columnaDer div h1 {font-size:.82em; text-transform: uppercase; color: #fff; background:#58595B; margin:0!important ; padding: .5em .8em; font-weight:bold}
#columnaDer div ul {padding:1em 0 1em 0; background-color: #fff; border: 10px solid #BCBEC0; margin:0 auto 1em auto}
#columnaDer div a {color:#58595B}
#columnaDer div a:hover {color:#FF6600}

.boton a::before { content: "\2b\0020\0020"; font-family: "Font Awesome\ 6 Free"; font-weight:bold; }
.boton a {text-decoration:none; color: #333; display:block; width: 100%; font-weight: bold; text-align:center; padding:.5em 0; margin-bottom:2em;
			background:linear-gradient(180deg, rgba(233,232,219,1) 0%, rgba(245,245,239,1) 30%, rgba(245,245,239,1) 70%, rgba(233,232,219,1) 100%);  }
.boton a:hover {color: #fff; background: #4E8421; }

#lastPublications {font-family: 'Open Sans', sans-serif; background:-webkit-gradient(linear, left top, left bottom, from(#d1dae8), to(#fff)); width:100%; display:block; position:relative;}
#lastPublications h1 {text-align:center; text-transform:uppercase; padding:1em 0; background:#4E8421; color:#fff}
#lastPublications #ThematicReports {width:98%; margin:0 auto;}
#lastPublications #ThematicReports div {width:23%; height:400px}
#lastPublications #ThematicReports div span {width:85%; background:#58595B; color:#fff;}
#lastPublications #ThematicReports div div {background:#fff; width:100%}
#lastPublications #ThematicReports .middleSpace {margin:0 1.5em!important;}
#lastPublications #ThematicReports .middleSpace2 {margin-right:1.5em!important; }
#lastPublications #ThematicReports div div p {font-size:1.25em}
#lastPublications #ThematicReports div div .pReport {padding:0!important; background:#fff; color:#58595B;}
#lastPublications #ThematicReports div div .pReport2 {padding:0!important; background:#fff; color:#58595B;}
#lastPublications #ThematicReports a:hover .pReport  {color:#ff6600;}
#lastPublications #ThematicReports a:hover .pReport2 {color:#ff6600;}
#lastPublications .boton a {float:left; width:30%; margin-left:1.5em;}
#lastPublications #ThematicReports div div img:hover {transform:scale(1.09);}


#lastPublications #allReports {display:flex; flex-flow:row wrap; justify-content: flex-start; align-content: space-around; gap:2em 2.65%; width:98%; margin:1.35em auto 0 auto!important}
#lastPublications #allReports > h1 {font-size:1.1em; margin:0!important; background-color: #5478AB; color:#fff; padding:.3em 1em}
#lastPublications #allReports > div 		{width:23%; height:450px; overflow:hidden; border:none; }
#lastPublications #allReports > div > span	{background-color:#58595B; color:#fff; font-size:.8em; font-weight:bold; display:inline-block; padding:.3em 1.5em .2em; width:100%; }
#lastPublications #allReports > div > div 	{position:relative; text-align:center; height:100%; overflow:hidden; padding:0 .5em; background:#fff;}
#lastPublications #allReports > div > div img {width:77%; margin-top:5px}
#lastPublications #allReports > div > div .pReport	{background-color:#fff; font-size:.85em; width:100%; margin:1em auto; font-weight:normal; display:block }
#lastPublications #allReports > div > div .pReport2	{background-color:#fff; font-size:.7em; width:100%; margin:.25em auto!important; font-weight:normal; display:block }
#lastPublications #allReports > div > div p  {position:absolute; width: 100%; text-align:left; font-size:1.5em; font-weight:bold; color: white; top:4em; left:1.5em}
#lastPublications #allReports > div > div p span {font-size:.5em; padding:0}
#lastPublications #allReports > div > div img:hover {transform:scale(1.09); z-index:3000}

#lastPublications #allReports .middleSpace, #lastPublications #allReports .middleSpace2 {margin-left:0!important; margin-right:0!important}
#lastPublications #allReports a {text-decoration:none}

@media only screen and (max-width: 768px) {
	
	#lastPublications #allReports > div > div p  {font-size:2.35vw; }
}

@media only screen and (max-width: 600px) {
	#lastPublications #allReports {justify-content: space-between; }
	#lastPublications #allReports {gap:1em .5em; }
	#lastPublications #allReports > div 		{width:48.75%;}
	#lastPublications #allReports > div > div p  {font-size:4.5vw; }
}

@media only screen and (max-width: 320px) {
	#lastPublications #allReports > div 		{width:45.75%;}
}





#SS {
	width:95.74%;
	max-width: 742px;
	margin: 0 0 0 0.95em ;
	clear: both;
	padding: .5em;
	background: transparent url(/imgs/backgrounds/ltbluegradient.png) repeat-x;
	background-size: contain;
	margin-bottom: 0;
    display: inline-block; 
    float: none;
	visibility:hidden;
}

/**** Begin jQuery feature slideshow styles  ****/
#SS .cycler {width:100%;max-width:742px;padding:0; text-align:left; position:relative;font-family:'Open Sans', verdana, Geneva, sans-serif; height:auto;}
#SS #rotator {position:relative;width:100%; max-width:740px;background:transparent!important; display:block; clear:both; max-height:285px; height:27vw}
#SS #rotator div.slide {position:absolute; left:0; top:0; display:none;background:none!important; }
#SS #rotator div.slide:first-child {display:block;} 
#SS #rotator div.slide .caption {width:100%; max-width:740px; background:transparent url(/imgs/rotator/transbg.png) repeat scroll 0 0; left:1px; position:absolute; color:#fff;margin:.3em 0 0 0; padding:.2em 0;}

/* ie7 hack*/*:first-child+html #rotator div.slide .caption {background:transparent url(/imgs/rotator/transbg.png) repeat scroll 0 0;bottom:4px!important;left:4px;position:absolute;color:#fff;width:740px;margin:.3em 0em 0 0; padding:.2em 0 .2em 0;}
#SS #rotator div.slide img {width:100%;max-width:740px; height:auto; bottom:0;border:1px solid #CCC; margin:0; padding:0; }

#SS #rotator div.slide .caption p {margin:4px 6px;padding:0;font-size:.60em;font-size-adjust:.50;line-height:normal!important;}	
#SS #rotator div.slide .caption h1 {font-size:.85em; font-weight:bold; line-height:normal;padding:0; margin:0 0 0 6px;color:#D1E0EF}	
#SS #rotator div.slide .caption a {color:#FF6600; text-decoration:none;}
#SS #rotator div.slide .caption a:hover {color:#FF9900; text-decoration:none;}
#SS #rotator-nav {padding: 5px 0 0 0; margin-top:-5px; margin-left:1px; list-style:none;z-index:1001;}
#SS #rotator-nav li {display:inline-block; }
#SS #rotator-nav li a {font: bold .75em 'Open Sans', verdana, arial; background:#5A76AF; text-decoration: none; margin: 0 4px 0 0; padding: 3px 5px; color:#fff!important; line-height:3em!important }
#SS #rotator-nav .activeLI a {background:#F47B29 url(/imgs/rotator/slidearrow.png) center top no-repeat; color:#fff!important;padding-top:.6em}
#SS #rotator-nav a:focus {outline: none;}
#SS #rotator-nav div.slide {margin-left:0!important;padding-left:0!important;}
#SS #rotator-nav a#pbtn {cursor:pointer;margin: 0 0 0 0; padding:3px 8px;}
#SS #rotator-nav a.pause {background: url(/imgs/rotator/pause.png) center no-repeat}
#SS #rotator-nav a.play {background: url(/imgs/rotator/play.png) center no-repeat}
#SS #rotator-nav a.livewebcastbutton {background:#900;margin-left:1.5em;}
#SS .cycler pre {margin-top:0; color:#390; font-weight:bold}
#SS .cycler .comment {color:#008000}
#SS #navicon a.livewebcastbutton {background:#900;margin-left:-85.3px; font-size:0.70em; color:#FFF; text-decoration:none; padding:4px;}
/**** End jQuery feature slideshow styles  ****/


#pre-footer { background:#0e0e0e; width:100%; Font-Family: 'Open Sans',sans-serif, Raleway; color: #999 /*#737476*/; height:320px;clear:both}
#pre-footer h3 {font-size:2em;}
#pre-footer h3, #pre-footer a { color:#FFF;  font-weight:500; }
#pre-footer .footer-address {width:53%; padding: 2% 0 0 4% ; font-size:.85em; }
#pre-footer li.ic-address { padding-top:28px; background:url(/imgs/icons/location.png) 0 .2em no-repeat;padding:0 0 0 1.8em;margin:2em 1em 1em 0em; line-height:130%}
#pre-footer li.ic-phone { padding-top:28px; background:url(/imgs/icons/phone.png) 0 .2em no-repeat;padding:0 0 0 1.8em;margin:1em 1em 1em 0em; line-height:130%}
#pre-footer li.ic-mail { padding-top:28px; background:url(/imgs/icons/mail.png) 0 .1em no-repeat;padding:0 0 0 1.8em;margin:1em 1em 1em 0em; line-height:130%}
#pre-footer .pre-footer-img {width:40%; float:left;margin:0}
#pre-footer .pre-footer-img img {height:320px; object-fit: cover; object-position: center center; width:100%}

#footer {margin-top:0;}

#dl-logo {float:left; display:none}

@media only screen and (max-width: 1050px) {
	#headlogo #screenlogo {display:none;}
	#columnaDer {width:23%; margin-right:0}
	#lastPublications #ThematicReports .middleSpace  {margin:0 1vw!important;}
	#lastPublications #ThematicReports .middleSpace2 {margin-right:1vw!important;}
	#navigation .sf-menu * {font-size:1.3vw}
	#dl-menu {display:none;}
	#dl-logo {display:block;}
	.enDirecto div:nth-child(1) {width: 15%!important; text-align: center}
	.enDirecto div:nth-child(2) {width: 83%!important}	
}

@media only screen and (max-width: 900px) {
	#lastPublications #ThematicReports div span {width:81%;}
	.enDirectoAnuncio h1 {font-size:2vw; top:20%}
}


@media only screen and (max-width: 700px) {
	#maincontent #rightmaincol #tabForm {width:100%}
	#globsearch form {display:none}
	#globsearch #navicon {margin-right:23vw; display:none;}
	#columnaIzq .twitter {float:none; /*display:none;*/}
	#columnaIzq .comunicados {float:none; width:100%}
}

@media only screen and (max-width: 600px) {
	.enDirecto div:nth-child(1) {width: 22%!important; text-align: center; font-size:3vw!important}
	.enDirecto div:nth-child(2) {width: 73%!important; font-size:3vw!important}
	
	#dl-menu {display:block;}
	#dl-logo {display:none}
	#navigation {display:none}
	#SS #rotator {height:35vw;}
	#SS #rotator-nav li a {font-size:2.7vw;}
	
	#columnaIzq {float:none; width:96%; margin-left:-.5em; }
	#columnaIzq .twitter {float:none; width:100%; margin:1.5em 1em;}
	
	#columnaDer {float:none; clear:both; width: 100%; margin:0 auto; max-width:385px; height:auto;}
	#columnaDer img, #columnaDer div {font-size:5vw; visibility: visible}
	
	#lastPublications #ThematicReports div {width:48%; height:420px}
	#lastPublications #ThematicReports .middleSpace {margin:0 0 0 .5em!important;}
	#lastPublications #ThematicReports .middleSpace2 {clear:both; margin-right:.5em!important; }	
	#lastPublications #ThematicReports div span {width:81%;}
	#lastPublications .boton a {float:left; width:30%; margin-left:.75em; height:10vw; font-size:3.5vw}
	
	#pre-footer h3 {font-size:4vw;}
	#pre-footer .footer-address { width:55%; padding: 1% 0 0 2% ; font-size:.85em}
	#pre-footer li.ic-address { padding-top:28px; background:url(/imgs/icons/location.png) 0 .2em no-repeat;padding:0 0 0 1.8em;margin:2em 1em 1em 0em; line-height:100%}
	#pre-footer li.ic-phone { padding-top:28px; background:url(/imgs/icons/phone.png) 0 .2em no-repeat;padding:0 0 0 1.8em;margin:1em 1em 1em 0em; line-height:100%}
	#pre-footer li.ic-mail { padding-top:28px; background:url(/imgs/icons/mail.png) 0 .1em no-repeat;padding:0 0 0 1.8em;margin:1em 1em 1em 0em; line-height:100%}
	
	
	#comunicados ul li {font-size:4vw;}
	
	#breadcrumb {display:none;}	
	#shortrotator div.slide .caption  {display:none;}	
	#sCaption {display:none;}

}	

/* Start mobile device menu */
.dl-menuwrapper {
	width: 100%;
	max-width: 300px;
	float: left;
	position: relative;
	-webkit-perspective: 1000px;
	perspective: 1000px;
	-webkit-perspective-origin: 50% 200%;
	perspective-origin: 50% 200%;
	z-index:2000;
}

.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:hover,
.dl-menuwrapper button.dl-active,
.dl-menuwrapper ul {
	background: #aaa;
}

.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;
	list-style: none;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.dl-menuwrapper li {
	position: relative;
}

.dl-menuwrapper li a {
	display: block;
	position: relative;
	padding: 15px 20px;
	font-size: 16px;
	line-height: 20px;
	font-weight: 500;
	color: #fff;
	outline: none;
	text-decoration:none;
}

.no-touch .dl-menuwrapper li a:hover {
	background: rgba(255,248,213,0.1);
}

.dl-menuwrapper li.dl-back > a {
	padding-left: 30px;
	background: rgba(0,0,0,0.1);
}

.dl-menuwrapper li.dl-back:after,
.dl-menuwrapper li > a:not(:only-child):after {
	position: absolute;
	top: 0;
	line-height: 50px;
	font-family: FontAwesome;
	speak: none;
	-webkit-font-smoothing: antialiased;
	content: "\f0da";
	color: #fff;
}

.dl-menuwrapper li.dl-back:after {
	left: 10px;
	color: #fff; /*rgba(212,204,198,0.3);*/
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}

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

.dl-menuwrapper .dl-menu {
	margin: 5px 0 0 0;
	position: absolute;
	width: 100%;
	opacity: 0;
	pointer-events: none;
	-webkit-transform: translateY(10px);
	transform: translateY(10px);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.dl-menuwrapper .dl-menu.dl-menu-toggle {
	transition: all 0.3s ease;
}

.dl-menuwrapper .dl-menu.dl-menuopen {
	opacity: 1;
	pointer-events: auto;
	-webkit-transform: translateY(0px);
	transform: translateY(0px);
}

/* Hide the inner submenus */
.dl-menuwrapper li .dl-submenu {
	display: none;
}

/* 
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-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: 50px;
	left: 0;
	margin: 0;
}

/* Animation classes for moving out and in */

.dl-menu.dl-animate-out-1 {
	-webkit-animation: MenuAnimOut1 0.4s;
	animation: MenuAnimOut1 0.4s;
}

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

.dl-menu.dl-animate-out-3 {
	-webkit-animation: MenuAnimOut3 0.4s ease;
	animation: MenuAnimOut3 0.4s ease;
}

.dl-menu.dl-animate-out-4 {
	-webkit-animation: MenuAnimOut4 0.4s ease;
	animation: MenuAnimOut4 0.4s ease;
}

.dl-menu.dl-animate-out-5 {
	-webkit-animation: MenuAnimOut5 0.4s ease;
	animation: MenuAnimOut5 0.4s ease;
}

@-webkit-keyframes MenuAnimOut1 {
	0% { }
	50% {
		-webkit-transform: translateZ(-250px) rotateY(30deg);
	}
	75% {
		-webkit-transform: translateZ(-372.5px) rotateY(15deg);
		opacity: .5;
	}
	100% {
		-webkit-transform: translateZ(-500px) rotateY(0deg);
		opacity: 0;
	}
}

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

@-webkit-keyframes MenuAnimOut3 {
	0% { }
	100% {
		-webkit-transform: translateZ(300px);
		opacity: 0;
	}
}

@-webkit-keyframes MenuAnimOut4 {
	0% { }
	100% {
		-webkit-transform: translateZ(-300px);
		opacity: 0;
	}
}

@-webkit-keyframes MenuAnimOut5 {
	0% { }
	100% {
		-webkit-transform: translateY(40%);
		opacity: 0;
	}
}

@keyframes MenuAnimOut1 {
	0% { }
	50% {
		-webkit-transform: translateZ(-250px) rotateY(30deg);
		transform: translateZ(-250px) rotateY(30deg);
	}
	75% {
		-webkit-transform: translateZ(-372.5px) rotateY(15deg);
		transform: translateZ(-372.5px) rotateY(15deg);
		opacity: .5;
	}
	100% {
		-webkit-transform: translateZ(-500px) rotateY(0deg);
		transform: translateZ(-500px) rotateY(0deg);
		opacity: 0;
	}
}

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

@keyframes MenuAnimOut3 {
	0% { }
	100% {
		-webkit-transform: translateZ(300px);
		transform: translateZ(300px);
		opacity: 0;
	}
}

@keyframes MenuAnimOut4 {
	0% { }
	100% {
		-webkit-transform: translateZ(-300px);
		transform: translateZ(-300px);
		opacity: 0;
	}
}

@keyframes MenuAnimOut5 {
	0% { }
	100% {
		-webkit-transform: translateY(40%);
		transform: translateY(40%);
		opacity: 0;
	}
}

.dl-menu.dl-animate-in-1 {
	-webkit-animation: MenuAnimIn1 0.3s;
	animation: MenuAnimIn1 0.3s;
}

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

.dl-menu.dl-animate-in-3 {
	-webkit-animation: MenuAnimIn3 0.4s ease;
	animation: MenuAnimIn3 0.4s ease;
}

.dl-menu.dl-animate-in-4 {
	-webkit-animation: MenuAnimIn4 0.4s ease;
	animation: MenuAnimIn4 0.4s ease;
}

.dl-menu.dl-animate-in-5 {
	-webkit-animation: MenuAnimIn5 0.4s ease;
	animation: MenuAnimIn5 0.4s ease;
}

@-webkit-keyframes MenuAnimIn1 {
	0% {
		-webkit-transform: translateZ(-500px) rotateY(0deg);
		opacity: 0;
	}
	20% {
		-webkit-transform: translateZ(-250px) rotateY(30deg);
		opacity: 0.5;
	}
	100% {
		-webkit-transform: translateZ(0px) rotateY(0deg);
		opacity: 1;
	}
}

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

@-webkit-keyframes MenuAnimIn3 {
	0% {
		-webkit-transform: translateZ(300px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateZ(0px);
		opacity: 1;
	}
}

@-webkit-keyframes MenuAnimIn4 {
	0% {
		-webkit-transform: translateZ(-300px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateZ(0px);
		opacity: 1;
	}
}

@-webkit-keyframes MenuAnimIn5 {
	0% {
		-webkit-transform: translateY(40%);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateY(0);
		opacity: 1;
	}
}

@keyframes MenuAnimIn1 {
	0% {
		-webkit-transform: translateZ(-500px) rotateY(0deg);
		transform: translateZ(-500px) rotateY(0deg);
		opacity: 0;
	}
	20% {
		-webkit-transform: translateZ(-250px) rotateY(30deg);
		transform: translateZ(-250px) rotateY(30deg);
		opacity: 0.5;
	}
	100% {
		-webkit-transform: translateZ(0px) rotateY(0deg);
		transform: translateZ(0px) rotateY(0deg);
		opacity: 1;
	}
}

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

@keyframes MenuAnimIn3 {
	0% {
		-webkit-transform: translateZ(300px);
		transform: translateZ(300px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateZ(0px);
		transform: translateZ(0px);
		opacity: 1;
	}
}

@keyframes MenuAnimIn4 {
	0% {
		-webkit-transform: translateZ(-300px);
		transform: translateZ(-300px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateZ(0px);
		transform: translateZ(0px);
		opacity: 1;
	}
}

@keyframes MenuAnimIn5 {
	0% {
		-webkit-transform: translateY(40%);
		transform: translateY(40%);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-1 {
	-webkit-animation: SubMenuAnimIn1 0.4s ease;
	animation: SubMenuAnimIn1 0.4s ease;
}

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

.dl-menuwrapper > .dl-submenu.dl-animate-in-3 {
	-webkit-animation: SubMenuAnimIn3 0.4s ease;
	animation: SubMenuAnimIn3 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-4 {
	-webkit-animation: SubMenuAnimIn4 0.4s ease;
	animation: SubMenuAnimIn4 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-5 {
	-webkit-animation: SubMenuAnimIn5 0.4s ease;
	animation: SubMenuAnimIn5 0.4s ease;
}

@-webkit-keyframes SubMenuAnimIn1 {
	0% {
		-webkit-transform: translateX(50%);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0px);
		opacity: 1;
	}
}

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

@-webkit-keyframes SubMenuAnimIn3 {
	0% {
		-webkit-transform: translateZ(-300px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateZ(0px);
		opacity: 1;
	}
}

@-webkit-keyframes SubMenuAnimIn4 {
	0% {
		-webkit-transform: translateZ(300px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateZ(0px);
		opacity: 1;
	}
}

@-webkit-keyframes SubMenuAnimIn5 {
	0% {
		-webkit-transform: translateZ(-200px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateZ(0);
		opacity: 1;
	}
}

@keyframes SubMenuAnimIn1 {
	0% {
		-webkit-transform: translateX(50%);
		transform: translateX(50%);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateX(0px);
		transform: translateX(0px);
		opacity: 1;
	}
}

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

@keyframes SubMenuAnimIn3 {
	0% {
		-webkit-transform: translateZ(-300px);
		transform: translateZ(-300px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateZ(0px);
		transform: translateZ(0px);
		opacity: 1;
	}
}

@keyframes SubMenuAnimIn4 {
	0% {
		-webkit-transform: translateZ(300px);
		transform: translateZ(300px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateZ(0px);
		transform: translateZ(0px);
		opacity: 1;
	}
}

@keyframes SubMenuAnimIn5 {
	0% {
		-webkit-transform: translateZ(-200px);
		transform: translateZ(-200px);
		opacity: 0;
	}
	100% {
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
		opacity: 1;
	}
}

.dl-menuwrapper > .dl-submenu.dl-animate-out-1 {
	-webkit-animation: SubMenuAnimOut1 0.4s ease;
	animation: SubMenuAnimOut1 0.4s ease;
}

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

.dl-menuwrapper > .dl-submenu.dl-animate-out-3 {
	-webkit-animation: SubMenuAnimOut3 0.4s ease;
	animation: SubMenuAnimOut3 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-out-4 {
	-webkit-animation: SubMenuAnimOut4 0.4s ease;
	animation: SubMenuAnimOut4 0.4s ease;
}

.dl-menuwrapper > .dl-submenu.dl-animate-out-5 {
	-webkit-animation: SubMenuAnimOut5 0.4s ease;
	animation: SubMenuAnimOut5 0.4s ease;
}

@-webkit-keyframes SubMenuAnimOut1 {
	0% {
		-webkit-transform: translateX(0%);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateX(50%);
		opacity: 0;
	}
}

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

@-webkit-keyframes SubMenuAnimOut3 {
	0% {
		-webkit-transform: translateZ(0px);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateZ(-300px);
		opacity: 0;
	}
}

@-webkit-keyframes SubMenuAnimOut4 {
	0% {
		-webkit-transform: translateZ(0px);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateZ(300px);
		opacity: 0;
	}
}

@-webkit-keyframes SubMenuAnimOut5 {
	0% {
		-webkit-transform: translateZ(0);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateZ(-200px);
		opacity: 0;
	}
}

@keyframes SubMenuAnimOut1 {
	0% {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateX(50%);
		transform: translateX(50%);
		opacity: 0;
	}
}

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

@keyframes SubMenuAnimOut3 {
	0% {
		-webkit-transform: translateZ(0px);
		transform: translateZ(0px);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateZ(-300px);
		transform: translateZ(-300px);
		opacity: 0;
	}
}

@keyframes SubMenuAnimOut4 {
	0% {
		-webkit-transform: translateZ(0px);
		transform: translateZ(0px);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateZ(300px);
		transform: translateZ(300px);
		opacity: 0;
	}
}

@keyframes SubMenuAnimOut5 {
	0% {
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
		opacity: 1;
	}
	100% {
		-webkit-transform: translateZ(-200px);
		transform: translateZ(-200px);
		opacity: 0;
	}
}

/* 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 4 */
.dl-menuwrapper button {
	background: #80C243;
}

.dl-menuwrapper button:hover,
.dl-menuwrapper button.dl-active,
.dl-menuwrapper ul {
	background: #5579AB; /*#80C243;*/
}

.dl-menuwrapper img {
	float: right;
	margin-top: 1vw;
}