f0ck-fe-old/test5/style.css

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

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 {
  font-size: 2em;
}
section {
  max-width: 1600px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
section article {
  display: inline-block;
  *display: inline;
  zoom: 1;
  padding: 5px;
  vertical-align: top;
  width: 50%;
}
section article:nth-child(2n+1) .info {
  left: 0;
}
section article:nth-child(2n+2) .info {
  left: -100%;
}
section img {
  width: 100%;
  height: auto;
}
section .info {
  width: 180%;
  padding: 2em 0;
  margin: 0 10%;
  position: relative;
  float: left;
  opacity: 0;
  height: 0;
  font-size: 0;
}
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;
  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;
}
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;
}
footer {
  min-height: 400px;
  padding: 4em 1em;
  background: black;
  font-size: 1em;
  word-break: break-word;
}
footer .credits {
  width: 250px;
}
footer .credits li {
  display: inline-block;
  width: 32%;
}
footer a {
  color: white;
}
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) {
  section article {
    width: 33.333333%;
  }
  section article .info {
    width: 280%;
  }
  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) {
  section article .info {
    width: 380%;
  }
  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) {
  section article .info {
    width: 480%;
  }
  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) {
  section article .info {
    width: 580%;
  }
  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) {
  section article .info {
    width: 680%;
  }
  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) {
  section article .info {
    width: 780%;
  }
  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%;
  }
}