@font-face { font-family:Bantayog;  src:url(Bantayog-Regular.woff); }
@font-face { font-family:Comfortaa; src:url(Comfortaa.woff); }
@font-face { font-family:Lato;      src:url(Lato-regular.woff); }

*, *::after, *::before{ padding:0; margin:2px; box-sizing:border-box; border:none; outline:none; font-family:Comfortaa, Arial; }


input[type=text] { box-sizing=border-box; border:2px solid red; border-radius: 5px; padding: 10px; font-size:20px; width:50%; }
body { background-color: #fff; }

#brand { display:flex; background-color: black; justify-content: space-around; }
.welkom { display:flex; padding-left:30px; right:0px; top:0px; color:white; font-size:15px; font-family:Bantayog; }


.items-container { display:flex; flex-wrap:wrap; }
.item-container { display:flex; flex-direction:row; width:32%; }
.opties-container { display:flex; flex-direction:row; width:100%; }

.select-item { text-align:center; width:100%; height:100px; border:3px solid #000000; border-radius:15px; margin:0px 0px; padding:5px 2px; color:white; }
.wijn-item { text-align:center; width:100%; border:3px solid #000000; border-radius:20px; margin:0px 0px; padding:10px 5px; }


.select-min { width:50px; height:50px; border:1px solid #110f29; margin:5px 2px; cursor:pointer; background:url(../images/min.jpg) no-repeat; background-position:center; background-size:30px 30px; }
.select-plus { width:50px; height:50px; border:1px solid #110f29; margin:5px 2px; cursor:pointer; background:url(../images/plus.jpg) no-repeat; background-position:center; background-size:30px 30px; }
.select-x { width:50px; height:50px; border:1px solid #110f29; margin:5px 2px; cursor:pointer; background:url(../images/x.jpg) no-repeat; background-position:center; background-size:50px 50px; }
.select-aantal { border:1px solid #110f29; margin:5px 2px; }

.verzend { width:300px; border:2px solid #110f29; border-radius:20px; padding:10px; margin:10px 10px; cursor:pointer; background: #222; color:yellow; }

.modal-opties { display:none; background:rgba(0, 0, 0, .8); font-size:13px; position:fixed; left:0px; top:0px; height:100%; width:100%; max-height:calc(100vh-200px); overflow-y:auto; }
.modal-opties:target { display:table; }
.modal-opties__body { display:flex; max-height:calc(100vh - 210px); overflow-y:auto; }
.modal-opties__dialog { display:table-cell; overflow-y: initial !important vertical-align:middle; }
.modal-opties__content { background:rgb(255, 255, 255); top:10px; width:95%; min-width:300px; margin:auto; position:relative; animation: slideUp 0.3s ease-in-out; }
.modal__close { color:black; font-size:40px; text-decoration:none; position:absolute; top:5px; right:20px; }
.modal__footer { padding:1rem; border-top:1px solid #ccc; }

.modal-opties-content { flex-grow:1; background:#ededed; }
.modal-opties-title { padding:10px; margin:10px; border-bottom:1px solid #ccc; font-size:18px; }
.modal-opties-row { display:flex; flex-direction:row; flex-wrap:nowrap; }
.modal-opties-30pc { min-width:150px; margin:10px; }

.modal-button-div { display:flex; flex-direction:row; flex-wrap:nowrap; justify-content: center; }
.modal-button { text-decoration:none; width:23%; height:50px; background:#222; color:#fff; border:1px solid #000; cursor:pointer; margin-left:1px;
                font-size:15px; font-weight:700; transition:background 0.2s, color 0.2s, border-color 0.2s; }
button:hover {  background: #FFF;  color: #222; }
.modal-button.active { background: #CCC;  color: #222; }

.optie-button {  text-decoration: none;  background: #fff;  color: #222;  border: 1px solid #000;  cursor: pointer;  padding:20px 5px;  margin:2px 2px;  font-size:12px;  font-weight: 700;  transition: background 0.07s, color 0.07s, border-color 0.07s; }
.optie-button.active { background: #222;  color: #fff; }
.optie-button:hover {  background: #222;  color: #AAA; }

.mini-button { text-decoration:none; width:100%; height:30px; background:#222; color:#fff; border:1px solid #000; cursor:pointer; margin-left:1px;
                font-size:12px; font-weight:700; transition:background 0.2s, color 0.2s, border-color 0.2s; }

table { border-spacing:0px; font-family:Bantayog; width:100%; }
table,td { font-size:12px; border:1px solid #333632; }
td { padding:3px; }
th       { font-size:14px; background-color:#333632; color:white; border:1px solid black; }

@media screen and (max-width: 380px) {
  .select-item { font-size:14px; }
}