/**
 * RESET
 * Reference: http://meyerweb.com/eric/tools/css/reset/
 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
    display: block;
}

body {
    line-height: 1.618;
    font-family: Arial, Helvetica, sans-serif;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

a {
    text-decoration: none;
}

/**
 * BASIC TYPE
 */

p {
    margin: 0 0 1em;
}

h1, h2, h3, h4 {
    margin: .5em 0 .75em;
    line-height: 1.3;
}

h1 {
    font-size: 1.5em;
}

h2 {
    font-size: 1.25em;
}

h3 {
    font-size: 1.125em;
}

h4 {
    font-size: 1em;
}

/**
 * BOX HACKING
 */

html {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
    -moz-box-sizing: inherit;
    -webkit-box-sizing: inherit;
}

/**
 * CLEAR FLOATS
 * Reference: http://w3bits.com/clearfix
 */

.cf:after {
    content: "";
    display: table;
    clear: both;
}

/**
 * CONTENT WRAPPER
 */

.wrapper {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (min-width: 1366px) {
    .wrapper {
        width: 1080px;
    }
}

/**
 * ICON SYSTEM
 */

.icon {
    height: 1em;
    width: 1em;
    display: inline-block;
    vertical-align: middle;
    fill: currentColor;
}

.icon-reverse {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

/**
 * BUTTONS
 */

.buttons {
    margin: 1.5em 0;
}

.button {
    padding: 1em 1.5em;
    color: rgba(255, 255, 255, 0.75);
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

.button:hover {
    color: rgba(255, 255, 255, 0.9);
}

.green-sea {
    background: #16a085;
}

.button.green-sea:hover {
    background: #1abc9c;
}

.belize-hole {
    background: #2980b9;
}

.button.belize-hole:hover {
    background: #3498db;
}

.pomegranate {
    background: #c0392b;
}

.button.pomegranate:hover {
    background: #e74c3c;
}

/**
 * HYPERLINKS & NAVIGATION
 */

a {
    color: #555;
}

.lab-nav {
    width: 100%;
}

.lab-nav--fixed {
    position: fixed;
}

.lab-nav--top {
    top: 0;
}

.lab-nav--bottom {
    bottom: 0;
}

.lab-nav,
.lab-follow {
    font-size: 13px;
    line-height: 1;
}

.lab-nav--light,
.lab-follow--light {
    background: rgba(0, 0, 0, 0.05);
}

.lab-nav--light,
.lab-follow--light,
.lab-nav--light a,
.lab-follow--light {
    color: rgba(0, 0, 0, 0.35);
}

.lab-nav--light a:hover,
.lab-nav--light a:active,
.lab-nav--light a:focus,
.lab-follow--light:hover,
.lab-follow--light:active,
.lab-follow--light:focus {
    background: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.5);
}

.lab-nav--dark,
.lab-follow--dark {
    background: rgba(255, 255, 255, 0.05);
}

.lab-nav--dark,
.lab-follow--dark,
.lab-nav--dark a {
    color: rgba(255, 255, 255, 0.35);
}

.lab-nav--dark a:hover,
.lab-nav--dark a:active,
.lab-nav--dark a:focus,
.lab-follow--dark:hover,
.lab-follow--dark:active,
.lab-follow--dark:focus {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
}

.lab-follow,
.lab-article-link,
.lab-share a {
    padding: .75em;
    display: inline-block;
    vertical-align: bottom;
    text-decoration: none;
}

.lab-follow,
.lab-article-link span,
.lab-share-link span {
    letter-spacing: 1px;
    text-transform: uppercase;
}

.lab-follow {
    display: none;
}

.lab-follow .icon {
    vertical-align: top;
}

.lab-article-link {
    float: left;
}

.lab-share {
    float: right;
    text-align: right;
}

.lab-share ul {
    margin: 0;
}

.lab-share li {
    display: inline;
    margin: 0;
}

.lab-article-button {
    font-weight: 700;
    display: block;
    margin: 2em 0 0;
    padding: 1.25em;
    text-align: center;
    color: #CAD0DC;
    border: 3px solid #D1D8DE;
}

/**
 * BUP
 */

.bup {
    margin-bottom: 2.5em;
}

.bup-cb {
    display: none;
}

/**
 * MEDIA SETTINGS
 */

@media only screen and (min-width: 1024px) {
    h1 {
        font-size: 2em;
    }
    h2 {
        font-size: 1.65em;
    }
    h3 {
        font-size: 1.25em;
    }
    h4 {
        font-size: 1em;
    }

    .bup {
        display: inline-block;
        position: fixed;
        right: 0;
        top: 5.5em;
	padding: 7px;
	z-index: 7000;
	background: white;
    }

    .bup-cb {
        display: inline-block;
	cursor: pointer;
        line-height: 1;
        padding: 7px 0;
	font-size: 12px;
	width: 28px;
	text-align: center;
	position: absolute;
	top: -15px;
	left: -15px;
	background: white;
	z-index: 5000;
	border-radius: 50%;
    }
}

@media only screen and (max-width: 767px) {
    .lab-article-link span,
    .lab-share span {
        display: none;
    }
}

@media only screen and (min-width: 1024px) {
    .lab-follow {
        display: inline-block;
        position: fixed;
        right: -34px;
        bottom: 20%;
        transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
    }
}

@media only screen and (max-width: 1023px) and (min-width: 768px) {
    h1 {
        font-size: 1.75em;
    }
    h2 {
        font-size: 1.45em;
    }
}

@media only screen and (max-width: 767px) {
    .lab-share {
        text-align: right;
    }
}