@import './reset.css';
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700|Noto+Serif:400,700|Montserrat:300,400,700');
@import './zpanel.css?v=3.0';
@import './forms2.css?v=3.0';
@import './dropdown2.css?v=3.0';
@import './flexgrid.css?v=3.52';




/*************************************

Typography

*************************************/

a 					{ text-decoration: none; color:#007fff; }
a:hover,
a:focus,
a:active 			{ color:#0B65FF; }

h1,h2,h3,p,blockquote { transition:all 0.2s; -webkit-transition:all 0.2s; color:inherit }
h1,h2,h3,p  		{ margin:0; padding:0; }
h1,h2,h3 			{ letter-spacing: -0.05em }
h1.dropcap			{ font-size:150px; line-height: 150px; font-family: 'Noto Serif', Arial, Helvetica, sans-serif; font-weight: 700 }
h1.headline			{ font-size:120px; line-height: 120px; font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-weight: 700; }
h1.article-headline	{ font-size:90px; line-height: 100px; font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-weight: 500; }
h1 					{ font-size:70px; line-height: 70px; font-family: 'Noto Serif', Arial, Helvetica, sans-serif; font-weight: 300; letter-spacing:auto }
h2 					{ font-size:50px; line-height: 60px; font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-weight: 300  }
h3 					{ font-size:30px; line-height: 40px; font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-weight: 300  }
h4 					{ font-size:20px; line-height: 20px; font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-weight: 300; margin:50px 0;  }
h5 					{ font-size:18px; line-height: 18px; font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-weight: 300; margin:50px 0;  }
p 					{ font-size:18px; line-height: 30px; font-family: 'Noto Serif', Arial, Helvetica, sans-serif; font-weight: 300; text-align: inherit }

h1.headline.adaptive 			{ font-size:5vw; line-height: 0.83em; margin-bottom:1.5vw }
h3.adaptive			 			{ font-size:1.7vw; line-height:1.3em; margin-bottom:1.5vw }

.predash 			{ position: relative; }
.predash:before 	{ content:''; display:block; position:absolute; left:-150px; width:100px; height:0px; border-top:3px solid #ffcc00; top:25px; margin-top:-1px; }

.large 				{ font-size:18px  }
.medium 			{ font-size:16px  }
.small 				{ font-size:14px  }

.center 			{ text-align: center }
.left 				{ text-align: left }
.right 				{ text-align: right }
.justify 			{ text-align: justify }

.heavy 				{ font-weight: 700 }
.lightweight 		{ font-weight: 100 }

.caps 				{ text-transform: uppercase }
.condensed 			{ letter-spacing:-0.1em }
.expanded 			{ letter-spacing: 0.3em }
.emphasis 			{ font-style: italic }

.tagline 			{ margin: 10px 0 20px 0 }

.serif 				{ font-family: 'Noto Serif', Arial, Helvetica, sans-serif; }
.sans 				{ font-family: 'Roboto', Arial, Helvetica, sans-serif; }

.dark * 			{ color:#ffffff; }

.panel 				{ box-shadow:0px 0px 100px rgba(0,0,0,0.1); padding:100px 10px; max-width:600px; margin:0 auto; }

.columns p, 
p.columns 			{ -webkit-column-count:2; -moz-column-count:2; column-count:2; -webkit-column-gap:40px; -moz-column-gap:40px; column-gap:40px; -webkit-perspective:1 }
p.columns3,
.columns.columns3 p { -webkit-column-count:3; -moz-column-count:3; column-count:3; -webkit-column-gap:45px; -moz-column-gap:45px; column-gap:45px; -webkit-perspective:1 }


.section-summary h1 { max-width:75%; margin:0 0 -0.7em 0 }
.section-summary p.blurb { max-width:50%; margin-left:50%; position: relative }
.section-summary p.blurb:before { content:""; position:absolute; left:-100px; top:0.75em; width:50px; border-top:3px solid #ffcc00; }


/*************************************

Layouts

*************************************/

article.layout h1,
article.layout h2,
article.layout h3 					{ margin-bottom:50px }
article.layout p 					{ margin-bottom:30px }
.summary 							{ max-width: 620px; margin-left:auto; margin-right:auto }
.blurb,
p.blurb 							{ max-width:520px; margin:20px auto; }

#activity_blurb.blurb 				{ max-width:450px; }

article.layoutB 					{ max-width: 800px; margin: 0 auto }

article.layout p 					{ max-width: 620px; margin:0 auto 30px; padding:0 5px; box-sizing: border-box }
article.layoutB p 					{ max-width:100%; }
article.offset-bottom				{ padding-bottom:400px }
article.offset-top  				{ margin-top:-400px }

div.fullwidth,
img.fullwidth 						{ width:100%; }
img.w90 { width:90%; display: block; margin:0 auto; }

div.poster 							{ background: #222222; overflow:hidden; position: relative; z-index: 1 }
div.poster img 						{ width:100%; }

div.poster .content 				{ position: absolute; top:50%; left:30px; right:30px; z-index: 2; transform: translateY(-50%); }

.poster 							{ width:100%; margin:0 0 50px 0; border-radius: 3px }
.pull_left							{ max-width: 575px; float: left; margin:0 50px 30px 0; width:50%; }
.pull_right							{ max-width: 575px; float: right; margin:0 0px 30px 50px; width:50%; }
.lightbox_trigger 					{ position: relative; cursor: zoom-in; transition:opacity 0.2s; -webkit-transition:opacity 0.2s }
.lightbox_trigger:hover				{ opacity: 0.5 }

blockquote 							{ font-size:30px;  letter-spacing: -0.07em; line-height: 30px; position: relative }
blockquote.style1 					{ text-align: center; padding:100px 0; margin:100px 0; border:1px solid rgba(0,0,0,0.1); border-width:1px 0; line-height: 45px; }
blockquote.style1:before 			{ content:url("../img/svg/quotation_mark.svg"); position: absolute; top:0; left:50%; z-index: -1; margin:50px 0 0 -25px; opacity:1; }

blockquote.style2 					{ text-align: left; padding:0; margin:0 50px 15px 0; float: left; max-width: 550px; width:50%; }
blockquote.style2:before 			{ content:url("../img/svg/quotation_mark.svg"); position: absolute; top:0; left:0; z-index: -1; margin:-50px 0 0 0; opacity:1; }

blockquote.style3 					{ text-align: left; padding:0; margin:0 0 15px 50px; float: right; max-width: 550px; width:50%; }
blockquote.style3:before 			{ content:url("../img/svg/quotation_mark.svg"); position: absolute; top:0; left:auto; right:0; z-index: -1; margin:-50px 0 0 0; opacity:1; }

blockquote.small 					{ width: 250px; font-size:18px; font-weight: 700; line-height: 30px }
blockquote.style3.small:before 		{ left:0; right:auto;}

.dark blockquote.style2,
.dark blockquote.style3,
.dark blockquote.style1 			{ border-color:rgba(255,255,255,0.1); }

blockquote.style1.spaced 			{ line-height: 45px }

aside.before 						{ float: left; width:25%; max-width:250px; margin-right:30px; }
aside.after 						{ float: right; width:25%; max-width:250px; margin-left:30px; }
aside img 							{ margin-bottom:30px; background: #f4f4f4; width:100%; max-width:250px; }
article.layout aside p 				{ max-width: 100%; padding:0; }

p.dash 								{ line-height: 0px; margin:30px 0; border-top:1px solid rgba(0,0,0,0.5); opacity:0.5; }
p.dash span 						{ display: inline-block; padding:0 15px; line-height: 20px; margin-top:-12px; background: #ffffff; text-transform: uppercase; font-weight: 400; color:#282828 }



a.cta 								{ display: inline-block; min-width: 80px; line-height: 30px; padding:8px 10px; opacity:1; text-align: center; border-radius: 3px; transition: all 0.25s; -webkit-transition:all 0.25s; font-size: 18px; font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif; text-decoration: none; position: relative }
a.cta.main 							{ background-color:#007fff; color:#ffffff; }
a.cta.main:hover,
a.cta.main:active,
a.cta.main:focus 					{ background-color: #0B65FF; box-shadow: 20px 20px 40px rgba(0,0,0,0.1); transform:scale(1.05, 1.05); -webkit-transform:scale(1.05, 1.05); }


a.cta.danger 						{ background-color:#D0011B; color:#ffffff; }
a.cta.danger:hover,
a.cta.danger:active,
a.cta.danger:focus 					{ background-color: #FF5D5D; box-shadow: 20px 20px 40px rgba(0,0,0,0.1); transform:scale(1.05, 1.05); -webkit-transform:scale(1.05, 1.05); }


a.cta.inverse 						{ background-color:#ffffff; color:#007fff; }
a.cta.inverse:hover,
a.cta.inverse:active,
a.cta.inverse:focus 				{ background-color: #ffffff; box-shadow: 20px 20px 40px rgba(0,0,0,0.1); transform:scale(1.05, 1.05); -webkit-transform:scale(1.05, 1.05); }

a.cta.main.loading { background-color:#4C8EFC; transform:scale(0.95,0.95); -webkit-transform:scale(0.95,0.95); text-indent: -9999px }

a.cta.main.loading:before { content:""; display:block; position:absolute; left:50%; top:50%; border-radius:50%; box-sizing:border-box; border:2px solid #ffffff; border-color:transparent #ffffff #ffffff #ffffff; width:16px; height:16px; margin:-8px 0 0 -8px; text-align:center; color:#ffffff; line-height: 10px; text-indent: 0
	-webkit-animation:spin 1s linear infinite;
    -moz-animation:spin 1s linear infinite;
    animation:spin 1s linear infinite;
}

a.cta.wide 							{ min-width:120px; padding-left:20px; padding-right:20px; }

a.cta.alt 							{ border:1px solid rgba(0,0,0,0.1); color:#007fff; padding:5px 10px; font-size:16px }
a.cta.alt2 							{ font-size:16px; text-align: left; min-width: auto; padding:0; position: relative; }
a.cta.alt:hover,
a.cta.alt:active,
a.cta.alt:focus 					{ border-color:#0B65FF; color:#0B65FF }

.dark a.cta.alt 					{ border-color:rgba(255,255,255,0.2); color:rgba(255,255,255,0.5); }
.dark a.cta.alt:hover,
.dark a.cta.alt:active,
.dark a.cta.alt:focus 				{ border-color:#ffffff; color:#ffffff; }

a.cta.fullwidth 					{ display: block; width: auto; margin: 0 }

.cta_stack a.cta 					{ margin:0 0 10px 0; }

a.cta .fb-photo 					{ position: absolute; top:50%; left:10px; width:30px; height:30px; border-radius: 50%; margin:-15px 0 0 0; overflow: hidden }
a.cta .fb-photo img 				{ width:100% }

a.small_close 						{ font-size:25px; color:#000000; width:50px; height:50px; position: absolute; top:0; right:0; text-align: center; line-height: 50px; opacity: 0.3; transition:all 0.25s; -webkit-transition:all 0.25s; }
a.small_close:hover 				{ opacity: 1; color:#007fff; }

a.menu 								{ padding-left:30px; position: relative; }
a.menu:before 						{ content:url("../img/svg/menu.svg"); position: absolute; top:-10px; left:-10px; width:50px; height: 50px }

a.deco 								{ position: relative; z-index:12 }
a.deco:after 						{ content:""; position: absolute; z-index:12; bottom:-5px; width:0; border-bottom:5px solid #FFCC00; left:0; z-index: -1; transition:0.2s all cubic-bezier(.23,.71,.08,.78); -webkit-transition:0.2s all cubic-bezier(.23,.71,.08,.78); }
a.deco.active:after,
body.desktop a.deco:active:after, 
body.desktop a.deco:hover:after 	{ opacity:1; width:100%; left:0;}

a.deco.style2:after 				{ border-bottom-width:1px; width:100%; border-bottom-color:#007FFF; }
a.deco.style2:active:after, 
a.deco.style2:hover:after 			{ border-bottom-width:5px; }

.dark .layout a.deco:after { width:100%; opacity:1; border-width:2px; }

.dark_header header.main_header a.deco2:after,
body.desktop .dark a.deco2:after { border-bottom-color:#007FFF; left:0; width:100%; border-bottom-width:1px; opacity:1; }

.dark_header header.main_header a.deco2:active:after, .dark_header header.main_header a.deco:hover:after,
body.desktop .dark a.deco2:active:after, body.desktop .dark a.deco:hover:after { border-bottom-width:5px; }

a.copy_btn 	{ display: block; width:40px; height: 40px; position: absolute; top:50%; right:5px; margin-top:-20px; z-index: 12 }
.copy_btn_bg, .copy_btn_icon { transition:all 0.5s; -webkit-transition:all 0.5s; }

a.copy_btn:hover .copy_btn_bg,
a.copy_btn:active .copy_btn_bg,
a.copy_btn:focus .copy_btn_bg { fill-opacity:1; fill:#007FFF; }

a.copy_btn:hover .copy_btn_icon,
a.copy_btn:active .copy_btn_icon,
a.copy_btn:focus .copy_btn_icon { fill:#FFFFFF; }

.blocklink { display: block; width:100%; text-align: center }

.fragment_container 				{ border-radius:5px; margin:50px auto; overflow: hidden; max-width:1400px; position: relative; z-index: 11 }

/*************************************

Structure
8 column grid; 140px / 20px gutter

*************************************/

body 								{ background: #ffffff; overflow-x:hidden; font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;  color:#282828 }
.wrap 								{ overflow: hidden; opacity:0; transition:opacity 0.75s; -webkit-transition:opacity 0.75s; position: relative }
.loaded 							{ opacity: 1 }
.nooverflow 						{ overflow: hidden }
.none 								{ display: none; opacity:0; position: absolute; top:-10000px; left:-10000px; width:0px; height:0px; overflow: hidden; z-index: -1 }
.hidden 							{ display: none }

section, article 					{ position: relative; z-index: 11 }
article 							{ box-sizing: content-box; max-width:1260px; margin:0 auto; padding:0; }

article.wide 						{ max-width:1600px; padding-left:0; padding-right:0; margin-left:auto; margin-right:auto; }
article.narrow 						{ max-width: 700px; margin:0 auto; }

section.intro 						{ z-index: 10 }
section.outro 						{ opacity: 0; z-index:9 }

section.pop 						{ z-index: 12 }
.whitebg,
section.light 						{ background-color:#ffffff }
.grid_wrap.alt,
.altbg,
section.alt 						{ background-color:#F6F7F7 }
.accentbg,
section.accent 						{ background-color:#ECF3F5 }

.accentcolor 						{ color: #FFCC00 }

.featurebg,
section.feature 					{ background-color:#FFCC00 }
section.dark 						{ background-color:#282828 }
section.dark.deep_dark 				{ background-color:#000000 }
section.transparent 				{ background-color: transparent }
section.boxed 						{ margin-left:100px; margin-right:100px; }
section.boxed article 				{ padding-left:50px; padding-right: 50px; }

section.headerA article 			{ position: absolute; top:50%; transform: translateY(-50%); left:0; right:0; }
section.fixed 						{ position: fixed; top:0; width:100% }

header 								{ display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:space-between; align-items:center; position: absolute; top:0; left:0; right:0; z-index: 13; padding:30px 0; margin:0 50px; transition:all 0.25s; -webkit-transition:all 0.25s; border-bottom:1px none rgba(0,0,0,0.1); }
header .logo 						{ width:150px; height: 30px; background: url("../img/svg/fv-horizontal-black.svg") no-repeat center center; background-size:contain; }
header.center 						{ justify-content: center }
.dark_header header .logo 			{ background-image:url("../img/svg/fv-horizontal-white.svg"); }
.dark_header header 				{ border-color:rgba(255,255,255,0.1); }

nav 								{ display: flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-items:center }
nav strong,
nav a 								{ font-size:14px; font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif; line-height: 20px; display: inline-block; padding:5px 0; margin:0 0 0 20px; opacity: 0.5; transition:all 0.25s; -webkit-transition:all 0.25s; color:#000000; }
nav a.cta 							{ padding:5px; font-size:14px; }
nav.style2 a 						{ font-size:12px !important; text-transform: uppercase; font-weight: 400; margin:0 0 0 20px; }
nav.style2 a.cta 					{ padding:5px 10px; }
nav a:active,
nav a:hover,
nav a:focus,
nav a.active 						{ opacity:1; color:#007FFF; }

nav a.user 							{ position: relative; padding-right:35px; }
nav a .avatar 						{ width:30px; height:30px; border-radius: 50%; overflow:hidden; position: absolute; top:0; right:0; }
nav a .avatar img 					{ width:100% }

nav.center 							{ justify-content: center }
nav.center a 						{ margin:0 10px; }

.outro_trigger 	 					{ width:100%; overflow: hidden; height: 100vh; background:#111111; position: relative; z-index: 7 }
.outro_trigger.transparent 			{ background: transparent }

.vh100 								{ height:100vh }
.vh90 								{ height:90vh }
.vh80 								{ height:80vh }
.vh70 								{ height:70vh }
.vh60 								{ height:60vh }
.vh50  								{ height:50vh }

.maxhlimit 							{ max-height: 900px }

#resource_grid						{ box-shadow:40px 40px 80px rgba(0,0,0,0.1) }
.dropshadow 						{ box-shadow:0 60px 50px rgba(0,0,0,0.05) }
.boxshadow 							{ box-shadow:40px 40px 80px rgba(0,0,0,0.1) }

.t100 								{ margin-top:100vh; }
.t90 								{ margin-top:90vh; }
.t80 								{ margin-top:80vh; }
.t70 								{ margin-top:70vh; }
.t60 								{ margin-top:60vh; }
.t50 								{ margin-top:50vh; }

.pt10v 								{ padding-top:10vh !important }
.pb10v								{ padding-bottom:10vh !important }

.pt30v 								{ padding-top:30vh !important }
.pb30v								{ padding-bottom:30vh !important }

.pt400 								{ padding-top:400px; }
.pt300 								{ padding-top:300px; }
.pt200 								{ padding-top:200px; }
.pt100 								{ padding-top:100px; }

.pb300 								{ padding-bottom:300px; }
.pb200 								{ padding-bottom:200px; }
.pb100 								{ padding-bottom:100px; }

.pl30 								{ padding-left:30px !important }
.pr30 								{ padding-right:30px !important }

.mt30 								{ margin-top:30px !important; }
.mb30 								{ margin-bottom:30px !important; }

.mt50 								{ margin-top:50px; }
.mb50 								{ margin-bottom:50px; }
.mt100 								{ margin-top: 100px }
.mb100								{ margin-bottom: 100px }
.mt200 								{ margin-top: 200px }
.mb200								{ margin-bottom: 200px }

.mt-50 								{ margin-top: -50px }
.mt-100 							{ margin-top:-100px; }
.mt-150 							{ margin-top:-150px; }
.mt-200 							{ margin-top:-200px; }
.mb-50 								{ margin-bottom: -50px; }
.mb-100 							{ margin-bottom: -100px }
.mb-150 							{ margin-bottom: -150px }
.mb-200 							{ margin-bottom: -200px }

.mt-100d 							{ margin-top: -100px }

.curtain 							{ position: absolute; z-index:10; left:0; right:0; bottom:0; top:0; background:rgba(0,0,0,0.5); }
.curtain.content_veil 				{ z-index: 20; top:auto; height:50%; min-height: 400px }
.curtain 							{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.4+0,1+100 */
background: -moz-linear-gradient(top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.4)), color-stop(100%,rgba(0,0,0,1))); /* Chrome4-9,Safari4-5 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.4) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: -o-linear-gradient(top, rgba(0,0,0,0.4) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10-11.50 */
background: -ms-linear-gradient(top, rgba(0,0,0,0.4) 0%,rgba(0,0,0,1) 100%); /* IE10 preview */
background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}

.curtain.content_veil {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,1+100 */
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1)));
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
	background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
	background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 );
}

.light .curtain {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0.4+0,1+100 */
background: -moz-linear-gradient(top, rgba(255,255,255,0.4) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.4)), color-stop(100%,rgba(255,255,255,1))); /* Chrome4-9,Safari4-5 */
background: -webkit-linear-gradient(top, rgba(255,255,255,0.4) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: -o-linear-gradient(top, rgba(255,255,255,0.4) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10-11.50 */
background: -ms-linear-gradient(top, rgba(255,255,255,0.4) 0%,rgba(255,255,255,1) 100%); /* IE10 preview */
background: linear-gradient(to bottom, rgba(255,255,255,0.4) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}

.lesson_note_container .curtain {
	background: -moz-linear-gradient(top, rgba(246,247,247,0) -1%, rgba(246,247,247,0) 0%, rgba(246,247,247,1) 73%);
	background: -webkit-linear-gradient(top, rgba(246,247,247,0) -1%,rgba(246,247,247,0) 0%,rgba(246,247,247,1) 73%);
	background: linear-gradient(to bottom, rgba(246,247,247,0) -1%,rgba(246,247,247,0) 0%,rgba(246,247,247,1) 73%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f6f7f7', endColorstr='#f6f7f7',GradientType=0 );
	top:auto; height:200px;
	z-index: 12;
}

.vertical 							{ transform:rotate(90deg); transform-origin:0 100%; white-space: nowrap }
.vertical.style2 					{ transform:rotate(-90deg) translateX(50px) translateY(100%); transform-origin:0 0; }
#page-nav 							{ position: relative; z-index: 13 }
.page-nav 							{ position: absolute; left:0; z-index: 13; margin-top:90px; margin-left:40px; transition:margin 0.5s; -webkit-transition:margin 0.5s; }
.page-nav.sectiontop 				{ margin-top:-25px; }
#page-nav.off .page-nav 			{ margin-left:-100px; }
.menu-title 						{ position: relative; padding-right:70px; opacity:1; margin-left:0 }
.menu-title:after 					{ content:""; width:50px; border-top:2px solid #000000; position: absolute; top:50%; right:0; }
.fullbg 							{ background-size: cover; background-repeat:no-repeat; background-position: center center }
.centerbg 							{ background-size: 100% auto; background-repeat: no-repeat; background-position: center top }
.abs 								{ position: absolute; left: 0; right: 0 }
.absb 								{ position: absolute; bottom:0px; padding:10px; left:0; right:0; background:rgba(0,0,0,0.02); border-top:1px solid rgba(0,0,0,0.05); }
.absb.transparent,
.transparent 						{ background-color: transparent }
.fade 								{ opacity: 0.5 }
.fade1 								{ opacity: 0.1 }

.curtain_cta 						{ position: absolute; bottom:0; left:0; right:0; padding:0 0 50px 0; }

.dropcap.fade.abs 					{ opacity: 0.1; top:50px; left:50px; }

.dark .menu-title:after { border-color:rgba(255,255,255,0.3); }

.dark_header header.main_header nav a,
.dark nav a 		{ color:#ffffff; }
.dark_header a.menu:before { content:url("../img/svg/menu_white.svg"); }

.hdash { height:1px; border-top:1px solid rgba(0,0,0,0.2); width:200px; margin-left:auto; margin-right:auto }
.hline { height:1px; border-top:1px solid rgba(0,0,0,0.1); margin:50px 0; }

.vdash { width:1px; border-left:1px solid rgba(0,0,0,0.2); height:200px; margin-left:auto; margin-right:auto }
.dark .vdash { border-color:rgba(255,255,255,0.2); }

.vdash.scrolldown { position: absolute; bottom:0;  z-index: 12; height:50px }

.vdash.scrolldown:before { content:"Scroll down"; opacity: 0.5; position: absolute; text-align: center; text-transform: uppercase; letter-spacing: 0.2em; display: block; top:-30px; width:120px; margin:0 0 0 -60px; font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif; line-height: 20px; color:#000000; }

.dark .vdash.scrolldown:before { color:#ffffff; }

.vdash.short { margin:30px 0; height:50px; }

.headerA .vdash { position: absolute; margin-top:50px; left:50%; }

.header_notification 				{ background: #007fff; position: relative; top:0; left:0; right:0; z-index: 12; overflow:hidden }
.header_notification.warning		{ background-color: #D0011B }
.header_notification article p 		{ margin:15px 0; font-size:14px; line-height: 22px  }
.header_notification article p a 	{ text-decoration: underline; font-weight:900 }
.header_notification.dark article p a { color:#ffffff; opacity: 0.8 }
.header_notification.dark article p a:active,
.header_notification.dark article p a:hover,
.header_notification.dark article p a:focus { opacity: 1 }

.author { border-radius: 50%; width:150px; height: 150px; margin:0 auto 50px; overflow-y: hidden; position: relative }
.author img { transition:all 0.5s cubic-bezier(.11,.96,.51,.95); -webkit-transition:all 0.5s cubic-bezier(.11,.96,.51,.95); width:100%; }
.author:hover img { transform:scale(1.1); -webkit-transform:scale(1.1); transition:all 4s cubic-bezier(.11,.96,.51,.95); -webkit-transition:all 4s cubic-bezier(.11,.96,.51,.95); }

.progress_bar { margin:50px 0 15px; height:1px; border-bottom:1px solid rgba(0,0,0,0.1); position: relative; }
.progress_inner { height: 3px; top:-1px; left:0; border-radius:5px; background-color: #007fff; width:0; }


.section_illustration { width: 420px; height: 420px; display: block; margin:100px auto; position: relative; cursor: pointer }
.section_illustration.standalone { margin:100px 0; left:50%; margin-left:-210px; }

.section_illustration svg { position: absolute; z-index:11; width:100%; height:100%; }
.section_illustration svg.illustration_cta { transition:all 0.25s cubic-bezier(.11,.96,.51,.95);; -webkit-transition:all 0.25s cubic-bezier(.11,.96,.51,.95); z-index: 13 }
.section_illustration svg .illustration_outline { transition:all 0.75s cubic-bezier(.11,.96,.51,.95);; -webkit-transition:all 0.75s cubic-bezier(.11,.96,.51,.95); }

.section_illustration svg .illustration_outline { stroke-width:60px; }
section.active .section_illustration svg .illustration_outline { stroke-width:60px; }
section.active .section_illustration:hover svg .illustration_outline { stroke-width:70px; }


.section_illustration svg.illustration_cta { transform:scale(0,0); -webkit-transform:scale(0,0); }
.section_illustration:hover svg.illustration_cta { transform:scale(1,1); -webkit-transform:scale(1,1); }

.section_illustration img.illustration_detail { position: absolute; left:50%; top:50%; margin:0 0 -375px; width:750px; z-index: 12; transition:all 0.75s cubic-bezier(.11,.96,.51,.95); -webkit-transition:all 0.75s cubic-bezier(.11,.96,.51,.95); transform:translateX(-50%) translateY(-50%); -webkit-transform:translateX(-50%) translateY(-50%); }
.section_illustration:hover img.illustration_detail { transform:translateX(-50%) translateY(-50%) scale(1.03,1.03); -webkit-transform:translateX(-50%) translateY(-50%) scale(1.03, 1.03); }


.ux_cta_illustration { width:150px; height:150px; margin:0 auto 30px; display: block; }

/*************************************

Grids

*************************************/


.grid_wrap 							{ border:1px solid rgba(0,0,0,0.1); padding:30px 0; box-sizing: border-box  }
.grid 								{ display: flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; align-items:stretch; position: relative; margin:0 0 30px 0; }
.grid.masonry 						{ align-items:flex-start; flex-direction: column; height: 50vh; max-width: 1260px; justify-content: flex-start; }
.cell 								{ flex-grow:1; position: relative; box-sizing: border-box; width:25%; display: flex; align-items:stretch }
.cell.wide 							{ width:50%; }

.grid.hero 							{ flex-wrap:wrap; z-index: 12; margin:0; }
.grid.hero .cell 					{ }
.grid.hero .cell .cc:before			{ content:""; position: absolute; top:0; left:50px; width:70px; border-top:3px solid #000000 }
/*.grid.hero .cell .cc:after			{ content:""; position: absolute; top:1px; left:50px; right:50px; border-top:1px solid #000000; opacity:0.1; }*/
.grid.hero .cell h2 				{ margin-bottom:30px; }
.grid.hero .cell p 					{ max-width:400px; margin-top:10px; margin-bottom:0; }

.grid.hero .cell.dark 				{ background-color: #1a212b }
.grid.hero .cell.tall 				{ height:80vh; }
.grid.hero .cell.floatabove 		{ box-shadow:40px 40px 80px rgba(0,0,0,0.1) }

.cell .cc 							{ padding:20px; position: relative; width:100% }
.cell.boxed .cc 					{ border:1px solid rgba(0,0,0,0.1); border-radius:2px; }
.grid.hero .cell .cc 				{ padding:150px 50px; }

/*
.grid.hero .cell:first-child .cc 	{ padding-left:0; }
.grid.hero .cell:first-child .cc:before { left:0; }
.grid.hero .cell:first-child .cc .dropcap { left:0; }
*/

.cell.alt .cc 						{ background-color: #F6F7F7; border-radius:2px; padding-top:30px; padding-bottom:80px; text-align: center }
.cell.alt.hero .cc 					{ background-color: #007FFF }

.grid.spaced 						{ margin-left:-10px; margin-right:-10px; }
.grid.spaced .cell 	.cc 			{ margin:10px; }

.grid.borders .cell 				{ border-right:1px solid rgba(0,0,0,0.1); }
.dark .grid.borders .cell 			{ border-color:rgba(255,255,255,0.1); }
.grid.borders .cell:last-child 		{ border-right-style:none; }

.grid_wrap .grid 					{ margin-bottom:0 }
.grid_wrap .cell .cc				{ padding:40px; }

.grid.flush .cc { padding-left:0; padding-right:0; }

.grid_wrap.post-actions 			{ background-color: #007FFF; color:#fff; padding:70px 0; border:none; border-radius: 3px }
/*.grid_wrap.post-actions .grid 		{ max-width: 940px; margin:0 auto; }*/

.grid.course_toc 					{ justify-content: flex-start; margin:30px 0; }
.grid.course_toc .cell 				{ flex-grow:0; width:25%; border-top:1px solid rgba(0,0,0,0.05); }

.dark .grid.course_toc .cell 		{ border-color:rgba(255,255,255,0.2); }

.grid.course_toc .cell .cc 			{ padding:20px 0; }
.grid.course_toc .cell .cc .card_thumb { width:40px; height:40px; margin:0 15px 0 0; float: left }
.grid.course_toc .cell .cc p 		{ line-height: 40px }


.grid.pricing_grid .cell 			{ padding:20px 0; }
.grid.pricing_grid .cell.featured	{ padding:0; }
.grid.pricing_grid .cell.featured .cc { overflow: hidden }

.grid.pricing_grid .cell span.next 	{ position: absolute; width:200px; top:30px; transform: rotate(45deg); -webkit-transform:rotate(45deg); left:auto; right:-70px; margin:0; background-color:#ffffff; color:#000000; font-weight: bold; letter-spacing: normal; font-size:12px; }

.grid.pricing_grid .cell .cc 		{ padding: 40px 40px 120px 40px; box-shadow:0px 0px 30px rgba(0,0,0,0.1); background-color: #ffffff; border:none; border-radius:5px; }
.grid.pricing_grid .cell.featured .cc { background-color: #007fff }
.grid.pricing_grid .cell .cc h4		{ margin: 0 0 30px 0; font-weight: 400 }
.grid.pricing_grid .cell .cc h2		{ margin: 0 0 50px 0; font-weight: 700 }

.price_frequency,
.grid.pricing_grid .cell .cc h2 span{ font-size:0.6em; font-weight: 300; display: inline-block; margin-left: 5px }

ul.checklist,
.grid.pricing_grid .cell .cc ul 	{ font-size:14px; list-style-image: url('/_s/img/svg/check-blue.svg'); }

.dark ul.checklist,
.grid.pricing_grid .cell.featured .cc ul { list-style-image: url('/_s/img/svg/check-white.svg'); }

ul.checklist li,
.grid.pricing_grid .cell .cc ul li 	{ padding:5px 0; margin:0 0 0 25px; line-height: 20px }
.grid.pricing_grid .cell .cc p.absb { background:transparent; border:none; padding:0 40px 40px 40px; }

.cell_icon 							{ display: block; margin:0 auto 10px; width:50px; height: 50px }
.badge 								{ width:20px; height: 20px; background-color: #ffffff; color:#000000; text-align: center; line-height: 20px; border-radius: 50%; overflow-y: hidden; display: block; font-size:14px; position: absolute; top:30px; left:50%; margin-left:20px; }

.embadge { padding:5px 15px; display:inline-block; background: #000000; color:#ffffff; border-radius: 3px }
.embadge.tiny { font-size:10px; font-weight:normal; letter-spacing:0.1em; text-transform:uppercase; margin-left:10px; padding:5px 5px 3px 5px }
.dark .embadge { background-color: #ffffff; color:#000000; }

.embadge.accentbg,
.dark .embadge.accentbg { background-color: #ff0505; color:#ffffff; }

.masonry 							{ -webkit-column-count:3; -moz-column-count:3; column-count:3; -webkit-column-gap:20px; -moz-column-gap:20px; column-gap:20px; -webkit-perspective:1 }
.masonry.double 					{ -webkit-column-count:2; -moz-column-count:2; column-count:2; -webkit-column-gap:20px; -moz-column-gap:20px; column-gap:20px; -webkit-perspective:1 }
.masonry .cell 						{ width:100% !important; margin:0 0 20px 0; -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid;}

.masonry.ti .cell .cc 				{ padding:0 0 50px 0 }
.masonry.ti { -webkit-column-gap:50px; -moz-column-gap:50px; column-gap:50px; }

.cell.lesson_note p,
.cell h3 							{ margin-bottom:30px; }
.cell p 							{ margin-bottom:0; }

.cell.lesson_note p:last-child 		{ margin-bottom:0; }

.cell.alt h3 						{ font-weight: 300; text-align: center; }
.card_thumb 						{ width:100px; height: 100px; border-radius: 50%; margin:50px auto; background-size:cover; background-repeat: no-repeat; background-position: center center }
.card_thumb.hero 					{ width:150px; height: 150px; margin:25px auto; border-radius:0; }
.form_wrap .card_thumb 				{ margin:0 auto 25px; }

.card_icon { width:50px; height:50px; margin-bottom:10px; }

.cell.testimonial .cc 				{ padding-bottom: 90px }
.cell_footer 						{ display: block; position: absolute; bottom:0; left:0; right:0; padding: 0 0 10px 0 }

.post-header 						{ display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-items:center; margin:0 0 30px 0; }
.post-header img.avatar 			{ width:30px; height:30px; border-radius:50%; margin:0 10px 0 0 }
.post-header h4 					{ font-weight: 700; font-size:16px; line-height:16px; display:block; font-family: 'Roboto', Arial, Helvetica, sans-serif; margin:0; }
.post-header .timestamp 			{ font-weight:300; font-size:14px; line-height:16px; display: block; font-family: 'Roboto', Arial, Helvetica, sans-serif; opacity:0.5; display: block; margin:0 0 0 5px; }
.post-header .timestamp:before 		{ content:"— " }

/* .post-footer 						{ display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-items:center; margin:30px -20px -20px -20px; border-top:1px solid rgba(0,0,0,0.1); padding:10px 20px; position: relative; transition:all 0.25s; -webkit-transition:all 0.25s; opacity: 0.5 }*/
.post-footer 						{ display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:flex-start; align-items:center; margin:0px -20px 10px -20px; border-top:1px none rgba(0,0,0,0.1); padding:10px 20px; position: relative; transition:all 0.25s; -webkit-transition:all 0.25s; opacity: 0.5 }
.post-footer img.avatar 			{ width:30px; height:30px; border-radius:50%; margin:0 10px 0 0; opacity: 0.5 }
.post-footer .reply 				{ font-weight:300; font-size:14px; line-height:16px; display: block; font-family: 'Roboto', Arial, Helvetica, sans-serif; opacity: 0.5 }
.post-footer .action 				{ display: block; position: absolute; top:0; right:20px; text-align: right; font-weight:300; font-size:14px; line-height:30px; display: block; font-family: 'Roboto', Arial, Helvetica, sans-serif; opacity: 0.5; padding:10px 25px 10px 0; cursor: pointer }
.post-footer .like:after 			{ content:url("../img/svg/icons/heart/off.svg"); position:absolute; top:15px; right:0; }
.post-footer .like:hover:after 		{ content:url("../img/svg/icons/heart/hover.svg") }
.post-footer .like.active:after 	{ content:url("../img/svg/icons/heart/on.svg"); }

.post-footer .reply:hover,
.post-footer .like:hover 			{ color:#007FFF; }

.post-footer:hover,
.post-header:hover h4,
.post-footer:hover img.avatar,
.post-footer:hover .reply,
.post-footer:hover .action 			{ opacity: 1 }

.post-header img.avatar,
.post-footer img.avatar,
.post-header h4,
.post-footer .reply,
.post-footer .action 				{ transition: all 0.25s; -webkit-transition:all 0.25s; }

.reply-count { color:#007FFF; }
.reply-count:before { content:"— "; }

.cards .cell							{ transition:all 0.25s; -webkit-transition:all 0.25s; }
.cards .cell .cc 						{ background-color:#222222; color:#ffffff; background-size: cover; background-repeat: no-repeat; background-position: center center; height: 450px; overflow: hidden; border-radius:3px; }
.cards .cell .cc h3 					{ margin:30px 0 0 0; }

.darkcell .cc { background-color:#222222; }

/* reverse-hover effect */
/*.cards:hover .cell .cc .card-content 	{ background-color:rgba(255,255,255,0.9); }*/


.cards .cell .cc .card-content 				{ background-color:rgba(0,0,0,0.5); position: absolute; top:0; left:0; right:0; bottom:0; padding:20px; transition: all 0.25s; -webkit-transition:all 0.25s }
.cards .cell:hover .cc .card-content 		{ background-color:rgba(0,127,255,0.9); }
.cards .cell.locked:hover .card-content		{ background-color:rgba(0,0,0,0.8); }
.cards .cell.completed:hover .card-content 	{ background-color: rgba(97,174,8,0.9) }

.cards .cell .cc .card-content p 			{ position: absolute; top:30%; transition:all 0.25s; -webkit-transition:all 0.25s; opacity: 0; left:20px; right:20px; }
.cards .cell:hover .cc .card-content p 		{ opacity: 1 }

.card-footer 								{ position: absolute; bottom:0; left:0; right:0; padding:20px; font-size:14px; line-height: 16px; text-align: center; transition:all 0.5s; -webkit-transition:all 0.5s; }
.card-footer .progress 						{ position: absolute; top:0; left:20px; right:20px; border-top:1px solid rgba(255,255,255,0.3); transition:all 0.25s; -webkit-transition:all 0.25s; opacity: 0 }
.cards .cell:hover .progress 				{ opacity: 1 }

.card-footer .progress:before 				{ position: absolute; top:-1px; left:0; width:0; display: block; content:''; border-top:1px solid #ffffff; transition: all 0.5s; -webkit-transition:all 0.5s; }
.cell:hover .card-footer .progress.progress10:before 	{ width:10%; }
.cell:hover .card-footer .progress.progress20:before 	{ width:20%; }
.cell:hover .card-footer .progress.progress30:before 	{ width:30%; }
.cell:hover .card-footer .progress.progress40:before 	{ width:40%; }
.cell:hover .card-footer .progress.progress50:before 	{ width:50%; }
.cell:hover .card-footer .progress.progress60:before 	{ width:60%; }
.cell:hover .card-footer .progress.progress70:before 	{ width:70%; }
.cell:hover .card-footer .progress.progress80:before 	{ width:80%; }
.cell:hover .card-footer .progress.progress90:before 	{ width:90%; }
.cell:hover .card-footer .progress.progress100:before 	{ width:100%; }

.card-footer.completed,
.card-footer.locked 	{ text-align: left; padding-left:50px }

.card-footer.locked:before { content:url("../img/svg/icons/lock.svg"); position: absolute; top:50%; margin-top:-10px; left:20px; }

.card-footer.completed:before { content:url("../img/svg/icons/check/off.svg"); position: absolute; top:50%; margin-top:-10px; left:20px; }
.cell.completed:hover .card-footer.completed:before { content:url("../img/svg/icons/check/hover.svg"); }
.cell.completed:hover .card-footer.completed:after { content: " - start again"; }

.card-footer.unlocked,
.card-footer.progress 	{ background-color:#007fff; }
.cell:hover .card-footer.unlocked,
.cell:hover .card-footer.progress { background-color: transparent }

span.next { position: absolute; left:50%; top:-30px; width:100px; transform: translateX(-50%); -webkit-transform:translateX(-50%); display: block; z-index: 20; text-align: center; font-size:10px; text-transform: uppercase; color:#000000; background:#f4f4f4; border-radius:2px; line-height: 25px; letter-spacing: 0.25em; font-family: 'Roboto', Arial, Helvetica, sans-serif; padding:0 10px; transition:all 0.5s cubic-bezier(.23,.71,.08,.78);; -webkit-transition:all 0.5s cubic-bezier(.23,.71,.08,.78); }
.next_lesson { position: absolute; width:200px; height: 300px; border-radius:5px; top:50%; left:50%; margin:-150px 0 0 -100px; overflow-y: hidden; z-index: -1; transition:all 0.5s cubic-bezier(.23,.71,.08,.78);; -webkit-transition:all 0.5s cubic-bezier(.23,.71,.08,.78); background-color:#000000; }
.next_lesson img { width: 100%; opacity:0.2; transition:all 1s cubic-bezier(.23,.71,.08,.78);; -webkit-transition:all 1s cubic-bezier(.23,.71,.08,.78) }

a:hover .next_lesson { transform:scale(1.1, 1.1); -webkit-transform:scale(1.1,1.1); background-color:#282828 }
a:hover .next_lesson img { transform:scale(1.2, 1.2); -webkit-transform:scale(1.2,1.2); opacity:0.4 }
a:hover span.next 	{ background-color: #1a212b; color:#ffffff; }

a.prev_link,
a.next_link { position: absolute; top:50%; font-family: 'Roboto', Arial, Helvetica, sans-serif; text-align: center; margin-top:-25px; width:50px; height: 50px; font-size: 20px; border-radius: 50%; background:rgba(255,255,255,0.25); color:#ffffff; z-index: 13; line-height:50px; display: block; opacity: 0.5; transition: all 0.25s; -webkit-transition:all 0.25s; }

a.prev_link:hover,
a.prev_link:focus,
a.prev_link:active,
a.next_link:hover,
a.next_link:focus,
a.next_link:active { opacity: 1; background-color:#007FFF; color:#FFFFFF; }

a.prev_link { left:50px; }
a.next_link { right:50px; }

.visual 				{ position: fixed; left:50%; top:50%; transform: translateX(-50%) translateY(-50%) scale(0,0); -webkit-transform: translateX(-50%) translateY(-50%) scale(0,0); transition:all 0.1s cubic-bezier(.23,.71,.08,.78);; -webkit-transition:all 0.1s cubic-bezier(.23,.71,.08,.78);; z-index: 11; width:40vw; height:40vw; max-width:600px; max-height:600px; min-width: 280px; min-height: 280px; }
section.active .visual 	{ transform: translateX(-50%) translateY(-50%) scale(1,1); -webkit-transform: translateX(-50%) translateY(-50%) scale(1,1); }

.illustration { max-width: 600px; width:100%; margin:100px auto; min-width:280px; display: block; }
.illustration2{ width:100%; max-width: 1400px; min-width:400px; margin:0 auto; display: block; }

.toc { width:900px; margin-left:-450px; position: relative; top:-350px; margin-bottom: -250px; box-sizing: border-box; left:50%; z-index: 14; background: #ffffff; overflow: hidden; box-shadow: 40px 40px 80px rgba(0,0,0,0.1) }
.toc { display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:space-between; align-items:stretch; }
.toc .toc_block { flex-grow: 1; padding:50px; }
.toc_two_thirds { width:66%; }
.toc_one_third { width:33%; background-color: #f2f2f2; align-items:center; }

.toc .llist { margin:0; }
.toc .llist li { padding:5px 0; margin:0; }
.toc .llist li .card_thumb 	{ width:30px; height: 30px; margin:0 15px 0 0; float: left }
.toc .llist li h4 { margin:0; line-height: 30px; font-size:14px }
.toc .llist li a { position: relative; line-height: 30px; display: block; padding:5px 0; }

.cell.idea-grid-item .cc { transition:all 0.5s cubic-bezier(.23,.71,.08,.78);; -webkit-transition:all 0.5s cubic-bezier(.23,.71,.08,.78);; }
.cell.idea-grid-item.selected .cc { transform:scale(1.02, 1.02); -webkit-transform:scale(1.02, 1.02); }
.cell.idea-grid-item.fade .cc { transform:scale(0.98, 0.98); -webkit-transform:scale(0.98, 0.98); }

.cell.idea-grid-item .cc div.card_thumb svg .idea-grid-bg,
.cell.idea-grid-item .cc div.card_thumb svg .idea-grid-icon { transition:all 0.2s cubic-bezier(.23,.71,.08,.78);; -webkit-transition:all 0.2s cubic-bezier(.23,.71,.08,.78);; }

.cell.idea-grid-item.selected .cc div.card_thumb svg .idea-grid-bg { fill:#007fff; fill-opacity:1; opacity:1; }
.cell.idea-grid-item.selected .cc div.card_thumb svg .idea-grid-icon { fill:#FFFFFF; }

.cell.idea-grid-item.selected .cc { background-color: #ffffff; border-color:transparent; box-shadow:20px 20px 40px rgba(0,0,0,0.1); z-index: 12 }
.cell.idea-grid-item .cc div.card_thumb { position: relative; overflow: hidden; transition:all 0.25s cubic-bezier(.23,.71,.08,.78);; -webkit-transition:all 0.25s cubic-bezier(.23,.71,.08,.78);; }
.cell.idea-grid-item.selected .cc div.card_thumb.veil:before { content:""; position: absolute; width:100px; height:100px; z-index: 12; background-color: #007fff; opacity:0.8; display: block; }

.cell.idea-grid-item.fade .cc div.card_thumb { transform: scale(0.6, 0.6); -webkit-transform:scale(0.6,0.6); }
.cell.idea-grid-item.selected .cc div.card_thumb { transform: scale(1.1, 1.1); -webkit-transform:scale(1.1,1.1); }

.idea-grid-label { position: absolute; top:20px; left:50%; text-align: center; white-space: nowrap; display: block; padding:5px 10px; text-transform: uppercase; font-weight: 700; letter-spacing: 0.3em; font-size: 10px; color:rgba(0,0,0,0.5); border-bottom:1px solid rgba(0,0,0,0.1); transform:translateX(-50%); z-index: 12; }

.idea-grid-lifestyle .idea-grid-label { border-bottom:2px solid #1a212b; }
.idea-grid-type .idea-grid-label { border-bottom:2px solid #ffcc00; }
.idea-grid-marketing .idea-grid-label { border-bottom:2px solid #007fff; }

.cell.idea-grid-item.idea-grid-lifestyle.selected .cc div.card_thumb.veil:before { background-color:rgba(26,33,43,0.8) }
.cell.idea-grid-item.idea-grid-type.selected .cc div.card_thumb.veil:before { background-color:rgba(255,204,0, 0.8) }


#method_grid { margin-top:0px; }
.grid.method_grid { margin:-50px 0; }
.grid.method_grid .cell { align-items:center; }

.grid.method_grid .cell .cc { padding:0 50px; }

.grid.method_grid .cc.method_blurb { max-width:400px; margin:0 auto; }

.arrow { display: block; width:1px; border-left:1px solid rgba(0,0,0,0.2); margin:0 auto; position: absolute; left:50%; top:150px; bottom:150px; }
.arrow:after { content:""; display: "block"; width:10px; height:10px; border:1px solid rgba(0,0,0,0.2); border-width:0 1px 1px 0; bottom:0; left:-6px; position: absolute; transform:rotate(45deg); -webkit-transform:rotate(45deg); }

.arrow h4 { position: absolute; top:-40px; width:300px; text-align: center; margin:-20px 0 0 -150px; }

.gridlines { position: absolute; top:0; left:0; width:100%; height:100%; display: flex; flex-direction: row; justify-content:flex-start; align-content:stretch; flex-wrap: nowrap; z-index: -1 }
.gridlines .gridline { box-sizing: border-box; border:1px solid rgba(0,0,0,0.05); border-width:0 0 0 1px; flex-grow:1 }
.gridlines .gridline:last-child { border-right-width:1px; }

.dark .gridlines .gridline { border-color:rgba(255,255,255,0.06); }

.cc h4.referral { margin:30px 0 0 0 }

.lesson_note_container { position: relative; max-height: 600px; overflow: hidden; }

.pinnav { position: fixed; left:0; right:0; bottom:0; height:50px; background:#ffffff; z-index:13 }


/*************************************

Section styling

*************************************/
/*#section_homepage { background-image: url("../img/svg/monogram-bg.svg"); }*/
#section_homepage { background-image: url("../img/svg/monogram-bg.svg"); background-size: 100% auto; background-position: center 200px; background-repeat: no-repeat }
#section_partners { background-image: url("../img/details/earth.jpg"); background-size: 100% auto; background-position: center center; background-repeat: no-repeat }


/* MVP Parallax elements */
.parallax_layers { position:relative; width:500px; height:700px; margin:50px auto 0; z-index: 20; transition:all 0.5s; -webkit-transition:all 0.5s; transform:scale(0.9, 0.9); -webkit-transform:scale(0.9,0.9); }
.parallax_layers .parallax_element { position: absolute; z-index: 21 }

#hero_element1 		{ width:300px; left:50%; margin-left:-250px; z-index: 23 }
#hero_element2 		{ width:250px; left:50%; margin-left:0px; margin-top:200px; z-index: 22 }

#detail_element1 	{ width:200px; left:50%; top:300px; margin-left:-500px; }
#detail_element2 	{ width:150px; left:50%; margin-left:200px; }
#detail_element3 	{ width:150px; left:50%; top:600px; margin-left:200px; }
#parallax_bg 		{ left:50%; top:50%; width:500px; height:500px; margin:-250px 0 0 -250px;}


@media all and (max-height:600px){
	/*section.headerA.intro 		{ position: relative }*/
	/*section.headerA.intro .vdash { display: none }*/
	
	.vh100, .vh90, .vh80, .vh70, .vh60, .vh50 		{ min-height:600px; }
	
	/*.t100, .t90, .t80,
	.t70, .t60, .t50 			{ margin-top:0 }*/
}


/*************************************

Mobile

*************************************/

@media all and (max-width:768px){

	.parallax_layers { transform:scale(0.5, 0.5); -webkit-transform:scale(0.5,0.5); height:550px; left:50%; margin:-50px 0 0 -250px; }

	.pt30v { padding-top:200px !important }
	.mt-100d { margin-top: 50px !important }

	section.boxed 	{ margin-left:0px; margin-right:0px; }

	article.layout h1,
	article.layout h2,
	article.layout h3,
	article.layout p 		{ margin-bottom:30px; }

	article.wide 	{ margin:0 30px; }

	h1.dropcap				{ font-size:60px; line-height: 60px }
	h1.article-headline,
	h1.headline				{ font-size:50px; line-height: 50px }
	h1 						{ font-size:30px; line-height: 45px }
	h2 						{ font-size:30px; line-height: 45px }
	h3 						{ font-size:20px; line-height: 30px }
	p 						{ font-size:16px; line-height: 30px }

	h1.headline.adaptive 	{ font-size:40px; margin-bottom:30px }
	h3.adaptive			 	{ font-size:20px; margin-bottom:30px !important }

	a.cta 					{ font-size:16px; }
	a.cta.alt,
	a.cta.alt2 				{ font-size:14px; }

	.large 					{ font-size:16px; }
	.medium 				{ font-size:14px; }
	.small 					{ font-size:12px; }


	section.boxed article,
	article 				{ padding:0 30px }
	article.layout p 		{ max-width: 100% }
	article.layout aside p 	{ max-width: 100%; padding:0; }
	article.offset-bottom	{ padding-bottom:400px }
	article.offset-top  	{ margin-top:-400px }

	aside {display: none}
	aside img,
	aside.before,
	aside.after 			{ margin: 0 0 30px 0; float: none; max-width: 100%; width:100%; }

	blockquote 							{ font-size:20px; line-height: 30px; }
	blockquote.style2,
	blockquote.style3,
	blockquote.style1 					{ margin:40px 0; padding:50px 0; text-align: center; float:none; max-width:100%; width:100%; border:1px solid rgba(0,0,0,0.1); border-width:1px 0 }

	blockquote.style1 {	line-height: 30px }
	
	blockquote.style2:before,
	blockquote.style3:before,
	blockquote.style3.small:before,
	blockquote.style1:before 			{ top:-70px; left:50%; right:auto; z-index: 20; margin:50px 0 0 -25px; opacity:1; }


	.grid_wrap 								{ overflow-y: auto; border:none; margin:0; padding:0 0 0 30px; margin-left:-30px; margin-right:-30px; }
	.grid_wrap:after 						{ position: absolute; bottom:-30px; right:20px; content:"Scroll →"; text-transform: uppercase; color:#000; }

	.grid_wrap .grid 						{ flex-wrap:nowrap; justify-content: flex-start }
	.grid_wrap .grid .cell 					{ min-width:300px; max-width:300px; flex-grow:1; border:none; }
	.grid_wrap .grid .cell .cc 				{ border:1px solid rgba(0,0,0,0.1); margin:0 10px 0 0; border-radius:3px; }

	.grid_wrap .grid.cards 					{ margin-left:0px; }
	.grid_wrap .grid.cards .cell .cc 		{ border:none; }

	.grid_wrap.post-actions 				{ background-color:transparent; padding-top:0; padding-bottom:50px }
	.grid_wrap.post-actions .cell .cc 		{ background-color: #007fff; border:none }
	.grid_wrap.post-actions .grid 			{ margin-left:30px; margin-right: 30px }

	.cell.wide,
	.grid.cards .cell,
	.grid .cell,
	.cell.boxed 							{ width:100%; }

	.grid_wrap.alt 	{ background-color: transparent }
	.grid_wrap.alt .cc { background: #F6F7F7 }

	.grid.cards .cell .cc { height:350px; }

	.grid.hero .dropcap.abs { top:10px; left:20px; }
	.grid.hero .cell .cc { padding:90px 20px; }
	.grid.hero .cell .cc:before,
	.grid.hero .cell .cc:after	{ left:20px; }

	#method_grid { margin-top:150px; }
	.grid.method_grid.reverse { flex-wrap:wrap-reverse; }
	.grid.method_grid { margin:0 0 150px 0; }
	.grid.method_grid .section_illustration { transform:scale(0.6, 0.6); -webkit-transform:scale(0.6, 0.6); left:50%; margin-left:-210px; margin-bottom:-50px; margin-top:0px; }

	.arrow { height:100px; top:-50px; }


	.grid.pricing_grid .cell,
	.grid.pricing_grid .cell.featured	{ padding:0 0 40px 0; margin:20px 0; border-bottom:1px solid rgba(0,0,0,0.1); }

	.grid.pricing_grid .cell:last-child { border-color:transparent; margin-bottom:0; padding-bottom:0; }
	.grid.pricing_grid .cell .cc 		{ padding: 20px 20px 90px 20px; margin:0; box-shadow:0px 0px 30px rgba(0,0,0,0.1); background-color: #ffffff; border-color:transparent; border-radius:5px; }
	.grid.pricing_grid .cell .cc h4		{ margin: 0 0 10px 0 }
	.grid.pricing_grid .cell .cc h2		{ margin: 0 0 30px 0 }
	.grid.pricing_grid .cell .cc ul 	{ font-size:14px }

	.grid.pricing_grid .cell .cc ul li 	{ padding:5px 0; margin:0 0 0 25px; line-height: 20px }
	.grid.pricing_grid .cell .cc p.absb { padding:0 20px 20px 20px; }


	.masonry 		{ -webkit-column-count:1; -moz-column-count:1; column-count:1; -webkit-column-gap:0; -moz-column-gap:0; column-gap:0; }

	header 			{ padding:20px 0; border-bottom:1px none rgba(0,0,0,0.1); margin:0 30px; }
	.dark_header header,
	header.dark 	{ border-color:rgba(255,255,255,0.1); }
	header .logo 	{ width:40px; height:40px; background-image:url("../img/svg/fv-monogram.svg"); }
	.dark_header header .logo 	{ background-image:url("../img/svg/fv-monogram-white.svg"); }
	nav a 			{ font-size:14px; margin:0 0 0 20px; }

	header nav a 	{ display: none; }
	header nav a.menu,
	header nav a.user,
	header nav a.cta 	{ display: block }
	nav a.cta 		{ padding:5px; }

	nav.center 		{ flex-direction: column }
	nav.center a 	{ width:200px; }

	.menu-title 	{ font-size:14px; display: none }
	.page-nav 		{ position: absolute; margin:10px 0 0 0; border-top:1px solid rgba(0,0,0,0.1); padding-top:20px; text-align: center; align-items: center; justify-content:center; display: block; width:100%; }
	.page-nav a 	{ margin:0 5px; }
	.dark .page-nav { border-color:rgba(255,255,255,0.1); }
	.vertical 		{ transform: rotate(0deg); }

	.menu_links .cc h3,
	.menu_links .cc p { text-align:center; }

	.cell h3 		{ margin-bottom:0px }

	.next_lesson { position: absolute; width:100px; height: 150px; margin:-75px 0 0 -50px; }

	span.next { transform: translateX(-50%) scale(0.6, 0.6); -webkit-transform:translateX(-50%) scale(0.6, 0.6); }

	a.prev_link,
	a.next_link 	{ background: transparent }
	a.prev_link 	{ left:0 }
	a.next_link 	{ right:0 }

	.card_thumb.hero.dialog_icon 	{ width:70px; height: 70px; margin:0 auto; border-radius:0; }

	#section_homepage { background-position:center 100px }

	.section-summary h1 { max-width:100%; margin:0 0 30px 0 }
	.section-summary p.blurb { max-width:100%; margin:0 auto}

	.vdash.scrolldown { height: 25px }

	.toc { width:100%; margin-left:0; left:0; flex-wrap: wrap }
	.toc .toc_two_thirds,
	.toc .toc_one_third { width:50%; }

	#resource_grid { box-shadow: none }

	.grid.course_toc .cell 				{ width:100%; }

	.gridlines .gridline:nth-child(1),
	.gridlines .gridline:nth-child(2){ display: none }
	.gridlines.triple .gridline:nth-child(1){ display: block }

}







/*************************************

Tablet

*************************************/

@media all and (min-width:769px) and (max-width:1024px){

	.mt-100d { margin-top: 50px !important }
	article.layout h1,
	article.layout h2,
	article.layout h3,
	article.layout p 	{ margin-bottom:30px; }

	article.wide 	{ margin:0 50px; }

	h1.dropcap			{ font-size:100px; line-height: 100px }

	h1.article-headline { font-size:70px; line-height: 80px }
	h1.headline			{ font-size:90px; line-height: 90px }
	h1.headline.adaptive{ font-size:40px; margin-bottom:30px }
	h3.adaptive			{ font-size:20px; margin-bottom:30px !important }
	h1 					{ font-size:40px; line-height: 45px }
	h2 					{ font-size:40px; line-height: 45px }
	h3 					{ font-size:25px; line-height: 30px }
	p 					{ font-size:16px; line-height: 30px }
	a.cta 				{ font-size:16px; }
	a.cta.alt,
	a.cta.alt2 			{ font-size:14px; }

	.large 				{ font-size:16px; }
	.medium 			{ font-size:14px; }
	.small 				{ font-size:12px; }

	article 				{ padding:0 100px; }
	article.layout p 		{ max-width:100%; margin-left:100px; margin-right:100px; }
	article.layout aside p 	{ max-width: 100%; padding:0; margin-left:0; margin-right:0; }
	.blurb,
	article.layout p.blurb 	{ margin:0 auto 30px auto; }

	.masonry { -webkit-column-count:2; -moz-column-count:2; column-count:2; -webkit-column-gap:20px }

	nav a 		{ font-size:14px; margin-left: 20px }
	header nav a { display: none }
	header nav a.menu,
	header nav a.user,
	header nav a.cta { display: block }

	.page-nav 		{ margin-left:30px; }

	.grid.cards .cell { width:50%; }
	.grid.menu .cell,
	.cell.boxed 		{ width:50%; }

	.grid.hero .dropcap.abs { left:30px; top:0; }
	.grid.hero .cell .cc { padding:100px 30px 100px 30px; }
	.grid.hero .cell .cc:before,
	.grid.hero .cell .cc:after	{ left:30px }

	.cell h3 		{ margin-bottom:10px }

	.toc { width:600px; margin-left:-300px; flex-wrap: wrap }
	.toc .toc_two_thirds,
	.toc .toc_one_third { width:50%; }

	.grid.method_grid .section_illustration { transform:scale(0.7, 0.7); -webkit-transform:scale(0.7, 0.7); margin-left:-50px; }

	.grid.method_grid.reverse .section_illustration { margin-left:0; }

	.grid.course_toc .cell 	{ width:50%; }
	.grid.pricing_grid .cell,
	.grid.pricing_grid .cell.featured	{ padding:0; }

}







/*************************************

Desktop

*************************************/

@media all and (min-width:1025px) and (max-width:1440px){

	.mt-100d { margin-top: 0 !important }

	article.layout h1 				{ margin-bottom:50px; }
	article.layout h2 				{ margin-bottom:50px; }
	article.layout h3,
	article.layout p 				{ margin-bottom:30px; }

	article.wide 		{ margin:0 50px; }

	h1.dropcap			{ font-size:100px; line-height: 100px }

	h1.article-headline { font-size:70px; line-height: 80px }
	h1.headline			{ font-size:90px; line-height: 90px; }
	h1 					{ font-size:60px; line-height: 60px }
	h2 					{ font-size:40px; line-height: 45px }
	h3 					{ font-size:25px; line-height: 30px }
	p 					{ font-size:16px; line-height: 30px }
	a.cta 				{ font-size:16px; }
	a.cta.alt,
	a.cta.alt2 			{ font-size:14px; }

	.large 				{ font-size:16px; }
	.medium 			{ font-size:14px; }
	.small 				{ font-size:12px; }

	.masonry 			{ -webkit-column-count:3; -moz-column-count:3; column-count:3 }

	article 			{ padding:0 150px; }
	nav a 				{ font-size:14px; margin-left: 20px }
	.page-nav 			{ margin-left:50px; }

	.grid.course_toc .cell 	{ width:25%; }
}




/*************************************

Desktop Medium

*************************************/

@media all and (min-width:1025px) and (max-width:1300px){
	/*.grid.menu .cell,*/
	.grid.cards .cell 	{ width:33.32%; }
}

@media all and (min-width:1301px){
	/*.grid.menu .cell,*/
	.grid.cards .cell 	{ width:25%; }
}



/*************************************

Desktop HD

*************************************/

@media all and (min-width:1441px){

	article 		{ padding:0 100px; }
	section.last 	{ padding:300px 0; }

	article.wide 	{ margin:0 50px; }

	header 			{ padding:50px 0; }
	header .logo 	{ width:200px; height: 30px }
	nav strong,
	nav a 			{ font-size:18px; }
	nav a 			{ margin-left:30px; }
	nav a.cta 		{ padding:10px; font-size:18px; }

	.grid.hero .cell .cc { padding:200px 50px; }
	.grid.hero .cell p { max-width: 450px }

	h1.headline.adaptive 			{ font-size:120px; margin-bottom:50px }
	h3.adaptive			 			{ font-size:40px; margin-bottom:50px }

}

@media all and (min-width:1700px){
	.summary 		{ max-width: 800px }
	article.wide 	{ margin:0 auto; }
}