.rounded-100 {
    border-radius: 100%;
}

.h-r-30 {
    height: 30rem !important
}

.img-cover {
    object-fit: cover;
}

.vh-0 {
    height: 0vh !important;
    transition: height 0.6s ease-in-out;
}

.vh-5 {
    height: 5vh !important;
    transition: height 0.6s ease-in-out;
}

.vh-10 {
    height: 10vh !important;
    transition: height 0.6s ease-in-out;
}

.vh-25 {
    height: 25vh !important;
    transition: height 0.6s ease-in-out;
}

.vh-50 {
    height: 50vh !important;
    transition: height 0.6s ease-in-out;
}

.vh-75 {
    height: 75vh !important;
    transition: height 0.6s ease-in-out;
}

.w-fit-content {
    width: fit-content !important;
}

.hover-opacity-100:hover {

    opacity: 1 !important;
}

@media (max-width:576px) {

    .w-xs-100 {
        width: 100% !important
    }
}

.fade-in-400 {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.4s;
}

.fade-in-500 {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.5s;
}

.fade-in-600 {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.6s;
}

.fade-in-700 {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.7s;
}

.fade-in-800 {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 0.8s;
}

@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}