@import url("../css/font.css");
#menu { font-size: 140%; z-index: 10000; width: 300px; position: absolute; left: -1000px; top: 0; background: rgba(0, 51, 91, 0.9); padding: 10px 5px; box-shadow: 10px 6px 20px #666; font-family: futura-pt-condensed, sans-serif; }
#menu h5 { font-family: futura-pt-condensed, sans-serif; text-transform: uppercase; font-size: 140%; font-weight: medium; padding: 0; margin: 0; color: #FFF; padding: 5px 5px; margin-top: 40px; }
#menu .closeButton { color: #fff; position: relative; text-align: right; right: 10px; margin: 0; padding: 0; }
#menu .closeButton a { color: #FFF; text-decoration: none; transition: all 0.2s; }
#menu b { display: none; }
#menu ul { width: 100%; float: left; list-style-type: none; margin: 0; padding: 0; border: 0px solid red; }
#menu ul li { margin-bottom: 5px; font-weight: 500; }
#menu ul li ul { display: none; border: 0px solid green; margin-bottom: 20px; }
#menu ul li ul li { float: none; width: 200px; }
#menu ul li ul li a { border: 0; font-size: 100%; font-weight: normal; color: #FFF; }
#menu ul li ul li a:hover, #menu ul li ul li a.selected { color: #1CABE2; }
#menu ul li a { outline: none; border-top: 1px solid #1CABE2; width: 253px; float: left; text-align: left; text-decoration: none; padding: 5px; display: block; text-transform: uppercase; color: #1CABE2; }
#menu ul li a:hover, #menu ul li a.selected { color: #1CABE2; }
#menu ul li a.down { padding-top: 2px; border-left: 1px solid #1CABE2; width: 36px; height: 30px; float: right; background-image: url("/assets/img/icon/menu-bottom.png"); background-repeat: no-repeat; background-position: 7px 5px; background-size: 1.2em; }
#menu ul li a.active { background-image: url("/assets/img/icon/menu-top.png"); background-repeat: no-repeat; background-position: center center; background-size: 1.2em; }
#menu ul li a#linkUnicef { text-transform: none; color: #1CABE2; }
#menu .connectShare { color: #FFF; height: 60px; padding: 10px 5px; }
#menu .connectShare div { display: -webkit-flex; /* Safari */ display: flex; text-align: right; }
#menu .connectShare div img { height: 26px; }
#menu .connectShare img { height: 26px; }
#menu .connectShare h5 { font-family: futura-pt-condensed, sans-serif; text-transform: uppercase; font-size: 140%; font-weight: medium; padding: 0; margin: 0; color: #FFF; }
@media screen and (min-width: 960px) { #menu { font-size: 100%; z-index: 1000; padding: 0 0 0 16px; height: 45px; background: #00325b; left: auto; top: auto; width: 100%; box-shadow: 0px 0px 0px #666; position: relative; min-height: auto; }
  #menu h5 { display: none; }
  #menu .connectShare { display: none; } }
@media only screen and (min-width: 960px) and (-webkit-min-device-pixel-ratio: 1) { #menu { letter-spacing: 0; } }
@media only screen and (min-width: 960px) and (-webkit-min-device-pixel-ratio: 2) { #menu { letter-spacing: 0; } }
@media screen and (min-width: 960px) { #menu .content { padding: 0; margin: 0 auto; width: 960px; }
  #menu .closeButton { display: none; }
  #menu ul { position: relative; border: 0px solid red; }
  #menu ul li { position: relative; float: left; border: 0; border: 0px solid red; font-size: 115%; text-align: left; padding-right: 2.1%; height: 40px; }
  #menu ul li:last-child { padding-right: 0px; }
  #menu ul li a { color: #fff; text-decoration: none; padding: 8px 0 0 0; display: block; width: 100%; height: 100%; border: 0px solid green; }
  #menu ul li a:hover { color: #1CABE2; }
  #menu ul li a.down { display: none; }
  #menu ul li ul { display: none; position: absolute; top: 100%; left: 0; background: #333; padding: 0; background: #FFF; border: 1px solid #DDD; overflow: hidden; width: 400px; box-shadow: 10px 6px 20px #666; margin-left: 0px; padding-bottom: 10px; padding-top: 10px; margin-left: -16px; }
  #menu ul li ul b { color: #124F7B; display: block; padding: 20px 0 5px 20px; text-transform: uppercase; }
  #menu ul li ul li { float: none; margin: 0; padding: 0; width: 100%; border: 0px solid green; }
  #menu ul li ul li a { color: #124F7B; margin-left: 30px; font-size: 80%; border: 0px solid red; }
  #menu ul li:hover > ul { display: block; } }
@media screen and (min-width: 1280px) { #menu .content { width: 1280px; }
  #menu ul li { font-size: 120%; padding-right: 2.6%; } }

#menuFoot { position: absolute; left: 0; right: 0; background: #FFF; clear: both; overflow: hidden; font-family: futura-pt-condensed, sans-serif; border-top: 20px solid #e9ebeb; }
#menuFoot h5 { display: none; }
#menuFoot .content { padding: 16px; margin: 0 auto; }
#menuFoot .follow { clear: both; font-size: 90%; border: 0px solid red; text-align: right; }
#menuFoot .follow img { width: 24px; filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); /* Firefox 3.5+, IE10 */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */ -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */ -webkit-backface-visibility: hidden; /* Fix for transition flickering */ }
#menuFoot .menu { display: none; overflow: hidden; width: 100%; }
#menuFoot .menu ul { display: none; width: 100%; list-style-type: none; margin: 0; padding: 0; margin-top: 10px; text-transform: uppercase; overflow: hidden; display: flex; }
#menuFoot .menu ul li { margin-bottom: 5px; flex-grow: 1; }
#menuFoot .menu ul li a { color: #58595b; display: block; }
#menuFoot .menu ul li a:hover { color: #1CABE2; }
#menuFoot .menu ul li ul { float: left; margin-top: 0px; border: 0px solid green; display: block; }
#menuFoot .menu ul li ul li { font-size: 90%; border: 0px solid yellow; float: none; width: 100%; }
#menuFoot .menu ul li ul b { color: #929496; }
#menuFoot .menu ul li ul a { color: #58595b; }
@media screen and (min-width: 960px) { #menuFoot .menu { display: block; }
  #menuFoot .content { width: 960px; } }
@media screen and (min-width: 1280px) { #menuFoot .content { width: 1280px; } }

/*# sourceMappingURL=menu.css.map */