/*
* 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
- Cards
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Quick spacing rules
- Clearing
- Media Queries
*/


/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-body {
  float:left;
  position: relative;
  width: 100%;
}
.grid {
  display: grid;
  position: relative;
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-left: auto;
  margin-right: auto;
  max-width: none;
  box-sizing: border-box; }
  .grid.nested {
    padding-left: 0;
    padding-right: 0;  }
  .grid.nested.card {
    padding-left: 1.25rem;
    padding-right: 1.25rem;  }

  .grid.nested .column  {
    padding-left: 0;
    padding-right: 0;
  }
  .grid.flex {
    display: flex;  
    flex-wrap: wrap;}
.full.container {
  width: 100%;
  margin-left:0;
  margin-right: :0;
  padding-left:0;
  padding-right:0;
  max-width: none;
}
.column {
  width: 100%;
  display: flex;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
  flex-direction: column; 
}
.column.no-flex {
  display: block;
}
.column.align-end {
        align-self: flex-end;
}
.column.align-center {
        align-self: center;
}
.container, .column img, .columns img {
  width: 100%;
}
.container {
  position: relative;
}



  .g-2-8-2  { grid-template-columns: 2fr 8fr 2fr; }
  .g-7-4-1  { grid-template-columns: 7fr 4fr 1fr; }
  .g-6-6    { grid-template-columns: 6fr 6fr; }
  .g-3-9    { grid-template-columns: 3fr 9fr; }
  .g-4-8    { grid-template-columns: 4fr 8fr; }

  .flush-left   {   margin-left: -1.25rem;    width: calc(100% + 2.5rem);}
  .flush-right  {   margin-right: -1.25rem;   width: calc(100% + 2.5rem);}


/* For devices larger than 750px */
@media (min-width: 750px) {
  .grid {
    padding-left: 4rem;
    padding-right: 4rem;
    max-width: 1920px;
  }
  .column {
    padding-left: 1rem;
    padding-right: 1rem;
  }



  .m-6-6  { grid-template-columns: 6fr 6fr; }
  .m-5-7  { grid-template-columns: 5fr 7fr; }
  .m-2-10  { grid-template-columns: 2fr 10fr; }
  .m-4-8  { grid-template-columns: 4fr 8fr; }
  .m-8-4  { grid-template-columns: 8fr 4fr; }
  .m-7-5  { grid-template-columns: 7fr 5fr; }
  .m-4-4-4    { grid-template-columns: 4fr 4fr 4fr; }
  .m-3-3-3-3    { grid-template-columns: 3fr 3fr 3fr 3fr; }
}


/* Largest screens only rules (Larger than desktop 1200px) */
@media (min-width: 1200px) {
  .grid {
    padding-left: 6rem;
    padding-right: 6rem;
  }
  .column,
  .grid.nested .column  {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .grid.nested .column:first-of-type { padding-left:0; padding-right: 1.5rem;}
  .grid.nested .column:last-of-type { padding-right: 0; padding-left: 1.5rem;}


  .l-2-2-2-2-2-2  { grid-template-columns: 2fr 2fr 2fr 2fr 2fr 2fr ; }
  .l-2-4-4-2  { grid-template-columns: 2fr 4fr 4fr 2fr;}
  .l-3-3-3-3  { grid-template-columns: 3fr 3fr 3fr 3fr;}
  .l-1-4-4-3  { grid-template-columns: 1fr 4fr 4fr 3fr;}
  .l-1-5-5-1  { grid-template-columns: 1fr 5fr 5fr 1fr;}
  .l-4-4-4    { grid-template-columns: 4fr 4fr 4fr; }
  .l-8-2-2    { grid-template-columns: 8fr 2fr 2fr; }
  .l-3-6-3    { grid-template-columns: 3fr 6fr 3fr; }
  .l-2-8-2    { grid-template-columns: 2fr 8fr 2fr; }
  .l-2-5-5    { grid-template-columns: 2fr 5fr 5fr; }
  .l-5-5-2    { grid-template-columns: 5fr 5fr 2fr; }
  .l-6-4-2    { grid-template-columns: 6fr 4fr 2fr; }
  .l-4-8      { grid-template-columns: 4fr 8fr; }
  .l-8-4      { grid-template-columns: 8fr 4fr; }
  .l-6-6      { grid-template-columns: 6fr 6fr; }
  .l-5-7      { grid-template-columns: 5fr 7fr; }
  .l-7-5      { grid-template-columns: 7fr 5fr; }
  .l-2-10      { grid-template-columns: 2fr 10fr; }
  .l-10-2      { grid-template-columns: 10fr 2fr; }

  .l-break-left-20  {    margin-left: calc(-20% - 1.5rem);  }
  .l-break-left-25  {    margin-left: calc(-25% - 1.5rem);  }

  .l-break-right-50   {    margin-right: calc(-50% - 1.5rem);  width: calc(150% + 1.5rem);}
  .l-break-right-75   {    margin-right: calc(-75% - 1.5rem);  width: calc(175% + 1.5rem);}
  .l-break-right-100  {    margin-right: calc(-100% - 1.5rem);  width: calc(200% + 1.5rem);}

  .l-offset-left-25   {   padding-left: calc(25% + 0.75rem);}
  .l-offset-left-50   {   padding-left: calc(50% + 1.5rem);}
  .l-offset-left-75   {   padding-left: calc(75% + 2.25rem);}
  .l-offset-left-100   {   padding-left: calc(100% + 3rem);}

  .flush-left   {    margin-left: -4rem;    width: calc(100% + 4rem);}
  .flush-right  {    margin-right: -4rem;   right: calc(100% + 4rem);}

  .m-hide { display: unset; }
}


/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; }
body {
  font-size: 1.8rem;
  line-height: 1.7;
  font-weight: 300;
  font-family: 'DrescherGroteskBTBookWXX-Rg', 'Helvetica Neue', 'HelveticaNeue', Arial, Helvetica, sans-serif;
  color: #242527; 
  letter-spacing: 0.01rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
  .no-scroll {
      overflow: hidden !important;
  }
section, footer {
  float: left;
  width: 100%;
}

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4 {
  font-family: 'DrescherGroteskBTSemiBoldWXX', 'Helvetica Neue', 'HelveticaNeue', Arial, Helvetica, sans-serif;
  margin-top: 0;
  margin-bottom: 1.7rem;
  font-weight: normal; 
}
h5, h6 {
  font-family: 'DrescherGroteskBTBookWXX-Rg', 'Helvetica Neue', 'HelveticaNeue', Arial, Helvetica, sans-serif;
  margin-top: 0;
  margin-bottom: 1.7rem;
  font-weight: normal; 
}
h1 { font-size: 4rem; line-height: 5.1rem;  letter-spacing: .1rem;}
h2 { font-size: 2.6rem; line-height: 3.4rem;  letter-spacing: 0.05rem; }
h3 { font-size: 2.1rem;   line-height: 3.4rem;  letter-spacing: 0.08rem; }
h4 { font-size: 1.8rem; line-height: 3.4rem;  letter-spacing: 0.08rem; }
h5 { font-size: 1.6rem; line-height: 1.7rem;  letter-spacing: 0.08rem; }
h6 { font-size: 1.4rem; line-height: 1.7rem;  letter-spacing: 0.2rem; }

/* Larger than phablet */
@media (min-width: 550px) {
  h1 { font-size: 4.6rem;   line-height: 5.1rem;}
  h2 { font-size: 2.8rem;   letter-spacing: 0.05rem;}
  h3 { font-size: 2.1rem; }
  h4 { font-size: 1.8rem; }
  h5 { font-size: 1.6rem; }
  h6 { font-size: 1.4rem; }
}

/* Larger desktop screens */
@media (min-width: 1200px) {
  h1 { font-size: 6rem;   line-height: 6.8rem;}
}

li, th, td { 
  line-height: 1.7;
  letter-spacing: 0.01rem;
  -webkit-font-smoothing: antialiased;
}
p, li, input {
  font-family: 'DrescherGroteskBTBookWXX-Rg', 'Helvetica Neue', 'HelveticaNeue', Arial, Helvetica, sans-serif;
  font-size: 2rem;
  line-height: 3.4rem;
  letter-spacing: 0.08rem;
  margin-top: 0; 
  -webkit-font-smoothing: antialiased;
}
li {
  line-height: 1.8;
}
/* For devices larger than 750px */
@media (min-width: 750px) {
  p {  
    font-size: 2rem;
    line-height: 3.4rem;
    letter-spacing: 0.08rem;
  }
}


/* Links
––––––––––––––––––––––––––––––––––––––––––––––––––*/
a {
  text-decoration: none;
  color: #242527; }


/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  font-weight: normal;
  color: var(--cblack);
  background-color: transparent;
  padding: 0;
  margin-bottom: 0;
  box-shadow: none;
  box-sizing: border-box;
  border: none;
  border-left: 1px solid;
  border-bottom: 1px solid;
  transition: 0.2s ease-out;
  line-height: 5.1rem;
}
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  outline: 0; 
  color: white;
  background-color: var(--cblack);
  padding-left: 1rem;
  transition: 0.2s ease-out;
  background-position: right 3rem;
}
fieldset {
  padding: 0;
  border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
  display: inline; }
label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal; }
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}


/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: circle inside; }
ol {
  list-style: decimal inside; }
ol, ul {
  padding-left: 0;
  margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%; }
li {
  margin-bottom: 1rem; }


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


/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #E1E1E1; }
th:first-child,
td:first-child {
  padding-left: 0; }
th:last-child,
td:last-child {
  padding-right: 0; }


/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
  margin-bottom: 1rem; }
input,
textarea,
select,
fieldset {
  margin-bottom: 1.7rem; }
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  margin-bottom: 1.7rem; }


/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box; }
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }


/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid #E1E1E1; }
:focus {
    outline: none;
}

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

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



/* Quick spacing rules
-------------------------------------------------- */
  .mt-4- { margin-top:-4rem; }
  .mt-5- { margin-top:-5rem; }
  .mt-10- { margin-top:-10rem; }
  .mt-15- { margin-top:-15rem; }
  .mt-16- { margin-top:-16rem; }
  .mt-20- { margin-top:-20rem; }
  .mt-1 { margin-top:1rem; }
  .mt-2 { margin-top:2rem; }
  .mt-3 { margin-top:3rem; }
  .mt-4 { margin-top:4rem; }
  .mt-6 { margin-top:6rem; }
  .mt-8 { margin-top:8rem; }
  .mt-10 { margin-top:10rem; }
  .mt-12 { margin-top:12rem; }
  .mt-14 { margin-top:14rem; }
  .mt-15 { margin-top:15rem; }
  .mt-16 { margin-top:16rem; }
  .mt-18 { margin-top:18rem; }
  .mt-20 { margin-top:20rem; }
  .mt-22 { margin-top:22rem; }
  .mt-25 { margin-top:25rem; }
  .mt-30 { margin-top:30rem; }
  .mt-35 { margin-top:35rem; }
  .mt-40 { margin-top:40rem; }

  .mb-0 { margin-bottom:0rem; }
  .mb-1 { margin-bottom:1rem; }
  .mb-2 { margin-bottom:2rem; }
  .mb-4 { margin-bottom:4rem; }
  .mb-6 { margin-bottom:6rem; }
  .mb-8 { margin-bottom:8rem; }
  .mb-10 { margin-bottom:10rem; }
  .mb-12 { margin-bottom:12rem; }
  .mb-14 { margin-bottom:14rem; }
  .mb-15 { margin-bottom:15rem; }
  .mb-16 { margin-bottom:16rem; }
  .mb-18 { margin-bottom:18rem; }
  .mb-20 { margin-bottom:20rem; }

  .pt-1 { padding-top:1rem; }
  .pt-2 { padding-top:2rem; }
  .pt-4 { padding-top:4rem; }
  .pt-6 { padding-top:6rem; }
  .pt-8 { padding-top:8rem; }
  .pt-10 { padding-top:10rem; }
  .pt-12 { padding-top:12rem; }
  .pt-14 { padding-top:14rem; }
  .pt-16 { padding-top:16rem; }
  .pt-18 { padding-top:18rem; }

  .pb-1 { padding-bottom:1rem; }
  .pb-2 { padding-bottom:2rem; }
  .pb-4 { padding-bottom:4rem; }
  .pb-6 { padding-bottom:6rem; }
  .pb-8 { padding-bottom:8rem; }
  .pb-10 { padding-bottom:10rem; }
  .pb-12 { padding-bottom:12rem; }
  .pb-14 { padding-bottom:14rem; }
  .pb-16 { padding-bottom:16rem; }
  .pb-18 { padding-bottom:18rem; }

  .g-only, .m-only, .l-only, .t-only, .s-only { display: none; }
  .g-center { display: block; margin-right: auto; margin-left: auto; }
   { display: none; }

    /* Smaller desktop only rules (Smaller than desktop 1200px) */
    @media (max-width: 1200px) {

      .m-mb-0 { margin-bottom:0; }
      .m-mb-4  { margin-bottom: 4rem;}
      .m-mb-8  { margin-bottom: 8rem;}
      .m-mb-10  { margin-bottom: 10rem;}
      .m-mb-12  { margin-bottom: 12rem;}

      .m-pb-2 { padding-bottom: 2rem; }

      .m-mt-0 { margin-top:0; }
      .m-mt-1 { margin-top:1rem; }
      .m-mt-2 { margin-top:2rem; }
      .m-mt-4 { margin-top:4rem; }
      .m-mt-5 { margin-top:5rem; }
      .m-mt-6 { margin-top:6rem; }
      .m-mt-8 { margin-top:8rem; }
      .m-mt-10 { margin-top:10rem; }
      .m-mt-12 { margin-top: 12rem; }
      .m-mt-15 { margin-top: 15rem; }
      .m-mt-20 { margin-top: 20rem; }
      .m-mt-22 { margin-top: 22rem; }
      .m-mt-24 { margin-top: 24rem; }

      .m-only { display: block; }
      .m-hide { display: none; }
    }


    /* Tablet/midsized only rules (Smaller than desktop 750px) */
    @media (max-width: 900px) {
      .t-mt-0 { margin-top:0; }
      .t-mt-1 { margin-top:1rem; }
      .t-mt-2 { margin-top:2rem; }
      .t-mt-3 { margin-top:3rem; }
      .t-mt-4 { margin-top:4rem; }
      .t-mt-6 { margin-top:6rem; }
      .t-mt-8 { margin-top:8rem; }
      .t-mt-10 { margin-top:10rem; }
      .t-mt-15 { margin-top:15rem; }
      .t-mt-20 { margin-top:20rem; }

      .t-mb-4 { margin-bottom: 4rem; }
      .t-mb-6 { margin-bottom: 6rem; }
      .t-mb-8 { margin-bottom: 8rem; }

      .t-pt-0 { padding-top: 0rem; }

      .t-hide, .m-hide { display: none; }
      .t-only { display: block; }
    }

    /* Tablet/midsized only rules (Smaller than desktop 750px) */
    @media (max-width: 750px) {
      .s-mt-10 { margin-top:10rem; }

      .s-hide, .t-hide, .m-hide { display: none; }
      .s-only { display: block; }
    }

    /* Mobile only rules (Smaller than desktop 550px) */
    @media (max-width: 550px) {
      .g-float-none {float:none;}

      .g-pl-0 { padding-left: 0; }
      .g-pr-0 { padding-right: 0; }
      .g-pt-0 { padding-top: 0; }
      .g-pb-0 { padding-bottom: 0; }

      .g-mt-0 { margin-top: 0; }
      .g-mt-1 { margin-top: 1rem; }
      .g-mt-2 { margin-top: 2rem; }
      .g-mt-4 { margin-top: 4rem; }
      .g-mt-6 { margin-top: 6rem; }
      .g-mt-8 { margin-top: 8rem; }
      .g-mt-10 { margin-top: 10rem; }
      .g-mt-12 { margin-top: 12rem; }
      .g-mt-15 { margin-top: 15rem; }
      .g-mt-20 { margin-top: 20rem; }
      
      .g-mb-0 { margin-bottom: 0; }
      .g-mb-2 { margin-bottom:2rem; }
      .g-mb-3 { margin-bottom:3rem; }
      .g-mb-4 { margin-bottom:4rem; }
      .g-mb-10 { margin-bottom:10rem; }
      .g-mb-12 { margin-bottom:12rem; }
      .g-mb-14 { margin-bottom:14rem; }

      .g-pb-2 { padding-bottom: 2rem; }
      .g-pt-4 { padding-top: 4rem; }

      .g-hide, .m-hide, .t-hide, .s-hide { display: none; }
      .g-only { display: block; }
    }
    /* Largest screens only rules (Larger than desktop 1200px) */
    @media (min-width: 1200px) {
      .l-only { display: block; }
      .l-hide { display: none; }
    }

/* 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.
*/


/* 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) {}