/* Generated by Font Squirrel (http://www.fontsquirrel.com) on October 26, 2015 */
@font-face {
    font-family: 'bebasregular';
    src: url('../fonts/bebas___-webfont.eot');
    src: url('../fonts/bebas___-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/bebas___-webfont.woff2') format('woff2'),
         url('../fonts/bebas___-webfont.woff') format('woff'),
         url('../fonts/bebas___-webfont.ttf') format('truetype'),
         url('../fonts/bebas___-webfont.svg#bebasregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'merriweather-boldbold';
    src: url('../fonts/merriweather-bold-webfont.eot');
    src: url('../fonts/merriweather-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/merriweather-bold-webfont.woff2') format('woff2'),
         url('../fonts/merriweather-bold-webfont.woff') format('woff'),
         url('../fonts/merriweather-bold-webfont.ttf') format('truetype'),
         url('../fonts/merriweather-bold-webfont.svg#merriweather-boldbold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'merriweather-italicitalic';
    src: url('../fonts/merriweather-italic-webfont.eot');
    src: url('../fonts/merriweather-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/merriweather-italic-webfont.woff2') format('woff2'),
         url('../fonts/merriweather-italic-webfont.woff') format('woff'),
         url('../fonts/merriweather-italic-webfont.ttf') format('truetype'),
         url('../fonts/merriweather-italic-webfont.svg#merriweather-italicitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'merriweatherregular';
    src: url('../fonts/merriweather-regular-webfont.eot');
    src: url('../fonts/merriweather-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/merriweather-regular-webfont.woff2') format('woff2'),
         url('../fonts/merriweather-regular-webfont.woff') format('woff'),
         url('../fonts/merriweather-regular-webfont.ttf') format('truetype'),
         url('../fonts/merriweather-regular-webfont.svg#merriweatherregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

a {
    color: #00e;
}

a:visited {
    color: #551a8b;
}

a:hover {
    color: #06e;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/*GENERAL*/

body {
    background-color: #ffffff;
    background-image: url(../img/noise.png);
    color: #303030;
    font-family: 'merriweatherregular';
    font-size: 1.125em;
    line-height: 1.5em;
    padding: 0;
    text-rendering: optimizeLegibility;
    margin:0;
}

#content {
    max-width: 51.8125em;
    margin: 0 auto;
}

h1 {
    font-family: 'bebasregular';
    font-size: 2.9375em;
    line-height: 1.2em;
    text-align: center;
}

h2 {
    font-family: 'merriweather-italicitalic';
    line-height: 1.3em;
    margin-bottom: 1.4em;
    margin-top: 2.4em;
    text-align: center;
}

h3 {
    font-family: 'merriweather-italicitalic';
    line-height: 1.3em;
    margin-bottom: 1.4em;
    margin-top: 2.4em;
    text-align: left;
}

b {
    font-family: 'merriweather-boldbold';
}

img {
    max-width: 100%;
}

a {
    color: #F98617;
    text-decoration: none;
}

.btn {
    -webkit-appearance: none;
    background-color: #006C99;
    border-radius: 0.3em;
    border: none;
    color: white;
    display: block;
    font-family: 'bebasregular';
    font-size: 1.1em;
    padding: 0.5em;
    text-align: center;
    width: 100%;
}

.btn {
    cursor: hand !important;
}
#pricing-card-2 .btn {
    background-color: #F98617;
    box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}

blockquote {
    border-left: 3px solid #ddd;
    font-family: 'merriweather-italicitalic';
    margin: 0 0 2.3em 0;
    padding-left: 1em;
}

blockquote cite {
    color: #F98617;
    font-family: 'bebasregular';
    font-style: normal;
}

figure {
    margin: 0;
}

figcaption {
    font-family: 'merriweather-italicitalic';
    font-size: .7em;
}

input {
    box-sizing: border-box;
    max-width: 16em;
    width: 100%;
}
input[type=submit] {
    width: auto;
}

body > div {
    padding: 0 1em;
}

/*HEADER*/

#banner {
    background-color: #333333;
    color: white;
    font-family: 'merriweather-italicitalic';
    font-size: 1em;
    line-height: 1.5em;
    padding: 1em;
    text-align: center;
}

.producthunt #banner {
    background-color: #da552f;
}

@media screen and (min-width: 932px) {
    .producthunt #banner {
        padding: 0;
    }
}

.producthunt #banner img {
    display: block;
    margin: 0 auto;
    height: 126px;
    width: 134px;
}

@media screen and (min-width: 932px) {
    .producthunt #banner img {
        display: inline;
        height: 63px;
        width: 67px;
    }
}


#tagline {
    margin-top: 0;
}

/*PAIN*/

@media screen and (min-width: 932px) {
    #pain img {
        float: left;
    }
}

/*TOC*/

#toc {
    background-color: #fafafa;
    border-bottom: 1px solid #cccccc;
    border-top: 1px solid #cccccc;
    padding: 1em;
}

#toc h2 {
    margin-top: 1.75em;
}

@media screen and (min-width: 932px) {
    #toc ol {
        -moz-column-count: 2;
        -moz-column-gap: 90px;
        -webkit-column-count: 2;
        -webkit-column-gap: 90px;
        column-count: 2;
        column-gap: 90px;
    }
}

#toc li {
    color: #aaaaaa;
    font-size: .9em;
}

#toc li span {
    color: #303030;
}

/*TEAM*/

#team ul {
    list-style: none;
    padding: 0;
    text-align: center;
}

#team .author-name,
#team .author-title {
    overflow: hidden;
    white-space: nowrap;
}
#team .author-name {
    color: #F98617;
    font-family: bebasregular;
    font-size: 1.2em;
    margin-top: 1em;
    text-transform: uppercase;
}

#team .author-title {
    line-height: 1.15em;
}

#team .authors img {
    border-radius: 100%;
    box-shadow: 0 6px 2px rgba(0,0,0,.3);
    overflow: hidden;
}

#team li {
    display: block;
    margin: 2.1em 0.4em;
    text-align: center;
}

@media screen and (min-width: 320px) {
    #team li {
        display: inline-block;
        max-width: 43.8%;
    }
}

@media screen and (min-width: 640px) {
    #team li {
        max-width: 26.8%;
    }
}

@media screen and (min-width: 932px) {
    #team li {
        margin: 2.1em;
        max-width: 16%;
    }
}

/*PH REMINDER*/

.ph-reminder {
    text-align: center;
    font-weight: bold;
    font-size: 1.2em;
    line-height: 1.6em;
}

/*PRICING*/

#pricing {
    background-color: #fafafa;
    border-bottom: 1px solid #cccccc;
    border-top: 1px solid #cccccc;
    padding: 1em;
}

.pricing-name {
    font-family: bebasregular;
    margin: 0;
}

.pricing-description ul {
    padding-left: 1.2em;
}

.pricing-amount {
    background-color: #F98617;
    font-family: bebasregular;
    padding: 0 .2em;
    position: absolute;
    right: 0;
    top: 1em;
}

#pricing ol {
    list-style: none;
    padding: 0;
}

#pricing ol > li {
    background-color: white;
    border: 1px solid #ccc;
    border-radius: .5em;
    list-style: none;
    margin: 1em 0;
    padding: 1em;
    position: relative;
}

#pricing ol > li:nth-child(2) {
    box-shadow: 0 5px 13px rgba(0,0,0,0.2);
}


@media screen and (min-width: 900px) {

    #pricing ol {
        display: flex;
    }

    #pricing ol > li {
        margin: 0 .5em;
        width: 270px;
    }

}


/*FOOTER*/

#footer {
    background-color: #333;
    color: white;
    font-size: .7em;
    padding: 1em 1em 4em 1em;
    margin-bottom:64px;
}

#footer form {}
#footer dl {
  width: 20%;
  overflow: hidden;
  padding: 0;
  margin: 0
}
#footer dt {
  float: left;
  width: 25%;
  /* adjust the width; make sure the total of both is 100% */
  padding: 0;
  margin: 0
  font-family: 'merriweather-italicitalic';
}
#footer dd {
  float: left;
  width: 75%;
  /* adjust the width; make sure the total of both is 100% */
  padding: 0;
  margin: 0
}

#subscribebar {
    background-color: #282828;
    padding: 0px 1%;
    position: fixed;
    bottom: 0px;
    width: 100%;
}
#subscribebar > div {max-width: 750px; margin: auto;}
#subscribebar p {
    display: inline-block;
    width: 40%;
    color: #e6e6e6;
    font-size: .73em;
    line-height: 1.5em;
}

#subscribebar form {
    display: inline-block;
    width: 58%;
    vertical-align: top;
    margin-top: 20px;
}

#subscribebar form input[type="email"] {
    color: #34495e;
    font-size: .83em;
    border: none;
    border-radius: 4px;
    padding: 7px 5px 4px;
}

#subscribebar form input[type="submit"] {
    font-family: 'Bebas';
    color: #ffffff;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    font-size: .82em;
    border-radius: 5px;
    background: #e08534;
    border: none;
    font-weight: normal;
    padding: 4px 15px;
}

/* Sample Champter */

#sample form {
    margin-bottom:1em;
}
#sample form input[type="email"] {
    color: #34495e;
    font-size: .83em;
    border-radius: 4px;
    padding: 7px 5px 4px;
    width:100%;
    max-width:100%;
    margin-bottom:1em;
}

#sample form input[type="submit"] {
    font-family: 'Bebas';
    color: #ffffff;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    font-size: .82em;
    border-radius: 5px;
    background: #e08534;
    border: none;
    font-weight: normal;
    padding: 4px 15px;
    width:100%;
    max-width: 100%;
}

iframe[id^='twitter-widget-']{ 
	width:100% !important;
	max-width:100% !important;
}

#MyCode {
    text-transform: uppercase;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/* Prevent callout */

.nocallout {
    -webkit-touch-callout: none;
}

.pressed {
    background-color: rgba(0, 0, 0, 0.7);
}

/* A hack for HTML5 contenteditable attribute on mobile */

textarea[contenteditable] {
    -webkit-appearance: none;
}

/* A workaround for S60 3.x and 5.0 devices which do not animated gif images if
   they have been set as display: none */

.gifhidden {
    position: absolute;
    left: -100%;
}

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    background-repeat: no-repeat;
    border: 0;
    direction: ltr;
    display: block;
    overflow: hidden;
    text-align: left;
    text-indent: -999em;
}

.ir br {
    display: none;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/**
 * Clearfix helper
 * Used to contain floats: h5bp.com/q
 */

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 800px) {
    /* Style adjustments for viewports that meet the condition */
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 144dpi) {
    /* Style adjustments for viewports that meet the condition */
}