/*
* Skeleton V2.0.4
* www.getskeleton.com
*/

/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography 
- Clearing
*/

/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box; }
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
     width: 85%; 
    padding: 0; }
}

  /* For devices larger than 769px */
@media (min-width: 769px) {
  .container {
   width: 80%;  
  }
    .column,
    .columns {
      margin-left: 2%; }

  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .one.column,
  .one.columns                    { width: 5.66666666667%; }
  .two.columns                    { width: 14.3333333333%; }
  .three.columns                  { width: 23%;            }
  .four.columns                   { width: 31.6666666667%; }
  .five.columns                   { width: 40.3333333333%; }
  .six.columns                    { width: 49%;            }
  .seven.columns                  { width: 57.6666666667%; }
  .eight.columns                  { width: 66.3333333333%; }
  .nine.columns                   { width: 75.0%;          }
  .ten.columns                    { width: 83.6666666667%; }
  .eleven.columns                 { width: 92.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 31.6666666667%; }
  .two-thirds.column              { width: 66.3333333333%; }

  .one-half.column                { width: 49%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}

/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
html {
  font-size: 62.5%; }

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 300; }
h1 { font-size: 3.0rem; line-height: 1.2;  letter-spacing: -.1rem; }
h2 { font-size: 2.8rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 2.4rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.2rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.7rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.3rem; line-height: 1.6;  letter-spacing: 0; }
p { font-size: 17px; line-height: 1.7; letter-spacing: 0; }
span,
input,
textarea,
select,
label,
legend,
.button,
button {font-size: 15px;}
.text-lg { font-size: 4.5rem; }

/* Larger than tablet (tablet:768px) */
@media (min-width: 769px) {
  h1 { font-size: 4.5rem; }
  h2 { font-size: 4.0rem; }
  h3 { font-size: 3.0rem; }
  h4 { font-size: 2.8rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; }
  p {font-size: 19px;}
  span,
  input,
  textarea,
  select,
  label,
  legend,
  .button,
  button {font-size: 16px;}
  .text-lg { font-size: calc(5rem + 2vw); }
}

/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }