/* css css Garden submission 214 - 'Verde Moderna', by Dave Shea, http://www.mezzoblue.com/ */
/* css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/  */
/* All associated graphics copyright 2013, Dave Shea */



@import url(http://fonts.googleapis.com/css?family=Julius+Sans+One|Libre+Baskerville:400,400italic);

/* base CSS */
* {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}

html, body {
  padding: 0;
  margin: 0;
}
body {
  color: #325050;
  background: #fff;
  font-family: 'Libre Baskerville', sans-serif;
  font-size: 70%;
}

a {
  color: #0d8ba1;
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
  text-decoration: none;
}
  a:visited {
    color: #1a5952;
  }
  a:hover, a:focus {
    color: #0599c2;
    text-decoration: underline;
  }
abbr {
  border: none;
  text-transform: uppercase;
  font-size: 0.9em;
  letter-spacing: 0.01em;
}
header {
  height: 230px;
  padding: 20px 0 70px 0;

  background: #2d6360 50% 0 url(bkg1.jpg) no-repeat; /* old IE fallback */

  background-attachment: fixed, fixed, fixed, scroll;
  background-image: url(contours.png), url(noise.png), url(gridlines.png), url(bkg1.jpg);
  background-position: 0 0, 0 0, -5px -25px, 0 50%;
  background-repeat: repeat, repeat, repeat, no-repeat;
  background-size: auto, auto, auto, cover;
  text-align: center;
}


h1, h2 {
  padding: 0 10%;
  margin: 0;
  color: #fff;
  font-weight: normal;
}
h1 {
  padding-top: 0;
  padding-bottom: 5px;
  border-bottom: none;
  font-family: 'Julius Sans One', sans-serif;
  font-size: 3.2em;
  text-transform: uppercase;
}
h1::before {
  display: inline-block;
  position: relative;
  top: 20px;
  content: "";
  width: 80px;
  height: 80px;
  margin: -20px 20px 0 0;
  background: url(enso.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  opacity: 0.6;
}
h2 {
  display: block;
  padding-top: 5px;
  padding-bottom: 30px;
  border-top: none;
  color: rgba(255,255,255,0.6);
  font-size: 1.6em;
  font-style: italic;
}
h2::before {
  content: " ";
  padding: 50px;
}
h3 {
  margin: 2em 0 0 0;
  color: #2e484c;
  font-family: 'Julius Sans One', sans-serif;
  font-size: 1.8em;
  font-weight: normal;
  text-transform: uppercase;
}
p {
  margin: 0.75em 0;
  line-height: 2;
}


.page-wrapper {
  position: relative;
}
.summary, .preamble {
  width: 80%;
  margin: 0 auto;
}
.supporting h3, .supporting p {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.summary {
  padding-top: 2em;
}


/* intro block links -- download HTML/CSS */
.intro a, .intro a:visited {
  position: relative;
  display: inline-block;
  padding: 1px 10px 1px 32px;
  margin: -1px -10px -1px -6px;
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;

  color: #809b7e;
  font-family: 'Julius Sans One', sans-serif;
  text-transform: uppercase;
}
.intro a:hover, .intro a:focus {
  z-index: 2;
  color: #fff;
  background: #3d8a9f;
  text-decoration: none;
}

.intro a::before {
  display: inline-block;
  position: absolute;
  top: 6px;
  left: 8px;
  padding: 2px;
  color: #a9b995;
  background: #d9e1cd;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -o-border-radius: 2px;

  content: "D";
  font-size: 16px;
  text-indent: 0;


  /* icomoon.io defaults */
  font-family: 'logo';
  speak: none;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;

  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
}
  .intro a:hover::before {
    color: #fff;
    background: #357d93;
  }


/* coloured cutoff */
div.participation, div.benefits {
  background-attachment: scroll, scroll, fixed;
  background-color: rgba(138,188,159,0.5);
  background-image: url(contours-opaque.png), url(gridlines-opaque.png), url(bkg3.png);
  background-repeat: repeat, repeat, no-repeat;
  background-size: auto, auto, cover;
}
/* extra padding at the cutoffs */
div.participation {
  padding: 3em 0;
  margin-top: 3em;
}
div.benefits {
  padding-bottom: 3em;
  margin-bottom: 3em;
}
div.participation h3, div.benefits h3 {
  margin-top: 0;
}
div.participation p, div.benefits p {
  margin-bottom: 0;
}


/* sidebar base styles */
.sidebar {
  background: #edf4f0;
}
.sidebar h3 {
  display: none;
}
.sidebar a {
  color: #607476;
  text-decoration: none;
}
  .sidebar a:hover, .sidebar a:focus {
    color: #49968e;
  }
.sidebar ul {
  padding: 0;
  margin: 0;
  list-style: none;
  overflow: hidden;
}


/* shared sidebar styling */
.design-selection ul, .css-resources ul {
  margin: 0;
}
.design-selection li, .css-resources li {
  float: left;
  width: 50%;
  padding: 1.5em 10%;
  border-top: solid 1px #d9e3dc;
  color: #c0cac3;
  font-style: italic;
}
  .design-selection li:hover, .design-selection li:focus {
    background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,0.5)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%); /* IE10+ */
    background: linear-gradient(to right,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%); /* W3C */
  }
.design-selection li:nth-child(2n+1), .css-resources li:nth-child(2n+1) {
  clear: left;
}
.design-selection .design-name, .css-resources a, li.viewall a {
  display: block;
  margin-bottom: 0.25em;
  font-family: 'Julius Sans One', sans-serif;
  font-size: 1.2em;
  font-style: normal;
  text-transform: uppercase;
}


/* select a design */
.design-selection h3 {
  display: none;
}
.design-selection .designer-name {
  color: #616857;
  font-size: 0.9em;
  font-style: normal;
}



/* archives navigation */
.design-archives {
  position: absolute;
  top: 160px;
  right: 0;
  width: 100%;
  height: 70px;
  background: rgba(255,255,255,0.2);
}
.design-archives h3 {
  display: none;
}
.design-archives ul {
  margin: 0;
}
.design-archives li {
  position: absolute;
  top: 0;
  padding: 0;
  margin: 0;
  border: none;
  list-style: none;
}
.design-archives li.viewall {
  top: 0;
  left: 0;
  width: 100%;
  padding: 0 71px;
  line-height: 50px;
}
.previous, .next {
  left: 0;
  z-index: 3;
}
.next {
  left: auto;
  right: 0;
}
.design-archives a, .design-archives a:visited {
  color: rgba(255, 255, 255, 0.65);
}
.design-archives a:hover, .design-archives a:focus {
  color: #fff;
}
.design-archives .previous a, .design-archives .next a {
  display: block;
  overflow: hidden;
  width: 70px;
  height: 70px;
  text-indent: 100%;
  text-decoration: none;
  white-space: nowrap;
}
.design-archives .viewall a {
  z-index: 2;
  width: 100%;
  min-height: 70px;
  padding: 12px 0 0 0;
  text-align: center;
}
.design-archives a::before {
  position: absolute;
  left: 0;
  width: 70px;
  height: 70px;
  text-align: center;
  text-indent: 0;
  font-size: 44px;

  /* icomoon.io defaults */
  font-family: 'logo';
  speak: none;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 70px;
  -webkit-font-smoothing: antialiased;
}
.design-archives .viewall a:hover, .design-archives .viewall a:focus, .design-archives .viewall a:active,
.design-archives a:hover::before, .design-archives a:focus::before, .design-archives a:active::before {
  background-color: rgba(255,255,255,0.25);
  box-shadow: inset 0 0 10px rgba(255,255,255,0.1);
}
.design-archives .previous a::before {
  content: "<";
}
.design-archives .next a::before {
  content: ">";
}



/* resources */
.css-resources {
  overflow: hidden;
  background-color: rgba(138,188,159,0.5);
  background-image: url(bkg3.png);
}
.css-resources li {
  border-top: solid 1px #a0b9ad;
  font-style: normal;
}
.css-resources li:last-child {
  float: none;
  width: auto;
  border-bottom: solid 1px #a0b9ad;
}


/* busting out the credits block */
.requirements p:nth-child(5) {
  padding-bottom: 2em;
}
.supporting .requirements {
  float: none;
  clear: both;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.supporting .requirements a {
  text-decoration: none;
}
  .supporting .requirements a:hover, .supporting .requirements a:focus {
    text-decoration: underline;
  }
.supporting .requirements h3 {
  padding-top: 0;
}
.requirements p:last-child {
  width: auto;
  padding: 1em 12%;
  margin: 0;
  color: rgba(255, 255, 255, 0.4);
  background: #3e5d67;

  background-attachment: fixed, fixed, fixed, scroll;
  background-image: url(contours.png), url(gridlines.png), url(noise.png), url(bkg2.jpg);
  background-position: 0 0, -5px -25px, 0 0, 0 50%;
  background-repeat: repeat, repeat, repeat, no-repeat;
  background-size: auto, auto, auto, cover;

  font-size: 2em;
  font-style: italic;
  text-align: center;
}
.requirements p:last-child a {
  color: rgba(255, 255, 255, 0.7);
  font-style: normal;
}



/* main footer */
footer {
  clear: both;
  padding: 3em 10%;
  color: #fff;
  background: #134347;
  text-align: center;
}
footer a {
  display: inline-block;
  overflow: hidden;
  width: 40px;
  height: 40px;
  padding: 40px 0 0 0;
  margin: 0 0.5em;
  position: relative;
  color: rgba(255, 255, 255, 0.5);
  -webkit-transition: color 0.25s ease-out, box-shadow 0.25s ease-out;
  -moz-transition: color 0.25s ease-out, box-shadow 0.25s ease-out;
  transition: color 0.25s ease-out, box-shadow 0.25s ease-out;
}
footer a:hover, footer a:focus {
  color: rgba(255, 255, 255, 0.3);
  text-decoration: none;
}
footer a:visited {
  color: rgba(255, 255, 255, 0.2);
}
footer a::before {
  display: block;
  position: absolute;
  top: 3px;
  left: 0;
  overflow: visible;
  font-size: 36px;
  text-indent: 0;

  /* icomoon.io defaults */
  font-family: 'logo';
  speak: none;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
  footer a.css-validate-html::before {content: "5";}
  footer a.css-validate-html:hover::before, footer a.css-validate-html:focus::before {content: "%";}
  footer a.css-validate-css::before {content: "3";}
  footer a.css-validate-css:hover::before, footer a.css-validate-css:focus::before {content: "#";}
  footer a.css-license::before {content: "c";}
  footer a.css-license:hover::before, footer a.css-license:focus::before {content: "C";}
  footer a.css-accessibility::before {content: "a";}
  footer a.css-accessibility:hover::before, footer a.css-accessibility:focus::before {content: "A";}
  footer a.css-github::before {content: "g";}
  footer a.css-github:hover::before, footer a.css-github:focus::before {content: "G";}



/* low-res CSS */
@media only screen and (max-width: 600px) {

  /* these download links make approximately zero sense
     on a phone without a user-accessible file system. */
  .summary p:last-child {
    display: none;
  }

  /* type adjustments */
  h1 {
    margin-top: 30px;
    font-size: 2.5em;
  }
  h1::before {
    width: 50px;
    height: 50px;
  }
  h2::before {
    padding: 25px;
  }

  .requirements p:last-child {
    padding: 1em 6%;
  }

}


@media only screen and (max-width: 500px) {

  header {
    height: 250px;
    padding-top: 0;
  }
  h1 {
    margin: 0;
  }
  h1::before {
    display: block;
    left: 50%;
    width: 50px;
    height: 50px;
    margin: 0 0 0 -25px;
    padding: 0 0 35px 0;
  }
  h2::before {
    padding: 0;
  }

  .design-archives {
    top: 180px;
  }
  .design-selection li, .css-resources li {
    padding: 1em 5%;
  }

  footer a {
    margin: 0 0.5em;
  }

}

@media only screen and (max-width: 320px) {

    /* adjusting the site header type size */
    h1 {
        font-size: 2em;
    }
    h2 {
        font-size: 1.3em;
    }

    /* linearizing the design list on small screens */
    .design-selection li, .css-resources li {
        float: none;
        width: 100%;
    }

    /* adjusting footer type, icons */
    .requirements p:last-child {
        font-size: 1.4em;
    }
    footer {
        padding: 2em 5%;
    }
    footer a {
        width: 35px;
        height: 35px;
        padding: 35px 0 0 0;
        margin: 0 0.5em;
    }
    footer a::before {
        font-size: 32px;
    }

}


/* mid-res CSS */
@media only screen and (max-width: 1132px) {
  header {
    border-top: solid 10px rgba(19, 67, 71, 0.9);
  }
  p, li {
    font-size: 1.2em;
  }
}

@media only screen and (min-width: 500px) and (max-width: 1150px) {

  .requirements p:last-child {
    padding-bottom: 2em;
    padding-top: 2em;
  }

  /* page footer */
  footer {
    padding: 3em 0;
  }
  footer a {
    width: 52px;
    height: 52px;
    padding: 52px 0 0 0;
    margin: 0 2em;
  }
  footer a::before {
    font-size: 48px;
  }
}


/* high-res CSS */
@media only screen and (min-width: 1132px) {
  body {
    background: #ffffff;
    background: -moz-linear-gradient(left,  #ffffff 0%, #ffffff 66%, #e5ede8 66%, #e5ede8 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(66%,#ffffff), color-stop(66%,#e5ede8), color-stop(100%,#e5ede8));
    background: -webkit-linear-gradient(left,  #ffffff 0%,#ffffff 66%,#e5ede8 66%,#e5ede8 100%);
    background: -o-linear-gradient(left,  #ffffff 0%,#ffffff 66%,#e5ede8 66%,#e5ede8 100%);
    background: -ms-linear-gradient(left,  #ffffff 0%,#ffffff 66%,#e5ede8 66%,#e5ede8 100%);
    background: linear-gradient(to right,  #ffffff 0%,#ffffff 66%,#e5ede8 66%,#e5ede8 100%);
    font-size: 100%;
  }
  header {
    width: 100%;
    height: 310px;
    padding: 0 10%;
    border-top: solid 12px rgba(19, 67, 71, 0.8);
    box-shadow: inset 0 0 100px rgba(255, 255, 255, 0.3);
    vertical-align: middle;
    text-align: left;
  }

  header::before, header::after {
    display: block;
    content: " ";
    position: absolute;
    z-index: 3;
    top: 9px;
    left: 0;
    width: 100%;
    height: 7px;
    background: rgba(0, 39, 43, 0.2);
  }
  header::after {
    top: 306px;
    height: 4px;
    background: rgba(0, 39, 43, 0.075);
  }
  h1 {
    display: inline-block;
    position: relative;
    margin: 15px 0 0 0;
    padding: 60px 0 5px 0;
  }
  h1::before {
    display: inline-block;
    position: relative;
    top: 65px;
    content: "";
    width: 125px;
    height: 125px;
    margin: -65px 40px 0 0;
    background: url(enso.svg);
    background-size: 100%;
    opacity: 0.6;

    -webkit-animation: koan 36000s infinite alternate;
    -moz-animation: koan 36000s infinite alternate;
    animation: koan 36000s infinite alternate;
  }
  h2 {
    display: block;
    margin: 0;
    padding: 5px 0 60px 70px;
  }
  p {
    font-size: 1em;
  }

  /* main layout blocks */
  nav, .supporting {
    display: inline;
  }
  .summary, .preamble, .supporting div, .requirements h3, .requirements p {
    float: left;
    clear: left;
    width: 66%;
    padding: 1em 5% 1em 10%;
  }
  .explanation h3, .explanation p,
  .participation h3, .participation p,
  .benefits h3, .benefits p {
    width: 100%;
  }
  .summary {
    padding-top: 3.25em;
  }
  .requirements h3, .requirements p {
    margin: 0;
    padding-bottom: 0;
  }


  /* coloured cutoff */
  div.participation, div.benefits {
    width: 100%;
    padding-left: 10%;
    padding-right: 38%;
    margin: 0;
  }
  /* extra padding at the cutoffs */
  div.participation, div.requirements {
    padding-top: 4em;
  }
  div.explanation, div.benefits {
    padding-bottom: 4em;
  }
  .requirements p:nth-child(5) {
    padding-bottom: 4em;
  }


  .intro h3, .supporting h3 {
    margin-top: 0;
  }
  .intro p:last-child, .supporting p:last-child {
    margin-bottom: 0;
  }


  .requirements p:last-child {
    padding-bottom: 3em;
    padding-top: 3em;
    box-shadow: inset 0 0 100px rgba(255, 255, 255, 0.3);
  }


  /* sidebar styling */
  .design-selection, .css-resources {
    position: absolute;
    top: 360px;
    right: 0;
    width: 33.3%;
    padding: 0 0 20px 0;
    margin: 0;
    overflow: visible;
    background: transparent;
  }
  .sidebar li {
    float: none;
    width: auto;
    padding-left: 0;
    padding-right: 0;
    margin: 0 29.4% 0 14.7%; /* 0 10% 0 5% of total width */
  }


  /* select a design */
  .design-selection li:first-child {
    border-top: 0;
  }
  .design-selection li:hover, .design-selection li:focus {
    background: none;
  }

  /* archives navigation */
  .design-archives {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 310px;

    background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,0) 66%, rgba(0,0,0,0.2) 66%, rgba(33,84,95,0.3) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(66%,rgba(255,255,255,0)), color-stop(66%,rgba(33,84,95,0.3)), color-stop(100%,rgba(33,84,95,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 66%,rgba(33,84,95,0.3) 66%,rgba(33,84,95,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 66%,rgba(33,84,95,0.3) 66%,rgba(33,84,95,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 66%,rgba(33,84,95,0.3) 66%,rgba(33,84,95,0) 100%); /* IE10+ */
    background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 66%,rgba(33,84,95,0.3) 66%,rgba(33,84,95,0) 100%); /* W3C */
  }
  .design-archives nav {
    display: block;
    position: absolute;
    right: 1%;
    top: 120px;
    width: 32%;
  }
  .design-archives li {
    margin: 0;
  }
  .design-archives .viewall a, .design-archives a::before {
    background: rgba(255,255,255,0.1);
    text-decoration: none;
  }

  .design-archives .viewall a:hover, .design-archives a:hover::before {
    background-color: rgba(255,255,255,0.2);
  }


  /* resources navigation */
  .css-resources {
    position: absolute;
    top: 1310px;
    right: 0;
    width: 34%;
    background: transparent;
  }
  .css-resources h3 {
    display: none;
  }
  .css-resources ul {
    width: 55.9%;
    margin: 0 29.4% 0 14.7%;
  }
  .css-resources li {
    padding: 1.5em 0 1.25em 0;
    margin: 0;
  }

}


@media only screen and (min-width: 1150px) {
  /* page footer */
  footer a {
    width: 76px;
    height: 76px;
    padding: 76px 0 0 0;
    margin: 0 3em;
  }
  footer a::before {
    font-size: 72px;
  }
}

/*
  Okay, look, I feel rather awful about this. But due to source order it
  seems like the only way to pull off the separated sidebar. Perhaps
  flexbox is the way forward here, once the syntax settles down a bit.
*/
@media only screen and (min-width: 1120px) {.css-resources {top: 1490px;}}
@media only screen and (min-width: 1240px) {.css-resources {top: 1460px;}}
@media only screen and (min-width: 1260px) {.css-resources {top: 1420px;}}
@media only screen and (min-width: 1320px) {.css-resources {top: 1390px;}}
@media only screen and (min-width: 1370px) {.css-resources {top: 1360px;}}
@media only screen and (min-width: 1520px) {.css-resources {top: 1330px;}}
@media only screen and (min-width: 1812px) {.css-resources {top: 1300px;}}
@media only screen and (min-width: 1848px) {.css-resources {top: 1270px;}}
@media only screen and (min-width: 2015px) {.css-resources {top: 1240px;}}
@media only screen and (min-width: 2115px) {.css-resources {top: 1210px;}}
@media only screen and (min-width: 2400px) {/* you're kidding, right? */}


@-webkit-keyframes koan {
    from {
      -webkit-transform: scale(1);
    opacity: 1;
    }
    to {
      -webkit-transform: scale(3);
    opacity: 0;
    }
}
@-moz-keyframes koan {
    from {
      -moz-transform: scale(1);
    opacity: 1;
    }
    to {
      -moz-transform: scale(3);
    opacity: 0;
    }
}
@keyframes koan {
    from {
      transform: scale(1);
    opacity: 1;
    }
    to {
      transform: scale(3);
    opacity: 0;
    }
}

/* high-DPI adjustments */
@media
    (min--moz-device-pixel-ratio: 1.5),
    (-o-min-device-pixel-ratio: 3 / 2),
    (-webkit-min-device-pixel-ratio: 1.5),
    (min-device-pixel-ratio: 1.5),
    (min-resolution: 1.5dppx) {

    header {
        background-image: url(contours@2x.png), url(noise.png), url(gridlines.png), url(bkg1.jpg);
        background-size: 50% auto, auto, auto, cover;
    }

    .requirements p:last-child {
        background-image: url(contours@2x.png), url(gridlines.png), url(noise.png), url(bkg2.jpg);
        background-size: 50% auto, auto, auto, cover;
    }

    /*
        This shouldn't be necessary, but it is. Due to differences in how
        Chrome calculates gradients and % widths / padding, the archives
        spill out of the visual container at some screen sizes.
    */
    .design-archives nav {
        right: 3%;
        width: 29%;
    }
}

/* icon fonts */
@font-face {
	font-family: 'logo';
	src:url('logo.eot');
	src:url('logo.eot?#iefix') format('embedded-opentype'),
		url('logo.woff') format('woff'),
		url('logo.ttf') format('truetype'),
		url('logo.svg#logo') format('svg');
	font-weight: normal;
	font-style: normal;
}                                                                                                               /* 1000 lines?! */