@import url('https://fonts.googleapis.com/css?family=Poppins');
body{
    margin: 0;
    padding:0;
    display:flex;
    justify-content: center;
    align-items: center;
    min-height:100vh;
    background: #003e46;
    font-family:'Poppins',sans-serif;
}
.container{
    width:1000px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}
.container h3,h2{
    color:#fff;
}
.container h2{
    width:300px;
}
.men a
{
    text-decoration: none;
    color: #fff;
}
.men a:hover
{
    color: #888;
}

.box{
    position: relative;
    width:300px;
    height: 400px;
    background: #000;
    box-shadow:0 30px 30px rgba(0,0,0,0.5);
}
.box .imgBox{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
.box #A01{
    background:url(../img/january.jpg) center/cover;
}
.box #A02{
    background:url(../img/february.jpg) center/cover;
}
.box #A03{
    background:url(../img/march.jpg) center/cover;
}
.box #A04{
    background:url(../img/april.jpg) center/cover;
}
.box #A05{
    background:url(../img/may.jpg) center/cover;
}
.box #A06{
    background:url(../img/june.jpg) center/cover;
}
.box #A07{
    background:url(../img/july.jpg) center/cover;
}
.box #A08{
    background:url(../img/august.jpg) center/cover;
}
.box #A09{
    background:url(../img/september.jpg) center/cover;
}
.box #A10{
    background:url(../img/october.jpg) center/cover;
}
.box #A11{
    background:url(../img/november.jpg) center/cover;
}
.box #A12{
    background:url(../img/december.jpg) center/cover;
}
.box .imgBox img{
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    height: 100%;
    object-fit:cover;
    transition: 0.5s;
}
.box:hover .imgBox img{
    /* opacity:0; */
    filter:blur(2px);

}
.box .content{
    position: absolute;
    bottom: 20px;
    left: 10%;
    width: 80%;
    height: 60px;
    background: #fff;
    transition: 0.5s;
    overflow: hidden;
    padding: 15px;
    box-sizing: border-box;
    border-radius: 5px;

}
@media (max-width:650px){    
    .container{
        width:350px;
        /* flex-wrap: wrap; */
    }
    .container h2{
        font-size:1em;
    }
    
}
.box:hover .content{
    width:100%;
    height: 100%;
    bottom:0;
    left: 0;
    background:rgba(255,255,255,0.2);
    color:#fff;
    text-shadow: 1px 1px 1px pink;
    /* transition-delay: 0.4s; */
}
.box .content h3{
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 20px;
    color:pink;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
.box .content p{
    position: relative;
    margin: 30px 0 0;
    padding: 0;
    opacity:0;
    bottom:10px;
    line-height: 1.2em;
    transition: 0.5s;
    color:#fff;
    text-shadow: 1px 1px 1px pink;
    text-align: center;
    font-size: 1.5em;
}
.box .content p a:link{ color:rgb(0, 247, 103);}
.box .content p a:visited{ color:rgb(0, 247, 103);}
.box .content p a:hover{color:pink;}
.box .content p a:active{color:blue;}
.container h2 a:link,a:visited{ color:#fff;}
.container h2 a:hover{color:blue;}
.container h2 a:active{color:blue;}

.box:hover .content p{
    opacity: 1;
}
.footer{
    font-size:0.8em;
    color:#787878;
    width:635px;
}