.image-container {
    position: relative;
    display: inline-block;
}
        
.image-container img {
    display: block;
    width: 100%;
    height: auto;
}
        
.image-container .button {
    position: absolute;
    top: 72%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px 10px;
    /*background-color: #ffdf00;*/ /* Golden yellow. rgb(255,223,0) */
    /*color: #002ca9;*/
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
        
.image-container .button:hover {
    background-color: white; /*#0056b3;*/
}
        
.btn-outline-yellow {
    /*color: #ffc107;*/
    color: #fff;
    background-color: transparent;
    background-image: none;
    border-color: #ffc107;
}
        
.btn-outline-blue {
    /*color: #ffc107;*/
    color: #002ca9;
    background-color: transparent;
    background-image: none;
    border-color: #002ca9;
}

.timerBackcolor {
    background-color: #002ca9;
}

.spanTimer {
    color: #ffdf00; /*#d08f3a;*/
    font-weight: bolder;
    font-size: 2em;
}

.spanTimerText {
    color: #fff;
    font-weight: bold;
    font-size: 1em;
}

        
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
        
.fade-in {
    opacity: 0;
    animation: fadeIn 5s forwards;
}