/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #fff;
}

body {
	background-color:#000;
	color: #fff;
	font-family: "proxima-nova",sans-serif;
	font-size:16px;
	font-weight:300;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #000;
    text-shadow: none;
}

::selection {
    background: #000;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Coordinate Styles
   ========================================================================== */

body.locked { overflow:hidden; }
 
.featured-area { background:url(../img/banner-background.jpg) no-repeat center; background-size:cover; min-height:100vh; position:relative; overflow:hidden; }
.featured-area h1 { background:url(../img/svg/vivace-logo.svg) no-repeat 0 0; background-size:contain; display:block; height:258px; margin:-160px 0 0 -130px !important; position:absolute; top:50%; left:50%; width:260px; z-index:10; }
.featured-area .scroll-notice { color:#fff; font-size:0.938em; font-weight:300; position:absolute; bottom:0.9375rem; left:0; right:0; z-index:10; text-align:center; text-transform:uppercase; }
.featured-area .scroll-notice i { background:url(../img/svg/scroll-icon.svg) no-repeat 0 0; background-size:contain; display:block; height:50px; margin:0 auto 0.9375rem; width:30px; }
.featured-area img { opacity:0; }

.tempo-section { }
.tempo-section p { font-size:1.25em; }
.tempo-section h2 { background:url(../img/svg/tempo-logo.svg) no-repeat 0 0; background-size:contain; display:block; height:84px; margin:0 auto; width:260px; }

.sold-feature {background-color: #a276b3;padding: 30px 0;background: linear-gradient(to right, #5895ce , #a276b3);}
.sold-feature h1 { text-transform: uppercase; font-size: 1em; margin-bottom: 0; letter-spacing: 0.05em; }
/*.sold-feature h1 span { text-decoration: underline;}*/


.quote-section { }
.quote-section blockquote { margin:0; padding:0; }
.quote-section blockquote p { font-size:1.75em; margin:0 0 0.25em; }
.quote-section blockquote footer { font-size:1.5em; font-weight:100; }

.content-section { line-height:1.2; padding-left:0.9375rem; padding-right:0.9375rem; }
.content-section p { font-size:1.25em; font-weight:100; }
.content-section strong { font-weight:400; }
.content-section a { color:#fff; }
.content-section a:hover { color:#fff; text-decoration:underline; }
.content-section a.btn { background-color:#6f88c4; color:#fff; display:inline-block; font-size:1.25em; line-height:1; padding:0.75em 1em; }
.content-section a.btn:hover { background-color:#fff; color:#6f88c4; text-decoration:none; }
.content-section .row .columns:first-child { color:#a7a9ab; }
.content-section .row .columns:first-child p:first-child { color:#fff; }

.logo-section { }
.logo-section .logo-wrap { display:block; margin:0; text-align:center; }
.logo-section .logo-wrap:first-child { margin-left:0; }
.logo-section .logo-wrap:last-child { margin-top:1.875rem; }
.logo-section .logo-wrap p { color:#a7a9ab; font-size:1.25rem; font-weight:100; }
.logo-section .logo-wrap h3.three-property { background:url(../img/svg/3-property-logo.svg) no-repeat 0 0; background-size:contain; height:90px; margin:0 auto; width:200px; }
.logo-section .logo-wrap h3.luton { background:url(../img/svg/luton-logo.svg) no-repeat 0 0; background-size:contain; height:90px; margin:0 auto; width:200px; }

#bottom-bar { font-size:0.938em; font-weight:300; padding:1.875rem; text-align:center; }
#bottom-bar a { color:#fff; }
#bottom-bar a:hover { color:#fff; text-decoration:underline; }

/*
 * Contact Form
 */
#contact-wrapper { background-color:#000; background-color:rgba(0,0,0,0.7); opacity:0; overflow-y:auto; padding:0.9375rem; position:fixed; top:0; right:0; bottom:0; left:0; visibility:hidden; z-index:99;
	-webkit-transition:opacity 0.5s ease-out 0.25s, visibility 0.5s linear 0.25s;
	transition:opacity 0.5s ease-out 0.25s, visibility 0.5s linear 0.25s;
}
#contact-wrapper.open { opacity:1; visibility:visible;
	-webkit-transition:opacity 0.5s ease-out;
	transition:opacity 0.5s ease-out;
}
#contact-wrapper #contact-form { background-color:#111111; color:#fff; max-width:600px; opacity:0; padding:1.875rem 0.9375rem; position:absolute; top:50%; right:0.9375rem; left:0.9375rem;
	-webkit-transition:opacity 0.25s ease-out, -webkit-transform 0.25s linear;
	transition:opacity 0.25s ease-out, -webkit-transform 0.25s linear;
	transition:opacity 0.25s ease-out, transform 0.25s linear;
	transition:opacity 0.25s ease-out, transform 0.25s linear, -webkit-transform 0.25s linear;
}
#contact-wrapper.open #contact-form { opacity:1;
	-webkit-transform:translate(0,-50%);
	        transform:translate(0,-50%);
	-webkit-transition:opacity 0.25s ease-out 0.25s, -webkit-transform 0.25s linear 0.25s;
	transition:opacity 0.25s ease-out 0.25s, -webkit-transform 0.25s linear 0.25s;
	transition:opacity 0.25s ease-out 0.25s, transform 0.25s linear 0.25s;
	transition:opacity 0.25s ease-out 0.25s, transform 0.25s linear 0.25s, -webkit-transform 0.25s linear 0.25s;
}
#contact-wrapper #contact-form.scroll,
#contact-wrapper.open #contact-form.scroll { top:0.9375rem;
	-webkit-transition:opacity 0.25s ease-out;
	transition:opacity 0.25s ease-out;
	-webkit-transform:translate(0,0);
	        transform:translate(0,0);
}
#contact-wrapper #contact-form a.close-trigger { display:block; height:30px; position:absolute; top:0; right:0; width:30px;
	-webkit-transform:rotate(45deg);
	        transform:rotate(45deg);
}
#contact-wrapper #contact-form a.close-trigger span { background-color:#a3a3a3; display:block; position:absolute;
	-webkit-transition:background-color 0.25s ease-out;
	transition:background-color 0.25s ease-out;
}
#contact-wrapper #contact-form a.close-trigger span:first-child { height:15px; left:50%; top:8px; width:1px; }
#contact-wrapper #contact-form a.close-trigger span:last-child { height:1px; left:8px; top:50%; width:15px; }
#contact-wrapper #contact-form a.close-trigger:hover span { background-color:#6f88c4; }

#contact-wrapper #contact-form h3 { font-size:1.25em; text-align:center; }

/** Layouts **/
.content-area { padding-bottom:2.25em; padding-top:2.25em; }
.content-area.x2 { padding-bottom:4.5em; padding-top:4.5em; }

.content-area.bottom-x0 { padding-bottom:0; }
.content-area.top-x0 { padding-top:0; }

.divider_top { padding-top:1.875rem; }
.small_divider_top { padding-top:1.875rem; }
.medium_divider_top { padding-top:1.875rem; }

/* ==========================================================================
   Typography
   ========================================================================== */

h1:first-child, h2:first-child, h3:first-child, h4:first-child, p:first-child, ul:first-child, ol:first-child { margin-top:0; }
h1:last-child, h2:last-child, h3:last-child, h4:last-child, p:last-child, ul:last-child, ol:last-child { margin-bottom:0; }

/* ==========================================================================
   Links
   ========================================================================== */
a { text-decoration:none;
  -webkit-transition: color 0.25s ease-out, background-color 0.25s ease-out, border-color 0.25s ease-out; 
     -moz-transition: color 0.25s ease-out, background-color 0.25s ease-out, border-color 0.25s ease-out; 
       -o-transition: color 0.25s ease-out, background-color 0.25s ease-out, border-color 0.25s ease-out; 
          transition: color 0.25s ease-out, background-color 0.25s ease-out, border-color 0.25s ease-out;
}
a:hover { text-decoration:none; }

/* ==========================================================================
   Forms
   ========================================================================== */
input, textarea, select { background-color:transparent; border:none; border-bottom:2px solid #fff; border-radius:0; color:#fff; cursor:pointer; display:block; font-size:1.25rem; font-weight:300; line-height:1; margin:0; padding:0 0 1em; outline:none; width:100%;
  -webkit-appearance: none;
  -webkit-transition: color 0.25s ease-out, background-color 0.25s ease-out, border-color 0.25s ease-out; 
          transition: color 0.25s ease-out, background-color 0.25s ease-out, border-color 0.25s ease-out;
}
input:hover, textarea:hover { border-color:#6f88c4; }
input:focus, textarea:focus { border-color:#6f88c4; color:#6f88c4; }
textarea { height:200px; }

select { background-color:#363636; border:none; padding:0.75em 1em; text-align:center; }

.generatedcontent select { background-image:none; }
.ginput_container_select { position:relative; }
.ginput_container_select:before { content:'\f0d7'; display:block; font-size:1.25em; pointer-events:none; position:absolute; top:50%; right:0.85em;
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
	-webkit-transform:translateY(-50%);
			transform:translateY(-50%);
}

.placeholder-support label { display:none; }

.gform_footer { margin-top:0; position:relative; }
input.gform_button { background-color:#6f88c4; border:none; padding:0.75em 1em; text-align:center; }
input.gform_button:hover,
input.gform_button:focus { background-color:#fff; color:#6f88c4; }
img.gform_ajax_spinner { height:24px; position:absolute; right:1.875rem; top:50%; width:24px;
	-webkit-transform:translateY(-50%);
	        transform:translateY(-50%);
}

.gform_wrapper { }
.gform_wrapper ul { list-style:none; margin:0; padding:0; }
.gform_wrapper ul li { margin-top:0; margin-bottom:1.25rem; padding:0; text-align:left; }
span.name_first { display:block; margin-bottom:1.25rem; }
.gf_clear { clear:both; }
.instruction  { display:none; }

::-webkit-input-placeholder { color: #808080; }
:-moz-placeholder { color: #808080; }
::-moz-placeholder { color: #808080; }
:-ms-input-placeholder { color: #808080; }

.gform_confirmation_message { font-size:1.25em; text-align:center; }

/** Warnings **/
.validation_error { display:none; }
.validation_message { display:none !important; }
.gfield_contains_required.gfield_error input,
.gfield_contains_required.gfield_error textarea { border-color:#cc0000 !important; }
.gfield_contains_required.gfield_error select,
.gfield_contains_required.gfield_error .jcf-select { background-color:#cc0000 !important; }
.gfield_contains_required.gfield_error label { color:#cc0000 !important; }

/* Small screens */
@media only screen { } /* Define mobile styles */

@media only screen and (max-width: 40em) {
	
} /* max-width 640px, mobile-only styles, use when QAing mobile issues */

/* Medium screens - min-width 640px */
@media only screen and (min-width: 40em) {
	
	.featured-area { min-height:900px; max-height:1200px; }
	.featured-area h1 { height:396px; margin:-198px 0 0 -200px !important; width:400px; }
	.tempo-section h2 { height:120px; width:370px; }

	.sold-feature h1 { font-size: 2em;}
	
	.quote-section blockquote p { font-size:3.5em; }
	.quote-section blockquote footer { font-size:2em; }
	
	.tempo-section p { font-size:1.875rem; }
	
	.content-section p,
	.content-section a.btn { font-size:1.875em; }
	
	.logo-section .logo-wrap { display:inline-block; margin:0 3.75rem; text-align:left; }
	.logo-section .logo-wrap:first-child { margin-left:0; }
	.logo-section .logo-wrap:last-child { margin-right:0; margin-top:0; }
	.logo-section .logo-wrap p { font-size:1.875rem; }
	.logo-section .logo-wrap h3.three-property { height:120px; margin:0; width:260px; }
	.logo-section .logo-wrap h3.luton { height:120px; margin:0; width:260px; }
	
	#bottom-bar .footer-left { float:left; }
	#bottom-bar .footer-right { float:right; }
	
	.content-area { padding-bottom:4.25em; padding-top:4.25em; }
	.content-area.x2 { padding-bottom:8.5em; padding-top:8.5em; }
	
	.small_divider_top { padding-top:0; }
	
	input, textarea, select { font-size:1.875rem; }
	.gform_wrapper ul li { margin-bottom:1.875rem; }
	span.name_first { margin-bottom:1.875rem; }
	.ginput_container_select:before { font-size:1.875rem; }
	.gform_confirmation_message { font-size:1.875rem;}
	
	#contact-wrapper #contact-form { max-width:580px; opacity:0; padding:3.75rem; position:absolute; top:50%; left:50%; right:auto; width:100%;
		-webkit-transform:translate(-50%,-25%);
		        transform:translate(-50%,-25%);
		-webkit-transition:opacity 0.25s ease-out, -webkit-transform 0.25s linear;
		transition:opacity 0.25s ease-out, -webkit-transform 0.25s linear;
		transition:opacity 0.25s ease-out, transform 0.25s linear;
		transition:opacity 0.25s ease-out, transform 0.25s linear, -webkit-transform 0.25s linear;
	}
	#contact-wrapper.open #contact-form { opacity:1;
		-webkit-transform:translate(-50%,-50%);
		        transform:translate(-50%,-50%);
		-webkit-transition:opacity 0.25s ease-out 0.25s, -webkit-transform 0.25s linear 0.25s;
		transition:opacity 0.25s ease-out 0.25s, -webkit-transform 0.25s linear 0.25s;
		transition:opacity 0.25s ease-out 0.25s, transform 0.25s linear 0.25s;
		transition:opacity 0.25s ease-out 0.25s, transform 0.25s linear 0.25s, -webkit-transform 0.25s linear 0.25s;
	}
	#contact-wrapper #contact-form.scroll,
	#contact-wrapper.open #contact-form.scroll { top:1.875rem;
		-webkit-transition:opacity 0.25s ease-out;
		transition:opacity 0.25s ease-out;
		-webkit-transform:translate(-50%,0);
		        transform:translate(-50%,0);
	}

} @media only screen and (min-width: 40em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */

/* Large screens - min-width 1024px */
@media only screen and (min-width: 64em) {
	
	.featured-area h1 { height:544px; margin:-272px 0 0 -275px !important; width:549px; }
	
	.quote-section blockquote p { font-size:5em; }
	.quote-section blockquote footer { font-size:4em; }
	
	#contact-wrapper #contact-form { max-width:860px; }
	
	.content-area { padding-bottom:6.25em; padding-top:6.25em; }
	.content-area.x2 { padding-bottom:12.5em; padding-top:12.5em; }
	
	.medium_divider_top { padding-top:0; }

} @media only screen and (min-width: 64em) and (max-width: 90em) { } /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */

/* XLarge screens - min-width 1440px */
@media only screen and (min-width: 90em) {
	
} @media only screen and (min-width: 90em) and (max-width: 97.500em) { } /* min-width 1441px and max-width 1560px, use when QAing xlarge screen-only issues */

/* XXLarge screens - min-width 1560px */
@media screen and (min-width: 97.500em) {
	
}


/* ==========================================================================
   Plugin Styles
   ========================================================================== */

/*!--------------------------------------------------------------------
STYLES "Outdated Browser"
Version:    1.1.0 - 2014
author:     Burocratik
website:    http://www.burocratik.com
* @preserve
-----------------------------------------------------------------------*/
#outdated{
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 170px;
    text-align: center; text-transform: uppercase; z-index:1500;
    background-color: #f25648; color: #ffffff;
}
* html #outdated{position: absolute;}
#outdated h6{font-size: 25px; line-height: 25px; margin: 30px 0 10px;}
#outdated p{font-size: 12px; line-height: 12px; margin: 0;}
#outdated #btnUpdateBrowser{
    display: block; position: relative; padding: 10px 20px; margin: 30px auto 0; width: 230px; /*need for IE*/
    color: #ffffff; text-decoration: none; border: 2px solid #ffffff; cursor: pointer;
}
#outdated #btnUpdateBrowser:hover{color: #f25648; background-color:#ffffff;}
#outdated .last{position: absolute; top: 10px; right: 25px; width: 20px; height: 20px;}
#outdated #btnCloseUpdateBrowser{ border-bottom:none;
    display: block; position: relative; width: 100%; height: 100%;
    text-decoration: none; color: #ffffff; font-size: 36px; line-height: 36px;
}

/* select */
.jcf-select {
	display: block;
	vertical-align: top;
	background: #363636;
	margin: 0;
}
.jcf-select select {
	z-index: 1;
	left: 0;
	top: 0;
}
.jcf-select .jcf-select-text { color:#fff; font-size:1.25em; line-height:1.3; margin:0; padding:0.75em 1em; text-align:center;
	text-overflow:ellipsis;
	white-space: nowrap;
	overflow: hidden;
	cursor: default;
	display: block;
}
@media only screen and (min-width: 40em) {
	.jcf-select .jcf-select-text { font-size:1.875rem; }
}
.jcf-select .jcf-select-opener { display:none;
	position: absolute;
	text-align: center;
	background: #aaa;
	width: 26px;
	bottom: 0;
	right: 0;
	top: 0;
}
body > .jcf-select-drop {
	position: absolute;
	margin: -1px 0 0;
	z-index: 9999;
}
body > .jcf-select-drop.jcf-drop-flipped {
	margin: 1px 0 0;
}
.jcf-select .jcf-select-drop {
	position: absolute;
	margin-top: 0px;
	z-index: 9999;
	top: 100%;
	left: -1px;
	right: -1px;
}
.jcf-select .jcf-drop-flipped {
	bottom: 100%;
	top: auto;
}
.jcf-select.jcf-compact-multiple {
	max-width: 220px;
}
.jcf-select.jcf-compact-multiple .jcf-select-opener:before {
	display: inline-block;
	padding-top: 2px;
	content: '...';
}
.jcf-select-drop .jcf-select-drop-content {
	border: none;
}
.jcf-select-drop.jcf-compact-multiple .jcf-hover {
	background: none;
}
.jcf-select-drop.jcf-compact-multiple .jcf-selected {
	background: #e6e6e6;
	color: #000;
}
.jcf-select-drop.jcf-compact-multiple .jcf-selected:before {
	display: inline-block;
	content: '';
	height:4px;
	width:8px;
	margin:-7px 5px 0 -3px;
	border:3px solid #777;
	border-width:0 0 3px 3px;
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865483, M12=0.7071067811865467, M21=-0.7071067811865467, M22=0.7071067811865483, SizingMethod='auto expand')";
}

/* multiple select styles */
.jcf-list-box {
	overflow: hidden;
	display: inline-block;
	border: 1px solid #b8c3c9;
	min-width: 200px;
	margin: 0 15px;
}
/* select options styles */
.jcf-list {
	display: inline-block;
	vertical-align: top;
	position: relative;
	background: #363636;
	width: 100%;
}
.jcf-list .jcf-list-content {
	vertical-align: top;
	display: inline-block;
	overflow: auto;
	width: 100%;
}
.jcf-list ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.jcf-list ul li {
	overflow: hidden;
	display: block;
}
.jcf-list .jcf-overflow {
	overflow: auto;
}
.jcf-list .jcf-option { color:#fff; font-size:1.25em; line-height:1.3; margin:0; padding:0.5em; text-align:center;
	white-space: nowrap;
	overflow: hidden;
	cursor: default;
	display: block;
	height: 1%;
}
@media only screen and (min-width: 40em) {
	.jcf-list .jcf-option { font-size:1.875rem; }
}
.jcf-list .jcf-disabled {
	background: #fff !important;
	color: #aaa !important;
}
.jcf-select-drop .jcf-hover,
.jcf-list-box .jcf-selected {
	color: #6f88c4;
}
.jcf-list .jcf-optgroup-caption {
	white-space: nowrap;
	font-weight: bold;
	display: block;
	padding: 5px 9px;
	cursor: default;
	color: #000;
}
.jcf-list .jcf-optgroup .jcf-option {
	padding-left: 30px;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}