.eventboxcontainer{
 
}


#morebutton4, #morebutton6, #morebutton8, #morebutton10{
    
    display: none;
}


.eventcontainer {
    display: inline-block;
    border: 1px solid black;
    text-align: left;
    width: 300px;
    background: white;
    background: rgba(106, 121, 149, 0.1);
    margin: 10px;
    padding: 20px;
    vertical-align: top;

}

.eventleft{
    text-align: center;
    margin-bottom: 20px;

}

.eventright{
    min-height: 180px;
    padding: 10px 0px;
    border-top: 1px solid black;
    border-bottom: 1px solid black;

}


.eventdate{
    font-size: 125%;
    margin-bottom: 10px;
}

.eventtime{

}

.eventtitle, .eventdescription {
    padding: 10px 10px 0 10px;
}


.eventtitle{
    font-weight: bold;
}

.eventvenue{
    padding: 10px 10px 5px 10px;

}

.eventdescription, .eventlocation{
    font-size: 75%; 

}

.eventlocation{
    padding: 0 10px 0 10px;
}

.eventbottom{
    text-align: center;
    padding-top: 10px;
    min-height: 55px;

}


.eventmap, .eventlink{
    display: inline-block;

}

.eventbottom a div, .viewall a div {
    background: grey;
    background: rgba(106, 121, 149, 1.0);
    color: white;
    width: 100px;
    padding: 12px 0;
    border: 1px solid black;
    text-align: center;
    margin: 10px 10px 0 10px;
}

.viewall {
    margin-top: 40px;
    font-size: 150%;
}

.viewall a div{
    width: auto;
    padding: 20px;
    background: rgba(232, 215, 201, 0.6);
    color: black;

}

.eventbottom a:hover div, .eventbottom a:focus div, .eventbottom a:active div {
    background: white;
    color: black;
}

.viewall a:hover div, .viewall a:focus div, .viewall a:active div{
    background: #595959;
    color: white;

}

.eventpastcontainer {
    
    border: 1px solid black;
    text-align: left;
    background: white;
    background: rgba(106, 121, 149, 0.1);
    margin: 5px;
    vertical-align: top;

}


.eventpastdate, .eventpasttime, .eventpasttitle, .eventpastdescription, .eventpastlocation, .eventpastlocation, .eventpastvenue {
    font-size: 75%; 
    padding: 10px;
}




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

    .eventboxcontainer{
       max-height: 800px;
       overflow: hidden;  
    }

    #morebutton10{
        display: inline-block;
    }

    #morebutton4, #morebutton6, #morebutton8{
        display: none;
    }

}


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


    #morebutton8{
        display: inline-block;
    }

    #morebutton4, #morebutton6, #morebutton10{
        display: none;
    }

}

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


    #morebutton6{
        display: inline-block;
    }

    #morebutton4, #morebutton8, #morebutton10{
        display: none;
    }

}


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


    .eventboxcontainer{
        max-height: 1200px;
    }

    #morebutton6{
        display: inline-block;
    }

    #morebutton4, #morebutton8, #morebutton10{
        display: none;
    }

}

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


    .eventboxcontainer{
        max-height: 1614px;
    }
    
    #morebutton4{
        display: inline-block;
    }

    #morebutton6, #morebutton8, #morebutton10{
        display: none;
    }

}

.all{
    max-height: inherit;
}