body { background:#eee }
#header { background:#eee;}
#footer { background:#333;}
#banner { padding-top:40px;background:#dc2;max-width:100%;padding-bottom:30px  }
#prodinfo { padding-bottom:15px;padding-top:20px;background:#dc2; }
#banner.xxs { padding-top:10px !important;padding-bottom:0 }
#banner.xs { padding-top:15px !important;padding-bottom:10px }
#banner.sm { padding-top:30px !important;padding-bottom:0 }


#keuze .swiper-wrapper { overflow:visible }

.keuze_item { overflow:hidden;background:rgba(255,255,255,1);outline: 6px solid #eee;box-shadow:0 0 5px rgba(255,255,255,1);border-radius:100%;border:6px solid #dc2 }

.keuze_item  img {
    /*position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;height:90%*/
    position:absolute;top:50%;left:50%;max-width:80%;max-height:80%;transform:translate(-50%,-50%);
}
.logobig { height:100% }
#keuze { }
/*
#keuze.xxs { margin-top:-40px }
#keuze.xs { margin-top:-50px }
#keuze.sm { margin-top:-60px }
#keuze.md { margin-top:-75px }
#keuze.lg { margin-top:-90px }
#keuze.xl { margin-top:-105px }
*/

.keuze_item { aspect-ratio: 1/1 }

.tshadow { text-shadow: 1px 1px #000 }
table { border-top:1px solid #aaa;border-left:1px solid #aaa;font-family:rubik;font-size:10pt }
.td1 { border-bottom:1px solid #aaa;border-right:1px solid #aaa;background:#eee }
.td2 { border-bottom:1px solid #aaa;border-right:1px solid #aaa;background:#fff }
.td3 { border-bottom:1px solid #aaa;border-right:1px solid #aaa;background:#dc2;color:#fff }

.button { margin:0; padding:8px 12px;font-family:rubik;font-size:14px; border-radius:5px; }
.black {
    color:#eee; border:1px solid #555;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#7d7e7d+0,0e0e0e+100;Black+3D */
    background: linear-gradient(to bottom,  #7d7e7d 0%,#0e0e0e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}
.yellow {
    color:#eee; border:2px solid #fff;box-shadow:0 0 10px rgba(0,0,0,0.7);
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#dbd074+0,dbc711+100 */
    background: linear-gradient(to bottom,  #dbd074 0%,#dbc711 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}
.yellow1 {
    color:#eee; border:1px solid #dbc711;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#dbd074+0,dbc711+100 */
    background: linear-gradient(to bottom,  #dbd074 0%,#dbc711 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}
.grey {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#eeeeee+0,cccccc+100;Gren+3D */
    background: linear-gradient(to bottom,  #eeeeee 0%,#cccccc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    color:#777; border:1px solid #666;
}
.red {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff3019+0,cf0404+100;Red+3D */
    background: linear-gradient(to bottom,  #ff3019 0%,#cf0404 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    color:#fff;border:1px solid #800;
}
#newdesigns { background:#fafafa;border-top:1px solid #fff;border-bottom:1px solid #ddd }
.itemimage { float:left; max-width:300px; max-height:100%;height:100%;margin-right:15px}
.itemtext.xxs { float: none }
#designerinfo { ;border-top:1px solid #fff }

.colors { position:relative;overflow:hidden; margin:10px 0 }
.color { float:left;border-radius:100%;width:20px;height:20px;margin:0 5px 5px 0;border:1px solid #fff }

.yellowhalf {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ddcc22+50,eeeeee+50 */
    background: linear-gradient(to bottom,  #ddcc22 50%,#eeeeee 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}
.aantalsel { border:1px solid #ccc;background:#fff; padding:3px 7px; font-family:rubik ;width:50px}
/* HTML: <div class="loader"></div> */
.loader {

    width: 50px;
    aspect-ratio: 1;
    display: grid;
    border: 4px solid #0000;
    border-radius: 50%;
    border-color: #ccc #0000;
    animation: l16 1s infinite linear;
}
.loader::before,
.loader::after {
    content: "";
    grid-area: 1/1;
    margin: 2px;
    border: inherit;
    border-radius: 50%;
}
.loader::before {
    border-color: #f03355 #0000;
    animation: inherit;
    animation-duration: .5s;
    animation-direction: reverse;
}
.loader::after {
    margin: 8px;
}
@keyframes l16 {
    100%{transform: rotate(1turn)}
}

#loc { display:flex }
.hcenter { justify-content: center }
.vcenter { align-items: center }
.top { align-items: flex-start}
.bottom {align-items: flex-end }
.left { justify-content: flex-start}
.right { justify-content: flex-end}

#loc > img {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
}

.imagerem { position:absolute;top:0px;left:0px; font-size:14px;background:#c00;color:#fff;padding:5px; }
.formkop,.forminput {
    position:relative;overflow:hidden;
    margin:0 0 5px 0;
    font-family:rubik;
    font-weight:700;
}
.input { font-size:16px;width:100%; padding:5px 10px; margin:0; outline:none;border:1px solid #ccc;border-radius:3px }

.fm:hover { font-weight:700; cursor:pointer; color:#da2 }

.esize { font-family:rubik;font-size:12pt;text-align:center;padding:3px;border-right:1px solid #ccc;background:#fff;font-weight:700 }
.esize.active { background:#dc2;color:#fff }
.esize:last-child { border-right:0 }