charlenopires/ByNKPp.markdown

## ByNKPp.markdown

      
    Raw
  

              ByNKPp.markdown
            
          
    ByNKPp

A Pen by Charlie on CodePen.
License.

  
## index.html
<script src="//use.typekit.net/gms6xsf.js"></script>
<script>try{Typekit.load();}catch(e){}</script>

<body>

  <h1>Smart Money Smart Kids Web Style Guide</h1>

  <h2 class="new">Typefaces Spacing and Line Height</h2>

  <h1 class="special-h1">h1: Headline</h1>
  <h3>Font: Crimson Text  // Color: #404041  //  Font Size: 64px  //  Line Height: 68px</h3>
Used for headlines of new content areas that necessitate attention such as value propositions, header call outs or section titles - e.g. Deep Dives, Character Qualities
Mom’s Corner and Quick Tips.


  <h2>h2: Sub-headline</h2>
  <h3>Font: Open Sans 600  // Color: #677a82  //  Font Size: 24px  //  all caps   //  Line Height: 34px</h3>
Track with plenty of spacing between letters.  Use for lesson titles and subsequent descripters such as form titles - e.g. Login, Contact. Also used for buttons and CTAs.


  <h4><span: class="lesson">h3: Sub-headline Partner</span></h4>
  <h3>Font: Crimson Text Italic  // Color: #677a82  //  Font Size: 36px  //  Line Height: 36px</h3>
Track tightly.  Use in contingency with lesson titles (see examples) and as subsequent descripters in scenerios where differentiation is needed fromsub-headlines assigned the “h2” treatment.


<p class="special">Body Copy</p>
  <h3>Font: Open Sans 300  // Color: #404041  //  Font Size: 21px  //  Line Height: 36px</h3>
Used for all copy greater than two lines in length and anywhere the type does not fall under the previous descriptions.


<p class="special"><a href="/">Text Link</a></p>
    <h3>Font: Open Sans 300  // Color: #009bb9  //  Font Size: 21px  //  underline  //  Line Height: 36px</h3>
Used for links that isn’t in a button and links found within the body copy.

  <h2 class="new">example:</h2>

<h1>Smart Money Headline With a Smart Title</h1>

<h2>Sub-headline for important things</h2>

<p>
Id iaculis a vestibulum metus metus ultrices a id per justo ad adipiscing est a suspendisse. Quisque habitasse nisl orci a mi platea consectetur a bibendum nam sapien aenean feugiat a adipiscing a cum elementum senectus nec nulla a parturient turpis sagittis ullamcorper. A maecenas purus suspendisse fermentum mus iaculis mattis a vestibulum ad scelerisque ut euismod lorem ultrices etiam ultrices suspendisse suspendisse mi blandit ullamcorper non eget condimentum taciti lacinia. Adipiscing odio penatibus parturient a laoreet adipiscing aliquam parturient a neque in a adipiscing ut. Mattis a mattis fermentum justo libero condimentum condimentum commodo suscipit a vestibulum cum a vulputate vel ac adipiscing hendrerit nulla nec etiam condimentum a. Condimentum varius curae cras vestibulum nisl iaculis a litora nisi mi consectetur laoreet posuere ornare.
</p>


<h2 class="new">List Styles</h2>

<p>Italicize titles of books, newspapers, periodicals, movies, and TV shows:
<ol>
  <li>If a magazine title must be followed by “magazine” to distinguish it from other publications, do not italicize “magazine” unless it is formally included in the title (<i>New York</i> magazine vs. <i>The New York Times Magazine</i>).</li>
  <li>For magazine titles, italicize the article if it is a formal part of the title (<i>The Nation</i>).</li>
  <li>For newspapers, do not italicize the article (the <i>New York Times</i>).</li>
  <li>Titles of short works (poems, songs, TV episodes, book chapters) take quotation marks.</li>
</ol>

<h2 class="new">Blockquote Styles</h2>

<p>
Blockquotes are styled differently so as to add variatey and memorable content for quick-scanning viewers - whether they be quotes, scripture or overarching big-ideas.

<blockquote>“Wealth is not wisdom’s goal, but is often wisdom’s reward.”</blockquote>

Some may even want to use this feature to call out main points within the article itself. This function should be used minimally.  Preferably once and no more than twice per article.
</p>

<h2 class="new">Lesson Styles</h2>
<h1>The Format in Which Our 6 Lessons are Displayed</h1>
<ul>
  <li>LESSON: <span: class="lesson">Work & Responsibility</span></li>
  <li>LESSON: <span: class="lesson">Save & Patience</span></li>
  <li>LESSON: <span: class="lesson">Spend & Wisdom</span></li>
  <li>LESSON: <span: class="lesson">Give</span></li>
  <li>LESSON: <span: class="lesson">Debt & College</span></li>
  <li>LESSON: <span: class="lesson">Contentment</span></li>

</ul>

<h2 class="new">Button Styles</h2>
<h1>Smart Calls to Action and Their Many Colors</h1>
<h2>Red</h2>
<p>Increases the heart rate and creates urgency often seen in clearance sales. This is the main CTA button color and should be use to direct the suer towards the main idea or transaction on the site.</p>
<button class="button_outline_red">Buy Now</button>
<button class="button_red">Buy Now</button>

<h2>Green</h2>
<p>Associated with wealth and is the easiest color the eyes to process. These buttons should be used secondary to tthe main CTA and focuses namely on financial transactions.</p>
<button class="button_outline_green">Buy Now</button>
<button class="button_green">Buy Now</button>

<h2>Blue</h2>
<p>Creates the sensation of trust and security often seen with banks and businesses. These buttons should be used only in certain circumstances when the transaction is tertiary and focuses namely on trusted content.</p>
<button class="button_outline_blue">Buy Now</button>
<button class="button_blue">Buy Now</button>

<h2 class="new">Form Styles</h2>

<h1>The Way a Form Should Look on a Tablet and Desktop Device</h1>
  <h2>Contact</h2>
  <div class="form">

    <div class="col-sm">
      <div class="col-sm-1">
        <h3>First</h3>
        <div class="form_first"><input class="sm" type="text"></div>
      </div>
      <div class="col-sm-2">
         <h3>Last</h3>
        <div class="form_last"><input class="sm" type="text"></div>
      </div>
    </div>

    <h3>Email</h3>
    <div class="form_email"><input type="text"></div>
    <h3>Message</h3>
    <div class="form_message"><textarea name="comment"></textarea></div>
    <button class="form_button_blue">Send</button>
  </div>

<br></br>

<h1>The Way a Form Should Look on a Mobile Device</h1>
  <h2>Contact</h2>
  <div class="form_mobile">
    <h3>First</h3>
    <div class="form_email"><input type="text"></div>
    <h3>Last</h3>
    <div class="form_email"><input type="text"></div>
    <h3>Email</h3>
    <div class="form_email"><input type="text"></div>
    <h3>Message</h3>
    <div class="form_message"><textarea name="comment"></textarea></div>
    <button class="form_button_mobile">Send</button>
  </div>

</body>

<div class="footer"></div>

## style.css
body {
  background-color: white;
  width: 700px;
  margin: 0 0 0 50px;
  font-family: "freight-text-pro",Georgia,Cambria,"Times New Roman",Times,serif;
  letter-spacing: 0.01rem;
  font-weight: 400;
  font-style: normal;
  font-size: 22px;
  line-height: 1.5;
  color: #404041;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-family: "league-gothic",sans-serif;
  letter-spacing: -0.02em;
  font-weight: 400;
  font-style: normal;
  font-size: 60px;
  margin-left: -3px;
  line-height: 1;
  text-transform: uppercase;
  color: #404041;
  margin-bottom: 8px;
  text-rendering: optimizeLegibility;
}


h2 {
  font-family: "proxima-nova",sans-serif;
  letter-spacing: -0.02em;
  font-weight: 600;
  font-style: normal;
  font-size: 32px;
  margin-left: -1.6px;
  line-height: 1.2;
  color: rgba(0,0,0,0.44);
  margin-top: 40px;
  margin-bottom: 2px;
  text-rendering: optimizeLegibility;
}


h3 {
  margin: .015em 0 1em 0;
  font-size: 18px;
  font-family: "freight-text-pro",Georgia,Cambria,"Times New Roman",Times,serif;
  font-weight: 300;
  font-style: italic;
  letter-spacing: -.02em;
  color: #677a82;
  text-rendering: optimizeLegibility;
}

h4 {
  margin: 3em 0 0 0;
  font-size: 24px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  letter-spacing: .15em;
  color: #677a82;
  text-rendering: optimizeLegibility;
}

a{
  color: #009bb9;
  text-decoration: underline;
}

blockquote {
  margin: 1.414em;
  font-family: "freight-text-pro",Georgia,Cambria,"Times New Roman",Times,serif;
  font-weight: 400;
  font-size: 1.6em;
  line-height: 1;
  font-style: italic;
  letter-spacing: -.02em;
  color: #555;
}

ul {
  padding: 0px 30px;
  margin: 2.5em 0 0 0;
  list-style-type: none;
  font-size: 24px;
  font-family: "proxima-nova",sans-serif;
  font-weight: 600;
  line-height: 2.25em;
  letter-spacing: .15em;
  color: #677a82;
  text-rendering: optimizeLegibility;
}

ol {padding: 0 30px;}

.special-h1 {
  margin: 1em 0 0 0 ;
}

.new {
  margin: 4em 0 0 0;
  border-top: solid;
  border-color: #efefef;
  border-width: 2px;
  padding-bottom: 20px;
  padding-top: 10px;
}

.special {margin: 3em 0 0 0}

.lesson {
  font-size: 24px;
 font-family: "proxima-nova",sans-serif;
  font-weight: 300;
  letter-spacing: -.02em;
  color: #677a82;
  text-rendering: optimizeLegibility;
}

.button_outline_blue {
  border: 3px solid;
  background: none;
  padding: 10px 50px;
  width: 250px;
  border-radius: 30px;
  border-color: #009bb9;
  font-size: 24px;
  font-family: "proxima-nova",sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: #009bb9;
  text-rendering: optimizeLegibility;
  cursor: pointer;
}

.button_outline_blue:hover {
  background: #14738f;
  border-color: #14738f;
  color: #fff;
  transition: all 0.5s;
}

.button_outline_green {
  border: 3px solid;
  background: none;
  padding: 10px 50px;
  width: 250px;
  border-radius: 30px;
  border-color: #01b69b;
  font-size: 24px;
  font-family: "proxima-nova",sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: #01b69b;
  text-rendering: optimizeLegibility;
  cursor: pointer;
}

.button_outline_green:hover {
  background: #16a085;
  border-color: #16a085;
  color: #fff;
  transition: all 0.5s;
}

.button_outline_red {
  border: 3px solid;
  background: none;
  padding: 10px 50px;
  width: 250px;
  border-radius: 30px;
  border-color: #ee6b4f;
  font-size: 24px;
  font-family: "proxima-nova",sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: #ee6b4f;
  text-rendering: optimizeLegibility;
  cursor: pointer;
}

.button_outline_red:hover {
  background: #ef5352;
  border-color: #ef5352;
  color: #fff;
  transition: all 0.5s;
}

.button_blue {
  margin: 20px 0 20px 25px;
  border: 3px solid;
  background: #009bb9;
  padding: 10px 50px;
  width: 250px;
  border-radius: 30px;
  border-color: #009bb9;
  font-size: 24px;
  font-family: "proxima-nova",sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: #fff;
  text-rendering: optimizeLegibility;
  cursor: pointer;
}

.button_blue:hover {
  background: #14738f;
  border-color: #14738f;
  border-radius: 30px;
  transition: all 0.5s;
}

.button_green {
  margin: 20px 0 20px 25px;
  border: 3px solid;
  background: #01b69b;
  padding: 10px 50px;
  width: 250px;
  border-radius: 30px;
  border-color: #01b69b;
  font-size: 24px;
  font-family: "proxima-nova",sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: #fff;
  text-rendering: optimizeLegibility;
  cursor: pointer;
}

.button_green:hover {
  background: #16a085;
  border-color: #16a085;
  transition: all 0.5s;
}

.button_red {
  margin: 20px 0 20px 25px;
  border: 3px solid;
  background: #ee6b4f;
  padding: 10px 50px;
  width: 250px;
  border-radius: 30px;
  border-color: #ee6b4f;
  font-size: 24px;
  font-family: "proxima-nova",sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: #fff;
  text-rendering: optimizeLegibility;
  cursor: pointer;
}

.button_red:hover {
  background: #ef5352;
  border-color: #ef5352;
  transition: all 0.5s;
}

.footer {
  height: 300px;
}

.form {
	display: block;
	margin-top: 35px;
  width: 500px;
  height: 580px;
  background-color: #e5e5e4;
	padding: 30px 50px 0 50px;
}

.col-sm {
  width:97%;
  margin-bottom: 95px;
}

.col-sm-1 {
	float:left;
}

.col-sm-2 {
	float:right;
}

.sm {
  width: 220px;
  height: 50px;
  border: none;
  background-color: #fff;
}

input {
  width: 95%;
  padding-left: 10px;
  height: 50px;
  border: none;
  font-family: Open Sans;
  Font-size: 18px;
  color: #404041;
}

textarea {
	width: 95%;
  padding-left: 10px;
  padding-top: 10px;
  height: 200px;
  border: none;
  font-family: Open Sans;
  Font-size: 18px;
  color: #404041;
}

input:hover {
  opacity: .8;
}

input:focus {
    background-color: #14738f;
  	color: #fff;
}

textarea:focus, input:focus{
    outline: none;
}

.form_first {
  margin-top: -20px;
}

.form_last {
  margin-top: -20px;
}

.form_email {
  margin-top: -20px;
  margin-bottom: 10px;
}

.form_message {
  margin-top: -20px;
}

.form_button_blue {
	float:right;
  margin: 30px 10px 30px 0;
  border: 3px solid;
  background: none;
  padding: 10px 45px;
  border-radius: 30px;
  border-color: #009bb9;
  font-size: 24px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: #009bb9;
  text-rendering: optimizeLegibility;
  cursor: pointer;
}

.form_button_blue:hover {
  background: #14738f;
  border-color: #14738f;
  color: #fff;
  transition: all 0.5s;
}

.form_mobile {
	display: block;
	margin-top: 35px;
  width: 320px;
  height: 700px;
  background-color: #e5e5e4;
	padding: 30px 50px 0 50px;
}

.form_button_mobile {
	width:100%;
  margin: 30px 0 30px 0;
  border: 3px solid;
  background: none;
  padding: 10px 45px;
  border-radius: 30px;
  border-color: #009bb9;
  font-size: 24px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: #009bb9;
  text-rendering: optimizeLegibility;
  cursor: pointer;
}

.form_button_mobile:hover {
  background: #14738f;
  border-color: #14738f;
  color: #fff;
  transition: all 0.5s;
}
	<script src="//use.typekit.net/gms6xsf.js"></script>
	<script>try{Typekit.load();}catch(e){}</script>

	<body>

	<h1>Smart Money Smart Kids Web Style Guide</h1>

	<h2 class="new">Typefaces Spacing and Line Height</h2>

	<h1 class="special-h1">h1: Headline</h1>
	<h3>Font: Crimson Text // Color: #404041 // Font Size: 64px // Line Height: 68px</h3>
	Used for headlines of new content areas that necessitate attention such as value propositions, header call outs or section titles - e.g. Deep Dives, Character Qualities
	Mom’s Corner and Quick Tips.


	<h2>h2: Sub-headline</h2>
	<h3>Font: Open Sans 600 // Color: #677a82 // Font Size: 24px // all caps // Line Height: 34px</h3>
	Track with plenty of spacing between letters. Use for lesson titles and subsequent descripters such as form titles - e.g. Login, Contact. Also used for buttons and CTAs.


	<h4><span: class="lesson">h3: Sub-headline Partner</span></h4>
	<h3>Font: Crimson Text Italic // Color: #677a82 // Font Size: 36px // Line Height: 36px</h3>
	Track tightly. Use in contingency with lesson titles (see examples) and as subsequent descripters in scenerios where differentiation is needed fromsub-headlines assigned the “h2” treatment.


	<p class="special">Body Copy</p>
	<h3>Font: Open Sans 300 // Color: #404041 // Font Size: 21px // Line Height: 36px</h3>
	Used for all copy greater than two lines in length and anywhere the type does not fall under the previous descriptions.


	<p class="special"><a href="/">Text Link</a></p>
	<h3>Font: Open Sans 300 // Color: #009bb9 // Font Size: 21px // underline // Line Height: 36px</h3>
	Used for links that isn’t in a button and links found within the body copy.

	<h2 class="new">example:</h2>

	<h1>Smart Money Headline With a Smart Title</h1>

	<h2>Sub-headline for important things</h2>

	<p>
	Id iaculis a vestibulum metus metus ultrices a id per justo ad adipiscing est a suspendisse. Quisque habitasse nisl orci a mi platea consectetur a bibendum nam sapien aenean feugiat a adipiscing a cum elementum senectus nec nulla a parturient turpis sagittis ullamcorper. A maecenas purus suspendisse fermentum mus iaculis mattis a vestibulum ad scelerisque ut euismod lorem ultrices etiam ultrices suspendisse suspendisse mi blandit ullamcorper non eget condimentum taciti lacinia. Adipiscing odio penatibus parturient a laoreet adipiscing aliquam parturient a neque in a adipiscing ut. Mattis a mattis fermentum justo libero condimentum condimentum commodo suscipit a vestibulum cum a vulputate vel ac adipiscing hendrerit nulla nec etiam condimentum a. Condimentum varius curae cras vestibulum nisl iaculis a litora nisi mi consectetur laoreet posuere ornare.
	</p>


	<h2 class="new">List Styles</h2>

	<p>Italicize titles of books, newspapers, periodicals, movies, and TV shows:
	<ol>
	<li>If a magazine title must be followed by “magazine” to distinguish it from other publications, do not italicize “magazine” unless it is formally included in the title (<i>New York</i> magazine vs. <i>The New York Times Magazine</i>).</li>
	<li>For magazine titles, italicize the article if it is a formal part of the title (<i>The Nation</i>).</li>
	<li>For newspapers, do not italicize the article (the <i>New York Times</i>).</li>
	<li>Titles of short works (poems, songs, TV episodes, book chapters) take quotation marks.</li>
	</ol>

	<h2 class="new">Blockquote Styles</h2>

	<p>
	Blockquotes are styled differently so as to add variatey and memorable content for quick-scanning viewers - whether they be quotes, scripture or overarching big-ideas.

	<blockquote>“Wealth is not wisdom’s goal, but is often wisdom’s reward.”</blockquote>

	Some may even want to use this feature to call out main points within the article itself. This function should be used minimally. Preferably once and no more than twice per article.
	</p>

	<h2 class="new">Lesson Styles</h2>
	<h1>The Format in Which Our 6 Lessons are Displayed</h1>
	<ul>
	<li>LESSON: <span: class="lesson">Work & Responsibility</span></li>
	<li>LESSON: <span: class="lesson">Save & Patience</span></li>
	<li>LESSON: <span: class="lesson">Spend & Wisdom</span></li>
	<li>LESSON: <span: class="lesson">Give</span></li>
	<li>LESSON: <span: class="lesson">Debt & College</span></li>
	<li>LESSON: <span: class="lesson">Contentment</span></li>

	</ul>

	<h2 class="new">Button Styles</h2>
	<h1>Smart Calls to Action and Their Many Colors</h1>
	<h2>Red</h2>
	<p>Increases the heart rate and creates urgency often seen in clearance sales. This is the main CTA button color and should be use to direct the suer towards the main idea or transaction on the site.</p>
	<button class="button_outline_red">Buy Now</button>
	<button class="button_red">Buy Now</button>

	<h2>Green</h2>
	<p>Associated with wealth and is the easiest color the eyes to process. These buttons should be used secondary to tthe main CTA and focuses namely on financial transactions.</p>
	<button class="button_outline_green">Buy Now</button>
	<button class="button_green">Buy Now</button>

	<h2>Blue</h2>
	<p>Creates the sensation of trust and security often seen with banks and businesses. These buttons should be used only in certain circumstances when the transaction is tertiary and focuses namely on trusted content.</p>
	<button class="button_outline_blue">Buy Now</button>
	<button class="button_blue">Buy Now</button>

	<h2 class="new">Form Styles</h2>

	<h1>The Way a Form Should Look on a Tablet and Desktop Device</h1>
	<h2>Contact</h2>
	<div class="form">

	<div class="col-sm">
	<div class="col-sm-1">
	<h3>First</h3>
	<div class="form_first"><input class="sm" type="text"></div>
	</div>
	<div class="col-sm-2">
	<h3>Last</h3>
	<div class="form_last"><input class="sm" type="text"></div>
	</div>
	</div>

	<h3>Email</h3>
	<div class="form_email"><input type="text"></div>
	<h3>Message</h3>
	<div class="form_message"><textarea name="comment"></textarea></div>
	<button class="form_button_blue">Send</button>
	</div>

	<br></br>

	<h1>The Way a Form Should Look on a Mobile Device</h1>
	<h2>Contact</h2>
	<div class="form_mobile">
	<h3>First</h3>
	<div class="form_email"><input type="text"></div>
	<h3>Last</h3>
	<div class="form_email"><input type="text"></div>
	<h3>Email</h3>
	<div class="form_email"><input type="text"></div>
	<h3>Message</h3>
	<div class="form_message"><textarea name="comment"></textarea></div>
	<button class="form_button_mobile">Send</button>
	</div>

	</body>

	<div class="footer"></div>
	body {
	background-color: white;
	width: 700px;
	margin: 0 0 0 50px;
	font-family: "freight-text-pro",Georgia,Cambria,"Times New Roman",Times,serif;
	letter-spacing: 0.01rem;
	font-weight: 400;
	font-style: normal;
	font-size: 22px;
	line-height: 1.5;
	color: #404041;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	}

	h1 {
	font-family: "league-gothic",sans-serif;
	letter-spacing: -0.02em;
	font-weight: 400;
	font-style: normal;
	font-size: 60px;
	margin-left: -3px;
	line-height: 1;
	text-transform: uppercase;
	color: #404041;
	margin-bottom: 8px;
	text-rendering: optimizeLegibility;
	}


	h2 {
	font-family: "proxima-nova",sans-serif;
	letter-spacing: -0.02em;
	font-weight: 600;
	font-style: normal;
	font-size: 32px;
	margin-left: -1.6px;
	line-height: 1.2;
	color: rgba(0,0,0,0.44);
	margin-top: 40px;
	margin-bottom: 2px;
	text-rendering: optimizeLegibility;
	}


	h3 {
	margin: .015em 0 1em 0;
	font-size: 18px;
	font-family: "freight-text-pro",Georgia,Cambria,"Times New Roman",Times,serif;
	font-weight: 300;
	font-style: italic;
	letter-spacing: -.02em;
	color: #677a82;
	text-rendering: optimizeLegibility;
	}

	h4 {
	margin: 3em 0 0 0;
	font-size: 24px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	letter-spacing: .15em;
	color: #677a82;
	text-rendering: optimizeLegibility;
	}

	a{
	color: #009bb9;
	text-decoration: underline;
	}

	blockquote {
	margin: 1.414em;
	font-family: "freight-text-pro",Georgia,Cambria,"Times New Roman",Times,serif;
	font-weight: 400;
	font-size: 1.6em;
	line-height: 1;
	font-style: italic;
	letter-spacing: -.02em;
	color: #555;
	}

	ul {
	padding: 0px 30px;
	margin: 2.5em 0 0 0;
	list-style-type: none;
	font-size: 24px;
	font-family: "proxima-nova",sans-serif;
	font-weight: 600;
	line-height: 2.25em;
	letter-spacing: .15em;
	color: #677a82;
	text-rendering: optimizeLegibility;
	}

	ol {padding: 0 30px;}

	.special-h1 {
	margin: 1em 0 0 0 ;
	}

	.new {
	margin: 4em 0 0 0;
	border-top: solid;
	border-color: #efefef;
	border-width: 2px;
	padding-bottom: 20px;
	padding-top: 10px;
	}

	.special {margin: 3em 0 0 0}

	.lesson {
	font-size: 24px;
	font-family: "proxima-nova",sans-serif;
	font-weight: 300;
	letter-spacing: -.02em;
	color: #677a82;
	text-rendering: optimizeLegibility;
	}

	.button_outline_blue {
	border: 3px solid;
	background: none;
	padding: 10px 50px;
	width: 250px;
	border-radius: 30px;
	border-color: #009bb9;
	font-size: 24px;
	font-family: "proxima-nova",sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .15em;
	color: #009bb9;
	text-rendering: optimizeLegibility;
	cursor: pointer;
	}

	.button_outline_blue:hover {
	background: #14738f;
	border-color: #14738f;
	color: #fff;
	transition: all 0.5s;
	}

	.button_outline_green {
	border: 3px solid;
	background: none;
	padding: 10px 50px;
	width: 250px;
	border-radius: 30px;
	border-color: #01b69b;
	font-size: 24px;
	font-family: "proxima-nova",sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .15em;
	color: #01b69b;
	text-rendering: optimizeLegibility;
	cursor: pointer;
	}

	.button_outline_green:hover {
	background: #16a085;
	border-color: #16a085;
	color: #fff;
	transition: all 0.5s;
	}

	.button_outline_red {
	border: 3px solid;
	background: none;
	padding: 10px 50px;
	width: 250px;
	border-radius: 30px;
	border-color: #ee6b4f;
	font-size: 24px;
	font-family: "proxima-nova",sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .15em;
	color: #ee6b4f;
	text-rendering: optimizeLegibility;
	cursor: pointer;
	}

	.button_outline_red:hover {
	background: #ef5352;
	border-color: #ef5352;
	color: #fff;
	transition: all 0.5s;
	}

	.button_blue {
	margin: 20px 0 20px 25px;
	border: 3px solid;
	background: #009bb9;
	padding: 10px 50px;
	width: 250px;
	border-radius: 30px;
	border-color: #009bb9;
	font-size: 24px;
	font-family: "proxima-nova",sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .15em;
	color: #fff;
	text-rendering: optimizeLegibility;
	cursor: pointer;
	}

	.button_blue:hover {
	background: #14738f;
	border-color: #14738f;
	border-radius: 30px;
	transition: all 0.5s;
	}

	.button_green {
	margin: 20px 0 20px 25px;
	border: 3px solid;
	background: #01b69b;
	padding: 10px 50px;
	width: 250px;
	border-radius: 30px;
	border-color: #01b69b;
	font-size: 24px;
	font-family: "proxima-nova",sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .15em;
	color: #fff;
	text-rendering: optimizeLegibility;
	cursor: pointer;
	}

	.button_green:hover {
	background: #16a085;
	border-color: #16a085;
	transition: all 0.5s;
	}

	.button_red {
	margin: 20px 0 20px 25px;
	border: 3px solid;
	background: #ee6b4f;
	padding: 10px 50px;
	width: 250px;
	border-radius: 30px;
	border-color: #ee6b4f;
	font-size: 24px;
	font-family: "proxima-nova",sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .15em;
	color: #fff;
	text-rendering: optimizeLegibility;
	cursor: pointer;
	}

	.button_red:hover {
	background: #ef5352;
	border-color: #ef5352;
	transition: all 0.5s;
	}

	.footer {
	height: 300px;
	}

	.form {
	display: block;
	margin-top: 35px;
	width: 500px;
	height: 580px;
	background-color: #e5e5e4;
	padding: 30px 50px 0 50px;
	}

	.col-sm {
	width:97%;
	margin-bottom: 95px;
	}

	.col-sm-1 {
	float:left;
	}

	.col-sm-2 {
	float:right;
	}

	.sm {
	width: 220px;
	height: 50px;
	border: none;
	background-color: #fff;
	}

	input {
	width: 95%;
	padding-left: 10px;
	height: 50px;
	border: none;
	font-family: Open Sans;
	Font-size: 18px;
	color: #404041;
	}

	textarea {
	width: 95%;
	padding-left: 10px;
	padding-top: 10px;
	height: 200px;
	border: none;
	font-family: Open Sans;
	Font-size: 18px;
	color: #404041;
	}

	input:hover {
	opacity: .8;
	}

	input:focus {
	background-color: #14738f;
	color: #fff;
	}

	textarea:focus, input:focus{
	outline: none;
	}

	.form_first {
	margin-top: -20px;
	}

	.form_last {
	margin-top: -20px;
	}

	.form_email {
	margin-top: -20px;
	margin-bottom: 10px;
	}

	.form_message {
	margin-top: -20px;
	}

	.form_button_blue {
	float:right;
	margin: 30px 10px 30px 0;
	border: 3px solid;
	background: none;
	padding: 10px 45px;
	border-radius: 30px;
	border-color: #009bb9;
	font-size: 24px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .15em;
	color: #009bb9;
	text-rendering: optimizeLegibility;
	cursor: pointer;
	}

	.form_button_blue:hover {
	background: #14738f;
	border-color: #14738f;
	color: #fff;
	transition: all 0.5s;
	}

	.form_mobile {
	display: block;
	margin-top: 35px;
	width: 320px;
	height: 700px;
	background-color: #e5e5e4;
	padding: 30px 50px 0 50px;
	}

	.form_button_mobile {
	width:100%;
	margin: 30px 0 30px 0;
	border: 3px solid;
	background: none;
	padding: 10px 45px;
	border-radius: 30px;
	border-color: #009bb9;
	font-size: 24px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .15em;
	color: #009bb9;
	text-rendering: optimizeLegibility;
	cursor: pointer;
	}

	.form_button_mobile:hover {
	background: #14738f;
	border-color: #14738f;
	color: #fff;
	transition: all 0.5s;
	}