﻿
.accordion {
    width: 100%;
    float: left;
    margin-top: 10px;
}

    /* all accordion styles below here */
    .accordion ul {
        width: 100%;
        -moz-transition-duration: 350ms;
        -o-transition-duration: 350ms;
        -webkit-transition-duration: 350ms;
        transition-duration: 350ms;
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .accordion ul li {
            position: relative;
        }

            .accordion ul li input {
                position: absolute;
                left: -9999em;
            }

            .accordion ul li label {
                background-color: #181818;
                position: relative;
                text-transform: uppercase;
                width: 100%;
                display: block;
                margin: 5px 0;
                line-height: 22px;
                cursor: pointer;
                font-weight: bold;
                border-radius: 0;
                -webkit-border-radius: 0;
                -moz-border-radius: 0;
                padding: 5px 7px 5px 29px;
                color: #fff;
                text-decoration: none;
            }

            .accordion ul li .arrow {
                content: '';
                width: 10px;
                height: 32px;
                position: absolute;
                top: 0;
                left: 10px;
                background-image: url('../img/accordion_icon.png');
                background-repeat: no-repeat;
                background-position: center center;
                -moz-transition-duration: 350ms;
                -o-transition-duration: 350ms;
                -webkit-transition-duration: 350ms;
                transition-duration: 350ms;
            }

            .accordion ul li.active label, .accordion ul li:hover label {
                background-color: #181818;
            }

            .accordion ul li .copy {
                *zoom: 1;
                background-color: #e8e8e8;
                height: 0px;
                overflow: hidden;
                -moz-transition-duration: 350ms;
                -o-transition-duration: 350ms;
                -webkit-transition-duration: 350ms;
                transition-duration: 350ms;
            }

                .accordion ul li .copy > .wrap {
                    padding: 10px;
                    overflow: scroll;
                    overflow-x: hidden;
                    height: 170px;
                }

                .accordion ul li .copy p {
                    font-family: 'Roboto', sans-serif;
                    color: #181818;
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 1.4;
                }

            .accordion ul li input[type="radio"]:checked ~ .copy {
                height: 170px;
            }

            .accordion ul li input[type="radio"]:checked ~ .arrow {
                background-image: url('../img/accordion_active.png');
            }


            .accordion ul li .copy > .wrap::-webkit-scrollbar {
                width: 8px;
            }

            .accordion ul li .copy > .wrap::-webkit-scrollbar-track {
                background-color: #a7a7a7;
                border-left: 1px solid #a7a7a7;
            }

            .accordion ul li .copy > .wrap::-webkit-scrollbar-thumb {
                background-color: #a7a7a7;
            }

                .accordion ul li .copy > .wrap::-webkit-scrollbar-thumb:hover {
                    background-color: #1ddcd3;
                }
