@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: 16px/22px 'Hanken Grotesk', Arial, sans-serif;
	color: #232A3C;
	background: #fff url(/img/ui/bg.gif) repeat-x top center;
	height:100%;
}

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

h1 {font-weight: normal;font-size:36px;line-height:1.2em;margin-bottom:1.5vw}
h2 {font-weight: normal;font-size:20px;line-height:1.2em;}

.goldenbook {font-family: "goldenbook", serif;
font-weight: 400;
font-style: normal;}
.minion {font-family: "minion-pro", serif;
font-weight: 400;
font-style: normal;}

.section {position:relative}
.contentsection {padding:2vw 0}
.sectioninner {margin:0 2vw;width:calc(100% - 4vw);padding:6vw;box-sizing: border-box;}

.texturebg {position:fixed;width:100%;height:100vh;top:0;left:0;background:url(/img/content/texture.jpg) 50% 50% no-repeat;background-size:cover}
.texturebg:before {content:'';display:block;background: rgba(246, 186, 177, 0.30);
background-blend-mode: multiply;width:100%;height:100%}

.pinkbg {background: var(--pink, #E7BAB1);}
.lightpinkbg {background: var(--light-pink, #FAF1EF);}
.darkbluebg {background: var(--dark-blue, #232A3C);}
.pinktext {color: var(--pink, #E7BAB1);}
.lightpinktext {color: var(--light-pink, #FAF1EF);}

.nav {position:fixed;top:0;left:0;height:100vh;width:2vw;display: flex;flex-direction: column;justify-content: center;z-index:1000}
.nav a {overflow: hidden;position: relative;width:2vw;height:2vw;display:flex;align-items: center;cursor: pointer;text-decoration: none;color: #232A3C;font-size:12px}
.nav a:before {content:'';display:block;flex: 0 0 12px;height: 12px;transform: rotate(-45deg);border: 1px solid #E7BAB1;background: #FAF1EF;margin-left:calc(1vw - 6px);margin-right:calc(1vw - 6px);box-sizing: border-box;transition:border 0.2s, background 0.2s;z-index:20}
.nav a:after {content:'';display:block;background:#FAF1EF;position:absolute;top:0;left:0;width:0%;height:100%;transition:width 0.2s}
.nav a:hover {width:calc(2vw + 110px)}
.nav a.active:before, .nav a:hover:before {border-color:#FAF1EF;background-color:#E7BAB1 ;}
.nav a:hover:after {width:100%}
.nav a span {position:relative;z-index:20;opacity:0;transition:opacity 0.2s}
.nav a:hover span {opacity: 1;transition:opacity 0.5s}


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

/**** home ****/
.intro {width:100%;height: calc(var(--vh, 1vh) * 100);position:relative;display:flex;align-items: center;justify-content: center;}
.intro .st0 {fill: #E7BAB1;}
.introinner {background:#232A3C;display:flex;align-items: center;justify-content: center;flex:0 0;flex-basis:calc(100% - 4vw);height:calc((var(--vh, 1vh) * 100) - 4vw);color:#E7BAB1;font-size:22px;line-height:1.2em;text-align: center;position:relative;transition:flex-basis 2s}
.introinner.startsize {flex-basis:100%}
.introinner .intrologo {height:6vw}
.introtext {position:absolute;bottom:0;left:0;width:100%}
.introtext p {margin-bottom:2vw}
.downarrow svg {display: block;margin:0 auto 1vw auto;}

/**** gallery ****/
.gallery, .cycle-slideshow, .cycle-slideshow .slide,.bigpic {width:100%;height:100vh;position:relative;background:50% 50% no-repeat;background-size:cover}


.cycle-controls {position:absolute;z-index:1000;display:flex;bottom:0;left:0;justify-content: center;width:100%;height:50px;}
.cycle-arrow {width:50px;height:50px;background:#E7BAB1;display:flex;align-items: center;justify-content: center;cursor:pointer;transition:background 0.2s}
.cycle-arrow:hover {background:#FAF1EF}
.cycle-arrow path {fill:#FAF1EF;transition:fill 0.2s}
.cycle-arrow:hover path {fill:#E7BAB1}
.cycle-pager {background:rgba(250,541,239,0.6);display:flex;padding:0 10px}
.cycle-pager span {display:inline-block;width:24px;height:100%;position:relative;display:flex;align-items: center;justify-content: center;cursor: pointer;}
.cycle-pager span:before {content:'';display:block;width:12px;height: 12px;transform: rotate(-45deg);border: 1px solid #E7BAB1;background: #FAF1EF;box-sizing: border-box;transition:border 0.2s, background 0.2s;z-index:20;}
.cycle-pager span.cycle-pager-active:before, .cycle-pager span:hover:before {border-color:#FAF1EF;background-color:#E7BAB1 ;}

/**** downloads ****/
.downloads {text-align: center;}
.downloadbuttons {display: flex;justify-content: center;}
.downloadbuttons a {margin:1vw;border:1px solid #232A3C;text-decoration: none;color:#232A3C;height:60px;display: flex;white-space: nowrap;align-items:center;padding:0 20px 0 0;flex:1 1;max-width:320px;transition: all 0.2s;}
.downloadbuttons a .text {flex:1 1}
.downloadbuttons a .icon {flex:0 0 60px;height:100%;background:#232A3C 50% 50% no-repeat;margin-right:20px;transition:background 0.2s}
.downloadbuttons a:hover {border-color:#E7BAB1;background-color: #232A3C;color: #FAF1EF;}

/**** capsule managed ****/
.capsule, .app, .contact {text-align: center;}
.capsule p, .app p {max-width:620px;margin-left:auto;margin-right:auto}

.iconlist {display:flex;flex-wrap: wrap;justify-content: center;margin-left:auto;margin-right:auto;max-width:1400px}
.iconlist .item {flex:0 0 25%;padding:4vw 1vw 0 1vw;box-sizing: border-box;font-size:14px;line-height:1.3em}
.iconlist .icon {width:120px;height:120px;background:50% 50% no-repeat;background-size:contain;margin:0 auto 1vw auto}
.iconlist .text {padding:0 2vw}

.apppic {width:calc(100% - 4vw);height:30vw;background: url(/img/content/app/Static-image-04.jpg) 50% 30% no-repeat;background-size:cover;margin-left: 2vw;}
.qr {display:flex;padding:2vw;margin:4vw auto 0 auto;justify-content: center;align-items: center;font-size:14px;line-height:1.3em;width:300px;}
.qr img {display:block;margin:0 auto}
.qr .text {text-align: center;margin-right:2vw}

/**** contact ****/
.contact {padding:6vw}
.agencies {display:flex;max-width:1000px;margin-left:auto;margin-right:auto}

.agency {flex:0 0 50%;box-sizing: border-box;display:flex;flex-direction: column;padding:0 2vw;box-sizing: border-box;}
.agentlogo {background:bottom center no-repeat;background-size:contain;margin:0 auto 40px auto;width:180px;height:50px}
.agents {display:flex;flex-direction:column}
.agent {box-sizing: border-box;margin-bottom:2vw}
.agent b {display:block;}
.agent a {color:#FAF1EF}
.landg {margin:2vw auto 4vw auto;font-size:12px;line-height:1.3em}
.landg p {margin-bottom: 20px;}
.misrep {font-size:11px;line-height:13px;margin:0 auto;max-width:1200px}

/****************************************************
* 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: 1230px) {}
	
	/* bigger desktop */
	@media only screen and (max-width: 1229px) {
		.contentsection {padding:30px 0}
		.sectioninner {margin:0 30px;width:calc(100% - 60px);padding-left:30px;padding-right:30px}
		.apppic {width:calc(100% - 60px);margin-left:30px}
		
		h1 {margin-bottom:30px}
		h2 {margin-bottom:16px}
		
		/**** nav ****/
		.nav a {width:30px;height:30px}
		.nav a:before {margin-left:9px;margin-top:0px}
		
		.introinner {font-size:18px;line-height:1.3em;flex-basis:calc(100% - 60px);height:calc(100vh - 60px)}
		
		.iconlist .text {padding:0}
	}

	/* 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) {
		.nav {width:30px}
		.nav a span {display:block;margin-left:6px}
	
		.introinner .intrologo {height:60px}
		.gallery, .cycle-slideshow, .cycle-slideshow .slide, .bigpic {height:60vh}
		
		.downloadbuttons {flex-direction: column;align-items: center;}
		.downloadbuttons a {flex:0 0 50px;width:320px}
		
		.iconlist .item {font-size:12px;line-height: 1.4em;flex:0 0 32%}
		.iconlist .icon {width:90px;height:90px;margin-bottom:20px}
		
		.landg {margin-top:60px;margin-bottom:60px}
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		h1 {font-size:30px;line-height:1.2em;}
		
		.texturebg {height: calc(var(--vh, 1vh) * 100);}
	
		.nav {display:none}
		.contentsection {padding:5vw 0}
		.sectioninner {margin:0 5vw;width:calc(100% - 10vw);padding-left:5vw;padding-right:5vw;padding-top:10vw;padding-bottom:5vw}
		.apppic {width:calc(100% - 10vw);margin-left:5vw}
		.introinner {font-size:15px;line-height:1.3em;flex-basis:calc(100% - 10vw);height: calc((var(--vh, 1vh) * 100) - 10vw)}
		.introinner.startsize {flex-basis:100%;}
		.downarrow svg {margin-bottom:20px}
		
		.downloadbuttons a {white-space: wrap;width:220px;margin:10px;}
		
		.iconlist .item {flex:0 0 50%;padding:0;box-sizing: border-box;margin-top:20px}
		.iconlist .text {padding:0 2.5vw}
		
		.apppic {height:30vh}
		.qr {flex-direction: column;width:auto;margin-top:40px;padding:5vw}
		.qr .text {margin-bottom:20px}
		
		/**** contact ****/
		.contact {padding:10vw 5vw 5vw 5vw}
		.agencies {flex-direction:column}
		.agentlogo {margin-bottom:20px;height:25px}
		.agency {margin-bottom:30px}
		.agent {margin-bottom:20px}
	}

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