:root {
    --blue: #385b74;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #063151;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #ff4136;
    --light: #f8f9fa;
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
    --font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace
}
*{
    font-family:var(--font-family-sans-serif);
}
.container #dropdown{
    display:flex;
    justify-content:center;
}
.container #dropdown button {
    background-color: transparent;
    color: var(--blue);
    font-size: 3em;
    text-align: center;
    align-self: center;
    border:0;
    font-weight:bold;
    margin-left:4%;
}
    .container #dropdown button:focus{
        box-shadow:none;
    }
    .container .event-categories ul li a{
        color:var(--secondary);
        font-size:1.2em;
    }
.container .event-categories ul li a:hover {
    color: var(--primary);
}
        .container .event-categories ul li.active{
            background-color: var(--blue);
            border-radius:5%
        }
            .container .event-categories ul li.active a{
                color:white;
            }
            .container .event-categories .nav {
                justify-content: center;
            }
.container-events #content-wrapper {
    display: flex;
    flex-direction: column;
    align-content: stretch;
}
    .container-events #content-wrapper .event {
        padding: 0;
        margin-top: 1vh;
        border: 1px var(--blue) solid;
        cursor: pointer;
        display: flex;
        flex-direction:row;
        position:relative
    }
            .container-events #content-wrapper .event .event-text{
                padding:0;
            }
            .container-events #content-wrapper .event > a {
                width: 100%;
                height: 100%;
            }
            .container-events #content-wrapper .event h3 {
                background-color: var(--blue);
                padding: 0.2%;
                padding-left:2%;
            }
            .container-events #content-wrapper .event h3 a {
                color: white;
                text-decoration: none;
            }
            .container-events #content-wrapper .event p{
                width:80%;
                padding-left:2%;
                margin-bottom:0.5rem;

            }
            .container-events #content-wrapper .event p img {
                height: 1.6vh;
                vertical-align: top
            }
            .container-events #content-wrapper .event .logo-event{
                max-height:100%;
                right:1%;
                height:100px;
                bottom:2%;
                max-width:20%;
                position:absolute;
                z-index:10;
                display:flex;
                align-items:self-end;
            }
            .container-events #content-wrapper .event .logo-event img {
                max-width: 100%;
                max-height: 100%;
            }


            footer.credits {
                color: var(--primary);
                width: 100%;
                text-align: center;
                opacity: 0.6;
                margin-top: 3%
            }

@media screen and (max-width: 576px) {
    .container > div{
        width:95%;
        margin-left:auto;
        margin-right:auto;
    }
    .nav-tabs .nav-link{
        padding:0.25rem 0.5rem;
    }
}