/* RESET - http://meyerweb.com/eric/tools/css/reset/ */
html, body, applet, object, iframe, svg, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, figure{
	margin:0; padding:0; border:0; font-size:100%; font-weight:inherit; font-style:inherit;
	font-family:inherit; text-decoration:inherit; text-align:left; background:transparent;
}
header, footer, figure, details, hgroup, section, article, nav, aside{display:block;}
img, object, audio, video, svg{width:100%;}

/* BASIC STYLE */
html{height:100%;}
body{text-align:center; min-height:100%;}
strong{font-weight:bold;}
nav ul{list-style:none;}
em{font-style:italic;}
a, .box-link a:visited{text-decoration:none; color:#1982D1;}
a:visited{color:#A846B5;}
/*a:link, #nav a:visited{color:#1982D1;}*/
a:hover, a:focus{color:#090; border:0;}
a:active{color:#c03; border:0;}

.no-resize{width:auto;}
.no-li{list-style-type:none;}
.no-li li{margin-bottom:1em;}
.left{float:left;}
img.left{margin:0 10px 15px 0;}
.right{float:right;}

/* CLEARFIX */
.cl:before, .cl:after{content:" "; display:table;}
.cl:after{clear:both;}
.cl{*zoom:1;} /* IE6/7 */

/* ANIMATION */
#content > article{
-webkit-transition:opacity .5s ease-in-out;
   -moz-transition:opacity .5s ease-in-out;
     -o-transition:opacity .5s ease-in-out;
		transition:opacity .5s ease-in-out;
}
a, #nav{
-webkit-transition:all .3s ease-in-out;
   -moz-transition:all .3s ease-in-out;
     -o-transition:all .3s ease-in-out;
		transition:all .3s ease-in-out;
}

/* TYPOGRAPHY FONT-TYPE */
.adobe, #body p{font-family:adobe-garamond-pro,Times New Roman,serif;}
.helvetica, nav, .fittext, .no-quote blockquote, figcaption,#slide04 .txt{font-family:"Helvetica Neue", helvetica, "ff-dagny-web-pro", arial, sans-serif;}
.bodoni, #logo, #payoff, blockquote{font-family:ltc-bodoni-175; font-weight:400;}

/* TYPOGRAPHY STYLE */
figcaption{color:#444; font-size:150%; margin-top:.4em;}
.white{color:#fff;}
.white figcaption{color:#fff;}
.white a{color:#88d2ff;}
.white a:hover{color:#090;}
.light-yellow{color:#ffa;}
blockquote{
font-size:150%; border-left:20px solid #000; padding-left:15px; line-height:135%; font-style:italic; margin-bottom:1em;
-webkit-box-sizing:border-box;
   -moz-box-sizing:border-box;
		box-sizing:border-box;
}
blockquote:before, blockquote:after{position:relative; font-size:150%; top:.2em;}
blockquote:before{content:open-quote; margin-right:5px;}
blockquote:after{content:close-quote;}
.no-quote blockquote{font-size:100%; border:0!important; padding-left:0; font-style:normal;}
blockquote.right{line-height:100%; font-style:normal;}
blockquote.right:before, blockquote.right:after, .no-quote blockquote:before, .no-quote blockquote:after{content:""; display:none;}
aside p{font-size:125%!important;}
#content{text-align:left; width:100%;} /* "width:100%" needed for fittext */
#content h2, #content h3{font-weight:bold; margin-bottom:0.5em;}
#content h2{font-size:36px;}
#content h3{font-size:24px;}
#content h4{font-weight:bold; margin-bottom:.5em;}
#content p{font-size:150%; margin-bottom:1em; line-height:135%;}
#content h1 + p{font-size:200%;}
#content > article > p, #content > article .content > p, #content > article > blockquote, #content > article .content > blockquote{max-width:70%;}
#content > article > ul, #content > article .content > ul{font-size:150%; margin:0 0 2em 5%; max-width:65%;}
.fittext{display:block; width:100%; font-size:100px; margin-bottom:.3em;}
p+h1,p+h2,p+h3,p+h4{margin-top:2em;}
.signature:before{content:"\2014 \00a0";}
.signature{font-style:italic;}

/* LAYOUT */
#logo, #nav, .body{position:relative;}
.head{padding:1.5em 0 0 0; position:fixed; width:100%; background:#fff; z-index:10;}
#logo{
	display:block; font-size:90px; padding-left:100px; line-height:1.625; margin:0 32px;
	background:url("http://blog.life-is-simple.net/img/tulip.jpg") no-repeat 0 4px; 
}
#payoff{position:absolute; font-size:20px; font-style:italic; margin-left:136px; top:24px;}
.body{margin-top:170px;}

#content > article, #content > .wrapper{padding:64px 132px 32px;}
#content > article .bg, #content  > .wrapper  .bg{
position:absolute; z-index:0; top:0; bottom:0; left:0; right:0; background:rgba(0,0,0, 0.7);
} /* Adding dark tint to background image */
#content > article .bg.white, #content  > .wrapper  .bg.white{background:rgba(255,255,255, 0.6);} /*Add white tint to background image*/
#content > article > .content, #content  > .wrapper > .content{position:relative; z-index:1;}

.home #content > article{height:0; overflow:hidden; position:absolute; top:0; left:-9999px;} /*Height 0 and Overflow:hidden fix FitText issues*/
.home #content > .active{height:auto; overflow:none; display:block; position:relative; top:0; left:0;}
.img.right, blockquote.right{position:relative; top:-75px; margin:10px 0 1em 5%; width:25%;}
blockquote.right p{line-height:125%!important;}
.white blockquote{border-left:20px solid #fff;}

/* Layout for not TAB elements */
.wrap #main, .wrap  .body{
-webkit-box-sizing:border-box;
   -moz-box-sizing:border-box;
		box-sizing:border-box;
}
.wrap  .body{padding-top:170px; min-height:100vh; margin-top:0;}
.wrap #main{min-height:100vh;}

/* NAVIGATIONS */

/* Top right */
#nav{position:fixed; right:32px; margin-top:2px; z-index:10;}
#nav li{text-align:right; float:right; margin-left:1em;}
#nav a{padding:2px 4px;}
#nav a:hover{color:#fff; background:#1982D1;}

/* Columns */
#content .cols p{font-size:100%;}

/* Lab */
.lab section h1{font-family:"Helvetica Neue", ff-dagny-web-pro, sans-serif; font-weight:600; margin:0; font-size:150%;}
.lab .cols h1{margin:.5em 0 .3em;}
.lab-nav li{margin-bottom:.5em; font-size:115%;}
.lab .body{background:url(../img/bg-lab.jpg) no-repeat fixed; background-size:cover;}
.lab .body a:link{text-shadow:2px 1px 0 #000;}

.lab .cols > article{border-right:15px solid transparent;}
.lab .cols > article:last-child{border:0;}

/*
content:"\2713"; display:inline-block; color:#fff; margin-left:5px;
*/
/* MEDIA QUERIES */
/*
min-width: 320px  // smartphones, portrait iPhone, portrait 480x320 phones (Android)
min-width: 480px  // smartphones, Android phones, landscape iPhone
min-width: 600px  // portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android)
min-width: 801px  // tablet, landscape iPad, lo-res laptops ands desktops
min-width: 1025px // big landscape tablets, laptops, and desktops
min-width: 1281px // hi-res laptops and desktops
*/

@media screen and (min-width: 901px){ /* If is wide screen */
	.img.right{margin:10px 0 10px 20px; width:25%; position:relative; top:-75px;}
}

@media screen and (max-width: 1150px){
	blockquote.right{border-left-width:15px!important;}
}

@media screen and (max-width: 900px){
	/* nav too close to logo */
	#nav{left:115px; right:auto;}
	#logo{font-size:60px; padding:12px 0 8px 100px;}
	#payoff{font-size:18px; top:108px;}
	#content{margin-top:-28px;}
	#content > article, #content > .wrapper{padding-top:56px;}
	#content h3, #content p, #content blockquote, figcaption{font-size:125%;}
	#content h1+p{font-size:160%;}
	#content h2{font-size:150%;}
	#content > article > p, #content > article .content > p, #content > article > blockquote, #content > article .content > blockquote
	{max-width:100%;}
	#content > article > ul, #content > article .content > ul{max-width:95%}
	.img.right, blockquote.right{top:0; width:33%;}
	blockquote.right{font-size:100%; border-left-width:10px!important; margin-bottom:1em;}
	.wrap  .body{padding-top:135px;}
}

@media screen and (max-width: 650px){
	#logo{padding:12px 0 8px 0; background:none;}
	#nav{left:14px; right:auto;}
	#payoff, #tab-nav{margin-left:32px;}
	#content > article, #content > .wrapper{padding:56px 42px 32px 32px;}
	blockquote.right{float:none; padding:0 15px; margin:0 0 1em; width:100%;}
	
}

@media screen and (max-width: 480px){
	.head{position:relative;}
	.body, .head{margin:0;}
	#content{margin-top:0;}
	#content, .fittext{clear:both;}
	#logo, #payoff{margin-left:16px;}
	.head{padding-top:.5em;}
	#tab-nav{margin:0 16px -10px; position:relative;}
	#tab-nav a{font-size:14px;}
	#tab-nav a:hover{padding-top:1em;}
	#content > article, #content > .wrapper{padding:16px;}
	#logo{padding:32px 0 16px; line-height:1;}
	.img.right{width:40%;}
	#nav{left:-4px;}
	.wrap .body{padding-top:0;}
	#why, #payoff{display:none!important;}
}

@media screen and (max-width: 392px){
	#logo{font-size:40px; padding-bottom:0; margin-top:0; margin-bottom:16px; line-height:1;}
}

/*COLUMN SYSTEM*/
@media only screen and (min-width:480px) and (max-width:1100px){
	.lab .cols > article{width:48%;}
	.lab .cols > article:nth-child(odd){margin-left:0; clear:left;} 
	.lab .cols > article:nth-child(even){margin-right:0;}
}