.left-collapsible-container {
    position: fixed;
    margin: 0;
    text-align: left;
    width: 300px;
}

    .left-collapsible-container.leftside {
        top: 0;
        bottom: 0;
        margin-top: auto;
        margin-bottom: auto;
        /*right: -130px;*/
        left: -130px;
        height: 60px;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    }

        .left-collapsible-container.leftside.rounded label {
            -webkit-border-top-left-radius: 10px;
            -moz-border-top-left-radius: 10px;
            border-top-left-radius: 10px;
            -webkit-border-top-right-radius: 10px;
            -moz-border-top-right-radius: 10px;
            border-top-right-radius: 10px;
        }

    .left-collapsible-container.rounded article {
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
    }

    .left-collapsible-container label {
        font-size: 19px;
        font-family: BNazanin, Tahoma, Helvetica, sans-serif;
        padding: 5px 10px 5px 55px;
        position: relative;
        z-index: 20;
        display: block;
        height: 50px;
        cursor: pointer;
        line-height: 50px;
        border-bottom: 3px solid;
        -webkit-transition: all .5s;
        -ms-transition: all .3s;
        -moz-transition: all .3s;
        transition: all .3s;
        -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,.8);
        -moz-box-shadow: 0px 0px 2px rgba(0,0,0,.8);
        box-shadow: 0px 0px 2px rgba(0,0,0,.8);
    }

    .left-collapsible-container.leftside label {
        /*border-top:3px solid;*/
        border-top: 0;
        border-bottom: 0;
    }

    .left-collapsible-container label i {
        overflow: hidden;
        position: absolute;
        height: 50px;
        width: 50px;
        left: 5px;
        top: -6px;
        font-size: 30px;
        line-height: 60px;
        text-align: center;
        -webkit-transition: all .5s;
        -ms-transition: all .3s;
        -moz-transition: all .3s;
        transition: all .3s;
    }

    .left-collapsible-container label:hover i {
        color: #FFF;
        font-size: 35px;
        -webkit-transition: all .5s;
        -ms-transition: all .3s;
        -moz-transition: all .3s;
        transition: all .3s;
    }


    .left-collapsible-container label:hover {
        -webkit-transition: all .5s;
        -ms-transition: all .3s;
        -moz-transition: all .3s;
        transition: all .3s;
    }

    .left-collapsible-container input:checked + label,
    .left-collapsible-container input:checked + label:hover {
        text-shadow: 0px 1px 1px rgba(0,0,0, 0.6);
        font-size: 21px;
        font-weight: bold;
        text-align: center;
        color: #FFF;
        -webkit-transition: all .5s;
        -ms-transition: all .3s;
        -moz-transition: all .3s;
        transition: all .3s;
        padding: 5px 10px;
    }

        .left-collapsible-container input:checked + label i,
        .left-collapsible-container input:checked + label:hover i {
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            transform: rotate(360deg);
        }


        .left-collapsible-container label:hover:after,
        .left-collapsible-container input:checked + label:hover:after {
            font-family: 'entypo';
            font-weight: normal;
            font-style: normal;
            text-decoration: inherit;
            -webkit-font-smoothing: antialiased;
            position: absolute;
            width: 24px;
            height: 24px;
            right: 13px;
            top: -3px;
            content: "";
        }


    .left-collapsible-container.leftside label:hover:after,
    .left-collapsible-container.leftside input:checked + label:hover:after {
        content: "";
    }


    .left-collapsible-container input:checked + label:hover:after {
        font-family: 'entypo';
        font-weight: normal;
        font-style: normal;
        text-decoration: inherit;
        -webkit-font-smoothing: antialiased;
        content: "";
    }

    .left-collapsible-container.leftside input:checked + label:hover:after {
        content: "";
    }

    .left-collapsible-container input {
        display: none;
    }


    .left-collapsible-container article {
        font-family: 'Alegreya Sans', sans-serif;
        margin-top: -1px;
        overflow: hidden;
        height: 300px;
        position: relative;
        z-index: 10;
        -webkit-transition: all 0.3s ease-in-out, box-shadow 0.6s linear;
        -moz-transition: all 0.3s ease-in-out, box-shadow 0.6s linear;
        -o-transition: all 0.3s ease-in-out, box-shadow 0.6s linear;
        -ms-transition: all 0.3s ease-in-out, box-shadow 0.6s linear;
        transition: all 0.3s ease-in-out, box-shadow 0.6s linear;
        -webkit-box-shadow: 0px 0px 2px rgba(0,0,0,.8);
        -moz-box-shadow: 0px 0px 2px rgba(0,0,0,.8);
        box-shadow: 0px 0px 2px rgba(0,0,0,.8);
    }

    .left-collapsible-container.leftside article {
        top: 300px;
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }

        .left-collapsible-container.leftside article ul.list-unstyled {
            padding: 10px 10px;
        }

            .left-collapsible-container.leftside article ul.list-unstyled li {
                border-bottom: #888888 solid 1px;
            }

                .left-collapsible-container.leftside article ul.list-unstyled li a {
                    color: Black;
                    /* font-size: 13px; */
                    text-decoration: none;
                }

                    .left-collapsible-container.leftside article ul.list-unstyled li a:hover {
                        color: #F7941D;
                    }

    .left-collapsible-container article p,
    .left-collapsible-container article h1,
    .left-collapsible-container article h2,
    .left-collapsible-container article h3,
    .left-collapsible-container article h4,
    .left-collapsible-container article h5,
    .left-collapsible-container article button {
        line-height: 24px;
        font-size: 16px;
        margin: 15px 15px 20px 15px;
    }

    .left-collapsible-container article button {
        -moz-box-shadow: 0 0 3px #888;
        -webkit-box-shadow: 0 0 3px #888;
        box-shadow: 0 0 3px #888;
        border: 0;
        background-color: #cccccc;
        cursor: pointer;
        padding: 14px;
        display: block;
    }

        .left-collapsible-container article button:hover {
            background-color: white;
            color: #000;
            -webkit-transition: all .5s;
            -ms-transition: all .5s;
            -moz-transition: all .5s;
            transition: all .5s;
        }

    .left-collapsible-container input:checked ~ article {
        -webkit-transition: all 0.5s ease-in-out, box-shadow 0.1s linear;
        -moz-transition: all 0.5s ease-in-out, box-shadow 0.1s linear;
        -o-transition: all 0.5s ease-in-out, box-shadow 0.1s linear;
        -ms-transition: all 0.5s ease-in-out, box-shadow 0.1s linear;
        transition: all 0.5s ease-in-out, box-shadow 0.1s linear;
    }


    .left-collapsible-container.leftside input:checked ~ article.collapsible-panel {
        top: -355px;

        text-align: -webkit-right;
        text-align: right;

        border: White solid 0px;
        -webkit-border-radius: 0px 10px 10px 0px;
        -moz-border-radius: 0px 10px 10px 0px;
        border-radius: 0px 10px 10px 0px;

        background:rgba(255,255,255,0.6);

        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }


    .left-collapsible-container article:before {
        content: "";
        position: fixed;
        top: -10px;
        left: 0;
        width: 100%;
        height: 10px;
        z-index: 100;
    }

    /*Color Variations*/
    .left-collapsible-container.grey label {
        background: rgb(189,195,199);
        border-color: rgb(152,163,163);
    }

        .left-collapsible-container.grey label:hover {
            background: rgb(170,183,183);
            color: #FFF;
        }

    .left-collapsible-container.grey input:checked + label,
    .left-collapsible-container.grey input:checked + label:hover {
        color: #FFFFFF;
        background: rgb(170,183,183);
    }

    .left-collapsible-container.grey article {
        background: rgb(236,240,241);
    }

        .left-collapsible-container.grey article p {
            color: #333;
        }

    .left-collapsible-container.blue label {
        background: rgb(52,152,219);
        border-color: rgb(41,128,185);
    }

        .left-collapsible-container.blue label:hover {
            background: rgb(41,128,185);
            color: #FFF;
        }

    .left-collapsible-container.blue input:checked + label,
    .left-collapsible-container.blue input:checked + label:hover {
        color: #FFFFFF;
        background: rgb(41,128,185);
    }

    .left-collapsible-container.blue article {
        background: rgb(236,240,241);
    }

        .left-collapsible-container.blue article p {
            color: #333;
        }

    .left-collapsible-container ul.taglist {
        margin: 20px;
        padding: 0;
        list-style-type: none;
    }

        .left-collapsible-container ul.taglist li {
            padding: 2px 5px;
            margin: 3px 3px 0px 0px;
            float: left;
            color: white;
            background-color: #666;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;
        }

        .left-collapsible-container ul.taglist::after {
            display: block;
            content: "";
            clear: both;
        }

    .left-collapsible-container.blue article button:hover {
        background: rgb(41,128,185);
        color: #FFF;
    }


    .left-collapsible-container.orange label {
        -webkit-border-radius: 25px 25px 0px 0px;
        -moz-border-radius: 25px 25px 0px 0px;
        border-radius: 25px 25px 0px 0px;
        /*border-color: rgb(241,196,15);*/
        /*background: rgba(255,91,0,0.7);*/
        background: rgba(247,148, 29, 0.7);
        /*-moz-box-shadow: 0 0 5px rgb(241,196,15);
	-webkit-box-shadow: 0 0 5px rgb(241,196,15);
	box-shadow: 0 0 5px rgb(241,196,15);*/
    }

        .left-collapsible-container.orange label:hover {
            background: rgb(241,196,15);
            color: #FFF;
        }

    .left-collapsible-container.orange input:checked + label,
    .left-collapsible-container.orange input:checked + label:hover {
        color: #FFFFFF;
        background: rgb(241,196,15);

        -webkit-border-radius: 0px 0px 0px 0px;
        -moz-border-radius: 0px 0px 0px 0px;
        border-radius: 0px 0px 0px 0px;
    }

    .left-collapsible-container.orange article {
        background: rgb(236,240,241);
    }

        .left-collapsible-container.orange article p {
            color: #333;
        }

        .left-collapsible-container.orange article button:hover {
            background: rgb(241,196,15);
            color: #FFF;
        }

    .left-collapsible-container.green label {
        background: rgb(26,188,156);
        border-color: rgb(22,160,133);
        -moz-box-shadow: 0 0 5px rgb(22,160,133);
        -webkit-box-shadow: 0 0 5px rgb(22,160,133);
        box-shadow: 0 0 5px rgb(22,160,133);
    }

        .left-collapsible-container.green label:hover {
            background: rgb(22,160,133);
            color: #FFF;
        }

    .left-collapsible-container.green input:checked + label,
    .left-collapsible-container.green input:checked + label:hover {
        color: #FFFFFF;
        background: rgb(22,160,133);
    }

    .left-collapsible-container.green article {
        background: rgb(236,240,241);
    }

        .left-collapsible-container.green article p {
            color: #333;
        }

        .left-collapsible-container.green article button:hover {
            background: rgb(22,160,133);
            color: #FFF;
        }


    .left-collapsible-container.dark label {
        background: rgb(5,5,5);
        color: #EEEEEE;
        border-color: rgb(20,20,20);
        -moz-box-shadow: 0 0 5px rgb(100,100,100);
        -webkit-box-shadow: 0 0 5px rgb(100,100,100);
        box-shadow: 0 0 5px rgb(100,100,100);
    }

        .left-collapsible-container.dark label:hover {
            background: rgb(50,50,50);
            color: #FFF;
        }

    .left-collapsible-container.dark input:checked + label,
    .left-collapsible-container.dark input:checked + label:hover {
        color: #FFFFFF;
        background: rgb(50,50,50);
    }

    .left-collapsible-container.dark article {
        background: rgb(20,20,20);
    }

        .left-collapsible-container.dark article p {
            color: #FFF;
        }

    .left-collapsible-container.dark .collapsible-panel i.background {
        color: rgba(255,255,255,0.15);
        -webkit-border-radius: 99px;
        -moz-border-radius: 99px;
        border-radius: 99px;
        border: 4px solid rgba(255,255,255,0.15);
        -webkit-transition: all .5s;
        -ms-transition: all .3s;
        -moz-transition: all .3s;
        transition: all .3s;
    }

    .left-collapsible-container.dark article button:hover {
        background: rgb(50,50,50);
        color: #FFF;
    }

    .left-collapsible-container.pink label {
        background: rgb(255,131,139);
        color: #EEEEEE;
        border-color: rgb(227,70,96);
        -moz-box-shadow: 0 0 5px rgb(100,100,100);
        -webkit-box-shadow: 0 0 5px rgb(100,100,100);
        box-shadow: 0 0 5px rgb(100,100,100);
    }

        .left-collapsible-container.pink label:hover {
            background: rgb(227,70,96);
            color: #FFF;
        }

    .left-collapsible-container.pink input:checked + label,
    .left-collapsible-container.pink input:checked + label:hover {
        color: #FFFFFF;
        background: rgb(227,70,96);
    }

    .left-collapsible-container.pink article {
        background: rgb(245,240,240);
    }

        .left-collapsible-container.pink article p {
            color: #999;
            z-index: 5;
        }

        .left-collapsible-container.pink article button:hover {
            background: rgb(255,131,139);
            color: #FFF;
        }