/* Services page */
.services-container {
    max-width: 1000px;
    margin: 0 auto;
}
.services-container .page-subtitle {
    font-size: 27px;
    text-align: center;
}

/* Service */
#services {
    padding: 50px 0;
    text-align: center;
}
.service {
    display: inline-block;
    width: 20%;
    min-width: 200px;
    height: 210px;
    margin: 15px;
    text-align: center;
    vertical-align: top;
    transition: all .4s ease-in-out;
}
.service .icon {
    margin: 35px auto 15px auto;
    transition: all .3s ease-in-out;
    width: 64px;
    height: 64px;
}
.service .icon img {
    width: 64px;
    height: 91px;
}
.service .description {
    font-size: 13px;
    opacity: 0;
    border-bottom: 0;
    transition: all .5s ease-in-out;
}

#services .service:hover {
    border-radius: 50%;
    background-color: #202020;
    color: #f3f7f8;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.service:hover .icon {
    animation: fade-out-custom .2s ease;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.service:hover .description {
    animation: fade-in-custom .4s ease;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    color: #f3f7f8;
}
.service:hover .title {
    color: #21c3f8;
}