@import url("../webfonts/disco/stylesheet.css");
body,
div,
dl, dt, dd,
ul, ol, li,
h1, h2, h3, h4, h5, h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th, td {
  margin: 0;
  padding: 0; }

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

fieldset, img {
  border: 0; }

address,
caption,
cite,
code,
dfn,
em, strong,
th,
var {
  font-style: normal;
  font-weight: normal; }

ol, ul {
  list-style: none; }

caption, th {
  text-align: left; }

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: normal; }

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

abbr, acronym {
  border: 0; }

html {
  max-height: 100%;
  font-family: disco;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  font-size: 70%; }

/* index */
#toppage {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  background-attachment: scroll;
  background-image: url(../images/dot_5x5_white.png);
  background-repeat: repeat;
  background-position: left top; }
  #toppage nav {
    margin: 10px 0 0 10px; }
    #toppage nav a {
      background-color: transparent;
      color: #fff;
      font-size: 2em;
      font-weight: 400;
      text-decoration: none;
      padding: 5px 10px 5px 5px; }
    #toppage nav a, #toppage nav a:before, #toppage nav a:after {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      -webkit-transition: all .10s;
      transition: all .10s; }
    #toppage nav a:hover {
      background-color: rgba(255, 255, 255, 0.4); }
  #toppage header {
    position: fixed;
    z-index: 100;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 5px;
    border-bottom: 1px solid #FFF;
    background: rgba(0, 0, 0, 0.4); }
  #toppage h1 {
    color: #fff;
    font-size: 2em;
    font-style: normal;
    font-weight: 400;
    max-width: 1050px; }
  #toppage ul li {
    margin: 0 0 8px; }
  #toppage #wrapper {
    position: relative;
    max-width: 1000px;
    margin: 0 auto; }
  #toppage footer {
    width: 93%;
    margin: 5px auto;
    padding: 5px 0 0;
    font-size: 75%;
    font-family: "sans-serif";
    text-align: right;
    color: #fff;
    border-top: #FFFFFF 1px solid; }

@media screen and (min-width: 650px) {
  html {
    font-size: 100%; }

  #toppage #titlebox {
    padding: 300px 0 0; }

  #toppage h1 {
    font-size: 3em; } }
@media screen and (min-width: 900px) {
  html {
    font-size: 100%; }

  #toppage #titlebox {
    padding: 300px 0 0; }

  #toppage h1 {
    font-size: 4em; } }
#toppage footer a {
  color: #fff;
  text-decoration: none; }

/* muuri */
#wrapper {
  padding-top: 4.5em; }

.grid {
  position: relative;
  margin: 0 auto 0; }

.item {
  display: block;
  position: absolute;
  width: 31.333%;
  margin: 0.3% 0.6%;
  z-index: 1;
  color: #fff; }

.item2 {
  display: block;
  position: absolute;
  width: 63.866%;
  margin: 0.3% 0.6%;
  z-index: 1;
  color: #fff; }

.item.muuri-item-dragging {
  z-index: 3; }

.item.muuri-item-releasing {
  z-index: 2; }

.item.muuri-item-hidden {
  z-index: 0; }

.item-content {
  position: relative; }
  .item-content img {
    width: 100%;
    border-radius: 10px; }

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #333;
  text-transform: uppercase;
  color: #ddd;
  transition: opacity 0.6s linear 0.4s;
  z-index: 3; }

.images-loaded .loading {
  opacity: 0;
  z-index: 0; }

/* error page */
#err {
  font-family: disco; }
  #err h1 {
    margin: 0 0 0 10px;
    font-size: 32px; }
  #err h2 {
    width: 100%;
    text-align: right;
    font-size: 500px;
    color: #CCC;
    vertical-align: top; }
  #err #container {
    width: 100%; }
  #err #txtbox {
    width: 100%;
    margin: 50px 0 0;
    border-bottom: 1px solid #000; }

.err404 {
  background-image: url(../err/images/404.png);
  background-repeat: no-repeat;
  background-position: right bottom; }

.err403 {
  background-image: url(../err/images/403.png);
  background-repeat: no-repeat;
  background-position: right bottom; }

.err401 {
  background-image: url(../err/images/401.png);
  background-repeat: no-repeat;
  background-position: right bottom; }

.err500 {
  background-image: url(../err/images/500.png);
  background-repeat: no-repeat;
  background-position: right bottom; }

.err503 {
  background-image: url(../err/images/503.png);
  background-repeat: no-repeat;
  background-position: right bottom; }