/* ===============  ROOT  =============== */
* 
{
	box-sizing:border-box;
	font-style: normal;
}

html 
{
	scroll-behavior:smooth
}

body 
{
	color:#222;
	background-color:#fff; 
	caret-color:#FF7D01;
	overflow-x:hidden;
	padding:0;
	margin:0;
	font-family:'Montserrat',sans-serif;
	font-style: normal;
}

:root ::-webkit-scrollbar 
{
	width:10px
}

:root ::-webkit-scrollbar-track 
{
	border-radius:999em
}

:root ::-webkit-scrollbar-thumb 
{
	background:#333;
	border-radius:10px
}

:root ::-webkit-scrollbar-thumb:hover 
{
	background:#00C8FF
}

::-moz-selection 
{
	color:#fff;
	background:#FF7D01
}

::selection 
{
	color:#fff;
	background:#FF7D01
}

/* ===============  HEADINGS  =============== */

h1,h2,h3,.MainTitle,.SubTitle 
{
	font-weight:800
}

h4,h6 
{
	font-weight: 600
}

h1,.MainTitle 
{
	font-size: 1.8rem;
}

h2,.SubTitle 
{
	font-size: 1.5rem;
}

.MainTitle 
{
	margin: 1.5rem 0 0 0 !important;
}

h3 
{
	margin: 1.5rem 0 0 0
}


/* ===============  ROOT  =============== */
p,address 
{
	line-height:175%;
	margin-block: .5rem;
	font-weight:500;
}

span 
{
	font-weight:500
}

label 
{
	font-weight:500;
	font-family:'Montserrat',sans-serif
}

.Bold, b 
{
	font-weight:700
}

/* ===============  ICONS & INPUTS  =============== */
i 
{
	font-size:1.5rem
}

input,textarea,select 
{
	border-radius:.5rem;
	padding:.75rem;
	border:1px solid #C4C4C4;
	outline:none;
	font-size:1rem;
	font-family:"Montserrat",sans-serif;
	font-style:normal
}

input:focus,textarea:focus,select:focus 
{
	border:1px solid #00C8FF
}

/* ===============  BUTTONS  =============== */
button,.Button
{
	font-family:"Montserrat",sans-serif;
	padding:.75rem 1.5rem;
	margin:0;
	width:fit-content;
	height:fit-content;
	background-color:#FF7D01;
	color:#fff;
	border:none;
	outline:none;
	border-radius:999px;
	font-size:1rem;
	font-weight:800;
	cursor:pointer;
	 -webkit-user-select: none;
	-ms-user-select: none;
	user-select: none
}

span[type="switch"] label, .ButtonLabel
{
	font-family:"Montserrat",sans-serif;
	padding:.75rem 1.5rem;
	margin:0;
	width:fit-content;
	height:fit-content;
	background-color: transparent;
	color:#757575;
	border: 1px solid #c4c4c4;
	outline:none;
	border-radius: .5rem;
	font-size:1rem;
	font-weight:400;
	cursor:pointer;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	text-align:center
}

.ButtonSecondary
{
	outline:2px solid #FF7D01;
	color:#FF7D01;
	background:transparent
}

button:hover,.Button:hover,a:hover>.Button,
.ButtonSecondary:hover,
input[type=radio]:checked+.ButtonLabel,
.ButtonLabel:hover,input[type=radio]:checked+.ButtonLabel,
span[type="switch"] input:checked + label
{
	color:#fff;
	background-color:#00C8FF;
	outline:none;
	box-shadow: 0 0 0 1px #00C8FF
}

.MobileButton 
{
	position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

/* ===============  A-LINKS  =============== */
a 
{
	color:#FF7D01;
	text-decoration:none;
	cursor:pointer;
	font-weight:700
}

a:hover 
{
	color:#00C8FF;
	overflow:clip
}

/* ===============  IMAGES  =============== */
.SwitchImage 
{
	display:inline-flex;
	gap:1.5rem;
	justify-content:space-evenly
}

.SwitchImage img 
{
	width:100%;
	height:150px;
	object-fit:cover;
	image-rendering: auto
}

.SwitchImage input 
{
	display:none
}

.SwitchImage label, .SwitchImage a 
{
	border-radius:1rem;
    width: 205px;
    height: 205px;
	overflow:clip;
	text-align:center;
	color: #222;
	background-color:#fff;
}

.SwitchImage h6 
{
	font-size: 0.85rem;
	margin: 0.5rem 0;
    padding: 0.65rem;
}

.SwitchImage span 
{
	padding:1rem;
	font-weight:700
}

.SwitchImage label:hover, .SwitchImage a:hover 
{
	opacity: .75;
}

.CircleImage 
{
	border-radius: 999rem;
	overflow: clip;
	height: 300px;
	width: 300px;
	background: linear-gradient(45deg, rgba(255,125,1,0.1474964985994398) 0%, rgba(255,125,1,0.35) 100%);
	padding: .75rem;
	box-shadow: 0 0 4px rgba(18, 50, 100, 0.05), 
                0 6px 12px rgba(3, 49, 100, 0.02), 
                0 12px 24px rgba(35, 66, 100, 0.01);
}

.CircleImage img 
{
	height: 100%;
    width: 100%;
	object-fit: cover;
	border-radius: 999rem;
}

/* ===============  TABLES  =============== */
table,th,td 
{
	border:1px solid #C4C4C4;
	padding:1rem
}

table 
{
	border-collapse:collapse;
	border-style:hidden;
	box-shadow:0 0 0 1px #C4C4C4;
	border-radius:1rem
}

table tr:nth-child(even) 
{
	background-color:#F0F0F0
}

table tr th,table tr td 
{
	border-radius:0
}

/* ===============  FORMS  =============== */
form 
{
	padding:1.5rem;
	border-radius:1rem;
	width:100%;
}

form input,form textarea,form select 
{
	width:100%
}

form textarea 
{
	min-height:100px;
	resize:none
}

/* ===============  HEADER-NAVIGATION  =============== */
header 
{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:1rem 1rem 0;
	background-color:#cc6401;
	color:#fff;
}

nav 
{
	display:flex;
	flex-direction:column;
	transition: none;
    animation: none; 
}

header input[type=checkbox]:checked+nav>.Inline>.Products 
{
	position: fixed;
    inset: 0;
    background-color: #CC6401;
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    z-index: 2;
    top: 70px;
}

.Dropdown>input[type=radio]:checked+.Tab 
{
	z-index:-1
}

.Dropdown>input[type=radio]:checked+.Tab~.BackTab 
{
	height:70%;
	width:100%;
	left:0;
	right:0;
	position:absolute
}

.Dropdown>input[type=radio]:checked+label+.DropdownContainer 
{
	display:block
}

/* ===============  RENAME  =============== */
.Hero 
{
	padding:2.5rem 0 0 0;
}

.MarginLeftRight 
{
	margin: 0 1.5rem 0 1.5rem;
}

/* ===============  ROOT  =============== */
section,footer 
{
	padding:2.5rem 1.5rem
}

ul, ol 
{
	padding-inline:18px
}

li 
{
	list-style-position:outside;
	margin: .5rem 0;
	line-height:175%;
	font-weight:500
}

aside 
{
	width: 100%;
}

details 
{
	border:1px solid #C4C4C4;
	border-radius:1rem;
	padding:1rem;
	width:100%;
	height:max-content
}

details[open] summary 
{
	border-bottom:1px solid #aaa;
	margin-bottom:1rem
}

summary 
{
	padding:1rem;
	font-weight:700
}

summary::marker 
{
	color:#FF7D01
}

hr 
{
	width:100px;
	height:2px;
	background-color:#E9C8A7;
	border:none;
	border-radius:999rem
}

figure 
{
	margin:0
}

figure img 
{
	width:100%;
	min-height:160px;
	border-radius:1rem;
	object-fit:cover;
	image-rendering: auto
}

/* ===============  LAYOUTS  =============== */
.Flex 
{
	display: flex
}

.Wrap 
{
	flex-wrap:wrap
}

.Inline 
{
	display:inline-flex
}

.Row,.Column 
{
	display:flex;
	flex-direction:column
}

.MobileJustify 
{
	justify-content:center
}

.MobileJustifyCenter 
{
	justify-content:center
}

.JustifyCenter 
{
	justify-content:center
}

.JustifyBetween 
{
	justify-content:space-between
}

.JustifyEvenly 
{
	justify-content:space-evenly
}

.JustifyAround 
{
	justify-content:space-around
}

.JustifyEnd 
{
	justify-content:end
}

.AlignCenter,.MobileAlignCenter 
{
	align-items:center
}

.DesktopAlignEnd 
{
	align-items:unset
}

.Center 
{
	margin:0 auto
}

.CenterText,.MobileCenterText 
{
	text-align:center
}

.LeftText 
{
	text-align:left
}

.Desktop 
{
	display:none
}

.Gap05 
{
	gap:.5rem
}

.Gap1 
{
	gap:1rem
}

.Gap15 
{
	gap:1.5rem
}

.Gap2 
{
	gap:2rem
}

.Gap3 
{
	gap:3rem
}

.Padding 
{
	padding:1rem
}

.Padding05 
{
	padding:.5rem
}

.Padding2 
{
	padding:2rem
}

.Padding3 
{
	padding:3rem
}

.Margin 
{
	margin: 1rem
}

.MarginTop 
{
	margin-top: 1.5rem
}

.MarginRight
{
	margin-right: 1rem
}

.MarginLeft
{
	margin-left: 1rem
}

.MarginTopBottom 
{
	margin:1.5rem 0
}

.MarginBottom 
{
	margin-bottom: 1rem;
}

.NoPadding 
{
	padding:0
}

.NoMargin 
{
	margin:0 !important
}

.Relative 
{
	position:relative
}

.Absolute 
{
	position:absolute
}

.Sticky 
{
	position:sticky;
	top: 1%;
	align-self: flex-start;
}

.Fixed 
{
	position:fixed;
	height:100%;
	width:570px;
	object-fit:cover;
	top:0
}

.Top 
{
	top:0
}

.Bottom 
{
	bottom: 0
}

.Right 
{
	right:0
}

.Left 
{
	left: 0
}

.Reverse 
{
	flex-direction:column-reverse
}

/* ===============  HEIGHTS  =============== */
.Height25 
{
	height:25px
}

.Height265 
{
    height:265px
}

.Height100,.Height500,.Height600 
{
	height:100%
}

.Height100VH 
{
	height:100vh
}

/* ===============  WIDTHS  =============== */
.WidthFitContent 
{
	width: fit-content;
}

.WidthFill 
{
	width:-webkit-fill-available
}

.Width100 
{
	width:100%
}

.Width100VW 
{
	width:100vw
}

.MaxWidth185 
{
	max-width:185px
}

.MaxWidth220 
{
	max-width:220px
}

.MaxWidth300 
{
	max-width:300px
}

.MaxWidth400 
{
	max-width: 400px;
}

.MaxWidth425 
{
	max-width:425px
}

.MaxWidth500 
{
	max-width:500px
}

.MaxWidth600 
{
	max-width:600px
}

.MaxWidth1000 
{
	max-width:1000px
}

.MaxWidth1400 
{
	max-width:1400px
}

.MaxWidth1600 
{
	max-width:1600px
}

.MaxWidth220,.MaxWidth300,.MaxWidth425,.MaxWidth600,.MaxWidth1000,.MaxWidth1400,.MaxWidth1600 
{
	width:-webkit-fill-available
}

.MinWidth230 
{
	min-width: 272px;
}

/* ===============  RENAME  =============== */
.Hidden, .hidden 
{
	display:none
}

.WhiteText 
{
	color:#fff
}

.GreyText 
{
	color:#222
}

.OrangeText 
{
	color:#FF7D01
}

.GreenText 
{
	color:#ADCC3C
}

.YellowText
{
	color: #FFD100
}

.Border 
{
	border:1px solid #B4B4B4
}

.Shadow
{
	border: none;
	box-shadow: 0 0 0 1px #1232, 0 2px 6px #0331, 0 2px 8px #1342;
}

.ZIndex 
{
	z-index:999
}

.ZIndex1 
{
	z-index:1
}

.Clip 
{
    overflow: clip
}

.Underline 
{
	text-decoration:underline
}

.BorderRadius 
{
	border-radius:1rem;
	overflow:clip;
}

.BorderRadiusTopLeftTopRight 
{
	border-radius: 1rem 1rem 0 0;
	overflow:clip;
}

.BorderRadiusBottomLeftBottomRight
{
	border-radius: 0 0 1rem 1rem;
	overflow:clip;
}

.TriangleBottomRight 
{
	width:0;
	height:0;
	border-style:solid;
	border-width:0 0 50px 100vw;
	border-color:transparent transparent #F0F0F0
}

.TriangleBottomRightWhite 
{
	width:0;
	height:0;
	border-style:solid;
	border-width:0 0 50px 100vw;
	border-color:transparent transparent #FFFFFF
}

.TriangleTopLeft 
{
	width:0;
	height:0;
	border-style:solid;
	border-width:50px 100vw 0 0;
	border-color:#F0F0F0 transparent transparent
}

.TriangleBottomLeftGrey 
{
	width:0;
	height:0;
	border-style:solid;
	border-width:50px 0 0 100vw;
	border-color:transparent transparent transparent #F0F0F0
}

.TriangleTopRightGrey 
{
	width:0;
	height:0;
	border-style:solid;
	border-width:0 100vw 50px 0;
	border-color:transparent #F0F0F0 transparent transparent
}

.TriangleTopLeftWhite 
{
	width:0;
	height:0;
	border-style:solid;
	border-width:50px 100vw 0 0;
	border-color:#FFFFFF transparent transparent
}

.Logo img 
{
	width:190px;
	height:auto;
	image-rendering: auto
}

.Pill a:hover 
{
	color: white;
	opacity: .75
}

.Pill hr 
{
	height:1rem;
	width:1px;
	border:0;
	margin:0;
	background:#cdcdcd;
	border-radius:999rem
}

.Tab 
{
	background-color:#FF7D01;
	font-weight:600;
	padding:1rem .5rem;
	border-radius: .5rem;
	z-index:1;
	cursor: pointer;
	user-select: none
}

.Tab:hover 
{
	background-color:#00C8FF;
	color:#fff
}

.TabBorder 
{
	overflow:auto;
	gap:1rem
}

.BackTab 
{
	position:absolute;
	width:399.83px;
	height:51px
}

.DropdownContainer 
{
	background-color:inherit;
	display:none;
	z-index:2;
	left:0;
	right:0;
	top:0;
	height: fit-content;
}

.DropdownContainer, .Shadow
{
	box-shadow: none;
}

.DropdownContainer h3 
{
	font-size: 1.125rem;
	font-weight: 800
}

a.NavItem 
{
	padding:.65rem;
	color:white
}

.NavItem:hover 
{
	background-color:#E8E8E8;
}

.NavItem:hover, .NavItem:hover .SubText 
{
	color: #222
}

.NavIcon 
{
	width:24px;
	height:24px;
	display:flex;
	background:#f5c3a3;
	color:#823f00;
	justify-content:center;
	align-items:center;
	padding:1.5rem;
	border-radius:.75rem
}

.SubText 
{
	color: #ffffffa3
}

.Products 
{
	display:none
}

.Hero .ImageBox img, .Hero .ImageBox video 
{
	max-width: unset;
}

video::-webkit-media-controls 
{
    display: none !important;
}

.MobileNavigationBack 
{
	height:70.45px;
	position:sticky;
	top:0
}

.LargeImage img,.NavImage img 
{
	object-fit:cover;
	width:100%;
	height:100%;
	image-rendering: auto
}

.ImageBox img, video 
{
	width:100%;
	max-width:525px;
	max-height:525px;
	object-fit:cover;
	image-rendering: -webkit-optimize-contrast;
	display:block;
}

.SmallImage 
{
	width:325px
}

.Landing 
{
	background-color:#F2E5D8
}

.Trustpilot 
{
	background-color:#222;
	text-align:center
}

.Circle 
{
	width:11px;
	height:11px;
	background-color:#C4C4C4;
	border-radius:999rem
}

.Circle:hover 
{
	background-color:#00C8FF
}

.Group1,.Group2,.Group3 
{
	display:none
}

/* ===============  MECHANICS  =============== */
#Group1:checked~.Group1,#Group2:checked~.Group2,#Group3:checked~.Group3 
{
	display:flex
}

#Group1:checked~label[for=Group1] 
{
	display:none
}

#Group1:checked~.Drop1,#Group2:checked~.Drop2,#Group3:checked~.Drop3 
{
	display:flex
}

#Group2:checked~.Drop1 
{
	display:none
}

#Group3:checked~.Drop2 
{
	display:none
}

#Group1:checked~.Row>label[for=Group1],#Group1:checked~.Row>label[for=Group2],#Group1:checked~.Row>label[for=Group3] 
{
	display:flex
}

/* ===============  TEXTBOX  =============== */
.TextBox 
{
	z-index:1;
}

.TextBox h1, .TextBox p 
{
	margin:1rem 0
}

.TagTitle 
{
	border-radius:999px;
	padding:.25rem .8rem;
	font-size:.85rem;
	font-weight:700;
	width:-moz-fit-content;
	width:fit-content
}

/* ===============  CARDS  =============== */
.Card 
{
	padding:1.5rem;
	border: 1px solid #b4b4b490;
	border-radius:1rem;
	width:100%;
	max-width:332px
}

.Card p 
{
	margin-block:0
}

.ProductCard 
{
	width:165px;
	height:165px;
	border:1px solid #B4B4B4
}

.ProductCard span 
{
	font-size:1.1rem;
	font-weight:700
}

.LargeCard 
{
	border-radius:1rem;
	overflow:clip
}

.LargeCard img 
{
	width:100%;
	height:100%;
	object-fit:cover;
	image-rendering: auto
}

.LargeCard section 
{
	padding:1rem
}

.LargeCard .fullSectionDisplay 
{
	width:-webkit-fill-available
}

.Shadow {
    box-shadow: 0 0 4px rgba(18, 50, 100, 0.15), 
                0 6px 12px rgba(3, 49, 100, 0.1), 
                0 12px 24px rgba(35, 66, 100, 0.05);
}

.Icon 
{
	min-width:65px;
	height:65px;
	color:#fff;
	border-radius:999rem
}

.Icon i 
{
	font-size:1.85rem
}

.LargeFontSize
{
	font-size: 2rem
}

.SideBox 
{
	top:2rem;
	align-items:start;
	background-color:#fff;
	min-width:350px;
	max-width:375px;
	height:-moz-fit-content;
	height:fit-content;
	border-radius:1rem;
	outline:1px solid #cdcdcd;
	overflow:clip
}

.SideBox section 
{
	padding:1.5rem
}

.SideBox img 
{
	height:225px;
	object-fit:cover;
	width:100%;
	background-color:#cdcdcd;
	image-rendering: auto
}

#circle1 
{
	--translate:30px;
	animation:rotation 2s -1s linear infinite
}

#circle2 
{
	--translate:55px;
	animation:rotation 6s linear infinite
}

#circle3 
{
	--translate:-75px;
	animation:rotation 4s -1s linear infinite
}

#circle4 
{
	--translate:-95px;
	animation:rotation 8s -3s linear infinite
}

.SolarSystem 
{
	height:600px;
	max-height:600px
}

@keyframes rotation 
{
	
	from {
		transform:rotate(0deg) translate(var(--translate)) rotate(0deg)
	}

	to {
		transform:rotate(360deg) translate(var(--translate)) rotate(-360deg)
	}
	
}

.CookieBar 
{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
    backdrop-filter: blur(5px);
	z-index: 9999
}

.Overlay 
{
	background:rgba(51,51,51,.75);
	position:absolute;
	width:100%;
	height:100%;
	z-index:1
}

.FullImage 
{
	width:100%;
	height:100%;
	object-fit:cover;
	background-position:center;
	position:absolute
}

.TemplateContent img 
{
	width:100%;
	height:100%;
	border-radius:1rem;
	outline:1px solid #cdcdcd;
	object-fit:cover;
	border-radius:1rem;
	image-rendering: auto
}

.Map,iframe 
{
	width:100%
}

.LeftFloatTag 
{
	background-color:#222;
	color:#F3F4F8;
	padding:1.5rem
}

.LeftFloatTag h3 
{
	margin-block:0
}

.BottomFloatTag 
{
	background-color:#066C7C;
	color:#F3F4F8;
	padding:1.5rem
}

.BottomFloatTag h3 
{
	margin-block:0
}

.BottomFloatTag a 
{
	font-size:2rem;
	color:#fff
}

.BottomFloatTag a:hover 
{
	color:#00C8FF
}

.InformationSidebar p 
{
	margin:0
}

.newProductList a 
{
	display:block;
	color:#222;
	padding:6px 0;
	font-weight: 500
}

.Scroll a 
{
	display:block;
	color:#222;
	padding:6px 0 6px 1rem;
	font-weight: 500
}

.newProductList a:hover 
{
	color:#00C8FF
}

.newProductList ul,.newProductList ol 
{
	margin:0;
	padding:0;
	padding-inline-start:0
}

.newProductList li 
{
	color:#222;
	list-style:none;
	margin:0
}

.internalLinkSub 
{
	font-weight:400!important
}

.newProductList > ol > li > a 
{
	background:#222222;
	text-align:center;
	color:#F3F4F8
}

.newProductList > ol > li > a:hover 
{
	background-color:#00C8FF
}

.FAQSide time 
{
	color:#FF7D01;
	font-weight:500
}

.FAQSide ol 
{
	margin-block:0;
	padding-inline:0;
	list-style-type:none
}

.fullSectionDisplay 
{
	flex:45%
}

footer 
{
	background:#222;
	color:#C4C4C4;
	text-align:center
}

footer label 
{
	color:#fff;
	font-weight:800
}

footer hr 
{
	margin:2rem 0 1rem;
	height:2px;
	background-color:#C4C4C4
}

footer i 
{
	color:#cdcdcd
}

footer .Content 
{
	align-items:center
}

footer a 
{
	color:white;
	font-weight:400
}

/* ===============  BACKGROUND COLOURS  =============== */

.OrangeBackground 
{
	background-color:#FF7D01
}

.GreenBackground 
{
	background-color:#ADCC3C
}

.WhiteBackground 
{
	background-color:#fff
}

.GreyBackground 
{
	background-color:#333
}

.LightGreyBackground 
{
	background-color:#F0F0F0
}

.LighterGreyBackground 
{
	background-color:#e4e4e4
}

.DarkOrangeBackground 
{
	background-color:#CC6401
}

/* =============== FRED ASIDE STYLES =============== */

.BackgroundWhite 
{
	background-color:#fff
}

.BackgroundBlack 
{
	background-color:#222;
	color:#fff;
}

.BackgroundWhatsApp 
{
	background: #075E54;
	color: #f9f9f9;
}

.Round1 
{
    border-radius: 1rem;
}

.PaddingContainer 
{
    padding: 20px 2%;
}

.p100 
{
	width: 100%;
}

.TextCenter 
{
	text-align:center
}

.TextDecorationNone h4 
{
	margin: 1rem;
}

aside h3 
{
	margin: 0;
}

.SideTag
{
	position: fixed;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 2rem;
	top: 0;
	left: 100%;
	height: 100%;
	width: 100%;
	cursor: pointer
}

.SideTag > div
{
	display: flex;
	flex-direction: row;
	border-radius: 10px 0px 0px 10px;
	overflow: clip;
	padding: 0;
	transform: translateX(-42px);
	transition: transform ease 200ms;
	max-height: 160px;
}

.SideTag > div > div:first-of-type
{
	gap: 0.5rem;
	padding: 10px 8px
}

.SideTag > div > div:first-of-type > span:first-of-type
{
	rotate: 180deg;
	writing-mode: vertical-lr
}

.SideTag a
{
	box-shadow: inset 2px 0 0 0 #0005
}

.SlideTagShown
{
	transform: translateX(-100%) !important;
}

.Width40
{
	width:40px;
}

.PaddingInner
{
	padding: .5rem;
}

.Scroll
{
	overflow-y: scroll;
	width: 85vw;
}

/* ===============  TAG COLOURS  =============== */
.YellowTag 
{
	background-color:#FFE485;
	color:#947E32
}

.BlueTag 
{
	background-color:#C5F4FF;
	color:#335D6A
}

.GreenTag 
{
	background-color:#C9FFC5;
	color:#376A33
}

.PurpleTag 
{
	background-color:#ECC5FF;
	color:#766380
}

.GreyTag 
{
	background-color: #D6D6D6;
	color: #717171;
}

/* ===============  MYPORTAL STYLINGS  =============== */

.MyPortal 
{
    background-color: #F3F4F8;
}

.MyPortal    
section,
footer 
{
    padding: 1.5rem 2rem;
}

.Avatar 
{
    width: 100px;
    height: 100px;
    border-radius: 999px;
    overflow: clip
}

.Test2 
{
    padding: 2.5rem 2rem;
}

.Avatar img 
{
    width: 100%;
    height: 100%;
    object-fit: cover
}

.CountBlob 
{
    background-color: #D6D6D6;
    border-radius: 999rem;
    width: fit-content;
    height: fit-content;
    padding: .25rem .75rem;
    font-weight: 700;
    color: #717171
}

.BackgroundDiagonal
{
	position: relative;
}

.BackgroundDiagonal:before,
.BackgroundDiagonal:after
{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	clip-path: polygon(0 0, 0 100%, 100% 80%, 100% 0, 0 0);
	z-index: -1;
}

.BackgroundDiagonal:after
{
	background: #f0f0f0;
	height: 60vh;
	min-height: 650px;
	max-height: 700px;
}

@media only screen and (min-width:1006px) 
{
	
	header input[type=checkbox]:checked + nav > .Inline > .Products 
	{
		position:unset;
		background-color:unset;
		border-radius:0;
		flex-direction:unset;
		padding:unset
	}
	
	nav 
	{
		display:flex;
		flex-direction:row;
		background-color:transparent;
		position:unset;
		padding:unset;
		height:100%
	}
	
	nav >.Products > input[type=radio]:checked + label + .DropdownContainer 
	{
		display:none
	}
	
	nav > .Products > input[type=radio] + label:hover + .DropdownContainer, 
	nav > .Products > input[type=radio]:checked + label:hover + .DropdownContainer 
	{
		display:flex
	}
	
	h1, .MainTitle 
	{
		font-size:3rem
	}

	h2, .SubTitle 
	{
		font-size:1.5rem
	}
	
	h3 {
		font-size:1.35rem
	}
	
	section, .Hero 
	{
		padding:5rem 2rem
	}

	footer,footer .Content 
	{
		text-align:start;
		align-items:start
	}
	
	.Row 
	{
		flex-direction:row;
	}
	
	.Pill 
	{
		border-radius:999rem;
		background-color:#FF7D01;
		padding:1rem
	}
	
	.Tab 
	{
		padding:1rem 1.25rem;
		border-radius: 0
	}
	
	.Products 
	{
		display:flex
	}
	
	a.NavItem 
	{
		color: #222
	}
	
	.Products > label 
	{
		height:51px;
		display:flex;
		align-items:center
	}
	
	nav > .Products > input[type=radio] ~ .DropdownContainer, 
	nav > .Products > input[type=radio]:checked ~ .DropdownContainer 
	{
		display:none
	}
	
	nav > .Products > input[type=radio] + label:hover + .DropdownContainer,
	nav > .Products > input[type=radio] + label + .DropdownContainer:hover,
	nav > .Products > input[type=radio]:checked label:hover +.DropdownContainer:hover 
	{
		display:flex
	}
	
	.Products label span 
	{
		padding:.5rem 1.5rem;
		background-color:#FF7D01;
		border-radius:999rem
	}
	
	.Products label span:hover 
	{
		background-color:#00C8FF
	}
	
	.DropdownContainer 
	{
		padding: 2rem 1.5rem;
		border-radius:0 0 1rem 1rem;
		overflow:auto;
		height:unset;
		bottom:unset;
		background-color:#F0F0F0;
		color:#222;
		position:absolute;
		top: 181px;
		left:0;
		right:0
	}
	
	.DropdownContainer
	{
		box-shadow: 0 0 0 1px #1232, 0 2px 6px #0331, 0 2px 8px #1342;
	}
	
	.TextBox h1 
	{
		margin:1.5rem 0 0 0
	}
	
	.ProductCard 
	{
		width:185px;
		height:185px
	}
	
	.TabBorder 
	{
		border-radius:1rem 1rem 0 0;
		gap: 0
	}
	
	.BackTab 
	{
		width:952.97px;
		cursor: pointer
	}
	
	.CookieBar 
	{
		position:fixed;
		inset: 0
	}
	
	.ButtonSpacer 
	{
		margin:0
	}
	
	.TextBox 
	{
		max-width:700px
	}
	
	.MobileButton 
	{
		position: unset;
		bottom: unset;
		left: unset;
		right: unset;
		margin-left: unset;
		margin-right: unset
	}	
	
	.MobileJustify 
	{
		justify-content: space-between
	}
	
	.MobileJustifyCenter 
	{
		justify-content: unset
	}
	
	.MobileAlignCenter 
	{
		align-items:unset
	}
	
	.DesktopAlignEnd 
	{
		align-items:end
	}
	
	.MobileCenterText 
	{
		text-align:unset
	}
	
	.LargeImage 
	{
		max-width:715px
	}
	
	.NavImage 
	{
		width:345px;
		height:150px
	}
	
	.Height500 
	{
		height:500px
	}
	
	.Height600 
	{
		height:600px
	}
	
	.Carousel 
	{
		height: 585px
	}
	
	.TriangleBottomRight 
	{
		border-width:0 0 100px 100vw
	}
	
	.TriangleTopLeft,.TriangleTopLeftWhite 
	{
		border-width:100px 100vw 0 0
	}
	
	.TriangleBottomLeftGrey 
	{
		border-width:100px 0 0 100vw
	}
	
	.TriangleTopRightGrey 
	{
		border-width:0 100vw 100px 0
	}
	
	.LeftFloatTag 
	{
		position:absolute;
		width:415px;
		bottom:35%;
		left:0;
		padding:.5rem 1rem;
		border-radius:0 1rem 1rem 0
	}
	
	.BottomFloatTag 
	{
		position:absolute;
		width: fit-content;
		bottom:20%;
		left:0;
		padding:.5rem 1rem;
		border-radius:0 1rem 1rem 0
	}
	
	.Map,iframe 
	{
		width:600px
	}
	
	.Mobile 
	{
		display:none
	}
	
	.Desktop 
	{
		display:flex
	}
	
	.BorderRight 
	{
		border-right:2px solid #CC6401
	}
	
	.SubText 
	{
		color:rgba(17,17,17,.5843137255)
	}	
		
	.Test 
	{
		overflow: auto;
		max-height: 500px
	}	
	
	aside 
	{
		width: 100%;
		max-width: 400px;
		overflow:unset
	}
	
	.MarginLeftRight 
	{
		margin: 0
	}
	
	.CircleImage 
	{
		height: 450px;
		width: 450px
	}
	
	.AlignBaseline
	{
		align-items: baseline
	}
}


/* IMPORTED FROM PORTAL STYLES */

.BackgroundOrange
{
	background: #f38700;
	color: #f9f9f9;
}

div:has(> .Validation)
{
	border-left: 4px #cd3439 solid;
	padding: 10px 10px 10px 30px;
	background: #cd343930;
	border-top-right-radius: 12px;
	border-bottom-right-radius: 12px;
}

.Validation
{
	list-style-type: none;
	font-weight: 500;
	margin: 0;
}

.Validation > li
{
	margin: 0;
	font-size: 0.9rem;
	display: block;
}

.SlideIn h4
{
	margin: 0;
}

.SlideIn
{
	z-index: 2;
	width: auto;
	top: 10%;
	right: -100%;
	margin-left: 1%;
	max-width: 100%;
	animation: SlideIn 8s;
	z-index: 999;
	pointer-events: none;
}

.SlideIn > div
{
	display: flex;
	flex-direction: row;
	padding: 0.5rem;
	gap: 1rem;
	pointer-events: initial;
}

.SlideIn > div > div
{
	gap: 0.5rem;
}

@keyframes SlideIn 
{
	0% {right: -100%;}
	5% {right: 1%;}
	90% {right: 1%;}
	100% {right: -100%;}
}

span[type="switch"]{
	flex-wrap: nowrap !important;
	margin: 1rem 0 0 0;
}

span[type="switch"], span[type="switch"] label
{
	width:100%;
}

span[type="switch"] input 
{
	display:none;
}


.SwitchImage > label
{
	padding: 0;
	overflow: hidden;
	width: 230px;
	max-width: 230px;
}

button:hover:enabled,
.Button:hover,
a:hover,
span[type="switch"] label:hover
{
	opacity:0.7;
}

.BackgroundGrey input,
.BackgroundGrey select,
.BackgroundGrey span[type="switch"] label
{
	background: #fff;
}

/* 
   line added to fix inline width100 on input, object inputs are being generated with a div of "column", 
   this needs 100% width in order to look correct.
*/
[data-objectid="8096"] .Column {
    width: 100%;
}

.LoadingContainer
{
   width: 100%;
   height: 6px;
   background-color: lightgray;
   overflow: hidden;
}

.LoadingBar
{
   width: 0%;
   height: 100%;
   background-color: #ff7d01;
   animation: load 45s linear forwards;
}

@keyframes load 
{
   from 
   {
		width: 0%;
   }
   to 
   {
		width: 100%;
   }
}