* {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

html {
  min-height:100%;
}

body {
    background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/bg.jpg');
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

#tabs {
    margin: 1em auto;
    width: 450px;
    ul {
        margin: 0;
        padding: 0;
        height: 80px;
        @include column-count(3);
        @include column-gap(0);
        @include clearfix;
        li {
            display: block;
            width: 100%;
            height: 100%;
            background: #f4f4f3;
            border-bottom: 1px solid #e5e5e2;
            font-family: 'Josefin Sans', sans-serif;
            font-weight: 400;
            font-size: 1.2em;
            letter-spacing: 1px;
            text-align: center;
            &:first-child {
                -webkit-border-top-left-radius: 3px;
                -moz-border-radius-topleft: 3px;
                border-top-left-radius: 3px;
                border-right: 1px solid #e5e5e2;
            }
            &:last-child {
                -webkit-border-top-right-radius: 3px;
                -moz-border-radius-topright: 3px;
                border-top-right-radius: 3px;
                border-left: 1px solid #e5e5e2;       
            }
            a {
                display: block;
                padding: 1em;
                cursor: pointer;
                outline: 0;
                border: none;
                font-size: 0.85em;
                color: #6a6a6a;
                text-decoration: none;
                text-transform: uppercase;
            }
            span {
                display: block;
                margin-bottom: 0.75em;
            }
        }
        // change style on active tab
        .ui-tabs-active {
            background: #fff;
            border-bottom: none;
            a {
                color: #000;
            }
            span {
                color: #609c09;
            }
        }
    }
    h3, h4 {
        font-family: 'Josefin Sans', sans-serif;
        text-transform: uppercase;   
    }
    h3 {
        margin: 0.5em 0;
        border-bottom: 1px solid rgba(126,149,180,0.5);
        padding-bottom: 0.05em;
        font-size: 2.5em;
        color: #f38500;
        font-weight: 300; 
    }
    h4 {
        margin: 0.25em 0;
        font-size: 1.35em;
        color: #000;
        font-weight: 700;
    }
    .tagline {
        display: block;
        margin-top: 1.25em;
        font-family: 'Josefin Sans', sans-serif;
        font-size: 1.2em;
        color: #aa7786;
        text-transform: lowercase;
    }
}

.tabs-content {
    background: #fff;
    article {
        padding: 1em; 
        p {
            font-family: 'Open Sans', sans-serif;
            line-height: 24px;
        }    
        .readmore {
            display: block;
            margin-top: 1.5em;
            padding-top: 0.25em;
            border-top: 1px solid rgba(126,149,180,0.5);            
            font-family: 'Josefin Sans', sans-serif;
            font-size: 1.2em;
            @include clearfix;
            a {
                display: block;
                margin: 1em 0;
                float: right;
                color: #aa7786;
                text-decoration: none;
                &:hover {
                    color: darken(#aa7786, 10%);
                }
            }
            span {
                padding-left: 1em;
                vertical-align: middle;
            }
        }
        img {
            max-width: 100%;
            height: auto;
            vertical-align: bottom;
        }
    }
}