/* Order */

#close-layer { z-index: 9; }
header { z-index: 10; }
#miniheader { z-index: 10; }
#mobilemenu {z-index: 15; }
.menu-opener { z-index: 20; }
.leftmenu-opener { z-index: 20; }
#leftmenu-layer { z-index: 19; }
#leftmenu { z-index: 30; }

.menu-open #close-layer { display: block; }
.mainmenu-open #leftmenu { z-index: 8; }
.leftmenu-open #close-layer { z-index: 18; }
.leftmenu-open #leftmenu-layer {display: block; }

body.mobilemenu-open { margin-top: 0; }
.mobilemenu-open main, .mobilemenu-open footer { display: none; }

header { position: relative; top: 0; left: 0; background: #000073; height: 155px; color: #FFF; transition: top 0.3s; }
header a { text-decoration: none; border-bottom: 0px solid black; }
header .row { position: relative; margin: 0 auto; height: 155px; }
header > .row { display: flex; align-items: center; justify-content: center; }
header .fundraiserlink { display: none; }
#topcolor { position: absolute; top: 0; left: 0; width: 100%; height: 43px; background: #010061; }

#close-layer { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.8); }
#close-layer.show { display: block; }

#site-logo { position: absolute; top: 55px; left: 0; display: block; border: none; margin-bottom: 0; }
#site-logo img, #site-logo svg { height: 74px; }

#topmenu ul { position: absolute; top: 0; right: 0; }
#topmenu li { position: relative; float: left; list-style: none; height: 43px; width: 43px; text-align: center; }
#topmenu a, #topmenu button { position: relative; display: block; height: 43px; width: 43px; padding: 10px; overflow: hidden; }
#topmenu a:hover, #topmenu a:focus, #topmenu button:hover, #topmenu button:focus { overflow: visible; }
#topmenu svg { width: 19px; height: 19px; }
#topmenu span { width: auto; opacity: 0; font-size: 1.4rem; line-height: 1.8rem; background: #31308d; color: white; padding: 6px 12px; white-space: nowrap; position: absolute; top: 60px; right: -10px; transition: top 0.5s, opacity 0.5s; }
#topmenu span:before { content: ""; display: block; position: absolute; top: -6px; right: 25px; width: 0; height: 0; border-style: solid; border-width: 0 5px 6px 5px; border-color: transparent transparent #31308d transparent; }
#topmenu a:hover span, #topmenu a:focus span, #topmenu button:hover span, #topmenu button:focus span { opacity: 1.0; top: 50px; right: -10px; }

.topmenu__list { display: flex; width: 886px; }
.topmenu__list li.fundraiser { margin-right: auto; width: fit-content; text-align: center; padding-top: 2px; }

@media only screen and (max-width: 1270px) {
  .topmenu__list { width: 695px; }
}
@media only screen and (max-width: 1080px) {
  .topmenu__list { width: 575px; }
}

#topmenu li.menuitem-lang { width: 43px; text-align: center; }
#topmenu li.menuitem-lang button { position: relative; width: 43px; color: white; text-transform: uppercase; text-align: center; }
#topmenu li.menuitem-lang button svg { position: absolute; left: 8px; top: 10px; }
#topmenu li.menuitem-lang button span { text-transform: none; }
#topmenu li.menuitem-lang button span.lang { display: block; position: absolute; right: 12px; top: 17px; font-size: 1.6rem; line-height: 1.6rem; margin-top: -4px; text-transform: uppercase; background: none; opacity: 1; padding: 0; }
#topmenu li.menuitem-lang button span.lang:before { display: none; }

#topmenu li.menuitem-search button { padding: 10px 8px 6px 8px; }

#mainmenu {	position: absolute; bottom: 17px; left: 250px; font-size: 2.5rem; line-height: 2.5rem; width: 882px; }
#mainmenu li { float: left; list-style: none; margin-right: 36px; }
#mainmenu li:last-child { margin-right: 0; }
.menuitem-offers { position: absolute; right: 0; bottom: 0; font-size: 1.6rem; line-height: 2.4rem; }
#mainmenu button { color: white; border-bottom: 1px solid #000073; }
#mainmenu button:hover, #mainmenu button:focus { border-bottom: 1px solid #FFF; }

#leftmenu { position: fixed; top: 280px; left: 25px; width: 54px; height: 316px; padding: 13px 0 0 0; list-style: none; background: #000073; border-radius: 30px; }
.no-js #leftmenu { display: none; }
#leftmenu li { margin: 0 0 5px 0; padding: 0; width: 54px; height: 54px; }
#leftmenu button { position: relative; width: 54px; height: 54px; padding: 0; overflow: hidden; }
#leftmenu button:hover, #leftmenu button:focus { overflow: visible; }
#leftmenu svg { position: absolute; top: 15px; left: 15px; width: 24px; height: 24px; }
#leftmenu button.active:before { content: ""; position: absolute; top: 3px; left: 3px; width: 48px; height: 48px; border-radius: 30px; background: #31308d; }
#leftmenu span { display: block; width: auto; opacity: 0; font-size: 1.4rem; line-height: 1.8rem; background: #31308d; color: white; padding: 6px 12px; white-space: nowrap; position: absolute; top: 12px; left: 75px; transition: left 0.5s, opacity 0.5s; }
#leftmenu span:before { content: ""; display: block; position: absolute; top: 10px; left: -6px; width: 0; height: 0; border-style: solid; border-width: 5px 6px 5px 0; border-color: transparent #31308d transparent transparent; }
#leftmenu a:hover span, #leftmenu a:focus span, #leftmenu button:hover span, #leftmenu button:focus span { opacity: 1.0; top: 12px; left: 65px; }

.menu-opener { background: #000073; color: white; display: none; } 
.menu-opener.show { display: block; }

.mainmenu-opener { width: 100%; position: absolute; top: 155px; left: 0; }
html[lang="es"] body .mainmenu-opener, html[lang="fr"] body .mainmenu-opener, html[lang="it"] body .mainmenu-opener { top: 80px; }
.menu-fixed .mainmenu-opener { position: fixed; top: 80px; left: 0; }
.mainmenu-opener .row { height: auto; min-height: 390px; padding: 60px 0; }
.mainmenu-opener .span8 { font-size: 2.5rem; line-height: 3.6rem; }
.mainmenu-opener .span8 p { font-size: 1.6rem; line-height: 2.2rem; }
.mainmenu-opener .span4 { font-size: 1.6rem; line-height: 2.2rem; }
.mainmenu-opener .span4 p { font-size: 1.6rem; line-height: 2.2rem; margin-bottom: 10px; }
.mainmenu-opener .span4 ul { list-style: none; }
.mainmenu-opener .span4 li { font-family: JMBProBo, sans-serif; font-size: 1.6rem; line-height: 2.2rem; margin-bottom: 4px; }
.menu-opener a { border-bottom: 0px solid #000073; }
.menu-opener a:hover, .menu-opener a:focus { border-bottom: 1px solid white; }

.mainmenu-opener a.active { position: relative; border-bottom: 1px solid white; }
/*
.mainmenu-opener a.active:before { display: block; content: ""; position: absolute; left: -20px; top: 5px; width: 8px; height: 8px; background: white; }
*/

@media only screen and (max-width: 960px) {
  .mainmenu-opener a.active:before { display: block; content: ""; position: absolute; left: -12px; top: 5px; width: 6px; height: 6px; }
}

.menu-opener-top { display: none; height: 80px; width: 100%; background: #010061; }
.menu-opener-back { color: white; min-height: 21px; }
.menu-opener-back svg { width: 16px; height: 16px; margin-right: 16px; }
#menu-lang .menu-opener-top p { font-size: 2.2rem; line-height: 3rem; }
.leftmenu-opener .menu-opener-top { background: #272687; }

.mainmenu-box { border: 1px solid white; padding: 20px 20px 0 20px; font-size: 1.6rem; line-height: 2.2rem; margin-bottom: 30px; }
.mainmenu-box p { margin-bottom: 0; }
.mainmenu-box p:last-child { margin-bottom: 20px; }
.mainmenu-box a { text-decoration: none; border-bottom: 1px solid white; }
.menu-opener .mainmenu-box a:hover, .menu-opener .mainmenu-box a:focus { border: none; }

.mainmenu-note { width: 100%; background-color: #AA005F; padding: 20px 0; }
.mainmenu-note p.row { height: auto; min-height: auto; padding: 0; font-size: 16px; line-height: 20px; }
#menu-visit .mainmenu-note a { border-bottom: 1px solid white; }
#menu-visit .mainmenu-note a:hover, #menu-visit .mainmenu-note a:focus { border-bottom: 0px solid white; }

.menu-opener ul, .menu-opener ul li { list-style: none; }

#menu-lang p { font-size: 1.6rem; line-height: 2.2rem; }
#menu-lang li { list-style: none; font-size: 2.5rem; line-height: 3.6rem; }

.menu-opener a:hover, .menu-opener a:focus { border-bottom: 1px solid white; }
.share-icons a:hover, .share-icons a:focus { border-bottom: none; }

#menu-search form { margin-top: 80px; position: relative; }
#search-api-fulltext { display: block; width: 100%; background: white; border: none; color: black; padding: 36px 100px 30px 50px; font-family: JMBProM; font-size: 2.5rem; line-height: 3.3rem; height: 100px; }
header form button { position: absolute; width: 100px; height: 100px; top: 0; right: 0; border: none; text-indent: -9999px; }
header form button:before { position: absolute; top: 38px; left: 38px; content: ""; display: block; width: 24px; height: 24px; background: transparent url("/themes/custom/jmb/icons/menu_search.svg") 0 0 no-repeat; }
header form button:hover, header form button:focus { background: #C4C4C4; }

@media only screen and (max-width: 960px) {
  #search { padding: 32px 60px 24px 30px; font-size: 2.2rem; line-height: 2.2rem; height: 80px; }
  header form button { position: absolute; width: 80px; height: 80px; top: 0; right: 0; border: none; text-indent: -9999px; }
  header form button:before { position: absolute; top: 28px; left: 28px; content: ""; display: block; width: 24px; height: 24px; background: transparent url("/themes/custom/jmb/icons/menu_search.svg") 0 0 no-repeat; }
}

@media only screen and (max-width: 590px) {
  #search { padding: 23px 60px 20px 20px; font-size: 2rem; line-height: 2rem; height: 60px; }
  header form button { position: absolute; width: 60px; height: 60px; top: 0; right: 0; border: none; text-indent: -9999px; }
  header form button:before { position: absolute; top: 18px; left: 18px; content: ""; display: block; width: 24px; height: 24px; background: transparent url("/themes/custom/jmb/icons/menu_search.svg") 0 0 no-repeat; }
}


#leftmenu-layer { width: 750px; height: 100vh; position: fixed; top: 0px; left: 0; background: #000073; color: white; display: none; }
#leftmenu-layer.show { display: block; }

.leftmenu-opener { position: fixed; top: 190px; left: 195px; width: 460px; color: white; display: none; }
.leftmenu-opener a { border-bottom: 1px solid #000073; }
.menu-fixed .leftmenu-opener { position: fixed; top: 190px; left: 195px; }
.leftmenu-opener.show { display: block; }

@media only screen and (max-height: 800px) {
  .leftmenu-opener  { top: 90px; }
}

@media only screen and (max-height: 700px) {
  .leftmenu-opener  { top: 20px; }
}

.leftmenu-opener .row { max-width: 460px; margin: 0 auto; padding: 0; }
.leftmenu-opener .category { margin-bottom: 10px; }
.leftmenu-opener h3 { font-size: 3.5rem; line-height: 4rem; margin-bottom: 40px; }
.leftmenu-opener p { font-size: 1.6rem; line-height: 2.2rem; }
.leftmenu-opener dl { width: 100%; font-size: 1.6rem; line-height: 2.2rem; margin-bottom: 40px; clear: both; }
.leftmenu-opener dd, .leftmenu-opener dt { width: 48%; display: inline-block; }
.leftmenu-opener .ghost.white:hover, .leftmenu-opener .ghost.white:focus { color: #000073; background: white; }

.leftmenu_teaser { margin-bottom: 40px; }
.leftmenu_teaser h4 { font-family: JMBProBo, sans-serif; font-size: 1.9rem; line-height: 2.6rem; display: inline; margin-right: 10px; }
.leftmenu_teaser h4 svg { width: 12px; height: 12px; }
.leftmenu_teaser .span3 p { font-family: JMBProM, sans-serif; font-size: 1.9rem; line-height: 2.6rem; display: inline; }
.leftmenu_teaser .span3 p.date { display: block; margin-top: 20px; font-size: 1.6rem; line-height: 2.2rem; }

.row.nojs, .row.oldie { border: 1px solid black; padding: 30px; margin: 50px auto; }

#logo-beta { display: block; display: none; position: absolute; top: -13px; right: 0; font-size: 0.5em; line-height: 1; text-transform: uppercase; }

#open-mobilemenu { display: none; position: absolute; width: 30px; height: 30px; right: 0; top: 23px; }
#close-mobilemenu { position: absolute; width: 30px; height: 30px; right: 0; top: 23px; }
#open-search { position: absolute; width: 30px; height: 30px; left: 0; top: 23px; }
#open-lang { display: block; position: absolute; width: 30px; height: 30px; right: 0; top: 23px; }
#close-lang { position: absolute; width: 30px; height: 30px; right: 0; top: 23px; }

#open-mobilemenu.open-lang { width: 65px; }
#open-mobilemenu.open-lang svg { width: 30px; height: 30px; position: absolute; top: 0; left: 0; }
#open-mobilemenu.open-lang span.lang { color: white; text-transform: uppercase; position: absolute; top: 0; right: 0; opacity: 1; padding: 0; font-size: 2.2rem;
  line-height: 3rem; background: none; }
  #open-mobilemenu.open-lang span.lang:before { display: none; }

#mobilemenu { position: absolute; top: 0; left: 0; display: none; width: 100%; min-height: 100vh; padding: 0 0 30px 0; background: #000073; color: white; }
#mobilemenu.active { display: block; }
#mobilemenu > .row { padding: 100px 0 0 0; }
#mobilemenu ul { list-style: none; margin-bottom: 20px; }
#mobilemenu ul.big li { font-size: 2.2rem; line-height: 3.2rem; }
#mobilemenu ul li { font-size: 1.6rem; line-height: 2.5rem; }
#mobilemenu ul a, #mobilemenu ul a:hover, #mobilemenu ul a:focus { border-bottom: none; }
#mobilemenu button { color: white; }
#mobilemenu .mobilemenu-note { background-color: #AA005F; padding: 20px; }
#mobilemenu .mobilemenu-note a { border-bottom: 1px solid white; }
#mobilemenu .mobilemenu-note a:hover, #mobilemenu .mobilemenu-note a:focus { border-bottom: none; }
#mobilemenu p { font-size: 1.6rem; line-height: 2.5rem; }


.menu-fixed header { height: 80px; position: fixed; top: 0; left: 0; }
.menu-fixed header > .row { height: 80px; }
.menu-fixed header #topmenu, .menu-fixed header #topcolor { display: none; }
.menu-fixed header #site-logo { top: 15px; }
.menu-fixed header #site-logo img, .menu-fixed header #site-logo svg { height: 50px; }

body.header-hidden header { top: -90px; }
body.mainmenu-open.header-hidden header { top: 0; }

#miniheader { height: 80px; position: fixed; top: 0; left: 0; }
#miniheader .row { height: 80px; }
#miniheader > .row { display: flex; align-items: center; justify-content: space-between; }
#miniheader #site-logo { position: relative; top: 5px; }
#miniheader #site-logo img, #miniheader #site-logo svg { height: 50px; }
#miniheader #open-mobilemenu { position: relative; top: auto; }
#miniheader #close-mobilemenu { position: relative; top: auto; margin-left: 35px; }
#miniheader .toggle-mobile.show { display: block; }
#miniheader button span { width: auto; opacity: 0; font-size: 1.4rem; line-height: 1.8rem; background: #31308d; color: white; padding: 6px 12px; white-space: nowrap; position: absolute; top: 0; right: 85px; transition: right 0.5s, opacity 0.5s; z-index: 15; }
/*
#miniheader button span:before { content: ""; display: block; position: absolute; top: 10px; right: -6px; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 6px; border-color: transparent transparent transparent #31308d; }
#miniheader button:hover span, #miniheader button:focus span { opacity: 1.0; top: 0; right: 75px; }
*/
#miniheader button span { width: auto; opacity: 0; font-size: 1.4rem; line-height: 1.8rem; background: #31308d; color: white; padding: 6px 12px; white-space: nowrap; position: absolute; top: 60px; right: -10px; transition: top 0.5s, opacity 0.5s; }
#miniheader button span:before { content: ""; display: block; position: absolute; top: -6px; right: 25px; width: 0; height: 0; border-style: solid; border-width: 0 5px 6px 5px; border-color: transparent transparent #31308d transparent; }
#miniheader button:hover span, #miniheader button:focus span { opacity: 1.0; top: 50px; right: -10px; }

#miniheader button { display: none; }
#miniheader button.show, #miniheader #close-lang { display: block; }


@media only screen and (max-width: 1350px) {
  header .row { margin-right: auto; margin-left: 108px; }
}

@media only screen and (max-width: 1270px) {
  #mainmenu { width: 693px; }
}

@media only screen and (max-width: 1080px) {
  #mainmenu { width: 573px; font-size: 2rem; line-height: 2rem; }
  #mainmenu li {margin-right: 25px; }
  .menuitem-offers { position: relative; font-size: 2rem; line-height: 2rem; }
}

@media only screen and (max-width: 960px) {
  body { margin-top: 80px; }
  header { height: 80px; position: fixed; top: 0; left: 0; }
  header .row { height: 80px; margin-right: auto; margin-left: auto; }
  header > .row { display: flex; align-items: center; justify-content: space-between; }
  #topmenu, #mainmenu, #topcolor { display: none; }
  #site-logo { position: relative; top: auto; }
  #site-logo img, #site-logo svg { height: 50px; }
  #open-mobilemenu { position: relative; display: block; top: auto; min-width: 30px; }
  header .fundraiserlink { display: block; }
  .mainmenu-box { border: none; padding: 0; font-size: 1.6rem; line-height: 2.2rem; margin-bottom: 30px; }
  .mainmenu-note { display: none; }
  .mainmenu-opener .span8 { font-size: 2.2rem; line-height: 3.2rem; }

  .mobilemenu-open header { position: absolute; }
  .mobilemenu-open #mobilemenu { display: block; }
  .mobilemenu-open.menu-open #mobilemenu { display: none; }

  .menu-opener { display: none; position: absolute; top: 0; left: 0; width: 100vw; min-height: 100vh; padding-bottom: 120px; }
  .menu-opener > .row { padding-top: 100px; }
  html[lang="es"] .menu-opener, html[lang="fr"] .menu-opener, html[lang="it"] .menu-opener { top: 0; }
  .mobilemenu-open .menu-opener { display: none; }
  .menu-opener.show { display: block; }
  .menu-opener .span9 { margin-bottom: 40px; }
  .menu-opener-top { display: block; position: fixed; top: 0; left: 0; z-index: 1; }
  .menu-opener-top .row { min-height: 10px; padding: 25px 0; }
  .leftmenu-opener .menu-opener-top .row { min-height: 10px; padding: 25px 0; }

  #leftmenu { display: none; position: fixed; top: auto; bottom: 15px; left: 50%; margin-left: -168px; width: 336px; height: 54px; padding: 0 5px 0 10px; list-style: none; background: #000073; border-radius: 30px; border: 1px solid white; }
  .mainmenu-open #leftmenu { z-index: 30; }
  .leftmenu-open #leftmenu { background: white; }
  .leftmenu-open #leftmenu button path, .leftmenu-open #leftmenu button rect { fill: #000073; }
  .leftmenu-open #leftmenu-layer { display: none; }
  #leftmenu.show { display: flex; justify-content: center; }
  #leftmenu li { margin: 0 5px 0 0; }
  .mobilemenu-open .leftmenu-opener { opacity: 0; }
  .leftmenu-opener.show { opacity: 1; left: 0; }
  .leftmenu-opener .row { max-width: 820px; margin: 0 auto; }
  .leftmenu-opener > .row { padding-top: 120px; }
  .leftmenu-opener .category { display: none; }

  #leftmenu button { position: relative; top: -1px; }
  #leftmenu button:hover, #leftmenu button:focus { background: white; }
  #leftmenu button:hover path, #leftmenu button:focus path, #leftmenu button:hover rect , #leftmenu button:focus rect { fill: #000073; }
  #leftmenu button.active:before { content: ""; position: absolute; top: 47px; left: 0px; width: 54px; height: 7px; border-radius: 0; background: #000073; }
  #leftmenu span { top: -50px; left: 50%; transform: translateX(-50%); transition: top 0.5s; }
  #leftmenu span:before { content: ""; display: block; position: absolute; top: auto; bottom: -6px; left: 50%; width: 0; height: 0; border-style: solid; border-width: 6px 5px 0 5px; border-color: #31308d transparent transparent transparent; margin-left: -3px; }
  #leftmenu button:hover span, #leftmenu button:focus span { top: -40px; left: 50%; transform: translateX(-50%); }
}

@media only screen and (max-width: 670px) {
  #leftmenu li:last-child button:hover span, #leftmenu li:last-child button:focus span { top: -40px; left: -50%; transform: translateX(-50%); }
  #leftmenu li:last-child span:before { left: 75%; }
}

#backtotop { position: fixed; right: 20px; bottom: 20px; background: #000073 url(../icons/backtotop.svg) no-repeat center center; background-size: 16px 16px; cursor: pointer; width: 54px; height: 54px; padding: 20px; border-radius: 30px; text-indent: -9999px; z-index: 1; transition: bottom 0.3s; ;}
#backtotop.hidden { bottom: -60px; }
#backtotop.hidden:focus { bottom: 20px; }
body.mainmenu-open #backtotop { bottom: -60px; }