body {
    padding:0;
    margin:0;
    //background-color: lightgrey;
    font-family: OpenSans;
    min-height:100vh;
    background: lightgrey; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(lightgrey, white); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(lightgrey, white); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(lightgrey, white); /* For Firefox 3.6 to 15 */
    background: linear-gradient(lightgrey, white); /* Standard syntax */
}

#header h1, #header h2 {
    margin:0;
}

.box {
    display: inline-table;
    height: 680px;
    background-color: #eee;
    margin: 0.2%;
    padding: 1.8%;
    padding-top: 0px;
    text-align: left;
}

.box h1 {
    margin-bottom: 0;
    margin-top: 40px;
}

#header {
    text-align: center;
    width:100%;
    background-color: green;
    color:#fff;
    height:65px;
    z-index:9999;
    border-bottom: 7px solid darkgreen;
}

#header h1 {
  line-height: 60px;
  //text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
  text-transform: uppercase;
  color:rgba(255,255,255,0.8);
}

#header:hover h1 {
  color:rgba(255,255,255,0.9);
}

#button {
    text-align: center;
    width:100%;
    top:65px;
    z-index:9999;
    border-top: 7px solid darkgreen;
    border-bottom: 5px solid darkgreen;
}

#header, #button {
    position:fixed;
}

#boxes{
    padding-top: 125px;
    padding-bottom: 20px;
}

#generator {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 6px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    width:100%;
    animation-name: klapperZu;
    animation-duration: 1.5s;
}

@keyframes klapperAuf {
    from {padding: 6px 32px;}
    to {padding: 15px 32px;}
}

@keyframes klapperZu {
    from {padding: 15px 32px;}
    to {padding: 6px 32px;}
}

#generator:hover {
    /*background-color:#a5d7a7;*/
    padding: 15px 32px;
    animation-name: klapperAuf;
    animation-duration: 1s;
}

#generator:active {
    background:#5db761;
}

.source {
  position: absolute;
  top: 136px;
  font-size: 20px;
  background: rgba(0,0,0,0.8);
  color: white;
  width: 100%;
  text-align: center;
}

.subsite {
    margin:auto;
    max-width:600px;
    width:90%;
    padding-top:100px;
    padding-bottom:30px;
}

.cover {
    height:160px;
    width:400px;
    background:rgba(0,0,0,0.4);
    overflow:hidden;
    background-size: 380px auto !important;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin:auto;
}

.cover img {
  width: 100%;
  animation-name: img;
  animation-duration: 1.5s;
}
@keyframes img {
    from {-webkit-filter: blur(5px);
            filter: blur(5px);}
    to { -webkit-filter: blur(0px);
    filter: blur(0px);}
}

.coverInner {
    position: relative;
}

.center {
    text-align: center;
}

.save {
    float:right;
    padding-top: 45px;
    padding-right:3px;
    padding-left:3px;
}

.fa-floppy-o {
    font-size:24px !important;
    color:green;
}

.fa-floppy-o:hover, .fa-twitter:hover {
    color:rgba(255,255,255,0.9);
}

.fa-twitter {
    font-size:24px !important;
    color:#0084b4;
}

.tut {
  text-align: left;
  width: 100%;
  background-color: beige;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  padding-bottom: 10px;
  padding-top: 60px;
}

.tut p {
  margin: auto;
  width:300px;
}

.banner {
  padding-top: 15px;
}

video {
  max-width:500px;
}

#target {
    text-align:center;
}

#footer {
  background: #eee;
  width: 100%;
  padding-top: 5px;
  padding-bottom: 5px;
}

#footer a, .greenlink, .thanks a {
  text-decoration: none;
  color:green;
}

#footer a:hover, .greenlink:hover, .thanks a:hover {
  text-decoration: none;
  color:#329932;
}

#canvas {
    /*position: fixed;*/
    height:600px;
    width:400px;
}

#lister tr td {
    padding-right: 95px;
    padding-bottom: 10px;
}

.fa-heart {
    color:red;
}

video, source {
    max-width:600px;
    width:100vw;
}

.subsite h2 {
  border-bottom: 3px solid #000;
}

.progressbar-wrapper {
    max-width:100%;
    width:600px;
    height:20px;
    background: darkgrey;
    border-radius: 25px;
    border: 1px solid grey;
    margin-bottom: 10px;
    -moz-box-shadow:    inset 0 0 10px #000000;
    -webkit-box-shadow: inset 0 0 10px #000000;
    box-shadow:         inset 0 0 10px #000000;
}

.progressbar-inner {
    max-width:100%;
    height:20px;
    background:green;
    border-radius: 25px;
    text-align:center;
    color:#fff;
    animation-name:progressbar;
    animation-duration: 2.5s;
    -moz-box-shadow:    inset 0 0 10px #000000;
    -webkit-box-shadow: inset 0 0 10px #000000;
    box-shadow:         inset 0 0 10px #000000;
}

@keyframes progressbar {
    from {width: 0%;}
    to {}
}

@media (min-width: 747px) {
    .box {
        margin:0;
        width: 46.4%;
        margin-bottom: 0px;
        box-shadow: none;
        border-radius: 0px;
    }
    .cover {
        width:100%;
    }
}

@media (min-width: 900px) {
    .box {
        width:29.7%;
    }
    .cover {
        width:100%;
    }
}

@media (min-width: 1300px) {
    .box {
        width:21.4%;
    }
    .cover {
        width:100%;
    }
}

@media (max-width: 940px) {
    .cover {
      width: 100%;
      background-size: 100% auto !important;
    }
    .banner {
      max-width: 94%;
    }
    .tut {
      max-width:100%;
      margin-bottom: 0px;
    }
    #boxes {
      padding-top:100px;
    }
}

@media (max-width: 600px) {
    .cover {
        background-size: cover !important;
    }
    #boxes {
        padding-top:100px;
    }
    .cover img {

    }
    #lister tr td {
        padding-right:25px;
    }
}
@media (max-width: 400px) {
    .cover {

    }
    .coverInner {

    }
}