.overlay {
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    background-image: -webkit-linear-gradient(to right, #23ced5aa 0%, #5192e1aa 100%);
    background-image: -moz-linear-gradient(to right, #23ced5aa 0%, #5192e1aa 100%);
    background-image: -ms-linear-gradient(to right, #23ced5aa 0%, #5192e1aa 100%);
    background-image: -o-linear-gradient(to right, #23ced5aa 0%, #5192e1aa 100%);
    background-image: linear-gradient(to right, #23ced5aa 0%, #5192e1aa 100%);
    position: absolute;
    opacity: 0;
    visibility: hidden;
    z-index: 99;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}
.overlay-blue{
    background-image: -webkit-linear-gradient(to right, #23ced5 0%, #5192e1 100%);
    background-image: -moz-linear-gradient(to right, #23ced5 0%, #5192e1 100%);
    background-image: -ms-linear-gradient(to right, #23ced5 0%, #5192e1 100%);
    background-image: -o-linear-gradient(to right, #23ced5 0%, #5192e1 100%);
    background-image: linear-gradient(to right, #23ced5 0%, #5192e1 100%);
    visibility: visible;
}
.overlay-main {
    background-image: none;
    background-color: var(--c-main);
    z-index: 1;
    visibility: visible;    
}
.overlay-dark {
    background-image: none;
    background-color: #000;
    z-index: 1;
    visibility: visible;
}
.overlay-gray {
    background-image: none;
    background-color: #333333;
    z-index: 1;
    visibility: visible;
}
.opacity-0 {
    opacity: 0 !important;
}

.opacity-1 {
    opacity: 0.1 !important;
}

.opacity-2 {
    opacity: 0.2 !important;
}

.opacity-3 {
    opacity: 0.3 !important;
}

.opacity-4 {
    opacity: 0.4 !important;
}

.opacity-5 {
    opacity: 0.5 !important;
}

.opacity-6 {
    opacity: 0.6 !important;
}

.opacity-7 {
    opacity: 0.7 !important;
}

.opacity-8 {
    opacity: 0.8 !important;
}

.opacity-9 {
    opacity: 0.9 !important;
}

.opacity-10 {
    opacity: 1 !important;
}