@-webkit-keyframes showTab{
    from{
        opacity:0;
        -webkit-transform:translateY(10px);
        transform:translateY(10px)
    }
    to{
        opacity:1;
        -webkit-transform:translateY(0);
        transform:translateY(0)
    }
}
@keyframes showTab{
    from{
        opacity:0;
        -webkit-transform:translateY(10px);
        transform:translateY(10px)
    }
    to{
        opacity:1;
        -webkit-transform:translateY(0);
        transform:translateY(0)
    }
}
.tabsy>button{
    width:100%;
    font-family:inherit;
    font-size:100%;
    margin:0;
    outline:0;
    border:0;
    vertical-align:baseline;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    background:transparent
}
.tabsy>.tabButton{
    display:block;
    margin-top:1px;
    background:green;
    color:#f5f5f5;
    text-align:center;
    -webkit-transition:all 250ms ease-in-out;
    transition:all 290ms ease-in-out
	width:100%;
}
.tabsy>input{
    display:none
}
.tabsy>input:checked+label+.tab{
    display:block
}
.tabsy>input:checked+label+.tab>.content{
    -webkit-animation:showTab 250ms ease-in-out;
    animation:showTab 250ms ease-in-out
}
.tabsy>.tab{
    background:#fff;
    display:none
}
@media screen and (min-width: 768px){
    .tabsy{
        display:-webkit-box;
        display:-webkit-flex;
        display:-ms-flexbox;
        display:flex;
        -webkit-flex-wrap:wrap;
        -ms-flex-wrap:wrap;
        flex-wrap:wrap
    }
    .tabsy>.tabButton{
        -webkit-box-ordinal-group:2;
        -webkit-order:1;
        -ms-flex-order:1;
        order:1;
        -webkit-box-align:start;
        -webkit-align-items:flex-start;
        -ms-flex-align:start;
        align-items:flex-start;
        cursor:pointer
    }
    .tabsy>input:checked+label{
        background:rgb(2, 73, 128);
        color:#fff
    }
    .tabsy>.tab{
        -webkit-box-ordinal-group:3;
        -webkit-order:2;
        -ms-flex-order:2;
        order:2
    }
}