@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900,300);


.tabs {
   
    position: relative;
    display: flex;
    
    min-height: 270px;
    overflow: hidden;
}

.tabby-tab {
    flex: 1;
}

    .tabby-tab label {
        color: #1a1a1a;
        border-radius: 10px 10px 0px 0px;
        display: block;
        box-sizing: border-box;
        /* tab content must clear this */
        height: 40px;
        padding: 10px;
        /*background: var(--tab_col);*/
        cursor: pointer;
        transition: background 0.5s ease;
    }

        .tabby-tab label:hover {
            /*background: var(--hover_col);*/
        }

.tabby-content {
    position: absolute;
    color:#1a1a1a;
    font-weight:400;
    left: 0;
    bottom: 0;
    right: 0;
    /* clear the tab labels */
    top: 40px;
    padding: 20px;
    border-radius: 0, 0, 5px, 5px;
    /*background: var(--login_bg);*/
    transition: opacity .8s ease, transform 0.8s ease;
    /* show/hide */
    opacity: 0;
    transform: scale(0.1);
    transform-origin: top left;
}



/* MAKE IT WORK ----- */

.tabby-tab [type=radio] {
    display: none;
}

[type=radio]:checked ~ label {
    /*background: #95c2e8;*/
    z-index: 2;
}

    [type=radio]:checked ~ label ~ .tabby-content {
        z-index: 1;
        /* show/hide */
        opacity: 1;
        transform: scale(1);
    }

/* BREAKPOINTS ----- */

@media screen and (max-width: 767px) {
    .tabs {
        min-height: 400px;
    }
}

@media screen and (max-width: 480px) {
    .tabs {
        min-height: 300px;
    }

    .tabby-tab label {
        /*height: 60px;*/
    }

    .tabby-content {
        /*top: 60px;*/
    }

        .tabby-content img {
            float: none;
            margin-right: 0;
            margin-bottom: 20px;
        }
}