body{
    padding:0px 0px 0px 0px;
    z-index:0;
}



.active {
  background-color: #4CAF50;
}


.mt-30
{ 
margin-top:20px;
}
.mt-40 
{
 margin-top:20px;
}
.mb-30  
{ 
margin-bottom:30px;
}
.box7:after, .box7:before
{
content:"";
}
.box7
{
overflow:hidden;
position:relative;
width: 300px;
height: 350px;
border-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
box-shadow: 10px 10px 5px grey;

}
.box7 .title
{
letter-spacing:1px;
text-align: center;
font-family:libre baskerville;
}
.box7 .post
{
font-style:normal;
text-align: center;
font-family:fondamento;
}
.box7 .eventdate
{
font-family:lemonada;
color: black;
text-align: center;
}

a:hover
{
background-color:;
border-color:blue;
}

.box7:after, .box7:before
{ 
width:100%;
height:100%;
background:rgba(11,33,47,.9);
position:absolute;
top:0;
left:0;
opacity:0;
transition:all .5s ease 0s;
}

.box7:after
{
background:rgba(255,255,255,.3);
border:2px solid #0dab76;
top:0;
left:170%;
opacity:1;
z-index:1;
transform:skewX(45deg);
transition:all 1s ease 0s;
}
.box7:hover:before
{
opacity:1;
}
.box7:hover:after
{
left: -170%;
}

.box7 .box-content
{
width:100%;
position:absolute;
bottom: -100%;
left:0;
transition:all .5s ease 0s;
}
.box7:hover .box-content
{
bottom:30%;
}
.box7 .title
{
display:block;
font-size:22px;
font-weight:700px;
color: #fff;
margin:0 0 10px;

}
.box7 .post
{
display:block;
font-size:20px;
font-weight:700px;
color:#fff;
text-decoration:none;
margin-bottom:10px;
border-style:solid;
border-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
margin-left: 90px;
margin-right: 90px;
}