/**
 * RESET
 * Reference: http://meyerweb.com/eric/tools/css/reset/
 */

 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 b, u, i, center,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
 article, aside, canvas, details, embed,
 figure, figcaption, footer, header, hgroup,
 main, menu, nav, output, ruby, section, summary,
 time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
 }
 
 article, aside, details, figcaption, figure,
 footer, header, hgroup, main, menu, nav, section {
   display: block;
 }
 
 body {
   line-height: 1.618;
   font-family: Arial, Helvetica, sans-serif;
 }
 
 ol, ul {
   list-style: none;
 }
 
 blockquote, q {
   quotes: none;
 }
 
 blockquote:before, blockquote:after,
 q:before, q:after {
   content: '';
   content: none;
 }
 
 table {
   border-collapse: collapse;
   border-spacing: 0;
 }
 
 a {
   text-decoration: none;
 }
 
 code, pre, samp {
 font-family: monospace;
 }
 
 /**
  * BASIC TYPE
  */
 
 img, video {
   max-width: 100%;
   vertical-align: middle;
 }
 
 p {
   margin: 0 0 1em;
 }
 
 h1, h2, h3, h4 {
   margin: .5em 0 .75em;
   line-height: 1.3;
 }
 
 h1 {
   font-size: 1.5em;
 }
 
 h2 {
   font-size: 1.25em;
 }
 
 h3 {
   font-size: 1.125em;
 }
 
 h4 {
   font-size: 1em;
 }
 
 /**
  * BOX HACKING
  */
 
 html {
   box-sizing: border-box;
 }
 
 *,
 *:before,
 *:after {
   box-sizing: inherit;
 }
 
 /**
  * CLEAR FLOATS
  * Reference: http://w3bits.com/clearfix
  */
 
 .cf:after,
 .lab-grid:after {
   content: "";
   display: table;
   clear: both;
 }
 
 /**
  * CONTENT WRAPPER
  */
 
 .wrapper {
   margin-left: auto;
   margin-right: auto;
   padding-top: 1.5em;
   padding-right: 1.5em;
   padding-left: 1.5em;
   max-width: 1080px;
 }
 
 /**
 * ICON SYSTEM
 */
 
 .icon {
   height: 1em;
   width: 1em;
   display: inline-block;
   vertical-align: middle;
   fill: currentColor;
 }
 
 /**
  * BUTTONS
  */
 
 .buttons {
   margin: 1.5em 0;
 }
 
 .button {
   padding: 1em 1.5em;
   color: rgba(255, 255, 255, 0.75);
   border-radius: 3px;
 }
 
 .button:hover {
   color: rgba(255, 255, 255, 0.9);
 }
 
 .green-sea {
   background: #16a085;
 }
 
 .button.green-sea:hover {
   background: #1abc9c;
 }
 
 .belize-hole {
   background: #2980b9;
 }
 
 .button.belize-hole:hover {
   background: #3498db;
 }
 
 .pomegranate {
   background: #c0392b;
 }
 
 .button.pomegranate:hover {
   background: #e74c3c;
 }
 
 /**
  * Carbon
  */
 #carbonads {
   font-family: inherit;
   position: relative;
   display: block;
   overflow: hidden;
   box-sizing: border-box;
   margin: 0 auto 1.5em;
   max-width: 728px;
   font-size: 22px;
   color: inherit;
 }
 
 #carbonads a {
   text-decoration: none;
   color: inherit;
 }
 
 #carbonads a:hover {
   color: inherit;
 }
 
 .carbon-wrap {
   display: flex;
   align-items: center;
 }
 
 .carbon-img {
   display: block;
   float: left;
   margin: 0;
   line-height: 1;
 }
 
 .carbon-img img {
   display: block;
   width: auto;
   height: 90px;
 }
 
 .carbon-text {
   display: block;
   float: left;
   padding: 0 1em;
   max-width: calc(100% - 130px - 2em);
   text-align: left;
   line-height: 1.35;
 }
 
 .carbon-poweredby {
   position: absolute;
   right: 0;
   bottom: 0;
   display: block;
   padding: 6px 10px;
   border-top-left-radius: 4px;
   text-align: center;
   text-transform: uppercase;
   letter-spacing: .5px;
   font-weight: 600;
   font-size: 8px;
   line-height: 1;
 }
 
 /**
  * HYPERLINKS & NAVIGATION
  */
 
 .lab-nav {
   width: 100%;
 }
 
 .lab-nav--fixed {
   position: fixed;
 }
 
 .lab-nav--top {
   top: 0;
 }
 
 .lab-nav--bottom {
   bottom: 0;
 }
 
 .lab-nav,
 .lab-follow {
   font-size: 13px;
   line-height: 1;
 }
 
 .lab-theme-light body {
   color: rgba(0, 0, 0, .75);
 }
 
 .lab-theme-light .lab-nav,
 .lab-theme-light .lab-follow {
   background: rgba(0, 0, 0, 0.05);
 }
 
 .lab-theme-light .lab-nav,
 .lab-theme-light .lab-follow,
 .lab-theme-light .lab-nav a {
   color: rgba(0, 0, 0, 0.35);
 }
 
 .lab-theme-light .lab-nav a:hover,
 .lab-theme-light .lab-nav a:active,
 .lab-theme-light .lab-nav a:focus,
 .lab-theme-light .lab-follow:hover,
 .lab-theme-light .lab-follow:active,
 .lab-theme-light .lab-follow:focus {
   background: rgba(0, 0, 0, 0.1);
   color: rgba(0, 0, 0, 0.5);
 }
 
 .lab-theme-light #carbonads,
  .lab-theme-light .p-bit-hr {
   border-color: rgba(0, 0, 0, 0.05);
   background: rgba(0, 0, 0, 0.05);
 }
 
 .lab-theme-light #carbonads:hover,
 .lab-theme-light #carbonads:active,
 .lab-theme-light #carbonads:focus,
 .lab-theme-light .lab-theme-light:hover,
 .lab-theme-light .lab-theme-light:active,
 .lab-theme-light .lab-theme-light:focus{
   border-color: rgba(0, 0, 0, 0.1);
   background: rgba(0, 0, 0, 0.1);
 }
 
 .lab-theme-light .carbon-poweredby {
   background: repeating-linear-gradient(-45deg,
     transparent,
     transparent 5px,
     rgba(0, 0, 0, 0.05) 5px,
     rgba(0, 0, 0, 0.025) 10px) rgba(0, 0, 0, 0.05);
   color: rgba(0, 0, 0, .5);
 }
 
 .lab-theme-light .lab-article-button {
   color: rgba(0, 0, 0, .25);
   border: 3px solid rgba(0, 0, 0, .1);
 }
 
 .lab-theme-light .lab-article-button:hover,
 .lab-theme-light .lab-article-button:active,
 .lab-theme-light .lab-article-button:focus {
   color: rgba(0, 0, 0, .3);
   border-color: rgba(0, 0, 0, .15);
 }
 
 .lab-theme-dark body {
   color: rgba(255, 255, 255, .75);
 }
 
 .lab-theme-dark .lab-nav,
 .lab-theme-dark .lab-follow {
   background: rgba(255, 255, 255, 0.05);
 }
 
 .lab-theme-dark .lab-nav,
 .lab-theme-dark .lab-nav a,
 .lab-theme-dark .lab-follow {
   color: rgba(255, 255, 255, 0.35);
 }
 
 .lab-theme-dark .lab-nav a:hover,
 .lab-theme-dark .lab-nav a:active,
 .lab-theme-dark .lab-nav a:focus,
 .lab-theme-dark .lab-follow:hover,
 .lab-theme-dark .lab-follow:active,
 .lab-theme-dark .lab-follow:focus {
   background: rgba(255, 255, 255, 0.1);
   color: rgba(255, 255, 255, 0.5);
 }
 
 .lab-theme-dark #carbonads,
.lab-theme-dark .p-bit-hr {
   border-color: rgba(255, 255, 255, 0.05);
   background: rgba(255, 255, 255, 0.05);
 }
 
 .lab-theme-dark #carbonads:hover,
 .lab-theme-dark #carbonads:active,
 .lab-theme-dark #carbonads:focus,
 .lab-theme-dark .p-bit-hr:hover,
 .lab-theme-dark .p-bit-hr:active,
 .lab-theme-dark .p-bit-hr:focus{
   border-color: rgba(255, 255, 255, 0.1);
   background: rgba(255, 255, 255, 0.1);
 }
 
 .lab-theme-dark .carbon-poweredby {
   background: repeating-linear-gradient(-45deg,
     transparent,
     transparent 5px,
     rgba(255, 255, 255, 0.05) 5px,
     rgba(255, 255, 255, 0.025) 10px) rgba(255, 255, 255, 0.05);
   color: rgba(255, 255, 255, .5);
 }
 
 .lab-theme-dark .lab-article-button {
   color: rgba(255, 255, 255, .25);
   border: 3px solid rgba(255, 255, 255, .1);
 }
 
 .lab-theme-dark .lab-article-button:hover,
 .lab-theme-dark .lab-article-button:active,
 .lab-theme-dark .lab-article-button:focus {
   color: rgba(255, 255, 255, .3);
   border-color: rgba(255, 255, 255, .15);
 }
 
 .lab-follow,
 .lab-article-link,
 .lab-share a {
   padding: 1.25em .75em;
   display: inline-block;
   vertical-align: bottom;
   text-decoration: none;
 }
 
 .lab-follow,
 .lab-article-link span,
 .lab-share-link span {
   letter-spacing: 1px;
   text-transform: uppercase;
 }
 
 .lab-follow {
   display: none;
 }
 
 .lab-follow .icon {
   vertical-align: top;
 }
 
 .lab-article-link {
   float: left;
 }
 
 .lab-share {
   float: right;
   text-align: right;
 }
 
 .lab-share ul {
   margin: 0;
 }
 
 .lab-share li {
   display: inline;
   margin: 0;
 }
 
 .lab-article-button {
   font-weight: 700;
   display: block;
   margin: 2em 0;
   padding: 1.25em;
   text-align: center;
 }
 
 /**
  * Grid
  */
 .lab-grid {
   width: 100%;
 }
 
 .lab-grid .lab-grid-cell {
   margin-bottom: 1.5em;
 }
 
 .lab-grid .lab-grid-cell--mb-2x {
   margin-bottom: 3em;
 }
 
 .lab-grid-cell {
   padding-left: 0;
 }
 
 .w-full {
   width: 100%;
 }
 
 .w-three-quarters {
   width: 75%;
 }
 
 .w-two-thirds {
   width: 66.66666%;
 }
 
 .w-half {
   width: 50%;
 }
 
 .w-third {
   width: 33.33333%;
 }
 
 .w-quarter {
   width: 25%;
 }
 
 /**
  * Pagination
  */
 
 .labs-pagination {
   display: flex;
   justify-content: center;
 }
 .labs-pagination span,
 .labs-pagination a {
   vertical-align: middle;
   margin: .5em;
 }
 
 .labs-pagination span a {
   padding: .5em 1em;
 }
 
 .bsap {
   display: flex !important;
   justify-content: center;
 }
 
 .single-demo 
   #carbonads {
   display: flex;
   position: absolute;
   bottom: 1em;
   left: 1em;
   max-width: 330px;
   margin-bottom: 0;
   z-index: 100;
 } 
 
 .single-demo #carbonads span {
   position: relative;
   display: block;
   overflow: hidden;
 }
 .single-demo #carbonads .carbon-wrap {
   align-items: center;
   display: flex;
 }
 .single-demo #carbonads .carbon-img {
   display: block;
   margin: 0;
   line-height: 1;
 }
 .single-demo #carbonads .carbon-img img {
   display: block;
 }
 .single-demo #carbonads .carbon-text {
   font-size: 13px;
   padding: 10px;
   margin-bottom: 16px;
   line-height: 1.5;
   text-align: left;
 }
 .single-demo #carbonads .carbon-poweredby {
   display: block;
   padding: 6px 8px;
   text-align: center;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   font-weight: 600;
   font-size: 8px;
   line-height: 1;
   border-top-left-radius: 3px;
   position: absolute;
   bottom: 0;
   right: 0;
 }
 
 /**
 * MEDIA SETTINGS
 */
 
 @media only screen and (min-width: 320px) and (max-width: 759px) {
   .carbon-text {
     font-size: 12px;
   }
 }
 
 @media only screen and (min-width: 1024px) {
   h1 {
     font-size: 2em;
   }
   h2 {
     font-size: 1.65em;
   }
   h3 {
     font-size: 1.25em;
   }
   h4 {
     font-size: 1em;
   }
 
   .w-full--d {
     width: 100%;
   }
 
   .w-three-quarters--d {
     width: 75%;
   }
 
   .w-two-thirds--d {
     width: 66.66666%;
   }
 
   .w-half--d {
     width: 50%;
   }
 
   .w-third--d {
     width: 33.33333%;
   }
 
   .w-quarter--d {
     width: 25%;
   }
 }
 
 @media only screen and (max-width: 767px) {
   .lab-article-link span,
   .lab-share span {
     display: none;
   }
 }
 
 @media only screen and (min-width: 1024px) {
   .lab-follow {
     display: inline-block;
     position: fixed;
     right: -34px;
     bottom: 20%;
     transform: rotate(-90deg);
   }
 }
 
 @media only screen and (min-width: 768px) {
   .lab-grid {
     margin-left: -1.5em;
     width: calc( 100% + 1.5em );
   }
 
   .lab-grid-cell {
     float: left;
     padding-left: 1.5em;
   }
 }
 
 @media only screen and (max-width: 1023px) and (min-width: 768px) {
   h1 {
     font-size: 1.75em;
   }
   h2 {
     font-size: 1.45em;
   }
 
   .lab-grid--3 .lab-grid-cell {
     width: 50%;
   }
 
   .w-full--t {
     width: 100%;
   }
 
   .w-three-quarters--t {
     width: 75%;
   }
 
   .w-two-thirds--t {
     width: 66.66666%;
   }
 
   .w-half--t {
     width: 50%;
   }
 
   .w-third--t {
     width: 33.33333%;
   }
 
   .w-quarter--t {
     width: 25%;
   }
 }
 
 @media only screen and (max-width: 767px) {
   .lab-share {
     text-align: right;
   }
 
   .w-full--m {
     width: 100%;
   }
 
   .w-three-quarters--m {
     width: 75%;
   }
 
   .w-two-thirds--m {
     width: 66.66666%;
   }
 
   .w-half--m {
     width: 50%;
   }
 
   .w-third--m {
     width: 33.33333%;
   }
 
   .w-quarter--m {
     width: 25%;
   }
 }