html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

@font-face {
    font-family: 'Alef';
    src: url('../AlefWebfont/Alef-Bold.eot');
    src: url('../AlefWebfont/Alef-Bold.eot?#iefix') format('embedded-opentype'),
         url('../AlefWebfont/Alef-Bold.woff') format('woff'),
         url('../AlefWebfont/Alef-Bold.ttf') format('truetype'),
         url('../AlefWebfont/Alef-Bold.svg#alefbold') format('svg');
    font-weight: bold;
    font-style: normal;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

body {
  background: #333;
  color: white;
  font-family: "Noto Sans", Tahoma, sans-serif;
}

h1,
.purchase {
  font-family: "Tauri", sans-serif;
}

h1 {
  font-size: 2em;
}

section {
  max-width: 1600px; /* the maximum width of product images is 200 and the maximum number of rows will be 8, so the greatest our product wall can stretch to is 1600px = 200px * 8 */
  margin: 0 auto; /* should the browser window be wider than 3200px, center it */
  overflow: hidden; /* hide any content that may overflow (the edges of the scaled product images for example) */
  position: relative; /* fixes a float bug in IE7 - without it, the .info element would cause a horizontal overflow */
}

section article {
  display: inline-block; /* allow products to sit aside each other (inline) but with height and width properties (block) */
  *display: inline;
  zoom: 1;
  vertical-align: top;
  width: 50%;
  margin-bottom: -5px;
}

section article:nth-child(2n+1) .info { /* the first .info of every two */
  left: 0;
}

section article:nth-child(2n+2) .info { /* the second .info of every two */
  left: -100%;
}

section img {
  width: 110%;
  height: auto;
}

section .info {
  width: 180%;
  padding: 2em 0;
  margin: 0 10%;
  position: relative;
  float: left;
  opacity: 0;
  height: 0;
  font-size: 0; /* this will cause the .info element to have no height (so it doesn't affect layout when not visible) */
}

section .info h1 {
  margin-bottom: .5em;
}

section .info p,
section .info ol {
  margin-bottom: 2em;
  line-height: 140%;
}

section .info ol {
    margin-left: 20px;
}

section .info li {
  list-style: decimal;
  line-height: 140%;
}

section .info .purchase {
  display: block;
  margin-top: .4em;
  padding: .4em;
  background: #006699;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  font-size: 1.4em;
  -webkit-transition: 0.5s background-color;
  -moz-transition: 0.5s background-color;
  -ms-transition: 0.5s background-color;
  -o-transition: 0.5s background-color;
  transition: 0.5s background-color;
}

section .info .purchase:hover {
  background: #0066CC;
}

section article:target .info {
  height: auto; /* allow the element to grow to whatever height is required to contain the conent */
  font-size: 100%;
  opacity: 1;
  -webkit-transition: .5s .5s opacity;
  -moz-transition: .5s .5s opacity;
  -ms-transition: .5s .5s opacity;
  -o-transition: .5s .5s opacity;
  transition: .5s .5s opacity; /* animate from opacity: 0 to opacity: 1 over .5 seconds with a .5 second delay */
}

section article:target img {
  -webkit-box-shadow: 0 8px 3px -5px rgba(0,0,0,.5);
  -moz-box-shadow: 0 8px 3px -5px rgba(0,0,0,.5);
  box-shadow: 0 8px 3px -5px rgba(0,0,0,.5);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-transition: .5s;
  -moz-transition: .5s;
  -ms-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
}

.band {
  min-height: 10px;
  /* there needs to be some space beneath the product wall else the bottom row of products won't line up with the top of the browser window when clicked */
  padding: 1em 1em;
  background: black;
  font-size: 1em;
  word-break: break-word;
  background: #006699;
}
.band a  {
	color:#fff;
	text-decoration: none;
}
.band a:hover {
	color:#fff;
	text-decoration: underline;
}
footer {
  min-height: 400px;
  /* there needs to be some space beneath the product wall else the bottom row of products won't line up with the top of the browser window when clicked */
  padding: 4em 1em;
  background: black;
  font-size: 1em;
  word-break: break-word;
  background: #006699;
}
footer .credits {
  width: 250px;
  
}
footer .credits li {
  display: inline-block;
  width: 32%;
}
footer a {
  color: white;
}
footer section{
	position: relative;
}
footer h2 {
  font-size: 1.6em;
}
footer h1,
footer h2,
footer p,
footer ul {
  line-height: 140%;
  margin-bottom: 1em;
}


@media only screen and (min-width: 400px) { /* at least 400px wide (3 products per row) */
  section article {
    width: 33.333333%;
  }

  section article .info {
    width: 280%;  /* span over three columns (300%) but save 20% for a 10% margin on both sides */
  }

    section article .purchase {
      display: inline-block;
      *display: inline;
      zoom: 1;
      float: left;
      clear: both;
      width: auto;
      margin-top: 2em 0 0 0;
    }

    section article .description {
      float: left;
      width: 50%;
    }

    section article ol {
      float: right;
      width: 30%;
    }

  section article:nth-child(3n+1) .info {
    left: 0;
  }

  section article:nth-child(3n+2) .info {
    left: -100%;
  }

  section article:nth-child(3n+3) .info {
    left: -200%;
  }
}


@media only screen and (min-width: 600px) { /* at least 600px wide (4 products per row) */
  section article .info {
    width: 380%;  /* span over four columns (400%) but save 20% for a 10% margin on both sides */
  }

  section article {
    width: 25%;
  }

  section article:nth-child(4n+1) .info {
    left: 0;
  }

  section article:nth-child(4n+2) .info {
    left: -100%;
  }

  section article:nth-child(4n+3) .info {
    left: -200%;
  }

  section article:nth-child(4n+4) .info {
    left: -300%;
  }
}


@media only screen and (min-width: 800px) { /* at least 800px wide (5 products per row) */
  section article .info {
    width: 480%;  /* span over five columns (500%) but save 20% for a 10% margin on both sides */
  }

  section article {
    width: 20%;
  }

  section article:nth-child(5n+1) .info {
    left: 0;
  }

  section article:nth-child(5n+2) .info {
    left: -100%;
  }

  section article:nth-child(5n+3) .info {
    left: -200%;
  }

  section article:nth-child(5n+4) .info {
    left: -300%;
  }

  section article:nth-child(5n+5) .info {
    left: -400%;
  }
}


@media only screen and (min-width: 1000px) { /* at least 1000px wide (6 products per row) */
  section article .info {
    width: 580%;  /* span over six columns (600%) but save 20% for a 10% margin on both sides */
  }

  section article {
    width: 16.6666667%;
  }

  section article:nth-child(6n+1) .info {
    left: 0;
  }

  section article:nth-child(6n+2) .info {
    left: -100%;
  }

  section article:nth-child(6n+3) .info {
    left: -200%;
  }

  section article:nth-child(6n+4) .info {
    left: -300%;
  }

  section article:nth-child(6n+5) .info {
    left: -400%;
  }

  section article:nth-child(6n+6) .info {
    left: -500%;
  }
}

@media only screen and (min-width: 1200px) { /* at least 1200px wide (7 products per row) */
  section article .info {
    width: 680%;  /* span over seven columns (700%) but save 20% for a 10% margin on both sides */
  }

  section article {
    width: 14.2857143%;
  }

  section article:nth-child(7n+1) .info {
    left: 0;
  }

  section article:nth-child(7n+2) .info {
    left: -100%;
  }

  section article:nth-child(7n+3) .info {
    left: -200%;
  }

  section article:nth-child(7n+4) .info {
    left: -300%;
  }

  section article:nth-child(7n+5) .info {
    left: -400%;
  }

  section article:nth-child(7n+6) .info {
    left: -500%;
  }

  section article:nth-child(7n+7) .info {
    left: -600%;
  }
}

@media only screen and (min-width: 1400px) { /* at least 1400px wide (8 products per row) */
  section article .info {
    width: 780%;  /* span over eight columns (800%) but save 20% for a 10% margin on both sides */
  }

  section article {
    width: 12.5%;
  }

  section article:nth-child(8n+1) .info {
    left: 0;
  }

  section article:nth-child(8n+2) .info {
    left: -100%;
  }

  section article:nth-child(8n+3) .info {
    left: -200%;
  }

  section article:nth-child(8n+4) .info {
    left: -300%;
  }

  section article:nth-child(8n+5) .info {
    left: -400%;
  }

  section article:nth-child(8n+6) .info {
    left: -500%;
  }

  section article:nth-child(8n+7) .info {
    left: -600%;
  }

  section article:nth-child(8n+8) .info {
    left: -700%;
  }
}