@media only screen and (min-width: 768px) and (max-width: 5000px) {
  
  
  .screen {
    display:none!important;
  }
  .nonresponsive {
    display: block;
  }
  
}

@media only screen and (max-width: 767px) {
  .nonresponsive {
    display: none;
  }
  .screen {
    display: block;
  }
}

@media only screen and (max-width: 900px) {
  .navbar {display:none;}
  .article-title {display:none;}
#t4-top-header {display:none;}
#t4-breadcrumbs {display:none;}
.rc72-banner {display:none;}
#t4-footnav {display:none;}
#t4-footer {display:none;}
.top-away #back-to-top {display:none;}

  
  #t4-top-bar {display:none!important;height:0!important;}
.t4-offcanvas, .sharing-tool {display:none!important;}

  
 
    #ja-header, #navigation, .ja-breadcrumbs, #footer, #socialbar.sticky, .tabletsearch  
  {display: none!important;}
  .content-wrapper {margin-top:-10px;min-height:100vh;}
.meganavbar {display: none!important;}
.article-content {margin-top: 100px!important;}
  .container {padding:0;} 
  .t4-content {margin-top:-2rem;}
  
}






.screen {
  position: relative;
  min-height: 100vh;
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.28) 30%, rgba(0,0,0,0.55) 62%, rgba(0,0,0,0.82) 100%),
    url("https://www.emro.who.int/images/stories/about-who/rd/rd_portrait_photo.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  display: flex;
  flex-direction: column;
}

.header {
  position: relative;
  z-index: 3;
  padding: 30px 22px 14px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.48), rgba(0,0,0,0.08));
}


a.active, a:hover {color:#fff;}

h1 {color:#fff;}
.header h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 2.6rem);
  line-height: 1.1;
  font-weight: 700;
}

.header p {
  margin: 8px 0 0;
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: rgba(255,255,255,0.88);
  font-size:18px;
}

.content-wrap {
  position: relative;
  z-index: 2;
  flex: 1;
  padding: 0 16px 18px;
  display: flex;
  align-items: flex-end;
}

.menu-panel {
  width: 100%;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 18px 18px 0 0;
  overflow: visible;
}

.menu-item {
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}



.menu-item:last-child {
  border-bottom: none;
}

.menu-button,
.menu-link {
  width: 100%;
  min-height: 35px;
  padding: 10px 18px;
  background: transparent;
  border: none;
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  font-size: 1.2rem;
  line-height: 1.35;
  cursor: pointer;
}

.menu-title {
  padding-right: 16px;
}
[aria-expanded="true"] .menu-title {
  font-weight: 700;
}
.icon {
  flex: 0 0 auto;
  font-size: 1.35rem;
  line-height: 1;
}

.submenu {
  display: none;
  background: rgba(46,66,116,0.6);
  background: rgba(46,66,116,0.6);
  padding: 4px 0 10px;
}

.menu-item.open .submenu {
  display: block;
}

.submenu a {
  display: block;
  padding: 12px 18px 12px 30px;
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  font-size: 1.1rem;
  line-height: 1.4;
}


.contact-item {
  padding: 3px 3px 3px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  background: transparent;
}

.contact-title {
  display: block;
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
}

.contact-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
}

.contact-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: #ffffff;
  text-decoration: none;
  font-size: 20px;
}

.contact-icons a:hover {
  opacity: 0.85;
}

@media (orientation: portrait) {
  .screen {
    background-position: center top;
  }

  .header {
    padding: 28px 20px 12px;
  }

  .content-wrap {
    padding: 0 10px 12px;
  }

  .menu-panel {
    margin-top: auto;
    transform: translateY(-70px);
  }
}

@media (orientation: landscape) and (max-width: 1024px) {
  .screen {
    background-position: center 22%;
  }

  .header {
    padding: 16px 18px 10px;
    max-width: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.58), rgba(0,0,0,0.08));
  }

  /*.header h1 {
    font-size: 1.1rem;
  }

  .header p {
    margin-top: 4px;
    font-size: 0.72rem;
  }*/

  .content-wrap {
    padding: 0 14px 12px;
    align-items: flex-start;
  }

  .menu-panel {
    width: 100%;
    /*max-height: 58vh;*/
    overflow-y: auto;
    border-radius: 14px;
    /*transform: translateY(-6px);*/
    background: rgba(0,0,0,0.46);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }

  .menu-button,
  .menu-link {
    min-height: 44px;
    padding: 11px 16px;
    font-size: 0.9rem;
  }

  .submenu a {
    padding: 9px 16px 9px 28px;
    font-size: 0.82rem;
  }

  .icon {
    font-size: 1.1rem;
  }
}

@media (orientation: landscape) and (max-width: 1024px) and (max-height: 500px) {
  .menu-panel {
    max-height: 90vh;
  }

  .menu-button,
  .menu-link {
    min-height: 40px;
    padding-top: 9px;
    padding-bottom: 9px;
  }
}