.eventItem {
    margin-top: 8px;
}

.eventDate .eventDay{
    font-size: 36px;
    font-weight: bold;
    max-height: 85px;
    color: #bf2d2b;
    letter-spacing: 2px;
}

.eventDate .eventMonth{
    font-size: 36px;
    font-weight: 100;
    font-weight: lighter;
}

.eventItemDivider {
    border-bottom-style: solid;
    border-bottom-width: 3px;
    border-bottom-color: #bf2d2b;
    margin: 0 auto;
    width: 50%;
}

.eventDivider {
    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: white;
    height: 15px;
    width: 50%;
    margin: 0 auto;    width: 50%;
}

.staplesHeader { 
    font-size: 25pt;
    text-align: center;
    font-family: Oswald;
}

.staplesHeaderDivider {
    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: white;
    margin: 0 auto;
    width: 50%;
    height: 10px;
}

.staples a {
    color: white;
    text-decoration: none;
}


.hnnStaples li {
    margin-top: 12px;
    margin-bottom: 12px;
    list-style-type: none;
    font-family: Oswald;
    font-size: 14pt;
}

.staplesPresentations li {
    margin-top: 12px;
    margin-bottom: 12px;
    list-style-type: none;
    font-family: Oswald;
    font-size: 14pt;
}

.eventDate, .eventLocation {
    padding-left: 44px;
    margin-bottom: 6px;
}

.eventFooter-location {
    color: #bf2d2b;
}

.locationContainer {
    padding-left: 44px;
}

/* if screen is less than or equal to 579px */
/* phones portrait */
@media (max-width: 579px) {

    .staples {
        width: 80%;
        margin-left: 10%;
        margin-right: 10%;
        color: white;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    #staples-first, staples-second, #staples-third {
        display: block;
        width: 100%;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .staplesEventViewAll {
        text-align: center;
        font-family: Oswald;
        font-size: 13pt;
        margin-top: 10px;
    }

    .staplesEventViewAll a {
        color: #bf2d2b;
        text-decoration: none;
    }
    .staplesViewAll {
        text-align: center;
        font-family: Oswald;
        font-size: 13pt;
    }

    .staplesViewAll a {
        color: #bf2d2b;
        text-decoration: none;
    }

    .infographicLeft {
        display: inline-block;
        width: 40%;
        text-align: right;
        font-family: Oswald;
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 14pt;
    }

    .infographicRight {
        display: inline-block;
        width: 50%;
        vertical-align: top;
        margin-left: 10px;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .infographicRight img {
        width: 150px;
    }

    .eventLocation {
        margin-bottom: 6px;
    }
}

/* if screen is greater than or equal to 580px and less than or equal to 767px */
/* phones landscape - one column */
@media (min-width: 580px) and (max-width: 767px) {

    .staples {
        width: 50%;
        margin-left: 25%;
        margin-right: 25%;
        color: white;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    #staples-first, #staples-second, #staples-third {
        display: block;
        width: 100%;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .staplesEventViewAll {
        text-align: center;
        font-family: Oswald;
        font-size: 13pt;
    }

    .staplesEventViewAll a {
        color: #bf2d2b;
        text-decoration: none;
    }
    .staplesViewAll {
        text-align: center;
        font-family: Oswald;
        font-size: 13pt;
    }

    .staplesViewAll a {
        color: #bf2d2b;
        text-decoration: none;
    }

    .infographicLeft {
        display: inline-block;
        width: 40%;
        text-align: right;
        font-family: Oswald;
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 14pt;
    }

    .infographicRight {
        display: inline-block;
        width: 50%;
        vertical-align: top;
        margin-left: 20px;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .infographicRight img {
        width: 150px;
    }
}

/* if screen is greater than or equal to 768px AND less than or equal to 991px*/
/* tablets - one column */
@media (min-width: 768px) and (max-width: 991px) {

    .staples {
        width: 750px;
        color: white;
        padding-top: 20px;
        margin-left: auto;
        margin-right: auto;
        padding-bottom: 20px;
    }

    #staples-first {
        display: inline-block;
        vertical-align: top;
        width: 24%;
        border-right-style:solid;
        border-right-width: 1px;
        border-right-color: white;
        height: 550px;   
        margin-right: 2%;
    }

    #staples-second {
        display: inline-block;
        vertical-align: top;
        width: 37%;
        border-right-style:solid;
        border-right-width: 1px;
        border-right-color: white;
        height: 550px;   
        margin-right: 2%;
    }

    #staples-third {
        display: inline-block;
        vertical-align: top;
        height: 550px;
        width: 32%;
    }

    .staplesEventViewAll {
        text-align: center;
        margin-top: 7px;
        font-family: Oswald;
        font-size: 13pt;
    }

    .staplesEventViewAll a {
        color: #bf2d2b;
        text-decoration: none;
    }
    .staplesViewAll {
        text-align: center;
        margin-top: 20px;
        font-family: Oswald;
        font-size: 13pt;
    }

    .staplesViewAll a {
        color: #bf2d2b;
        text-decoration: none;
    }

    .infographicLeft {
        display: inline-block;
        width: 40%;
        margin-top: 20px;
        margin-bottom: 21px;
        text-align: right;
        font-family: Oswald;
        font-size: 14pt;
    }

    .infographicRight {
        display: inline-block;
        width: 50%;
        vertical-align: top;
        margin-top: 20px;
        margin-bottom: 21px;
        margin-left: 20px;
    }

    .infographicRight img {
        width: 150px;
    }

    .eventItem .eventLocation {
        height: 60px;
    }

    .locationContainer, .eventDate, .eventLocation {
        padding-left: 10px;
    }

    .eventDate .eventDay, .eventDate .eventMonth {
        font-size: 22px;
    }
}

/* if screen is greater than or equal to 992px AND less than or equal to 1199px */
/* desktop - one column */
@media (min-width: 992px) and (max-width: 1199px) {

    .staples {
        width: 970px;
        color: white;
        padding-top: 20px;
        margin-left: auto;
        margin-right: auto;
        padding-bottom: 20px;
    }

    #staples-first {
        display: inline-block;
        vertical-align: top;
        width: 30%;
        border-right-style:solid;
        border-right-width: 1px;
        border-right-color: white;
        height: 550px;   
        margin-right: 2%;
    }

    #staples-second {
        display: inline-block;
        vertical-align: top;
        width: 33%;
        border-right-style:solid;
        border-right-width: 1px;
        border-right-color: white;
        height: 550px;   
        margin-right: 2%;
    }

    #staples-third {
        display: inline-block;
        vertical-align: top;
        height: 550px;
        width: 32%;
    }

    .staplesEventViewAll {
        text-align: center;
        margin-top: 64px;
        font-family: Oswald;
        font-size: 13pt;
    }

    .staplesEventViewAll a {
        color: #bf2d2b;
        text-decoration: none;
    }
    .staplesViewAll {
        text-align: center;
        margin-top: 20px;
        font-family: Oswald;
        font-size: 13pt;
    }

    .staplesViewAll a {
        color: #bf2d2b;
        text-decoration: none;
    }

    .infographicLeft {
        display: inline-block;
        width: 40%;
        margin-top: 24px;
        margin-bottom: 24px;
        text-align: right;
        font-family: Oswald;
        font-size: 14pt;
    }

    .infographicRight {
        display: inline-block;
        width: 50%;
        vertical-align: top;
        margin-top: 24px;
        margin-bottom: 24px;
        margin-left: 20px;
    }

    .infographicRight img {
        width: 150px;
    }

    .eventItem .eventLocation {
        height: 42px;
    }
}

/* if screen is greater than or equal to 1200px */
/* desktop - two columns */
@media (min-width: 1200px) {

    .staples {
        width: 1100px;
        color: white;
        padding-top: 20px;
        margin-left: auto;
        margin-right: auto;
    }

    #staples-first {
        display: inline-block;
        vertical-align: top;
        width: 30%;
        border-right-style:solid;
        border-right-width: 1px;
        border-right-color: white;
        height: 550px;   
        margin-right: 2%;
    }

    #staples-second {
        display: inline-block;
        vertical-align: top;
        width: 33%;
        border-right-style:solid;
        border-right-width: 1px;
        border-right-color: white;
        height: 550px;   
        margin-right: 2%;
    }

    #staples-third {
        display: inline-block;
        vertical-align: top;
        height: 600px;
        width: 32%;
    }

    .staplesEventViewAll li {
        text-align: center;
        margin-top: 64px;
        font-family: Oswald;
        font-size: 14pt;
    }

    .staplesEventViewAll a {
        color: #bf2d2b;
        text-decoration: none;
    }

    .staplesViewAll li {
        text-align: center;
        margin-top: 20px;
        font-family: Oswald;
        font-size: 14pt;
    }

    .staplesViewAll a {
        color: #bf2d2b;
        text-decoration: none;
    }

    .infographicLeft {
        display: inline-block;
        width: 40%;
        margin-top: 24px;
        margin-bottom: 24px;
        text-align: right;
        font-family: Oswald;
        font-size: 14pt;
    }

    .infographicRight {
        display: inline-block;
        width: 50%;
        vertical-align: top;
        margin-top: 24px;
        margin-bottom: 24px;
        margin-left: 20px;
    }

    .infographicRight img {
        width: 150px;
    }
}