/* Table of Content
==================================================
	#Site Variables
	#Site Styles
	#UIKit Styles
	#Page Styles
	#Media Queries
	#Font-Face */
	

/* #Site Variables
================================================== */
:root {
  --primary: #CAA25F;
  --secondary: #00142B;
  --light: #E4E4E4;
  --dark: #414141;
  --white: #ffffff;
  --text: #191919;
  --navigation: #ffffff;
  
  --primary-font: proxima-nova, 'Proxima Nova', 'Helvetica Nueu', 'Helvetica', Arial, sans-serif;
  --secondary-font: 'Knockout', 'Helvetica Nueu', 'Helvetica', Arial, sans-serif;
}


/* #Site Styles
================================================== */
*				{ outline:none; }
html, body		{ background:var(--secondary); color:var(--text); font-size:16px; font-weight:300; font-family:var(--primary-font); line-height:1.5rem; }

.aligncenter 	{ text-align:center; }
.alignleft		{ text-align:left; }
.alignright		{ text-align:right; }
	img.aligncenter { float:none; display:block; margin:0 auto 15px; }
	img.alignleft	{ float:left; margin-right:15px; }
	img.alignright	{ float:right; margin-left:15px; }

.w900 			{ font-weight:900; }
.w800				{ font-weight:800; }
.w700				{ font-weight:700; }
.w600				{ font-weight:600; }
.w500				{ font-weight:500; }
.w400				{ font-weight:400; }
.w300				{ font-weight:300; }
.w200				{ font-weight:200; }
.w100				{ font-weight:100; }

.font6			{ font-size:0.625em; }
.font7			{ font-size:0.750em; }
.font8			{ font-size:0.875em; }
.font10			{ font-size:1.0em; }
.font12			{ font-size:1.2em; }
.font15			{ font-size:1.5em; }
.font18			{ font-size:1.8em; }
.font20			{ font-size:2.0em; }
.font25			{ font-size:2.5em; }
.font30			{ font-size:3.0em; }
.font35			{ font-size:3.5em; }
.font40			{ font-size:4.0em; }
.font45			{ font-size:4.5em; }

.s1				{ letter-spacing:1px; }
.s2				{ letter-spacing:2px; }
.s3				{ letter-spacing:3px; }
.s4				{ letter-spacing:4px; }
.s5				{ letter-spacing:5px; }
.s6				{ letter-spacing:6px; }
.s7				{ letter-spacing:7px; }
.s8				{ letter-spacing:8px; }

.lh0			{ line-height:1em; }
.lh1			{ line-height:1.1em; }
.lh2			{ line-height:1.2em; }
.lh3			{ line-height:1.3em; }
.lh4			{ line-height:1.4em; }
.lh5			{ line-height:1.5em; }
.lh8			{ line-height:1.8em; }
.lh20			{ line-height:2.0em; }
.lh25			{ line-height:2.5em; }

h1, h2, h3, h4	{ font-family:var(--secondary-font); font-weight:500; color:inherit; line-height:1em; text-transform:uppercase; letter-spacing:.03em; }

h1				{ font-size:2.800em; }
h2				{ font-size:2.000em; }
h3				{ font-size:1.625em; }
h4				{ font-size:1.000em; }
h5				{ font-size:0.775em; }


b, strong, .uk-text-bold	{ font-weight:800; }

a, .uk-link		{ color:var(--primary); }
	a:hover, .uk-link:hover { color:inherit; text-decoration:underline; }

.font-secondary { font-family:var(--secondary-font); }

/* #UIKit Styles
================================================== */
.uk-container-alt	{ padding:0 25px; }

.uk-text-light		{ color:var(--light) !important; }
.uk-text-dark 		{ color:var(--dark) !important; }
.uk-text-contrast	{ color:var(--white) !important; }

.uk-background-primary, .uk-section-primary { color:var(--white); }
.uk-background-dark, .uk-section-dark { background:var(--dark); color:var(--white) !important; }
.uk-background-muted, .uk-section-muted { background:var(--light); }

.uk-overlay-gradient { background: rgb(0,0,0); background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0, 0, 0, 0.85) 100%); }

.uk-button { font-size:1rem; border:2px solid var(--dark); }
.uk-button-primary { background:none; border-color:var(--primary); }
	.uk-button-primary:hover { background:var(--primary); }
	
.uk-nav-primary>li>a { font-size:1em; }

/* #Page Styles
================================================== */
.site-wrapper { max-width:500px; margin:0 auto; overflow:hidden; }

.header { padding:8px 0; margin:0 auto; max-width:500px; width:100%; z-index:1; }
	.header .logo { max-width:150px; }
	
	.header.uk-active { background:rgba(0,20,43,.8); }

.title { position:relative; padding-bottom:15px; margin-bottom:15px; }
	.title:after { content:''; position:absolute; bottom:0; left:0; width:40px; height:2px; background:var(--primary); }
	
	.title.uk-text-center:after, .uk-text-center .title:after { right:0; margin:0 auto; }

.read-on { position:absolute; bottom:15px; left:0; width:100%; text-align:center; font-size:.9rem; font-weight:500; text-transform:uppercase; line-height:1.2rem; }
	.read-on i { color:var(--primary); font-size:1.8rem; }

.intro { background:var(--secondary) url('../images/bg-intro-pattern.png') top center no-repeat; background-size:cover; color:var(--white); padding:75px 0; }
	.intro .item { position:relative; height:400px; width:400px; left:50%; right:auto; margin:0 auto; transform:translate(-50%, 0%); text-align:center; }
	.intro .item:before { content:''; display:block; position:absolute; top:-15%; left:-15%; width:130%; height:130%; background:#26374B; border-radius:50%; }
	.intro .item>* { position:relative; max-height:400px; }

	.intro .content { position:relative; line-height:1.4em; font-weight:300; font-size:.95rem; }

.featured-light { background:#E4E4E4; padding:25px 0 75px; }
	.featured-light .item { position:relative; height:400px; width:400px; left:50%; right:auto; margin:0 auto; transform:translate(-50%, 0%); text-align:center;}
	.featured-light .item:before { content:''; display:block; position:absolute; top:-5%; left:-5%; width:110%; height:110%; background:var(--primary); border-radius:50%; }
	.featured-light .item>* { position:relative; z-index:2; max-width:120%; max-height:325px; }
	.featured-light .text { padding-top:15px; padding-left:20px; position:relative; width:95%; margin-left:5%; line-height:1.5em; z-index:2; box-sizing:border-box; }
	.featured-light .text:before { content:''; position:absolute; top:-10px; left:0; height:80%; width:2px; background:var(--primary); }
	
	.featured-light.left .item { left:-20%; right:auto; margin:0; transform:translate(0%, 0%); }
	.featured-light.center .item { left:50%; right:auto; margin:0 auto; transform:translate(-50%, 0%); }
	.featured-light.right .item { left:auto; right:-15%; transform:translate(0%, 0%); }

.featured-dark { background:var(--dark) url('../images/bg-featured-dark-pattern.png') top center no-repeat; background-size:cover; color:var(--white); padding:50px 0 75px; }
	.featured-dark .item { position:relative; height:450px; width:450px; left:50%; right:auto; margin:0 auto; transform:translate(-50%, 0%); text-align:center }
	.featured-dark .item:before { content:''; display:block; position:absolute; top:-5%; left:-5%; width:110%; height:110%; background:#6F6F6B; border-radius:50%; }
	.featured-dark .item>* { position:relative; max-height:450px; }
	.featured-dark .text { padding-left:20px; position:relative; width:95%; margin-left:5%; line-height:1.3em; }
	.featured-dark .text:before { content:''; position:absolute; top:-15px; left:0; height:100%; width:2px; background:var(--primary); }
	
	.featured-dark.left .item { left:-20%; right:auto; margin:0; transform:translate(0%, 0%); }
	.featured-dark.center .item { left:50%; right:auto; margin:0 auto; transform:translate(-50%, 0%); }
	.featured-dark.right .item { left:auto; right:-15%; margin;0; transform:translate(0%, 0%); }

.details { padding:25px 0 75px; }
	.details .photo { border-radius:15px; }
	.details .text { font-size:.95rem; }

.slideshow {}
	.slideshow .text { padding-left:20px; position:relative; width:90%; margin-left:5%; line-height:1.3em; color:var(--white); }
	.slideshow .text:before { content:''; position:absolute; top:-15px; left:0; height:100%; width:2px; background:var(--primary); }

.cta { min-height:600px;}
	.cta .line { margin:25px auto; width:2px; height:100px; background:var(--primary); }

.playbook { padding:25px 0 75px; }
	.playbook .item { text-align:center; }
	.playbook .item>* {}
	
	
.page-id-165 .featured-dark .item>* { left:-15%; }	


.home-hero { padding-bottom:150px; }
	.home-hero .item01 { left:10%; top: 85%; width:200px; }
	.home-hero .item02 { left: 40%; top: 40%; width:200px; }
	.home-hero .item03 { left: 80%; top: 50%; width:200px; }
	.home-hero .item04 { left: 60%; top: 100%; width:450px; }

.circle { position:relative; display:inline-block; z-index:1; width:100px; text-align:center; }
.circle:before { content:''; position:absolute; width:100px; height:100px; top:-35px; left:0; border-radius:50%; border:1px solid var(--primary); background:#fff; z-index:-1; }

.stroke { position:relative; }
.stroke:before { content:''; position:absolute; top:-40px; right:6.75%; height:calc(100% + 80px); width:1px; background:var(--primary); }

.cover-photo div { transition: .3s; position:absolute; top:0; left:0; perspective: 500px; z-index:3; }
.cover-photo div:nth-child(3) { z-index:2; }
.cover-photo div:nth-child(4) { z-index:1; }
.cover-photo img { transition: .3s; transform: rotate(0); }

.stroke:hover .cover-photo img { transform: rotateY(40deg); }
.stroke:hover .cover-photo div:nth-child(3) { left:-30px; top:10px; width:420px; }
.stroke:hover .cover-photo div:nth-child(4) { left:-60px; top:20px; width:400px; }


/*
	.page-id-205 .featured-dark .item {
position: relative;
height: 380px;
width: 380px;
right: 0;
margin: -15px auto;
text-align: center;
}
.page-id-210 .intro .item { position:relative; height:340px; width:340px; margin:-10% auto; text-align:center; }

.page-id-171 .intro .item { position:relative; height:340px; width:400px; margin:-10% auto; text-align:center; }

.page-id-150 .featured-light .item {
position: relative;
height: 380px;
width: 380px;
right: 0;
margin: -15px auto;
text-align: center;
}

.page-id-175 .intro .item { position:relative; height:340px; width:400px; margin:-10% auto; text-align:center; }

.page-id-175 .featured-light .item {
position: relative;
height: 400px;
width: 420px;
right: -10px;
margin: -15px auto;
text-align: center;
}

.page-id-153 .featured-dark .item {
position: relative;
height: 380px;
width: 380px;
right: 0;
margin: -15px auto;
text-align: center;
}
*/

/* #Media Queries
================================================== */
	@media only screen and (max-width: 1220px) {}

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {}

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

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		.home-hero { padding-bottom:100px; }
			.home-hero .item01 { left:10%; top: 85%; width:90px; }
			.home-hero .item02 { left: 40%; top: 40%; width:90px; }
			.home-hero .item03 { left: 80%; top: 50%; width:80px; }
			.home-hero .item04 { left: 60%; top: 100%; width:225px; }
			
		.home h1 { font-size:2.15em; }
		.circle { width:70px; }
		.circle:before { width:70px; height:70px; top:-20px; }
		
		.cover-photo div { transition: .3s; position:absolute; top:0; left:0; perspective: 500px; z-index:3; }
		.cover-photo div:nth-child(3) { z-index:2; }
		.cover-photo div:nth-child(4) { z-index:1; }
		.cover-photo img { transition: .3s; transform: rotate(0); }
		
		.stroke:hover .cover-photo img { transform: rotateY(0deg); }
		.stroke:hover .cover-photo div:nth-child(3) { left:10px; top:-10px; width:calc(100% + 10px); }
		.stroke:hover .cover-photo div:nth-child(4) { left:20px; top:-20px; width:calc(100% + 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: 'Knockout';
    src: url('../fonts/Knockout-HTF68-FullFeatherwt.woff2') format('woff2'),
        url('../fonts/Knockout-HTF68-FullFeatherwt.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Knockout';
    src: url('../fonts/Knockout-HTF26-JuniorFlyweight.woff2') format('woff2'),
        url('../fonts/Knockout-HTF26-JuniorFlyweight.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Knockout';
    src: url('../fonts/Knockout-HTF54-Sumo.woff2') format('woff2'),
        url('../fonts/Knockout-HTF54-Sumo.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Knockout';
    src: url('../fonts/Knockout-HTF74-FullSumo.woff2') format('woff2'),
        url('../fonts/Knockout-HTF74-FullSumo.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}