/* 	
------------------------------------------------------------------
	SITE STYLESHEET 
------------------------------------------------------------------
*/

/* --------- TYPEFACES -------------------- 
	
	GOOGLE FONTS
	
	HEADLINES
	font-family: 'Poppins', sans-serif;
	font-weight: 200, 400, 700;
	
	BODY COPY
	font-family: 'Roboto', sans-serif;
	font-weight: 300, 400, 700;
			
*/

/* --------- CSS VAR DECLARATIONS ------------------------------- */

:root {
	--headlinesFont: 'Poppins', sans-serif;
	--bodyCopyFont: 'Roboto', sans-serif;
	
	--blackColor: #222;
	--blackHoverColor: #111;
	--blueColor: #0099d5;
	--blueColorRGB: rgb(0,153,213);
	--midnightBlueColor: #0a223f;
	--midnightBlueRGB: rgb(10,34,63);
	--greenColor: #72ad59;
	--greenColorRGB: 114,173,89;
	
	--headlinesColor: var(--midnightBlueColor);
	--bodyCopyColor: #32383f;
	--linkColor: var(--greenColor);
	--linkHoverColor: var(--blueColor);
}


/* --------- GENERAL LAYOUT & POSITIONING --------------------------- */

.centered {
	text-align: center;
}
.left {
	text-align: left;
}
.right {
	text-align: right;
}
.invis {
	display: none;
}
.mobileShow {
	display: none !important;
}
.mobileShowInline {
	display: none !important;
}
.block {
	display: block;
}
.inline-block {
	display: inline-block;
}
.exactOneFifthColumn {
	width: 20%;
	margin: 0;
}
.oneQuarterColumn {
	width: 23%;
	margin: 0;
}
.oneThirdColumn {
	width: 31%;
	margin: 0;
}
.exactOneThirdColumn {
	width: 33.333%;
	margin: 0;
}
.oneHalfColumn {
	width: 46%;
	margin: 0;
}
.exactOneHalfColumn {
	width: 50%;
	margin: 0;
}
.twoThirdsColumn {
	width: 62%;
}
.threeQuarterColumn {
	width: 71%;
	margin: 0;
}
.wrapper {
	width: 88%;
	max-width: 1920px;
	margin: 0 auto;
	position: relative;
}
.exactOneHalfColumn .wrapper {
	width: 76%;
	padding: 15% 0;
	max-width: none;
}
body {
	-webkit-text-size-adjust: 100%;
	font-family: var(--bodyCopyFont);
	font-style: normal;
	font-weight: 400;
	background-color: #fff;
	color: var(--bodyCopyColor);
	position: relative;
}
.flexbox-row {
	position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: flex-start;
    align-items: flex-start;
}
.flexbox-row-reverse {
	flex-direction: row-reverse;
}
.flexbox-row-reverse-mobile {
	flex-direction: row;
}
.flexbox-row-vertical-center {
    align-items: center;
    align-content: center;
}
.flexbox-row-justify-content-center {
    justify-content: center;
}
.flexbox-row-justify-content-flex-start {
    justify-content: flex-start;
}
.flexbox-row-stretch {
	align-items: stretch;
}
.flexbox-column-reverse {
	flex-direction: column-reverse;
}
.elementMargin {
	margin-top: 1.5em;
}
.elementMarginSmall {
	margin-top: 1.0em;
}
.elementMarginLarge {
	margin-top: 2.5em;
}
.mobileElementMargin,
.mobileElementMarginSmall,
.mobileElementMarginLarge {
	margin-bottom: 0;
}
.table {
	display: table;
	height: 100%;
	width: 100%;
}
.table-cell {
	display: table-cell;
	vertical-align: middle;
}
.darken5, .darken10, .darken15, .darken20, .darken25, .darken30, .darken35, .darken40, .darken45, .darken50 {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}
.darken05 {
	background-color: rgba(0,0,0,0.05);
}
.darken10 {
	background-color: rgba(0,0,0,0.1);
}
.darken15 {
	background-color: rgba(0,0,0,0.15);
}
.darken20 {
	background-color: rgba(0,0,0,0.2);
}
.darken25 {
	background-color: rgba(0,0,0,0.25);
}
.darken30 {
	background-color: rgba(0,0,0,0.3);
}
.darken35 {
	background-color: rgba(0,0,0,0.35);
}
.darken40 {
	background-color: rgba(0,0,0,0.4);
}
.darken45 {
	background-color: rgba(0,0,0,0.45);
}
.darken50 {
	background-color: rgba(0,0,0,0.5);
}
.section {
	position: relative;
	width: 100%;
	padding: 6.0em 0;
	margin: 0;
	overflow: hidden;
	background-color: transparent;
}
.whiteSection {
	background-color: #fff;
}
.colorSection {
	background-color: var(--midnightBlueColor);
}
.gradientSection {
	background-color: #fff;
	background: linear-gradient(180deg, #fff 20%, rgba(228,240,224,0.7) 100%);
}
.gradientSectionReverse {
	background-color: #fff;
	background: linear-gradient(180deg, rgba(228,240,224,0.7) 0%, #fff 80%);
}
.parallaxSection {
	background: linear-gradient(90deg, rgba(0,65,41,0.8) 0%, rgba(0,65,41,0.1) 100%);
}
.imageSection {
	padding: 8.0em 0;
}
.noPaddingSection {
	padding: 0;
}
.onePixelMarginTop {
	margin-top: 1px;
}
.onePixelMarginBottom {
	margin-bottom: 1px;
}
.onePixelMarginLeft {
	margin-left: 1px;
}
.onePixelMarginRight {
	margin-right: 1px;
}
.headerBarStickyPadder {
	height: 0;
	/* 
	This is controlled by JS to add verticle space to 
	the visual document when the main nav bar switches 
	from position relative to position sticky. This 
	helps remove the large visual jump in the content. 
	*/
}
.headerBar {
	width: 100%;
	background-color: #fff;
	border-bottom: 1px solid #e9e9e9;
	padding: 0.75em 0;
	position: relative;
	z-index: 9990;
}
.headerBarNavContainer {
	position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    align-content: center;
}
.heroSection {
	position: relative;
	display: table;
	width: 100%;
	height: auto;
	min-height: calc(100vh - 112px);
}
.heroContent {
	display: table-cell;
	vertical-align: middle;
	padding: 3.0em 0;
}
.homeHero {
	background: #fff url(/images/home/home-hero-2024-03-26.jpg) center center no-repeat;
	background-size: cover;
}
.triompheHero {
	background: #fff url(/images/triomphe/triomphe-hero-2024-03-26.jpg) center center no-repeat;
	background-size: cover;
}
.eaglemontHero {
	background: #fff url(/images/eaglemont/eaglemont-hero-2024-03-26.jpg) center top no-repeat;
	background-size: cover;
}
.locationHero {
	background: #fff url(/images/location/location-hero.jpg) center center no-repeat;
	background-size: cover;
}
.lotsHero {
	background: #fff url(/images/lots/lotsHero1.jpg) center center no-repeat;
	background-size: cover;
}
.footer {
	background-color: var(--midnightBlueColor);
}
.footer .wrapper {
	padding: 4.0em 0;
}
.imageBanner {
	width: 100%;
	position: relative;
}
.imageBannerTile {
	position: relative;
	width: 25%;
	height: auto;
	padding-top: 22vh;
}
.imageBannerTileHome1 {
	background: #fff url(/images/home/imageBannerTile1.jpg) center center no-repeat;
	background-size: cover;
}
.imageBannerTileHome2 {
	background: #fff url(/images/home/imageBannerTile2.jpg) center center no-repeat;
	background-size: cover;
}
.imageBannerTileHome3 {
	background: #fff url(/images/home/imageBannerTile3.jpg) center center no-repeat;
	background-size: cover;
}
.imageBannerTileHome4 {
	background: #fff url(/images/home/imageBannerTile4.jpg) center center no-repeat;
	background-size: cover;
}
.verticalBanner {
	display: block;
	position: relative;
	box-sizing: border-box;
	padding: 17% 2.0em 2.2em 2.0em;
	border-radius: 2px;
	overflow: hidden;
	margin-bottom: 2.5em;
}
.verticalBannerAlt {
	display: block;
	position: relative;
	box-sizing: border-box;
	padding: 25% 2.0em 2.2em 2.0em;
	border-radius: 2px;
	overflow: hidden;
	margin-bottom: 2.5em;
}
.verticalBannerContent {
	background-color: #fff;
	padding: 3.0em 2.0em 2.4em 2.0em;
	border-radius: 2px;
}
.verticalBannerContent > div {
	margin: 0 auto;
	max-width: 350px;
}
.verticalBannerAlt .verticalBannerContent > div {
	margin: 0 auto;
	max-width: 450px;
}
.verticalBannerHome1 {
	background: #4ba086 url(/images/home/vertical-banner-home-1.jpg) center top no-repeat;
	background-size: contain;
}
.verticalBannerHome2 {
	background: #4ba086 url(/images/home/vertical-banner-home-2.jpg) center top no-repeat;
	background-size: contain;
}
.verticalBannerHome3 {
	background: #4ba086 url(/images/home/verticalBannerHome3.jpg) center top no-repeat;
	background-size: contain;
}
.parallaxBG {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: -999;
}
.shoppingParallaxBG {
	background: #c5d8e7 url(/images/shopping/farmers-market-parallax-bg.jpg) center center no-repeat;
	background-size: cover;
}
.standardCard {
	position: relative;
	background-color: #fff;
	border-top: 6px solid var(--orangeColor);
	border-radius: 6px;
	box-shadow: 0 1px 4px rgba(0,0,0,0.25);
	padding: 3.0em 3.0em 2.5em 3.0em;
	margin: 0 auto;
}
.builderContactCard {
	position: relative;
	background-color: #fff;
	border-top: 6px solid var(--greenColor);
	border-radius: 6px;
	box-shadow: 0 1px 4px rgba(0,0,0,0.25);
	padding: 3%;
	max-width: 1200px;
	margin: 0 auto 2.5em auto;
}
.visitBeaumont {
	display: none;
	border-radius: 5px;
}

/* --------- TYPOGRAPHY -------------------- 
		
	GOOGLE FONTS
	
	HEADLINES
	font-family: 'Poppins', sans-serif;
	font-weight: 200, 400, 700;
	
	BODY COPY
	font-family: 'Roboto', sans-serif;
	font-weight: 300, 400, 700;
		
*/

h1,h2,h3 {
	font-family: var(--headlinesFont);
	font-weight: 700;
	line-height: 1.2em;
	margin: 0 0 0.8em 0;
	color: var(--headlinesColor);
}
.colorSection h1, .colorSection h2, .colorSection h3 {
	color: var(--greenColor);
}
.parallaxSection h1, .parallaxSection h2, .parallaxSection h3 {
	color: var(--greenColor);
}
h1 {
	font-size: 2.6em;
}
h2 {
	font-size: 2.1em;
}
h3 {
	font-size: 1.6em;
}
span.withSeparator {
	display: inline-block;
	position: relative;
	padding-bottom: 0.75em;
	margin-bottom: 0.25em;
}
span.withSeparator:after {
	content: '';
	position: absolute;
	width: 75%;
	left: 0;
	transform: none;
	bottom: 0;
	min-width: 100px;
	max-width: 200px;
	height: 1px;
	background-color: transparent;
	border-top: 2px solid var(--greenColor);
}
.colorSection span.withSeparator:after,
.parallaxSection span.withSeparator:after {
	border-top: 2px solid #fff;
}
.centered span.withSeparator:after {
	left: 50%;
	transform: translateX(-50%);
}
span.headingSubtitle {
	display: block;
	font-family: var(--bodyCopyFont);
	text-transform: uppercase;
	font-size: 0.45em;
	font-weight: 400;
	letter-spacing: 0.06em;
	color: var(--blueColor);
	line-height: 1.5em;
	margin: 0.3em 0;
}
.siteBuy h3 span.headingSubtitle {
	font-size: 0.65em;
}
.colorSection span.headingSubtitle {
	color: #fff;
	color: rgba(255,255,255,0.6);
}
.parallaxSection span.headingSubtitle {
	color: #fff;
	color: rgba(255,255,255,0.8);
}
.heroSection h1 {
	font-weight: 600;
	font-size: 3.5em;
	margin: 0 0 0.25em 0;
	color: #fff;
	text-shadow: 0 0 20px rgba(0,0,0,0.85);
}
.footer h2 {
	color: #88bb47;
	font-size: 1.4em;
	font-weight: 400;
	text-transform: uppercase;
	margin-bottom: 0.6em;
}
.imageBanner h3 {
	color: #fff;
	text-transform: uppercase;
	text-align: center;
	margin: 0;
	font-weight: 400;
	font-size: 1.4em;
	background-color: rgba(0,0,0,0.6);
	padding: 1.2em 1.4em;
	text-shadow: 0 0 4px rgba(0,0,0,0.3);
}
.imageBannerTileHome1 h3,
.imageBannerTileHome3 h3 {
	background-color: rgba(0,153,213,0.75);
}
.imageBannerTileHome2 h3,
.imageBannerTileHome4 h3 {
	background-color: rgba(114,173,89,0.77);
}
.verticalBanner h3 {
	text-transform: none;
	font-size: 1.5em;
}
p {
	font-family: var(--bodyCopyFont);
	color: var(--bodyCopyColor);
	font-size: 1.1em;
	line-height: 1.65em;
	margin: 0 0 1.0em 0;
	font-weight: 400;
}
.colorSection p,
.parallaxSection p {
	color: #fff;
}
p.finePrint {
	font-size: 0.9em;
	color: #7b97a4;
}
p span.finePrint {
	display: block;
	font-size: 0.9em;
}
.heroSection p.leadIn {
	font-size: 1.65em;
	line-height: 1.6em;
	color: #fff;
	font-weight: 300;
	text-shadow: 0 0 16px rgba(0,0,0,0.85);
	margin: 0 auto;
}
p.pullQuote {
	font-style: italic;
}
p.byLine {
	font-size: 1.0em;
	opacity: 0.8;
	font-weight: 700;
	margin-top: -0.6em;
}
p.byLine span.byLineTitle {
	font-weight: 400;
}
.footer p {
	font-size: 1.0em;
	line-height: 1.5em;
	color: #fff;
}
.verticalBannerContent p {
	font-size: 1.05em;
}

h1 strong,h2 strong,h3 strong,h4 strong {
	font-weight: 700;
}
p strong {
	font-weight: 700;
}


/* --------- LISTS -------------------------------------------------- */

ul, ol {
	list-style: disc;
	margin: 0 0 1.6em 1.2em;
}
li {
	font-family: var(--bodyCopyFont);
	color: var(--bodyCopyColor);
	font-size: 1.1em;
	line-height: 1.4em;
	margin: 0 0 0.6em 0;
	font-weight: 400;
}
li::marker {
	color: #999;
  }
li strong {
	font-weight: 700;
}
li span.fa-li {
	color: #1fb7c9;
	font-size: 0.9em;
	left: -2.5em; // this is an override of the font-awesome attribute to give a little more space between the bullet and the text
}
.colorSection li,
.parallaxSection li {
	color: #fff;
}
.colorSection li span.fa-li {
	color: rgba(255,255,255,0.5);
}


/* ---------  FONT-AWESOME ICONS  ------------------------------------------------- */

.far, .fas, .fal, .fab {
	margin: 0;
}
.button i {
	display: inline-block;
	margin-left: 0.4em;
	font-size: 1.0em;
}


/* --------- FORMS -------------------------------------------------- */
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}
::-webkit-input-placeholder { /* WebKit browsers */
    color:    #ccc;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #ccc;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #ccc;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #ccc;
}
::-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #ccc;
}


/* --------- TABLES ------------------------------------------------- */







/* --------- IMAGES, VIDEOS & MAPS ------------------------------------------------- */
.sliderContainer {
	position: relative;
}
.fancybox-bg {
	background-color: #2b2f32;
}
.fancybox-slide--html .fancybox-content {
  	padding: 4.5em 3.5em;  
}
.fill {
	width: 100%;
	height: auto;
	vertical-align: middle;
}
.videoWrapper {
	background-color: #fff;
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 0px;
	height: 0;
	overflow: hidden;
	margin: 0 auto;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	overflow: hidden;
}
.headerLogo {
	display: inline-block;
	width: auto;
	height: 85px;
}
.footerLogo {
	display: block;
	max-width: 90px;
	margin: 0 0 1.8em 0;
}
.googleMap1 {
	width: 100%;
	height: 560px;
}
.footerGoogleMap {
	width: 100%;
	height: 260px;
}
.buyFooterGoogleMap {
	width: 100%;
	height: 450px
}
.buyFooterGoogleMapWithRightBorder {
	border-right: 5px solid #fff;
	width: calc(100% - 3px);
}
.builderContactCardImg {
	display: block;
	width: 100%;
	max-width: 400px;
	height: auto;
	margin: 0 auto;
	border-radius: 3px;
}
.imageBG {
	min-height: none;
}
.imageBGTriomphe1 {
	background: transparent url(/images/triomphe/dimaro3.jpg) center center no-repeat;
	background-size: cover;
}
.imageBGLots1 {
	background: transparent url(/images/lots/merano.jpg) center center no-repeat;
	background-size: cover;
}
.imageBGLocation1 {
	background: transparent url(/images/location/location-explore.jpg) center center no-repeat;
	background-size: cover;
}
.imageBGLocation2 {
	background: transparent url(/images/location/location-schools.jpg) center center no-repeat;
	background-size: cover;
}
.imageBGLocation3 {
	background: transparent url(/images/location/location-rec.jpg) center center no-repeat;
	background-size: cover;
}
.imageBGLocation4 {
	background: transparent url(/images/location/location-retail.jpg) center center no-repeat;
	background-size: cover;
}
.imageBGLocation5 {
	background: transparent url(/images/location/location-driving.jpg) center center no-repeat;
	background-size: cover;
}
.triomphe-hero-logo {
	margin: -3.0em auto 5.0em auto; 
	width: 200px; 
	height: auto;
}
.eaglemont-hero-logo {
	margin: -2em auto 2.5em auto; 
	width: 180px; 
	height: auto;
}


/* --------- LINKS & NAVIGATION -------------------------------------------------- */
a:link, a:visited {
	color: var(--linkColor);
	text-decoration: none;
	transition: color 250ms;
	outline: none;
	transition: all 200ms;
}
a:hover, a:focus {
	color: var(--linkHoverColor);
	outline: none;
}
.parallaxSection a.parallaxUnderlineLink:link, .parallaxSection a.parallaxUnderlineLink:visited,
.colorSection a.colorSectionUnderlineLink:link, .colorSection a.colorSectionUnderlineLink:visited {
	color: #fff;
	border-bottom: 1px solid rgba(255,255,255,0.35);
	transition: none;
}
.parallaxSection a.parallaxUnderlineLink:hover, .parallaxSection a.parallaxUnderlineLink:focus,
.colorSection a.colorSectionUnderlineLink:hover, .colorSection a.colorSectionUnderlineLink:focus {
	border-bottom: 1px solid rgba(255,255,255,1.0);
}
.parallaxSection a.parallaxUnderlineLinkAlt:link, .parallaxSection a.parallaxUnderlineLinkAlt:visited,
.colorSection a.colorSectionUnderlineLinkAlt:link, .colorSection a.colorSectionUnderlineLinkAlt:visited {
	color: rgba(255,255,255,0.65);
	border-bottom: none;
	transition: none;
}
.parallaxSection a.parallaxUnderlineLinkAlt:hover, .parallaxSection a.parallaxUnderlineLinkAlt:focus,
.colorSection a.colorSectionUnderlineLinkAlt:hover, .colorSection a.colorSectionUnderlineLinkAlt:focus {
	color: rgba(255,255,255,1.0);
	border-bottom: 1px solid #fff;
}
.mainNav {
	/* NOTE: There is also some JS that controls some of the .mainNav attributes in the site.js file */
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;    
    align-items: center;
    align-content: center;
	width: calc(100% - 150px); /* full width minus room for the logo */
	max-width: 900px;
	position: relative;
}
.mobileMainNavToggle {
	display: none;
}
.mainNav a:link, 
.mainNav a:visited {
	display: inline-block;
	font-family: var(--headlinesFont);
	color: var(--headlinesColor);
	text-transform: uppercase;
	font-weight: 400;
	font-size: 1.0em;
	padding: 1.0em 0.5em;
	margin-top: 10px; /* this is to counter-act the links being pushed up and no longer vertically centered because of the 10px margin on the :after border */
	transition: all 250ms ease;
}
.mainNav a:link:after, 
.mainNav a:visited:after {
	display: block;
	content: '';
	margin-top: 10px;
	border-bottom: 3px solid var(--linkHoverColor);
	transform: scaleX(0);
	transition: transform 250ms ease;
}
.mainNav a:hover, 
.mainNav a:focus {
	color: var(--linkHoverColor);
}
.mainNav a:hover:after, 
.mainNav a:focus:after {
	transform: scaleX(1);
}
.mainNav a.visitUsLink:link, 
.mainNav a.visitUsLink:visited {
	background-color: var(--linkColor);
	margin-top: 0px;
	padding: 0.9em 1.3em;
	color: #fff;	
	border-radius: 2px;
}
.mainNav a.visitUsLink:after {
	display: none;
}
.mainNav a.visitUsLink:hover, 
.mainNav a.visitUsLink:focus {
	background-color: var(--linkHoverColor);
}
.siteHome a.homeLink,
.siteTriomphe a.triompheLink,
.siteEaglemont a.eaglemontLink,
.siteLots a.lotsLink,
.siteBuy a.buyLink,
.siteLocation a.locationLink {
	color: var(--linkColor);
}
.siteHome a.homeLink:after,
.siteTriomphe a.triompheLink:after,
.siteEaglemont a.eaglemontLink:after,
.siteLots a.lotsLink:after,
.siteBuy a.buyLink:after,
.siteLocation a.locationLink:after {
	display: block;
	content: '';
	margin-top: 10px;
	border-bottom: 3px solid var(--linkColor);
	transform: scaleX(1);
}
.documentsBar {
	padding: 1.3em 5%;
	text-align: center;
	background-color: var(--midnightBlueColor);
	color: #fff;
	font-family: var(--headlinesFont);
	font-weight: 400;
}
.documentsBarFooter {
	background-color: #253959;
	padding: 1.8em 5%;
}
.documentsBar a:link,
.documentsBar a:visited {
	display: inline;
	background-color: var(--linkColor);
	color: #fff;
	font-size: 0.9em;
	letter-spacing: 0.05em;
	padding: 0.3em 0.7em;
	border-radius: 3px;
	margin-left: 5px;
	text-transform: uppercase;
}
.documentsBar a:hover,
.documentsBar a:focus {
	background-color: var(--linkHoverColor);
}
.heroScrollToContent:link,
.heroScrollToContent:visited {
	color: rgba(255,255,255,0.8);
	font-size: 2.0em;
	padding: 0.3em;
	display: inline-block;
	position: absolute;
	bottom: 0.7em;
	left: 50%;
	transform: translateX(-50%);
	transition: color 250ms ease;
}
.heroScrollToContent:hover {
	color: rgba(255,255,255,1.0);
}
.button:link,
.button:visited {
	display: inline-block;
	background-color: var(--blackColor);
	color: #fff;
	padding: 1.1em 1.5em;
	margin: 1px 1px 1px 0;
	border: none;
	border-radius: 2px;
	font-size: 1.05em;
	line-height: 1.25em;
	letter-spacing: 0.05em;
	font-family: var(--headlinesFont);
	text-transform: uppercase;
	font-weight: 400;
	transition: all 250ms ease;
}
.button:hover,
.button:focus {
	background-color: var(--blackHoverColor);
}
.smallButton:link,
.smallButton:visited {
	font-size: 0.95em;
	padding: 1.0em 1.3em;
}
.tinyButton:link,
.tinyButton:visited {
	font-size: 0.85em;
	padding: 0.8em 1.2em;
}
.greenButton:link,
.greenButton:visited {
	background-color: var(--linkColor);
	color: #fff;
}
.greenButton:hover,
.greenButton:focus {
	background-color: var(--linkHoverColor);
}
.colorSection .orangeButton:hover, .colorSection .orangeButton:focus {
	background-color: rgba(255,255,255,0.17);
}
.greenTransparencyButton:link,
.greenTransparencyButton:visited {
	background-color: rgba(114,173,89,0.18);
	color: var(--blueColor);
}
.greenTransparencyButton:hover,
.greenTransparencyButton:focus {
	background-color: rgba(0,153,213,1.0);
	color: #fff;
}
.whiteTransparencyButton:link,
.whiteTransparencyButton:visited {
	background-color: rgba(255,255,255,0.17);
	color: #fff;
}
.whiteTransparencyButton:hover,
.whiteTransparencyButton:focus {
	background-color: rgba(255,255,255,1.0);
	color: var(--orangeHoverColor);
}
p + .button {
	margin-top: 1.0em !important;
}
.heroSection p.leadIn + .button {
	margin-top: 2.0em !important;
}





/*
====================================================================================================
@media Queries
====================================================================================================
*/

@media all and (max-width: 619px) /* Mobile  ---------------------------------------- */
{
	.documentsBar {
		padding: 1.0em 5%;
	}
	.documentsBarFooter {
		padding: 1.6em 5%;
	}
	.documentsBar a:link,
	.documentsBar a:visited {
		display: block;
		max-width: 150px;
		margin: 6px auto 0 auto;
		padding: 0.5em 0.9em;
	}
	.documentsBar a:first-of-type {
		margin-top: 15px;
	}
}


@media all and (max-width: 1023px) /* Mobile  ---------------------------------------- */
{
	.exactOneFifthColumn,
	.oneQuarterColumn,
	.oneThirdColumn,
	.exactOneThirdColumn,
	.twoThirdsColumn,
	.oneHalfColumn,
	.exactOneHalfColumn,
	.threeQuarterColumn {
		width: 100%;
	}
	.mobileCenter {
		text-align: center;
	}
	.mobileHide {
		display: none !important;
	}
	.mobileShow {
		display: inherit !important;
	}
	.mobileShowInline {
		display: inline-block !important;
	}
	.flexbox-row-reverse-mobile {
		flex-direction: row-reverse;
	}
	.flexbox-column-reverse-mobile {
		flex-direction: column-reverse;
	}
	.mobileElementMargin {
		margin-bottom: 1.6em;
	}
	.mobileElementMarginSmall {
		margin-bottom: 1.0em;
	}
	.mobileElementMarginLarge {
		margin-bottom: 2.75em;
	}
	.section {
		padding: 4.0em 0;
	}
	.noPaddingSection {
		padding: 0;
	}
	.headerBar {
		padding: 0.7em 0;
	}
	.headerBarNavContainer {
		display: block;
		position: relative;
	}
	.headerLogo {
		height: 50px;
	}
	.mobileMainNavToggle {
		display: block;
		font-size: 1.6em;
		position: absolute;
		right: 0;
		top: 12px;
	}	
	.mainNav {
		display: none;
		width: 100%;
		max-width: none;
		padding-top: 1.2em;
	}
	.mainNav a:link, 
	.mainNav a:visited,
	.mainNav a.visitUsLink:link,
	.mainNav a.visitUsLink:visited {
		display: block;
		text-align: center;
		margin: 3px 0;
		padding: 1.0em 1.4em;
		background-color: #eee;
		color: var(--bodyCopyColor);
		border-radius: 2px;
	}
	.mainNav a.visitUsLink i {
		display: none;
	}
	.mainNav a:link:after, 
	.mainNav a:visited:after, 
	.mainNav a:hover:after, 
	.mainNav a:focus:after {
		display: none;
	}
	.mainNav a:hover, .mainNav a:focus {
		
	}
	.siteHome a.homeLink,
	.siteTriomphe a.triompheLink,
	.siteEaglemont a.eaglemontLink,
	.siteLots a.lotsLink,
	.siteBuy a.buyLink,
	.siteLocation a.locationLink {
		background-color: var(--linkColor);
		color: #fff;
	}
	.footerLogo {
		margin: 0 auto 2.0em auto;
	}
	.footer {
		text-align: center;
	}
	.footer .joinUsOnInstagram {
		margin-top: 1.0em;
	}
	h1 {
		font-size: 2.6em;
	}
	h2 {
		font-size: 2.0em;
	}
	h3 {
		font-size: 1.4em;
	}
	.heroSection {
		min-height: calc(100vh - 75px);
	}
	.heroSection h1 {
		font-size: 2.6em;
		margin: 0 0 0.3em 0;
	}
	.heroSection p.leadIn {
		font-size: 1.3em;
		text-shadow: 0 0 16px rgba(0,0,0,0.85);
	}
	p {
		font-size: 1.0em;
	}
	li {
		font-size: 1.0em;
	}
	.imageBG {
		min-height: 50vh;
	}
	.imageBannerTile {
		width: 100%;
		padding-top: 25vh;
		margin-bottom: 1px;
	}
	.imageBanner h3 {
		font-size: 1.2em;
		padding: 1.0em 1.0em;
	}
	.verticalBanner, .verticalBannerAlt {
		padding: 65% 0 0 0;
	}
	.verticalBannerContent {
		padding: 3.0em 2.0em 2.4em 2.0em;
		border-radius: 0 0 2px 2px;
	}
	.standardCard {
		margin: 0 auto 2.5em auto;
		padding: 3.0em 1.5em 2.5em 1.5em;
	}
	.builderContactCard {
		padding: 5% 5% 10% 5%;
	}
	.buyFooterGoogleMapWithRightBorder {
		border-right: none;
		width: 100%;
	}
	.triomphe-hero-logo {
		margin: -1.5em auto 3.0em auto; 
	}
	.eaglemont-hero-logo {
		margin: -1.5em auto 3em auto; 
	}

	

} /* end mobile portrait & landscape ------------------------------------------ */











@media all and (min-width: 769px) and (max-width: 1023px)  /* 1023 -------------------------------------------------------------------------------- */
{
	.oneQuarterColumn {
		width: 46%; /* we resize quarters to halfs as they just get too skinny */
	}
	.imageBannerTile {
		width: 50%;
		padding-top: 25vh;
		margin-bottom: 0;
	}
	.imageBanner h3 {
		padding: 1.2em 1.0em;
		font-size: 1.4em;
	}

	
	

} /* end 769 ------------------------------------------------------------------- */







@media all and (min-width: 1024px) and (max-width: 1279px)  /* 1024 ------------------------------------------------------------------------------- */
{



} /* end 1024 ------------------------------------------------------------------ */






@media all and (min-width: 1280px) and (max-width: 1915px)  /* 1915  ------------------------------------------------------------------------------- */
{
	


} /* end 1915 ----------------------------------------------------------------- */







@media all and (min-width: 1916px)  /* 1920 & > ------------------------------------------------------------------------------- */
{

	.exactOneHalfColumn .wrapper {
		width: 56%;
		padding: 15% 0;
		max-width: none;
	}
	.builderContactCard {
		padding: 2%;
	}

}













/* 	
------------------------------------------------------------------
	@media Query TABLETS & BIG MOBILE PHONES
------------------------------------------------------------------
*/


/* iPads (landscape) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) 
{
	

} /* end iPad landscape */






/* iPads (portrait) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) 
{
		



} /* end iPad portrait */




/* iPhone  (Portrait) */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) 
{ 



    
} /* end iPhones (Portrait) */




/* iPhone  (Landscape) */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) 
{ 



    
} /* end iPhones (Landscape) */




/* iPhone Plus (Portrait) */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) 
{ 
    



    
} /* end iPhone Plus (Portrait) */




/* iPhone Plus (Landscape) */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) 
{ 
    


    
} /* end iPhone Plus (Landscape) */
















/* 	
------------------------------------------------------------------
	@media Query High Resolution displays 
------------------------------------------------------------------
*/


@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 
  





} /* end device-pixel-ratio: 2 */