/* @import url('fonts.css'); */

/* 
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

CSS Document - All pages within the site

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧

Color key
---------
white: #ffffff 
black: #000000

▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧▧
*/

:root {
  /* #f0f0f0 in decimal RGB */
  --cran: 91,8,73;
  --cranhex: #5b0849;
  --plum: 68,33,82;
  --plumhex: #442152;
  --blue: 45,58,90;
  --dkbluehex: #252f49;
  --bluehex: #2d3a5a;
  --medbluehex: #3e507c;
  --dkteal: 23,82,99;
  --dktealhex: #175263;
  --ltteal: 0,107,109;
  --lttealhex: #006b6d;
  --offwhite: 247,247,247;
  --offwhitehex: #f7f7f7;
}

/* background-color: rgba(var(--color), 0.8); */

/* =====================================================
CSS Reset
===================================================== */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	font-family: 'Montserrat', Arial, Helvetica, sans-serif;
	color: #191D1F;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	font-variant-numeric: lining-nums;
	-moz-font-feature-settings: "lnum";
	-webkit-font-feature-settings: "lnum";
	font-feature-settings: "lnum";
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
html, body {
			 
	height: 100%;
	background-color: #f7f7f7;
}
body {
	line-height: 1;
	overflow-x: hidden;
}
nav ol, nav ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* =====================================================
Basic Page Attributes 
===================================================== */

/* Uncomment and add values to customize the text-selection styles */
/*::selection {
}
::-moz-selection {
}
*/

h1, h2, h3, h4, h5, h6 {
	font-family: 'Montserrat', sans-serif;
}
	h1 {
		font-family: 'Sacramento';
		color: #fff;
		font-weight: 300;
		font-size: 2.2em;
		line-height: 1.2em;
		display: inline-block;
		vertical-align: middle;
		margin-top: 10px;
	}

	h2 { 
		color: #666;
		text-transform: uppercase;
		font-weight: 300;
		text-align: center;
		line-height: 1.8em;
		padding-bottom: 20px;
		border-bottom: 1px solid #bbbbbb;
		margin-bottom: 20px;
		font-family: 'Montserrat';
		font-weight: 400;
			font-size: 1.1rem;
	}
		h2:not(:first-of-type) {
			margin-top: 70px;
		}
		h2 span {
			font-size: .8rem;
			text-align: center;
			font-family:  'Montserrat', sans-serif;
			display: block;
			color: inherit;
			color: #878787;
		}
	h3 {
		font-family:  'Montserrat', sans-serif;
		font-weight: 700;
		font-size: 1.05rem;
		margin-bottom: 6px;
		color: #333;
	}
p {
	color: #4d4d4d;
	font-size: 1rem;
    line-height: 1.6em;
	margin-bottom: 20px;
}
	main ul {
		list-style-type: disc;
		margin-left: 20px;
		margin-bottom: 20px;
	}
	main li {
		color: #4d4d4d;
		font-size: 1rem;
		line-height: 1.6em;
	}
  
em {
	font-style: italic;
}
small {
}
.icon {
	font-style: none;
}

img {
	/* max-width: 100%; */
	/* display: block; */
}
.icon {
	font-family: 'PH Icons';
	font-weight: normal;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.button {
	display: block;
	color: #fff;
	background-color: #00bbc9;
	padding: 20px 10px;
	box-sizing: border-box;
	text-align: center;
	text-transform: uppercase;
	border-radius: 8px;
	transition: all .3s ease 0s;
	font-size: .9rem;
	font-weight: 500;
	text-decoration: none;
}
	.button:active,
	.button:hover,
	.button:focus {
		background-color: #008c96;
		color: #fff;
	}
	.buttonTypeCran {
		background-color: rgba(var(--cran),.25);
		background-image: linear-gradient(340deg, rgba(var(--cran),.25) 0%, rgba(var(--plum),.25) 100%);
		color: rgba(var(--cran),1);
		border: 1px solid rgba(var(--cran),1);
		box-shadow: 0px 6px 9px 3px rgba(var(--cran),0.2);
	}
		.buttonTypeCran:active,
		.buttonTypeCran:hover,
		.buttonTypeCran:focus {
			color: #fff;
			background-color: rgba(var(--cran),1);
			background-image: linear-gradient(340deg, rgba(var(--cran),.25) 0%, rgba(var(--plum),.25) 100%);
		}
	.buttonTypeBlue {
		background-color: rgba(var(--blue),.25);
		background-image: linear-gradient(340deg, rgba(var(--plum),.25) 0%, rgba(var(--blue),.25) 100%);
		color: rgba(var(--blue),1);
		border: 1px solid rgba(var(--blue),1);
		box-shadow: 0px 6px 9px 3px rgba(var(--blue),0.2);
	}
		.buttonTypeBlue:active,
		.buttonTypeBlue:hover,
		.buttonTypeBlue:focus {
			color: #fff;
			background-color: rgba(var(--blue),1);
			background-image: linear-gradient(340deg, rgba(var(--plum),.25) 0%, rgba(var(--blue),.25) 100%);
		}
	.buttonTypeTeal {
		background-color: rgba(var(--ltteal),.25);
		background-image: linear-gradient(340deg, rgba(var(--dkteal),.25) 0%, rgba(var(--ltteal),.25) 100%);
		color: rgba(var(--ltteal),1);
		border: 1px solid rgba(var(--ltteal),1);
		box-shadow: 0px 6px 9px 3px rgba(var(--ltteal),0.2);
	}
		.buttonTypeTeal:active,
		.buttonTypeTeal:hover,
		.buttonTypeTeal:focus {
			color: #fff;
			background-color: rgba(var(--ltteal),1);
			background-image: linear-gradient(340deg, rgba(var(--dkteal),.25) 0%, rgba(var(--ltteal),.25) 100%);
		}
a {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
nav a {
	text-decoration: none;
}

.hide {
	opacity: 0;
	z-index: -9999;
	transition: opacity .25s ease-in-out;
}
/* .hide, */
.show {
	opacity: 1;
	z-index: 9999;
	transition: opacity .25s ease-in-out;
}

.gradientBg {
	background: rgb(91,8,73);
	background-image: 
		url("../images/textures/low-contrast-linen.png"),
		linear-gradient(340deg, rgba(var(--cran),1) 0%, rgba(var(--plum),1) 28%, rgba(var(--blue),1) 52%, rgba(var(--dkteal),1) 79%, rgba(var(--ltteal),1) 100%);
}
.textureBg {
	background-image:url("../images/textures/low-contrast-linen.png");
}

#calculatingSpinner {
	position: fixed;
	top: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 2em;
	background-color: rgba(255,255,255,.25);
	background: linear-gradient(340deg, rgba(var(--cran),.8) 0%, rgba(var(--plum),.8) 28%, rgba(var(--blue),.9) 52%, rgba(var(--dkteal),.8) 79%, rgba(var(--ltteal),.8) 100%);
}
	#calculatingSpinner h2 {
		color: #fff;
		font-family: 'Sacramento';
		text-transform: none;
		border-bottom: 0;
		font-size: 2.8em;
		margin-bottom: 0;
		padding-bottom: 0;
	}
	#calculatingSpinner i {
		color: #fff;
		font-size: 2.8em;
		display: block;
	}

/* https://codepen.io/RRoberts/pen/ZBYaJr/ */
.hamburger .line{
  width: 50px;
  height: 3px;
  background-color: #ecf0f1;
  display: block;
  margin: 8px auto;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.hamburger:hover{
  cursor: pointer;
}

/* NINE */

#hamburger{
  position: relative;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  margin-top: 28px;
}

#hamburger.is-active{
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#hamburger:before{
  content: "";
  position: absolute;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 56px;
  height: 56px;
  border: 3px solid transparent;
  top: calc(50% - 28px);
  left: calc(50% - 28px);
  border-radius: 100%;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#hamburger.is-active:before{
  border: 3px solid #ecf0f1;
}

#hamburger.is-active .line{
  width: 35px;
}

#hamburger.is-active .line:nth-child(2){
  opacity: 0;
}

#hamburger.is-active .line:nth-child(1){
  -webkit-transform: translateY(10px);
  -ms-transform: translateY(10px);
  -o-transform: translateY(10px);
  transform: translateY(10px);
}

#hamburger.is-active .line:nth-child(3){
  -webkit-transform: translateY(-13px) rotate(90deg);
  -ms-transform: translateY(-13px) rotate(90deg);
  -o-transform: translateY(-13px) rotate(90deg);
  transform: translateY(-13px) rotate(90deg);
}


/* =====================================================
Forms
===================================================== */
.calculator form {
	max-width: 800px;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
}

	.calculator input::-webkit-outer-spin-button,
	.calculator input::-webkit-inner-spin-button {
		/* display: none; <- Crashes Chrome on hover */
		-webkit-appearance: none;
		margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
	}

	.calculator input[type=number] {
		-moz-appearance:textfield; /* Firefox */
	}
	.calculator form h3 {
		width: 100%;
		text-align: center;
		text-transform: uppercase;
	}
	.calculator form label {
		width: 50%;
		text-align: right;
		color: #f7f7f7;
		color: #2d3a5a;
		padding-right: 20px;
		box-sizing: border-box;
	}
	.calculator input,
	.calculator select {
		width: 50%;
	}

	.calculator select,
	.calculator input {
		margin-bottom: 10px; 
		
		border: none;
		outline: none;
		padding: 10px;
		font-size: 13px;
		color: var(--dktealhex);
		/* text-shadow: 1px 1px 1px rgba(0,0,0,0.3); */
		border: 1px solid rgba(0,0,0,0.3);
		border-radius: 4px;
		background-color: #fff;
		/* box-shadow: inset 0 -5px 45px rgba(var(--dkteal),0.2), 0 1px 1px rgba(255,255,255,0.2); */
		/* -webkit-transition: box-shadow .5s ease; */
		/* -moz-transition: box-shadow .5s ease; */
		/* -o-transition: box-shadow .5s ease; */
		/* -ms-transition: box-shadow .5s ease; */
		/* transition: box-shadow .5s ease; */
	}
	.calculator select:focus,
	.calculator input:focus { 
		box-shadow: 0 0 5px var(--dktealhex); 
		border-color: var(--lttealhex);
	}
	
	.calculatorOutput {
		padding-top: 40px;
	}
	
	.calculatorOutput dl div {
		border: 1px solid var(--bluehex);
		border-radius: 6px;
		background-color: rgba(var(--blue),.3);
		margin-bottom: 20px;
		padding: 10px;
		color: #333;
		display: flex;
		flex-wrap: wrap;
		line-height: 1.8em;
	}
		.calculatorOutput dl div:first-child{
			border: 1px solid var(--lttealhex);
			background-color: rgba(var(--ltteal),.3);
		}
			.calculatorOutput dl div:first-child h2{
				color: var(--lttealhex);
				border-color: var(--lttealhex);
			}
		.calculatorOutput dl div:nth-child(2){
			border: 1px solid var(--bluehex);
			background-color: rgba(var(--blue),.3);
		}
			.calculatorOutput dl div:nth-child(2) h2{
				color: var(--bluehex);
				border-color: var(--bluehex);
			}
		.calculatorOutput dl div:nth-child(3){
			border: 1px solid var(--plumhex);
			background-color: rgba(var(--plum),.3);
		}
			.calculatorOutput dl div:nth-child(3) h2{
				color: var(--plumhex);
				border-color: var(--plumhex);
			}
		.calculatorOutput dl div:nth-child(4){
			border: 1px solid var(--cranhex);
			background-color: rgba(var(--cran),.3);
		}
			.calculatorOutput dl div:nth-child(4) h2{
				color: var(--cranhex);
				border-color: var(--cranhex);
			}
		.calculatorOutput div h2 {
			width: 100%;
			padding-bottom: 10px;
		}
		.calculatorOutput dt {
			/* font-weight: bold; */
			/* border-right: 2px dotted #333; */
			width: 50%;
			box-sizing: border-box;
			text-transform: uppercase;
		}
		.calculatorOutput dd {
			width: 50%;
		}
			.calculatorOutput dd:before {
				margin-right: 12px;
				content: '=';
			}

/* =====================================================
Container/Column Divs
===================================================== */

main {
	padding: 20px;
	border-top: 2px solid var(--offwhitehex);
	background: var(--offwhitehex);
	background: linear-gradient(180deg, rgba(227,226,226,1) 0px, rgba(var(--offwhite),1) 40px, rgba(var(--offwhite),1) 100%); 
	border-radius: 30px 30px 0 0;
	margin-top: -25px;
	padding-bottom: 116px;
}

section {
	position: relative;
	/* padding: 50px; */
}

/* =====================================================
Accordion
===================================================== */
.accordion {
	border: 2px solid var(--plumhex);
	border-radius: 6px;
	margin-bottom: 10px;
	-webkit-transition: height 0.3s ease;
	-moz-transition: height 0.3s ease;
	-o-transition: height 0.3s ease;
	transition: height 0.3s ease;
	overflow: hidden;
}
.accordionToggleLabel {
	padding: 20px 20px 20px 45px;
	display: block;
	cursor: pointer;
	position: relative;
}
	.accordionToggleLabel:before {
		height: 76px;
		width: 40px;
		content: '\f105';
		font-family: 'Font Awesome 6 Free';
		font-weight: normal;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		position: absolute;
		left: 0;
		top: -10px;
		color: var(--plumhex);
		font-size: 18px;
		text-align: center;
		line-height: 76px;
		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
		text-indent: 0;
	}

input.accordionToggle {
  display: none;
}
.accordionContent {
	padding: 0 20px;
	box-sizing: border-box;
	height: 0;
	-webkit-transition: height 0.3s ease;
	-moz-transition: height 0.3s ease;
	-o-transition: height 0.3s ease;
	transition: height 0.3s ease;
}
.accordion .accordionToggle:checked + .accordionToggleLabel:before {
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
}
.accordion .accordionToggle:checked + .accordionToggleLabel + .accordionContent {
	height: auto;
	-webkit-transition: height 0.3s ease;
	-moz-transition: height 0.3s ease;
	-o-transition: height 0.3s ease;
	transition: height 0.3s ease;
}

/* =====================================================
Header
===================================================== */
header {
	color: var(--offwhitehex);
	padding: 20px 20px 45px;
}
header a {
	text-decoration: none !important;
}
header .logo {
	width: 50px;
	height: 50px;
	margin-right: 4px;
	display: inline-block;
	vertical-align: middle;
}

/* =====================================================
Footer
===================================================== */
footer {
	/* grid-area: menu; */
	position: fixed;
	height: 85px;
	background-color: rgba(var(--blue),1);
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 9999;
}
	footer nav {
		width: 100%;
		height: 100%;
	}
		footer nav ul {
			width: 100%;
			height: 100%;
			display: flex;
			flex-wrap: nowrap;
		}
			footer nav ul li {
				width: 25%;
				text-align: center;
				display: block;
				height: 100%;
			}
				footer nav ul li #openFullMenu,
				footer nav ul li a {
					color: var(--offwhitehex);
					display: inline-block;
					height: 100%;
					width: 100%;
					text-align: center;
					line-height: 70px;
					text-decoration: none;
					transition: all 0.3s ease 0s;
				}
					footer nav ul li:hover #openFullMenu,
					footer nav ul li.active-item #openFullMenu,
					footer nav ul li:hover a,
					footer nav ul li.active-item a {
						background-color: var(--medbluehex);
						background-image: url("../images/textures/low-contrast-linen.png");
					}
	footer nav .icon {
	    width: 50px;
		height: 50px;
		vertical-align: middle;
		text-align: center;
		display: inline-block;
		background-color: var(--offwhitehex);
		margin-top: 10px;
	}
		.icon.sewingMachine {
			-webkit-mask: url('../images/icons/icon_sewingMachine.svg') no-repeat center;
			mask: url('../images/icons/icon_sewingMachine.svg') no-repeat center;
		}
		.icon.simpleBlocks { 
			-webkit-mask: url('../images/icons/icon_simpleBlocks.svg') no-repeat center;
			mask: url('../images/icons/icon_simpleBlocks.svg') no-repeat center;
		}
		.icon.calculator {
			-webkit-mask: url('../images/icons/icon_calculator.svg') no-repeat center;
			mask: url('../images/icons/icon_calculator.svg') no-repeat center;
		}
		
/* =====================================================
Overlay Menu
===================================================== */
#menuOverlay {
	height: 1px;
	position: fixed;
	width: 100%;
	bottom: 70px;
	background-image: url("../images/textures/low-contrast-linen.png");
	background-color: var(--medbluehex);
	overflow: scroll;
	transition: all .3s ease 0s;
	z-index: 50;
	box-sizing: border-box;
}
	#menuOverlay.open {
		height: calc(100% - 70px);
		z-index: 1000;
	}
		#menuOverlay.open + footer #openFullMenu{
			background-color: var(--medbluehex);
			background-image: url("../images/textures/low-contrast-linen.png");
		}
	#menuOverlay li {
		border-top: 1px solid rgba(var(--offwhite),.25);
		border-bottom: 1px solid var(--bluehex);
		position: relative;
		background-image: url("../images/textures/low-contrast-linen.png");
		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}
		#menuOverlay ul > li:hover > a {
			background-color: rgba(255,255,255,.05);
		}
		#menuOverlay li:last-of-type {
			margin-bottom: 14px;
		}
	#menuOverlay a {
		transition: all .3s ease 0s;
		text-decoration: none;
		text-transform: uppercase;
		padding: 30px 50px;
		display: block;
		color: var(--offwhitehex);
	}
		#menuOverlay .childMenu li {
			border-top: 0;
			border-bottom: 0;
		}
		#menuOverlay .childMenu a {
			padding: 15px 50px;
			font-size: .95em;
		}
		
#menuOverlay .toggleSubnav {
	display: none;
}
	#menuOverlay .viewSubnav{
		width: 40px;
		height: 76px;
		position: absolute;
		top: 0;
		left: 0;
		cursor: pointer;
		text-indent: -4000px;
	}
	#menuOverlay .viewSubnav:before {
		height: 76px;
		width: 40px;
		content: '\f105';
		font-family: 'Font Awesome 6 Free';
		font-weight: normal;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		position: absolute;
		left: 0;
		top: 0;
		color: var(--offwhitehex);
		font-size: 18px;
		text-align: center;
		line-height: 76px;
		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
		text-indent: 0;
	}
		#menuOverlay ul li ul li .viewSubnav:before {
			height: 46px;
			line-height: 46px;
			left: 16px;
		}
	
#menuOverlay nav > ul li ul {
	height: 0;
	overflow: hidden;
	-webkit-transition: height 0.3s ease;
	-moz-transition: height 0.3s ease;
	-o-transition: height 0.3s ease;
	transition: height 0.3s ease;
}
	#menuOverlay nav > ul li > .toggleSubnav:checked + .viewSubnav + ul {
		height: auto;
	}
		#menuOverlay nav > ul li > .toggleSubnav:checked + .viewSubnav:before {
			-webkit-transform: rotate(90deg);
			-moz-transform: rotate(90deg);
			-o-transform: rotate(90deg);
			transform: rotate(90deg);
		}
	
#menuOverlay ul li ul li {
	background-color: var(--bluehex);
}
	#menuOverlay ul li ul li ul li{
		background-color: var(--dkbluehex);
	}

@media only screen and (min-width : 600px) {
}
 

@media only screen and (min-width : 900px) {
	
	body {
		display: grid;
		grid-template-columns: 336px 1fr; 
		grid-template-rows: 128px 1fr; 
		gap: 0px 0px; 
		grid-template-areas: 
			"header header"
			"sidebar primaryContent";
		width: 100%; 
		height: 100%; 
	}
	body header {
		grid-area: header;
		padding: 40px;
	}
	main {
		grid-area: primaryContent;
		background: var(--offwhitehex);
		padding: 40px 60px;
	}
		main .wrapper {
			max-width: 900px;
			margin-left: 0;
		}
	#menuOverlay {
		grid-area: sidebar;
		height: 100%;
		position: initial;
		height: 100%;
		overflow: visible;
		background-color: var(--dktealhex);
	}
		#menuOverlay li {
			background-color: var(--dktealhex);
			margin-bottom: 0 !important;
		}
		#menuOverlay.open {
			height: 100%;
		}
	footer {
		display: none;
	}

	h2 { 
		text-align: left;
								
		margin-bottom: 40px;
		font-size: 1rem;
		line-height: 2.3em;
	}
		h2 span {
			text-align: left;
			font-size: 2rem;
		}
	}
		
}

@media only screen and (min-width : 1160px) {
}