/* TOP AREA */

.astoundServeAllHeaderContainerMain {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    min-height: 600px;
}
.astoundServeAllHeaderContainer {
    display: flex;
    flex-direction: row;
    width: 100%;
}
.astoundServeAllHeaderContainer h2 {
    font-family: var(--astound-h5-font-family);
    font-weight: var(--astound-h5-font-weight);
    font-size: var(--astound-h5-font-size);
    line-height: var(--astound-h5-line-height);
    text-transform: var(--astound-h5-text-transform);
}
.astoundServeAllHeaderContainerBuild {
    display: flex;
    flex-direction: row;
    width: 100%;
}
.astoundServeAllHeaderContainerBuildTitle {
    width: calc(50% - var(--astoundCircleDefaultLargeRadius));
    display: flex;
    align-items: center;
    padding-top: var(--astoundDefaultElementPadding);
    padding-bottom: var(--astoundDefaultElementPadding);
    flex-direction: row-reverse;
    text-align: right;
}
.astoundServeAllHeaderContainerBuildTitleContain {
    max-width: 400px;
    padding-left: 0px;
    padding-right: 30px;
}
.astoundServeAllHeaderContainerBuildDescContain {
    width: calc(50% - var(--astoundCircleDefaultLargeRadius));
    display: flex;
    align-items: center;
    max-width: 400px;
    padding-top: var(--astoundDefaultElementPadding);
    padding-bottom: var(--astoundDefaultElementPadding);
    padding-left: 30px;
    padding-right: var(--astoundDefaultElementPadding);
}
.astoundServeAllHeaderContainerBuildDescContain p {
    margin-bottom: 0px;
}
.astoundServeHeaderCircleLeftContainer {
    display: none;
    align-items: center;
    width: var(--astoundCircleDefaultDiameter);
}
.astoundServeHeaderCircleLeftHolder {
    display: flex;
    flex-grow: 1;
    height: 100%;
    width: var(--astoundCircleDefaultDiameter);
    flex-direction: column;
}
.astoundServeHeaderCircleLeftHolderBuild {
    flex-grow: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.astoundServeAllHeaderCircle {
    display: flex;
    width: var(--astoundCircleDefaultLargeDiameter);
    flex-direction: column;
}
.astoundServeAllHeaderCircleSub {
    flex-grow: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.astoundServeHeaderCircleLeftHolderBuild .astoundServeAllHeaderCircleBarTop {
    display: none;
}
.astoundServeHeaderCircleLeftHolderBuild .astoundServeAllHeaderCircleBarBottom {
    height: calc(100% - var(--astoundCircleDefaultDiameter));
}
.astoundServeHeaderCircleLeftHolderBuild .astoundServicesHeaderCircleElement {
    height: var(--astoundCircleDefaultDiameter);
    width: var(--astoundCircleDefaultDiameter);
}
.astoundServeHeaderCircleLeftHolderBuild {
    flex-grow: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.astoundServicesHeaderCircleElement {
    width: var(--astoundCircleDefaultLargeDiameter);
    height: var(--astoundCircleDefaultLargeDiameter);
    border: solid 2px var(--astoundBlack);
    border-radius: var(--astoundCircleDefaultLargeRadius);
    background-image: url("../../images/ui/astound-circleA-black.svg");
    background-size: cover;
}
.astoundServeAllHeaderCircleBarTop {
    height: calc(50% - var(--astoundCircleDefaultLargeRadius));
    width: 2px;
}
.astoundServeAllHeaderCircleBarBottom {
    height: calc(50% - var(--astoundCircleDefaultLargeRadius));
    width: 2px;
    border-right: solid 2px var(--astoundBlack);
}

@media (max-width: 1200px) {
.astoundServeAllHeaderContainerMain {
    flex-grow: 1;
    min-height: 1px;
}
.astoundServeAllHeaderContainerBuild {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.astoundServeAllHeaderContainerBuildTitle {
    width: 100%;
    display: flex;
    align-items: center;
    padding-top: var(--astoundDefaultElementPadding);
    padding-bottom: 0px;
    flex-direction: row;
    text-align: left;
}
.astoundServeAllHeaderContainerBuildTitleContain {
    padding-left: 0px;
    padding-right: 0px;
    max-width: 100vw;
}
.astoundServeAllHeaderContainerBuildDescContain {
    width: 100%;
    display: flex;
    align-items: center;
    padding-top: 10px;
    padding-bottom: var(--astoundDefaultElementPadding);
    padding-left: 0px;
    padding-right: var(--astoundDefaultElementPadding);
    max-width: 100vw;
}
}

@media (max-width: 1200px) {
.astoundServeHeaderCircleLeftContainer {
    display: flex;
    align-items: center;
    width: var(--astoundCircleDefaultDiameter);
    transform: translateX(-30px);
    padding-top: var(--astoundDefaultElementPadding);
}
.astoundServeAllHeaderCircle {
    display: flex;
    width: var(--astoundCircleDefaultDiameter);
    flex-direction: column;
    display: none;
}
.astoundServeAllHeaderCircleSub {
    flex-grow: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
}
/* END TOP AREA */
	
	
	
	
	



/* CIRCLE GROUP */
	
.astoundServeAllDetailCircleBarTop {
    height: calc(50% - var(--astoundCircleDefaultRadius));
    width: 2px;
    border-right: solid 2px red;
}
.astoundServicesDetailCircleElement {
    width: var(--astoundCircleDefaultDiameter);
    height: var(--astoundCircleDefaultDiameter);
    border: solid 2px red;
    border-radius: var(--astoundCircleDefaultRadius);
}
.astoundServeAllDetailCircleBarBottom {
    height: calc(50% - var(--astoundCircleDefaultRadius));
    width: 2px;
    border-right: solid 2px red;
    flex-grow: 0;
}

@media (max-width: 1200px) {
.astoundServeAllDetailCircleBarTop {
    height: calc(50% - 20px);
    width: 2px;
    border-right: solid 2px red;
}
.astoundServicesDetailCircleElement {
    width: 40px;
    height: 40px;
}
.astoundServeAllDetailCircleBarBottom {
    height: calc(50% - 20px);
    width: 2px;
    border-right: solid 2px red;
    flex-grow: 1
}
}
.astoundServicesAllLanding .astoundServeAllDetailContainerMain:nth-child(2) .astoundServeAllDetailCircleBarTop {
    background-image: linear-gradient(180deg, var(--astoundBlack), var(--astoundRed));
}
.astoundServicesAllLanding .astoundServeAllDetailContainerMain:nth-child(2) .astoundServicesDetailCircleElement {
    border-color: var(--astoundRed);
}
.astoundServicesAllLanding .astoundServeAllDetailContainerMain:nth-child(2) .astoundServeAllDetailCircleBarBottom {
    background-image: linear-gradient(180deg, var(--astoundRed), var(--astoundOrange));
}
.astoundServicesAllLanding .astoundServeAllDetailContainerMain:nth-child(3) .astoundServeAllDetailCircleBarTop {
    background-image: linear-gradient(180deg, var(--astoundOrange), var(--astoundOrange));
}
.astoundServicesAllLanding .astoundServeAllDetailContainerMain:nth-child(3) .astoundServicesDetailCircleElement {
    border-color: var(--astoundOrange);
}
.astoundServicesAllLanding .astoundServeAllDetailContainerMain:nth-child(3) .astoundServeAllDetailCircleBarBottom {
    background-image: linear-gradient(180deg, var(--astoundOrange), var(--astoundBlue));
}
.astoundServicesAllLanding .astoundServeAllDetailContainerMain:nth-child(4) .astoundServeAllDetailCircleBarTop {
    background-image: linear-gradient(180deg, var(--astoundBlue), var(--astoundBlue));
}
.astoundServicesAllLanding .astoundServeAllDetailContainerMain:nth-child(4) .astoundServicesDetailCircleElement {
    border-color: var(--astoundBlue);
}
.astoundServicesAllLanding .astoundServeAllDetailContainerMain:nth-child(4) .astoundServeAllDetailCircleBarBottom {
    background-image: linear-gradient(180deg, var(--astoundBlue), var(--astoundGold));
}
.astoundServicesAllLanding .astoundServeAllDetailContainerMain:nth-child(5) .astoundServeAllDetailCircleBarTop {
    background-image: linear-gradient(180deg, var(--astoundGold), var(--astoundGold));
}
.astoundServicesAllLanding .astoundServeAllDetailContainerMain:nth-child(5) .astoundServicesDetailCircleElement {
    border-color: var(--astoundGold);
}
.astoundServicesAllLanding .astoundServeAllDetailContainerMain:nth-child(5) .astoundServeAllDetailCircleBarBottom {
    background-image: linear-gradient(180deg, var(--astoundGold), var(--astoundOrange2));
}
.astoundServicesAllLanding .astoundServeAllDetailContainerMain:nth-child(6) .astoundServeAllDetailCircleBarTop {
    background-image: linear-gradient(180deg, var(--astoundOrange2), var(--astoundOrange2));
}
.astoundServicesAllLanding .astoundServeAllDetailContainerMain:nth-child(6) .astoundServicesDetailCircleElement {
    border-color: var(--astoundOrange2);
}
.astoundServicesAllLanding .astoundServeAllDetailContainerMain:nth-child(6) .astoundServeAllDetailCircleBarBottom {
    background-image: linear-gradient(180deg, var(--astoundOrange2), var(--astoundPink));
}
.astoundServicesAllLanding .astoundServeAllDetailContainerMain:nth-child(7) .astoundServeAllDetailCircleBarTop {
    background-image: linear-gradient(180deg, var(--astoundPink), var(--astoundPink));
}
.astoundServicesAllLanding .astoundServeAllDetailContainerMain:nth-child(7) .astoundServicesDetailCircleElement {
    border-color: var(--astoundPink);
}
.astoundServicesAllLanding .astoundServeAllDetailContainerMain:nth-child(7) .astoundServeAllDetailCircleBarBottom {
    background-image: linear-gradient(180deg, var(--astoundPink), var(--astoundPurple));
}
.astoundServicesAllLanding .astoundServeAllDetailContainerMain:nth-child(8) .astoundServeAllDetailCircleBarTop {
    background-image: linear-gradient(180deg, var(--astoundPurple), var(--astoundPurple));
}
.astoundServicesAllLanding .astoundServeAllDetailContainerMain:nth-child(8) .astoundServicesDetailCircleElement {
    border-color: var(--astoundPurple);
}
.astoundServicesAllLanding .astoundServeAllDetailContainerMain:nth-child(8) .astoundServeAllDetailCircleBarBottom {
    background-image: linear-gradient(180deg, var(--astoundPurple), var(--astoundTeal));
}
.astoundServicesAllLanding .astoundServeAllDetailContainerMain:nth-child(9) .astoundServeAllDetailCircleBarTop {
    background-image: linear-gradient(180deg, var(--astoundTeal), var(--astoundTeal));
}
.astoundServicesAllLanding .astoundServeAllDetailContainerMain:nth-child(9) .astoundServicesDetailCircleElement {
    border-color: var(--astoundTeal);
}
.astoundServicesAllLanding .astoundServeAllDetailContainerMain:nth-child(9) .astoundServeAllDetailCircleBarBottom {
    background-image: linear-gradient(180deg, var(--astoundTeal), var(--astoundYellow));
}
.astoundServicesAllLanding .astoundServeAllDetailContainerMain:nth-child(10) .astoundServeAllDetailCircleBarTop {
    background-image: linear-gradient(180deg, var(--astoundYellow), var(--astoundYellow));
}
.astoundServicesAllLanding .astoundServeAllDetailContainerMain:nth-child(10) .astoundServicesDetailCircleElement {
    border-color: var(--astoundYellow);
}
.astoundServicesAllLanding .astoundServeAllDetailContainerMain:nth-child(10) .astoundServeAllDetailCircleBarBottom {
    background-image: linear-gradient(180deg, var(--astoundYellow), var(--astoundOrange));
}
.astoundServicesAllLanding .astoundServeAllDetailContainerMain:nth-child(11) .astoundServeAllDetailCircleBarTop {
    background-image: linear-gradient(180deg, var(--astoundOrange), var(--astoundOrange));
}
.astoundServicesAllLanding .astoundServeAllDetailContainerMain:nth-child(11) .astoundServicesDetailCircleElement {
    border-color: var(--astoundOrange);
}
.astoundServicesAllLanding .astoundServeAllDetailContainerMain:nth-child(11) .astoundServeAllDetailCircleBarBottom {
    background-image: linear-gradient(180deg, var(--astoundOrange), var(--astoundOrange2));
}
.astoundServicesAllLanding .astoundServeAllDetailContainerMain:nth-child(12) .astoundServeAllDetailCircleBarTop {
    background-image: linear-gradient(180deg, var(--astoundOrange2), var(--astoundOrange2));
}
.astoundServicesAllLanding .astoundServeAllDetailContainerMain:nth-child(12) .astoundServicesDetailCircleElement {
    border-color: var(--astoundOrange2);
}
.astoundServicesAllLanding .astoundServeAllDetailContainerMain:nth-child(12) .astoundServeAllDetailCircleBarBottom {
    background-image: linear-gradient(180deg, var(--astoundOrange2), var(--astoundBlack));
    opacity: 0.0;
}
.astoundServeDetailCircleLeftContainer {
    display: none;
    align-items: center;
    width: var(--astoundCircleDefaultDiameter);
}
.astoundServeAllDetailCircle {
    display: flex;
    width: var(--astoundCircleDefaultDiameter);
    flex-direction: column;
}
.astoundServeAllDetailCircleSub {
    flex-grow: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.astoundServeDetailCircleLeftHolder {
    display: flex;
    flex-grow: 1;
    height: 100%;
    width: var(--astoundCircleDefaultDiameter);
    flex-direction: column;
}
.astoundServeDetailCircleLeftHolderBuild {
    flex-grow: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (max-width: 1200px) {
.astoundServeDetailCircleLeftContainer {
    display: flex;
    align-items: center;
    width: var(--astoundCircleDefaultDiameter);
    transform: translateX(-30px);
    padding-top: 0px
}
.astoundServeAllDetailCircle {
    display: flex;
    width: var(--astoundCircleDefaultDiameter);
    flex-direction: column;
    display: none;
}
.astoundServeAllDetailCircleSub {
    flex-grow: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
}
.astoundServeDetailCircleLeftHolderBuild .astoundServeAllDetailCircleBarTop, .astoundServeAllDetailCircleSub .astoundServeAllDetailCircleBarTop {
    border-right: 0px;
}
.astoundServeDetailCircleLeftHolderBuild .astoundServeAllDetailCircleBarBottom, .astoundServeAllDetailCircleSub .astoundServeAllDetailCircleBarBottom {
    border-right: 0px;
    background-origin: border-box;
    background-clip: content-box, border-box;
    box-sizing: border-box;
}
/* END CIRCLE GROUP */
	
	
/* SERVICE DESCRIPTION AND TITLE */
	
.astoundServeAllDetailContainerMain {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    min-height: 280px;
    border-top: solid 1px #444;
    position: relative;
    transition: 0.5s all;
    overflow: hidden;
}
.astoundServeAllDetailContainerMain .astoundGenericButton{
		display:inline-block;
		margin-bottom:10px;
}
.astoundServeAllDetailContainerMain h1, .astoundServeAllDetailContainerMain h2, .astoundServeAllDetailContainerMain p {
    color: var(--astoundWhite);
}

@media (max-width: 1200px) {
.astoundServeAllDetailContainerMain {
    flex-grow: 1;
    min-height: 1px;
}
}
.astoundServeAllDetailContainer {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    min-height: 300px;
}
.astoundServeAllDetailContainer h2 {
    font-family: var(--astound-h5-font-family);
    font-weight: var(--astound-h5-font-weight);
    font-size: var(--astound-h5-font-size);
    line-height: var(--astound-h5-line-height);
    text-transform: var(--astound-h5-text-transform);
}

@media (max-width: 1200px) {
.astoundServeAllDetailContainer {
    min-height: 0px;
	transform: translateX(-20px);
}
}

	
.astoundServeAllDetailContainerBuild {
    display: flex;
    flex-direction: row;
    width: 100%;
}
.astoundServeAllDetailContainerBuildTitle {
    width: calc(50% - var(--astoundCircleDefaultRadius));
    display: flex;
    align-items: center;
    padding-top: var(--astoundDefaultElementPadding);
    padding-bottom: var(--astoundDefaultElementPadding);
    flex-direction: row-reverse;
    text-align: right;
}
.astoundServeAllDetailContainerBuildTitleContain {
    padding-left: 0px;
    padding-right: 30px;
}
.astoundServeAllDetailContainerBuildDescContain {
    width: calc(50% - var(--astoundCircleDefaultRadius));
    display: flex;
    align-items: center;
    padding-top: var(--astoundDefaultElementPadding);
    padding-bottom: var(--astoundDefaultElementPadding);
    padding-left: 30px;
    padding-right: var(--astoundDefaultElementPadding);
}
.astoundServeAllDetailContainerBuildDescContain {
    overflow: hidden;
    height: auto;
    transition: 0.5s all;
}
.astoundServeAllDetailContainerBuildDescContain p {
    margin-bottom: 0px;
}

@media (max-width: 1200px) {
.astoundServeAllDetailContainerBuild {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.astoundServeAllDetailContainerBuildTitle {
    width: 100%;
    display: flex;
    align-items: center;
    padding-top: 24px;
    padding-bottom: 14px;
    flex-direction: row;
    text-align: left;
}
.astoundServeAllDetailContainerBuildTitleContain {
    padding-left: 0px;
    padding-right: 0px;
    max-width: 100vw;
}
.astoundServeAllDetailContainerBuildDescContain {
    width: 100%;
    display: flex;
    align-items: center;
    max-width: 100vw;
    height: 0px;
    flex-grow: 0;
    padding: 0px;
}
}
	
	
.astoundServeAllDetailContainerMain.superactive .astoundServeAllDetailContainerBuildDescContain {
    height: auto;

}
	
/* END SERVICE DESCRIPTION AND TITLE */
	

	

	
/* SERVICE LINE BACKGROUND IMAGE */

.astoundServeAllDetailContainerMainBackground {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("../../images/demo/homepageTopBG.jpg");
    background-repeat: no-repeat;
    z-index: -1;
    opacity: 1.0;
    background-size: cover;
    background-position: center;
    transition: 1.0s all;
}
.astoundServeAllDetailContainerMainBackgroundCont {
    width: 100%;
    height: 100%;
    position: relative;
}
@property --servicesMultiplierA {
syntax: '<color>';
inherits: false;
initial-value: #000000;
}
@property --servicesMultiplierB {
syntax: '<color>';
inherits: false;
initial-value: #000000;
}
.astoundServeAllDetailContainerMainBackgroundMultiplier {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: --servicesMultiplierA 0.5s, --servicesMultiplierB 1.75s;
    opacity: 1.0;
    background: radial-gradient(68.72% 241.8% at 27.79% 64.46%, var(--servicesMultiplierA) 0%, var(--servicesMultiplierB) 100%);
    background-blend-mode: multiply;
}
.astoundServeAllDetailContainerMain.active .astoundServeAllDetailContainerMainBackgroundMultiplier {
--servicesMultiplierA:#6727F0;
--servicesMultiplierB:#EB3357;
    opacity: 0.8;
}
.astoundServeAllDetailContainerMain.active .astoundServeAllDetailContainerMainBackground {
    transform: scale(1.2); 
}
	
	
	
/* END SERVICE LINE BACKGROUND IMAGE */