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

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

.darkbluebg {background: #1C122E;}
.bluebg {background: #00D1FF;}
.lightbg {background: #F7F3E8;}
.darkbluetext {color: #1C122E;}
.bluetext {color: #00D1FF;}
.lighttext {color: #F7F3E8;}

h1 {font-weight:600;font-size:3.125rem;line-height:3.75rem}
h2 {font-size:30px;line-height:1.3em;font-weight:600;margin-bottom:22px}
h2.reg {font-weight:400}

b {font-weight:700;}

.semi {font-weight:600}


/* #Page Styles
================================================== */
.header {padding:5vw 0}

.buttonlink {display:flex;height:58px;box-sizing: border-box;align-items: center;justify-content:flex-start;width:217px;line-height:0.8em;font-weight:600;padding:0 1.2rem;position:relative;cursor:pointer;white-space: nowrap;}
.buttonlink svg {position:absolute;top:0;left:0}
.buttonlink .buttoninner {position:relative;font-size:20px;;height:100%;display:flex;align-items: center;}
.buttonlink img {margin-left:-1px;height:100%}

.buttonlink .bg {transition:fill 0.2s}
.buttonlink .accent {transition:fill 0.2s}


.buttonlink.bluebutton .buttoninner {color:#1C122E;}
.buttonlink.bluebutton .bg {fill:#00D1FF}
.buttonlink.bluebutton .accent {fill:#F7F2E8}

.buttonlink.bluebutton:hover .buttoninner {color:#1C122E;}
.buttonlink.bluebutton:hover .bg {fill:#F7F2E8}
.buttonlink.bluebutton:hover .accent {fill:#00D1FF}

.buttonlink.darkbluebutton .buttoninner {color:#F7F2E8;}
.buttonlink.darkbluebutton .bg {fill:#1C122E}
.buttonlink.darkbluebutton .accent {fill:#00D1FF}

.buttonlink.darkbluebutton:hover .buttoninner {color:#F7F2E8;}
.buttonlink.darkbluebutton:hover .bg {fill:#00D1FF}
.buttonlink.darkbluebutton:hover .accent {fill:#1C122E}

.buttonlink.lightbutton .buttoninner {color:#1C122E;}
.buttonlink.lightbutton .bg {fill:#F7F2E8}
.buttonlink.lightbutton .accent {fill:#00D1FF}

.buttonlink.lightbutton:hover .buttoninner {color:#1C122E;}
.buttonlink.lightbutton:hover .bg {fill:#00D1FF}
.buttonlink.lightbutton:hover .accent {fill:#F7F2E8}

.slashbox {font-size:20px;line-height:1.3em;padding:3vw 0}
.slashstats {display:flex;align-items:center}
.slashstats h2 {margin:0;letter-spacing: -0.03em;}
.slashstats img {height:100%;width:auto;margin:0 30px}

.gallerysection {padding:3vw 0;background:url(/img/content/patterns/gallerybg2.svg) repeat-x bottom center;background-size:auto 50%}

.galleryholder {height:80vh;width:100%;position:relative;}
.gallery {height:80vh;width:100%}
.gallery .slide {height:80vh;width:100%;background:50% 50% no-repeat;background-size:cover}
.gallery .caption {position: absolute;top:0;right:0;font-size:0.825rem;font-weight:700;height:40px;padding:0 1.2rem;display:flex;align-items: center;}
.gallerycontrols {position:absolute;top:0;left:0;z-index:1000;font-weight:700;color:#1C122E;display:flex;gap:2px}
.gallerycontrols div {height:42px;background:#00D1FF}
div.slidearrow {flex:0 0 58px;background:#00D1FF 50% 50% no-repeat;background-size:17px auto;cursor: pointer;transition:background 0.2s}
.slidearrow#prev {background-image:url(/img/ui/prev.svg)}
.slidearrow#next {background-image:url(/img/ui/next.svg)}
.slidearrow:hover {background-color:#F7F2E8}
#custom-caption {display:flex;white-space: nowrap;align-items:center;padding:0 1.2rem}

.launchsection {padding:3vw 0}
.launchsection .nested {align-items: center;}
.launchsection h2 {margin: 0;padding:3vw}
.launchbuttons {padding:3vw 0;display:flex;flex-direction: column;gap:1rem;}

.footerstrip {width:100%;height:7.5vw;background:url(/img/content/patterns/footerpattern2.svg) repeat-x bottom center #1C122E;background-size:auto 101%}

.footer {font-size:1rem;line-height:1.3em;padding:5vw 0 3vw 0;letter-spacing: -0.04em;margin-top:-1px}
.agentlogo {height:40px;display:block;margin-bottom:3vw}
.footer a, .smallprint a {color:#1C122E}
.footerlogo {text-align: right;}

.anglesea {max-width:35ch}

.agent {margin-bottom:1.6rem}
.agent p {margin:0}
.agent .semi {margin-bottom:0.8rem}

.smallprint {font-size:0.875rem}
.smallprintlinks {display:flex}
.smallprintlinks a {margin-right:1rem}

.textpageheader {padding:5vw 0 7.5vw 0}
.line {width:100%;height:1px;background: #1C122E;margin:3rem 0;}

.pagenav {display:flex;flex-direction: column;gap:8px;font-weight:600}
.pagenav a {color: rgba(28, 18, 46, 0.20);text-decoration: none;}
.pagenav a:hover {text-decoration: underline;}
.s1 .pagenav .n1,
.s2 .pagenav .n2 {color:#1C122E;text-decoration: underline;}



.pagetext {padding-bottom:5vw}
.pagetext a {color:#00D1FF}
.textsection {margin-bottom:1.5rem}
.textsection p, .textsection ul {margin-bottom:0.75rem}
.textsection p:last-child, .textsection ul:last-child {margin-bottom:0}

.popup {position:fixed !important;top:0;left:0;bottom:0;right:0;display:flex;align-items:center;justify-content:center;z-index:10000;pointer-events: none;}
.popupinner {position:relative;width:100%;height:100vh;}
.popupbg {position:absolute;background:rgba(255, 255, 255, 0.8);top:0;left:0;width:100%;height:100vh;transition:opacity 0.5s;opacity:0}

.popupcontent {position:relative;width:100%;height:100vh;display:flex;align-items:center;justify-content:center;pointer-events: none;}
.popupbox {padding:3vw;font-size:18px;line-height:1.2em;box-sizing: border-box;max-width:90vw;transition:transform 0.5s;transform:scale(0.9);position:relative}
.contactform, .downloadform {display:none}
.popupbox .closepop {position:absolute;top:0;right:0;width:3rem;height:3rem;background-size:50% auto;cursor:pointer;background:#00D1FF;display:flex;align-items:center;justify-content:center;transition:background 0.2s}
.popupbox .closepop:hover {background:#F7F2E8}
.popupbox .closepop path {stroke:#1C122E}
.contactform, .downloadform {position:relative;pointer-events: none;}
.forminner {display:flex;flex-direction: column;gap:1.5rem}
.popupbox h1 {margin-bottom:3vw}


.popupbox a {color:#00D1FF}
.popupbox input:not([type="checkbox"]), .popupbox textarea {background:none;border:none;border-bottom:1px solid #F7F2E8;width:100%;font-size:1.25rem;line-height:1.5rem;padding:0.5rem 0;margin-bottom:1.5rem;font-family:"brockmann";color:#F7F2E8}
.popupbox input::placeholder, .popupbox textarea::placeholder {color:rgba(248,242,232,0.4)}
.popupbox textarea {height:calc(100% - 1.5rem);box-sizing: border-box;}


.formcols {display:flex;gap:5vw}
.formcol {flex:1 1 50%;max-width:360px}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
  cursor: pointer;
}

/* hide native checkbox */
.checkbox-label input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* custom box */
.custom-box {
  width: 18px;
  height: 18px;
  border: 1px solid #F7F2E8;
  flex-shrink: 0;
  position: relative;
  margin-top: 2px;
  box-sizing: border-box;
}

/* checked state circle */
.custom-box::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  background: #00D1FF;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* show circle when checked */
.checkbox-label input:checked + .custom-box::after {
  opacity: 1;
}

.endcols .formcol p:last-child {margin-bottom:0}
.endcols .formcol:last-child {display:flex;align-items: flex-end;}

.popup.show, .contactform .contactform, .downloadform .downloadform {pointer-events: auto;}

.show .popupbg {opacity:1;pointer-events: auto;}
.show.contactform .contactform, .show.downloadform .downloadform {opacity:1;transform:scale(1)}


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

.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
================================================== */
	
	
	/* bigger desktop */
	@media only screen and (max-width: 1380px) {
		h2 {font-size:24px;line-height:1.3em;font-weight:600;margin-bottom:22px}
	}

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width:1099px) {
		.buttonlink {padding:0 1rem}
		.buttonlink, .buttonlink svg {height:50px;width:240px}
		.buttonlink .buttoninner {font-size:18px;}
		h2 {font-size:20px;line-height:1.3em;font-weight:600;margin-bottom:22px}
		
		.galleryholder, .gallerysection, .gallery, .gallery .slide {height:60vh}
		#custom-caption {font-size:1rem}
		
		.footerlogo {order:-1;text-align:left}
		.footerlogo img {margin-bottom:4rem}
		
		.launchsection, .gallerysection {padding:5vw 0}
		.footerstrip {height:15vw}
		
		.pagenav {padding-bottom:7.5vw}
	}

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

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		.header {padding:10vw 0}
		.header img {margin-bottom:15vw}
		.slashbox {padding:10vw 0 0 0}
		.slashbox .bluetext {padding-bottom:5vw}
		.slashstats {flex-direction:column;align-items:flex-start}
		.slashstats img {display:none}
		.slashstats h2 {width:100%}
		.slashstats h2:after {content:'';display:block;width:100%;height:1px;border-top:2px dotted #00D1FF;margin:1rem 0}
		.slashstats h2:last-child:after {display:none}
		
		.gallerycontrols {top:auto;bottom:0}
		.gallery .caption {right:auto;left:0}
		.gallerysection {padding:10vw 0}
		
		.nested {flex-direction: column;}
		
		.launchsection {padding:5vw 0}
		.launchsection h2 {padding:15vw 5vw 3vw 5vw}
		.launchbuttons {padding:3vw 5vw 15vw 5vw}
		.footerstrip {height:30vw}
		.footer {line-height:1.5em}
		
		.agentlogo {margin-bottom:7.5vw;height:auto}
		.agentlogo img {display:block}
		
		.smallprint .tab50:first-child {margin-bottom:0.75rem}
		
		h1 {font-size:2rem;line-height:1.3em;padding-right:40px;margin-bottom:5vw}
		.popupbox {padding:5vw}
		
		.popupbox input:not([type="checkbox"]), .popupbox textarea {font-size:1rem;line-height:1em}
		
		.forminner, .checkbox-label {font-size:12px;line-height:1.3em}
		.formcols.mobrows {flex-direction: column;}
		.formcols.mobrows.nogap {gap:0}
		.hidemob {display:none}
		.popupbox textarea {height:20vw}
		
		.line {margin:1.5rem 0}
		.pagenav {padding-bottom:3rem}
		
		.smallprintlinks {flex-direction:column;gap:4px}
	}

	/* 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: 'brockmann';
  src: url('/fonts/brockmann-regular-webfont.woff2') format('woff2'),
       url('/fonts/brockmann-regular-webfont.woff') format('woff'),
       url('/fonts/brockmann-regular-webfont.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'brockmann';
  src: url('/fonts/brockmann-semibold-webfont.woff2') format('woff2'),
       url('/fonts/brockmann-semibold-webfont.woff') format('woff'),
       url('/fonts/brockmann-semibold-webfont.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'brockmann';
  src: url('/fonts/brockmann-bold-webfont.woff2') format('woff2'),
       url('/fonts/brockmann-bold-webfont.woff') format('woff'),
       url('/fonts/brockmann-bold-webfont.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}