/* The important bit */
/* Setup fast transitions */

.mq {
    -webkit-transition: width 0.001ms;
    -moz-transition: width 0.001ms;
    -o-transition: width 0.001ms;
    transition: width 0.001ms;
    width: 0;
}

/* Extra niceties  */
/*************************************************/

.listener-output {
    width: 640px;
    margin: 0 auto 200px;
    text-shadow: 0 1px 0 #fff;
    text-align: center;
}

.dynamic {
    font-size: 14px;
    font-weight: normal;
}

.dynamic p {
    margin-bottom: 0;
}

.dynamic p:first-child {
    font-weight: bold;
    margin-bottom: 6px;
}

.dynamic p:nth-child(n+5) {
    opacity: 0.8;
}

.dynamic p:nth-child(n+10) {
    opacity: 0.4;
}

.dynamic p:nth-child(n+20) {
    opacity: 0.1;
}

section h2 {
    font-size: 24px;
    line-height: 36px;
}

@media all and (max-width: 740px) {
    .listener-output {
        width: auto;
        margin: 20px;
        -webkit-transition: none; /* make transition event one direction only */
        -moz-transition: none;
        transition: none;
    }
}
