@import url("https://use.typekit.net/sxe1sjo.css");

*{
	font-family: aktiv-grotesk, sans-serif;
	font-weight: 400;
	font-style: normal;
	color:#4A4A4A;
}
*, *:before, *:after {
  box-sizing: border-box;
}

html,
body {
	height: 100%;
	position: relative;
}

body.screen-three {
	background-color: #E7E7E7;
}

main{
	min-height: 100vh; /* will cover the 100% of viewport */
	overflow: hidden;
	display: block;
	position: relative;
	padding-bottom: 45px; /* height of your footer */
   }

footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	background-color: #243746;
	text-align: center;
	color: #FFF;
	padding: 12px 0;
}

body {
	margin: 0;
}

#screen-one,
#screen-two,
#screen-three {
	display: none;
}

#screen-one.active-screen,
#screen-two.active-screen,
#screen-three.active-screen {
	display: block;
}

header {
	background-color: #243746;
	padding: 28px 0;
}

header .container {
	display: flex;
	align-items: center;
}

header img {
	width: 184px;
}

header .button {
	margin-left: auto;
}

button,
.button {
	appearance: none;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .88px;
	padding: 12px 24px 10px;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: none;
	color: #FFF;
	background-color: #EF3D29;
	text-decoration: none;
	cursor: pointer;
	border-bottom: 5px solid #C22F1E;
	text-transform: uppercase;

	webkit-transition: .1s opacity linear;
	-moz-transition: .1s opacity linear;
	-o-transition: .1s opacity linear;
	transition: .1s opacity linear;
	-webkit-backface-visibility: hidden;
}

button:hover,
.button:hover {
	opacity: .8;
}

form input[type="submit"]{
	appearance: none;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .88;
	padding: 12px 24px;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: none;
	color: #FFF;
	background-color: #EF3D29;
	text-decoration: none;
	cursor: pointer;

	webkit-transition: .1s opacity linear;
	-moz-transition: .1s opacity linear;
	-o-transition: .1s opacity linear;
	transition: .1s opacity linear;
	-webkit-backface-visibility: hidden;
}

form input[type="submit"]:hover {
	opacity: .8;
}

.container {
	max-width: 1440px;
	padding: 0 24px;
	margin: 0 auto;
}

.callout {
	background-color: #E7E7E7;
	padding: 64px 0;
}

.callout h2 {
	max-width: 780px;
	color: #EF3D29;
	text-align: center;
	margin: 0 auto 24px;
	font-size: 42px;
	line-height: 52px;
	letter-spacing: .16px;
	font-weight: 700;
}

.callout p {
	/*max-width: 815px;*/
	max-width: 705px;
	margin: 0 auto;
	text-align: center;
	font-weight: 300;
	font-size: 16px;
	line-height: 23px;
	letter-spacing: .05px;
	color: #243746;
}

.callout p:last-child {
	margin-top: 12px;
}

.inputs {
	padding: 64px 0;
	max-width: 606px;
	margin: 0 auto;
}

.input-row {
	display: flex;
	align-items: center;
	margin: 0 0 48px 0;
}

.input-row label {
	display: flex;
	flex: 1 0 400px;
	align-items: center;
}

.input-row label span {
	font-size: 20px;
	line-height: 26px;
	letter-spacing: .07px;
	color: #EF3D29;
	font-weight: 700;
	padding: 0 24px;
}

.input-row img {
	width: 55px;
	flex: 0 0 auto;
}

.input-row input[type="number"] {
	width: 128px;
	height: 53px;
	border: solid 1px #979797;
	border-radius: 3px;
	text-align: center;
	font-size: 30px;
	letter-spacing: .11px;
	font-weight: 700;
}

.input-row input[type="number"]::-webkit-input-placeholder { /* Edge */
	color: #D8DCE5;
}

.input-row input[type="number"]:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color: #D8DCE5;
}

.input-row input[type="number"]::placeholder {
	color: #D8DCE5;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.calculate-container {
	text-align: center;
}

.center-container {
	padding: 80px 0 100px;
}

.center-container img {
	display: block;
	margin: 0 auto;
	max-width: 218px;
}

.center-container h3 {
	text-align: center;
	color: #EF3D29;
	font-weight: 700;
	font-size: 37px;
	letter-spacing: .13px;
	line-height: 52px;
	margin: 0;
}

#screen-three.active-screen .container {
	display: flex!important;
	padding: 0;
	align-items: center;
	margin-top: 48px;
	margin-bottom: 48px;
}

.left {
	width: 40%;
	padding: 24px 42px 48px 48px;
	align-self: flex-start;
	background-color: #E7E7E7;
}

.left h3 {
	margin: 0;
	color: #EF3D29;
	font-size: 27px;
	line-height: 35px;
	letter-spacing: .1px;
	font-weight: 700;
	margin: 0 0 12px;
}

.left p {
	font-size: 16px;
	font-weight: 300;
	letter-spacing: .05px;
	line-height: 23px;
	color: #243746;
	margin: 0 0 12px 0;
}

.left p + p {
	margin-bottom: 12px;
}

.left ul {
	margin-bottom: 24px;
	margin-top: 0;
}

.left li {
	font-size: 16px;
	font-weight: 300;
	letter-spacing: .05px;
	line-height: 23px;
	color: #243746;
}

.right {
	width: 60%;
	padding: 24px 48px 48px;
	background-color:#FFF;
}

.answers {
	border-bottom: solid 2px #979797;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 0 0 12px 0;
	color: #4A4A4A;
}

.answers span {
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	color: #4A4A4A;
}

.savings,
#savings {
	line-height: 1.2;
	color: #EF3D29;
	font-size: 55px;
	letter-spacing: .03px;
	font-weight: 700;
	margin: 0 0 12px 0;
}

.graph-back {

}

.line {
	border-top: solid 1px #333;
	padding: 0 0 75px 0;
	position: relative;
}

.tier-two .line {
	padding: 0 0 140px 0;
}

.line .value {
	font-size: 12px;
	font-weight: bold;
	color: #545454;
	display: block;
	background-color: #FFF;
	width: 38px;
	position: absolute;
	top: -9px;
	left:-38px;
	padding: 0 6px 0 0;
	text-align: right;
}


.graph {
	position: relative;
	margin-top: 74px;
}

.line:last-child {
	padding: 0 0 0 0;
}

.graph-bars {
	display: flex;
	position: absolute;
	width: 100%;
	height: 100%;
	bottom: 0;
	align-items: flex-end;
}

.left-bars,
.right-bars {
	margin: 0 24px;
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: end;
	flex-direction: column-reverse;
}

.left-bars {
	width: 50%;
}

.right-bars {
	width: 50%;
}

.graph-bar {
	background-color: salmon;
	height: 0px;
	transition: all ease-in-out 2s;
}

.graph-bar[data-block-id="RapidDeploySub"] .value{
	padding: 12px;
}

.graph-bar span {
	color: #FFF;
	display: block;
	padding: 2px 3px 0 10px;
	font-size: 14px;
	line-height: 17px;
	font-weight: 700;
	letter-spacing: .05px;
}

.l-comp-label,
.r-comp-label {
	position: absolute;
	bottom: -30px;
	text-align: center;
	width: 100%;
	font-weight: 700;
	font-size: 15px;
	color: #4A4A4A;
}

.r-comp-label {
	color: #EF3D29;
}

/* bar specific colors */


[data-block-id="Software Cost"] {
	background-color: #008DB1;
}

[data-block-id="Interfaces"] {
	background-color: #422DA1;
}

[data-block-id="Annual Maintenance"] {
	background-color: #00A5FF;
}

[data-block-id="Version Upgrades"] {
	background-color: #009444;
}

[data-block-id="Server Costs"] {
	background-color: #151F6D;
}

[data-block-id="Agency Support Costs"] {
	background-color: #006838;
}

[data-block-id="Maintenance Services"] {
	background-color: #00A5FF;
}

[data-block-id="GIS Map Roll Costs"] {
	background-color: #1B365D;
}

[data-block-id="RapidDeploySub"] {
	background-color: #243746;
}
[data-block-id="gisnic"] {
	background-color:#5C8CB3;
}

[data-block-id="Legacy"] {
	opacity: 0;
	margin-bottom: 18px;
	width: 100%;
	text-align: center;
	background-color: transparent;
	padding: 0;

}

[data-block-id="Legacy"].show {
	opacity: 1;
}

[data-block-id="Legacy"] .value {
	color: #EF3D29;
	font-weight: bold;
	font-size: 16px;
	padding: 0;
}

#form-overlay {
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	position: fixed;
	background-color: rgba(0,0,0,0.8);
}

#form-overlay.hidden {
	position: relative;
	display: none;
}

.fo-content {
	position: absolute;
	width: 474px;
	max-width: 90%;
	transform: translate(-50%,-50%);
	background-color: #FFF;
	left: 50%;
	top: 50%;
	padding: 32px;
	max-height: 90vh;
}

#close-form {
	position: absolute;
	color: #EF3D29;
	font-size: 24px;
	right: 15px;
	top: 2px;
	cursor: pointer;
}

.fo-content h3 {
	color: #EF3D29;
	font-weight: 700;
	font-size: 18px;
	margin-top: 0;
}

form input[type="text"],
form input[type="email"] {
	display: block;
	width: 100%!important;
	border: solid 1px #979797;
	margin: 0 0 12px 0;
	color: #4A4A4A;
	font-size: 16px;
	border-radius: 3px;
	padding: 10px;
}

form label {
	display: block;
	color: #4A4A4A;
	font-size: 14px;
	font-weight: 700;
	margin: 0 0 6px 0;
}

form input[type="submit"] {
	background-color: #EF3D29;
	color: #FFF;

}

.footer {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 1rem;
	background-color: #efefef;
	text-align: center;
}


/*
	* validation .input-error changes
*/

.input-error {
	position: relative;
	display: none;
	padding: 18px 16px;
	background-color: #F8E753;
	margin: 0 0 24px 0;
}

.active .input-error {
	display: block;
}

.input-error::after{
    content: '';
    position: absolute;
    right: 57px;
    top: 100%;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 12px solid #F8E753;
    clear: both;
}

.input-error p {
	margin: 0;
	font-size: 16px;
	line-height: 20px;
	letter-spacing: 0.0714286px;
}


/*
	* .reminder-container new css
*/

.reminder-container {
	display: flex;
	align-items: center;
	margin: 0 0 48px 0;
}
.reminder-container span {
	width: 55px;
	flex: 0 0 auto;
}
.reminder-container img{
	max-width: 100%;
}
.reminder-container div {
	padding: 0 0 0 24px;
}
.reminder-container div p{
	font-style: italic;
	font-weight: normal;
	font-size: 15px;
	line-height: 23px;
	letter-spacing: 0.05px;
	color: #243746;
}
.reminder-container a{
	color: #EF3D29;
	font-style: italic;
	text-decoration: none;
}

/*
	* .graph-totals new css
*/
.graph-totals {
	display: flex;
	padding-top: 16px;
}

.graph-totals div {
	width: 50%;
	text-align: center;
}

.graph-totals span {
	color: transparent;
	font-size: 15px;
	line-height: 19px;
	text-align: center;
	letter-spacing: 0.0535714px;
	transition: all ease-in-out 333ms;
}

.graph-totals.show span{
	color: #EF3D29;
}



/*
	* .legend new css
*/

.legend {
	background: #EDEDED;
	padding: 24px;
	margin-top: 24px;
}

.legend .columns {
	margin-left: -24px;
	display: flex;
}

@media only screen and (max-width: 1274px) {
	.legend .columns {
		flex-wrap: wrap;
	}
}

.legend .columns div {
	padding-left: 24px;
	flex: 1 1 33%;
}
@media only screen and (max-width: 585px) {
	.legend .columns div  {
		width: 100%;
		flex: 0 auto;
	}
}
.legend .columns div:first-child {
	flex: 0 1 auto;
}
@media only screen and (max-width: 1274px) {
	.legend .columns div:first-child {
		width: 100%;
	}
}

.legend .columns div:first-child span {
	font-weight: bold;
	text-transform: uppercase;
	font-size: 13px;
	line-height: 17px;
}

.legend span {
	display: block;
	margin: 0 0 12px 0;
	font-size: 13px;
	line-height: 17px;
}

.legend strong {
	font-weight: bold;
}



/*
	* hubspot form
*/

#hs-form-iframe-0 {
	width: 100%!important;
}

.hs-input.error {
	border: 1px solid #EF3D29;
}

@media only screen and (max-width: 1248px) {
	.graph-bar span {
		font-size: 12px;
		line-height: 14px;
	}
}


@media only screen and (max-width: 1085px) {
	.in-page-view .savings,
	.in-page-view #savings {
		font-size: 52px;
		line-height: 52px;
	}
	.in-page-view #screen-three .container {
		padding: 0;
	}
}

@media only screen and (max-width: 937px) {
	.in-page-view #screen-three.active-screen .container {
		display: block!important;
		margin-top: 0;
		margin-bottom: 0;
	}
	.in-page-view .left {
		width: 100%;
	}

	.in-page-view .right {
		width: 100%;
		padding: 48px 0px;
	}

	.in-page-view .answers {
		margin-left: 12px;
	}
	.line .value {
		left: auto;
	}
	.graph-bars {
		width: 90%;
		left: 5%;
	}
	.graph-totals {
		width: 90%;
		margin-left: 43px;
	}
}

@media only screen and (max-width: 604px) {
	.fo-content {
		max-height: 87vh;
		overflow: scroll;
	}
	.callout h2 {
		font-size: 32px;
		line-height: 38px;
	}
	.input-row {
		display: block;
	}

    .input-row label {
		display: block;
		text-align: center;
	}

	.input-row img {
		display: block;
		margin: 0 auto 10px;
	}

	.input-row label span {
		display: block;
		padding: 0;
		max-width: 300px;
		margin: 0 auto;
	}

	.input-row input[type="number"] {
		display: block;
		margin: 10px auto 0;
	}

	.center-container {
		padding: 48px 0 64px;
	}

	.in-page-view .left {
		padding: 48px 24px;
	}

	.in-page-view .left-bars,
	.in-page-view .right-bars {
		margin: 0 0;
	}

	.in-page-view .left-bars {
		padding-left: 6px;
	}
	.in-page-view .right-bars {
		padding-left: 6px;
		padding-right: 26px;
	}

	.in-page-view .graph-bars {
		left: 43px!important;
	}
	.graph-totals div:first-child {
		padding-top: 12px;
		padding-right: 12px;
	}
	.graph-totals div:last-child {
		padding-top: 12px;
		padding-left: 12px;
	}
}

@media only screen and (max-width: 458px) {
	.in-page-view header .container {
		display: block;
		text-align: center;
	}

	.in-page-view header img {
		display: block;
		margin: 0 auto;
	}

	.in-page-view header .button {
		display: inline-block;
		margin: 18px 0 0 0;
	}

	[data-block-id="Legacy"] .value{
		font-size: 12px;
	}
}


/* report export*/

#report-export {
	background-color: #D9D8D6;
	position: relative;
	width: 1187px;
}

#report-export * {
	transition: none!important;
}

#report-export main {
	background-color: #D9D8D6;
}

#report-export .graph-bar {
	transition: none!important;
}

#report-export #screen-three {
	padding-bottom: 66px;
}


#report-export header .button,
#report-export #restart,
#report-export button {
	display: none;
}

.set-height .line {
	padding: 0 0 70px 0;
}

.set-height .line:last-child {
	padding-bottom: 0;
}

#get-a-copy.inactive {
	pointer-events: none;
	opacity: .8;
	cursor: default;
}