:root {
    --headerHeight: 134px;
}


.eventsList {
    padding: 0 100px;
}

.eventsList  {
    color: var(--duskyGreen);
    align-self: center;
    max-width: 1400px;
    display: table;
    border-spacing: 0 30px;
}

.eventsList .tr {
  display: table-row;
}

.eventsList .td {
  display: table-cell;
  padding: 36px 24px 36px 36px;
  box-sizing: border-box;
  vertical-align: top;
}

.intro {
    font-family: "hfa", sans-serif;
    text-transform: uppercase; 
    color: var(--white);
    font-size: calc(var(--xxlarge) + 12px);
    min-width: 75%;
    text-align: right;
    line-height: 100%;
    max-width: 1400px;
    align-self: center;
    margin-bottom: 50px;
    position: sticky;
    top: var(--headerHeight);
}

h1 {
    font-family: "calyces", sans-serif;
    text-transform: initial;   
    font-size: var(--normal);
    font-weight: normal;
    padding-left: 2px;
}

.typeOfEvent{
    font-family: "hfa", sans-serif;
    text-transform: uppercase;
    font-size: calc(var(--large) * 1.03);
    line-height: 90%;
}

.eventsList {
    background-color: var(--hermosaPink) !important;
    z-index: 2;

}

.eventsList h2 {
    font-size: var(--large);
    line-height: 100%;
    font-family: "calyces", sans-serif;
    text-transform: none;
}

.eventsList a {
    font-size: var(--large);
    color: var(--duskyGreen);
}

.bg-1 {
    background-color: var(--cobaltGreen);
}

.bg-2 {
    background-color: var(--lightGreenYellow);
}


.eventsList a:link {
    color: var(--duskyGreen);
}


.eventsList .date {
    padding-top: 4px;
    font-size: calc(var(--large) );
    line-height: 73%;
}

.eventsList .longerTitle {
    padding-left: 3px;
}

.eventsList .time {
    padding-left: 3px;
    white-space: nowrap;
    padding-top: 17px;
}


main {
    margin-left: 280px;
}

.eventsList .filter {
    list-style: none;
    position: fixed;
    left: 0;
    top: 200px;
}

.eventsList .filter h2 {
    font-size: calc(var(--medium) * 1.08);
    color: var(--black);
    font-family: "hfa", sans-serif;
    text-transform: uppercase;
    margin-left: 2px;
}

.eventsList .filter li {
    margin-top: 3px;
}

.eventsList .filter a {
    color: var(--black);
    font-size: var(--medium);
    padding: 0 2px 1px 2px;
}

.eventsList .filter .active {
    color: var(--hermosaPink);
    background-color: var(--black);
}

.filteredEventsEmpty {
    font-size: calc(var(--xlarge) * 1.08);
    color: var(--black);
    font-family: "hfa", sans-serif;
    text-transform: uppercase;
    margin-top: 15px;
}



@media only screen and (max-width: 1280px) { 
    .eventsList {
        padding: 0 40px;
    }
}

@media only screen and (max-width: 1080px) { 
    main {
        margin-left: 244px;
    }
}

@media only screen and (max-width: 890px) { 
    main {
        margin-left: 188px;
    }

    h1 {
        margin-right: 25px;
    }
    .eventsList  {
        align-self: initial;
        display: block;
        padding: 0 25px;
    }
    .eventsList .tr {
        display: block;
    }
    .eventsList .td {
        display: block;
        padding: 0;
    }
    .event {
        padding: 20px;
        margin-top: 13px;
        margin-bottom: 16px;
    }
    .eventsList .time {
        display: inline;
    }
    .eventsList .date {
        font-size: var(--medium);
        margin-bottom: 17px;
    }


    .eventsList .filter {
        top: 202px;
    }
    .eventsList .filter a {
        font-size: var(--normal);
    }
}

@media only screen and (max-width: 600px) { 
    .filter {
        display: none;
    }
    main {
        margin-left: 0;
    }
}