.skyblue-light { background: hsla(198, 89%, 76%, 1);}
.skyblue-light.hover:hover { background: hsla(198, 89%, 73%, 1);}
.skyblue-light .light { background: hsla(198, 89%, 79%, 1);}
.skyblue-light.hover:hover .light { background: hsla(198, 89%, 76%, 1);}
.skyblue-light .dark { background: hsla(198, 89%, 73%, 1);}
.skyblue-light .extra-dark { background: hsla(198, 89%, 62%, 1);}
.skyblue-light.hover:hover .dark { background: hsla(198, 89%, 70%, 1);}

.skyblue-medium { background: hsla(195, 75%, 75%, 1);}
.skyblue-medium.hover:hover { background: hsla(195, 75%, 72%, 1);}
.skyblue-medium .light { background: hsla(195, 75%, 78%, 1);}
.skyblue-medium.hover:hover .light { background: hsla(195, 75%, 75%, 1);}
.skyblue-medium .dark { background: hsla(195, 75%, 72%, 1);}
.skyblue-medium .extra-dark { background: hsla(195, 75%, 61%, 1);}
.skyblue-medium.hover:hover .dark {background: hsla(195, 75%, 69%, 1);}

.skyblue-dark { background: hsla(195, 83%, 67%, 1);}
.skyblue-dark.hover:hover { background: hsla(195, 83%, 64%, 1);}
.skyblue-dark .light { background: hsla(195, 83%, 70%, 1);}
.skyblue-dark.hover:hover .light { background: hsla(195, 83%, 67%, 1);}
.skyblue-dark .dark { background: hsla(195, 83%, 64%, 1);}
.skyblue-dark .extra-dark { background: hsla(195, 83%, 53%, 1);}
.skyblue-dark.hover:hover .dark { background: hsla(195, 83%, 61%, 1);}

.oceanblue-light { background: hsla(197, 83%, 61%, 1);}
.oceanblue-light.hover:hover {  background: hsla(197, 83%, 57%, 1);}
.oceanblue-light .light { background: hsla(197, 83%, 64%, 1);}
.oceanblue-light.hover:hover .light { background: hsla(197, 83%, 60%, 1);}
.oceanblue-light .dark { background: hsla(197, 83%, 57%, 1);}
.oceanblue-light .extra-dark { background: hsla(197, 83%, 46%, 1);}
.oceanblue-light.hover:hover .dark { background: hsla(197, 83%, 54%, 1);}

.oceanblue-medium { background: hsla(194, 85%, 46%, 1);}
.oceanblue-medium.hover:hover {  background: hsla(194, 85%, 43%, 1);}
.oceanblue-medium .light { background: hsla(194, 85%, 49%, 1);}
.oceanblue-medium.hover:hover .light { background: hsla(194, 85%, 46%, 1);}
.oceanblue-medium .dark {  background: hsla(194, 85%, 43%, 1);}
.oceanblue-medium .extra-dark {  background: hsla(194, 85%, 32%, 1);}
.oceanblue-medium.hover:hover .dark {  background: hsla(194, 85%, 40%, 1);}

.oceanblue-dark {  background: hsla(197, 100%, 38%, 1);}
.oceanblue-dark.hover:hover { background: hsla(197, 100%, 35%, 1);}
.oceanblue-dark .light { background: hsla(197, 100%, 41%, 1);}
.oceanblue-dark.hover:hover .light {    background: hsla(197, 100%, 38%, 1);}
.oceanblue-dark .dark { background: hsla(197, 100%, 35%, 1);}
.oceanblue-dark .extra-dark { background: hsla(197, 100%, 24%, 1);}
.oceanblue-dark.hover:hover .dark {  background: hsla(197, 100%, 31%, 1);}

.denimblue-light { background: hsla(202, 88%, 37%, 1);}
.denimblue-light.hover:hover { background: hsla(202, 88%, 34%, 1);}
.denimblue-light .light { background: hsla(202, 88%, 41%, 1);}
.denimblue-light.hover:hover .light {  background: hsla(202, 88%, 37%, 1);}
.denimblue-light .dark {  background: hsla(202, 88%, 34%, 1);}
.denimblue-light .extra-dark {  background: hsla(202, 88%, 23%, 1);}
.denimblue-light.hover:hover .dark { background: hsla(202, 88%, 31%, 1);}

.denimblue-medium {  background: hsla(205, 76%, 37%, 1);}
.denimblue-medium.hover:hover { background: hsla(205, 76%, 34%, 1);}
.denimblue-medium .light {  background: hsla(205, 76%, 41%, 1);}
.denimblue-medium.hover:hover .light { background: hsla(205, 76%, 37%, 1);}
.denimblue-medium .dark { background: hsla(205, 76%, 34%, 1);}
.denimblue-medium .extra-dark { background: hsla(205, 76%, 23%, 1);}
.denimblue-medium.hover:hover .dark { background: hsla(205, 76%, 31%, 1);}

.pink {
    background: hsla(286, 92%, 77%, 1);
}

.pink.hover:hover {
    background: hsla(286, 92%, 75%, 1);
}

.pink .light {
    background: hsla(286, 92%, 79%, 1);
}

.pink.hover:hover .light {
    background: hsla(286, 92%, 77%, 1);
}

.pink .dark {
    background: hsla(286, 92%, 75%, 1);
}

.pink .extra-dark {
    background: hsla(286, 92%, 61%, 1);
}

.pink.hover:hover .dark {
    background: hsla(286, 92%, 73%, 1);
}


.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0.2
}

.skyblue-light .overlay {
    background: #8cd8f8;
}

.skyblue-medium .overlay {
    background: #8ed7f0;
}

.skyblue-dark .overlay {
    background: #64cef3;
}

.oceanblue-light .overlay {
    background: #48c0ee;
}

.oceanblue-medium .overlay {
    background: #10abda;
}

.oceanblue-dark .overlay {
    background: #198fc5;
}

.denimblue-light .overlay {
    background: #0c77b0;
}

.denimblue-medium .overlay {
    background: #1c6ea7;
}
.pink .overlay{
    background:#E391FD;
    opacity:0.3;
}

/* Transition CSS */

.transition-slow {
    transition: all 1s ease;
}

.transition-default {
    transition: all 0.5s ease;
}

.transition-fast {
    transition: all 0.25s ease;
}