@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 "nagel-variable", Arial, sans-serif;
	color: #331414;
	background: #fff url(/img/ui/bg.gif) repeat-x top center;
	height:100%;
	font-variation-settings: "slnt" 0, "wght" 400;
}

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

.gyst {font-family: "GystRegular";font-style: normal;font-weight: 400;}

/* #Page Styles
================================================== */

.mobile {opacity:0}

.videocontainer {position:fixed;top:0;left:0;width:100%;height:100vh}
video {position:absolute;top:0;left:0;width:101%;height:100%;object-fit:cover;object-position: 50% 50%;z-index:5}

.creamtext {color:#F2E4DA}
.orangetext {color:#F7B699}

h2 {font-size:3.125rem;line-height:1.3em}

.downarrow {width:100%;height:60px;background:50% 50% no-repeat url(/img/ui/downarrow.svg);background-size:contain;z-index:10;position:absolute;bottom:10vh;left:0}

.animatein {visibility:hidden}

#smooth-wrapper {
  overflow: hidden;
}

#smooth-content {
  will-change: transform;
}
.videospace {width:100%;height:100vh;position:relative;z-index:10}
.pagesection {position:relative;width:100%;min-height:100vh;display:flex;align-items:center;justify-content:center;z-index:10}

.section1 {background: linear-gradient(180deg, rgba(242, 228, 218, 0.00) 0%, #F2E4DA 30.9%);}
.logobar {display:flex;align-items:center;justify-content:center;width:100%;height:auto;position:absolute;top:0;left:0;z-index:20;box-sizing: border-box;padding:60px 5vw;white-space: nowrap;}
.logobar .barleft {text-align:left}
.logobar .barlogo {flex:1 1 100%;text-align: center;}
.logobar .barright {text-align:right}

.spacetext {text-align: center;font-size: 2.5rem;line-height: 130%;padding:10vw 0}

.formsection {background: #331414;padding:7.5vw 15vw;text-align: center;font-size:1rem;line-height:1.3em}
.formsection h2 {margin-bottom:4rem}
.register-form {display:flex;justify-content: center;padding-top:1rem;}
.register-form input {margin:0;border:0;padding:0;background:none;font-family:"nagel-variable", Arial, sans-serif;font-size:1rem;border-bottom: 1px solid #FFF0E6;padding:16px 20px;margin:0 15px;text-align:center;line-height: 0.8em;color:#F2E4DA}
.register-form input::placeholder {color:#fff;opacity:0.25;letter-spacing:0.15em}
.inputname {flex:0 0 10rem}
.inputemail {flex:0 0 15rem}
button {font-family:"nagel-variable", Arial, sans-serif;font-size:1rem;line-height: 0.8em;border:0;padding:16px 20px;background: #805120;color:#fff;letter-spacing: 0.15em;margin:0 15px;cursor: pointer;transition:background 0.3s ease}
button:hover {background: #F7B699}

.footer {position:relative;background:url(/img/content/footerbg.jpg) 50% 50% no-repeat;background-size:cover;overflow:hidden;font-size:0.875rem;line-height:1.3em;color:#F2E4DA}
.footer a {color:#F2E4DA;text-decoration:underline}
.footer:before {content:'';display:block;background: linear-gradient(180deg, rgba(51, 20, 20, 0.36) 62.49%, rgba(51, 20, 20, 0.00) 100%);position:absolute;top:0;left:0;width:100%;height:100vh}
.footerpattern {margin-top:-1px;position:relative}
.footerlogo {position:relative;z-index:2;width:100%;bottom:-10px}

.details {position:relative;display:flex;padding:calc(100% / 24)}
.col1 {flex:0 0;flex-basis:calc((100% / 22) * 8);box-sizing: border-box;border-right: 0.5px solid #FFF0E6;padding-right:12.5%}
.col2 {flex:1 1;padding-left:calc(100% / 22);box-sizing: border-box;}
.colhead {font-size:1.5rem;line-height:1.3em;padding-bottom:3rem}
.agents {display:flex}
.agents .agent {flex:1 1;box-sizing: border-box;padding-right:20px}
.agents .agent:first-child {flex:0 0;flex-basis:calc((100% / 13) * 6)}
.agent .logo {display:block;width:130px;height:30px;margin-bottom:2rem;background:left center no-repeat;background-size:contain}
.contact.agentnames {display:flex}
.contact .agentname {flex:0 0 50%;box-sizing: border-box;padding-right:1rem;}
.contact p {margin-bottom:10px}

.copyright {background: #F2E4DA;display:flex;justify-content:space-between;padding:2rem;position:relative;margin-top:-1px}
.copyright a {color:#331414;text-decoration:underline}
.copyright p {margin:0}

/****************************************************
* 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
================================================== */
	
	@media (orientation: portrait) {
		.mobile {
			opacity:1
		}
		.desktop {
			opacity:0
		}
	}
	
	/* biggest desktop */
	@media only screen and (max-width: 1300px) {
		.details {flex-direction:column}
		.col1 {border-right:none;border-bottom:1px solid #FFF0E6;padding-bottom:2rem;margin-bottom:3rem}
		.col2 {padding-left:0}
		
		.footer:before {background: linear-gradient(180deg, rgba(51, 20, 20, 0.5) 62.49%, rgba(51, 20, 20, 0.00) 100%);bottom:0;height:200vh}
	}
	
	/* bigger desktop */
	@media only screen and (max-width: 1229px) {
		h2 {font-size:40px;line-height:1.3em}
	}

	/* 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) {
		.agents {flex-direction:column}
		.agentnames {padding-bottom:2rem}
		
		.section2 {align-items:flex-end}
		
		.section1 {background: linear-gradient(180deg, rgba(242, 228, 218, 0.00) 0%, #F2E4DA 15%);}
		
		.downarrow {bottom:15vh}
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		.logobar {flex-direction:column;padding:40px}
		.barlogo {order:1;margin-bottom:1rem}
		.barleft {order:2}
		.barright {order:3}
		
		.spacetext {font-size:1.5rem;line-height:1.3em}
		
		h2 {font-size:2rem;line-height:1.3em}
		
		.formsection {padding:15vw 7.5vw}
		.register-form {flex-direction: column;}
		.register-form input {flex:0 0 30px;margin:0 0 2rem 0}
		button {margin:0}
		
		.colhead {padding-bottom:1.5rem}
		
		.details {padding:7.5vw}
		.contact.agentnames {flex-direction:column}
		.contact .agentname {margin-bottom:1.5rem}
		.copyright {flex-direction: column;padding:1rem 1rem 2rem 1rem}
		.copyright p:first-child {margin-bottom:0.5rem}
	}

	/* 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: "GystRegular";
  src: url('/webFonts/GystRegular/font.woff2') format('woff2'), url('webFonts/GystRegular/font.woff') format('woff');
}
@font-face {
  font-family: "GystLight";
  src: url('/webFonts/GystLight/font.woff2') format('woff2'), url('webFonts/GystLight/font.woff') format('woff');
}
@font-face {
  font-family: "GystMedium";
  src: url('/webFonts/GystMedium/font.woff2') format('woff2'), url('webFonts/GystMedium/font.woff') format('woff');
}