@media only screen and (min-device-width: 820px) {  
    /* web */
    body {
        font-family: 'Montserrat';
        font-size: 16px;
    } 
    h7 {
        font-size: 17px;
    }
}
@media only screen and (max-device-width: 820px) {  
    /* mobile */
    body {
        font-family: 'Montserrat';
        font-size: 40px;
    } 
    h7 {
        font-size: 44px;
    }
}

.logo {
    top: 0px;
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 220px;
    background-color: white;
}

.logo_web {
    height: 220px;
}

.logo_mobile {
    height: 290px;
}

div.navmenu_web {
    top:162px;
    position: fixed;
    z-index: 1000;
    width: 100%;
    font-size: 17px;
} 

div.navmenu_mobile {
    top:0px;
    position: fixed;
    z-index: 1000;
    width: 100%;
    font-size: 44px;
} 

top {
    width: 100%;
}

.left {
    float: left;
}

.right {
    float: right;
}

.middle {
    position: absolute;
    top: 75px;
    right: 180px;
}

.hero {
    position: relative;
    text-align: center;
    color: white;
    font-weight: bold;
    font-style: italic;
}

.hero_web {
    top: 220px;
}

.hero_mobile {
    top: 300px;
}

.about_top {
    top: 250px;
}

section {
    position: relative;
    text-align: center;
} 

@media only screen and (max-device-width: 820px) {  
    section {
        top: 250px;
    }
}

@media only screen and (min-device-width: 820px) {  
    section {
        top: 250px;
    }
}

@media only screen and (max-device-width: 820px) {  
    /* mobile */
    .hero {
        font-size: 18px;
    }
}

@media only screen and (min-device-width: 820px) {  
    /* web */
    .hero {
        font-size: 30px;
    }
    .centered {
        position: absolute;
        top: 8%;
        left: 40%;
        transform: translate(-50%, -50%);
    }
}

/* events */

.button_event {
    padding: 0;
    border: none;
    border-radius: 7%;
}

.button_event_month {
    font-weight: bold;
    color: white;
    padding: 0px;
    margin: 0px;
}

.button_event_month_blue {
    color: #0E61E4;/*blue*/
}

.button_event_month_green {
    color: #079C46;/*green*/
}

.button_event_month_purple {
    color: #5949E4;/*purple*/
}

.button_event_day {
    color: black;
    padding: 0px;
    margin-bottom: -2px;
}

.button_event_name {
    color: grey;
    padding: 0px;
}

.button_event_time {
    font-size: 7px;
    color: grey;
    padding: 0px;
}

@media only screen and (min-device-width: 820px) {  
    /* web */
    .button_event_green {
        background: url(img/button_event_green.png) 0px 0px no-repeat;
    }
    .button_event_blue {
        background: url(img/button_event_blue.png) 0px 0px no-repeat;
    }
    .button_event_purple {
        background: url(img/button_event_purple.png) 0px 0px no-repeat;
    }
    .button_event {
        height: 55px;
        width: 55px;
        border-radius: 7%;
    }
    .button_event_month {
        font-size: 12px;
    }
    .button_event_day {
        font-size: 24px;
        margin-bottom: -2px;
    }
    .button_event_name {
        font-size: 4px;
    }
}

@media only screen and (max-device-width: 820px) {  
    /* mobile */
    .button_event_green {
        background: url(img/button_event_110x110_green.png) 0px 0px no-repeat;
    }
    .button_event_blue {
        background: url(img/button_event_110x110_blue.png) 0px 0px no-repeat;
    }
    .button_event_purple {
        background: url(img/button_event_110x110_purple.png) 0px 0px no-repeat;
    }
    .button_event {
        height: 110px;
        width: 110px;
        border-radius: 7%;
    }
    .button_event_month {
        font-size: 24px;
    }
    .button_event_day {
        font-size: 48px;
        margin-bottom: -2px;
    }
    .button_event_name {
        font-size: 8px;
    }
}

/** Menu **/
@media only screen and (max-device-width: 820px) {  
    /* mobile */
    /* show navmenu_mobile and hide navmenu_web */

    div.navmenu_web {
        display: none;
    }
    div.logo_web, div.donate_web, div.hero_web {
        display: none;
    }

    /* vertical menu */

    .menu2 {
        display: block;
        margin: 50px auto;
        position: relative;
        top: 92px;
        float: right;
        right: 70px;
        width: 200px;
    }

    .menu2 li {
        list-style-type: none;
    }

    .menu2 li li {
        width: 250px;
        background-color: #0E61E4;/*blue*/
        list-style-type: none;
        right: 200px;
    }

    .menu2 li li a.active {
        background-color: #079C46;/*green*/
        color: white;
    }

    .menu2 li li a.inactive {
        background-color: #0E61E4;/*blue*/
        color: white;
    }

    .submenu2:has(a:not(.active)){
        opacity: 0;
    }

    .menu2 ul li a:hover:not(.active) {
        background-color: #5949E4;/*purple*/
        color: white;
    }

    .menu2 > li > a {
        display: block;
        color:  #0E61E4;/*white*/
        padding: 8px 16px; 
        text-align: right;
        text-decoration: none;
        font-size: 84px;
    }
    
    .menu2 li ul {
        margin-top: 70px;
    }

    .menu2 ul {
        height: 0;
        left: 0;
        opacity: 0;
        position: absolute;
        transition: all .5s ease;
        top: 35px;
        width: 100%;
    }
    
    .menu2 li:hover ul {
        height: 200px;
        opacity: 1;
        transform: translateY(0);
    }

    .menu2 ul a {
        color: white;
        display: block;
        padding: 5px 20px;
        text-decoration: none;
    }    
}

@media only screen and (min-device-width: 820px) {  
    /* web */
    /* show navmenu_web and hide navmenu_mobile */
   
    div.navmenu_mobile {
        display: none;
    }
    div.logo_mobile, div.donate_web, div.hero_mobile {
        display: none;
    }
    /* horizontal menu */

    .wave {
        position: relative;
        width: 95%;
        top: 150px;
    }

    /* Only apply the blue background to menu ul elements */
    div.navmenu_web ul, 
    div.navmenu_mobile ul {
        list-style-type: none;
        margin-top: 10px;
        padding: 0;
        padding-right: 50;
        width: 97%;
        overflow: hidden;
        background-color: #0E61E4; /*blue*/
        position: -webkit-sticky; /* Safari */
        position: sticky;
        top: 0;
        border-radius: 120px 10px / 100px;     
    }
      
    div.navmenu_web li, 
    div.navmenu_mobile li {
        float: left;
    }
      
    li a {
        display: block;
        color: white;/*white*/
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        border-radius: 120px 10px / 100px;
    }      
      
    li a:hover {
        background-color: #5949E4;/*purple*/
    }
      
    .active {
        background-color: #079C46;/*green*/
    }
}

/* Default ul styles for other parts of the body */
body ul {
    list-style-type: disc; /* or any other desired style */
    padding-left: 20px;
    margin: 10px 0;
    background-color: transparent; /* No background */
}
 
/** gallery **/

@media (max-width: 820px) {
    .gallery_min {
        flex: 20%;
        display: block;
        padding: 2px;
        border-radius: 10%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 5px;
        width: 330px;
    }
}

.gallery_min {
    flex: 20%;
    padding: 2px;
    border-radius: 10%;
    width: 350px;
}

.gallery_container {
    position: relative;
    text-align: center;
    color: white;
    font-weight: bold;
}

@media only screen and (max-device-width: 820px) {  
    /* mobile */
    .gallery_container {
        font-size: 12px;
    }
}

@media only screen and (min-device-width: 820px) {  
    /* web */
    .gallery_container {
        font-size: 20px;
    }
}

.gallery_text {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
}