[type="checkbox"],[type="radio"]{display:inline;margin-right:.3625em}

.tabs{
    list-style:none;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-flow:row wrap;
    flex-flow:row wrap;
    -webkit-box-pack:start;
    -ms-flex-pack:start;
    justify-content:flex-start}

    .tabs:after{content:'';
    display:table;
    clear:both
    }

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

.tabs label{display:inline-block;
    min-width:25%;
    -webkit-box-flex:1;
    -ms-flex:1 1 25%;
    flex:1 1 25%;
    color:#7C8796;
    text-align:center;
    cursor:pointer;
    -webkit-transition:all 0.5s;
    transition:all 0.5s
    }

.tabs label span{display:none;font-size:1rem;font-weight:500}
.tabs label:hover{color:#3498db}
.tabs label:hover .icon{border-color:#3498db;background-position:0 -50px}
.tab__content{display:none;text-align:center;width:100%;margin:0 auto;box-sizing:border-box;margin-top:2rem}
.tab__content--copy{margin-bottom:60px;font-size:1.25em}
.tab__content *{-webkit-animation:scale 0.2s ease-in-out;animation:scale 0.2s ease-in-out}

@-webkit-keyframes scale{
    0%{-webkit-transform:scale(0.9);transform:scale(0.9);opacity:0}
    50%{-webkit-transform:scale(1.01);transform:scale(1.01);opacity:0.5}
    100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}

@keyframes scale{
    0%{-webkit-transform:scale(0.9);transform:scale(0.9);opacity:0}
    50%{-webkit-transform:scale(1.01);transform:scale(1.01);opacity:0.5}
    100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}

.tabs [id^="tab"]:checked+label{color:#3498db}
.tabs [id^="tab"]:checked+label i{border-color:#3498db;background-position:0 -50px}

#tab1:checked ~ #tab__content--1,
#tab2:checked ~ #tab__content--2,
#tab3:checked ~ #tab__content--3,
#tab4:checked ~ #tab__content--4,
#tab5:checked ~ #tab__content--5,
#tab6:checked ~ #tab__content--6,
#tab7:checked ~ #tab__content--7,
#tab8:checked ~ #tab__content--8{display:block}

@media (min-width: 768px){.tabs label span{display:block}}
.icon{margin-top:1rem;display:inline-block;width:50px;height:50px;box-sizing:border-box}