/* variables */

body .tabordion {
    z-index: 9;
    position: relative;
    width: 80%;
    color: #262626;
    margin: 0;
}

        body .tabordion section {
            display: block;
            width: 100%;
            left: 0;
        }

            body .tabordion section input[name="sections"] {
                left: -9999px;
                position: absolute;
                top: -9999px;
            }

                body .tabordion section input[name="sections"]:checked + label {
                    background: transparent;
                    color:#B2D288;
					font-weight:bold;
                }

                body .tabordion section input[name="sections"]:checked ~ article {
                    display: block;
                }

            body .tabordion section label {
                background: #262626;
                border-bottom: 1px solid #B2D288;
				border-left: 1px solid #B2D288;
                font-family: 'Source Sans Pro', sans-serif;
/*                font-weight: 700;*/
                color: #FFF;
                cursor: pointer;
                display: block;
                font-size: 1.2em;
/*                font-weight: bold;*/
                padding: 1em 0.83em;
                position: relative;
                width: 100%;
                z-index: 100;
            }

            body .tabordion section article {
                display: none;
                left: 0;
                width: 100%;
                padding: 1em;
                position: relative;
                top: 0;
                background: transparent;
                font-family: 'Ubuntu', sans-serif;
                font-weight: 300;
                line-height: 1.7;
            }

                body .tabordion section article p {
                    margin-bottom: 1em;
                }

                body .tabordion section article:after {
                    background-color: transparent;
                    bottom: 0;
                    content: "";
                    display: block;
                    left: -229px;
                    position: absolute;
                    top: 0;
                    width: 220px;
                    z-index: 1;
                }

@media all and (min-width: 768px) {
    body .tabordion {
        width: 100%;
        color: rgba(48, 69, 92, 1);
    }

        body .tabordion section label {
            background: #262626;
            border-left: 1px solid #B2D288;
            padding: 1em 2.5%;
            width: 25%;
        }

        body .tabordion section article {
            position: absolute;
            width: 70%;
            left: 26.5%;
        }
}