* {font-family: 'Lato', sans-serif;}

html, body {margin:0;padding:0}
h1 {color:#000;margin-bottom:0px;font-weight:normal}
figure{margin:0px;padding:0px}

.btn {
    margin-top:2em;
    margin-bottom:2em;
    display: inline-block;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 8px 0 #339900, 0 15px 20px rgba(0, 0, 0, .35);
    -moz-box-shadow: 0 8px 0 #339900, 0 15px 20px rgba(0, 0, 0, .35);
    box-shadow: 0 8px 0 #339900, 0 15px 20px rgba(0, 0, 0, .35);
    -webkit-transition: -webkit-box-shadow .1s ease-in-out;
    -moz-transition: -moz-box-shadow .1s ease-in-out;
    -o-transition: -o-box-shadow .1s ease-in-out;
    transition: box-shadow .1s ease-in-out;
    font-size: 18px;
    color: #fff;
}

.btn span {
    display: inline-block;
    padding: 20px 30px;
    background-color: #339900;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(hsla(99, 100%, 60%, .8)), to(hsla(99, 90%, 50%, .2)));
    background-image: -webkit-linear-gradient(hsla(99, 100%, 60%, .8), hsla(99, 90%, 50%, .2));
    background-image: -moz-linear-gradient(hsla(99, 100%, 60%, .8), hsla(99, 90%, 50%, .2));
    background-image: -o-linear-gradient(hsla(99, 100%, 60%, .8), hsla(99, 90%, 50%, .2));
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    width:300px;
    -webkit-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .15);
    -moz-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .15);
    box-shadow: inset 0 -1px 1px rgba(255, 255, 255, .15);
    line-height: 1;
    text-shadow: 0 -1px 1px rgba(153, 51, 0, .7);
    -webkit-transition: background-color .2s ease-in-out, -webkit-transform .1s ease-in-out;
    -moz-transition: background-color .2s ease-in-out, -moz-transform .1s ease-in-out;
    -o-transition: background-color .2s ease-in-out, -o-transform .1s ease-in-out;
    transition: background-color .2s ease-in-out, transform .1s ease-in-out;
}

.btn:hover span {
    background-color: #59ab2e;
    text-shadow: 0 -1px 1px rgba(153, 51, 0, .9), 0 0 5px rgba(255, 255, 255, .8);
}

.btn:active, #button:focus {
    -webkit-box-shadow:    0 8px 0 #339900, 0 12px 10px rgba(0, 0, 0, .3);
    -moz-box-shadow: 0 8px 0 #339900, 0 12px 10px rgba(0, 0, 0, .3);
    box-shadow:    0 8px 0 #339900, 0 12px 10px rgba(0, 0, 0, .3);
}

.btn:active span {
    -webkit-transform: translate(0, 4px);
    -moz-transform: translate(0, 4px);
    -o-transform: translate(0, 4px);
    transform: translate(0, 4px);
}

#usp {list-style-type:none;padding:0;margin:0}
#usp li {line-height:2em}

#slideshow {list-style-type:none;margin:0em 0em 0 0;padding:0px}

#productie ul {list-style-type:none;margin:1em 0 0 0;padding:0}

@keyframes slidy {
0% { top: 0px}
20% { top: 0px}
25% { top: -350px}
45% { top: -350px}
50% { top: -700px}
70% { top: -700px}
75% { top: -1050px}
95% { top: -1050px}
100% { top: 0px}
}

#slideshow {
  width: 94vw;
  overflow:hidden;
  margin-top:-0.5em;
  padding:1px;
  border:1px solid #000;
}

#slideshow div figure {margin:0px}

#slideshow div {
  height:94vh;
  width: 94vw;
  position: relative;
  margin:0;
  padding:0;
  border:0;
  clear:none;
  float:left;
  font-size:0px;
  animation: 30s slidy infinite;
}

#recommend, footer {background:#F6F6F6;width:100%;margin:1em 0 0 0}
div#productie a, footer ul li a {color:#2200CC}
div#productie a:hover, footer ul li a:hover {color:#000000}
footer ul {width:94vw;margin:0 auto;list-style-type:none;padding:0.5em}
footer ul li {width:94vw;padding:0;margin:1em 0 0 0;vertical-align:top}

main {width:100%}

.grey {color:#333}
.green {color:#339900}
.yellow {color:#FFCC33}

header a {color:#000;background:#EEE;padding:5px;border-radius:5px;text-decoration:none;margin-left:0.5em}
#logo {margin:0.75em 0 0 0;height:auto}
figdesc {margin-bottom:1em;display:block}

@media screen and (max-width: 800px) {
    section{width:94vw;margin:0px auto}
    .btn span {width:88vw;padding: 20px 10px}
    header a {width:26vw;display:inline-block;text-align:center}
    #slideshow {overflow:hidden;height:236px}
    #slideshow div img, #slideshow div{width:94vw;height:auto}
    #tel {background:none;display:block;width:94vw}
    #break {display:none;visibility:hidden}
    #logo {width:94vw;margin:1em 1vw 0 1vw;height:auto}
    #recommend div {margin:1em}
    #toepassingen li {display:inline-block;width:45vw}
    figure img{width:94vw}
}

@media screen and (min-width:980px) {
header {width:960px;height:6em;border-bottom:1px dashed #F0F0F0;margin:0px auto}

header a:hover {color:#CCC}
header nav {float:right;margin-top:1em}
header img {float:left}
#tel {background:none}

#awards, #info {height:100%}

#tel {position:relative;top:0em;right:0;display:block;width:15.5em;margin-left:40.25em}

#recommend div, #heading, #info {width:960px;margin:0px auto}
#info {margin-top:0px}

#recommend {margin:1em 0 1em 0;height:5em;padding-top:1em}

#productie, #awards {width:25em;display:inline-block}

#slideshow {height:350px;width:476px;display:inline-block;vertical-align:top;margin:0px;padding:0px}
#slideshow div {height:350px;width:480px;margin:0;padding:0}

#slideshow div img {width:480px;height:350px}

#usp {list-style-type:none;padding:0;margin:0;width:478px;display:inline-block;}
#usp li {line-height:2em;width:478px}

#info #productie {width:480px;vertical-align:top} // werkt niet

footer {text-align:center}
footer ul {width:960px;margin:0px auto;padding:0}
footer ul li {width:234px;display:inline-block;padding:0px;margin:10px 0px 10px 0px}

#awards {width:470px !important}
}