﻿/*@font-face {
    font-family: 'Genericons';
    src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/genericons-regular-webfont.eot");
    src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/genericons-regular-webfont.woff") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/53819/genericons-regular-webfont.eot") format("truetype");
    font-weight: normal;
    font-style: normal;
}*/

/*Hoofd*/
.imgLego {
    display: block;
    max-width: 40%;
    /*border: solid;*/
    /*border-width: 0.1rem;*/
}

.imgHuurlego {
    display: block;
    max-width: 80%;
    /*border: solid;*/
    /*border-width: 0.1rem;*/
}

.imgHuurLegoBeta{
    display:block;
    max-width:60%;
}

/*.imgHuurlegoSmall {
    display: block;
    width: 20%;
    border: solid;
    border-width: 0.1rem;
}*/

#navbar {
    background-color: #fff;
    position: fixed;
    top: 0px;
    width: 100%;
    display: block;
    transition: top 0.3s;
}

    #navbar a {
        float: left;
        display: block;
        /*text-align: center;*/
    }


.row {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    /*align-items:stretch;*/
    /*align-content:stretch;*/
    height: 120px;
}

.left {
    display: block;
    margin-left: 1rem;
    /*border: solid;*/
    /*border-width: 0.1rem;*/
}

.right {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    /*border: solid;*/
    /*border-width: 0.1rem;*/
    /*align-items:stretch;*/
    /*align-content:stretch;*/
    margin-right: 1rem;
}

.lijst {
    display: block;
    margin-left:-3rem;
    /*border: solid;*/
    /*border-width: 0.1rem;*/
}


    .lijst li {
        /*display:block;*/
        font-size: 2.6vmin;
        background-image: url('legoheadsmile.png');
        background-repeat: no-repeat;
        background-position: left;
        padding-left: 1.5rem;
        background-size: 10%;
        list-style: none;
        /*max-height:stretch;*/
    }

/*Menu*/



.container {
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background: #fff;
    height: 32px;
    border-bottom: #909090 1px solid;
}

.aanmelden {
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
    background: #fff;
}

.accordion {
    width: 100%;
    min-width: 478px;
    display: block;
    list-style-type: none;
    height: 32px;
    font-size: 0;
}

.tabs {
    display: inline-block;
    background-color: #fff;
    border-right: #909090 1px solid;
    width: 42px;
    height: 30px;
    overflow: hidden;
    position: relative;
    margin: 0px;
    font-size: 16px;
    -moz-transition: all 0.4s ease-in-out 0.1s;
    -o-transition: all 0.4s ease-in-out 0.1s;
    -webkit-transition: all 0.4s ease-in-out;
    -webkit-transition-delay: 0.1s;
    transition: all 0.4s ease-in-out 0.1s;
}

    .tabs:hover {
        width: 200px;
    }

        .tabs:hover .social-links a:before {
            margin-left: -100px;
        }

        .tabs:hover .social-links a:after {
            margin-left: 0px;
        }

    .tabs .paragraph {
        position: relative;
        width: 360px;
        margin-left: 40px;
        /*        margin-bottom:20px;
*/
        padding: 5px 0 0 5px;
        height: 30px;
        /*       // background: #fff;*/
        background: linear-gradient(to right, #ffffff 0%, #fff 100%);
    }

        .tabs .paragraph h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
        }

        .tabs .paragraph p {
            font-size: 0.88em;
            line-height: 1.5em;
            padding-right: 30px;
/*            padding-bottom:10px;*/
/*            margin-bottom:10px;
*/        }

.social-links {
    display: block;
}

    .social-links a {
        display: block;
        text-indent: -9999px;
        font-size: 0;
        line-height: 0;
    }

        .social-links a:before, .social-links a:after {
            -moz-transition: all 0.4s ease-in-out 0.1s;
            -o-transition: all 0.4s ease-in-out 0.1s;
            -webkit-transition: all 0.4s ease-in-out;
            -webkit-transition-delay: 0.1s;
            transition: all 0.4s ease-in-out 0.1s;
            width: 36px;
            height: 30px;
            position: absolute;
            text-indent: 0;
            padding-top: 5px;
            padding-left: 10px;
            display: block;
            font: normal 20px Genericons;
            color: #fff;
        }

        .social-links a:after {
            font-size: 20px;
            padding-left: 10px;
            padding-top: 5px;
            margin-left: 85px;
        }

.beschikbaar a:before, .beschikbaar a:after {
    content: url("icons\\beschikbaar.png");
}

.beschikbaar a:after {
    background: linear-gradient(to right, #fff 0%, #ffffff 100%);
}

.aanbod a:before, .aanbod a:after {
    content: url("icons\\aanbod.png");
}

.aanbod a:after {
    background: linear-gradient(to right, #fff 0%, #ffffff 100%);
}

.zoeken a:before, .zoeken a:after {
    content: url("icons\\zoeken.png");
}

.zoeken a:after {
    background: linear-gradient(to right, #fff 0%, #ffffff 100%);
}

.huren a:before, .huren a:after {
    content: url("icons\\hoehuren.png");
}

.huren a:after {
    background: linear-gradient(to right, #fff 0%, #ffffff 100%);
}

.registreren a:before, .registreren a:after {
    content: url("icons\\registreren.png");
}

.registreren a:after {
    background: linear-gradient(to right, #fff 0%, #ffffff 100%);
}

.login a:before, .login a:after {
    content: url("icons\\aanmelden.png");
}

.login a:after {
    background: linear-gradient(to right, #fff 0%, #ffffff 100%);
}

.reserveren a:before, .reserveren a:after {
    content: url("icons\\reserveren.png");
}

.reserveren a:after {
    background: linear-gradient(to right, #fff 0%, #ffffff 100%);
}

.promoties a:before, .promoties a:after {
    content: url("icons\\promo.png");
}

.promoties a:after {
    background: linear-gradient(to right, #fff 0%, #ffffff 100%);
}

.info a:before, .info a:after {
    content: url("icons\\info.png");
}

.info a:after {
    background: linear-gradient(to right, #fff 0%, #ffffff 100%);
}

/*Zoekbar*/
/*.frameZoekBar {
    width:100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}*/

.zoekVak {
    width: 50%;
    height: auto;
    margin: auto;
    /*text-align:center;*/
    display: flex;
    /*align-items:center;*/
    /*    vertical-align:middle;
    
*/
    padding:0.2rem 0 0.2rem 0.4rem ;
    /*align-items: center;*/
    justify-content: center;
    /*border: solid 0.2rem;*/
}

.zoekVak #imgZoeken{
    padding-left:0.2rem;
    /*background-color:rebeccapurple;*/
/*    padding-top:1rem;
   
*/
/*border: solid 0.2rem;*/
}

.zoekVak #txtZoeken{
    width:200px;
    /*background-color:seagreen;*/
    /*border:solid 0.2rem;*/
   /*padding:-1rem;*/
}




@media only screen {
    .grid-container {
        display: grid;
        grid-template-columns: auto auto auto;
        /*grid-template-columns: repeat(3, 1fr);*/
        /*align-items: center;*/
        justify-content: center;
        /*padding: 1rem;*/
    }

.imgThema {
    padding: 0.5rem;
    width: 50%;
    border-radius: 1rem;
/*        text-align:center;
        border:0.1rem solid;*/
}

    @media only screen and (min-width: 640px) {
        .grid-container {
            display: grid;
            grid-template-columns: auto auto auto auto auto ;
            /*padding: 1rem;*/
        }

        .imgThema {
            padding: 0.5rem;
            width: 60%;
            border-radius: 1rem;
        }


        /*.grid-item {
        }

        .grid_items {*/
            /*padding: 3.75%;*/
            /*display: grid;
            grid-template-columns: 100%;*/
            /*    grid-column-gap: 0;
    grid-row-gap: 20px;*/
        /*}*/

        /*    .grid_items > .imgThema {
        padding: 10px;
    }*/


        /*@media only screen and (min-width: 640px) {
            .grid_items {
                grid-template-columns: 1% 1% 1%;*/
                /*        grid-column-gap: 5px;
        grid-row-gap: 40px;*/
            /*}*/

            /*        .grid_items > .imgThema {
            padding: 20px;
        }*/
        /*}*/

        /*@media only screen and (min-width: 981px) {
            .grid_items {
                grid-template-columns: 15% 15% 15% 15% 15% 15%;*/
                /*grid-row-gap: 50px;*/
            /*}*/

            /*        .grid_items > .imgThema {
            padding: 30px;
        }*/
        /*}*/
    }
}

