@charset "utf-8";
.hero-secondly-date {
    background-image: url(../img/date/date-hero-pic.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}
@media screen and (-webkit-min-device-pixel-ratio:2),
(min-resolution: 2dppx) {
    .hero-secondly-date {
        background-image: url(../img/date/date-hero-pic@2x.jpg);
    }
}
.wrapper {
    text-align: center;
    background-color: #ebf0f5;
}
.container {
    margin: 0;
    padding: 20px;
    text-align: center;
}
@media screen and (min-width: 768px) {
    .container  {
        width:80%;
        margin: 0 auto;
    }
}
.container > section > h2 {
    margin-top: 60px;
}
.container > section > p {
    margin-bottom: 20px;
}
@media screen and (min-width: 768px) {
    .row {
        display:flex;
        flex-wrap: nowrap;
        justify-content: center;
    }
}
.box1, .box2, .box3, .box4, .box5,
.box6, .box7, .box8, .box9,
.box10, .box11, .box12, .box13, .box14 {
    position: relative;
    margin: 10px;
    background-color: #fff;
    overflow: hidden;
}
.box9:after, .box10:after, .box11:after, .box12:after {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    transition: box-shadow 0.2s ease;    
}
.box9:hover:after, .box10:hover:after, .box11:hover:after, .box12:hover:after {
    box-shadow: #00A2E0 0px 0px 0px 6px inset;
    cursor: pointer;
    
}