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

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

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

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

.header {background: #1E2F29 repeat-x 50% 50% url(/img/content/bgs/headerbg.svg);background-size:100% auto;position:relative;height:15vw}
.header img {display:block;width:100%}
.logo {width:12.5vw;height:12.5vw;background:#1E2F29 url(/img/content/logo.png) 50% 50% no-repeat;background-size:70% auto;position:absolute;top:0;left:calc(50% - 6.25vw);}

.content {background:#EBE7DC url(/img/content/bgs/bodybg.svg) top center;background-size: 100% auto;padding:2.4vw 0}
.cycle-slideshow {height:40vw;width:66.5%;margin:0 auto}
.cycle-slideshow .slide {width:100%;height:100%;background:50% 50% no-repeat;background-size:cover}
.cycle-pager {width:100%;display:flex;justify-content: center;padding:20px 0}
.cycle-pager span {flex:0 0 30px;height:2px;margin:0 2px;background:#A8692B;transition:opacity 0.2s;opacity:0.25;overflow:hidden}
.cycle-pager span.cycle-pager-active {opacity:1}
.contenttext {color:#A8692B;font-size: 28px;line-height:1.3em;padding-top:80px;text-align: center;padding:6vw 30vw;}
.download {color:#A8692B;text-decoration: none;border:1px solid #A8692B;display:inline-block;margin:30px auto 0 auto;font-size:16px;line-height:1em;padding:15px 25px 13px 25px;transition: all 0.2s;clear:both}
.download:hover {background: #A8692B;color:#EBE7DC;}

.animation {width:66.5%;margin:0 auto 5vw auto}

.footer {padding:4vw 20vw 8vw 20vw;background:#1E2F29 top center url(/img/content/bgs/footerbg.svg);background-size:100% auto;text-align: center;color:#fff;}
.footer a {color:#fff}
.contacts {display: flex;justify-content: space-around;}
.agentlogo {display:block;width:224px;height:80px;background:bottom center no-repeat;background-size:contain;margin:0 auto 40px 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}



/* #Media Queries
================================================== */
	
	/* 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 (min-width: 959px) and (max-width:1099px) {}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		body {font-size:14px;line-height:1.4em}
		
		.header {height:25vw}
		.logo {width:20vw;height:20vw;left:calc(50% - 10vw)}
		
		.content {padding-top:0;background-position:top 60vw center}
		.contenttext {padding:80px 160px}
		.cycle-slideshow {width:100%;height:60vw}
		
		.agentlogo {width:160px;height:60px}
		.agency {margin-bottom:20px}
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		.header {height:30vw}
		.logo {width:25vw;height:25vw;left:calc(50% - 12.5vw)}
		
		
		.contenttext {padding:60px 40px 40px 40px;font-size:24px;line-height:1.3em}
		.animation {width:100%;margin:0 auto 5vw auto}
		.footer {padding-top:40px}
		.contacts {flex-direction: column;}
	}

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