/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Links
- Code
- Spacing
- Utilities
- Clearing
- Media Queries
*/


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

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

/* For devices larger than 750px */
@media (min-width: 750px) {
  main, .container { width: 96%; }
  .column, .columns, .percent { margin-left: 2%; }
  .column:first-child, .columns:first-child, .percent:first-child { margin-left: 0; }

  .one.column,
  .one.columns                    { width: 5.66666666667%; }
  .two.columns                    { width: 14.3333333333%; }
  .three.columns                  { width: 23.5%;          }
  .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: 74.5%;          }
  .ten.columns                    { width: 83.6666666667%; }
  .eleven.columns                 { width: 92.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .half.column                    { width: 2.83333333333%; }
  .two-half.columns               { width: 19.1%; }
  .one-third.column               { width: 31.6666666667%; }
  .two-thirds.column              { width: 66.3333333333%; }
  .seventy.percent                { width: 69%;            }
  .thirty.percent                 { width: 29%;            }
  .eighty.percent                 { width: 79%;            }
  .twenty.percent                 { width: 19%;            }

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

  /* 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%; }
}

/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a { color: #0FA0CE; }
a:hover { color: #1EAEDB; }
a:active { -webkit-tap-highlight-color: rgba(0,0,0,0); }
:focus { outline: none; }
::-moz-focus-inner { border: 0; }

/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: #F1F1F1;
  border: 1px solid #E1E1E1;
  border-radius: 4px; }
pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre; }


/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width { width: 100%; box-sizing: border-box; }
.u-max-width { max-width: 100%; box-sizing: border-box; }
.u-inline-block { display: inline-block; }
.u-block { display: block; }
.u-table { display: table; }
.u-table-row { display: table-row; }
.u-table-cell { display: table-cell; }
.u-no-bullets { list-style: none; }
.u-right { float: right; }
.u-left { float: left; }
.u-caps { text-transform: capitalize; }
.u-uppercase { text-transform: uppercase; }
.u-no-underline { text-decoration: none; }
.u-no-margin { margin: 0; }
.u-no-pad { padding: 0; }
.u-hide { display: none; }
.u-relative { position: relative; }
.u-pad-top { padding-top: 1em; }
.u-pad-bottom { padding-bottom: 1em; }
.u-less-top { padding-top: .5em; }
.u-less-bottom { padding-bottom: .5em; }
.u-less-right { padding-right: .5em; }
.u-less-left{ padding-left: .5em; }
.u-pad-left { padding-left: 10px; }
.u-pad-right { padding-right: 1em; }
.u-margin-top { margin-top: 1em; }
.u-margin-bottom { margin-bottom: 1em; }
.u-margin-bot-less { margin-bottom: .5em; }
.u-vmargin { margin-top: 1em; margin-bottom: 1em; }
.u-txt-center { text-align: center; }
.u-txt-end { text-align: end; }

/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-bottom: solid 1px #383e41;
  border-top: solid 1px #1a1e21;
}

/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

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

/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/

/* Mobile screen */
@media screen and (max-width: 749px) {
  .m-hide { display: none; }
  .m-center { text-align: center; }
}

/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}