@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: 1rem/1.3rem Arial, sans-serif;
	color: #888;
	background: #fff url(/img/ui/bg.gif) repeat-x top center;
	height:100%;
}

.text-bluff {color:#F2E8E4}

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

.flexmiddle {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
}

/* #Page Styles
================================================== */
h1 {font-size:6vw;line-height:1em}
h2 {font-size:2.6vw;line-height:1em;font-weight:normal;margin-bottom:2rem}
h3 {font-size:5vw;line-height:1em}

.gradoverlay {background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.3) 0%,    /* black at 0.3 opacity at the bottom */
    rgba(0, 0, 0, 0) 40%       /* fully transparent 40% up */
  );position:absolute;top:0;left:0;width:100%;height:100%}

.contactbutton {position:fixed;top:0;left:0;margin:0;padding:0;border:0;z-index:1000;font-size:1.25rem;line-height:1em;background:none;transition: opacity 0.5s;opacity:1}
.contactbutton.scrolled {opacity:0}
.buttoninner {position:relative;background:#F2E8E4;color:#574843;box-sizing: border-box;padding:1.5rem;border-radius:0 0 1rem 0;cursor: pointer;}
.buttoninner:hover {text-decoration: underline;}
.buttoninner::before,.buttoninner::after {content:'';display:block;width:1rem;height:1rem;background:url(/img/content/Intersect.svg) top left no-repeat;position:absolute}
.buttoninner::before {top:0;left:calc(100% - 1px)}
.buttoninner::after {top:calc(100% - 1px);left:0%}

.videobg {
  position: fixed;
  top: -1px;
  left: 0;
  width: 100%;
  height: calc(100vh + 1px);
  z-index: -1;
  background:rgba(195, 133, 130, 1);
}

.videobg video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 110%;
  height: 110%;
  object-fit: cover;
  transform: translate(-50%, -50%) scale(1.15);
  filter: blur(54px);
  opacity:0.8;
}
.introcontainer {
	width:100%;height:100vh;position:relative;background:url(/img/content/bg1.jpg) 50% 50% no-repeat;background-size:cover;clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);overflow: hidden;font-size:1.5rem;line-height:1.3em
}
.screen1 {width:100%;height:100vh;width:100%;position:absolute;top:0;left:0}
.screeninner {width:100%;height:100%;position:relative}
.logocontent {width:100%;height:auto;position:absolute;bottom:2.5vw;left:0;text-align:center}
.logocontent img {margin-left:auto;margin-right:auto;max-width:50vw}
.downarrow {width:100%;height:40px;background:url(/img/ui/downarrow.svg) 50% 50% no-repeat;background-size:contain;margin-top:2.5vw}

.screen2 {width:100%;height:auto;position:absolute;bottom:2.5vw;left:0;text-align: center;}
.screen2 p {padding:0 5vw}

.section2 {width:100%;height:100vh;position:relative;background:url(/img/content/bg2.jpg) 50% 50% no-repeat;background-size:cover;}

.screen3 {width:100%;height:auto;position:absolute;bottom:2.5vw;left:0;text-align: center;}
.screen3 p {max-width:37ch;margin-left:auto;margin-right:auto}

.section3 {width:100%;height:100vh;position:relative;}

.section4 {position:relative;width:100%;height:100vh;display:flex;align-items: center;justify-content: center;flex-direction: column;}

.contact {padding:5vw 2.5vw 2.5vw 2.5vw;box-sizing: border-box;width:100%;min-height:100vh;display: flex;flex-direction: column;justify-content: space-between;}
.footerlogo {width:65%;margin-bottom:2rem}

.contactrow1, .contactrow2, .contactrow3 {display:flex;}
.contactleft, .contactright {flex:0 0 50%}
.contactrow1 .contactleft {font-size:20px}

.colhead {font-size:1.25rem;margin-bottom:1.5rem}
.agencylogo {min-height:40px;margin-bottom:2rem}
.agent {margin-bottom:2rem}

.devrow {display:flex;}
.footercols {display:flex}
.footercol {flex:0 0 16vw;box-sizing: border-box;padding-right:2vw;}
.contactrow3 {margin-top:5vw}
.contactrow3 .contactright {text-align: right;}





/****************************************************
* 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}


.revealOnScroll.fadeInUp {
  opacity: 0;
}


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

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

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		.contact {padding:10vw 5vw 5vw 5vw}
		.contactrow1, .contactrow2 {flex-direction: column;}
		.contactrow1 .contactleft {margin-bottom:5vw}
		.footercol {flex:0 0 30vw}
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		
		h1 {font-size:2rem}
		h2 {font-size:1.25rem}
		
		h3 {font-size:2rem;margin-bottom:5rem}
		.introcontainer {font-size:1rem;line-height:1.3rem}
		.logocontent img {max-width:70vw}
		.buttoninner {padding:1rem}
		
		.colhead {font-size:1rem}
		.footercol {flex:0 0 50%}
		.agent {font-size:0.8rem}
		
		.contactrow3 {font-size:0.7rem}
		.footercols {flex-direction: column;}
		.agents {display:flex}
		.agent {flex:0 0 50%;padding-right:5vw;box-sizing: border-box;}
	}

	/* 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; }
*/