/* ==========================================================================
   iconography
   ========================================================================== */
.iconography { float: right; display: inline-block; margin: .28rem 0 0 0; }
.iconography span { display: inline-block; margin: 0 0 0 .3rem; vertical-align: middle; }
.iconography:empty { display: none; }

.iconography .media-icons { position: relative; margin: .45rem 0 0 .3rem; vertical-align: top; }
.iconography .media { font-size: 0; position: relative; }
.iconography .media:before { opacity: .5; }
.iconography .media.hover .triangle:before { position: absolute; content: ''; border-top: 9px solid transparent; border-bottom: 9px solid #fff; border-left: 9px solid transparent; border-right: 9px solid transparent; top: 14px; right: 5px; z-index: 12; }
.iconography .media.hover .triangle:after { position: absolute; content: ''; border-top: 10px solid transparent; border-bottom: 10px solid #e5e5e5; border-left: 10px solid transparent; border-right: 10px solid transparent; top: 12px; right: 4px; z-index: 11; }
.iconography .tooltip { display: none; text-align: left; border: 1px solid #e5e5e5; box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1); background: #fff; font-weight: 400; color: #5d5c5c; padding: 8px 14px 8px 14px; height: auto; position: absolute; right: 0; font-size: 10px; border-radius: 3px; width: auto; top: 32px; margin: auto; left: auto; bottom: auto; z-index: 10; white-space: nowrap; }
.iconography .media.hover:before { opacity: 1; }
.iconography .media.hover + .tooltip { display: block; }

.iconography .updated { cursor: pointer; padding: .33rem; margin: -.13rem 0 0 .8rem; color: #d96500; font-style: italic; text-transform: uppercase; font-size:  1.27rem; font-weight: 400; line-height: 1.1; position: relative; }
.iconography .updated .changes, .updated .hide-changes { font-size: .77rem; color: #999; margin: 0; text-transform: none; font-style: normal; }
.iconography .updated .changes { display: block; }
.iconography .updated .hide-changes { display: none; }
.iconography .updated:hover { color: #f77700; }
.iconography .new { color: #d96500; font-style: italic; text-transform: uppercase; font-size:  1.27rem; font-weight: 400; line-height: 1.1; }
.iconography .pipe { border-right: 1px solid #e5e5e5; margin: 0 .6rem; height: 26px; }
.iconography .experimental { font-size: 1rem; color: #848484; text-transform: uppercase; letter-spacing: 0; position: absolute; top: -1rem; left: 0; font-weight: 600; margin: 0; }
.iconography .experimental .text { color: #136eb7; margin: 0; vertical-align: top; top: 1px; position: relative; }

/* ==========================================================================
   responsive breakpoint styles
   ========================================================================== */

/* styles for small screens (600px)
   ========================================================================== */

@media all and (max-width: 600px) {
    .iconography .updated { top: 0; right: 0; position: absolute; }
}

/* styles for small screens (500px)
   ========================================================================== */

@media all and (max-width: 500px) {
    .iconography .updated { top: -.1rem; right: 0; position: absolute; }
}