/* body
================================================== */

body {
	font-family: "myriad-pro",arial,sans-serif;
	font-style: normal;
	font-weight: 400;
	color: #333;
	background: #666666;
}


/*  Flex overrides
================================================== */

.flex-row {
  margin-left: 0;
  margin-right: 0;
 
}

.flex-row {
	/*margin-bottom: 20px;*/
	position: relative;
}

.flex-row .flex-row {
	margin-bottom: 0;
}

.flex-row .center {
	text-align: center;
}


/*  New ETK landing page
================================================== */

.relative {
	position: relative;
	/*background: rgba(255,255,255,.3);*/
}

.container {
	box-sizing: border-box;
	padding: 20px 40px;

	/*
	max-width: 1080px;
	*/

	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
}

.divider-container {
	padding: 20px 30px;
}

ul,li {
	list-style-type: none;
	margin-left: 0;
	padding-left: 0;
	margin: 0;
}

a, a:link, a:hover, a:visited {
	color: #333;
}

h1, h2, h3 {
	font-weight: 400;
}

p {
	font-size: 18px;
	font-weight: 300;
	line-height: 1.5em;
}

/*  buttons
================================================== */

a.button {
	display: inline-block;
	background: #f26522;
	padding: 15px 30px;
	color: #fff;
	text-transform: uppercase;
	border-radius: 4px;
	border: 1px solid #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: 20px;
}


/*  Sections
================================================== */

main {
	width: 100%;
}

section {
	box-sizing: border-box;
	position: relative;
}

section#header {
	position: relative;
	overflow: hidden;
	width: 100%;
}

section#nav {
	box-sizing: border-box;
	position: absolute;
	top: 0px;
	z-index: 20;
	width: 100%;
	padding-top: 20px;
}


section#nav div {
	display: flex;
	align-items: center;
}

section#nav div.logo {
	width: 250px;
}

section#nav div.nav {
	padding-left: 30px;
}

section#nav div.logo img {
	max-width: 100%;
}

section#nav ul li {
	display: inline-block;
	margin-right: 20px;
}

section#nav ul li a {
	text-decoration: none;
	font-size: 20px;
	text-transform: uppercase;
}

section#hero-image {
	position: absolute;
	right: 0px;
	top: 0;
	z-index: 5;
}

section#hero-image div.background-image {
	
}

section#hero-image div.cropped-image {
	display: none;
}

div.diagonal-on-left {
	position: absolute;
	top: 0;
	left: 0;
	width: 0; 
  	height: 0; 
  	border-top: 650px solid transparent;
  	border-bottom: 650px solid transparent;
    border-left: 650px solid #50b848;
}

section#hero {
	overflow: hidden;
	height: 650px;
	background: #50b848;
}

section#hero.form {
	height: auto;
}

section#hero div.container {
	position: relative;
	z-index: 10;
}

section#hero div.v-center {
	height: 630px;
	display: table-cell;
	vertical-align: middle;
	box-sizing: border-box;
}

section#hero h1 {
	margin: 90px 0 20px 0;
	color: #fff;
	font-weight: 400;
	font-size: 55px;
}

section#hero h2 {
	margin: 0 0 20px 0;
	color: #333333;
	font-weight: 400;
	text-transform: uppercase;
	font-size: 32px;
}

section#hero div.centering-frame {
	display: inline-block;
	max-width: 50%;
	opacity: 0;
}

section#hero h1, 
section#hero h2, 
section#hero p {
	/*max-width: 80%;*/
	width: 100%;
	
}

p.cta {
	margin-top: 30px;
}



/*  As form
================================================== */

section#nav.standalone {
	position: relative;
	background: #50b848;
	padding-bottom: 20px;
}

div.form {
	padding-top: 20px;
	
}

div.pd-form {
	padding: 20px 30px;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	width: 100%;
	background: #e9f7e7;
	box-sizing: border-box;
}

section.with-form div.content {
	text-align: left;
}

section.with-form.standard div.content {
	padding-right: 30px;
}

section.with-form.standard div.content p {
	font-size: 18px;
}


main section div.container.no-divider {
	border-bottom: 0;
}

/*  Glance
================================================== */

section.glance {
	background: #333333;
	overflow: hidden;	
}

section#glance-image {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 5;
	width: 400px;
}

section#glance-image img {
	
}

section.glance div.container {
	position: relative;
	background: url(/assets/_res/images/salute-with-corner.jpg) top left no-repeat;
	text-align: center;
	height: 365px;
}

section.glance div.container div.images {
	display: inline-block;
	margin: 0 auto;
	float: right;
}

section.glance div.container div.images div.image:first-child {
	margin-right: 120px;
}

section.glance div.container div.images div.image {
	vertical-align: middle;
	margin-right: 60px;
	padding-top: 30px;
}

section.glance div.container div.images div:first-child {
	margin-right: 60px;
}

section.glance div.container div.images div {
	display: inline-block;
}

div.diagonal-on-right {
	position: absolute;
	top: 0;
	right: 0;
	width: 0; 
  	height: 0; 
  	border-top: 365px solid transparent;
  	border-bottom: 365px solid transparent;
    border-right: 365px solid #333333;
}


/*  Leadin
================================================== */

section.leadin {
	padding: 40px 0;
}

section.leadin div.container {
	text-align: center;
	/*border-bottom: 1px solid #a8dca4;
	padding-bottom: 40px;*/
}

div.divider {
	border-bottom: 1px solid #a8dca4;
	font-size: 0px;
	box-sizing: border-box;
	width: 100%;
	display: inline-block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

section.leadin h2 {
	font-size: 48px;
	margin-top: 0;
	position: relative;
}

section.leadin h3 {
	font-size: 28px;
	margin-top: 0;
	font-weight: 300;
	line-height: 1.5em;
}


section.leadin p {
	font-size: 20px;
	margin-top: 0;
}

div.inside {
	width: 80%;
	display: inline-block;
	margin: 0 auto;
}


/*  Value Props
================================================== */

main {
	background: #fff;
}

section.value-prop {
}


section.value-prop div.container {
	box-sizing: border-box;
	position: relative;
	height: 540px;
	/*border-bottom: 1px solid #a8dca4;*/
	padding-bottom: 40px;
	padding-top: 40px;
	overflow: hidden;
}

section.value-prop div.content {
	box-sizing: border-box;
	width: 400px;
	text-align: right;
}

section.value-prop div.content h2 {
	margin: 0 0 20px 0;
	font-size: 35px;
	font-weight: 400;
	line-height: 1.2em;
}

section.value-prop div.content p {
	font-size: 20px;
}

section.value-prop div.content ul li {
	font-size: 20px;
	margin-bottom: 15px;
	font-weight: 300;
}

section.value-prop div.content ul li {
	line-height: 1.4em;
	list-style-type: disc;
    margin-left: 1.4em;
}


section.value-prop div.content {
	text-align: left;
}


/*

div.prop-image {
	position: absolute;
	left: 550px;
	top: 40px;
}

section.value-prop.reversed div.prop-image {
	right: 530px;
	left: auto;
}

*/


/* get rid of the images that split to the right */

section.value-prop div.container {
	height: auto;
}

section.value-prop div.content {
	overflow: hidden;
	width: 33%;
	float: left;
}

div.prop-image {
	width: 56%;
	margin-left: 10%;
	float: left;
}

div.prop-image img {
	max-width: 100%;
}


/* in rows lets test */

section.value-prop div.flex-row  div.content {
	width: 100%;
	/*padding-left: 60px;*/
	float: none;
	overflow: auto;
}

section.value-prop div.flex-row div.content {
	padding-left: 60px;
}

section.value-prop.reversed div.flex-row div.content {
	padding-left: 0px;
}

section.value-prop div.flex-row div.prop-image {
	width: 100%;
	padding-left: 60px;
	box-sizing: border-box;
	margin: 0;
	float: none;
	overflow: auto;
}

section.value-prop div.flex-row div.frame {
	border: 1px solid #a8dca4;
	padding: 20px;
	border-radius: 5px;
}

section.value-prop div.flex-row div.frame.tighter {
	padding: 5px;
	border-radius: 0px;
	display: inline-block;
}

section.value-prop.reversed div.flex-row div.prop-image {
	padding-left: 0;
	padding-right: 60px;
}

section.value-prop.reversed div.flex-row div.content {
	padding-left: 0;
	padding-right: 60px;
}

/* --- */


section.value-prop.reversed div.content {
	box-sizing: border-box;
	text-align: left;
	float: right;
}


div.icon {
	margin-bottom: 20px;
}

span.br {
	display: block;
}

div.content-along-image {
	overflow: hidden;
}

div.float-right {
	float: right;
	margin-left: 40px;
	margin-bottom: 20px;
	overflow: hidden;
}

section.value-prop div.divider {
	
}


/*  Regular Props
================================================== */

section.standard {
}


section.standard div.container {
	box-sizing: border-box;
	position: relative;
	border-bottom: 1px solid #a8dca4;
	padding-bottom: 40px;
	padding-top: 40px;
	overflow: hidden;
	text-align: center;
}

section.standard div.container h3 {
	margin: 0 0 0px 0;
	font-size: 35px;
	font-weight: 400;
	line-height: 1.2em;
}

section.standard div.container p {
	font-size: 25px;
}

a.inline-link {
	text-decoration: none;
	color: #f26522;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 80%;
	line-height: 1.2em;
}

div.skinnier {
	width: 90%;
	display: inline-block;
	margin: 0 auto;
}


/*  Pricing
================================================== */

section.pricing {
	background: #eeeeef;
}


section.pricing div.container {
	box-sizing: border-box;
	position: relative;
	border-bottom: 0;
	padding-bottom: 40px;
	padding-top: 40px;
	overflow: hidden;
	text-align: center;
}

section.pricing div.container h3 {
	margin: 0 0 30px 0;
	font-size: 35px;
	font-weight: 400;
	line-height: 1.2em;
}

section.pricing div.container p.cost {
	width: 100%;
	text-align: center;
	font-size: 70px;
	font-weight: 400;
	margin-top: -25px;

	/*border-top: 10px solid #ffffff;
	margin-top: -30px;
	padding-top: 10px;
	*/
}

section.pricing div.container p.pre-cost {
	border-top: 10px solid #50b848;
	margin-top: -30px;
	padding-top: 30px;
	font-size: 20px;
	line-height: 20px;
}

section.pricing div.container p.post-cost {
	font-size: 20px;
	line-height: 20px;
	margin-bottom: 20px;
	margin-top: -15px;
}


section.pricing div.container p.for.additional {
	font-size: 16px;
	line-height: 20px;
}

section.pricing div.container p.cost.value {
	font-size: 90px;
}

div.price-wrapper {
	background: #fff;
	border: 1px solid #a7a9ac;
	display: inline-block;
	width: 100%;
	padding: 30px 30px;
	box-sizing: border-box;
}

section.pricing div.container h4 {
	font-weight: 600;
	font-size: 24px;
	margin-bottom: 20px;
	margin-top: 0px;
}

section.pricing div.container p.for {
	font-size: 20px;
	line-height: 1.3em;
}

section.pricing div.container ul {
	text-align: left;
	padding-left: 20px;
	margin-left: 0;
}

section.pricing div.container ul li {
	list-style-type: disc;
	font-size: 18px;
	margin-left: 1.4em;
	padding-left: 0;
	margin-bottom: 5px;
	font-weight: 300;
}

section.pricing div.container ul li.category {
	
	list-style-type: none;
	font-size: 90%;
	font-weight: 400;
	padding-top: 15px;
	padding-bottom: 5px;
	margin-left: 0px;
}

div.price-wrapper p {
	margin: 0;
	font-size: 30px;
}

div.price {
	border-bottom: 1px solid #333;
	padding-bottom: 30px;
	margin-bottom: 30px;
}

section.pricing div.container p.cta {
	margin-top: 60px
}

section.pricing div.container p.cta a {
	width: 100%;
	box-sizing: border-box;
	font-size: 32px;
	padding: 20px 20px;
}


/*  Blogs
================================================== */

section.blogs {
	background: #17bfda;
}

section.blogs div.container {
	border-bottom: 0;
}

section.standard.blogs p.signpost { 

	color: #fff;
	text-transform: uppercase;
	font-weight: 400;
	margin: 0;
	line-height: 1.2em;

}

section.standard.blogs div.relative {
	position: relative;
	padding-left: 90px;
	padding-top: 0px;
	text-align: left;
}

section.standard.blogs div.relative p {
	width: 80%;
}

section.standard.blogs div.icon {
	margin: 0;
	position: absolute;
	left: 0;
	top: 0;
}

section.standard.blogs div.icon img {
		max-height: 80px;
	}

section.standard.blogs div.item {
	background: rgba(255,255,255,.5);
	padding: 20px;
	text-align: left;
	box-sizing: border-box;
}

section.standard.blogs div.item p {
	margin: 0;
	font-size: 18px;
	line-height: 1.2em;
}

span.red {
	color: #f26522;
	font-weight: 400;
}


section.standard.blogs div.item a {
	text-decoration: none;
	font-weight: 400;
}

/*  Companies
================================================== */

section.companies div.logo img {
	max-height: 70px;
}

section.standard.companies p.customer-name {
	font-size: 16px;
	line-height: 1.2em;
	width: 50%;
	display: inline-block;
	margin: 20px auto 0 auto;
}


/*  CTA Bar
================================================== */

section.cta {
	background: #50b848;
}

section.cta div.container {
	text-align: center;
}

section.cta div.container h3 {
	font-size: 35px;
	font-weight: 600;
	color: #fff;
	margin: 0;
}

section.cta div.one {
	display: inline-block;
	margin-right: 60px;
}


section.cta div.two {
	display: inline-block;
}

section.cta p.cta {
	margin: 0;
}

a.button.dark {
	background: #333333;
	color: #fff;
}

div.center-me {
	display: inline-block;
	margin: 0 auto;
	text-align: center;
}

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}


/*  Footer
================================================== */

footer div.container {
	text-align: center;
	padding: 100px 20px 40px 20px;
}

footer div.container div.logos div.logo {
	display: inline-block;
	margin-right: 50px;
}

footer div.container div.logos div.logo:last-child {
	margin-right: 0;
}

footer div.container div.logos img {
	max-height: 60px;
}

footer div.container div.row {
	margin-top: 40px;
}

footer div.container p {
	color: #f0f0f0;
	font-size: 16px;
	line-height: 1.4em;
	margin: 0 0 10px 0;
}

span.spaced {
    margin-right: 30px;
    display: inline-block;
}

footer div.container a {
	color: #f0f0f0;
	text-decoration: none;
}



/*  media queries
================================================== */

@media only screen and (max-width: 1690px) {

	section#hero div.centering-frame {
		max-width: 50%;
	}
}


@media only screen and (max-width: 1450px) {
	
	section#nav div {
		display: block;
	}

	section#nav div.nav {
		padding-top: 10px;
		padding-left: 3px;
	}

		
}

@media only screen and (max-width: 1370px) {
	
	div.centering-frame {
		padding-left: 0 !important;
	}
	
	section#hero h1 {
		font-size: 48px;
	}

	section.leadin h2 {
		font-size: 45px;
	}

	/*section.leadin div.container {
		text-align: left;
	}

	section.leadin div.inside {
		width: 100%;
	}*/

		
}


@media only screen and (max-width: 1200px) {
	
	div.centering-frame {
		padding-left: 0 !important;
	}

	section#nav div {
		display: block;
	}


	section#nav div.nav {
		padding-top: 10px;
		padding-left: 3px;
	}

	div.inside {
		width: 90%;
	}

	div.inside div.float-right img {
		max-width: 80%;
	}

	section.glance div.container {
		background: url(/assets/_res/images/salute.jpg) top left no-repeat;
	}

	section.glance div.container div.images div.image:first-child {
		margin-right: 20px;
	}

	section.glance div.container div.images div.image {
		width: 300px;
		padding: 20px 0;
 		margin-right: 0;
 		max-width: 80%;
 	}

	section.glance div.container div.images:first-child {}

	section.glance div.container div.images div.image img {
		max-width: 100%;
	}

	section.value-prop div.flex-row div.content {
		padding-left: 0;
	}

	section.value-prop div.reversed div.flex-row div.content {
		padding-right: 0;
	}

	section.value-prop .flex-row .content h2 {
		font-size: 28px;
	}
}

@media only screen and (max-width: 1100px) {

	div.diagonal-on-left {
		display: none;
	}

	section#hero-image {
		width: 50%;
	}

	section#hero-image div.wide-image {
		display: none;
	}

	section#hero-image div.cropped-image {
		display: block;
	}

	section#nav ul li a {
		font-size: 16px;
	}

	section#hero h1 {
		font-size: 35px;
	}

	section#hero h2 {
		font-size: 25px;
	}

	section#hero div.centering-frame {
		max-width: 45%;
	}

	section.glance div.container {
		background: none;
		height: auto;
	}

	section.glance div.container div.images {
		float: none;
	}

	section.leadin h2 {
		font-size: 40px;
	}

	section.leadin h3 {
		font-size: 25px;
	}

	.flex-row div.col-xs-12 {
		margin-bottom: 20px;
	}

	section.pricing div.options .flex-row div.col-xs-12 {
		margin-bottom: 0px;
	}

	section.value-prop div.flex-row div.content {
		padding-left: 0;
	}

	section.value-prop div.reversed div.flex-row div.content {
		padding-right: 0;
	}

	section.value-prop .flex-row .content h2 {
		font-size: 28px;
	}



}

@media only screen and (max-width: 990px) {

	section.standard.blogs div.icon {
		display: none;
	}

	section.standard.blogs div.relative {
		padding-left: 0;
	}

	section.cta div.one {
		display: block;
		margin-right: 0px;
		margin-bottom: 10px;
	}


	section.cta div.two {
		display: block;
	}


	section.value-prop div.flex-row div.content {
		padding-left: 0;
		padding-right: 0px;
		width: 100%;
		text-align: left;
	}

	section.value-prop div.flex-row div.prop-image {
		padding-left: 0;
		padding-right: 0;
		width: 100%;
		text-align: left;
	}

	section.value-prop div.container span.br {
		display: inline-block;
	}


	section.pricing div.container ul {
		padding-left: 0px;
	}

	
}

@media only screen and (max-width: 750px) {

	section#nav {
		position: relative;
		background: #50b848;
		top: auto;
		padding: 0px;
	}

	div.container {
		padding: 20px 20px;
	}

	section#hero {
		min-height: 0px;
		padding-top: 0px;
		padding-bottom: 40px;
		height: auto;
	}

	section#hero div.v-center {
		height: auto;
	}

	section#hero-image {
		display: none;
	}

	section#hero-image {
		width: 100%;
	}

	div.diagonal-on-left {
		display: none;
	}

	section#hero h1 {
		margin-top: 0;
	}

	section#hero div.centering-frame {
		max-width: 100%;
	}


	section.leadin div.container {
		text-align: left;
	}

	section.leadin div.container div.inside {
		width: 100%;
		padding: 0;
	}

	section.leadin h2 {
		font-size: 35px;
		margin-top: 0;
	}

	section.leadin h3, section.standard div.skinnier p {
		font-size: 20px;
		margin-top: 0;
		font-weight: 300;
		line-height: 1.5em;
	}

	section.value-prop div.container {
		height: auto;
	}

	section.value-prop div.container div.content {
		width: 100%;
		text-align: left;
	}

	section.value-prop div.container span.br {
		display: inline-block;
	}
	

	/*

	section.value-prop div.prop-image {
		position: relative;
		left: auto;
		right: auto;
		top: auto;
	}

	section.value-prop div.prop-image img {
		max-width: 100%;
	}

	*/

	section.glance div.container div.image {
		display: block;
		width: 60%;
	}

	section.glance div.container div.image img {
		max-width: 100%;
	}

	footer div.container div.logos div.logo {
		display: block;
		margin-right: 0px;
		margin-bottom: 20px;
	}

	div.content-along-image {
		display: block;
	}

	div.float-right {
		float: none;
	}

	footer div.container {
		padding-top: 50px;
	}

	span.spaced {
		margin-right: 0;
		display: block;
	}


	


}