.mainbody {
	position: absolute;
	top: 0px; /* Header Height */
	bottom: 0px; /* Footer Height */
	width: 100%;
	bottom: 0px;
}

.smooth {
	-webkit-transition: opacity .5s ease-in-out;
	-moz-transition: opacity .5s ease-in-out;
	-ms-transition: opacity .5s ease-in-out;
	-o-transition: opacity .5s ease-in-out;
	transition: opacity .5s ease-in-out;
}

.page {
	width: 100%;
	height: 100vh;
	margin: auto;
	text-align: center;
}

.half_page {
	display: inline-flex;
	width: 100%;
	height: 50vh;
	margin: auto;
	text-align: center;
	line-height: 50vh;
	width: 100%;
}

.small_page {
	display: inline-flex;
	width: 100%;
	height: 20vh;
	margin: auto;
	text-align: center;
	line-height: 22vh;
}

.large_page {
	width: 100%;
	height: 80vh;
	margin: auto;
	line-height: 1.5;
}

.large_td {
	width: 50%;
	height: 80vh;
	margin: auto;
	text-align: center;
	padding: 0;
}

.large_img {
	overflow: visible;
	max-width: 100%;
	max-height: 80vh;
}

.large_page_title {
	vertical-align: middle;
	margin-top: auto;
	margin-bottom: auto;
}

@media ( max-width : 1020px) {
	.large_page_title {
		font-size: 42px;
	}
}

.page_font {
	line-height: 1;
	margin-top: 33vh;
}

.left {
	text-align: left;
	text-indent: 10%;
}

.right {
	text-align: right;
	text-indent: 10%;
	direction: rtl;
}

.background {
	background-size: cover;
	cursor: pointer;
	background-repeat: no-repeat;
}

div.transbox {
	width: 100%;
	margin: auto;
	margin-right: 0px;
	text-align: center;
	/* background: linear-gradient(rgba(0, 0, 0, 0), rgb(0, 0, 0)); */
}

div.transbox-right {
	width: 50%;
	float: right;
	margin: auto;
	margin-right: 0px;
	background-color: #ffffff;
	opacity: 0.9;
	filter: alpha(opacity = 90); /* For IE8 and earlier */
	text-align: center;
	height: 66vh;
}

div.transbox-left {
	width: 50%;
	float: left;
	margin: auto;
	margin-left: 0px;
	background-color: #ffffff;
	opacity: 0.9;
	filter: alpha(opacity = 90); /* For IE8 and earlier */
	text-align: center;
	height: 66vh;
}

#splash_page {
	background-color: white;
	margin-top: 0px;
	top: 0px;
	left: 0px;
	width: 100%;
	position: fixed;
}

.notetextarea {
	position: absolute;
	bottom: 20px;
	width: 50%;
	margin: auto;
}

.even {
	border: 2px solid white;
	background: #d4e3e5;
}

.even:hover {
	background-color: #E6F0FF;
}

.odd {
	border: 2px solid white;
	background: #beccce;
}

.odd:hover {
	background-color: #E6F0FF;
}

.boxsizingBorder {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.button {
	border: none;
	color: white;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 2px 2px;
	cursor: pointer;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
}

.green {
	background-color: #4CAF50; /* Green */
}

.red {
	background-color: #d42e11; /* Red */
}

.button:hover {
	box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0
		rgba(0, 0, 0, 0.19);
}

.logo:hover {
	box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0
		rgba(0, 0, 0, 0.19);
}

.notes {
	font: "Arial Black", Gadget, sans-serif;
	display: grid;
	grid-template-columns: 100px 100px 100px;
	grid-gap: 10px;
}

.note {
	width: 300px;
	height: 300px;
	cursor: pointer;
	vertical-align: top;
	display: inline-block;
	position: relative;
	z-index: 0;
}

/* .note:hover {
	position: absolute;
	z-index: 1; Sit on top
	height: 400px;
	width: 400px;
}  */
.grid {
	display: grid;
	grid-template-columns: 100px 50px 100px;
	grid-template-rows: 80px auto 80px;
	grid-column-gap: 10px;
	grid-row-gap: 15px;
}

.footer {
	padding-bottom: 10px;
	height: 50%;
	width: 100%;
	box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
}

.foreground {
	padding-bottom: 10px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

table.fixed {
	table-layout: fixed;
}

table.fixed td {
	overflow: scroll;
}

.banner {
	position: fixed;
	width: 100%;
	z-index: 1;
}

.body {
	display: block;
	margin: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}

.keyword {
	display: inline;
	margin-right: 2px;
	margin-left: 2px;
	background-color: gray;
	box-shadow: 0px 5px 5px #888888;
	color: white;
	padding: 3px;
	float: left;
}

/* The Delete Button */
.delete {
	color: white;
	font-weight: bold;
}

.delete:hover, .delete:focus {
	color: #000;
	text-decoration: none;
	cursor: not-allowed;
}

.gradient {
	background: #696969; /* For browsers that do not support gradients */
	background: -webkit-linear-gradient(#696969, #a5a5a5, #696969);
	/* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#696969, #a5a5a5, #696969);
	/* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#696969, #a5a5a5, #696969);
	/* For Firefox 3.6 to 15 */
	background: linear-gradient(#696969, #a5a5a5, #696969);
	/* Standard syntax */
}

.button {
	border: none;
	color: white;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	background-color: #008CBA;
}

/* unvisited link */
a:link {
	color: white;
}

/* visited link */
a:visited {
	color: white;
}

/* mouse over link */
a:hover {
	color: white;
}

/* selected link */
a:active {
	color: white;
}

.fading-top-border {
	border-width: 20px 0 0 0;
	border-style: solid;
	-moz-border-image: -moz-linear-gradient(bottom, black 0%, rgba(0, 0, 0, 0)
		100%);
	-webkit-border-image: -webkit-linear-gradient(bottom, black 0%, rgba(0, 0, 0, 0)
		100%);
	border-image: linear-gradient(to top, black 0%, rgba(0, 0, 0, 0) 100%);
	border-image-slice: 375;
}

.fading-bottom-border {
	border-width: 0 0 60px 0;
	border-style: solid;
	-moz-border-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 90%, black
		100%);
	-webkit-border-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 90%,
		black 100%);
	border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 90%, black
		100%);
	border-image-slice: 100;
	z-index: 15;
}

.ipk-fade {
	background: rgb(3, 92, 117);
	/* For browsers that do not support gradients */
	background: -webkit-linear-gradient(left top, rgb(3, 92, 117),
		rgb(59, 140, 163)); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(bottom right, rgb(3, 92, 117),
		rgb(59, 140, 163)); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(bottom right, rgb(3, 92, 117),
		rgb(59, 140, 163)); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to bottom right, rgb(3, 92, 117),
		rgb(59, 140, 163)); /* Standard syntax */
}

.index-text {
	color: rgb(3, 92, 117);
	font-size: 48px;
	text-align: center;
	font-family: "Hind", "Avenir", "Helvetica", arial;
	font-weight: 700;
	margin-bottom: 5vh;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
}

.ipk-blue {
	color: rgb(3, 92, 117);
}

.ipk-light-blue {
	color: rgb(59, 140, 163);
}

.transparent-gray {
	background: rgba(240, 240, 240, 0.9);
}

.description_more {
	display: none;
	text-align: left;
	padding-left: 10%;
	padding-right: 10%;
}

.light-gray {
	background-color: rgb(240, 240, 240);
}

blockquote {
	margin: 1.5em 10px;
	padding: 0.5em 10px;
	quotes: "\201C" "\201D" "\2018" "\2019";
}

blockquote:before {
	color: #ccc;
	content: open-quote;
	font-size: 4em;
	line-height: 0.1em;
	margin-right: 0.25em;
	vertical-align: -0.4em;
}

blockquote:after {
	color: #ccc;
	content: close-quote;
	font-size: 4em;
	line-height: 0.1em;
	margin-left: 0.25em;
	vertical-align: -0.4em;
}

blockquote p {
	display: inline;
}

.faq-answer {
	display: none;
	line-height: 2;
	padding: 10px;
	text-align: justify;
}

.faq-question {
	width: 80%;
	font-size: 16px;
	color: gray;
	text-align: center;
	margin: auto;
}

.faq-button {
	padding: 10px;
	letter-spacing: 1px;
	font-size: 16px;
	color: black;
	width: 100%;
	background-color: rgb(254, 254, 254);
	border: 1px slategray solid;
	border-radius: 5px;
	cursor: pointer;
}

.faq-button:hover {
	background-color: rgb(244, 244, 244);
}

.faq-button:focus {
	background-color: rgb(244, 244, 244);
}

.news-item {
	border-width: 2px;
	border-color: white;
	border-style: outset;
	padding-left: 10px;
	margin-top: 10px;
	cursor: pointer;
	font-weight: 200;
}

.subscription-item:hover {
	background-color: gainsboro;
}

.card {
	width: 80%;
	margin: auto;
	background-color: rgb(240, 240, 240);
	margin-top: 20px;
	border-radius: 10px;
	margin-bottom: 5vh;
	box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
}

.color-block {
	width: 100%;
	margin: auto;
	height: 60vh;
	top: -10vh;
	position: absolute;
	z-index: -1;
	background: rgb(3, 92, 117);
	/* For browsers that do not support gradients */
	background: -webkit-linear-gradient(left top, rgb(3, 92, 117),
		rgb(59, 140, 163)); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(bottom right, rgb(3, 92, 117),
		rgb(59, 140, 163)); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(bottom right, rgb(3, 92, 117),
		rgb(59, 140, 163)); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to bottom right, rgb(3, 92, 117),
		rgb(59, 140, 163)); /* Standard syntax */
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	-o-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
}

@media ( max-width : 1020px) {
	.color-block {
		top: -5vh;
		height: 35vh;
	}
}

.signup_item {
	display: inline-block;
	width: 25%;
	margin: auto;
	text-align: center;
	padding-top: 5vh;
	padding-bottom: 5vh;
	font-family: "Hind", "Avenir", "Helvetica", arial;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	margin-left: 4%;
	margin-right: 4%;
}

.signup_paragraph {
	margin-left: 0;
	margin-right: 0;
}

@media ( max-width : 1020px) {
	.signup_paragraph {
		margin-left: 15%;
		margin-right: 15%;
	}
}

.signup_header {
	font-size: 24px;
}

@media ( max-width : 1020px) {
	.signup_header {
		font-size: 48px;
	}
}

#signup_banner {
	text-align: center;
	padding-top: 10vh;
}

@media ( max-width : 1020px) {
	.signup_item {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
		font-size: 32px;
	}
}

.company_search_box {
	width: 300px;
	font-size: 18px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: lighter;
	border: 3px solid lightslategrey;
	padding: 10px;
	margin-top: 5vh;
}

@media ( max-width : 1020px) {
	.company_search_box {
		width: 80%;
		font-size: 42px;
	}
}

.index-email-input {
	width: 300px;
	font-size: 18px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: lighter;
	border: 2px solid lightslategrey;
	padding: 10px;
	margin-top: 5vh;
	border-radius: 5px;
}

@media ( max-width : 1020px) {
	.index-email-input {
		width: 80%;
		font-size: 42px;
	}
}

.input_box {
	width: 300px;
	font-size: 18px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: lighter;
	padding: 10px;
	border-radius: 5px;
}

@media ( max-width : 1020px) {
	.input_box {
		width: 60%;
		font-size: 42px;
	}
}

.chart {
	width: 100%;
}

#faq-section {
	padding-top: 10vh;
}

.input_button {
	margin-left: 10px;
	font-size: 16px;
	background-color: slategray;
	font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, sans-serif;
	padding: 10px;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	font-weight: 600;
	border-radius: 5px;
	border: 2px slategray solid;
	cursor: pointer;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
}

.input_button:hover {
	box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0
		rgba(0, 0, 0, 0.19);
}

@media ( max-width : 1020px) {
	.input_button {
		font-size: 38px;
		width: 83%;
		margin-left: 0px;
		margin-top: 15px;
	}
}

.index-legend {
	text-align: left;
	font-weight: 300;
	font-size: 24px;
	font-family: Montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;
	border-bottom: 2px slategray double;
	width: 100%;
	margin-bottom: 20px;
}

.text {
	font-size: 18px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: lighter;
}

@media ( max-width : 1020px) {
	.text {
		font-size: 36px;
	}
}

.text-smaller {
	font-size: 18px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: lighter;
}

@media ( max-width : 1020px) {
	.text-smaller {
		font-size: 24px;
	}
}

#mobile-demo-table {
	display: none;
}

@media ( max-width : 1020px) {
	#mobile-demo-table {
		display: table;
	}
}

#desktop-demo-table {
	display: table;
}

@media ( max-width : 1020px) {
	#desktop-demo-table {
		display: none;
	}
}

.color-block.open {
	top: 0vh;
}

.card-icon {
	position: absolute;
	top: 30vh;
	width: 100%;
}

@media ( max-width : 1020px) {
	.card-icon {
		top: 15vh;
	}
}

.card-body {
	width: 100%;
	padding-top: 30vh;
	padding-bottom: 10vh;
	min-height: 47vh;
}

@media ( max-width : 1020px) {
	.card-body {
		padding-top: 15vh;
	}
}

.top-nav-bar {
	font-weight: lighter;
	word-spacing: 5px;
	text-align: center;
	color: white;
	font-size: 20px;
	width: 100%;
	margin: auto;
	top: -10vh;
	position: absolute;
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	-o-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
}

.top-nav-bar.open {
	top: 2vh;
}

@media ( max-width : 1020px) {
	.top-nav-bar {
		top: -5vh;
	}
}

.ipk-full-icon {
	vertical-align: middle;
	left: 33%;
	top: 12vh;
	max-width: 33%;
	overflow: visible;
	position: absolute;
}

@media ( max-width : 1020px) {
	.ipk-full-icon {
		top: 7vh;
	}
}

.loader {
	border: 4px solid #f3f3f3; /* Light grey */
	border-top: 4px solid #3498db; /* Blue */
	border-radius: 50%;
	width: 20px;
	height: 20px;
	animation: spin 1s linear infinite;
	margin: auto;
}

@
keyframes spin { 0% {
	transform: rotate(0deg);
}

100%
{
transform


:rotate(360deg)


;
}
}
.nav-bar {
	position: fixed;
	float: left;
	top: 30vh;
	border-radius: 10px;
	left: -50px;
}

.nav-item {
	height: 100px;
	width: 100px;
	z-index: 10;
	cursor: pointer;
	background-size: contain;
	opacity: .5;
	background-color: rgb(240, 240, 240);
}

.nav-item-search {
	height: 100px;
	z-index: 10;
	background-color: rgb(240, 240, 240);
}

.nav-item:hover {
	opacity: 1;
}

/* NAV ICON */
#nav-icon {
	max-height: 8vh;
	max-width: 40px;
	position: relative;
	margin: 5px auto;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	-o-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	cursor: pointer;
	height: 30px;
}

#nav-icon span {
	display: block;
	position: absolute;
	height: 4px;
	width: 100%;
	background: white;
	border-radius: 9px;
	opacity: 1;
	left: 0;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	-o-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
}

#nav-icon span:nth-child(1) {
	top: 0px;
}

#nav-icon span:nth-child(2), #nav-icon span:nth-child(3) {
	margin-top: 12px;
}

#nav-icon span:nth-child(4) {
	margin-top: 24px;
}

#nav-icon.open span:nth-child(1) {
	margin-top: 4px;
	width: 0%;
	/* top: 18px;
  width: 0%;
  left: 50%; */
}

#nav-icon.open span:nth-child(2) {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

#nav-icon.open span:nth-child(3) {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

#nav-icon.open span:nth-child(4) {
	margin-top: 24px;
	width: 0%;
	left: 50%;
}

.dot-container {
	margin: 40px;
	display: flex;
	justify-content: center;
}

.dot {
	border: 2px solid rgb(3, 92, 117);
	border-radius: 50%;
	cursor: pointer;
	height: 15px;
	margin: 0 8px;
	width: 15px;
}

@media ( max-width : 1020px) {
	.dot {
		height: 30px;
		margin: 0 16px;
		width: 30px;
	}
}

.dot:hover {
	background-color: gray;
}

.dot.focus {
	background-color: rgb(3, 92, 117);
	outline: none;
}