:root {
    --red-color: #e66442;
    --brown-color: #524947;
    --dark-brown-color: #443b3a;
    --darker-brown-color: #2e2929;
    --light-brown-color: #c4bcb3;
    --pale-color: #f4ede1;
    --dark-pale-color: #ded8ce;
}

* {
    font-family: 'Montserrat', sans-serif;
}

.modal-open nav {
    padding-right: 0px !important;
}

.alert-message {
    position: sticky;
    bottom:0;
    left:0;
    text-align: center;
    z-index:9999;
    background-color: var(--red-color);
    padding:0.5em;
    color:white;
}

.alert-message a {
    color:white;
}

.closebtn {
    font-size:0.9em;
    font-weight: bold;
    cursor: pointer;
    background:white;
    border-radius: 5em;
    color:var(--red-color);
    padding:0.1em 0.4em;
    margin:0 1em;
}

h1 {
    font-size: 3em;
    color:var(--brown-color);
    font-weight: 900;
    line-height: 1em;
    
}

h2 {
    font-size:2.5em;
    color:var(--brown-color);
    text-align: center;
    font-weight: 900;
    display: block;
    margin: 2em 0 1.6em;
 
    
}

.highlight {
    background-color: var(--pale-color);
    padding:0.2em 0.3em;
    border-radius: 0.5em;
   
}


h3 {
    font-size:1.8em;
    font-weight: 800;
    color:var(--brown-color);
}

p {
    font-size:18px;
}

a {
    color: var(--red-color);
}

a:hover {
    color: var(--brown-color);
}


.pale {
    color:var(--pale-color);
}


.navbar {

    z-index:100;
    transition: all 0.3s ease;
    background-color: white;
}

.bg-light {
    background-color: white !important;
}

.navbar-brand img{
    height: 60px;
}

.navbar-nav {
    align-items: center;
}

.add-shadow {
  box-shadow: rgba(13, 36, 53, 0.05) 0px 1px 10px 5px;
  transition: all 0.3s ease;
}

.intro {
    background-color: var(--brown-color);
    padding:6em 0;

}


.intro-text p{
    color: var(--pale-color);
    font-size: 1.4em;
}

.intro-shortcut-wrapper {
    height:100%;
}

.intro-shortcut {
    text-align: center;
    background-color: var(--dark-brown-color);
    padding:1.5em;
    border-radius: 1em;
    transition:all 0.3s ease;
    margin:0.5em 0;
    height: 90%;
    
}



.intro-shortcut:hover {
    background-color: var(--darker-brown-color);
    transition:all 0.3s ease;
    transform: scale(1.05);
}

.intro-shortcut img {
 max-width: 70%;
 display: block;
 margin:0.2em auto 1em;
}



.intro-shortcut-link{
    text-decoration: none;
}

.intro-shortcut span {
    text-decoration: none;
    color:var(--pale-color);
    font-weight: 800;
    text-align: center;
    line-height: 0.5em;
}


.hero{
    background-color: var(--pale-color); 
    position: relative;
    padding:12em 0 6em;
}

.hero:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../img/pattern-3.png") repeat;
    opacity: 0.8; 
    z-index: 1; 
    mix-blend-mode: multiply;
}

.hero .container-fluid {
    position: relative;
    z-index: 2;
}

.page-hero {
    padding:6em 0 6em;
    margin-top:4em;
}

.page-hero h1 {
    text-align: center;
    margin:2em 0;
}

.hero p {
    font-size:1.4em;
    color:var(--brown-color);
    
    margin:2em 0;
}

.hero-light {
    text-transform: uppercase;
    font-weight: 400;
}

.hero-bold {
    text-transform: uppercase;
    font-weight: 900;
}

.hero-image {
    position: relative;
}

.hero-image-arrow-1 {
    position: absolute;
   
    bottom:0;
   
}

.hero .row {
    align-items: center;
}


.btn-primary {
    background:var(--red-color);
    border:none;
    padding:0.8em 1.3em;
    border-radius: 10em;
    text-transform: uppercase;
    font-weight: 700;
    transition: all 0.2s ease-in;
    --bs-btn-active-bg: var(--red-color);
}


.btn-primary:hover {
    background:var(--brown-color);
    padding:0.8em 1.6em;
    transition: all 0.2s ease-out;
}


.btn-secondary {
    background:var(--red-color);
    border:none;
    padding:0.8em 1.3em;
    border-radius: 10em;
    text-transform: uppercase;
    font-weight: 700;
    transition: all 0.2s ease-in;
}


.btn-secondary:hover {
    background:var(--brown-color);
    padding:0.8em 1.3em;
}




.agenda {
    
    padding:5em 0;
}

.agenda-page {
    
    padding:0;
}

.schedule {
    margin:2em 0;
}

.schedule-tab {
    width:19.2%;
    font-size:1.2em;
    margin-right:1%;
    margin-bottom: 1px;
}

.schedule-tab:last-child  {
    margin-right:0;
}

.schedule .nav-link {
    width:100%;
    border:0;
    background-color: white;
    border: 2px solid var(--pale-color);
    padding:1em 0;
    border-radius: 15em;
    font-weight: 600;
    transition: all 0.4s ease;
}

.schedule .nav-link.active {
    background-color: var(--pale-color);
    border: 2px solid var(--pale-color);
    color:var(--pale-color);
    font-weight: 800;
    color:var(--dark-brown-color);
    transition: all 0.4s ease;
    
}



.schedule .nav-link {
    color:var(--dark-brown-color);
    border-color: var(--pale-color) !important;
    transition: all 0.4s ease;
}

.schedule .nav-link:hover {
    background-color: var(--pale-color);
    border: 2px solid var(--pale-color);
    color:var(--brown-color);
    transition: all 0.4s ease;
}


.nav-link {
    color:var(--brown-color);
}

.nav-link:hover {
    color: var(--red-color);
}

.navbar-nav .nav-item {
    margin:0.5em;
}

.nav-item {
    text-transform: uppercase;
    color:var(--brown-color);
    font-weight: 700;
    
}

.navbar button[aria-expanded="true"] > span.close {
    display: inline;
 }
 
 .navbar button[aria-expanded="true"] > span.navbar-toggler-icon {
    display: none;
 }
 
 .navbar button[aria-expanded="false"] > span.close {
    display: none;
 }


.navbar-toggler-icon {
    background-image: none;
    width:auto;
    height:auto;
}

.navbar-toggler {
    border:0;
    color:var(--red-color);
}

.navbar-toggler:focus {
    box-shadow: none;
}

.tab-content {
    padding:2em 0;

}

.nav-tabs {
    border-bottom: 0;

}

.schedule-agenda-download {
    margin:1em 0;
}

.schedule-agenda-link {
    color: var(--brown-color);
    text-decoration: none;
    background-color: var(--pale-color);
    padding: 0.5em 0.8em;
    margin: 0.5em 0;
    border-radius: 8px;
    font-weight: 700;
    transition: all 0.3s ease-in;
}

.schedule-agenda-link:hover {
    color: var(--pale-color);
    background-color: var(--brown-color);
    transition: all 0.3s ease-out;
}

.schedule-items {
    list-style-type: none;
    padding-left: 0;
}

.schedule-item {
    box-shadow: 0px 0px 10px rgba(0,0,0,0.08);
    padding: 2em 2em 1.2em;
   border-radius: 1em;
   margin:1.6em 0;
   transition: all 0.3s ease-out;
}

.schedule-item:hover {
    box-shadow: 0px 0px 25px rgba(0,0,0,0.15);
    transition: all 0.3s ease-out;
}



.schedule-item:last-child {

}

.schedule-item-small-row {
    margin-bottom:0.5em;
    margin-top:0.5em;
   
}

.schedule-item-small {
    border: 2px solid var(--pale-color);
    padding:1em 1em;
    border-radius: 1em;
    font-size: 1em;
    transition:all 0.3s ease;
    background-color: rgba(255,255,255,0.05);
    height:100%;
}



.col-time {
    max-width: 180px;
}

.schedule-time {
    color:var(--red-color);
    font-weight: 800;
    font-size: 1.1em;
    margin-bottom: 0.2em;
    margin-top: 0em;
    text-align: center;
}

.schedule-time-small {
    color:var(--red-color);
    font-weight: 700;
    margin-bottom: 0.2em;
    font-size: 1em;
    align-items: stretch;
}

.schedule-wg {
    color:var(--brown-color);
    font-size: 1.4em;
    line-height: 1.2em;
    font-weight: 800;
    margin-bottom: 0.5em;
    margin-top:0;
}

.schedule-wg-small {
    color:var(--brown-color);
    font-weight: 700;
    font-size: 1.2em;
    margin-bottom: 0em;
}


.schedule-item-parallel .schedule-time-small {
    margin-bottom: 1.5em;
    border-bottom:2px solid var(--red-color);
}

.schedule-item-parallel li{
    list-style-type: none;
    margin-bottom:1em;
    padding-bottom:1em;
    color:var(--brown-color);
    border-bottom: 2px solid var(--pale-color);
}

.schedule-item-parallel li:last-child {
    border-bottom: none;
    padding-bottom: none;
    margin-bottom: none;
}

.schedule-item-parallel ul{
    padding-left:0;
    margin-top:1em;
}

.schedule-details {
    margin:1em 0 ;
    font-weight: 700;
}

.schedule-details a{
    color:var(--brown-color);
    background-color: var(--pale-color);
    padding:0.5em 0.8em;
    margin:0.5em 1em 0.5em 0;
    border-radius: 8px;
    text-decoration: none;
}

.schedule-details a:hover{ 
    background-color: var(--brown-color);
    color:var(--pale-color);

}


.schedule-details-misc {
    margin:0.5em 1em 0.5em 0;
    color:var(--brown-color);
}

.schedule-legend {
    text-align: center;
    font-size:0.8em;
}

.schedule-legend-item {
    font-weight: 700;
    padding: 0.5em;
    color:var(--brown-color);
}


.schedule-days span:last-child{
    display: none;
}


.ground-floor {
    background-color:#fdce07;
    border-radius: 10em;
    padding:0.2em 0.3em;
    color:white;
}

.one-floor {
    background-color:#0067ac;
    border-radius: 10em;
    padding:0.2em 0.3em;
    color:white;
}

.two-floor {
    background-color:#139347;
    border-radius: 10em;
    padding:0.2em 0.3em;
    color:white;
}

.registration {
    padding:3em 0;
    background-color: var(--pale-color);
}

.registration-legend {
    text-align: center;
    color:var(--light-brown-color);
    text-transform: uppercase;
    font-weight: 800;
    margin-bottom:3em;
    font-size:1.2em;
}

.registration-legend span:first-of-type {
    margin-right:2em;
}

.registration-cost {
    margin-bottom:2em;
    
}

.registration-cost-box {
    border:2px solid white;
    text-align: center;
    border-radius: 1em;
    padding:3.2em 1.6em;
    background: white;
    transition:all 0.3s ease;
    margin:1em 0;
}

.registration-cost-box:hover {
    border:2px solid var(--brown-color);
    transition:all 0.3s ease;
}



.registration-cost-box header {
    margin-bottom:3em;
}

.registration-cost-box article {
    margin-bottom:1em;
}

.registration-cost-box header p {
    font-weight: 800;
    color:var(--light-brown-color);
}

.registration-cost-box h3 {

    color:var(--brown-color);
}

.registration-cost-box .row {
    font-size: 1.5em;
    margin-bottom: 0;
}

.registration-cost-box .row i{
    color:var(--light-brown-color);
}

.registration-button {
    margin: 2em 0 6em 0;

}

@keyframes pop {
    0%   {scale:1}
    25%  {scale:1.1;}
    50%  {scale:1.1;}
    100% {scale:1}
  }

.disabled-box {
    opacity:0.6;
}

.disabled-box:hover {
    opacity:0.6;
}

.cost-1 {
    text-align: right;
    border-right:2px solid var(--red-color);
    margin-right:-10px;
    padding-right: 10px;
}

.cost-2 {
    text-align: left;
}

.cost-number {
    font-weight: 800;
    color:var(--red-color);
    font-size: 1.2em;
    
}

.cost-explained {
    color: var(--brown-color);
    text-transform: uppercase;
    font-weight: 700;
    margin:0;
    font-size:1em;
}


.registration-large-box {
    background-color: white;
    border-radius: 1em;
    border:2px solid var(--pale-color);
    transition:all 0.3s ease;
    margin:2em 0;
}

.registration-large-box:hover {
    border:2px solid var(--dark-brown-color);
    transition:all 0.3s ease;
}


.registration-large-box img {
    border-top-right-radius: 0.7em;
    border-bottom-right-radius: 0.7em;
    height: 100%;
    max-width:100%;
    object-fit: cover;
}

.registration-large-box-inner {
    padding:2em;
}

.registration-large-box img {
    opacity:0.7;
    transition: opacity 0.3s ease;
}

.registration-large-box:hover img {
    opacity:1;
    transition: opacity 0.3s ease;
}


.brown-box {
    background-color: var(--brown-color);
    border-radius: 1em;
    padding: 2em;
    margin:8em 0 2em;
    color:var(--pale-color);
}

.brown-box h3{
    color:var(--pale-color);
    margin-bottom: 1em;
}

.brown-box a:hover {
    color:var(--pale-color);
}

.extra-events {
    margin-bottom: 6em;
}


.extra-events .row .col-md-6 {
    display: flex;
}

.full-pale-box {
    background-color: var(--pale-color);
    border-radius: 1em;
    padding: 2em;
    margin:4em 0;
    color:var(--brown-color); 
}

.full-pale-box  h2{
    color:var(--brown-color);
    margin-bottom: 1em;
    font-weight: 2em;
    text-align:left;
}

.full-pale-box a:hover {
}

.pale-box {
    border:2px solid var(--pale-color);
    margin:1em 0;
    border-radius: 1em;
    color: var(--brown-color);
    align-items: stretch;

}

.pale-box-header {
    background-color: var(--pale-color);
    padding:2em;
    border-top-left-radius: 0.8em;
    border-top-right-radius: 0.8em;
    
}

.pale-box-header p {
    margin-bottom: 0;
    color: var(--red-color);
    font-weight: 800;

}

.pale-box-icon {
    border: 2px solid var(--brown-color);
    border-radius: 20em;
    color:var(--brown-color);
    text-align: center;
    font-size: 1.8em;
    text-align: center;
    display: inline-block;
    padding:0.3em 0.6em;

}

.pale-box-body {
    padding:2em;
}


.pins .row{
    display: flex;
    align-items: center;
    margin:2em 0;
}

.speakers {
    background-color: var(--pale-color);
    padding:6em 0;
    text-align: center;
}


.supply-fellows .row .col-md-4 {
    text-align: center;
}

.slider-nav  {
    filter: drop-shadow(0 0 0.25rem rgba(0, 0, 0, .1)) !important;
}


.slider-nav-round .slider-nav::after, .slider-nav-square .slider-nav::after {
    background-color: var(--brown-color) !important;
}

.innovations-expo {
    margin:4em 0;
}

.innovations-expo-item {
    background-color: white;
    border-radius: 1em;
    box-shadow: 0 0 10px rgba(0,0,0,0.08);
    padding:1em 2em;
}


.innovations-expo-item h4 {
    color:var(--brown-color);
    font-size: 1.2em;
    font-weight: 900;
    padding:1em 0 0 0;
}


.innovations-expo-item h5 {
    color:var(--red-color);
    font-size: 1.2em;
    font-weight: 900;
    padding:0em 0;
}


.innovations-expo-item p {
    font-size:1em;
    color:var(--brown-color);
}


.btn-disabled {
    opacity:0.3;
    cursor: not-allowed;
}


.alert-pill {
    padding:0.5em 0.8em 0.3em;
   
    display: inline-block;
    border-radius: 0.6em;
    font-weight: 600;
    
}

.pale-pill {
    background-color:var(--pale-color);
    color:var(--brown-color);
}

.red-pill {
    background-color:var(--red-color);
    color:var(--pale-color);
}

.extra-space {
    margin:0.7em 0 1.2em;
}


.homepage-faq {
    margin:5em 0;
}



.faq .accordion {
    box-shadow: none;
}


.accordion-button  {
    font-family: 'Montserrat', sans-serif;
    font-size:1.3rem;
    color: var(--brown-color);
    
}

.faq .accordion-button:focus {

    border-color: var(--pale-color);
}
  
.faq .accordion-button.collapsed::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'  fill='%23e66442'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.faq .accordion-button:not(.collapsed)::before {
    content:'• \00a0';
    display: inline-block;
    color:var(--red-color);
}


.faq .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e66442'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}


.faq .accordion-button:not(.collapsed) {
    color: var(--brown-color);
    background-color: #f7f3ed;
    font-weight: 700;
    box-shadow: none;
    transition: background-color 0.3s ease;
}

.faq .accordion-button  {
    padding:1.7em 1em;
    transition: background-color 0.3s ease;
    font-weight: 400;
}

.faq .accordion-button:hover {
    background-color: #f7f3ed;
}

.faq .accordion-button:focus {
    box-shadow: none;
}

.faq .accordion-body {
    padding:0.5em 2em 2em;
    background-color: #f7f3ed;
}

.faq .accordion-item {
    border-bottom: 1px solid var(--pale-color);
}

.hotel-price {
    background-color: white;
    vertical-align: top;
}

.hotel-price>:not(caption)>*>*{
    padding:1.2em ;
    vertical-align: top;
}

.hotel-price thead {
    background-color: var(--brown-color);
    color:white;
    font-size:1.2em;
}

.hotel-price thead th:last-of-type {
    max-width:20%;  
}

.faq-download {
    text-align: center;
    margin:2em 0;
}


.countdown{
    background-color: var(--brown-color); 
    position: relative;
    padding:6em 0;
}

.countdown:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../img/pattern-3.png") repeat;
    opacity: 0.7; 
    z-index: 1; 
    mix-blend-mode: multiply;
}

.countdown-inner {
    position: relative;
    z-index: 2;
}

#clockdiv {
    text-align: center;
}


.countdown-card {
    background:var(--dark-brown-color);
    padding:2em 1.5em; 
    color:var(--pale-color);
    border-radius: 10px;
    margin:1em 0;
}

.days, .hours, .minutes, .seconds {
    font-size: 2.4em;
    font-weight: 800;
}

.smalltext {
    text-transform: uppercase;
}

.countdown-card span {
    display: block;
}

.footer-hash {
    background-color: var(--brown-color);
    padding:8em 0;
    text-align: center;

    
}

.footer-hash h3{
    margin:0;
    font-size:5vw;
    font-weight: 900;
}

.footer-hash-button {
    background: var(--pale-color);
 
  
    display: inline-block;
    padding:0.5em 0.8em;
    border-radius: 1em;

  
}

.footer-socials {
    background-color: var(--pale-color);
    margin-top:-3em;
    padding:2em;
    margin-bottom: 3em;
    border-radius: 1.2em;
    text-align: center;
}

.footer-socials p {
    color: var(--brown-color);
}

.footer-icons {
    margin:3em 0;
    color:var(--brown-color)
}



.footer-icons a {
    color:var(--brown-color);
    font-size: 1.3em;
    margin:0 0.5em;
    border:2px solid var(--brown-color);
    border-radius: 100px;
    padding:0.7em 0.8em;
    transition: 0.3s all ease;
}

.footer-icons a:hover {
    background:var(--brown-color);
    color:var(--pale-color);
    transition: 0.3s all ease;
}

.footer-accra {
    background-color: var(--brown-color);
    padding:2em 0;
}

.footer-accra img{
    max-height: 60px;
    margin:0 auto;
    display: block;
    width:100%;
}

.footer-logos {
    margin:2em 0;
}

.footer-logos img {
    max-height: 60px;
    margin:0 auto;
    display: block;
    width:100%;
}

.footer-links{
    text-align: center;
   
}

.footer-links a {
    padding:1em 0.5em;
    font-size:0.8em;
    color:var(--brown-color)
}


/* Page */ 

.page-container {
    position: relative;
    top:-6em;
    background-color: white;
    z-index:10;
    padding:2em;
    
}

/* Page */ 

#image-gallery {
    margin:2em 0;
    display:flex;
}

#image-gallery {
    margin:2em 0;
    display:flex;
}


.page-intro {
    text-align: center;
    font-size:1.6em;
    color: var(--brown-color);
    padding:2em 0 0em;
    max-width: 600px;
    margin:0 auto;
}

.speaker-card {
    background-color: #fff;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.08);
    border-radius:1em;
    transition: all 0.3s ease;  
    margin-bottom: 1em;
}

.speaker-card:hover {
    cursor: pointer;  
    border-radius:0em;
    transform: scale(1.05);
    box-shadow: 0px 0px 25px rgba(0,0,0,0.15);
    transition: all 0.3s ease;  
}


.speaker-card:hover  img{
    border-top-right-radius: 0em;
    border-top-left-radius: 0em;
}



.speaker-card img {
    filter: grayscale(0) sepia(0);
    transition: all 0.3s ease;  
    filter: grayscale(1) sepia(0.5);
}

.speaker-card:hover p{


color:var(--red-color);
transition: all 0.3s ease;  
}

.speaker-card:hover img {
    filter: grayscale(0.5) sepia(0.1);
    transition: all 0.3s ease;  
}

.speaker-card img{
    border-top-right-radius: 0.9em;
    border-top-left-radius: 0.9em;
}

.speaker-card-text {
    padding:1.5em 1em 0.1em;
}

.speaker-card-text p {
    font-weight: 800;
    color:var(--brown-color);
    margin-bottom: 1em;
    transition: all 0.3s ease;  
}


.modal-content {
    background: white;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.08);
    border-radius: 1em;
    border:0;
    color:var(--brown-color);
    padding:1em;
}

.modal-header {
    border:0;
}

.modal-footer {
    border:0;
}


.modal-content img {
    border:4px solid var(--pale-color);
    margin:0 auto;
    text-align: center;
}

#modal-name {
    font-weight: 900;
}


.media-page {
    margin:2em 0;
}

.align-left {
    text-align: left;
    margin:0
}

.media-page .row{
    margin:2em 0;


}

.media-page p, .media-page ul {
    margin:1em 0 ;
}

.media-page li {
    font-size:1.1em;
}


.click-copy {
    background-color: var(--brown-color);
    color:var(--pale-color);
    padding:0.8em 1.4em;
    border-radius: 1.2em;
    margin:1em 0;
    cursor: pointer;
}

.click-copy p:first-of-type {
    font-size:1.3em;
    color:white;
}

.click-copy:hover {
    background:var(--darker-brown-color);
    color:white;
}

.click-copy-small {
    font-size:0.8em;
}

.visuals a {
    margin:1em 0;
}


.top-bar {
    display: inline-block;
    z-index:10000;
    background:var(--red-color);
    margin-bottom:1em;
    width:100%;
    padding:1em;
    text-align: center;
    color:white;
    font-weight: 600;
}

.top-bar a {
    color:white;
}

.navbar-expand-md {
    flex-wrap: wrap;
    justify-content: flex-start;
}

/* Collapse the navbar at 800px, not Bootstrap's 768px.
   Every mobile-nav rule in this file (the hamburger icon, the full-height
   stacked .navbar-nav, the .nav-link padding) lives in the
   `max-width: 800px` block below. The markup, though, is
   `navbar-expand-md`, and Bootstrap collapses `md` at 768px - so between
   768px and 800px neither presentation applied: the toggler was hidden by
   Bootstrap's `(min-width: 768px)` rules while the desktop menu was still
   too wide to fit on one line.

   With the `flex-wrap: wrap` above (which overrides Bootstrap's `nowrap`)
   the menu then wrapped onto extra rows and every dropdown stacked open,
   giving the fixed, opaque, z-index:100 .nav-head a height of ~1120px -
   taller than the viewport. The page rendered correctly underneath but was
   completely covered, so it read as a blank page at 768-800px.

   Overriding the two Bootstrap `(min-width: 768px)` rules across
   768-800px is what makes the two numbers agree. Not fixed by setting
   `nowrap` instead: that only takes the nav from 1120px to 954px, because
   the desktop menu genuinely does not fit at this width - it needs to be
   the mobile nav, which is what this does. */
@media only screen and (min-width: 768px) and (max-width: 800px) {
    .navbar-expand-md .navbar-toggler {
        display: block;
    }

    /* Bootstrap's expand rule is `display: flex !important`, so unsetting it
       needs !important too. .show is what Bootstrap's Collapse JS adds when
       the hamburger is tapped. */
    .navbar-expand-md .navbar-collapse {
        display: none !important;
        flex-basis: 100%;
    }

    .navbar-expand-md .navbar-collapse.show,
    .navbar-expand-md .navbar-collapse.collapsing {
        display: block !important;
    }
}

@media only screen and (max-width: 1178px) {
    h1 {
       font-size:2.6em;
    }
    h2 {
       font-size:2.2em; 
    }
    .hero {
        padding:12em 0 8em;
    }
    
  }


  @media only screen and (max-width: 960px) {

    .schedule-details a {
        display: block;
        margin:1.2em 0;
    }

    
    .intro-shortcut span {
        font-size:0.9em;
        line-height: 0.6em !important;
    }

    .intro-shortcut span {
        align-items: stretch;
    }



    .intro-wrapper .col-4 {
        margin: 1em 0;
    }


    .page-hero {
        padding:4em 0 4em;
        margin-top:4em;
    }
    
    .page-hero h1 {
        text-align: center;
        margin:0em 0 2em;
    }
    
    
  }

@media only screen and (max-width: 800px) {
    h1 {
        font-size:2em;
     }

     h2 {
        font-size: 1.8em;
     }
     h3 {
        font-size:1.6em;
    }

     p {
        font-size: 1.1em;
        line-height: 1.4em;
     }

     .hero p {
        font-size:1.2em;
     }
     .hero {
        padding:10em 0 1em;
     }

     .hero img {
        display: none;
     }

     .schedule-days {
        font-size:0.8em;

     }


     .schedule-item {
        padding: 1.6em 1em 1em;
        margin:0.8em 0;
     }

    .schedule-days span:first-child{
        display: none;
    }
    .schedule-days span:last-child{
        display: inline-block;
    }

    .schedule-wg-small {
        font-size:1em;
    }

    .schedule-time-small {
        margin-bottom: 0.5em;
    }

    .schedule-details {
        font-size:0.8em;
    }


    .schedule-item p {
        font-size:0.9em;
    }

    .schedule-wg {
        font-size: 1.1em !important;
    }

    .schedule-item-parallel ul li {
        font-size:0.9em;
    }

    .registration-large-box img {
        display: none;
    }

    .disabled-box {
        display: none;
    }



    .navbar-nav {
        align-items: self-start;
        margin:1em 0;
        min-height:100vh;
        font-size:1.2em
    }

    .navbar-nav li {
        border-bottom: 1px solid var(--pale-color);
        width:100%;
        display: block;
        padding:0.2em 0;
        transition: all 0.3s ease;
    }

    .navbar-nav  a{
        transition: all 0.3s ease;
    }

    .navbar-nav li:hover a{
    transform: translate(5px,0);
    transition: all 0.3s ease;
}
    .navbar-nav li:hover a::after{
        
        transition: all 0.3s ease;
        content:'\00a0 •';
        display: inline-block;
        color:var(--red-color);
        
    }

    .navbar-toggler-icon i, .close i{
        font-size:1.2em;
        background-color: rgb(244,237,225,0.5);
        border-radius: 2em;
        padding:0.3em 0.41em;
        transition:all 0.3s ease;
    }

    .navbar-toggler-icon i:hover, .close i:hover {
        background-color: rgb(244,237,225,1);
        transition:all 0.3s ease;
       
    }

    .navbar-nav .nav-item {
        margin:0;
        text-transform: none;
        font-size: 1.2em;
        font-weight: 800;
        
    }

    .nav-link {
        padding:0.3em 0;
    }

    .hero-image-main {
        margin-top:4em;
    }



    .schedule-time {
        text-align: left;
    }

    #modal-image {
        display: none;
    }

    .modal-content {
        padding:0.4em;
    }

    .page-container {
        padding:0.5em;
        top:0em;
    }

    



}

@media only screen and (max-width: 560px) {

.schedule-agenda-link {
    display: block;
    width:100%;
    margin:1em 0;
}

.schedule-time {
    text-align: left;
    font-size:1em;
}

.schedule-wg {
    font-size:1.3em
}

.schedule-details a {
    display: block;
}

.intro-shortcut {
    padding:0.8em;

    
}

}