.hero-graphics {
	position: absolute;
	left: 0;
	bottom: -21px;
	width: 900px;
	height: 900px;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: 1;
	background-position: -84px 66px;
    background-size: 900px;
}
.hero-graphics.top-right {
    left: auto;
    right: 0;
    background-position: 127px 43%;
    background-size: 600px;
    z-index: 1;
}
.login-section .hero-graphics.top-right,
.error-section .hero-graphics.top-right {
    right: 50%;
    left: auto;
    bottom: 0;
    top: auto;
    background-position: 300px 55px;
    background-size: 600px;
    z-index: 0;
}
.hero-bottom {
	position: absolute;
    left: 51%;
    transform: translate(-51%, 0);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    bottom: -35px;
    height: 35px;
    width: 100%;
    z-index: 0;
}
.hero-caption-full-width .hero-caption {
	max-width: 100%;
}
.light-graphics-bottom {
	width: 100%;
    height: 31px;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
    position: absolute;
    bottom: -30px;
}
.hero-caption {
	max-width: 535px;
}
.hero-caption h1,
.hero-caption .maxtitle-1 {
	font-size: 48px;
	max-width: 501px;
}
.hero-caption p {
	max-width: 614px;
}
.p-max-width-494 {
	max-width: 494px;
}
.sub-banner {
	background-size: cover;
	background-position: bottom center;
	background-repeat: no-repeat;
}
.hero-caption p {
	font-size: 20px;
}
.hero-caption p a {
	color: inherit;
	text-decoration: underline;
}
.hero-caption p a:hover {
	color: var(--sk-secondary);
}
.hero-caption .sub-title {
	font-weight: 700;
	font-size: 20px;
}
.hero-img {
	flex: 0 100%;
    max-width: 100%;
    mask-image: url(../images/hero-img-mask.svg);
    -webkit-mask-image: url(../images/hero-img-mask.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center 1em;
    -webkit-mask-position: center 1em;
    mask-size: contain;
    -webkit-mask-size: contain;
    z-index: 2;
}
.hero-img img {
	position: relative;
	display: flex;
	width: 100%;
}
.sub-banner .hero-caption {
	max-width: 100%;
}
.sub-banner .hero-caption h1,
.sub-banner .hero-caption p {
	max-width: 100%;
}
.sub-banner {
	background-color: var(--sk-skeen);
    background-image: url(../images/slider-card-bg-graphic.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    mask-image: url(../images/slider-card-mask.svg);
    -webkit-mask-image: url(../images/slider-card-mask.svg);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: bottom 0em;
    -webkit-mask-position: bottom 0em;
    mask-size: cover;
    -webkit-mask-size: cover;
    margin-top: -16px;
    display: flex;
    align-items: center;
    min-height: 230px;
}
.single-cardtype .sub-banner .col-lg-4 img {
	margin: -55px auto -55px 0;
    height: 180px;
    object-fit: contain;
    width: 100%;
    object-position: right;
}
@media (min-width: 992px) {
	.sub-banner .col-lg-5 {
		flex: 0 0 auto;
        width: 47%;
	}
	.sub-banner .col-lg-7 {
		flex: 0 0 auto;
        width: 53%;
	}
	.max-width-494 {
		max-width: 494px;
	}
	.max-width-522 {
		max-width: 522px;
	}
	.max-width-522 p {
		max-width: 502px;
	}
	.max-width-403 {
		max-width: 403px;
	}
	.max-width-550 {
		max-width: 550px;
	}
	.max-width-519 {
		max-width: 519px;
	}
	.max-width-603 {
		max-width: 603px;
	}
	.max-width-435 {
		max-width: 435px;
	}
	.hero-banner-one .row > .col-12:not(:last-child):first-child {
    	margin-top: -20px;
    }
    .hero-banner .row .col-12:last-child .hero-caption {
    	margin-left: auto;
    }
}
@media (max-width: 1440px) {
	
}
@media (max-width: 1199px) {
	.hero-graphics {
		width: 700px;
		height: 700px;
		background-position: -84px 66px;
	    background-size: 700px;
	}
}
@media (max-width: 991px) {
	.login-section .hero-graphics.top-right,
    .error-section .hero-graphics.top-right {
    	right: 0;
    }
    .hero-graphics {
        right: 0;
        left: auto;
        bottom: auto;
        top: 0;
        width: 900px;
        height: 900px;
        background: url(../images/hero-pattern.svg) no-repeat !important;
        background-position: 121px bottom !important;
        background-size: 900px !important;
    }

}
@media (max-width: 767px) {
	.hero-graphics {
        width: 500px;
        height: 400px;
        background-position: 121px bottom !important;
        background-size: 500px !important;
    }
	.login-section .hero-graphics.top-right {
		background-position: 0 0;
        background-size: 477px;
	}
    .error-section .hero-graphics.top-right,
	.hero-graphics.top-right {
	    left: auto;
	    right: 0;
	    background-position: 49px 157px;
        background-size: 477px;
	}
	.hero-bottom {
	    bottom: -20px;
	    height: 20px;
	}
	.hero-graphics-mobile {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 70%;
        background-repeat: no-repeat;
        background-position: -7px -202px;
        background-size: 500px;
    }
    .hero-graphics-mobile.bottom-right {
    	left: auto;
    	bottom: 0;
    	right: 0;
    	top: auto;
    	width: 300px;
    	height: 400px;
    	background-position: 98px 97px;
        background-size: 500px;
    }
    .hero-caption .sub-title {
		font-size: 18px;
	}
	.hero-caption h1, .hero-caption .maxtitle-1 {
	    font-size: 30px;
	    max-width: 100%;
	}
	.hero-caption p {
	    font-size: 18px;
	}
	.sub-banner-mobile {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: bottom center;
	}
	.sub-banner {
		min-height: 160px;
	}
	.single-cardtype .sub-banner .col-lg-4 img {
		margin: -25px auto -21px 0;
		height: 139px;
		object-fit: contain;
		width: 100%;
		object-position: left;
	}
}