.tab-wrap {
     transition: 0.3s box-shadow ease;
     border-radius: 10px;
     border: 1px solid #eae9ed;
     max-width: 100%;
     display: flex;
     flex-wrap: wrap;
     position: relative;
     list-style: none;
     background-color: #fff;
     margin: 40px 0 0 0;
     overflow: hidden;
}

.tab-wrap-shadow::before {
    content: '';
    box-shadow: inset 0 -50px 50px #fff;
    position: absolute;
    width: 100%;
    height: 50px;
    bottom: 0;
    z-index: 999;
}

.tab-wrap:hover {}
.tab {
     display: none;
}
.tab:checked:nth-of-type(1) ~ .tab__content:nth-of-type(1) {
     opacity: 1;
     transition: 0.5s opacity ease-in, 0.8s transform ease;
     position: relative;
     top: 0;
     z-index: 100;
     transform: translateY(0px);
     text-shadow: 0 0 0;
}
.tab:checked:nth-of-type(2) ~ .tab__content:nth-of-type(2) {
     opacity: 1;
     transition: 0.5s opacity ease-in, 0.8s transform ease;
     position: relative;
     top: 0;
     z-index: 100;
     transform: translateY(0px);
     text-shadow: 0 0 0;
}
.tab:checked:nth-of-type(3) ~ .tab__content:nth-of-type(3) {
     opacity: 1;
     transition: 0.5s opacity ease-in, 0.8s transform ease;
     position: relative;
     top: 0;
     z-index: 100;
     transform: translateY(0px);
     text-shadow: 0 0 0;
}
.tab:checked:nth-of-type(4) ~ .tab__content:nth-of-type(4) {
     opacity: 1;
     transition: 0.5s opacity ease-in, 0.8s transform ease;
     position: relative;
     top: 0;
     z-index: 100;
     transform: translateY(0px);
     text-shadow: 0 0 0;
}
.tab:checked:nth-of-type(5) ~ .tab__content:nth-of-type(5) {
     opacity: 1;
     transition: 0.5s opacity ease-in, 0.8s transform ease;
     position: relative;
     top: 0;
     z-index: 100;
     transform: translateY(0px);
     text-shadow: 0 0 0;
}
.tab:first-of-type:not(:last-of-type) + label {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
}
.tab:not(:first-of-type):not(:last-of-type) + label {
     border-radius: 0;
}
.tab:last-of-type:not(:first-of-type) + label {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
}
.tab:checked + label {
     background-color: #fff;
     box-shadow: 0 -1px 0 #fff inset;
     cursor: default;
     color: #292d3d;
     font-weight: 600;
}
.tab:checked + label:hover {
     box-shadow: 0 -1px 0 #fff inset;
     background-color: #fff;
}
.tab + label {
     box-shadow: 0 -1px 0 #eae9ed inset;
     border-radius: 6px 6px 0 0;
     cursor: pointer;
     display: block;
     text-decoration: none;
     color: #338bd2;
     flex-grow: 3;
     text-align: center;
     background-color: #f5f7fb;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     text-align: center;
     transition: 0.3s background-color ease, 0.3s box-shadow ease;
     height: 50px;
     box-sizing: border-box;
     padding: 15px;
}
.tab + label:hover {
     background-color: #eae9ed;
     text-decoration: underline;
     color: #004d9a;
}
.tab__content {
     padding: 20px 10px;
     background-color: transparent;
     position: absolute;
     width: 100%;
     z-index: -1;
     opacity: 0;
     left: 0;
     transform: translateY(-3px);
     border-radius: 6px;
}

.middle-tab {
     border-left: 1px solid #eae9ed;
     border-right: 1px solid #eae9ed; 
}