.tabs {
	display: flex;
	flex-wrap: wrap;
}

.tabs label {
    order: 1;
    flex: auto;
	cursor: pointer;
    color: #222733;
    background-color: #F3F3F3;
    font-weight: 700;
    text-transform: uppercase;
    text-align:center;
    transition: background ease 0.2s;
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
    letter-spacing: 2.4px;
}

.tabs .tab {
    order: 99;
    flex-grow: 1;
	width: 100%;
	display: none;
  /*background: #fff;*/
}

.tabs input[type="radio"] {
	display: none;
}

.tabs input[type="radio"]:checked + label {
	color: #F3F3F3;
    background-color: #222733;
}

.tabs input[type="radio"]:checked + label + .tab {
    display: grid;
    /*grid-auto-rows: 1fr;*/
    position: relative;
}

/*
.tab h3{
  color: #000;
  font-size: clamp(1.25rem, 1.1rem + 0.75vw, 2rem);
  font-weight: 700;
  margin-bottom: 15px;
}

.tab-txt{
  color: #000;
  font-weight: 400;
  font-size: clamp(1rem, 0.925rem + 0.375vw, 1.375rem);
  letter-spacing: 0.66px;
}
*/

.tab{
    padding-top: 4%;
}

.tabs-o{
    display: flex;
    flex-direction: column;
    flex: auto;
    background-image: url(../img/bk-bulex.jpg);
    background-size:auto;
    background-repeat: no-repeat;
    background-position: left bottom;
}



/* media queries */
@media(min-width:992px){
  .tabs label {
    padding-top: 30px;
    padding-bottom: 30px;
    margin-left: 10px;
    margin-right: 10px;
  }
  .tabs label:nth-child(even){
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
  }
  .tabs label:nth-child(odd){
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
  }
  .tabs input[type="radio"]:checked + label + .tab {
    grid-template-columns: 1fr 70%;
    grid-gap: 30px;
  }
  .tab h3{
    margin-bottom: 30px;
    }
    .tab-r{
        padding-left: 20px;
        padding-right: 20px;
    }
    .tab-r-i{
        margin-top: 50px;
        display: grid;
        grid-auto-rows: 1fr;
        grid-template-columns: 1fr 1fr;
        grid-gap: 30px;
    }
    .tab-r-i-txt{
        letter-spacing: 0.22px;
        margin-top: 15px;
    }
    .tabs-o{
        padding-top: 100px;
        padding-bottom: 100px;
    }
}

@media (max-width:991px) {
  .tabs label {
    padding-top: 15px;
    padding-bottom: 15px;
  }
  .tabs .tab, .tabs label{
    order: initial;
  }
  .tabs label{
    width: 100%;
  }
  .tabs input[type="radio"]:checked + label + .tab {
    grid-template-columns: 1fr;
    grid-gap: 20px;
    padding-bottom: 30px;
  }
  .tab h3{
    margin-bottom: 20px;
    }
    .tab-r{
        padding-left: 20px;
        padding-right: 20px;
    }
    .tab-r-i{
        margin-top: 30px;
        display: grid;
        grid-auto-rows: 1fr;
        grid-template-columns: 1fr;
        grid-gap: 30px;
    }
    .tab-r-i-txt{
        letter-spacing: 0.22px;
        margin-top: 10px;
    }
    .tabs-o{
        padding-top: 40px;
        padding-bottom: 40px;
    }
}