@media only screen and (-webkit-max-device-pixel-ratio: 1) and (max-width: 600px), not all {
        .i-examples-container{
            width: 98%;
            margin: 1%;
        }
        .i-examples-sidebar{
            display: none;
        }
}

.i-examples{
    width: 100%;
    &-layout{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        flex-grow: 1;
        justify-content: flex-start;
        align-items: stretch;
        height: 100%;
    }
    &-sidebar{
        flex-shrink: 0;
        overflow-y: scroll;
        background: #fff;
        width: 200px;
        padding: 15px 0 30px 30px;
        border-right: 1px solid #bbb;
        box-shadow: 0 0 20px #ccc; -webkit-box-shadow: 0 0 20px #ccc; -moz-box-shadow: 0 0 20px #ccc;
    }

    &-container{
        overflow-y: scroll;
        padding: 0 2em;
        width: 100%;
    }

    &-menu{
        list-style-type: none;
        & .toc-title, & .toc-title:visited {
            display: inline-block;
            color: black;
            font-weight: bold;
            margin-top: 15px;
            &:first-letter {
                text-transform: uppercase;
            }
            .version{
                font-size: .9em;
                font-weight: normal;
            }
        }

        & .toc-link{
            &-section{
                font-size: .9em;
                line-height: 1em;
            }
            font-size: .8em;
            line-height: 1.2em;
            text-decoration: none;
            color: #000;
        }

        &.block &-item{
            margin-top: 0em;
            line-height: 1em;
        }

        &-item{
            margin-top: .2em;

            &__packages-selector{

                display: flex;

                .i-button{
                    padding: 0;
                    border: 0;
                }

                .i-button:hover{
                    background-color: #FFEBA0;
                }

                .i-select > .i-button, .i-select__option{
                    display: flex;
                }

                &-option{
                    display: flex;
                    justify-content: space-between;
                    width: 130px;
                    .name::before{
                        box-sizing: border-box;
                        content: '';
                        display: inline-flex;
                        height: .9em;
                        width: .9em;
                        border-left: .5em solid white;
                        border-top: .2em solid white;
                        margin: .4em;
                        margin-right: .6em;
                        border-right: .18em solid white;
                        box-shadow: 0px 0px 0px 3px #CB3837;
                        background: #CB3837;
                    }
                }
            }

            &__packages-kitty &__packages-selector-option{
                font-size: .9em;
            }
        }
    }

    &-content{
        max-width: 550px;
        list-style-type: none;

        &-item{
            margin: 1em 0;
            margin-bottom: 2em;

            &__body{
                width: 80%;
            }
            &__section{
                width: 80%;
            }
            &__title{

                font-size: 1.35em;
                display: flex;
                padding-top: 1em;
                padding-bottom: 1em;
                &-head{
                    flex-grow: 1;
                }
                &-one{
                    font-size: .9em;
                    text-decoration: none;
                    color: #999;
                }   
            }
            .nb{
                font-size: 12px;
                line-height: 18px;
                font-style: italic;
            }
            .definitions{
                list-style: circle;
                padding-left: 15px;
                font-size: 13px;
                line-height: 18px;
            }
        }
    }
}

.i-pseudo{
    display: inline-block;
    border-bottom: 1px dashed #000;
    color: #000;
    cursor: pointer;
}

.i-example{
    &__list{
        list-style-type: none;
        &-item{
            margin-bottom: 1.5em;
            display: flex;
            flex-direction: column;
            align-items: baseline;
        }
        &-item>*{
            margin-right: 1em;
        }
    }


    &-test{
        order: 3;
        margin-top: 1em;
        &__run{
            border: 0px;
            background-color: rgba(0, 0, 0, 0.1);
            padding: 0 .5em;
            border-top-left-radius: .2em;
            border-top-right-radius: .2em;
            padding-right: .6em;
            color: black;
            text-shadow: 0 1px 0px rgba(255, 255, 255, 1);
        }
        &__run:hover{
            color: red;
        }
    }

    &-prism{
        order:2;
    }

    &-container{
        order:1;
        margin-bottom: .5em;
    }

    &-suite{
        width: 100%;
        margin-bottom: 4em;
        p{
            margin: 0;
        }
    }

    &-code{
        margin-bottom: 2em;
        display: flex;
        flex-direction: column;

        &__header{
            order:0;
            font-size: 1em;
            font-weight: normal;
            line-height:3em;
        }

        &__run-test{
            font-size: .8em;
            line-height: .9em;
        }
    }
}