[class*="cms-gradient-"]:before{
	content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.cms-gradient- {
	@each $name, $color in $cms_theme_colors{
		&#{$name}{
			background-color: #{'rgba(var(--color-#{$name}-rgb), 0.9)'}; //rgba($color, 0.9);
			&:before{
			  background-image: -moz-linear-gradient( 180deg, rgba(37,55,69,0) 0%, rgba(0,38,120,0.04) 3%, #{'rgba(var(--color-#{$name}-rgb), 1)'} 80%);
			  background-image: -webkit-linear-gradient( 180deg, rgba(37,55,69,0) 0%, rgba(0,38,120,0.04) 3%, #{'rgba(var(--color-#{$name}-rgb), 1)'} 80%);
			  background-image: -ms-linear-gradient( 180deg, rgba(37,55,69,0) 0%, rgba(0,38,120,0.04) 3%, #{'rgba(var(--color-#{$name}-rgb), 1)'} 80%);
			  background-image: linear-gradient( 180deg, rgba(37,55,69,0) 0%, rgba(0,38,120,0.04) 3%, #{'rgb(var(--color-#{$name}-rgb))'} 80%);
			}
		}
	}
}
[class*="cms-overlay-gradient-"]{
	> .cms-overlay-gradient,
	> .cms-overlay-gradient:before{
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
}
.cms-overlay-gradient-{
	@each $name, $color in $cms_theme_colors{
		&#{$name}.cms-overlay-gradient-bg-yes > .cms-overlay-gradient{
			background-color: #{'rgba(var(--color-#{$name}-rgb), 0.9)'};
		}
		// Top to Bottom
		&#{$name}.cms-overlay-gradient-mode-tb > .cms-overlay-gradient{
			&:before{
				background-image: linear-gradient( 90deg, rgba(6,70,178,0) 0%, rgba(11,173,246,0) 3%, #{'rgb(var(--color-#{$name}-rgb))'} 80%);
				background-image: -ms-linear-gradient( 90deg, rgba(6,70,178,0) 0%, rgba(11,173,246,0) 3%, #{'rgba(var(--color-#{$name}-rgb), 1)'} 80%);
				background-image: -moz-linear-gradient( 90deg, rgba(6,70,178,0) 0%, rgba(11,173,246,0) 3%, #{'rgba(var(--color-#{$name}-rgb), 1)'} 80%);
				background-image: -webkit-linear-gradient( 90deg, rgba(6,70,178,0) 0%, rgba(11,173,246,0) 3%, #{'rgba(var(--color-#{$name}-rgb), 1)'} 80%);
			}
		}
		// Bottom to Top
		&#{$name}.cms-overlay-gradient-mode-bt > .cms-overlay-gradient{
			&:before{
				background-image: linear-gradient( -90deg, rgba(6,70,178,0) 0%, rgba(11,173,246,0) 3%, #{'rgb(var(--color-#{$name}-rgb))'} 80%);
				background-image: -ms-linear-gradient( -90deg, rgba(6,70,178,0) 0%, rgba(11,173,246,0) 3%, #{'rgba(var(--color-#{$name}-rgb), 1)'} 80%);
				background-image: -moz-linear-gradient( -90deg, rgba(6,70,178,0) 0%, rgba(11,173,246,0) 3%, #{'rgba(var(--color-#{$name}-rgb), 1)'} 80%);
				background-image: -webkit-linear-gradient( -90deg, rgba(6,70,178,0) 0%, rgba(11,173,246,0) 3%, #{'rgba(var(--color-#{$name}-rgb), 1)'} 80%);
			}
		}
	}
}
// Boxed Divider
.cms-boxed-divider-color-{
	@each $name, $color in $cms_theme_colors{
		&#{$name} > .cms-section-boxed-divider{
			background-color: #{$color};
		}
		// Top to Bottom
		&#{$name}.cms-boxed-divider-mode-tb > .cms-section-boxed-divider{
			background-color: transparent;
			background-image: linear-gradient( 90deg, rgba(6,70,178,0) 0%, rgba(11,173,246,0) 3%, #{'rgb(var(--color-#{$name}-rgb))'} 80%);
			background-image: -ms-linear-gradient( 90deg, rgba(6,70,178,0) 0%, rgba(11,173,246,0) 3%, #{'rgba(var(--color-#{$name}-rgb), 1)'} 80%);
			background-image: -moz-linear-gradient( 90deg, rgba(6,70,178,0) 0%, rgba(11,173,246,0) 3%, #{'rgba(var(--color-#{$name}-rgb), 1)'} 80%);
			background-image: -webkit-linear-gradient( 90deg, rgba(6,70,178,0) 0%, rgba(11,173,246,0) 3%, #{'rgba(var(--color-#{$name}-rgb), 1)'} 80%);
		}
		// Bottom to Top
		&#{$name}.cms-boxed-divider-mode-bt > .cms-section-boxed-divider{
			background-color: transparent;
			background-image: linear-gradient( -90deg, rgba(6,70,178,0) 0%, rgba(11,173,246,0) 3%, #{'rgb(var(--color-#{$name}-rgb))'} 80%);
			background-image: -ms-linear-gradient( -90deg, rgba(6,70,178,0) 0%, rgba(11,173,246,0) 3%, #{'rgba(var(--color-#{$name}-rgb), 1)'} 80%);
			background-image: -moz-linear-gradient( -90deg, rgba(6,70,178,0) 0%, rgba(11,173,246,0) 3%, #{'rgba(var(--color-#{$name}-rgb), 1)'} 80%);
			background-image: -webkit-linear-gradient( -90deg, rgba(6,70,178,0) 0%, rgba(11,173,246,0) 3%, #{'rgba(var(--color-#{$name}-rgb), 1)'} 80%);
		}

	}
}