@import url(/css/reset.css);
@import url(/css/text.css);
/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */
html {
	height:100%
}
body {
	font: 12px/16px 'Poppins', Arial, sans-serif;
	color: #BD8164;
	background: #302C20;
	height:100%;
}

.animatein {visibility: hidden;}
.resizeimg {max-width: 100%;height: auto;}

h2 {font-weight: normal;font-size:36px;line-height:1em;}
.fixture {font-family: "FixtureCondensedRegular";text-transform: uppercase;}


/* #Page Styles
================================================== */
.light {font-family: 'fixture-condensedlight';}
.intro {width:100%;height:100vh;position:relative;display:flex;align-items: center;justify-content: center;overflow: hidden;background:#302C20}
.introanim {position:absolute;bottom:60px;height:calc(100vh - 120px);width:calc(70% - 7vw - 20px);left: 7vw;}
.intro .logo {height:auto;width:23%;position:absolute;top:60px;right:40px}
.downarrow {width:100%;height:20px;position:absolute;left:0;bottom:15px;background:50% 50% no-repeat url(/img/ui/downarrow.svg);background-size: contain;}

.introtext {padding:5vw 10vw 5vw 5vw;box-sizing: border-box;max-width:1200px;font-size:60px;line-height:1em;}
.introtext{ span{color: #F5F5F0}
}

.introline {background:#BD8164;width:1px;height:calc(100vh - 120px);position: absolute;top:60px;right:30%;z-index:500}

.galleryholder {position: relative;padding:0 3vw 0px 3vw;}
.gallery {width:100%;height:90vh;position:relative}
.gallery .slide {width:100%;height:100%;background:50% 50% no-repeat;background-size:cover;position:relative}
.gallery .slide .caption {font-size: 12px;line-height:1em;color:#fff;text-shadow: 2px 2px 7px #000000;position:absolute;top:20px;right:20px}
.cycle-pager {position:absolute;bottom:20px;left:0;padding-top:20px;width:100%;height:12px;display:flex;justify-content: center;z-index: 1000;}
.cycle-pager span {overflow: hidden;text-indent: -9999px;flex:0 0 12px;height:12px;box-sizing: border-box;border:2px solid #BD8164;border-radius: 50%;transition:background 0.2s;margin:0 3px;cursor: pointer;}
.cycle-pager span.cycle-pager-active {background:#BD8164}
.cycle-arrow {height:100%;width:40px;position: absolute;top:0;background:50% 50% no-repeat;background-size:20px auto;cursor: pointer;}
.cycle-prev {background-image:url(/img/ui/leftarrow.svg);left:0px}
.cycle-next {background-image:url(/img/ui/rightarrow.svg);right:0px}

.shapetext {display:flex;align-items: stretch;justify-content: space-between;padding:0 3vw;position:relative ;z-index:500;font-size:48px;line-height:1em;pointer-events: none;}
.shapes {display: flex;}

.goldshape {position: relative;padding:13vw 1.5vw 1.5vw 1.5vw;box-sizing: border-box;background-image: linear-gradient(180deg, #8A5F49 0%, #BD8263 100%, #3C1717 100%);color:#E0D9C9;margin:-10vw 0 0 3vw;flex:0 0 50%;display:flex;align-items:flex-end}

.blueshape {position: relative;padding:6vw 6vw 1.5vw 1.5vw;box-sizing: border-box;position:relative;color:#fff;background-image: linear-gradient(180deg, #302C20 0%, #475C61 100%, #3C1717 100%);margin:0 3vw 0 0;flex:0 0 50%;display:flex;align-items:flex-end}

.soa {font-size:36px;line-height:1.3em;width:35%;max-width:800px;padding:3vw 3vw 0 0 ;color:#E0D9C9}
.soa thead {color:#F5F5F0}
.soa td {padding:5px 0 10px 0}
.soa tbody td {border-bottom:1px solid #BD8164}
.soa tbody tr:last-child td {border:none}


.footer {color:#E0D9C9;display:flex;justify-content: space-between;padding:6vw;font-size: 14px;line-height:1.4em;}
.footer a {color:#E0D9C9;}
.brochure {font-size:40px;line-height:1em}
.agentlogo {display:block;width:220px;height:80px;background:bottom left no-repeat url(/img/content/geraldeve.svg);background-size:contain;margin-bottom:20px}
.agent h2 {color: #BD8164;}
.bordercol {padding-left: 2vw;border-left: 1px solid #BD8164;}
h2.contact{ font-size: 40px; font-family:'fixture-condensedlight'}

/****************************************************
* Misc
****************************/
/*hide social stuff and headings on prettyphoto*/
.ppt {display:none !important}
.pp_social {display:none !important}
.pp_description {display:none !important}

.smallText { font-size: 11px; }
.smallprint {
	font-size: 11px;
	color: #BBBDC0;
}
.smallprint a { color: #BBBDC0; }
.padTop { margin-top: 30px; }
.largeText { font-size: 13px; }

.superscript {vertical-align: baseline;
	font-size: 0.8em;
	position: relative;
	top: -0.4em;}
.subscript {vertical-align: baseline;
	font-size: 0.8em;
	position: relative;
	top: 0.4em;}
	
.vmiddle {position: relative;top: 50%;  -webkit-transform: translateY(-50%);  -ms-transform: translateY(-50%);  transform: translateY(-50%);}

.caps {text-transform:uppercase;letter-spacing:0.1em}
.num {text-align:right}



/* #Media Queries
================================================== */
	
	/* biggest desktop */
	@media only screen and (max-width: 1230px) {}
	
	/* bigger desktop */
	@media only screen and (min-width: 1100px) and (max-width: 1229px) {}

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (min-width: 959px) and (max-width:1099px) {}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		.introline {width:calc(100% - 10vw);height:1px;top:140px;left:5vw}
		.introanim {width:90vw;left: 5vw;}
		.intro .logo {height:60px;width:auto;right:5vw}
		
		.gallery {height:60vh}
		.bordercol {padding-left: 0;border-left: 0;}
	
		.downarrow {height:20px;bottom:20px}
		
		.shapetext {font-size:30px;line-height:1em}
		.footer {flex-direction: column;justify-content: flex-start;}
		.footercol {padding-bottom:40px}
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		.intro .logo {height:60px}
		.introtext {font-size:36px;line-height:1em;padding:10vw}
		
		.introanim {bottom:25vh}
		
		.galleryholder {padding:0;}
		.gallery {height:40vh}
		.cycle-arrow {top:100%;height:50px}
		
		.shapetext {padding:20vw 0 0 0;flex-direction:column}
		.shapes {width:90vw;padding:5vw;align-items: flex-end;}
		.soa {width:90vw;padding:5vw}
		.goldshape {flex:0 0 45vw;padding:100px 5vw 5vw 5vw;box-sizing: border-box;margin:0}
		.tealshape {display: none;}
		.blueshape {flex:0 0 45vw;padding:5vw;box-sizing: border-box;}
		
		.footer {padding:10vw 5vw}
		h2.contact{display: none;}
		.bordercol{display: none;}

	}
	

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/

@font-face {
  font-family: "FixtureCondensedRegular";
  src: url('/webFonts/FixtureCondensedRegular/font.woff2') format('woff2'), url('/webFonts/FixtureCondensedRegular/font.woff') format('woff');
}

@font-face {
    font-family: 'fixture-condensedlight';
    src: url('/webFonts/fixture-condensedlight-webfont.woff2') format('woff2'),
         url('/webFonts/fixture-condensedlight-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}