/* GLOBALS */
/* ---------------------------------------------------------------- */
body {background: #BDD2E8; font-family: Ubuntu Mono, Open Sans;  color: #333; height: 100%; border-bottom: 9px solid #AEC126; padding: 0px 0 20px 0px;}
article {max-width: 800px; margin: 0px auto; clear: both; border-bottom: 4px solid #DAE9F7; overflow: auto;}
#wrapper article:last-of-type, #wrapper article:first-of-type {border-bottom: none;}

a {text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid #333;}
a, a:active, a:visited {color: #333;}
a:hover {color: #AEC126; border-bottom: 1px solid #AEC126;}

h2 {font-size: 36px;}
p {font-size: 18px; line-height: 24px;}
cite {font-size: 12px; font-weight: 300; float: right; font-style: normal; }


ul {list-style: none; margin: 0px; padding: 0px;}
li {max-width: 800px;}

.next-prev {margin: 20px 0px;}

.highlight {padding: 20px; background: #DAE9F7;}

::selection {background: #AEC126;}
::-moz-selection {background: #AEC126;}

.list li {margin: 12px 0px 6px 17px; line-height: 20px;}
.list {list-style: disc !important; max-width: 600px; padding-bottom: 20px;}


/* INTRO */
/* ---------------------------------------------------------------- */
.big-header {
  margin-top: 0;
  color: white;
  text-shadow: 5px 5px 0 #ffd217;
  font-size: 90px;
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 100px;
}
.nav-container { float: left; }
ul.top-nav {display: inline;}
.top-nav li {display: inline; margin: 8px;}
.top-nav li:first-child {margin-left: 0px;}
#intro {background-image: url('img/two.png'); background-repeat: no-repeat; height: 860px; max-width: 1440px; }
#intro h3 {font-weight: 300; display: block; clear: both;}
header {float: right; margin-top: 80px; margin-right: 70px; color: #fff; }
header a {text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid #fff;}
header a, header a:active, header a:visited {color: #fff;}
header a:hover {color: #AEC126; border-bottom: 1px solid #AEC126;}


/* WHAT */
/* ---------------------------------------------------------------- */
#what {top: 1000px;}
#what img {float: left; padding-right: 50px;}


/* EXAMPLES */
/* ---------------------------------------------------------------- */
#gallery {top: 2000px;}
#imgWrapper {padding: 20px 0px; overflow: auto;}
#imgWrapper img {border: 6px solid #DAE9F7; margin-bottom: 6px;}
#imgWrapper img:hover {border: 6px solid #AEC126; margin-bottom: 6px;}

#imgWrapper a {border: none; padding: 0px;}

.exampleItem {display: inline-block; position: relative; margin: 0px 18px 34px 0px;  }
.exampleItem a {display: block; }
.exampleItem cite {float: left; position: absolute;  }

/* MODULES */
/* ---------------------------------------------------------------- */
#modules ul {width: 400px; float: left; }
#modules h3, #how h3 {clear: both; background: #333; padding: 8px 10px; color: #BDD2E8; font-weight: 300; margin: 30px 0px;}

.itemTitle {font-size: 28px; font-weight: bold;}
.itemDesc {padding: 12px 0px 32px 0px; line-height: 24px;}
.item {background-repeat: no-repeat;padding-left: 180px; min-height: 160px; background-size: 150px;}
.essentials-image { float: left; width: 400px; }

/* FAN ART */
/* ---------------------------------------------------------------- */
#artWrapper img {width: 100%;}
#fanart {overflow: hidden;}

/* FOOTER */
/* ---------------------------------------------------------------- */
footer {font-size: 13px; color: #AEC126; line-height: 20px; max-width: 800px; margin: 0px auto; }
footer a, footer a:visited, footer a:active {color: #AEC126; font-weight: 700; border: none;}

@media (max-width : 900px) {
  header {margin-top: 20px;}
  header img {width: 100%;}
  #intro {padding-right: 20px;}
}

@media (max-width : 320px) {
  #intro {background-image: url('img/two.png'); background-repeat: no-repeat; height: 469px; max-width: auto; padding-right: 20px; background-size: 100%;
  background-position-y: 288px;}
  header {margin-top: 20px;}
  header img {width: 100%;}
  #what img {width: 230px; margin: auto 0px; float: inherit;}
  .top-nav li {line-height: 30px;}
  .list {width: 100%;}
  #artWrapper {margin-bottom: 30px;}
  p, ul, li, code {font-size: 15px;}
  h2 {font-size: 26px;}
  .item {padding-left: 0px; padding-top: 160px; min-height: auto;}
  #modules ul {width: inherit;}
}


/* voxeljs logo */


/* Bounce Animation */
@keyframes "bounce" {
  0%,20%,50%,80%,100% {
  -webkit-transform: translateY(0) rotateX(-15deg) rotateY(25deg);
  -moz-transform: translateY(0) rotateX(-15deg) rotateY(25deg);
  -o-transform: translateY(0) rotateX(-15deg) rotateY(25deg);
  -ms-transform: translateY(0) rotateX(-15deg) rotateY(25deg);
  transform: translateY(0) rotateX(-15deg) rotateY(25deg);
}
 40% {
    -webkit-transform: translateY(-30px) rotateX(-25deg) rotateY(25deg);
     -moz-transform: translateY(-30px) rotateX(-25deg) rotateY(25deg);
     -o-transform: translateY(-30px) rotateX(-25deg) rotateY(25deg);
     -ms-transform: translateY(-30px) rotateX(-25deg) rotateY(25deg);
     transform: translateY(-30px) rotateX(-25deg) rotateY(25deg);
 }
 60% {
    -webkit-transform: translateY(-15px) rotateX(-15deg) rotateY(25deg);
     -moz-transform: translateY(-15px) rotateX(-15deg) rotateY(25deg);
     -o-transform: translateY(-15px) rotateX(-15deg) rotateY(25deg);
     -ms-transform: translateY(-15px) rotateX(-15deg) rotateY(25deg);
     transform: translateY(-15px) rotateX(-15deg) rotateY(25deg);
 }

}

@-moz-keyframes bounce {
  0%,20%,50%,80%,100% {
  -moz-transform: translateY(0) rotateX(-15deg) rotateY(25deg);
  transform: translateY(0) rotateX(-15deg) rotateY(25deg);
}
 40% {
   -moz-transform: translateY(-30px) rotateX(-25deg) rotateY(25deg);
   transform: translateY(-30px) rotateX(-25deg) rotateY(25deg);
 }
 60% {
   -moz-transform: translateY(-15px) rotateX(-15deg) rotateY(25deg);
   transform: translateY(-15px) rotateX(-15deg) rotateY(25deg);
 }

}

@-webkit-keyframes "bounce" {
  0%,20%,50%,80%,100% {
  -webkit-transform: translateY(0) rotateX(-15deg) rotateY(25deg);
  transform: translateY(0) rotateX(-15deg) rotateY(25deg);
}
 40% {
   -webkit-transform: translateY(-30px) rotateX(-25deg) rotateY(25deg);
   transform: translateY(-30px) rotateX(-25deg) rotateY(25deg);
 }
 60% {
   -webkit-transform: translateY(-15px) rotateX(-15deg) rotateY(25deg);
   transform: translateY(-15px) rotateX(-15deg) rotateY(25deg);
 }

}

@-ms-keyframes "bounce" {
  0%,20%,50%,80%,100% {
  -ms-transform: translateY(0) rotateX(-15deg) rotateY(25deg);
  transform: translateY(0) rotateX(-15deg) rotateY(25deg);
}
 40% {
   -ms-transform: translateY(-30px) rotateX(-25deg) rotateY(25deg);
   transform: translateY(-30px) rotateX(-25deg) rotateY(25deg);
 }
 60% {
   -ms-transform: translateY(-15px) rotateX(-15deg) rotateY(25deg);
   transform: translateY(-15px) rotateX(-15deg) rotateY(25deg);
 }

}

@-o-keyframes "bounce" {
  0%,20%,50%,80%,100% {
  -o-transform: translateY(0) rotateX(-15deg) rotateY(25deg);
  transform: translateY(0) rotateX(-15deg) rotateY(25deg);
}
 40% {
   -o-transform: translateY(-30px) rotateX(-25deg) rotateY(25deg);
   transform: translateY(-30px) rotateX(-25deg) rotateY(25deg);
 }
 60% {
   -o-transform: translateY(-15px) rotateX(-15deg) rotateY(25deg);
   transform: translateY(-15px) rotateX(-15deg) rotateY(25deg);
 }

}

/* voxel.js logo */
.voxelogo {
  width: 200px;
  height: 200px;
  position: relative;
  margin: 0 0 80px 80px;
  perspective: 1000px;
  -webkit-perspective: 1000px;
  float: left;
}

#cube {
  width: 100%;
  height: 100%;
  position: absolute;

  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;

  -webkit-transition: -webkit-transform 1s;
  -webkit-transition: -webkit-transform 1s;
  -webkit-transition: -webkit-transform 1s;
  -webkit-transition: -webkit-transform 1s;
  transition: transform 1s;

  -webkit-animation: bounce 3s infinite;
  -moz-animation: bounce 3s infinite;
  -ms-animation: bounce 3s infinite;
  -o-animation: bounce 3s infinite;
  animation: bounce 3s infinite;
}

#cube li {
  display: block;
  position: absolute;
  width: 194px;
  height: 194px;
  border: 4px solid white;
  line-height: 280px;
  font-size: 80px;
  font-weight: bold;
  color: white;
  text-align: right;
  background-color: #BCD286;
}

#cube .front {
  -webkit-transform: translateZ(100px);
  -moz-transform: translateZ(100px);
  -o-transform: translateZ(100px);
  -ms-transform: translateZ(100px);
  transform: translateZ(100px);
}

#cube .back {
  -webkit-transform: rotateX(-180deg) translateZ(100px);
  -moz-transform: rotateX(-180deg) translateZ(100px);
  -o-transform: rotateX(-180deg) translateZ(100px);
  -ms-transform: rotateX(-180deg) translateZ(100px);
  transform: rotateX(-180deg) translateZ(100px);
}

#cube .right {
  -webkit-transform: rotateY(90deg) translateZ(100px);
  -moz-transform: rotateY(90deg) translateZ(100px);
  -o-transform: rotateY(90deg) translateZ(100px);
  -ms-transform: rotateY(90deg) translateZ(100px);
  transform: rotateY(90deg) translateZ(100px);
}

#cube .left {
  -webkit-transform: rotateY( -90deg) translateZ(100px);
  -moz-transform: rotateY( -90deg) translateZ(100px);
  -o-transform: rotateY( -90deg) translateZ(100px);
  -ms-transform: rotateY( -90deg) translateZ(100px);
  transform: rotateY( -90deg) translateZ(100px);
}

#cube .top {
  -webkit-transform: rotateX(90deg) translateZ(100px);
  -moz-transform: rotateX(90deg) translateZ(100px);
  -o-transform: rotateX(90deg) translateZ(100px);
  -ms-transform: rotateX(90deg) translateZ(100px);
  transform: rotateX(90deg) translateZ(100px);
}

#cube .bottom {
  -webkit-transform: rotateX(-90deg) translateZ(100px);
  -moz-transform: rotateX(-90deg) translateZ(100px);
  -o-transform: rotateX(-90deg) translateZ(100px);
  -ms-transform: rotateX(-90deg) translateZ(100px);
  transform: rotateX(-90deg) translateZ(100px);
}

.title {
  font-size: 35px;
  letter-spacing: 1px;
  font-weight: bold;
  color: white;
  text-align: left;
  float: left;
  height: 250px;
  line-height: 215px;
  font-size: 50px;
}