h1, h2, p, span, a {
    font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
}

html, body {
    margin: 0;
    font-size: 18px;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
}

#content {
    margin: 0;
    padding: 0;
}

.section.top {
    min-height: 100vh;
}

#top {
    background-image: url("../img/main.webp");

    margin: 0;

    overflow: hidden;
    width: 100vw;
    max-width: 100%;
    height: 100vh;
    position: relative;
}

#logo {
    position: absolute;
    top: 10%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;

    width: auto;
    height: auto;
    max-width: 500px; /* Need a specific value to work */
    max-height: 30vh;
}

/* Only visible on small screens */
#downArrow {
    display: none;
    position: absolute;

    z-index: 10;
    bottom: 6%;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.section {
    min-height: calc(100vh - 50px);
    position: relative;

    background: no-repeat fixed 50% 20%;
    background-size: cover;
}

.contact #map {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
}

.contact > #map > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contact .footer p {
    text-align: left !important;
}

.contactInfo {
    text-align: center;
}

.contactInfo > span {
    display: inline-block;

    padding-left: 16px;
    padding-right: 16px;
    width: 300px;
    overflow: visible;
    white-space: nowrap;
    padding-bottom: .5em;
}

.address {
    text-align: right;
    direction: rtl;
}

.social {
    text-align: left;
}

.social b {
    width: 15px;
    display: inline-block;
    text-align: center;
}

.facebookShort {
    display: none;
}

.contact .sectionText > p {
    text-align: center;
}

.social a {
    padding-left: 4px;
    text-decoration: underline;
    color: #B6B5B5;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100vw;
}

.footer > p {
    font-size: smaller;
    text-align: left;
}

.footer .credits {
    float: right;
    text-decoration: none;
    color: rgba(242, 242, 242, 0.3);
    -webkit-transition: color 100ms;
    -moz-transition: color 100ms;
    -o-transition: color 100ms;
    transition: color 100ms;
}

.footer > a {
    text-decoration: none;
}

.credits:hover {
    color: rgba(242, 242, 242, .8);
}

.sectionText > * {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.sectionHeader, .sectionText {
    color: #f2f2f2;
    background-color: #2b2b2b;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
}

.sectionHeader {
    margin: 0;
    text-align: center;
}

.sectionText {
    background-color: rgba(50, 50, 50, 0.9);
}

.werkzaamheden a {
    color: #f2f2f2;
}

.werkzaamheden li {
    list-style:none;
    margin-bottom: 3px;
}

.werkzaamheden li:before {
    content:"·";
    font-size:60px;
    vertical-align:middle;
    line-height:20px;
}

.werkzaamheden {
    background-image: url("../img/sections/over-ons.webp");
}


.aardappelen {
    background-image: url("../img/sections/werkzaamheden-aardappelen.webp");
}

.balen {
    background-image: url("../img/sections/werkzaamheden-balen.webp");
}

.bemesten {
    background-image: url("../img/sections/werkzaamheden-bemesten.webp");
}

.beregenen {
    background-image: url("../img/sections/werkzaamheden-beregenen.webp");
}

.bietenzaaien {
    background-image: url("../img/sections/werkzaamheden-bietenzaaien.webp");
    background-position: 50% 40%;
}

.doorzaaien {
    background-image: url("../img/sections/werkzaamheden-doorzaaien.webp");
}

.gewasbescherming {
    background-image: url("../img/sections/werkzaamheden-gewasbescherming.webp");
}

.gras {
    background-image: url("../img/sections/werkzaamheden-gras.webp");
}

.graszaaien {
    background-image: url("../img/sections/werkzaamheden-graszaaien.webp");
    background-position: 50% 30%;
}

.grondbewerking {
    background-image: url("../img/sections/werkzaamheden-grondbewerking.webp");
}

.grondverzet {
    background-image: url("../img/sections/werkzaamheden-grondverzet.webp");
    background-position: 50% 45%;
}

.kalkstrooien {
    background-image: url("../img/sections/werkzaamheden-kalkstrooien.webp");
}

.mais {
    background-image: url("../img/sections/werkzaamheden-mais.webp");
}

.mesttransport {
    background-image: url("../img/sections/werkzaamheden-mesttransport.webp");
}

.uien {
    background-image: url("../img/sections/werkzaamheden-uien.webp");
    background-position: 50% 60%;
}

.over-ons {
    background-image: url("../img/sections/over-ons.webp");
}

.verhuur {
    background-image: url("../img/sections/verhuur.webp");
}

.contact {
    overflow-y: hidden;
    background-image: url("../img/map.webp");
}