.flex-packageSummary {display: flex;gap: 5px;padding: 0;margin-top: 25px}

.flex-packageSummary > div {width: 33%;margin: 0 auto;padding: 0}
.flex-packageSummaryCols {display: flex;padding:50px;margin: 20px 0 0 0}
.flex-packageSummaryCols > div {width: 100%;margin: 0;padding: 3px 3px 3px 10px;color: black;font-size: 0.916667em}
div.packageSummaryDisplay {padding: 10px 15px 15px 15px;height: 380px}
.flex-comparePanel,.flex-comparePanelLower {display: flex;gap: 5px;padding: 0;margin-top: 25px}
.flex-comparePanel > div, .flex-comparePanelLower  > div{width: 33%;margin: 0 auto;padding: 0}
.flex-comparePanelLower {margin-top:0}
.flex-compareColumns {display: flex;flex-direction: column;margin: 20px 0 0 0}
.flex-compareColumns > div {width: 100%;margin: 0;padding: 3px 5px 3px 10px;color: black;font-size: 0.916667em}
.chatbotAddOn {border: solid 1px #333;margin-top: 15px;margin-bottom: 15px;padding: 10px 15px}

div.bronzeLevel1{background-color: var(--BronzePanelLev1)}
div.bronzeLevel2{background-color: var(--BronzePanelLev2)}
div.bronzeLevel3{background-color: var(--BronzePanelLev3)}
div.bronzeLevel4{background-color: var(--BronzeBannerLev3)}
div.bronzeBanner1{background-color: var(--BronzeBannerLev1)}
div.bronzeBanner2{background-color: var(--BronzeBannerLev2)}
div.bronzeBanner3{background-color: var(--BronzeBannerLev3)}

div.silverLevel1{background-color: var(--SilverPanelLev1)}
div.silverLevel2{background-color: var(--SilverPanelLev2)}
div.silverLevel3{background-color: var(--SilverPanelLev3)}
div.silverLevel4{background-color: var(--SilverBannerLev3)}
div.silverBanner1{background-color: var(--SilverBannerLev1)}
div.silverBanner2{background-color: var(--SilverBannerLev2)}
div.silverBanner3{background-color: var(--SilverBannerLev3)}

div.goldLevel1{background-color: var(--GoldPanelLev1)}
div.goldLevel2{background-color: var(--GoldPanelLev2)}
div.goldLevel3{background-color: var(--GoldPanelLev3)}
div.goldLevel4{background-color: var(--GoldBannerLev3)}
div.goldBanner1{background-color: var(--GoldBannerLev1)}
div.goldBanner2{background-color: var(--GoldBannerLev2)}
div.goldBanner3{background-color: var(--GoldBannerLev3)}

.bronzeShading {background-image: linear-gradient(205deg, #efc79e 10%, rgb(191 149 59 / 4%) 20%, #e9c097 30%, #d5ac84 70%, rgb(211 168 74 / 33%) 80%, #f1c496 90%)}
.silverShading {background-image: linear-gradient(205deg, #afafaf 10%, rgb(167 167 166 / 40%) 20%, #dfdfdf 30%, #a3a3a3bf 70%, rgb(223 223 223 / 40%) 80%, #a7a7a7 90%)}
.goldShading {background-image: linear-gradient(205deg, #ff8e1eb3 10%, rgb(255 222 150 / 77%) 20%, #ff9b38a6 30%, #f7c797 70%, rgba(237, 192, 94, 0.4) 80%, #ef953cad 90%)}

a.bronzeLevel1{background-color: rgba(205,127,50,0.7);color:#111}
a.silverLevel1{background-color: rgba(192,192,192,0.9);color:#111}
a.goldLevel1{background-color: rgba(255,198,3,0.9);color:#111}

a.bronzeLevel1:hover{background-color: rgba(205,127,50,0.5);color:#666}
a.silverLevel1:hover{background-color: rgba(192,192,192,0.5);color:#666}
a.goldLevel1:hover{background-color: rgba(255,214,13,0.5);color:#666}

.checkSymbolsY {font-weight:400; color: #099; font-size: 0.916667em; margin: 1px 3px 1px 1px}
.checkSymbolsX {font-weight:400; color: #f00; font-size: 0.916667em; margin: 1px 3px 1px 1px}

div.topColumnSummaryContainer {height:265px;padding-top:2px;border-bottom:solid 2px #6663}


@media (max-width:575px) {
	div.topColumnSummaryContainer {height:auto;padding:15px 8px}
}

@media (max-width:801px){
	.flex-packageSummary {display: flex;flex-direction: column;gap: 20px;margin-top:20px}
	.flex-packageSummary > div {width: 100%;margin: 0}
	.flex-packageSummaryCols {display: flex;flex-direction: column;padding:50px;margin: 20px 0 0 0}
	.flex-packageSummaryCols > div {margin: 0;padding: 5px 2px 5px 6px}
	div.packageSummaryDisplay {padding: 10px; height:auto}
	.flex-comparePanel {display: flex;flex-direction: column;gap: 20px;margin-top: 15px}
	.flex-comparePanel > div {width: 100%;margin: 0}
	.flex-comparePanelLower {display:none}
	.flex-compareColumns > div {margin: 0;padding: 5px 3px 5px 7px;font-size: 1em}
}

.checkSymbolsY,.checkSymbolsX  {font-size: 1.0em; margin: 1px 3px 1px 1px}

.fixedPriceFeatures {padding-left:30px}

@media (max-width:575px) {.fixedPriceFeatures {padding-left:10px}}


.featureSubHeading {color:var(--fntDrk);font-weight:700}

.paymentPlanBreakdown {color:#333;padding:2px 2px 2px 10px;line-height:150%}
.paymentPlansContentPanel {padding: 1px 5px 5px 10px}
.paymentPlanContent {color: #ddd}
.paymentPlanContentBreakdown {color: #ddd;padding-left:40px; padding-bottom: 15px}

@media (max-width:575px) {
	.paymentPlanBreakdown {padding:2px 2px 2px 2px}
	.paymentPlansContentPanel {padding: 5px 5px 5px 5px}
	.paymentPlanContentBreakdown {padding-left:10px}
}

.feature-modal {display:none;position: fixed;z-index: 1000;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: rgba(0,0,0,0.6)}
.feature-modal-content {background: #fff;margin: 5% auto;padding: 20px;border-radius: 8px;width: 90%;max-width: 800px;max-height: 85vh;overflow-y: auto;box-shadow: 0 4px 12px rgba(0,0,0,0.3)}
@media (max-width:575px) {.feature-modal-content {padding: 5px;width: 94%}}

.feature-modal-close {color: #eee;float: right;font-size: 22px;padding:1px 2px 0 0;font-weight: bold;cursor: pointer}
.feature-modal-close:hover {color: #fba621}
@media (max-width:575px) {.feature-modal-close {font-size: 18px;padding:0 3px 0 0}}

.feature-modal-body p {margin-bottom: 1em}
.featureLink {cursor: pointer;color: #0077cc;font-weight: bold}
.featureLink:hover {color: #e78e04}


.heading {cursor: pointer;margin: 1px 0;line-height:180%;font-weight: bold;color: #22598f}
.heading:hover {color: #fba621}
.headingRow {display: flex;width:100%;padding:0}
.headingRow>div.linkDiv {	width:75%;margin:0 auto 5px 15px;padding:0px;float:left}
@media (max-width:575px) {.headingRow>div.linkDiv {width:70%;margin:0 auto 5px 5px}}
.headingRowSingle {display: flex;width:100%;padding:0}
.headingRowSingle>div {width:99%;margin:5px auto;padding:0px}
@media (max-width:575px) {.headingRowSingle>div {width:100%}}

div.packageFlag {display:flex;float:right;padding:0}

div.packageFlag>div {width:30px;color:black;padding:0;font-size:0.8333em}
.bronzeY {background-color: var(--BronzeBannerLev3)}
.bronzeN {background-color: rgba(205, 127, 50, 0.2)}
.silverY {background-color: var(--SilverBannerLev3)}
.silverN {background-color: rgba(192, 192, 192, 0.2)}
.goldY {background-color: var(--GoldBannerLev3)}
.goldN {background-color: rgba(251,166,33, 0.2)}

div.paymentPlansContentPanel > h3 {color:#333}
div.paymentPlansContentPanel > p {color:#333}
div.paymentPlansContentPanel > h3 {color:#333}
div.paymentPlansContentPanel > ul > li {color:#333}


/* WEB DES PACKAGE DISPLAY end */


/* bundleContact.css */
.bundle3Container {
	width: 100%;
    max-width: 1200px;
    padding: 0 0 12px 0;
    margin: 5px auto 5px auto;
}

.packageContainer {
	width: 100%;
    max-width: 1200px;
    padding: 0 0 12px 0;
    margin: 5px auto 5px auto;
}

.bundle3PackageCells {display: flex}

.bundle3PackageCells > div {
	background-color: #fff;
	width:50%;
	margin: 0px;
	padding: 0px;
	}
	
.packageCells {display: flex}

.packageCells > div {
	background-color: #fff;
	width:100%;
	margin: 0px;
	padding: 20px 0px 0px 0px;
	}	


@media (max-width:575px) {
	.bundle3PackageCells {flex-direction: column-reverse}
	
	.bundle3PackageCells > div {
		background-color: #fff;
		width:100%;
		margin: 0px;
		padding: 20px}
		
	.packageCells {flex-direction: column-reverse}
	
	.packageCells > div {
		background-color: #fff;
		width:100%;
		margin: 0px;
		padding: 100px}	
}

.packageDisplay {display: none; padding-top:15px}

@media (max-width:575px) {
.packageDisplay {display: none; padding-top:0px; margin-top:0px; padding-bottom:0px; margin-bottom:0px}
}

img {vertical-align: middle}

.slideshow3container {
	position: relative;
	margin: auto}

.selector3Container {
	text-align:center;
	margin:0;
	padding:0;
	white-space: nowrap
}

.packageSelector {
	cursor: pointer;
	height: 40px;
	width: 34%;
	margin: 0;
	padding: 6px 0 0 0;
	background-color: #ccc;
	color:#fff;
	font-size:20px;
	font-weight:700;
	display: inline-block;
	border:solid 1px #000;
	transition: background-color 0.9s ease}

.bundle3SelectorBronze {
	border-right:none;
	background-color: rgba(205, 127, 50, 0.9);
	width: 33%
	}

.packageSelectorBronze {
	border-right:none;
		DGHbackground-color: rgba(205, 127, 50, 0.9);
		DGHbackground-color: #CD7F32;
	background-color: var(--bronzeBannerLev3);
	width: 32.5%
	}
	
.bundle3SelectorSilver {
	border-right:none;
	background-color: rgba(152, 152, 152, 0.7);
	width: 33%}

.packageSelectorSilver {
	border-right:none;
	background-color: rgba(152, 152, 152, 0.7);
	width: 32.5%}
	
.bundle3SelectorGold {
	border-left:none;
	background-color: rgba(251,166,33,0.9);
	width: 33%
	}
	
.packageSelectorGold {
	border-left:none;
	background-color: rgba(251,166,33,0.9);
	width: 32.5%
	}	

@media (max-width:575px) {
	.bundle3Selector, .packageSelector {
		width: 32%;
		margin: 0;
		padding: 3px 0 0 0}
		
	.bundle3SelectorBronze {border-right:none;width: 32%}
	.packageSelectorBronze {border-right:none;width: 32%}
	
	.bundle3SelectorSilver {border-right:solid 1px #000;width: 32%}
	.packageSelectorSilver {border-right:solid 1px #000;width: 32%}
	
	.bundle3SelectorGold {border-left:none;width: 32%}		
	.packageSelectorGold {border-left:none;width: 32%}		
					
}

.active3Bundle {
	background-color: #42607f;
	background-color: transparent;
	color:#000;
	
	background-color: #42607f;
	color:#fff;
}
.bundle3Selector:hover, .packageSelector:hover {
	background-color: #42607f;
	color:#fff;
}

.bundle3Heading{
	display:inline;
	color: #22598f;
	margin:0;
}

.bundleContent{
	color: #22598f;
	font-weight:700;
}

.fade {animation-name: fade;animation-duration: 1s}

@keyframes fade {
	from {opacity: 0} 
	to {opacity: 1}
}

/* div.bundle3ContentContainer, div.packageContentContainer { */
div.bundle3PackageContainer, div.packagePackageContainer {
	width:99.7%;
	height: 26vw;
	min-height: 660px;  /* panel height */
	max-width: 1200px;
	margin: 1px 1px;
	padding: 0;		
	background:#fff;
}

div.packageContentContainer {height: 26vw;min-height: 750px;}  /* panel height */

div.bundle3PackageContainerAutoHeight {
	width:99.7%;
	height: auto;
	margin: 1px 1px;
	padding: 0;		
	background:#fff;
}

	
@media (max-width:575px) {
div.bundle3PackageContainer, div.packagePackageContainer {
	width:100%;
	margin: 15px auto 0 auto;
	padding: 5px 2px 0 2px;
	background:white;
	max-height: unset;
	height: auto;
	border:unset;
	border-radius:unset;
	box-shadow:unset}

.prevImage,.nextImage,.text {
	background:#ccc;
	font-size: 14px;
	padding:4px 6px}
	
.prevImage:hover, .nextImage:hover {
	color: #333;
	background:#eee
	}
}

img.bundleImage,img.bundleImageNoShad {
	display: block;
	width: 100%;
	height: auto;
	max-width: 900px;
	margin: 0;
	box-shadow: 5px 6px 3px #ccc;
}

img.bundleImageNoShad {box-shadow: unset}