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

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

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

b {
  font-weight: normal;
  font-family: "NormsMed";
}

h1 {
  font-weight: normal;
  font-size: 3vw;
  line-height: 1.3em;
}
.gtsuper {
  font-family: "GTSuper";
}

.holdingintro {
  width: 100%;
  height: 100vh;
  position: relative;
  background: #f7f6eb;
  overflow: hidden;
}
.introbg {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background: url(/img/content/bg.svg) 50% 50% no-repeat;
  background-size: cover;
}
.introext {
  width: 100%;
  height: 100%;
  background: url(/img/content/introext.png) 50% 50% no-repeat;
  background-size: auto 59vh;
  position: absolute;
  top: 0;
  left: 0;
}
.introleft,
.introright {
  width: 50%;
  height: 100vh;
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  font-size: 3.5vh;
}
.introleft {
  left: 0;
  justify-content: flex-end;
  padding-right: 33vh;
}
.introright {
  right: 0;
  justify-content: flex-start;
  padding-left: 33vh;
}
.introshape {
  width: 100%;
  height: 60vh;
  position: absolute;
  top: 20vh;
  background: url(/img/content/introshape.svg) 50% 50% no-repeat;
  background-size: contain;
}

.introcontent {
  background: #373639;
  width: 100%;
  height: 100vh;
  position: relative;
  clip-path: polygon(50% 0%, 100% 27vw, 100% 100%, 0 100%, 0% 27vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #f7f6eb;
  box-sizing: border-box;
  padding-bottom: 40px;
}

.introcontent svg {
  width: 28vw;
  margin-bottom: 5vw;
}
.introtext {
  font-size: 1.5vw;
  line-height: 1.4em;
  text-align: center;
  padding: 0 10vw;
}

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

.hero {
  width: 100%;
  height: 100vh;
  background: 50% 80% no-repeat url(/img/content/ext.jpg);
  background-size: cover;
}

.gallerysection {
  background: #c8d1db;
  padding: 10vw 0;
  position: relative;
}
.gallery .slide {
  background: 50% 50% no-repeat #aaa;
  background-size: cover;
  margin: 0 70px;
  transition: opacity 0.5s;
  opacity: 0.5;
  position: relative;
  width: 70vw;
  height: 45vw;
}
.slick-arrow {
  position: absolute;
  top: 0;
  width: 140px;
  height: 45vw;
  overflow: hidden;
  text-indent: -9999px;
  border: 0;
  background: 50% 50% no-repeat;
  background-size: 30px auto;
  cursor: pointer;
  z-index: 1000;
}
.slick-prev {
  left: calc(((100% - 70vw) / 2) - 140px);
  background-image: url(/img/ui/leftarrow.svg);
}
.slick-next {
  right: calc(((100% - 70vw) / 2) - 140px);
  background-image: url(/img/ui/rightarrow.svg);
}
.gallery .slide.slick-active {
  opacity: 1;
  top: 0;
}

.captions {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10vw;
  box-sizing: border-box;
  text-align: center;
  padding-top: 20px;
  font-size: 16px;
  line-height: 1.3em;
}

.contactsection {
  background: #f7f6eb;
  box-sizing: border-box;
  padding: 10vw;
}
.contacthead {
  text-align: center;
  margin-bottom: 7.5vw;
}
.contacthead img {
  margin-bottom: 30px;
}

.bottomborder {
  width: 100%;
  height: 7.5vw;
  background: url(/img/content/bg.svg) 50% 50% no-repeat #c8d1db;
  background-size: cover;
}

.agency {
  width: 75%;
  margin: 40px auto;
  text-align: center;
  font-size: 14px;
  line-height: 1.4em;
}
.agentlogo {
  display: block;
  height: 30px;
  background: 50% 50% no-repeat;
  background-size: contain;
  margin: 0 auto 30px auto;
  width: 140px;
}
.agents {
  display: flex;
  justify-content: center;
}
.agents a {
  color: #373639;
}
.agent {
  margin: 0 4vw;
}
.contactline {
  width: 60%;
  height: 2px;
  background: #373639;
  margin: 0 auto;
}

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

button {
  padding: 15px 30px;
  margin-top: 20px;
  border: 1px solid white;
  background: transparent;
  color: #f7f6eb;
  border-radius: 2px;
  font-size: 16px;
  cursor: pointer;
}

/* #Media Queries
================================================== */

@media (max-aspect-ratio: 1.2/1) {
  .introleft,
  .introright {
    width: 100%;
    height: 50vh;
    left: 0;
    align-items: center;
    box-sizing: border-box;
    font-size: 4vh;
  }
  .introleft {
    top: 0;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 0 38vh 0;
  }
  .introright {
    bottom: 0;
    flex-direction: column;
    top: auto;
    justify-content: flex-start;
    padding: 38vh 0 0 0;
  }
}

/* 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 (max-width: 1099px) {
  .introcontent svg {
    width: 35vw;
  }
  .introtext {
    font-size: 18px;
    line-height: 1.4em;
  }

  .slick-arrow {
    width: 20px;
    background-size: contain;
    height: 55vw;
  }
  .slick-prev {
    left: 20px;
  }
  .slick-next {
    right: 20px;
  }
  .gallery .slide {
    width: 85vw;
    height: 55vw;
  }
  .captions {
    padding-top: 15px;
  }
}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
  .hero {
    height: 50vh;
  }
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
  h1 {
    font-size: 28px;
    margin-bottom: 60px;
  }

  .introext {
    background-size: auto 39vh;
  }
  .introshape {
    height: 40vh;
    position: absolute;
    top: 30vh;
  }
  .introleft {
    padding: 0 0 24vh 0;
  }
  .introright {
    padding: 24vh 0 0 0;
  }

  .introcontent svg {
    width: 65vw;
    margin-bottom: 30px;
  }
  .downarrow {
    height: 20px;
  }

  .gallerysection {
    padding-bottom: 50px;
  }
  .captions {
    height: 50px;
    padding-top: 10px;
    font-size: 14px;
  }

  .slick-arrow {
    width: 15px;
    background-size: contain;
    height: 55vw;
  }
  .slick-prev {
    left: 5px;
  }
  .slick-next {
    right: 5px;
  }

  .agentlogo {
    margin: 40px auto 30px auto;
  }
  .agents {
    flex-direction: column;
  }
  .agent {
    margin: 10px;
  }
  .contactline {
    width: 100%;
  }
}

/* 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: "GTSuper";
  src: url("/fonts/GT-Super-Display-Regular.woff2") format("woff2"),
    url("/fonts/GT-Super-Display-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Norms";
  src: url("/fonts/TT_Norms_Pro_Regular.woff2") format("woff2"),
    url("/fonts/TT_Norms_Pro_Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "NormsMed";
  src: url("/fonts/TT_Norms_Pro_Medium.woff2") format("woff2"),
    url("/fonts/TT_Norms_Pro_Medium.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}