/* css Zen Garden submission 218 - 'Apothecary', by Trent Walton, http: //www.trentwalton.com/ */
/* css released under Creative Commons License - http: //creativecommons.org/licenses/by-nc-sa/1.0/  */

/* TYPEKIT_KIT_ID: xtk3kmd */

html,body,div,span,object,h1,h2,h3,h4,h5,h6,p,a,abbr,acronym,em,img,ol,ul,li {border: 0;font-weight: inherit;font-style: inherit;font-size: 100%;font-family: inherit;vertical-align: baseline;margin: 0;padding: 0;}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  overflow-y: auto;
  background: #faf3e6;
  background-size: 22em;
}

body {
  font: 112.5%/1.3 "ltc-bodoni-175",serif;
  color: #3f3d3a;
  overflow: hidden;
}

body:before, body:after {
  content: '';
  display: block;
  width: 0; 
  height: 0; 
}

body:before {
  border-left: 45px solid #faf3e6;
  border-right: 45px solid #faf3e6;
  border-top: 45px solid transparent;
  background: #f7644d url('img-halftone.png') repeat;
  margin: 0 auto -45px;
}

body:after {
  border-left: 7em solid #faf3e6;
  border-right: 7em solid #faf3e6;
  border-bottom: 10em solid transparent;
  background: #ffb14d url('img-halftone.png') repeat;
  margin: -10em auto 0;
}

.page-wrapper {
  width: 100%;
  margin: 0.25em auto;
  max-width: 1800px;
  position: relative;
  padding: 0 4%;
}

.page-wrapper:before {
  content: "";
  height: 20px;
  background: 
    url('img-lg-horiz-border.png') repeat-x 0 -2px;
  background-size: 40em;
  display: block;
}

.page-wrapper:after {
  content: "";
  display: table;
  clear: both;
}

h1, h2, h3, h4, h5 {
  text-align: center;
  color: #272625;
  text-transform: uppercase;
}

a {
  color: #e5452c;
}

a:hover, a:focus {
  color: #3f3d3a;
}

p {
  margin-bottom: 0.15em;
}

/* -------INTRO SECTION------ */
.intro {
  clear: both;
  padding-top: 2em;
}

.intro p {
  margin: 0 auto 1em;
}


.summary p:nth-child(2) {
  font-style: italic;
}

.summary a {
  display: inline-block;
}

.intro h1 {
  font-size: 3em;
  line-height: 1;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.05em;
  text-transform: capitalize;
}

.intro h1:before {
  content: "Dr. Shea\2019s Miraculous";
  font-family: "refrigerator-deluxe",sans-serif;
  font-style: normal;
  text-transform: uppercase;
  display: block;
  font-size: 1.12rem;
  letter-spacing: 0.1rem;
  font-weight: 700;
  background: url('img-sprite.png') no-repeat center 0.25em;
  background-size: 25rem;
  margin-bottom: 1.3em;
}

.intro h2 {
  font-family: "french-clarendon-ornamented",sans-serif;
  font-size: 2.25em;
  font-weight: 400;
  padding-top: 4.5em;
  margin-top: 0.1em;
  margin-bottom: 0em;
  letter-spacing: 0.05rem;
  line-height: 1.275em;
  background: url('img-bottle.png') no-repeat center 0.75em;
  background-size: 1.45em;
}

.preamble {
  margin: 0 auto 1em;
}

.preamble p {
  margin-bottom: 0.15em;
}

.preamble h3 {
  margin:  0.5em auto 0.55em;
  padding: 0.5em 0 0.55em;
  font-family: "grecian-light-face",sans-serif;
  font-size: 1.5em;
  line-height: 1;
  background: 
    url('img-lg-horiz-border.png') repeat-x top right,
    url('img-lg-horiz-border.png') repeat-x bottom left;
  background-size: 13em;
}

.preamble p:first-line {
  text-transform: uppercase;
}

.preamble p:nth-child(1n+3) {
  text-indent: 1.5em;
}

.preamble p:nth-child(1n+3):first-line {
  text-transform: none;
}


/* -------SIDEBAR ASIDE------- */
.design-selection h3 {
  font-family: "refrigerator-deluxe",sans-serif;
  font-size: 2em;
  letter-spacing: 0.05em;
  padding: 0.5em 0;
  margin: 0.35em auto 0.75em;
  background: 
    url('img-lg-horiz-border.png') repeat-x top right,
    url('img-lg-horiz-border.png') repeat-x bottom left;
  background-size: 15em;
  line-height: 1;
}

.design-selection {
  margin: 0 auto;
}

.design-selection ul {
  list-style-type: none;
  padding: 0;
  overflow-x: hidden;
}

.design-selection li {
  color: transparent;
  margin-bottom: 0.28em;
  clear: both;
}

.design-selection li a {
  text-decoration: none;
  color: #3f3d3a;
}

.sidebar a:hover, sidebar a:focus {
  color: #e5452c;
}

.design-name {
  font-style: italic;
  background: #faf3e6;
  padding-right: 0.25em;
}

.design-name:after {
    float: left;
    width: 0;
    white-space: nowrap;
    color: #3f3d3a;
    content: "....................................................................................................................."
}

.designer-name {
  float: right;
  font-family: "refrigerator-deluxe",sans-serif;
  font-size: 1em;
  text-transform: uppercase;
  background: #faf3e6;
  padding-left: 0.25em;
}

h3.archives, h3.resources {
  display: none;
}

.design-archives {
  margin: 0.8em auto;
  position: relative;
}

.design-archives ul {
  list-style-type: none;
  background: 
    url('img-lg-horiz-border.png') repeat-x top right,
    url('img-lg-horiz-border.png') repeat-x bottom left;
  background-size: 36em;
  padding: 1.25em 0;
}

.design-archives .viewall {
  text-align: center;
  text-transform: uppercase;
  font-style: italic;
  letter-spacing: 0.02em;
  font-size: 1.125em;
}

.design-archives .previous a, .design-archives .next a {
  position: absolute;
  overflow: hidden;
  width: 2em;
  height: 1.25em;
  color: #3f3d3a;
  text-decoration: none;
  white-space: nowrap;
  text-indent: -9999px;
  -webkit-transition: margin ease-out 0.1s;
  -moz-transition: margin ease-out 0.1s;
  -o-transition: margin ease-out 0.1s;
  transition: margin ease-out 0.1s;
}

.design-archives .next a:hover, .design-archives .next a:focus {
  margin-right: -4px;
}

.design-archives .previous a:hover, .design-archives .previous a:focus {
  margin-left: -4px;
}

.viewall a, .zen-resources a {
   color: #3f3d3a;
   text-decoration: none;
}

.design-archives .next a {
  right: 0;
  background: url('img-sprite.png') no-repeat bottom right;
  background-size: 20em;
}

.design-archives .previous a {
  left: 0;
  background: url('img-sprite.png') no-repeat bottom left;
  background-size: 20em;
}

.sidebar .wrapper {
  background: 
    url('img-lg-horiz-border.png') repeat-x bottom left;
  background-size: 40em;
  margin: 0 2px -1px;
}

.zen-resources {
  background:  url('img-pointer-guy-sm.png') no-repeat 28% 95%;
  background-size: 5em;
  overflow: hidden;
}

.zen-resources:after, .zen-resources ul:after {
  width: 9em;
  height: 9em;
  content: '';
  margin: 0 auto;
  display: block;
  z-index: -1;
  position: relative;
}

.zen-resources:after {
  margin-top: 9em;
  background: #ffb14d url('img-halftone.png') repeat;
   -webkit-transform: rotate(45deg) translateY(5.25em) translateX(2.75em);
     -moz-transform: rotate(45deg) translateY(5.25em) translateX(2.75em);
      -ms-transform: rotate(45deg) translateY(5.25em) translateX(2.75em);
       -o-transform: rotate(45deg) translateY(5.25em) translateX(2.75em);
          transform: rotate(45deg) translateY(5.25em) translateX(2.75em);
}

.zen-resources ul:after {
  margin-top: 3.5em;
  background: #bad1c2 url('img-halftone.png') repeat;
   -webkit-transform: rotate(45deg) translateY(0.2em) translateX(3em);
     -moz-transform: rotate(45deg) translateY(0.2em) translateX(3em);
      -ms-transform: rotate(45deg) translateY(0.2em) translateX(3em);
       -o-transform: rotate(45deg) translateY(0.2em) translateX(3em);
          transform: rotate(45deg) translateY(0.2em) translateX(3em);
  margin-bottom: -21.5em;
}

.zen-resources ul {
  list-style-type: none;
  margin: 0 auto;
  font-family: "refrigerator-deluxe",sans-serif;
  text-transform: uppercase;
  text-align: center;
}

.zen-resources li {
  display: block;
  text-align: center;
  line-height: 1.6;
}


/* -------EXPLANATION------- */
.explanation {
  padding: 1.75em 0 0;
  margin: 0 auto;
  position: relative;
  background: #faf3e6;
}

.explanation p:first-line,
.participation p:first-line,
.benefits p:first-line {
  text-transform: uppercase;
}

.explanation p:nth-child(1n+3):first-line,
.participation p:nth-child(1n+3):first-line,
.benefits p:nth-child(1n+3):first-line {
  text-transform: none;
}

.explanation h3 {
  font-size: 2.15em;
  padding-bottom: 1.75rem;
  font-style: italic;
  letter-spacing: 0.03em;
  text-align: center;
  width: 100%;
}

.explanation p:nth-child(1n+3) {
  text-indent: 1.5em;
}

.participation {
  padding: 1.5em 0 0.5em;
  background: url('img-lg-horiz-border.png') repeat-x top left;
  background-size: 40em;
  margin: 3em 2px 0;
}

.participation h3 {
  font-family: "refrigerator-deluxe",sans-serif;
  font-size: 2.5em;
  letter-spacing: 0.025em;
  padding-bottom: 1rem;
  background: url('img-sprite.png') no-repeat center center;
  background-size: 9em;
}

.participation p {
  margin: 0 auto;
}

.participation p:nth-child(2) {
  background: 
    url('img-lg-horiz-border.png') repeat-x top left;
  background-size: 44em;
  padding-top: 2em;
}

.participation p:nth-child(1n+3) {
  text-indent: 1.5em;
}

.benefits {
  padding: 1em 0 20em;
  margin: 0 2px;
  background: url('img-lg-horiz-border.png') repeat-x bottom center;
  background-size: 45em;
  position: relative;
}

.benefits p:last-child {
  background: 
    url('img-lg-horiz-border.png') repeat-x bottom left;
  background-size: 44em;
  padding-bottom: 1em;
}

.benefits h3 {
  margin: 0em auto 0.5em;
  font-family: "grecian-light-face",sans-serif;
  font-size: 2.65em;
  background: 
    url('img-lg-horiz-border.png') repeat-x top center,
    url('img-lg-horiz-border.png') repeat-x bottom left;
  background-size: 12em;
  padding: 0.25em 0;
}

.benefits p {
    margin: 0 auto;
}

.benefits:before {
  content: 'Apply Liberally';
  font-size: 3em;
  position: absolute;
  bottom: 3.5rem;
  text-align: center;
  width: 100%;
  font-family: "french-clarendon-ornamented",sans-serif;
  text-transform: uppercase;
  padding-bottom: 14.35rem;
  letter-spacing: 0.03em;
}

.benefits:after {
  content: 'And Regularly!';
  font-size: 3em;
  position: absolute;
  bottom: -13rem;
  text-align: center;
  width: 100%;
  font-family: "french-clarendon-ornamented",sans-serif;
  text-transform: uppercase;
  padding-bottom: 14.35rem;
  letter-spacing: 0.03em;
}

.benefits p:after {
  content: '';
  display: block;
  width: 100%;
  height: 26em; 
  margin: 0 auto -26em;
  padding-bottom: 2em;
  background:  url('img-look-right-sm.png') no-repeat center 7.75rem;
  background-size: 8.5rem;
}

.requirements h3 {
  font-family: "refrigerator-deluxe",sans-serif;
  font-size: 2.75em;
  letter-spacing: 0.025em;
  margin-bottom: 0.725em;
  position: absolute;
  top: 0.1em;
  text-align: center;
  display: block;
  padding-bottom: 1rem;
  width: 100%;
  background: 
    url('img-lg-horiz-border.png') repeat-x bottom left;
  background-size: 16em;
}

.requirements {
  padding: 6.5em 0 2em;
  margin: 0 auto 4.15em;
  position: relative;
  background: 
    url('img-lg-horiz-border.png') repeat-x bottom left;
  background-size: 46em;
}

.requirements p:nth-child(1n+3) {
  text-indent: 1.5em;
}

.requirements p:last-child {
  font-style: italic;
  position: absolute;
  left: 0;
  bottom: -2em;
  margin-bottom: -2.75em;
  text-align: center;
  width: 100%; 
  text-indent: 0;
}


footer:after {
  content: '';
  display: block;
  width: 100%;
  height: 15em; 
  margin: 0 auto -13.5em;
  background:  url('img-lookup.png') no-repeat center center;
  background-size: 10em;
}


footer {
  background: 
    url('img-lg-horiz-border.png') repeat-x bottom left;
  background-size: 40em;
  margin: 5.5em 1px -1px;
  text-align: center;
  font-family: "refrigerator-deluxe",sans-serif;
  font-size: 1.15em;
  text-transform: uppercase;
  text-align: center;
  padding-bottom: 8.5em;
}

footer a {
  text-decoration: none;
  background: #272625;
  padding: 0.15rem 0.5rem;
  color: #faf3e6;
  margin: 0 0.15em;
  letter-spacing: 0.05em;
}

footer a:hover, footer a:focus {
  background-color: #e5452c;
}


@media (min-width:600px) {
  body {
    font-size: 1.12em;
    line-height: 1.6;
  }
  
  .intro p,
  .preamble,
  .design-selection,
  .design-selection ul,
  .design-archives,
  .zen-resources ul,
  .participation p,
  .benefits h3,
  .benefits p {
    max-width: 30rem;
  }
  
  
  .explanation,
  .requirements {
    max-width: 30rem;
  }

  body:before {
    border-left: 89px solid #faf3e6;
    border-right: 89px solid #faf3e6;
    border-top: 89px solid transparent;
    margin: 0 auto -5em;
  }
  
  body:after {
    border-left: 11em solid #faf3e6;
    border-right: 11em solid #faf3e6;
    border-bottom: 14.5em solid transparent;
    margin: -14.5em auto 0;
    position:relative;
    z-index:-2;
  }
  
  .page-wrapper {
    width: 99%;
    background: 
      url('img-lg-vert-border.png') repeat-y top left,
      url('img-lg-vert-border.png') repeat-y right 100px;
    background-size: 0.75em;
    margin: 0.5em auto;
    padding: 0 2px;
  }
  
  .page-wrapper:before {
  background-size: 50em;
}
  
  .intro {
    padding-top: 7em;
  }
  
  .intro h1 {
    font-size: 5.25em;
    line-height: 1;
    max-width: 94%;
    margin: 0 auto;
  }
  
  .intro h1:before {
    font-size: 0.25em;
    letter-spacing: 0.175rem;
    font-weight: 700;
    background: url('img-sprite.png') no-repeat center 0.2em;
    background-size: 38rem;
    margin-bottom: 1.2em;
  }
  
  .intro h2 {
    font-size: 3.75em;
    padding-top: 4.25em;
    margin-top: 0.85em;
    margin-bottom: 0em;
    line-height: 1.275em;
    background: url('img-bottle.png') no-repeat center top;
    background-size: 1.65em;
  }
  
  .summary p:nth-child(2) {
    text-align: center;
  }
  
  .preamble h3 {
    font-size: 2.5em;
  }

  .preamble h3:first-line {
    font-family: "refrigerator-deluxe",sans-serif;
    font-size: 1.1em;
    display: inline-block;
    margin: 0 auto;
    line-height: 1.25;
    letter-spacing: 0.025em;
  }
  
  .design-selection h3 {
    font-size: 2.6em;
    letter-spacing: 0.05em;
    padding: 0.75em 0;
  } 
  
  .design-archives .viewall {
    font-size: 1.8em;
  }
  
  .design-archives .previous a, .design-archives .next a {
    width: 4em;
    height: 2.4em
  }
  
  .design-archives .next a {
    background: url('img-sprite.png') no-repeat bottom right;
    background-size: 35em;
  }

  .design-archives .previous a {
    background: url('img-sprite.png') no-repeat bottom left;
    background-size: 35em;
  }
  
  
  .zen-resources:after, .zen-resources ul:after {
    width: 24em;
    height: 24em;
  }
  
  .zen-resources {
    background:  url('img-pointer-guy.png') no-repeat 28% 95%;
  }
  
  .zen-resources:after {
    margin-top: 20em;
    background: #ffb14d url('img-halftone.png') repeat;
     -webkit-transform: rotate(45deg) translateY(11em) translateX(8.5em);
       -moz-transform: rotate(45deg) translateY(11em) translateX(8.5em);
        -ms-transform: rotate(45deg) translateY(11em) translateX(8.5em);
         -o-transform: rotate(45deg) translateY(11em) translateX(8.5em);
            transform: rotate(45deg) translateY(11em) translateX(8.5em);
  }
  
  .zen-resources ul:after {
    margin-top: 3em;
    background: #bad1c2 url('img-halftone.png') repeat;
     -webkit-transform: rotate(45deg) translateY(4.75em) translateX(9em);
       -moz-transform: rotate(45deg) translateY(4.75em) translateX(9em);
        -ms-transform: rotate(45deg) translateY(4.75em) translateX(9em);
         -o-transform: rotate(45deg) translateY(4.75em) translateX(9em);
            transform: rotate(45deg) translateY(4.75em) translateX(9em);
    margin-bottom: -52.5em;
  }
  
  .zen-resources {
    background:  url('img-pointer-guy.png') no-repeat 43.8% bottom;
    background-size: 13em;
  }
  
  .zen-resources ul {
    font-size: 0.885em;
  }
  
  .zen-resources a {
    font-size: 1.25em;
  }
  
  .explanation {
    padding: 10.75em 0 0.5em;
    width: 84%;
    margin: 1px auto 0;
    position: relative;
    background: #faf3e6;
  }
     
  .explanation h3 {
    font-size: 3em;
    line-height: 1;
    font-style: italic;
    letter-spacing: 0.03em;
    position: absolute;
    top: 1em;
    text-align: center;
    display: block;
    width: 100%;
  }
  
  .explanation p {
    line-height: 1.475;
  }
  
  .participation {
    background-size: 48em;
  }
  
  .participation h3 {
    font-size: 3.25em;
    background-size: 8em;
  }
  
  .participation p:nth-child(2) {
    padding-top: 2em;
  }
  
  .participation p:nth-child(1n+3) {
    text-indent: 1.5em;
  }
  
  .benefits {
    padding: 1em 0 24em;
  }
  
  .benefits h3 {
    font-size: 3em;
  }
  
  .benefits:before {
    bottom: 5.5rem;
  }

  .benefits:after {
    bottom: -13rem;
  }
  
  .benefits p:after {
    content: '';
    display: block;
    width: 100%;
    height: 25em; 
    margin: 0 auto -26em;
    padding-bottom: 2em;
    background:  url('img-look-right.png') no-repeat center center;
    background-size: 32%;
  }
  
  .requirements {
    padding: 11.5em 0 2.5em;
    width: 84%;
    margin: 0 auto 4.15em;
  }
  
  .requirements h3 {
    font-size: 4.5em;
    margin-bottom: 0.725em;
    padding-bottom: 1.5rem;
    background-size: 10em;
  }
    
  footer {
    padding-bottom: 14em;
  }
  
  footer:after {
    background:  url('img-lookup.png') no-repeat center bottom;
    background-size: 15em;
  }
  
  .participation h3:before, .participation h3:after {
    position: absolute;
    font-size: 1.125rem;
    color: #3f3d3a;
    letter-spacing: 0;
    font-family: "ltc-bodoni-175",serif;
    font-style: italic;
    text-transform: lowercase;
  }
  
  .participation h3:after {
    content: '5.23 fl oz';
    top: 1.1em;
    right: 1.6em;
  }
  
  .participation h3:before {
    content: 'no. 218';
    top: 1.1em;
    left: 1.6em;
  }
}


@media (min-width:800px) {
  body {
    font-size: 1.188em;
  }
  
  .intro {
    padding-top: 8em;
  }
  
  .intro p,
  .preamble,
  .design-selection,
  .design-selection ul,
  .design-archives,
  .zen-resources ul,
  .participation p,
  .benefits h3,
  .benefits p {
    max-width: 36rem;
  }
  
  
  .explanation,
  .requirements {
    max-width: 36rem;
  }
  
  body:before {
    border-left: 115px solid #faf3e6;
    border-right: 115px solid #faf3e6;
    border-top: 115px solid transparent;
    margin: 0 auto -6em;
  }
  
  .intro h1 {
    font-size: 5.65em;
  }
  
  .intro h1:before {
    font-size: 2rem;
    letter-spacing: 0.175rem;
    font-weight: 700;
    background: url('img-sprite.png') no-repeat center 0.25em;
    background-size: 42rem;
    margin-bottom: 1em;
  }
  
  .intro h2 {
    padding-top: 4.5em;
    margin-top: 0.7em;
    margin-bottom: 0em;
    background-size: 1.75em;
  }
  
  .preamble h3 {
    font-size: 3em;
  }
  
  
  .zen-resources li {
    display: inline-block;
    text-align: left;
  }

  .zen-resources li a {
    margin: 0 0.75em;
  }

  .zen-resources li:first-child a {
    margin-left: 0;
  }

  .zen-resources li:last-child a {
    margin-right: 0;
  }
  
  .zen-resources a {
    font-size: 1em;
  }
  
  .explanation {
    padding: 13.75em 0 0.5em;
    width: 84%;
    margin: 1px auto 0;
    position: relative;
    background: #faf3e6;
    -webkit-column-count: 2;
    -webkit-column-gap: 2em;
    -moz-column-count: 2;
    -moz-column-gap: 2em;
    -o-column-count: 2;
    -o-column-gap: 2em;
    column-count: 2;
    column-gap: 2em;
  }
     
  .explanation h3 {
    font-size: 3.9em;
    font-style: italic;
    text-align: center;
    display: block;
    width: 100%;
  }
  
  .participation h3 {
    font-size: 5.25em;
    background-size: 9em;
  }
  
  .benefits:before {
    bottom: 6.5rem;
  }

  .benefits:after {
    bottom: -12.5rem;
  }
  
  .benefits p:after {
    content: '';
    display: block;
    width: 100%;
    height: 26em; 
    margin: 0 auto -30.5em;
    padding-bottom: 6em;
    background:  url('img-look-right.png') no-repeat center 40%;
    background-size: 28%;
  }
  
  .benefits h3 {
    font-size: 3.75em;
  }
  
  .requirements {
    padding: 11.5em 0 2.5em;
    width: 84%;
    margin: 0 auto 4.15em;
    background-size: 68rem;
    -webkit-column-count: 2;
    -webkit-column-gap: 2em;
    -moz-column-count: 2;
    -moz-column-gap: 2em;
    -o-column-count: 2;
    -o-column-gap: 2em;
    column-count: 2;
    column-gap: 2em;
    line-height: 1.475;
  }
  
  .requirements h3 {
    font-size: 5.5em;
    margin-bottom: 0.725em;
    padding-bottom: 1.5rem;
    background-size: 8em;
  }
  
  .zen-github:after, .zen-validate-html:after {
    font-size: 1.12rem;
  }
}

@media (min-width:1050px) {
  body {
    font-size: 1.25em;
  }
  
  .intro {
    padding-top: 9em;
  }
  
  .intro p,
  .preamble,
  .design-selection,
  .design-selection ul,
  .design-archives,
  .zen-resources ul,
  .participation p,
  .benefits h3,
  .benefits p {
    max-width: 40rem;
  }
  
  body:before {
    border-left: 140px solid #faf3e6;
    border-right: 140px solid #faf3e6;
    border-top: 140px solid transparent;
    margin: 0 auto -7em;
  }
  
  .intro h1 {
    font-size: 6em;
  }
  
  .preamble h3:first-child {
    font-size: 3em;
  }
  
  .explanation h3 {
    top: 1em;
  }
  
  .benefits:before, .benefits:after {
    font-size: 3.7em;
    top: 64.25%;
    height: 0;
    padding: 0 3%;
    width: auto;
  }
  
  .benefits:before {
    right: 63%;
  }
  
  .benefits:after {
    left: 63%;
  }
  
  .benefits p:after {
    content: '';
    display: block;
    width: 100%;
    height: 26em; 
    margin: 0 auto -26em;
    padding-bottom: 2em;
    background:  url('img-look-right.png') no-repeat center center;
    background-size: 42%;
  }

  .explanation,
  .requirements {
    max-width: 60em;
  }
  
  .explanation {
    padding: 9em 0 0.5em;
  }
     
  .explanation h3 {
    font-size: 3.3em;
  }
  
  .requirements {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    -o-column-count: 3;
    column-count: 3;
  }
  
  .requirements p:last-child {
    margin-bottom: -1.2rem;
  }
  
  footer {
    margin-top: 0;
  }
}


@media (min-width:1200px) {
  body {
    font-size: 1.315em;
  }
  
  .intro {
    padding-top: 10.5em;
  }
  
  body:before {
    border-left: 168px solid #faf3e6;
    border-right: 168px solid #faf3e6;
    border-top: 168px solid transparent;
    margin: 0 auto -8em;
  }
  
  .intro h1 {
    font-size: 7em;
  }
  
  .intro h1:before {
    background: url('img-sprite.png') no-repeat center 0.3em;
    background-size: 56rem;
    font-size: 2.75rem;
  }
  
  .intro h2 {
    padding-top: 5em;
    background-size: 1.85em;
  }
  
  .benefits:before {
    right: 60%;
  }
  
  .benefits:after {
    left: 60%;
  }
  
  .explanation {
    padding: 10.5em 0 0.5em;
  }
     
  .explanation h3 {
    font-size: 3.7em;
  }
}

@media (min-width:1300px) {
  body {
    font-size: 1.375em;
  }
  
  .intro {
    padding-top: 13.5em;
  }
  
   body:before {
    border-left: 198px solid #faf3e6;
    border-right: 198px solid #faf3e6;
    border-top: 198px solid transparent;
    margin: 0 auto -9em;
  }
  
  .intro h1 {
    font-size: 7.35em;
    line-height: 1.4;
  }
  
  .intro h1:before {
    background: url('img-sprite.png') no-repeat center 0.5em;
    background-size: 58rem;
    margin-bottom: 0;
  }
  
  .benefits:before {
    right: 58.5%;
  }
  
  .benefits:after {
    left: 58.5%;
  }
}


/* ------- OMG FLEXBOX ------ */
.page-wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -moz-box-orient: vertical;
  -webkit-box-orient: vertical;
  -ms-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.intro {
  -webkit-box-ordinal-group: 1;  
  -moz-box-ordinal-group: 1;     
  -ms-flex-order: 1;     
  -webkit-order: 1;  
  order: 1;
  align-self: flex-start;
  width: 100%;
}

.main {
  -webkit-box-ordinal-group: 3;  
  -moz-box-ordinal-group: 3;     
  -ms-flex-order: 3;     
  -webkit-order: 3;  
  order: 3;
  align-self: flex-start;
  width: 100%;
}

.sidebar {
  -webkit-box-ordinal-group: 2;  
  -moz-box-ordinal-group: 2;     
  -ms-flex-order: 2;     
  -webkit-order: 2;  
  order: 2;
}