/* Hero */

.hero { 
  width: 100%;
  height: 120vh;
  position: relative;  
  background-color: #061832;
}

@media only screen and (min-width: 370px)  {  
  .hero { 
    height: 95vh;
  }
}

@media only screen and (min-width: 1000px) and (min-device-width: 480px) {  
  .hero { 
    height: 0;
    padding-bottom: 50%;
  }
}

.hero .image { 
  background-position: center top;
  background-repeat: no-repeat;  
  -webkit-background-size: cover;
  -moz-background-size:    cover;
  -o-background-size:      cover;
  background-size:         cover;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;  
  opacity: .6;
}

.hero-decoration { 
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;  
  top: 0;
  left: 0;
}


.hero .top-gradient {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#061832+0,061832+100&0.95+0,0+100 */
	background: -moz-linear-gradient(top, rgba(6,24,50,0.95) 0%, rgba(6,24,50,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(6,24,50,0.95) 0%,rgba(6,24,50,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(6,24,50,0.95) 0%,rgba(6,24,50,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2061832', endColorstr='#00061832',GradientType=0 ); /* IE6-9 */
  width: 100%;
  height: 60%;  
  position: absolute;
  left: 0;
  top: 0;  
  z-index: 10;
}

.hero .bottom-gradient {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#061832+0,061832+100&0+1,0.4+100 */
	background: -moz-linear-gradient(top, rgba(6,24,50,0) 0%, rgba(6,24,50,0) 1%, rgba(6,24,50,0.4) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(6,24,50,0) 0%,rgba(6,24,50,0) 1%,rgba(6,24,50,0.4) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(6,24,50,0) 0%,rgba(6,24,50,0) 1%,rgba(6,24,50,0.4) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00061832', endColorstr='#66061832',GradientType=0 ); /* IE6-9 */  width: 100%;
  height: 40%;  
  position: absolute;
  left: 0;
  bottom: 0;  
  z-index: 10;
}

.hero .line {
	width: 100%;
	height: 8px;
	position: absolute;
	bottom: 0;
	z-index: 11;
}

.hero .line.blue {
	background-color: #061832;
}

.hero .line.orange {
	background-color: #d96a33;
	right: 0;
	width: 50%;
}

@media only screen and (min-width: 1000px) and (min-device-width: 480px) {  
	.hero .arc {
		width: 140vw;
		height: 140vw;
		border-radius: 50%;
		position: absolute;
		z-index: 11;
	}
	.hero .arc.blue {
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#061832+0,061832+100&0.7+0,0+11 */
		background: -moz-linear-gradient(top, rgba(6,24,50,0.7) 0%, rgba(6,24,50,0) 11%, rgba(6,24,50,0) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, rgba(6,24,50,0.7) 0%,rgba(6,24,50,0) 11%,rgba(6,24,50,0) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, rgba(6,24,50,0.7) 0%,rgba(6,24,50,0) 11%,rgba(6,24,50,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3061832', endColorstr='#00061832',GradientType=0 ); /* IE6-9 */
	  top: 18vw;
		right: -20vw;
		opacity: .8;
		transform: rotate(-15deg);
	}
	.hero .arc.orange {
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d96a33+0,d96a33+100&0.7+0,0+11 */
		background: -moz-linear-gradient(top, rgba(217,106,51,0.7) 0%, rgba(217,106,51,0) 11%, rgba(217,106,51,0) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, rgba(217,106,51,0.7) 0%,rgba(217,106,51,0) 11%,rgba(217,106,51,0) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, rgba(217,106,51,0.7) 0%,rgba(217,106,51,0) 11%,rgba(217,106,51,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3d96a33', endColorstr='#00d96a33',GradientType=0 ); /* IE6-9 */ 
	  top: 11vw;
		right: -34vw;
		transform: rotate(-31deg);
	}
}

.hero .main-message {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#061832+0,0a537e+100 */
	background: rgb(6,24,50); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(6,24,50,1) 0%, rgba(10,83,126,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(6,24,50,1) 0%,rgba(10,83,126,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(6,24,50,1) 0%,rgba(10,83,126,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#061832', endColorstr='#0a537e',GradientType=0 ); /* IE6-9 */
  width: 100%;
  max-width: 900px;
  position: absolute;
  left: 50%;
  -moz-transform:    translateX(-50%);
  -ms-transform:     translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform:         translateX(-50%);   
  bottom: -20px;
  z-index: 100;
  color: white;
  line-height: 1.2;
  padding: 1em;
  font-size: 75%;
  text-align: center;
}

.hero h1 {
	font-size: 200%;
  font-weight: 700;
  margin-bottom: .3em;
  color: white;
}

.hero p {
	font-size: 150%;
	margin-bottom: 1em;
}

@media only screen and (min-width: 740px) and (min-device-width: 480px) {
  .hero .main-message {
    padding: 1.5em;  
    font-size: 85%;
  }
}  
@media only screen and (min-width: 1000px) and (min-device-width: 480px) {  
  .hero .main-message {
    font-size: 90%;
  }  
}
@media only screen and (min-width: 1100px) and (min-device-width: 480px) {  
  .hero .main-message {
    padding: 25px;               
  }
}
@media only screen and (min-width: 1200px) and (min-device-width: 480px) {  
  .hero .main-message {
    padding: 30px;             
  }
}  
@media only screen and (min-width: 1400px) and (min-device-width: 480px) {  
  .hero .main-message {
    padding: 50px;
    font-size: 100%;
  }
}



/* --- Clients Layer --- */

.clients {
	background: white;
	}
	
.clients h2 {
	font-size: 200%;
  margin-bottom: .35em;
	}
	
.clients p {
	font-size: 100%;
  margin-bottom: 0;
}
	
@media only screen and (min-width: 1200px) and (min-device-width: 480px) {  
	.clients p {
		font-size: 135%;
	}
}  
	
.clients .grid {
  margin: 3em auto auto;
}


/* --- Contact layer --- */

.contact.layer { 
  width: 100%;
  height: auto;
  position: relative;  
  background-color: white;
}

@media only screen and (min-width: 740px)  {  
  .contact.layer { 
    height: 95vh;
  }
}

@media only screen and (min-width: 1000px) and (min-device-width: 480px) {  
  .contact.layer { 
    height: 0;
    padding-bottom: 42.5%;
  }
}

@media only screen and (min-width: 1600px) and (min-device-width: 480px) {  
  .contact.layer { 
    height: 0;
    padding-bottom: 40%;
  }
}

.contact.layer .image-mask { 
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}

.contact.layer .image { 
  background-position: center top;
  background-repeat: no-repeat;  
  -webkit-background-size: cover;
  -moz-background-size:    cover;
  -o-background-size:      cover;
  background-size:         cover;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

@media only screen and (min-width: 1000px) and (min-device-width: 480px) {  
	.contact.layer .image { 
		-webkit-clip-path: circle(70% at 50% 150%);
		clip-path: circle(78% at 50% 150%);
	}
}

.contact.layer .arc {
	display: none;
}

@media only screen and (min-width: 1000px) and (min-device-width: 480px) {  
	.contact.layer .arc-mask { 
	  width: 100%;
	  height: calc(100% + 3vw);
	  position: absolute;
	  left: 0;
	  top: -1vw;
	  overflow: hidden;
	}
	.contact.layer .arc {
		display: block;
		width: 118vw;
		height: 118vw;
		border-radius: 50%;
		position: absolute;
		z-index: 11;
	}
	.contact.layer .arc.blue {
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#061832+0,061832+100&0.7+0,0+11 */
		background: -moz-linear-gradient(top, rgba(6,24,50,0.7) 0%, rgba(6,24,50,0) 11%, rgba(6,24,50,0) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, rgba(6,24,50,0.7) 0%,rgba(6,24,50,0) 11%,rgba(6,24,50,0) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, rgba(6,24,50,0.7) 0%,rgba(6,24,50,0) 11%,rgba(6,24,50,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3061832', endColorstr='#00061832',GradientType=0 ); /* IE6-9 */
	  top: 3.55vw;
		right: -9.6vw;
		opacity: .8;
		transform: rotate(-15deg);
	}
	.contact.layer .arc.orange {
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d96a33+0,d96a33+100&0.7+0,0+11 */
		background: -moz-linear-gradient(top, rgba(217,106,51,0.7) 0%, rgba(217,106,51,0) 11%, rgba(217,106,51,0) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, rgba(217,106,51,0.7) 0%,rgba(217,106,51,0) 11%,rgba(217,106,51,0) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, rgba(217,106,51,0.7) 0%,rgba(217,106,51,0) 11%,rgba(217,106,51,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3d96a33', endColorstr='#00d96a33',GradientType=0 ); /* IE6-9 */ 
	  top: 0;
		right: -20vw;
		transform: rotate(-31deg);
	}
	.contact.layer .arc.gray {
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#dbdbdb+0,dbdbdb+100&0.7+0,0+11 */
		background: -moz-linear-gradient(top, rgba(219,219,219,0.7) 0%, rgba(219,219,219,0) 11%, rgba(219,219,219,0) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, rgba(219,219,219,0.7) 0%,rgba(219,219,219,0) 11%,rgba(219,219,219,0) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, rgba(219,219,219,0.7) 0%,rgba(219,219,219,0) 11%,rgba(219,219,219,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3dbdbdb', endColorstr='#00dbdbdb',GradientType=0 ); /* IE6-9 */
	  top: 0;
		right: -8vw;
		transform: rotate(15deg);
	}
}

@media only screen and (min-width: 1600px) and (min-device-width: 480px) {  
	.contact.layer .arc-mask { 
	  top: -3vw;
	}
}


.contact.layer .form { 
  padding: 1.5em;
  text-align: center;
  position: relative;
}

@media only screen and (min-width: 1000px) and (min-device-width: 480px) {  
	.contact.layer .form { 
		max-width: 800px;
	  padding: 11vw 0 0;
	  z-index: 12;
	}
}

@media only screen and (min-width: 1600px) and (min-device-width: 480px) {  
	.contact.layer .form { 
		max-width: 800px;
	  padding: 14vw 0 0;
	  z-index: 12;
	}
}
 
.contact.layer h2 {
	font-size: 200%;
  margin-bottom: .35em;
  color: #061832;
	}
	
.contact.layer p {
	font-size: 100%;
  color: #061832;
	}
	
@media only screen and (min-width: 1000px) and (min-device-width: 480px) {  
	.contact.layer p {
		font-size: 135%;
	}
}
	
/* form */	
	
@media only screen and (min-width: 1000px) and (min-device-width: 480px) {  
	.form .fields { 
		display: table;
	}
	.form .contact-info {
		width: 40%;
		display: table-cell;
		vertical-align: top;
		}
	.form .comments {
		width: 60%;
		display: table-cell;
		vertical-align: top;
		}
}
	
.fields {
  width: 100%;
}

.fields .field {
  padding-bottom: .25em;
  margin: 0;
  position: relative;
  text-align: left;
}

@media only screen and (min-width: 1000px) and (min-device-width: 480px) {  
	.fields .field {
	  padding-bottom: 0; 
	  position: relative;
	  text-align: left;
	}
}

.form label { 
  display: block;
  padding: 0;
  position: relative;
  -webkit-transition: background .3s ease-in-out;
  -moz-transition:    background .3s ease-in-out;
  -o-transition:      background .3s ease-in-out;
  -ms-transition:     background .3s ease-in-out;
  transition:         background .3s ease-in-out;   
}

.form input,
.form select,
.form textarea {
	background: rgba(6,24,50,.5);
  border: 1px solid rgba(255,255,255,1);  
  border-radius: 0;
  -webkit-appearance: none;
  width: 100%;
  padding: 1em 1.25em;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 100%;
  color: white;
  cursor: pointer;    
  -webkit-transition: all .3s ease-in-out;
  -moz-transition:    all .3s ease-in-out;
  -o-transition:      all .3s ease-in-out;
  -ms-transition:     all .3s ease-in-out;
  transition:         all .3s ease-in-out;  
}	

.form textarea { 
  height: 122px;
}

@media only screen and (min-width: 1000px) and (min-device-width: 480px) {  
	.form input {
	  height: 50px;
	  border-bottom: 0;
	}
	.form .field:last-child input {
		border-bottom: 1px solid rgba(255,255,255,1);  
	} 
	.form textarea { 
	  border-left: 0;
	} 
}

.form input:hover,
.form select:hover,
.form textarea:hover {
  background: rgba(6,24,50,.7);   
}

.form input:focus,
.form select:focus,
.form textarea:focus {  
  background: rgba(6,24,50,1);     
}

.form .submit { 
  padding: 0; 
  text-align: center;
}

.form button { 
  font-family: 'Lato', sans-serif;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#061832+0,061832+100&0.6+0,0.1+33,0+49,0.1+66,0.6+100 */
	background: -moz-linear-gradient(left, rgba(6,24,50,0.6) 0%, rgba(6,24,50,0.1) 33%, rgba(6,24,50,0) 49%, rgba(6,24,50,0.1) 66%, rgba(6,24,50,0.6) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, rgba(6,24,50,0.6) 0%,rgba(6,24,50,0.1) 33%,rgba(6,24,50,0) 49%,rgba(6,24,50,0.1) 66%,rgba(6,24,50,0.6) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, rgba(6,24,50,0.6) 0%,rgba(6,24,50,0.1) 33%,rgba(6,24,50,0) 49%,rgba(6,24,50,0.1) 66%,rgba(6,24,50,0.6) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99061832', endColorstr='#99061832',GradientType=1 ); /* IE6-9 */
  color: #0a537e;
  text-transform: uppercase;  
  font-weight: 700;
  padding: .5em 2em;
  font-size: 120%;
  color: white;
  letter-spacing: 1px;
  display: inline-block;
  border-radius: 23px;
  margin: 1em 0 0;
  position: relative;
  -webkit-transition: all .15s ease-in-out;
  -moz-transition:    all .15s ease-in-out;
  -o-transition:      all .15s ease-in-out;
  -ms-transition:     all .15s ease-in-out;
  transition:         all .15s ease-in-out; 
  cursor: pointer;
} 

.form button:hover,
.form button:active { 
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#061832+0,061832+100&1+0,0.2+33,0.1+49,0.2+66,1+100 */
	background: -moz-linear-gradient(left, rgba(6,24,50,1) 0%, rgba(6,24,50,0.2) 33%, rgba(6,24,50,0.1) 49%, rgba(6,24,50,0.2) 66%, rgba(6,24,50,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, rgba(6,24,50,1) 0%,rgba(6,24,50,0.2) 33%,rgba(6,24,50,0.1) 49%,rgba(6,24,50,0.2) 66%,rgba(6,24,50,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, rgba(6,24,50,1) 0%,rgba(6,24,50,0.2) 33%,rgba(6,24,50,0.1) 49%,rgba(6,24,50,0.2) 66%,rgba(6,24,50,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#061832', endColorstr='#061832',GradientType=1 ); /* IE6-9 */
  padding: .5em 2.5em;
  color: white;
} 

form strong.error { 
  background: #900;
  padding: .2em .5em;   
  display: block;
  white-space: nowrap;
  position: absolute; 
  left: 0;
  top: -5px;
  z-index: 9999;    
  font-size: 70%;
  line-height: 1;
  font-weight: 400;
  color: #fff; 
  text-transform: uppercase; 
} 
form strong.error:after { 
  height: 0; 
  width: 0;    
  margin-left: -6px;  
  content: " ";    
  position: absolute; 
  left: 15px; 
  top: 100%;
  border-color: rgba(153, 0, 0, 0);    
  border: solid transparent; 
  pointer-events: none;
  border-top-color: #900; 
  border-width: 6px; 
}


/* ---- Recaptcha ---- */

.g-recaptcha { 
	width: 100% !important; 
	max-width: 100%;
	overflow: hidden;
	background: #f9f9f9;
	position: relative;
	}

_::content, _:future, .g-recaptcha:not(*:root) { top: -3px; } 

.rc-anchor.rc-anchor-normal.rc-anchor-light {
	border: none !important;
	}


/* ---- Placeholder Text Equalizer ---- */

form input:-moz-placeholder                 { opacity: 1; }
form input::-moz-placeholder                { opacity: 1; }
form input:-ms-input-placeholder            { color: rgba(255,255,255,.8); }
form input::-webkit-input-placeholder       { color: rgba(255,255,255,.8); }
form input:hover:-ms-input-placeholder      { color: rgba(255,255,255,.8); }
form input:hover::-webkit-input-placeholder { color: rgba(255,255,255,.8); }     
form input:focus:-ms-input-placeholder      { color: rgba(255,255,255,.8); }
form input:focus::-webkit-input-placeholder { color: rgba(255,255,255,.8); }  

form textarea:-moz-placeholder                 { opacity: 1; }
form textarea::-moz-placeholder                { opacity: 1; }
form textarea:-ms-input-placeholder            { color: rgba(255,255,255,.8); }
form textarea::-webkit-input-placeholder       { color: rgba(255,255,255,.8); }
form textarea:hover:-ms-input-placeholder      { color: rgba(255,255,255,.8); }
form textarea:hover::-webkit-input-placeholder { color: rgba(255,255,255,.8); }  
form textarea:focus:-ms-input-placeholder      { color: rgba(255,255,255,.8); }
form textarea:focus::-webkit-input-placeholder { color: rgba(255,255,255,.8); }