body{
	font-size: 0;
	margin: 0;
	padding: 0;
	position: relative;
	color: #dedede;
	background-color: #d6d6d6;
	background-image: url('../img/bg.png');
	background-repeat: repeat;
}

::-webkit-scrollbar {width: 8px;}
::-webkit-scrollbar-track {background: transparent;}
::-webkit-scrollbar-thumb {background: #555; border-radius: 4px;}
::-webkit-scrollbar-thumb:hover {background: #444; cursor: pointer;}
::-webkit-scrollbar-thumb:active {background: #333; cursor: pointer;}

h1, h2, h3, h4, h5, a{ font-family: 'Open Sans', sans-serif; color: #dedede;}
a{text-decoration: none; position: relative;}
a.effect-underline:after { content: ''; position: absolute; left: 0; display: inline-block; height: 1em; width: 100%; border-bottom: 1px solid; margin-top: 10px; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: scale(0,1); transform: scale(0,1); }
a.effect-underline:hover:after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }

p{font-family: 'Open Sans', sans-serif;}
h1 {
	font-size: 70px;
	text-align: center;
	margin: 5px 0;
	background-image: linear-gradient(to right, #cb9b51 0%, #f6e27a 45%, #f6e27a 55%, #cb9b51 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: #fff;
}
h2{font-size: 35px;margin: 100px 0 50px 0; color: #b9b9b9;}
h3{font-size: 22px;margin: 25px 0 5px 0;color: #b9b9b9; text-align: left;}
h4{font-size: 18px;margin: 25px 0 5px 0;color: #b9b9b9; text-align: left;}
h5{font-size: 16px; color: #ceba66; font-weight: normal;}
p{font-size: 17px;margin: 25px 0;}

input:focus, textarea:focus, select:focus{outline: none;}
input[type="text"], textarea{padding: 10px; border: #ceba66 1px solid; border-radius: 3px; background-color: #f6e27a1f; color: #dedede; margin: 20px 0; font-size: 20px; width: 100%; resize: none; 'Open Sans', sans-serif; box-sizing: border-box;}
input[type="text"]:focus, textarea:focus{border: #ceba66 1px solid; background-color: rgba(246, 226, 122, 0.27);}

#menu{
	height: 50px; padding-top: 15px; padding-right: 30px; position: fixed; top: 0; width: 100vw; box-sizing: border-box; z-index: 10; overflow: hidden;
	transition-property: background-color;
	transition-duration: 0.4s;
	transition-timing-function: ease-out;
}

#menu:after { content: ''; position: absolute; left: 0; display: inline-block; height: 1em; width: 100%; border-bottom: #ceba66 1px solid; margin-top: 34px; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: scale(0,1); transform: scale(0,1); }
#menu.scrolling:after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
#menu.scrolling {height: 50px; padding-top: 15px; background-color: rgba(32, 32, 33, 0.95); overflow: hidden;}
#menu #logo a[href="#"] img { width: 30px; padding: 0 20px; top: -5px; position: absolute;}
nav { float: right; margin: 0 10px; font-size: 16px; }
nav > a:not(:last-child) { margin-right: 30px; }

.main{
	width: calc(100vw - 10px);
	height: calc(100vh - 10px);
	margin: 5px;
	overflow-y: auto;
	box-sizing: border-box;
	scroll-behavior: smooth;
}

.content{
	margin: auto;
	max-width: 1200px;
	padding: 0 100px;
	box-sizing: border-box;
}

section{
	display: flex;
	min-height: 30vh;
	padding: 0 0 100px 0;
	box-sizing: border-box;
	flex-direction: column;
	align-items: flex-start;
	margin: 0;
}

section.head{
	-webkit-box-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	flex-direction: column;
	align-items: flex-start;
	min-height: 100vh;
}
section.head h2{margin: 0 0 30px 0;}
section form{width: 100%; box-sizing: border-box;}

.btn{
	font-family: 'Open Sans', sans-serif;
	border: #f6e27a 1px solid;
	padding: 10px 15px;
	margin: 10px 0;
	font-size: 24px;
	color: #f6e27a;
	border-radius: 3px;
	background: none;
}

.btn:hover{
	border: #ceba66 1px solid; color: #ceba66;
	cursor: pointer;
	background-color: rgba(255, 255, 255, 0.03);
}

.btn.sml{padding: 6px 10px;margin: 8px 0;font-size: 16px;}

.prodPar{display: inline-block; min-width: 400px; width: calc(50% - 40px); min-height: 380px;margin: 20px;padding: 50px;border: #ceba66 1px solid;background-color: #f6e27a1f; box-sizing: border-box; }
.prodPar img{width: 100%; aspect-ratio: 4 / 3; object-fit: cover;object-position: 33% 100%;}
.prodPar p{text-align: left;}

.flexBoxOutter{
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-evenly;
}
#Solutions > h2{margin-bottom: 5px;}
#Solutions > h4{margin: 5px 0 40px;}
.solnPart{display: inline-block; min-width: 280px; width: calc(33.3% - 20px); min-height: 240px; margin: 10px; padding: 60px 20px 20px 20px; border: #ceba66 1px solid;background-color: #f6e27a1f;text-align: left; box-sizing: border-box; vertical-align: top; position: relative;}
/*.solnPart img{width: 60px;aspect-ratio: 1 / 1;}*/
.solnPart .lead{margin-bottom: 20px; background-color: #ceba66; color: #333333; position: absolute; left: 0; top: -1px; padding: 5px 10px; width: 100%; font-size: 16px; font-family: 'Open Sans', sans-serif; text-align: right; box-sizing: border-box; font-weight: bold;}
.solnPart p{text-align: left; font-size: 15.5px;}
.solnPart h4{height: 46px; width: calc(100% - 80px); margin: 0 10px; display: inline-flex; align-items: center; vertical-align: top; overflow: hidden; color: #dedede;}
.solnPart .btn{float: right;}
.solnPart i{font-size: 46px; display: inline-block;}

.tool{
	text-align: center;
	display: inline-block;
	width: 120px;
	min-height: 120px;
	margin: 15px;
	padding: 15px;
	vertical-align: top;
}
/*.tool:nth-child(5n+5){margin-right: 0;}*/
.tool img{max-width: 100%; max-height: 100%}
.tool div{width: 60px; height: 60px; display: inline-flex;box-sizing: border-box; flex-flow: row nowrap;align-items: center;justify-content: center;}
.tool.bg div{background-color: #ffffff;padding: 5px;}
.tool h3{text-align: center; margin: 15px 0 0 0; font-size: 18px;}

section#footer{
	padding: 0;
	margin: 50px 0 0 0;
	min-height: 0;
}

#status{position: absolute; display: block; bottom: 200px; width: 300px; left: -90px; box-sizing: border-box; font-size: 16px; transform: rotate(270deg); transition: opacity 300ms ease-in; opacity: 0;}
#emailAddress{position: absolute; display: block; bottom: 150px; width: 200px; right: -40px; box-sizing: border-box; font-size: 16px; transform: rotate(90deg); transition: opacity 500ms ease-in; opacity: 0;}
#emailAddress.show, #status.show{opacity: 1;}

#emailAddress a, #status a{color: #ceba66;}
#emailAddress a:visited, #status a:visited{color: #ceba66;}
#emailAddress a:hover, #status a:hover{color: rgba(246, 226, 122, 0.5);}

.heartBeat{
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 8px;
	margin: 0 10px;
	overflow: hidden;
	animation: redFlash 1s linear infinite;
	font-size: 0;
}

.heartBeat.green{
	animation: greenFlash 1s linear infinite;
}

@keyframes redFlash {
	0% {background-color:#D46A6A;}
	25% {background-color: #9d5050;}
	50% {background-color:#D46A6A;}
	75% {background-color: #9d5050;}
	100% {background-color:#D46A6A;}
}

@keyframes greenFlash {
	0% {background-color: #56cb56;}
	25% {background-color: #4f964f;}
	50% {background-color:#56cb56;}
	75% {background-color: #4f964f;}
	100% {background-color:#56cb56;}
}

@media only screen and (max-width: 700px){
	#status{display: none;}
	#emailAddress{display: none;}

	.content{padding: 0 30px;}
	section{align-items: center;}
	section.head{align-items: center; padding-top: 50px}
	h1{font-size: 44px}
	.head h2{font-size: 20px}

	#menu{padding-right: 0;}
	nav{margin: 0 10px; font-size: 14px; float: none; text-align: center;}
	nav > a:not(:last-child) { margin-right: 20px;}
	#menu:after { margin-top: 15px; }
	#logo{display: none;}
}

@media only screen and (max-width: 500px){
	#status{display: none;}
	#emailAddress{display: none;}

	.content{padding: 0 30px;}
	h1{font-size: 32px}
	.head h2{font-size: 18px}
	p{font-size: 15px;}

	.btn{padding: 6px 10px;margin: 8px 0;font-size: 16px;}

	.main{width: calc(100vw);height: calc(100vh); margin: 0;}
	::-webkit-scrollbar {width: 0;}

	#toolsH2Div{display: none;}

	.prodPar{min-width: 100%; margin: 10px 0 30px 0; padding: 30px 15px;}
	.solnPart{min-width: 100%; margin: 10px 0 30px 0; padding: 50px 15px 30px 15px;}
	.tool{margin: 0; padding: 10px 5px;}
}