.certificates-container {
    position: relative;
}

.my-certificates {
    position: relative;
    border: 1px solid #000;
}

.my-certificates-img {
    width: 100%;
    vertical-align: middle;
}

.prev-certificates,
.next-certificates {
    position: absolute;
    top: 45%;
    display: block !important;
    margin: -20px;
    text-transform: uppercase;
    padding: 5px 10px;
    font-weight: 700;
    line-height: normal;
    cursor: pointer;
    color: #000;
    background-color: #efece3;
    border: 1px solid #000;
}

.next-certificates {
    right: 20px;
}

.prev-certificates {
    left: 20px;
}

.prev-certificates:hover,
.next-certificates:hover {
    font-weight: 700;
    color: #000;
    background-color: #efece3;
    border: 1px solid #000;
}

.name-certificates {
    font-size: 20px;
    padding: 4px 0px;
    width: 100%;
    text-align: center;
    color: #000;
    background-color: #efece3;
    text-transform: uppercase;
}

.count-certificates {
    font-size: 13px;
    font-weight: 700;
    padding: 8px 12px;
    position: absolute;
    top: 0;
    left: 0;
    color: #000;
    z-index: 1;
}

.certificates-fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: certificates-fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes certificates-fade {
    from {
        opacity: 0.4;
    }

    to {
        opacity: 1;
    }
}

@keyframes certificates-fade {
    from {
        opacity: 0.4;
    }

    to {
        opacity: 1;
    }
}

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

    .prev-certificates,
    .next-certificates {
        top: 40%;
        font-size: 11px;
    }

    .next-certificates {
        right: 20px;
    }

    .prev-certificates {
        left: 20px;
    }

    .count-certificates {
        font-size: 12px;
        font-weight: 700;
    }

    .name-certificates {
        font-size: smaller;
    }
}