/* CORE */
body, main, div.mod-custom { font-family: "myriad-pro", sans-serif; overflow-x: hidden }

  /* desktops ++ */
  @media (min-width:1367px) { body::before { display: block; position: fixed; top: 0; left: 0; content: ""; width: 100%; height: 60px; background-color: #FFFFFF; z-index: 1 }}


body, header, div, span, form, fieldset, label, input, textarea { padding: 0; margin: 0 auto; border: 0 }

section, header, main, section, div, span, form, fieldset, label, input, textarea, ul, li { position: relative; box-sizing: border-box }


/* MOB VS. DESK */
.mobshow { display: block !important }
.mobhide { display: none !important }

  @media (min-width:431px) {
    .mobshow { display: none !important }
    .mobhide { display: block !important }}


/* PAGINATION */
.pagination { position: fixed; bottom: 20px; right: 20px; font-size: 1.4em; z-index: 1 }

.pagination a { display: flex; flex-flow: row nowrap; justify-content: flex-end; align-items: center; position: relative; height: 20px; color: #B15626 }

.pagination a.active:after { box-shadow: inset 0 0 0 5px }

.pagination a .hover-text { opacity: 0; font-size: 14px; line-height: 14px; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; -webkit-transition: opacity 0.5s ease; transition: opacity 0.5s ease; padding-right: 15px; margin: 0 }

.pagination a:hover .hover-text { opacity: 1 }

.pagination a:after { display: block; content: ''; flex: 0 0 auto; width: 10px; height: 10px;	transition: box-shadow 0.5s ease; -webkit-transition: box-shadow 0.5s ease; margin: 0; border: 1px solid; border-radius: 50%;  }

  @media (min-width:1367px) {
    .pagination { top: 50%; right: 50px; transform: translateY(-50%); bottom: inherit; font-size: 3em }
    .pagination a { height: 30px }
    .pagination a .hover-text { font-size: 20px; line-height: 20px }
    .pagination a:after { width: 20px; height: 20px }}


/* TYPOGRAPHY */
h1, h2 { font-family: "myriad-pro", sans-serif; font-size: 20px; line-height: 22px; letter-spacing: 1px; text-transform: uppercase; text-align: center; margin: 0 }

h3 { font-family: "myriad-pro", sans-serif; font-size: 16px; line-height: 20px; letter-spacing: 1px; text-transform: uppercase; text-align: center; margin: 0 }

h4 { font-family: "myriad-pro", sans-serif; font-size: 16px; line-height: 22px; letter-spacing: 1.5px; font-weight: 400; text-transform: uppercase; text-align: center; margin: 0 }

p { font-family: "myriad-pro", sans-serif; font-size: 14px; line-height: 26px; margin: 0; text-align: center }

ul, li { font-family: "myriad-pro", sans-serif; font-size: 14px; line-height: 26px }

a { text-decoration: none }

  @media (min-width:431px) {
    h1, h2 { font-size: 24px; line-height: 28px }
    h3 { font-size: 20px; line-height: 24px }
    h4 { font-size: 18px; line-height: 22px }}

  @media (min-width:1367px) {
    h1, h2 { font-size: 28px; line-height: 32px }
    h3 { font-size: 22px; line-height: 26px }
    h4 { font-size: 20px; line-height: 24px }
    p, ul, li { font-size: 18px; line-height: 32px }}


/* BUTTONS */
.btn { display: inline-flex; box-sizing: border-box; height: 50px; justify-content: center; align-items: center; font-family: "myriad-pro", sans-serif; font-size: 16px; line-height: 22px; font-weight: normal; text-transform: uppercase; letter-spacing: 2px; color: #FFFFFF; padding: 0 30px 2px; margin: 75px 5px 0; border-radius: 2px; background: #B15626; transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; cursor: pointer }

  @media (min-width:1367px) {

    .btn { height: 60px }

    .btn:hover { font-size: 225%; font-weight: bold; color: #B15626; text-shadow: 0 3px 6px rgba(0,0,0,0.16); background: #FFFFFF }}


/* TOGGLER */
.menu-toggler { display: block; position: fixed; top: 25px; left: 25px; width: 50px; height: 50px; color: #FFFFFF; padding: 0; margin: 0; border: none; background: #B15626; outline: none; cursor: pointer; border-radius: 45px; z-index: 1000 }

  @media (min-width:1367px) { .menu-toggler { display: none }} 

.menu-toggler span, .menu-toggler span::before, .menu-toggler span::after { display: block; position: relative; content: ''; width: 16px; height: 2px; margin: 0 auto; background-color: #FFFFFF; transition: all 0.2s ease-in-out 0s }

.menu-toggler span::before { transform: translateY(-6px) }
.menu-toggler span::after { transform: translateY(4px) }

main.open .menu-toggler span { background-color: transparent }
main.open .menu-toggler span::before { transform: translateY(0px) rotate(45deg) }
main.open .menu-toggler span::after { transform: translateY(-3px) rotate(-45deg) }


/* MENU */
div.menu { display: flex; position: fixed; flex-flow: row wrap; align-content: flex-start; justify-content: flex-start; top: 0; left: -100%; width: 35%; max-width: 200px; height: 100%; padding: 100px 20px 50px; transition: all 0.2s ease-in-out 0s; z-index: 2 }

  @media (max-width:1366px) { main.open div.menu { left: 0 }}

div.menu a.logo, div.menu .languages { display: none }

div.menu .pagination { position: relative; top: 0; right: inherit; transform: none }

div.menu .pagination a { display: inline-flex; flex-flow: row nowrap; box-sizing: border-box; height: 40px; justify-content: center; align-items: center; font-family: "myriad-pro", sans-serif; font-size: 14px; font-weight: normal; text-transform: uppercase; letter-spacing: 2px; color: #FFFFFF; padding: 0 15px 2px; margin: 5px; border-radius: 2px; background-color: #B15626; -webkit-transition: all 0.2s ease-in-out 0s; cursor: pointer; transition: all 0.2s ease-in-out 0s }

div.menu .pagination a:hover { background-color: #90BB4B }

div.menu .pagination a:after { margin-left: 10px }

  @media (min-width:1367px) {
    
    div.menu { position: fixed; min-width: 1340px; max-width: 1600px; height: 60px; top: 0; left: 50%; transform: translateX(-50%); padding: 0 50px }
    
    div.menu::before { background-color: transparent }
    
    div.menu a.logo { display: block; flex: 0 0 auto }
    
    div.menu a.logo img { flex: 0 0 100px; width: 80px; padding: 20px; border-radius: 0 2px 2px 0; background-color: #FFFFFF }
    
    div.menu .languages { display: flex; height: 60px; justify-content: flex-start; align-items: center; flex: 1 1 auto; margin: 0 0 0 50px }
    
    div.menu .languages a { width: auto; margin: 0 8px }
    
    div.menu .languages img { width: 30px }
    
    div.menu .pagination { display: flex; flex-flow: row nowrap; height: 60px }

    div.menu .pagination a { flex: 0 0 auto; font-size: 15px; letter-spacing: 1.5px; padding: 0 30px 2px; background: none; color: #000000; height: 60px; box-shadow: none; border-radius: 0; margin: 0 }
    
    div.menu .pagination a:hover { font-size: 20px; font-weight: bold; text-shadow: 0 3px 6px rgba(0,0,0,0.16); background-color: #FFFFFF }
    
    div.menu .pagination a:last-child { background-color: #B15626 }
    
    div.menu .pagination a:last-child:hover { color: #B15626; background-color: #FFFFFF }

    div.menu .pagination a::after { display: none }}


/* ALL SECTIONS */
.panel { display: flex; flex-flow: row wrap; align-content: center; height: 100vh !important; padding: 20px 50px; overflow-y: hidden }


/* HOME */

  /* panel */
  .home { background-color: #000000; overflow: hidden }

  /* background */
  .home::before { position: absolute; content:""; top: 0; left: 0; width: 100%; height: 100%; background-image: url(../../../images/background.webp); animation: zoom 15000ms ease infinite; background-position: center; background-size: cover; opacity: 0.5 }

  @keyframes zoom {
    0% { transform: scale(1, 1) }
    50% { transform: scale(1.05, 1.05) }
    100% { transform: scale(1, 1) }}

  /* group logo */
  .home > div { flex: 1 1 100% }

  .home > div:nth-of-type(1) { text-align: center; margin-bottom: 30px }

  .home > div:nth-of-type(1) img { position: relative; width: 80px; margin: 0 auto }

  /* conference logo */
  .home > div:nth-of-type(2) { max-width: 500px }
  .home > div:nth-of-type(2) img { width: 100% }

  /* language flags */
  .languages { display: flex; flex-flow: row wrap; justify-content: center; align-content: center; margin-top: 40px }

  .languages a { width: 40px; line-height: 0; border: 3px solid #FFFFFF; margin: 5px }

  .languages img { width: 100% }

  /* countdown to event */
  #countdown { display: flex; flex-flow: row wrap; justify-content: center; margin-top: 50px }

  #countdown i { flex: 0 0 auto; font-size: 20px; color: #FFFFFF; margin-bottom: 20px }

  #countdown h3 { flex: 1 1 100%; color: #FFFFFF; text-align: center; margin-bottom: 10px }

  #countdown div { flex: 0 0 auto; color: #FFFFFF; font-size: 13px; line-height: 18px; letter-spacing: 1px; font-weight: bold; text-transform: uppercase; text-shadow: 0 3px 6px rgba(0,0,0,0.16); margin: 0 2px }

  #countdown div span { padding-right: 5px }


  /* h. tablets ++ */
  @media (min-width:1025px) {

    .home { padding: 75px 25% 50px }
    .home > div:nth-of-type(1) { margin-bottom: 0 }
    .home .tab2-panel > div { max-width: 20% }}

  /* desktops ++ */
  @media (min-width:1367px) {
    
    .home { padding: 0 }
    
    .home > div:nth-of-type(1) { display: none }
    
    .home > div:nth-of-type(2) { display: flex; flex-flow: row wrap; max-width: 750px; height: auto; min-height: 100vh; justify-content: center; padding: 150px 0 0 }
    
    .home > div:nth-of-type(2) > div { flex: 1 1 100%; align-self: center; text-align: center }
    
    .home .languages { display: none }
    
    #countdown { flex: 1 1 100% ; align-self: flex-end; padding-bottom: 50px }
    #countdown i { font-size: 50px; --fa-animation-duration: 3s; margin-bottom: 40px }
    #countdown h3 { align-self: flex-end }
    #countdown div { font-size: 200%; padding: 10px }}


/* PANEL 1: CONFERENCE */
.panel1 {  text-align: center; max-width: 1000px; margin: 0 auto }

.panel1 > div, .panel1 > h2, .panel1 > h3, .panel1 > h4 { flex: 1 1 100% }

.partners { display: flex; flex-flow: row nowrap; justify-content: center; align-items: flex-end }
.partners > div { flex: 0 0 auto; margin: 0 10px }
.partners > div img { width: auto; height: 50px }

.panel1 h3 { margin-top: 40px; margin-bottom: 10px }

.panel1 h4 { padding-top: 20px; margin-top: 30px; margin-bottom: 20px; border-top: 1px solid #90BB4B }


  /* h. tablets ++ */
  @media (min-width:1025px) {
    .partners > div { margin: 0 15px }
    .partners > div img { height: 60px }}

  /* desktops ++ */
  @media (min-width:1367px) {
    .panel1 h3 { margin-top: 60px }
    .panel1 h4 { margin-bottom: 50px }
    .partners > div img { height: 75px }}


/* PANEL 2: INITIATIVE */
.panel2 { max-width: 800px; margin: 0 auto }

.panel2 > div, .panel2 > h2 { flex: 1 1 100% }

.panel2 > h2 { margin-bottom: 20px }

.tab-list { display: flex; max-width: 600px; flex-flow: row wrap; margin: 0 auto 40px }

.tab-list div { display: flex; flex: 1 1 auto; font-family: "myriad-pro", sans-serif; font-size: 14px; line-height: 18px; font-weight: normal; text-transform: uppercase; letter-spacing: 1px; color: #000000; padding: 0; margin: 5px; border: 0; border: 1px solid #90BB4B; border-radius: 0 }

.tab-list div a { display: flex; flex: 1 1 100%; height: 30px; align-items: center; justify-content: center; color: #000000; padding: 0 15px 2px }

.tab-list div.active { background: #B15626; border: 0 }
.tab-list div.active a { color: #FFFFFF }

.tab-panel { display: none }
.tab-panel.active { display: block }


/* PANEL 3: PROGRAM */

/* section */
.panel3 { justify-content: center }

.panel3 > div { max-width: 1200px }

.panel3::before { display: block; position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background-position: center; background-size: cover; opacity: 0.3; background-image: url(../../../images/conference.webp); z-index: -1 }

/* title */
.panel3 > h2 { flex: 1 1 100% }

/* tab-list */
.schedule-tabs { flex: 1 1 100%; display: flex; flex-flow: row nowrap; margin: 30px 0 15px }

.schedule-tabs > div { display: flex; flex: 0 0 auto; transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; background-color: #FFFFFF }

.schedule-tabs > div.live, .schedule-tabs > div.show, .schedule-tabs > div.online { flex: 1 1 auto; background-color: #313131 }
.schedule-tabs > div:hover { background-color: #313131 }

.schedule-tabs > div a { display: flex; flex: 1 1 100%; color: #000000; letter-spacing: 1.5px; justify-content: flex-start; align-items: center; padding: 0 10px 2px 20px }

.schedule-tabs > div.live a, .schedule-tabs > div.show a, .schedule-tabs > div.online a, .schedule-tabs > div:hover a { color: #FFFFFF }

.schedule-tabs > div a span { display: none; margin: 0; transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s }

.schedule-tabs > div.live a span, .schedule-tabs > div.show a span, .schedule-tabs > div.online a span { display: inline }

@media (max-width:480px) { .schedule-tabs > div.live a span, .schedule-tabs > div.show a span, .schedule-tabs > div.online a span { display: none } }

.schedule-tabs > div a i { margin-left: 5px; transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s }

.schedule-tabs > div.live a i, .schedule-tabs > div.show a i, schedule-tabs > div.online a i { transform: rotate(90deg) }

/* tab-list: day selector */
.tab2-list > div { height: 60px }

/* tuesday and wednesday panels */
.tab-panel.live { display: flex; flex-flow: row wrap; width: 100%; margin: 0 }

/* tab-list: AM - PM selector, tuesday */
.tab3-list, .tab4-list { flex: 1 1 100%; display: flex; flex-flow: row wrap; margin: 0 0 15px; border-radius: 2px }

.tab3-list > div, .tab4-list > div { flex: 1 1 auto; height: 50px }

/* tab-panel: tuesday and wednesday am */
.tab-panel.show, .tab-panel.online { display: flex; flex: 1 1 100%; flex-flow: row wrap }

/* each time slot */
.slot { display: flex; flex: 1 1 100%; flex-flow: row wrap; margin-bottom: 10px }

.slot > div { margin: 0 }

.slot > div:nth-of-type(1) { flex: 1 1 100%; display: flex; flex-flow: row nowrap }

  /* time */
  .slot .time { display: flex; flex: 0 0 120px; min-height: 80px; justify-content: center; align-items: center; color: #FFFFFF; letter-spacing: 2px; padding: 0 20px 2px; margin-right: 10px; background-color: #313131; border-radius: 2px }
  
  /* location */
  .slot .location { display: none }

  /* event details */
  .slot .event { display: none }

  /* popup - event details */
  .slot .event.popup { display: flex; flex-flow: row wrap; flex: 1 1 auto; align-content: center; padding: 10px 25px 12px; background-color: #FFFFFF; border-radius: 2px }

  .slot .event.popup p { flex: 1 1 100%; text-align: left; margin: 0 }

  .slot .event.popup div { flex: 1 1 100%; margin: 0 }

  .slot .event.popup div p { color: #B15626; text-decoration: underline; cursor: pointer }
  
  .slot .popped { display: none; flex-flow: row wrap; flex: 1 1 100%; background-color: #FFFFFF; padding: 20px 25px; margin-top: 10px; border-radius: 2px }

  .slot .popped .fa-square-xmark { position: absolute; top: 20px; right: 20px; font-size: 30px }

  .slot .popped.reveal { display: flex; -webkit-animation: fadeIn 1s; animation: fadeIn 1s }
  
  @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 }}
  @-webkit-keyframes fadeIn { from { opacity: 0 } to { opacity: 1 }}

  .slot .popped p, .slot .popped ul { flex: 1 1 100%; text-align: left }

  .slot .popped > p:nth-of-type(1) { padding-right: 50px }


/* h. tablets ++ */
@media (min-width:1025px) {
  /* adjust 1, 2, 3... */
  .tab3-list > div, .tab4-list > div { flex: 0 0 auto }}


/* desktops ++ */
@media (min-width:1367px) { 
  
  /* space between  header tabs */
  .schedule-tabs > div { margin-left: 20px }
  .schedule-tabs > div:nth-of-type(1) { margin-left: 0 }
  
  /* increased font size */
  .schedule-tabs > div a { font-size: 18px; letter-spacing: 2px; text-transform: uppercase }
  
  /* increases row gap */
  .slot { flex-flow: row nowrap; margin-bottom: 10px }
  
  /* adds location */
  .slot .location { display: flex; flex: 0 0 200px; align-items: center; color: #000000; letter-spacing: 2px; padding: 0 20px 2px; margin-right: 10px; background-color: #90BB4B; border-radius: 2px }
  
  /* adjusts time width and height */
  .slot > div:nth-of-type(1) { flex: 0 0 140px }
  .slot > div:nth-of-type(1) .time { flex: 1 1 100% }
  
  /* hides popups */
  .slot .event.popup, .slot .popped { display: none }
  
  /* desktop event */
  .slot .event { display: flex; flex-flow: row wrap; flex: 1 1 auto; align-items: center; padding: 20px 25px 22px; background-color: #FFFFFF }
  
  .slot .event p { flex: 1 1 100%; font-size: 14px; line-height: 24px; text-align: left; letter-spacing: 1px }
  .slot .event ul, .slot .event li { font-size: 14px; line-height: 24px; letter-spacing: 1px }}


/* PANEL 4: PANELISTS
.panel4 {  } */



/* PANEL 5: SIGNATORIES */

/* grid */
.panel5 { display: grid; align-content: stretch; grid-column-gap: 0; grid-row-gap: 10px; grid-template-columns: 50% 50%; grid-template-rows: auto 80px auto auto auto auto auto 80px; padding: 10px; margin: 0 -5px;
  
  grid-template-areas:
    'mozambique mozambique'
    'title title'
    'angola botswana'    
    'congo drc'
    'malawi namibia'
    'south_africa tanzania'
    'zambia zimbabwe'
    'footer footer'}
  
  /* french and portuguese v. */
  body.itemid-147 .panel5, body.itemid-148 .panel5 { 
    grid-template-areas:
      'mozambique mozambique'
      'title title'
      'south_africa angola'    
      'botswana congo'
      'malawi namibia'
      'drc tanzania'
      'zambia zimbabwe'
      'footer footer' }


/* all children */
.panel5 > div { display: flex; flex-direction: column; justify-content: center; align-items: center; align-content: center; padding: 10px 10px 15px; margin: 0 5px }

.panel5 > div::before { display: block; position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background-position: center; background-size: cover; opacity: 0.3; z-index: -1 }

.panel5 > div > img { width: 40px; margin-bottom: 10px }

/* title */
.panel5 > div.title { grid-area: title; font-size: 12px; line-height: 16px; padding: 10px }

.panel5 > div.title::before { display: none }

/* child */
.panel5 > div.angola { grid-area: angola }
.panel5 > div.angola::before { background-image: url(../../../images/landscapes/angola.webp) }

.panel5 > div.botswana { grid-area: botswana }
.panel5 > div.botswana::before { background-image: url(../../../images/landscapes/botswana.webp) }

.panel5 > div.congo { grid-area: congo }
.panel5 > div.congo::before { background-image: url(../../../images/landscapes/congo.webp) }

.panel5 > div.drc { grid-area: drc }
.panel5 > div.drc::before { background-image: url(../../../images/landscapes/drc.webp) }

.panel5 > div.malawi { grid-area: malawi }
.panel5 > div.malawi::before { background-image: url(../../../images/landscapes/malawi.webp) }

.panel5 > div.mozambique { grid-area: mozambique }
.panel5 > div.mozambique::before { background-image: url(../../../images/landscapes/mozambique.webp) }

.panel5 > div.namibia { grid-area: namibia }
.panel5 > div.namibia::before { background-image: url(../../../images/landscapes/namibia.webp) }

.panel5 > div.south_africa { grid-area: south_africa }
.panel5 > div.south_africa::before { background-image: url(../../../images/landscapes/south_africa.webp) }

.panel5 > div.tanzania { grid-area: tanzania }
.panel5 > div.tanzania::before { background-image: url(../../../images/landscapes/tanzania.webp) }

.panel5 > div.zambia { grid-area: zambia }
.panel5 > div.zambia::before { background-image: url(../../../images/landscapes/zambia.webp) }

.panel5 > div.zimbabwe { grid-area: zimbabwe }
.panel5 > div.zimbabwe::before { background-image: url(../../../images/landscapes/zimbabwe.webp) }


/* footer */
.panel5 > div.footer { grid-area: footer; display: flex; flex-flow: row nowrap; justify-content: space-between; font-size: 12px; line-height: 16px; color: #FFFFFF; letter-spacing: 2px; text-transform: uppercase; padding: 0; background: #313131 }

div.footer .left { display: flex; justify-content: flex-start; align-content: center; padding: 0 25px; margin: 0 }
div.footer .right { justify-content: flex-end; align-content: center; padding: 0 25px; margin: 0 }

div.footer svg { font-size: 150%; color: #FFFFFF; --fa-flip-x: 0; --fa-flip-y: 1; --fa-animation-duration: 5s; margin-left: 10px }

.panel5 > div.title::before { display: none }


/* h. tablets ++ */
@media (min-width:1025px) {
  .panel5 { grid-row-gap: 15px; grid-template-columns: 1fr 1fr 1fr 1fr;  grid-template-rows: auto 60px auto auto 80px; padding: 15px;
  
  grid-template-areas:
    'angola mozambique mozambique botswana'
    'angola title title botswana'
    'congo drc malawi namibia'
    'south_africa tanzania zimbabwe zambia'
    'footer footer footer footer'}

  div.footer .left { padding: 0 40px }
  div.footer .right { padding: 0 40px }

  /* portuguese and french v. */
  body.itemid-147 .panel5, body.itemid-148 .panel5 { 
    grid-template-areas:
      'south_africa mozambique mozambique angola'
      'south_africa title title angola'
      'botswana congo malawi namibia'
      'drc tanzania zambia zimbabwe' }}

/* desktops ++ */
@media (min-width:1367px) {
  .panel5 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-rows: auto 40px auto 80px; margin: 0 -10px;
    
    grid-template-areas:
      'angola botswana mozambique mozambique congo drc'
      'angola botswana title title congo drc'
      'malawi namibia south_africa tanzania zambia zimbabwe'
      'footer footer footer footer footer footer'}

  .panel5 > div { margin: 0 10px }
  
  /* portuguese and french v. */
  body.itemid-147 .panel5, body.itemid-148 .panel5 { 
    grid-template-areas:
      'south_africa angola mozambique mozambique botswana congo'
      'south_africa angola title title botswana congo'
      'malawi namibia drc tanzania zambia zimbabwe'
      'footer footer footer footer footer footer' }}