body {
    overflow-y: scroll
}

.icon {
    max-height: 44px;
    max-width: 44px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
}

.logo-text {
    color: red;
}

@media (max-width: 767px) {
#carousel-container {
    width: 100%;
    margin: 0;
    padding: 0;
}
}
.zoom-effect,
.zoom-effect-large {
    transition: transform .2s;
}

.zoom-effect:hover,
.zoom-effect:focus {
    transform: scale(1.05);
}

.zoom-effect-large:hover,
.zoom-effect-large:focus {
    transform: scale(1.15);
}

.special {
    color: white !important;
    background: rgb(147,7,255) !important;
    background: linear-gradient(90deg, rgba(147,7,255,1) 0%, rgba(170,37,135,1) 45%, rgba(191,66,32,1) 100%) !important;
}

.media {
    position: absolute;
    top: 50%;  /* position the top  edge of the element at the middle of the parent */
    left: 30%; /* position the left edge of the element at the middle of the parent */
    transform: translate(-50%, -50%); /* This is a shorthand of translateX(-50%) and translateY(-50%) */
}

.special-hover:hover,
.special-hover:focus {    
    color: white !important;
    background: rgb(147,7,255) !important;
    background: linear-gradient(90deg, rgba(147,7,255,1) 0%, rgba(170,37,135,1) 45%, rgba(191,66,32,1) 100%) !important;
}

.no-spacing {
    margin: 0;
    padding: 0;
}

.dash-active {
    color: gray !important;
}