/* tabs */
.wrapper {max-width: 1200px;margin: auto;background-color: white;}
.buttonWrapper {display: grid;grid-template-columns: 1fr 1fr}

button {letter-spacing: 0px;font-weight: bold;border: none;padding: 10px;background-color: #bccbe9;color: #232c3d;font-size: 18px;cursor: pointer;transition: 0.5s;font-size:1.17em;}
button:hover {background-color: #d5e3ff;}
button.active {background-color: #d5e3ff;}
.active {background-color: white;}
.content {display: none;padding: 10px 20px;}
.content.active {display: block;padding: 10px 20px;}

.item-active {padding: 10px 20px !important;margin: 0px 30px 10px 30px !important;}

/* css reset */
#prod-desc-container,#prod-desc-container *{box-sizing:border-box;}
#prod-desc-container{font-size:16px;max-width:1100px;margin:0 auto;font-family:sans-serif}
#prod-desc-container .headline-2{font-size:1.5em;margin:.83em 0}
#prod-desc-container .headline-3{font-size:1.17em;background:#f6f6f6;padding:3px 0;margin-block-end:0.5em}
#prod-desc-container .headline-4{font-size:1em;margin:1.33em 0}
#prod-desc-container .paragraph{margin:1em 0}
#prod-desc-container .desk-list{margin:1em 0;padding:0 0 0 20px;list-style-position:outside}
#prod-desc-container .desc-img.lazy,#prod-desc-container .desc-img{width:initial;max-width:100%;height:auto}

/* custom style */
#prod-desc-container .flex-container{display:flex;flex-wrap:wrap;flex-direction:row}
#prod-desc-container .col{padding:0.5em;margin:0.5em}
#prod-desc-container .col-1{width:100%}
#prod-desc-container .col-2{width:50%}
#prod-desc-container .col-3{width:33.33%}
#prod-desc-container .col-4{width:23%}
#prod-desc-container .right{justify-content:flex-end;text-align:right;display:flex;flex-wrap:wrap;align-content:center}
#prod-desc-container .left{display:flex;flex-wrap:wrap;align-content:center}
#prod-desc-container .center{justify-content:center;text-align:center;flex-wrap:wrap;align-content:flex-start}

.myDiv:target {display: block !important;}
#prod-desc-container .outline{outline: 1px #f6f6f6 solid; }
#prod-desc-container .ico{border: solid #f0f0f0 1px; margin 5%;border-radius: 15px;}
#prod-desc-container .ico:hover{}


.fi {width: 1.8em!important; height: 1.5em!important; margin-right:5px; margin-bottom: 2px; background: #f6f6f6;}


@media screen and (max-width: 950px) {
#prod-desc-container .col-1,#prod-desc-container .col-2,#prod-desc-container .col-3,#prod-desc-container .col-4{width:30.33%}
}

@media screen and (max-width: 780px) {
#prod-desc-container .col-1,#prod-desc-container .col-2,#prod-desc-container .col-3,#prod-desc-container .col-4{width:47%}
}

@media screen and (max-width: 600px) {
#prod-desc-container{font-size:14px;max-width:100%}
#prod-desc-container .col-1,#prod-desc-container .col-2,#prod-desc-container .col-3,#prod-desc-container .col-4{width:100%}
#prod-desc-container .right{justify-content:flex-start;text-align:left}
#prod-desc-container .right{text-align:left}
#prod-desc-container .flex-container.revert{flex-direction:column-reverse}
}
.container {
  position: relative;
}

.image {
  /*display: block;*/
}

.overlay {
  position: absolute;
  margin: 0 auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: .5s ease;
}

.container:hover .overlay {
  opacity: 1;
}