@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i|Work+Sans:300,400,600,900');

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

/* #Site Styles
================================================== */
html, body		{ color:#000; font-size:18px; font-weight:300; font-family:'Work Sans', 'Helvetica Nueu', 'Helvetica', Arial, sans-serif; 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; }

.font12			{ font-size:12px; }
.font14			{ font-size:14px; }
.font16			{ font-size:16px; }
.font18			{ font-size:18px; }
.font20			{ font-size:20px; }
.font24			{ font-size:24px; }
.font28			{ font-size:28px; }
.font30			{ font-size:30px; }
.font32			{ font-size:32px; }
.font36			{ font-size:36px; }
.font40			{ font-size:40px; }
.font50			{ font-size:50px; }
.font60			{ font-size:60px; }
.font70			{ font-size:70px; }

.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; }

h1, h2, h3, h4	{ font-family: 'Playfair Display', serif; font-weight:700; line-height:1.2em; color:inherit; }

h1				{ font-size:78px; }
h2				{ font-size:55px; }
h3				{ font-size:24px; }
h4				{ font-size:18px; }

a, .uk-link		{ font-weight:600; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; color:inherit; }
a:hover			{ text-decoration:none; color:#000; }

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

blockquote		{ padding:15px; border:1px solid #ddd; font-style:normal; }
	blockquote div, blockquote p, blockquote cite { position:relative; }
	blockquote div:first-child:before { content:''; background:#fff url('../images/open-quote.svg') center center no-repeat; background-size:80%; width:90px; height:60px; position:absolute; top:-60px; left:0; right:0; margin:0 auto; }
	blockquote div:last-child:before { content:''; background:#fff url('../images/open-quote.svg') center center no-repeat; background-size:80%; width:90px; height:80px; position:absolute; top:-45px; left:-45px; margin:0; }
	blockquote cite { text-align:right; display:block; }

.rotate			{ transform: rotate(-90deg); }

/* #UIKit Styles
================================================== */

.uk-container-alt { padding:0 5% 0 6%; }

.uk-block-muted { background:#e6e7e7; }

.uk-text-pink		{ color:#dd3c96 !important; }
.uk-text-green		{ color:#8fc13f !important; }
.uk-text-blue		{ color:#44acb9 !important; }
.uk-text-orange		{ color:#f37421 !important; }
.uk-text-purple		{ color:#292d6a !important; }
.uk-text-red		{ color:#ef3924 !important; }


.uk-accordion-title { background:none; font-size:36px; line-height:1.2em; }

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

.header { padding:50px 0 25px; }
	.header .logo { width:250px; }

.nav { background:#000; position:fixed; top:0; left:0; width:100%; height:40px; z-index:1; }
/*.nav { background:#000; position:fixed; top:0; left:0; width:40px; height:100%; z-index:1; }
	.nav .uk-subnav { transform: rotate(-90deg); position:absolute; top:300px; left:-385px; width:800px; }*/

.nav { background:#000; position:fixed; top:0; left:0; width:100%; height:40px; z-index:1; }	
	.nav .uk-subnav { }
	.nav .uk-subnav li { position:relative; }
	.nav .uk-subnav li:after { content:'.'; font-weight:700; color:#fff; position:absolute; top:6px; right:-8px; }
	.nav .uk-subnav li:last-child:after { display:none; }
	.nav .uk-subnav a { font-size:14px; font-weight:300; font-family:'Work Sans'; color:#fff; padding:10px; }
	.nav .uk-subnav a.uk-text-bold { font-weight:600; }
	
	.nav .uk-subnav li:nth-child(2) a:hover { color:#44acb9; }
	.nav .uk-subnav li:nth-child(3) a:hover { color:#dd3c96; }
	.nav .uk-subnav li:nth-child(4) a:hover { color:#f37421; }
	.nav .uk-subnav li:nth-child(5) a:hover { color:#8fc13f; }
	.nav .uk-subnav li:nth-child(6) a:hover { color:#292d6a; }
	.nav .uk-subnav li:nth-child(7) a:hover { color:#ef3924; }
	.nav .uk-subnav li:nth-child(8) a:hover { color:#ef3924; }

.footer {}
	.footer .uk-subnav li { position:relative; }
	.footer .uk-subnav li:after { content:'.'; font-weight:700; position:absolute; top:-3px; right:-5px; }
	.footer .uk-subnav li:last-child:after { display:none; }
	.footer .uk-subnav a { font-weight:300; padding:0 15px; }
	.footer .uk-subnav a.uk-text-bold { font-weight:600; }
	
	.footer .uk-subnav li:nth-child(2) a:hover { color:#44acb9; }
	.footer .uk-subnav li:nth-child(3) a:hover { color:#dd3c96; }
	.footer .uk-subnav li:nth-child(4) a:hover { color:#f37421; }
	.footer .uk-subnav li:nth-child(5) a:hover { color:#8fc13f; }
	.footer .uk-subnav li:nth-child(6) a:hover { color:#292d6a; }
	.footer .uk-subnav li:nth-child(7) a:hover { color:#ef3924; }
	.footer .uk-subnav li:nth-child(8) a:hover { color:#ef3924; }

.init { cursor:pointer; opacity:0; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.init:hover, .mark:hover .init { opacity:1; cursor:pointer; }

.hover { max-width:none; z-index:2; }

.items { margin-top:100px; width:1165px; }
.item { position:absolute; }
	.item h3 { font-size:40px; line-height:1em; margin:0; }
	.item span { font-family:'Work Sans'; font-size:14px; font-weight:300; }
	.item1 { top:-75px; left:15%; text-align:right; }
	.item2 { top:3%; left:55%; }
		.item2 .icon { width:70px; position:absolute; top:85px; left:-65px; }
	.item3 { top:9%; left:5%; }
		.item3 .icon { width:100px; position:absolute; top:80px; left:240px; }
	.item4 { top:15%; left:70%; text-align:right; }
		.item4 .icon { width:140px; position:absolute; top:75px; left:-25px; }
	.item5 { top:30%; left:7%; }
		.item5 .icon { width:80px; position:absolute; top:20px; left:-95px; }
	.item6 { top:35%; left:74%; }
		.item6 .icon { width:130px; position:absolute; top:-88px; left:-35px; }
	.item7 { top:50%; left:72%; }
	.item8 { top:45%; left:8%; }
		.item8 .icon { width:170px; position:absolute; top:60px; left:205px; }
	.item9 { top:64%; left:10%; text-align:right; }
		.item9 .icon { width:75px; position:absolute; top:-25px; left:-75px; }
	.item10 { top:70%; left:78%; }
		.item10 .icon { width:90px; position:absolute; top:35px; left:205px; }
	.item11 { top:80%; left:5%; text-align:right; }


.page-title {}
.page-title .graphic.about { width:150px; margin:-110px 0 0; }
.page-title .graphic.giving { width:110px; margin:-125px 0 0; }
.page-title .graphic.speaking { width:200px; margin-top:-50px; }
.page-title .graphic.consulting { width:150px; margin-top:-115px; }
.page-title .graphic.facilitation { margin-top:-50px; width:175px; }
.page-title .graphic.training { width:300px; margin-top:-10px; }

.title { border-bottom:2px solid #000; padding-bottom:10px; font-size:42px; }
.title.training01 { top:220px; left:-90px; }
.title.training02 { top:230px; left:-175px; }
.title.consulting01 { top:175px; left:-80px; }
.title.consulting02 { top:150px; left:-160px; }

.pic {}
.pic.training01 { margin-top:-400px }


.graphic {}
.graphic.facilitation01 { width:90px; margin:-90px -15px 0; }
.graphic.facilitation02 { width:125px; margin:-75px -15px 0; }
.graphic.speaking01 { width:150px; margin:-250px 0 0; }
.graphic.speaking02 { width:400px; margin:0 0 -100px -50px; }

.caption { padding:25px; color:#fff; background:rgba(0,0,0,1); position:absolute; }
.caption.red { background:rgba(239, 57, 36, 1); bottom:10%; margin-left:-40%; padding-right:10%; width:50%; }
.caption.purple { background:#292d6a; bottom:5%; right:-40%; padding-left:10%; width:45%; }

.pad {}
.pad.consulting01 { padding:25px 50px 25px 150px; min-height:370px; }

input[type="submit"] { border:1px solid #ef3924; background:none; font-family:'Playfair Display'; font-size:18px; font-weight:700; color:#ef3924; padding:5px 25px; min-width:200px; text-align:center; }


@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}


.arrow {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -20px;
  width: 40px;
  height: 60px; /*change with size of arrow to make sit on bottom */
/*   background-image: url(); */
/*   background-size: contain; */
}

.bounce {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}


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

	/* 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) {

		html, body { font-size:14px; }

		h1 { font-size:40px; }
		h2 { font-size:35px; }
		h3 { font-size:18px; }
		h4 { font-size:16px; }

		.nav { width:100%; height:40px; }
		.nav .uk-subnav { transform: rotate(0deg); position:static; }

		.header { padding-top:50px; text-align:center; }

		.uk-accordion-title { font-size:24px; }
		.title { font-size:36px; }

		/*Training*/
		.title.training01 { top:160px; left:-120px; }
		.title.training02 { top:200px; left:-150px; }
		.pic.training01 { margin-top:0px; display:none; }
		.page-title .graphic.training { width:140px; }
		.graphic.training01 { width:100px; float:right; margin:-50px 0 0 !important; }

		/*Facilitation*/
		.page-title .graphic.facilitation { margin-top:-20px; width:75px; }
		.graphic.facilitation01 { width:50px; margin:-50px -25px 0 -5px; }
		.graphic.facilitation02 { width:60px; margin:-35px -25px 0 -15px; }

		/*Consulting*/
		.page-title .graphic.consulting { width:70px; margin-top:-65px; }
		.title.consulting01 { top:160px; left:-110px; }
		.title.consulting02 { top:130px; left:-120px; }
		.pad.consulting01 { padding:25px 50px 25px 75px; min-height:370px; }

		/*Speaking*/
		.page-title .graphic.speaking { width:125px; margin-top:0px; margin-left:-75px; float:right; }
		.graphic.speaking01 { width:90px; margin:-150px 0 0; }

		/*Giving*/
		.page-title .graphic.giving { width:70px; margin:-75px 20px 0 0; float:right; }

		/*About*/
		.page-title .graphic.about { width:85px; margin:-60px -10px 0 0; }
		
		/*.items { background-position:-330px; margin-left:-6.5%; margin-bottom:100px; width:105%; height:900px; }
		.items .uk-invisible { display:none; }
		.item { position:relative; }
		.item h3 { font-size:28px; line-height:1em; margin:0; }
		.item1 { top:-65px; left:-5%; }
		.item2 { top:-50px; left:30%; width:250px; }
		.item2 .icon { top:60px; left:-35px; }
		.item3 { top:-25px; left:38%; }
		.item3 .icon { display:none; }
		.item4 { top:-15px; left:2%; }
		.item4 .icon { width:120px; top:35px; left:70px; }
		.item5 { margin-top:125px; top:0; left:65%; max-width:150px; }
		.item5 .icon { top:-30px; left:-75px; width:65px; }
		.item6 { top:0; left:65%; margin-top:30px; }
		.item6 .icon { width:100px; top:-15px; left:-85px; }
		.item7 { top:0; left:42%; margin-top:25px; }
		.item8 { top:0; left:50%; margin-top:25px; }
		.item8 .icon { width:150px; top:-25px; left:-150px; transform:rotate(20deg); }
		.item9 { top:0; left:60%; text-align:left; margin-top:35px; max-width:150px; }
		.item9 .icon { width:55px; top:-25px; left:-50px }
		.item10 { top:0; left:50%; margin-top:25px; max-width:150px; }
		.item10 .icon { width:75px; top:0; left:100px; }
		.item11 { top:0; text-align:left; }*/
		
		.items { background-position:top center; margin-left:0; margin-top:0; margin-bottom:100px; width:100%; height:auto; padding-top:20px; background-size:100%; }
		.item { position:static; text-align:left; margin-bottom:15px; padding-bottom:15px; border-bottom:1px solid #eee; }
		.item .icon { position:static; float:right; }
		.item6 .icon { width:100px; }
		.item3 .icon, .item4 .icon, .item8 .icon { display:none; }
		.item3-hover, .item7-hover, .item10-hover { position:static !important; }
	}

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