:root {
--col1: #274472; /* Dark Blue : */
--col2: #41729F; /* Midnight Blue : default H tags*/
--col3: #5885AF; /* Blue Grey */
--col4: #189AB4; /* Blue Grotto */
--col5: #C3E0E5; /* Baby Blue */
--colA: #FFFFFF; /* White */
--colZ: #000000; /* Black */
--txtShad: 3px 3px 5px rgb(0 0 0 / 80%);
--borderRad: 8px;
}

@media (min-width: 641px) {
	.onlyMobDisplay {display:none}
}

@media (max-width:640px){.noMob{display:none}}
@media (min-width:641px){.onlyMob{display:none}}

* {box-sizing: border-box}

html {
scroll-padding-top: 72px;
scroll-behavior: smooth
}

body {
font-family: arial,helvetica,sans-serif;
font-size: 14pt;
font-size: 13pt;
color: rgba(0,0,0,.7);
font-weight: 400;
line-height: 160%;
vertical-align: top;
padding: 0;
background-color: #000;
background-image: conic-gradient(from 225deg at 100px 50px,#000,#333,#000,#333,#000,#555,#000,#000)
}

@media (max-width: 640px) {
	body {
	background-attachment: fixed;
	margin: 0;
	font-size: 13pt;
	}
}

.topFixDesk {
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 5;
background-color: #fff;
background-image: linear-gradient(to top right,rgba(0,0,0,.8),rgba(0,0,0,.3));
border-bottom: solid #fff;
padding: 10px 20px
}

@media (max-width: 800px) {.topFixDesk {border-bottom: solid 0 transparent}}

@media (max-width: 640px) {
.topFixDesk {
	background-color: transparent;
	background-image: linear-gradient(to bottom,rgba(0,0,0,.9),transparent);
	padding: 35px 20px;
	border-bottom: solid 0 transparent
	}
}

.LogoM {display: none}

.LogoSize {
position: absolute;
top: 15px;
left: 30px;
max-width: 40%;
height: auto;
z-index: 100
}

@media (max-width: 640px) {
	.LogoSize {left: 15px}
}

@keyframes panelSlider {
from {top: -300px}
to {top: 60px}
}

.pageTitleTransFade {
position: absolute;
top: 70px;
left: 0;
width: 90%;
animation-name: fadeIn;
animation-duration: 1s;
animation-fill-mode: forwards
}

.mainContentBoxTransFade {
position: relative;
top: 250px;
left: 0;
width: 60%;
margin: 0 0 350px 60px;
padding: 0 30px 25px 15px;
animation-name: fadeIn;
animation-duration: 3s;
background-color: #fff;
border: solid 2px var(--col2);
border-radius: var(--borderRad);
}

@media (max-width: 800px) {	
	.pageTitleTransFade {width:100%}
	.mainContentBoxTransFade {width: 80%;margin: 0 auto 350px auto}
}
@media (max-width: 640px) {
	.pageTitleTransFade {
	top: 100px;
	width: 100%;
	padding: 0;
	margin: 0
	}

	.mainContentBoxTransFade {
	top: -5px;
	padding: 0 10px 40px 10px;
	margin: 0 0 10px 0;
	width: 100%;
	}
}

details {
line-height: 20pt;
margin: 0 0 10px 0;
/*font-size: 12pt;*/
text-align: left
}

summary {
margin-left: 30px;
padding: 0;
cursor: pointer;
font-weight: 700;
font-size: 12pt;
text-align: left
}

.summaryDetailsBorder {
margin: 5px 35px 20px 60px;
border: solid 2px var(--col1);
border-radius: var(--borderRad);
padding: 3px 10px
}

@media (max-width: 640px) {
	summary {margin-left:20px}

	.summaryDetailsBorder {
	margin: 5px 5px 5px 15px;
	border: solid 1px var(--col1);
	border-radius: var(--borderRad);
	background-color: #ddd;
	padding: 0 10px 0 10px
	}
}

section.questionsBox {
width: 95%;
padding: 5px 15px 22px 18px;
margin: 5px auto;
border: solid 1px var(--col1);
box-shadow: 3px 3px 5px #999
}

section.contactForm {
width: 95%;
padding: 5px 15px 22px 18px;
margin: 20px auto;
border: solid 1px var(--col1);
box-shadow: 3px 3px 5px #999
}


img.inContentImage {
width: 45%;
max-width: 400px;
float: right;
margin: 5px;
box-shadow: 2px 2px 2px var(--col5);
}

img.inContentImage100pc, img.inContentImage100pcBorderWhite {
display: block;
width: 100%;
max-width: 900px;
margin: 20px auto;
border: solid 2px #ccc;
border-radius: var(--borderRad);
}

img.inContentImage90pc, imginContentImage90pcBorderWhite {
display: block;
width: 90%;
max-width: 900px;
margin: 20px auto;
border: solid 2px #ccc;
border-radius: var(--borderRad);
}

img.inContentImage90pcBorderWhite, img.inContentImage100pcBorderWhite {border: solid 2px #fff}

.socialIconS {width: 18px;height: auto;margin: 10px}
.socialIconM {width: 24px;height: auto;margin: 5px;padding: 0}
.socialIconL {width: 30px;height: auto;margin: 10px 20px 0 0}

.cookie-container {
position: fixed;
bottom: -100%;
left: 0;
right: 0;
border-top: solid #0ff;
border-color: #fff;
background-color: rgba(0,0,0,.9);
text-align: center;
color: #000;
padding: 0 32px;
box-shadow: 0 -2px 16px rgba(47,54,64,.39);
transition: .4s
}

.cookie-container.active {bottom: 0}
.cookie-container a {color: var(--col1)}

hr {
margin: 10px 0;
padding: 2px;
border-top: 1px solid #5b77a4;
border-bottom: 1px solid #5b77a4;
border-left: none;
border-right: none
}

/* RESTYLED FOOTER */
.footerLowerG {
background-color: #ccc;
text-align: left;
width: 100%;
padding: 0;
margin: 0}

.footerUpper {background-color: #bbb;text-align: center;margin: 0;padding: 3px 0 0 0;border-bottom: solid 1px #666;border-top: solid 1px #666}

@media (max-width: 640px) {.footerLowerG {background-color: #000}}

.codeDisplay, .codeDisplayInline, .codeDisplayInlineH2 {font-family: courier; margin: 5px 10px; color: #333; font-weight: 400}

.footerColumns {
margin: 0 auto;
max-width: 1200px;
display: grid;
padding: 10px 0;
grid-gap: 60px;
grid-template-columns: 1fr 1fr 1fr
}

.footerList {padding: 0 0 0 25px}

@media (max-width: 640px) {.footerColumns,.footerList {display: none}}
/* RESTYLED FOOTER end */

@media (min-width: 641px) {.imgMainS {display:none}}

@media (max-width: 640px) {.imgMainS {margin: 0;display: block;width: 100%}}

.imageInContent100pc {
max-width: 100%;
height: auto;
border-style: solid;
border-color: #fff;
margin: 5px auto
}


@media (max-width: 640px) {
	.noMobDisplay {display:none}
	.HideForMob {display: none}
	.contactButtons {text-align: center;padding: 10px 15px 20px 15px}
}

details{margin:0 0 10px 0}

summary{margin-left:30px;padding:0;cursor:pointer;font-weight:700}

.summaryDetailsBottomMargin{margin:0 0 10px 0}

.summaryDetails{margin:8px 0 10px 50px}

@media (max-width:640px){
	summary{margin-left:20px}
	.summaryDetails{margin:10px 0 15px 30px}
	.summaryDetailsBottomMargin{margin:0 0 10px 0}
	}

section.collapsableSection,section.collapsableSectionGrey{
	border:solid 2pt #fff;
	border-radius:8px;
	padding:0 15px 5px 15px;
	margin:25px 0 20px 0;
	background-color: #ccc
	}
	
@media (max-width:640px){
	section.collapsableSection{
		margin:0 10px 8px 10px;
		padding:0 4px 5px 4px}
	}
	
h3.attention{font-family: Jubilat,Georgia,sans-serif;color:#333;font-size:1.1em;margin: 0;padding: 8px 0 0 0;font-style:italic;text-align:center}	
hr.attentionTop{width:94%;margin:25px auto 4px auto;border-top:1px solid #999;border-bottom:1px solid #555}
hr.attentionBot,hr.attentionBotSource{width:94%;margin:15px auto 25px auto;border-top:1px solid #555;border-bottom:1px solid #999}
hr.attentionBotSource{margin: 10px auto 7px auto}

h3.attention2{font-family: Jubilat,Georgia,sans-serif;color:#ddd;font-size:1.1em;margin: 0;padding: 8px 0 0 0;font-style:italic;text-align:center}	
hr.attention2Top{width:94%;margin:25px auto 4px auto;border-top:1px solid #ccc;border-bottom:1px solid #999}
hr.attention2Bot,hr.attentionBotSource{width:94%;margin:15px auto 25px auto;border-top:1px solid #999;border-bottom:1px solid #ccc}
hr.attention2BotSource{margin: 10px auto 7px auto}

hr,hr.width96,hr.dotted50pc{padding:2px;border-top:1px solid #ccc;border-bottom:1px solid #aaa;border-left:none;border-right:none;margin:20px 0}

hr.width96{width:96%;margin:20px auto}

.white{color:#fff}


.inPageContactForm,.inPageContactFormLight,.articleFeedbackForm{
	display:flex;
	background:transparent}
	
.inPageContactForm>div,.inPageContactFormLight>div{
	width:47%;
	margin:0 auto;
	padding:10px 15px}
	
.inPageFormContainer 	{border: solid 3px pink;}    /* Is this needed? */
	

@media (max-width:640px){
	.inPageContactForm,.inPageContactFormLight,.articleFeedbackForm{
		display:flex;
		flex-direction:column;
		background:transparent;
		margin: 15px 0 0 0;
		border-top:unset;
		border-bottom:unset;
		border-image:unset
		}
	.inPageContactForm>div,.inPageContactFormLight>div{width:100%;margin:0;padding:10px 15px}
}

@media only screen and (max-width:700px){
	.bgimg-1,.bgimg-1a{background-image:url(images/bgs/bg07-420x650.jpg);min-height:100%}
	.doNotDisplayMob{display:none}}

@media only screen and (min-width:701px){
	.bgimg-1XX{display:none}
	.bgimg-4{background-image:url(images/bgs/bg-fade-fuses.jpg);min-height:100%;opacity:1}
	.doNotDisplayDesk{display:none}
	}

.flex-comparePanel {
	display: flex;
	gap: 5px;
	padding: 0;
}

.flex-comparePanel > div {
	width: 33%;
	margin: 0 auto;
	padding: 0;
}

.flex-compareColumns {
	display: flex;
	flex-direction: column;
	margin: 20px 0 0 0
}

.flex-compareColumns > div {
	width: 100%;
	margin: 0;
	padding: 3px 3px 3px 10px;
	color: black;
	font-size: 0.916667em
}

div.bronzeLevel1{background-color: rgba(205,127,50,0.9)}
div.bronzeLevel2{background-color: rgba(205,127,50,0.5)}
div.bronzeLevel3{background-color: rgba(205,127,50,0.3)}
div.silverLevel1{background-color: rgba(192,192,192,0.9)}
div.silverLevel2{background-color: rgba(192,192,192,0.5)}
div.silverLevel3{background-color: rgba(192,192,192,0.3)}
div.goldLevel1{background-color: rgba(255,214,13,0.9)}
div.goldLevel2{background-color: rgba(255,214,13,0.4)}
div.goldLevel3{background-color: rgba(255,214,13,0.2)}


.columnTitle {font-weight:700; color: #eee; font-size: 1em; margin: 3px 0}
.columnTitleBlack {font-weight:700; color: #111; font-size: 1em; margin: 3px 0}
.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}
.topColumnSummaryContainer {height:190px}

@media (max-width:801px){
	.flex-comparePanel {
	display: flex;
	flex-direction: column;
	gap: 20px;
	}

	.flex-comparePanel > div {
	width: 100%;
	margin: 0;
	}
	
	.flex-compareColumns > div {
	margin: 0;
	padding: 5px 2px 5px 6px;
	}

	.checkSymbolsY,.checkSymbolsX  {font-size: 12pt; margin: 1px 3px 1px 1px}
	
	.topColumnSummaryContainer {height:auto}
}


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

.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 {
	display: flex;
	gap: 5px;
	padding: 0;
}

.flex-comparePanel > div {
	width: 33%;
	margin: 0 auto;
	padding: 0;
}

.flex-compareColumns {
	display: flex;
	flex-direction: column;
	margin: 20px 0 0 0
}

.flex-compareColumns > div {
	width: 100%;
	margin: 0;
	padding: 3px 3px 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: rgba(205,127,50,0.9)}
div.bronzeLevel2{background-color: rgba(205,127,50,0.5)}
div.bronzeLevel3{background-color: rgba(205,127,50,0.3)}
div.silverLevel1{background-color: rgba(192,192,192,0.9)}
div.silverLevel2{background-color: rgba(192,192,192,0.5)}
div.silverLevel3{background-color: rgba(192,192,192,0.3)}
div.goldLevel1{background-color: rgba(255,214,13,0.9)}
div.goldLevel2{background-color: rgba(255,214,13,0.4)}
div.goldLevel3{background-color: rgba(255,214,13,0.2)}

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,214,13,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}

.columnTitle {font-weight:700; color: #eee; font-size: 1em; margin: 3px 0}
.columnTitleBlack {font-weight:700; color: #111; font-size: 1em; margin: 3px 0}
.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}
.topColumnSummaryContainer {height:190px}

@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;
	}

	.flex-comparePanel > div {
	width: 100%;
	margin: 0;
	}
	
	.flex-compareColumns > div {
	margin: 0;
	padding: 5px 2px 5px 6px;
	}
	
	.checkSymbolsY,.checkSymbolsX  {font-size: 12pt; margin: 1px 3px 1px 1px}
	.topColumnSummaryContainer {height:auto}
}

.fixedPriceFeatures {padding-left:30px}

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




.buttonMaster {
	display: inline-block;
	padding: 5px 16px;
	background-color: var(--col3);
	margin: 3px 10px;
	color: #eee;
	text-align: center;
	text-decoration: none;
	border: solid 1px var(--colLit);
	border-radius: 8px;
	position: relative;
	overflow: hidden;
	box-shadow:5px 5px 8px rgba(102, 102, 102, .5);
	transition: transform 0.1s, box-shadow 0.3s;
}

.buttonMaster::before {
	content: '';
	position: absolute;
	top: 0;
	right: -10px;
	bottom: 0;
	left: 0;
	background: rgba(255, 255, 255, 0.1);
	transform: skewX(-20deg) translateX(-100%);
	transition: transform 0.6s;
	color: #ffd60d;
}

.buttonMaster:hover {
	color: #ffd60d;
	border: solid 1px #fff;
	box-shadow:2px 2px 3px rgba(102, 102, 102, .5);
}

.buttonMaster:hover::before {
	transform: skewX(-20deg) translateX(0);
	box-shadow:5px 5px 8px rgba(102, 102, 102, .5);
}

.buttonMaster:active::before {
	transform: skewX(-20deg) translateX(-100%);
}

.buttonMaster:active {
	box-shadow:5px 5px 8px rgba(102, 102, 102, .5);
	transform: translateY(0);
}