body {
     background: #fff;
     padding-top: 42px;
}
 .main-container-outer {
     background: #afca50 url('noise-tile.png');
     border-top: 1px #8ea833 solid;
}
 .main-container-outer .container {
     padding: 0;
}
 .title-header {
     float: left;
     text-align: left;
     padding-top: 5px;
     padding-bottom: 0;
}
 .title-start {
     float: right;
}
 #startnow {
     width: 288px;
     margin-left: auto;
     margin-right: auto;
     margin-bottom: 10px;
}
 .top h1, .navbar {
     font-family: 'Oswald', sans-serif;
}
 .top .lead, .top .and, #reliable h2 {
     font-family: 'Playfair Display', serif;
     color: #666;
}
 .top .and {
     font-family: 'Gilda Display', serif;
}
 .top .lead a {
     color: #690;
     font-style: italic;
     text-decoration: underline;
}
 .top h1 {
     padding-bottom: 10px;
}
 .top .lead {
     font-size: 1.4rem;
     line-height: 1.9rem;
}
 .top {
     position: relative;
}

/* Web.com Header */
 .navbar {
  padding: 0px !important;
  margin: 0px;
  flex-wrap: wrap;
  }

.webcom {
  margin: 0 auto;
  background: #f90;
  width: 100%;
  padding: 5px 0 8px;
  color:#FFF;
  text-decoration:none;
  cursor:pointer;
  padding:10px;
} 
  
.webcom a {
  color: #fff;
  cursor: pointer;
} 
  
.index .top,.showcase-index .top,.showcase-category .top,
body.benefits .top,body.hearts .top,body.pricing .top
{
  margin-top: 50px;
}

/* Navbar */
 .navbar {
     padding-top: 0;
     padding-bottom: 0;
}
 .navbar .container {
     padding: 0;
}
/* Navbar background */
 .bg-dark {
     background-color: #000 !important;
}
/* Toggle button */
 .navbar-toggler:focus, .navbar-toggler:active {
     outline: none;
     box-shadow: none;
}
 .navbar-toggler {
     border: 0;
     padding: 6px 0;
}
/* Lily pad */
 .navbar-brand {
     position: relative;
     display: inline-block;
     background-image: url(spritesheet-generic.png);
     background-position: 0px -121px;
     overflow: hidden;
     background-repeat: no-repeat;
     width: 34px;
     height: 23px;
     text-shadow: none;
     color: transparent;
     background-color: #d2de61;
     margin-top: -2px;
}
 .navbar-brand:hover {
     background-color: #fff;
}
 .navbar .left .nav-link {
     margin-right: 10px;
}
 .navbar-nav .login .nav-link {
     padding-left: 15px !important;
}
/* Text links */
 nav .left {
     text-transform: uppercase;
}
 .nav-link, .nav-link:visited {
     color: #ddd !important;
}
 .nav-link:hover {
     color: #fff !important;
}
 nav .dash {
     font-family: 'Roboto', sans-serif;
}
/* Heart icon */
 .nav-item .hearts {
     position: relative;
     display: inline-block;
     background-image: url(spritesheet-generic.png);
     background-position: -226px -44px;
     overflow: hidden;
     background-repeat: no-repeat;
     width: 19px;
     height: 19px;
     text-shadow: none;
     color: transparent;
     background-color: #ddd;
     top: 2px;
}
 .nav-item .hearts:hover {
     background-color: #fff;
}
/* Footer */
 footer {
     font-size: .75rem;
     padding-bottom: 20px;
}
 footer .left, footer .left a {
     color: #690;
}
 footer .left a:hover {
     color: #690;
     text-decoration: none;
}
 footer .right, footer .right a {
     color: #bbb;
}
 footer .right a:hover {
     color: #bbb;
     text-decoration: none;
}
/* Trial note */
 .trial-outer {
     border-top: 1px #ccc solid;
     border-bottom: 5px #f5f5f5 solid;
}
 .trial-outer .container {
     padding-top: 10px;
     padding-bottom: 10px;
}
 #trial p {
     color: #777777;
     font-size: .65rem;
     text-align: left;
     margin: 0;
}
 #trial a {
     color: #690;
     text-decoration: underline;
}
 #trial a:hover {
     color: #333;
     text-decoration: none;
     text-decoration: underline;
}
/* Reliable box */
 #reliable {
     padding-top: 20px;
     padding-bottom: 25px;
     text-align: center;
}
 #reliable h2 {
     font-style: italic;
     font-size: 1.25rem;
     line-height: 2rem;
}
 #reliable a {
     color: #690;
     font-size: .75rem 
}
 #reliable a:hover {
     text-decoration: none;
     color: #333;
}
 #reliable a:hover span.glyph {
     background-color: #333;
}
 #reliable .glyph {
     display: inline-block;
     overflow: hidden;
     background-repeat: no-repeat;
     background-image: url(spritesheet-generic.png);
     width: 17px;
     height: 17px;
     background-position: -226px -67px;
     background-color: #690;
     vertical-align: -20%;
}
/* Big Orange Button */
 #startnow #button a {
     display: block;
     width: 287px;
     background: #f90;
     border-top: 1px #cc7a00 solid;
     border-radius: 32px;
     text-decoration: none 
}
 #startnow #button a:after {
     display: block;
     visibility: hidden;
     height: 0;
     clear: both;
     content: ".";
}
 #startnow #button a div.left {
     float: left;
     border-right: 1px #fff dotted;
     padding: 8px 30px 12px 28px;
     font-weight: 700;
     font-family: 'Oswald', sans-serif;
     font-size:1.6rem;
     line-height:1.2em;
     color: #fff;
     text-transform: uppercase;
     text-shadow: #d98200 0 1px 0;
     text-align: center;
}
 #startnow #button a div.right {
     padding: .8rem 0 0;
     margin-left: 0;
     font-size: .75rem;
     line-height: 1em;
     color: #995c00;
     text-transform: uppercase;
     font-weight: 700;
     text-shadow: #ffcc80 0 1px 0;
     text-align: center;
}
 #startnow #button a:hover,
 #startnow #button a:active,
 #startnow #button a:focus {
     background: #333;
     border-color: #000;
}
 #startnow #button a:hover div.left,
 #startnow #button a:active div.left,
 #startnow #button a:focus div.left,
 #startnow #button a:hover div.right,
 #startnow #button a:active div.right,
 #startnow #button a:focus div.right {
     text-shadow: #000 0 1px 0;
     color: #fff;
}
 #startnow #button a {
     background-color: #ffc266;
     background-repeat: repeat-x;
     background-image: linear-gradient( #f90, #ffc266);
}
 #startnow #perks ul {
     list-style: none;
     margin-left: -50px;
     padding-bottom: 0;
     margin-bottom: 8px;
}
 #startnow #perks {
     font-family: 'Playfair Display', serif;
     font-size: .9rem;
     line-height: 1.5em;
     font-style: italic;
     color: #666;
     text-align: center;
     padding-bottom: 5px;
}
 #startnow #perks .splitter {
     display: none;
}
 .index #startnow #perks .splitter {
     display: block;
     margin: 5px 64px 6px;
     border-bottom: 1px #e5e5e5 solid;
}
 .index #startnow #perks {
     margin-bottom: 18px;
}
/* Hide Zoom button in lightbox */
 .fancybox-button--zoom {
     display: none !important;
}
/* Dropdown hover bar */
 .navbar .show a:hover {
     background: #303030 !important;
}
 .navbar .help {
     margin-bottom: 15px;
}
 .navbar .nav-link {
    padding-left: 5px !important;
}
 .fa-heart {
     font-size: 1.1rem;
}
/* WIDTHS */
/* Extra small devices (portrait phones, less than 576px) */
/* No media query since this is the default in Bootstrap */
/* YELLOW */
 .container {
     min-width: 90%;
     max-width: 90%;
}
 .navbar {
     padding-left: 5px;
     padding-right: 5px;
}
 .top {
     padding: 15px 10px 30px;
     padding: 0;
}
 .title-header {
     text-align: center;
     width: 100%;
}
 .top .lead {
     padding: 0 10px;
}
 .title-start {
     width: 100%;
     padding-bottom: 15px;
}
 #trial p {
     text-align: center;
}
 footer .container {
     padding: 0;
}
 footer .container .item,
 footer .container .dot {
     display: inline-block;
}
 footer .left, footer .right {
     float: none;
     clear: both;
     text-align: center;
     padding-top: 10px;
}
 .top h1 {
     font-size: 2.5rem;
}
/* Small devices (landscape phones, 576px and up) */
/* RED */
 @media (min-width:576px){
     .container {
         min-width: 488px;
         max-width: 488px;
    }
     .navbar .container {
         min-width: 90%;
         max-width: 90%;
    }
     .top h1 {
         font-size: 2.75rem;
    }
     .title-header, .title-start {
         width: 488px;
         float: left;
    }
     .top .lead {
         padding: 0;
    }
}
/* Medium devices (tablets, 768px and up) */
/* Green */
 @media (min-width:768px){
     .container, .navbar .container {
         min-width: 692px;
         max-width: 692px;
    }
     footer .left {
         float: left;
         clear: none;
    }
     footer .right {
         float: right;
         clear: none;
    }
     .top {
         padding: 15px 0 10px;
    }
     .title-header {
         text-align: left;
         width: 388px;
    }
     .title-start {
         width: 288px;
         float: right;
         padding-bottom: 0;
    }
     .index #startnow #perks {
         margin-top: 15px;
    }
    /* Pointer */
     .index .top:after {
         overflow: hidden;
         background-repeat: no-repeat;
         display: inline-block;
         background-image: url('spritesheet-generic.png');
         background-position: -225px -19px;
         width: 30px;
         height: 20px;
         position: absolute;
         bottom: -2px;
         content: "";
         left: 38px;
    }
     .index .crafts:after {
         left: 42px;
    }
     .index .food:after {
         left: 103px;
    }
     .index .style:after {
         left: 160px;
    }
    /* Dropdown hover bar */
     .navbar .show a:hover {
         background: transparent !important;
    }
     .navbar .help {
         margin-bottom: 0;
     }
      .navbar .nav-link {
         padding-left: 0 !important;
     }
}
/* Large devices (desktops, 992px and up) */
/* Blue */
 @media (min-width:992px){
     .container, .navbar .container {
         min-width: 896px;
         max-width: 896px;
    }
     .title-header {
         width: 488px;
    }
     #reliable {
         padding-left: 60px;
         padding-right: 60px;
    }
}
/* Extra large devices (large desktops, 1200px and up) */
 @media (min-width:1200px){
     .container, .navbar .container {
         min-width: 896px;
         max-width: 896px;
    }
}
/* Text Pages - tos, dpa, general-terms */
 .text-page .main-container-outer .container {
     background: #fff;
     padding: 30px 30px 10px;
     margin-top: 30px;
}
 .text-page .main-container-outer {
     padding-bottom: 60px;
}
 .text-page .main-container-outer .container a {
     color: #690;
     text-decoration: underline;
}
 .text-page h3 {
     font-size: 1.25rem;
}
 .text-page ol li {
     padding-bottom: 10px;
}

/* Marker */
.marker { width: 25px; height: 25px; background: yellow; }
@media (min-width:576px){.marker { background: red; }}
@media (min-width:768px){.marker { background: green; }}
@media (min-width:992px){.marker { background: blue; }}
@media (min-width:1200px){.marker { background: black; }}