section#blocks{
    margin: 0 auto;
    position: relative;
    margin-top: -2px;
    z-index: 2;
    background-color: black;
}

.blockcheckers {
    width: 100%;
    background-image: url(/wp-content/themes/charliens/assets/images/taxi-texture-horizontal.svg);
    height: 50px;
    background-repeat: repeat-x;
    background-size: auto 50px;
}

section#blocks .container h3{
    margin-top: 0;
    margin-bottom: 0px;
    text-align: center;
    color: black;
    text-transform: uppercase;
}

section#blocks .container .blokwrapper{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

section#blocks .container .blokwrapper .blok{
    text-align: center;
    background: #ffc000;
    padding: 40px 20px;
}

section#blocks .container .blokwrapper .blok:hover i{
    transform: translateY(-8px);
}



section#blocks .container .blokwrapper .blok i{
    color: black;
    font-size: 50px;
    margin-bottom: 20px;
    transition: 0.15s all ease-in-out;
}

section#blocks .container .blokwrapper .blok span.bloktitel{
    color: #d9d9d9;
    font-weight: bold;
}

@media screen and (min-width: 1000px) {
    section#blocks .container .blokwrapper .blok:nth-child(3n), section#blocks .container .blokwrapper .blok:nth-child(1), section#blocks .container .blokwrapper .blok:last-child{
        background: black;
    }
    
    section#blocks .container .blokwrapper .blok:nth-child(3n) h3, section#blocks .container .blokwrapper .blok:nth-child(1) h3, section#blocks .container .blokwrapper .blok:last-child h3{
        color: white;
    }
    
    section#blocks .container .blokwrapper .blok:nth-child(3n) i, section#blocks .container .blokwrapper .blok:nth-child(1) i, section#blocks .container .blokwrapper .blok:last-child i{
        color: white;
    }
}

@media screen and (max-width: 1000px) {
    section#blocks .container .blokwrapper{
        grid-template-columns: 1fr 1fr;
    }

    section#blocks .container .blokwrapper .blok i{
        margin-bottom: 10px;
    }

    section#blocks .container .blokwrapper .blok:nth-child(4n), section#blocks .container .blokwrapper .blok:nth-child(5n), section#blocks .container .blokwrapper .blok:nth-child(1), section#blocks .container .blokwrapper .blok:last-child{
        background: black;
    }
    
    section#blocks .container .blokwrapper .blok:nth-child(4n) h3, section#blocks .container .blokwrapper .blok:nth-child(5n) h3, section#blocks .container .blokwrapper .blok:nth-child(1) h3, section#blocks .container .blokwrapper .blok:last-child h3{
        color: white;
    }
    
    section#blocks .container .blokwrapper .blok:nth-child(4n) i, section#blocks .container .blokwrapper .blok:nth-child(5n) i, section#blocks .container .blokwrapper .blok:nth-child(1) i, section#blocks .container .blokwrapper .blok:last-child i{
        color: white;
    }

    
}