@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700');

body, html {
	font:300 16px/1.5em 'Open Sans', Verdana, sans-serif;	
}
.font-museo {
	font-family: museo, 'Open Sans', serif;
}
.font-300 {
	font-weight:300
}
.font-700 {
	font-weight:700;
}
.pt-10 {
	padding-top:10px;
}

h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;
}
*+h1, *+h2, *+h3, *+h4, *+h5, *+h6, *+p {
	margin-top: 1em
}

.mt {
	margin-top:1em;
}

/* flex */
.flex-cols {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    }
/* colors */
.color-blue { color:#20285c;}
.background-blue {background:#20285c;}
.color-navy { color:#142b3a;}
.background-navy {background:#142b3a;}
.color-orange { color:#ea4b38;}
.background-orange {background:#ea4b38;}
.color-lightblue { color:#2772b9;}
.background-lightblue {background:#2772b9;}
.color-green { color:#66bc46;}
.background-green {background:#66bc46;}
.color-white { color:#fff;}
.background-white {background:#fff;}
.color-black { color:#000;}
.background-black {background:#000;}
.color-light-grey {color:#e8e8eb;}
.background-light-grey {background:#e8e8eb;}

/* step-icons */
.step {
	position: relative;
	z-index: 100;
}
svg path{fill:#20285C;}
.step--icon {
	border:5px solid #20285C;
	background:#fff;
	border-radius:50%;
	width:100px;
	height:100px;
	padding:5px;
	position:absolute;
	top:-51px;
	transition:all 0.5s ease-in;
}
.step--content {
	position:relative;
	height:5px;
	margin-bottom:70px
}
#step-1 {
	left:0;
}
#step-2 {
	left:calc( 33.3333% - 25px);
}
#step-3 {
	right:calc( 33.3333% - 25px);
}
#step-4 {
	right:0;
}

#step-bar {background:#20285C;
position:absolute;
height:5px;
width:0;
top:-5px;
transition:all 0.5s ease-in;
}

#calculator_step_1 #step-1 { background: #ea4b38;}
#calculator_step_1 #step-1 svg path{fill:#fff;}


#calculator_step_2 #step-1 { background: #20285C;}
#calculator_step_2 #step-1 svg path{fill:#fff;}
#calculator_step_2 #step-2 { background: #ea4b38;}
#calculator_step_2 #step-2 svg path{fill:#fff;}	
#calculator_step_2 #step-bar {width:33.333333%;}

#calculator_step_3 #step-1, #calculator_step_3 #step-2 { background: #20285C;}
#calculator_step_3 #step-1 svg path, #calculator_step_3 #step-2 svg path{fill:#fff;}
#calculator_step_3 #step-3 { background: #ea4b38;}
#calculator_step_3 #step-3 svg path{fill:#fff;}	
#calculator_step_3 #step-bar {width:66.66666666%;}

#calculator_step_results #step-1, #calculator_step_results #step-2, #calculator_step_results #step-3 { background: #20285C;}
#calculator_step_results #step-1 svg path, #calculator_step_results #step-2 svg path, #calculator_step_results #step-3 svg path{fill:#fff;}
#calculator_step_results #step-4 { background: #ea4b38;}
#calculator_step_results #step-4 svg path{fill:#fff;}	
#calculator_step_results #step-bar {width:100%;}


/* header */
header {
	position:relative;
	border-bottom:5px solid #e8e8eb;
	background:#e8e8eb;
	padding-bottom:40px;
	min-height:375px;
	overflow:hidden;
}
header h1 {
	margin:60px 0;
	padding:20px;
	display:block;
	max-width:40%;
	text-align:left;
	font-weight:300;
	line-height:1.25em;
	font-size:36px;
}
.banner-image {
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	background-position:right center;
	background-size:cover;
	background-repeat:no-repeat;
	z-index:2;
	opacity: 0
	
}



.video-contian {
    position: absolute !important;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !Important;
    z-index:1;
}

video {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    min-height: 100%;
    min-width: 100%;
}


.header-content {
	position:relative;
	z-index:100;
}

.results-header {
	margin:60px 0;
	padding:40px 100px 40px 40px;
	display:inline-block;
	text-align:left;
	font-weight:300;
	line-height:1.25em;
	font-size:36px;
	background:#20285c;
	color:#fff;
	font-family:museo, 'Open Sans';
	position:relative;
	
}
.results-header-container {
	transition: all 0.75s ease-in;
	transform:translateX(200%);
	opacity:0;
}
.results-header-container.appear {
	transform:translateX(0);
	opacity:1
}
.results-header p {
	margin:.25em 0 ;
}
.main-industry {
	font-size:60px;
	font-weight:400;
}
.industry-icon {
	background:#fff;
	border:5px solid #20285c;
	position:absolute;
	width:150px;
	height:150px;
	right:-75px;
	top:calc( 50% - 75px );
	
}
/*footer*/
footer {
	padding:40px 0;
}
footer .logo {
	max-width:250px;
}

/* button styles */
.btn{
    position: relative;
    min-width: 150px;
    max-width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #ea4a37;
    text-align: center;
    text-decoration: none;
    font-family: museo, serif;
    font-size: 1em;
    line-height: 100%;
    color: #fff;
    padding: 0.5em .75em;
    transition: all .25s ease-in;
	white-space:normal;
	margin:5px auto;
	font-size:24px;
}


.btn:hover {
    background-color: #66bc46;
    color: #000;
}

/* main slider */

#calculator {
	padding:10px 0 40px 0;
}
/* Slide 2 */
#what-industry {
	padding-bottom:15px
}
#what-industry h3 {
	display:block;
	border-bottom:1px solid #cdcccc;
	text-align:center;
	padding:10px 0;
	margin-bottom:10px;
}

#what-industry a {
	padding:15px;
	color:#ffffff;
	display:block;
	border:5px solid #e8e8eb;
	font-weight:400;
	font-size:24px;
	background:#20285c;
	
}

#what-industry.active a {
	opacity:0.3;
}
#what-industry a:hover, #what-industry a.active {	
	background:#66bc46;
	text-decoration:none;
	color:#000;
	opacity:1;
	
}



#what-industry .flex-cols a {
	width:50%;
}

/* slide 3 */
.number {
border: 1px solid #e8e8e8;
padding:15px;
color:#000;
font-size:36px;
text-align:center;
width:100%
}
.field-question {
	padding:40px 0;
}
.slider-hints {
	font-size:16px;
}
#slide-3 .noUi-tooltip {
	font-size:30px;
	font-weight:700;
	background:#2772b9;
	border:none;
	border-radius:0;
	color:#fff;
	padding:10px 20px;
	transition: background 0.5s ease;
}

#slide-3 .noUi-tooltip:after{ 
  content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid;
    border-top-color: #2772b9;
    bottom: -7px;
    left: calc( 50% - 10px );
	transition: border-top-color 0.5s ease;
}

#slide-3 .noUi-handle:focus, 
#what-industry a:focus,
.vendor-list a:focus {
	outline:0
}

.noUi-tooltip span {
	display:block;
	font-weight:700;
	font-size:13px;
	line-height:1em;
	padding: 0 0 5px 0;
}


.slider {
	margin:85px 0 40px 0;
}
#slide-3 .noUi-target {
    background: #e5e9eb;
    border: 1px solid #606161;
    border-radius: 10px;
    height: 8px;
}

#slide-3 .noUi-horizontal .noUi-handle {
    width: 30px;
    height: 30px;
    left: -15px;
    top: -11px;
}

#slide-3 .noUi-handle {
    border: 0;
    border-radius: 20px;
    box-shadow: none;
    background: #2772b9;
	transition: background 0.5s ease;
}

#slide-3 .noUi-handle:before, #slide-3 .noUi-handle:after {
    display: none;
}
#slide-3 .less .noUi-tooltip {
	background:#ea4b38 !important;
}
#slide-3 .more .noUi-tooltip {
	background:#66bc46 !important;
}

#slide-3 .less .noUi-handle {
	background:#ea4b38 !important;
}
#slide-3 .more .noUi-handle {
	background:#66bc46 !important;
}

#slide-3 .less .noUi-tooltip:after{  
	border-top-color:#ea4b38 !important;
}
#slide-3 .more .noUi-tooltip:after {
	border-top-color:#66bc46 !important;
}
#slide-3 .noUi-marker-large {
	height:0;
	display:none;
}

#slide-3 .noUi-value-horizontal {
    -webkit-transform: translate3d(-50%, 16%, 0);
    transform: translate3d(-50%, 16%, 0);
    font-size: 24px;
}

/*Slide 4*/
.vendor-list a {
	display:block;
	width:25%;
	padding:10px;
	font-size:14px;
	background:red;
	border:10px solid #fff;
	text-align:center;
	color:#fff;
	background:#20285c;
	font-weight:300;
	
}
.vendor-list.active a {
	opacity:0.3;
}
.vendor-list a:hover, .vendor-list a.active {
	background:	#66bc46;
	text-decoration:none;
	opacity:1;
}
.vendor-list a img {
	display:block;
	width:80%;
	max-width:300px;
	margin:0 auto;
}
.vendor-list a span {
    display:block;
    height:30px
}

/* results page */
.results-page-1 h2 {
	margin-bottom: 50px;
	
}
/* results bars */
.bar {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
	margin:10px 0;
    }
	
.bar--header {
	width:20%;
	height:60px;
	padding-right:10px;
	text-align:right;
	display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    }
.bar--value-container {
	width:80%;
	height:60px;
    }

.bar--value {
	position:relative;
	width:100%;
	height:100%;
	padding-left:10px;
	display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
	justify-content: flex-start;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
	font-size:30px;
}
.bar--value span {
	position:relative;
	z-index:100;
}
.value--highlight {
	height:100%;
	position:absolute;
	top:0;
	left:0;
}
.bar-before .value--highlight {
	background:#cdcccc
}
.bar-after .value--highlight {
	background:#66bc46
}

.bar--indicators {
	position:relative;
	width:100%;
}
.bar--difference {
	border:3px solid #66bc46;
	border-top:0;
	height:15px;
	position:absolute;
	bottom:-18px;
	right:0;
}
.bar--difference--text {
    position: absolute;
    bottom: -45px;
    right: 0;
    font-size: 24px;
}
.bar-compare {
	padding-bottom:100px;
}

.box-compare-holder {
	text-align:center;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    }
	
.box-value {
	padding:20px;
	width:250px;
}
.box-value span {
    font-size: 60px;
    font-weight: 700;
    display: block;
    line-height: 1.25em;
}
.box-compare-link {height:60px;width:200px; margin-top:20px;position:relative}

.box-compare-link:after, .box-compare-link:before {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.box-compare-link:after {
	border-color: rgba(102, 188, 70, 0);
	border-left-color: #66bc46;
	border-width: 30px;
	margin-top: -30px;
}
.box-compare-link:before {
	border-color: rgba(255, 255, 255, 0);
	border-left-color: #ffffff;
	border-width: 37px;
	margin-top: -37px;
}
.box-compare-before .box-value {
	position:relative;
}
.box-compare-before .box-value:after, .box-compare-before .box-value:before {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	z-index:10;
}

.box-compare-before .box-value:after {
	border-color: rgba(232, 232, 235, 0);
	border-left-color: #e8e8eb;
	border-width: 30px;
	margin-top: -30px;
}
.box-compare-before .box-value:before {
	border-color: rgba(255, 255, 255, 0);
	border-left-color: #ffffff;
	border-width: 37px;
	margin-top: -37px;
}


/* bar animations */
.before-animate .bar-before .value--highlight {
	transform: translateX(-150%);
	transition: all 1s ease-in;
}

.bar-before .value--highlight {
	transform: translateX(0);
	transition: all 1s ease-in;
}

.before-animate .bar-before span {
	opacity: 0;
	transition: all 1s ease-in;
}
 .bar-before span {
	opacity: 1;
	transition: all 1s ease-in;
}

.after-animate .bar-after .value--highlight {
	transform: translateX(-150%);
	transition: all 1s ease-in;
}
.bar-after .value--highlight {
	transform: translateX(-0%);
	transition: all 1s ease-in;
}
.after-animate .bar-after span {
	opacity: 0;
	transition: all 1s ease-in;
}

.bar-after span {
	opacity: 1;
	transition: all 1s ease-in;
}

.savings-animate .bar--indicators {
	opacity: 0;
	transition: all 1s ease-in;
}
.bar--indicators {
	opacity: 1;
	transition: all 1s ease-in;
} 
.savings-animate .bar--value-container {
	overflow: hidden;
    } 	

/* PDF Form */

.flex-col-50 {
	width:50%; 
	padding:10px;
}
#pdf label {
	display: block;
	
	
}
#pdf input[type='text'], #pdf input[type='email'] {
	width:100%; 
	font-size: 24px;
	padding: 10px;
	text-align: center;
	border: 1px solid gray;
	
}
#pdf .full-width {
	padding: 10px;
}
#slide-6 {
	padding-bottom: 100px
	
}
#pdf label {
	font-weight: 400;
}
#pdf label.error {
	color: red;
	font-size: 14px;
}
.final-data {
    font-size:24px;
}
.slick-slide img.loading {
    display: none;
    margin: 0 auto;
}

/* tablet sub 1024 only */
@media (max-width:1024px){
header h1 {
    margin: 30px 0;
    padding: 15px;
    max-width: 50%;
    font-size: 28px;
}

header {
    min-height:275px;

}
.step--icon {
    width: 65px;
    height: 65px;
    top: -38px;
}
.h2, h2 {
    font-size: 26px;
}
#what-industry a {
    padding: 9px;
    font-size: 18px;
}
.field-question {
    padding: 0 0 40px 0;
}

.vendor-list a {
    padding: 10px;
    font-size: 13px;
}

.results-header {
    font-size: 22px;
}
.main-industry {
    font-size: 40px;
    font-weight: 400;
}
#pdf label br {
    display:none;
}
}

/* mobile only */
@media (max-width:767px){
h1 {
    font-size:24px;
}
    
.text-center-xs {
	text-align:center;
}
.image-center-xs {
	display:block;
	margin:0 auto;
}

header h1 {
    margin: 35px 0;
    padding: 10px;
    max-width: 100%;
    font-size: 24px;
}

.step {
    padding: 0 10px;
}
.step--icon {
    width: 50px;
    height: 50px;
    top: -28px;
    border: 2px solid #20285C;
}
#step-2 {
    left: calc( 33.3333% - 15.5px);
}
#step-3 {
    right: calc( 33.3333% - 15.5px);
}
header {
    min-height: 245px;
    padding-bottom: 0;

}

.step--content {
    margin-bottom: 25px;
}
.h2, h2 {
    font-size: 18px;
}
#slide-2 .flex-cols {
    display:block;
}

#what-industry .flex-cols a {
    width: 100%;
}

#what-industry a {
    padding: 5px 10px;
    font-size: 14px;
}
.slider-hints {
    font-size: 14px;
}
.field-question {
    padding: 0 15px 30px 15px;
    line-height:1em;
}
.h3, h3 {
    font-size: 18px;
}

.number {
    border: 1px solid #e8e8e8;
    padding: 10px;
    color: #000;
    font-size: 20px;
    text-align: center;
    width: 100%;
}
#slide-3 .noUi-tooltip {
    font-size: 20px;
    padding:10px;
}
.noUi-tooltip span {
    font-weight: 400;
    font-size: 10px;
}
#slide-3 .noUi-value-horizontal {
    font-size: 20px;
}
.vendor-list a {
    padding: 5px;
    font-size: 12px;
    width: 50%;
}
.bar {
    display:block;
}
.bar--header {
    width: 100%;
    text-align: center;
    padding: 0;
    height: auto;
    display: block;
}

.bar--value-container {
    width: 100%;
}

.bar--difference--text {
    font-size: 16px;
}

.results-page-1 h2 {
    margin: 2em 0 0 0;
}
.bar-compare h2 {
    font-weight:700;
}
.box-compare-holder {
display:block;
}

.box-compare-link {
    display: none;
}
.box-value {
    padding: 10px;
    width: 100%;
}

.box-compare-before .box-value:after, .box-compare-before .box-value:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.box-compare-before .box-value:after {
	border-color: rgba(136, 183, 213, 0);
	border-top-color: #e8e8eb;
	border-width: 30px;
	margin-left: -30px;
	margin-top: 0;
}
.box-compare-before .box-value:before {
    border-top-color: #ffffff;
	border-width: 36px;
	margin-left: -36px;
    margin-top: 0;
    
}
.box-compare-after >  span, .box-compare-before > span {
    position:relative;
    z-index:10000;
    display:block;
}
.box-compare-after >  span {
    padding:5px 0 0 0;
}


.results-header {
    font-size: 20px;
    margin: 20px 0 60px 0;
    padding: 10px 10px 45px 10px;
    display: block;
    text-align: center;
    line-height: 1.15em;
}
.industry-icon {
    background: #fff;
    border: 2px solid #20285c;
    position: absolute;
    width: 80px;
    height: 80px;
    top: auto;
    right: calc( 50% - 35px );
    bottom: -35px;
}
.main-industry {
    font-size: 30px;
    font-weight: 400;
    line-height: 1.25em;

}
#slide-6 .flex-cols {
    display:block;
}
.flex-col-50 {
    width: 100%;
    padding: 10px;
}

#slide-6 h1 {
    font-size:24px;
}
.final-data {
    font-size:16px;
}
}

/* Case Study
   ----------------- */
.case-study {
    margin-top: 40px;
}
.case-study .case-study-item {
    margin-bottom: 50px;
}
.case-study .case-study-item img {
	margin: auto;
	border:1px solid #999;
}
.case-study .case-study-item h3 {
	margin-bottom: 1em;
}