/* pure units stuff */
@media screen and (min-width: 35.5em) {
    .pure-u-sm-1,
    .pure-u-sm-1-1,
    .pure-u-sm-1-2,
    .pure-u-sm-1-3,
    .pure-u-sm-2-3,
    .pure-u-sm-1-4,
    .pure-u-sm-3-4,
    .pure-u-sm-1-5,
    .pure-u-sm-2-5,
    .pure-u-sm-3-5,
    .pure-u-sm-4-5,
    .pure-u-sm-5-5,
    .pure-u-sm-1-6,
    .pure-u-sm-5-6,
    .pure-u-sm-1-8,
    .pure-u-sm-3-8,
    .pure-u-sm-5-8,
    .pure-u-sm-7-8,
    .pure-u-sm-1-12,
    .pure-u-sm-5-12,
    .pure-u-sm-7-12,
    .pure-u-sm-11-12,
    .pure-u-sm-1-24,
    .pure-u-sm-2-24,
    .pure-u-sm-3-24,
    .pure-u-sm-4-24,
    .pure-u-sm-5-24,
    .pure-u-sm-6-24,
    .pure-u-sm-7-24,
    .pure-u-sm-8-24,
    .pure-u-sm-9-24,
    .pure-u-sm-10-24,
    .pure-u-sm-11-24,
    .pure-u-sm-12-24,
    .pure-u-sm-13-24,
    .pure-u-sm-14-24,
    .pure-u-sm-15-24,
    .pure-u-sm-16-24,
    .pure-u-sm-17-24,
    .pure-u-sm-18-24,
    .pure-u-sm-19-24,
    .pure-u-sm-20-24,
    .pure-u-sm-21-24,
    .pure-u-sm-22-24,
    .pure-u-sm-23-24,
    .pure-u-sm-24-24 {
        display: inline-block;
        *display: inline;
        zoom: 1;
        letter-spacing: normal;
        word-spacing: normal;
        vertical-align: top;
        text-rendering: auto;
    }

    .pure-u-sm-1-24 {
        width: 4.1667%;
        *width: 4.1357%;
    }

    .pure-u-sm-1-12,
    .pure-u-sm-2-24 {
        width: 8.3333%;
        *width: 8.3023%;
    }

    .pure-u-sm-1-8,
    .pure-u-sm-3-24 {
        width: 12.5000%;
        *width: 12.4690%;
    }

    .pure-u-sm-1-6,
    .pure-u-sm-4-24 {
        width: 16.6667%;
        *width: 16.6357%;
    }

    .pure-u-sm-1-5 {
        width: 20%;
        *width: 19.9690%;
    }

    .pure-u-sm-5-24 {
        width: 20.8333%;
        *width: 20.8023%;
    }

    .pure-u-sm-1-4,
    .pure-u-sm-6-24 {
        width: 25%;
        *width: 24.9690%;
    }

    .pure-u-sm-7-24 {
        width: 29.1667%;
        *width: 29.1357%;
    }

    .pure-u-sm-1-3,
    .pure-u-sm-8-24 {
        width: 33.3333%;
        *width: 33.3023%;
    }

    .pure-u-sm-3-8,
    .pure-u-sm-9-24 {
        width: 37.5000%;
        *width: 37.4690%;
    }

    .pure-u-sm-2-5 {
        width: 40%;
        *width: 39.9690%;
    }

    .pure-u-sm-5-12,
    .pure-u-sm-10-24 {
        width: 41.6667%;
        *width: 41.6357%;
    }

    .pure-u-sm-11-24 {
        width: 45.8333%;
        *width: 45.8023%;
    }

    .pure-u-sm-1-2,
    .pure-u-sm-12-24 {
        width: 50%;
        *width: 49.9690%;
    }

    .pure-u-sm-13-24 {
        width: 54.1667%;
        *width: 54.1357%;
    }

    .pure-u-sm-7-12,
    .pure-u-sm-14-24 {
        width: 58.3333%;
        *width: 58.3023%;
    }

    .pure-u-sm-3-5 {
        width: 60%;
        *width: 59.9690%;
    }

    .pure-u-sm-5-8,
    .pure-u-sm-15-24 {
        width: 62.5000%;
        *width: 62.4690%;
    }

    .pure-u-sm-2-3,
    .pure-u-sm-16-24 {
        width: 66.6667%;
        *width: 66.6357%;
    }

    .pure-u-sm-17-24 {
        width: 70.8333%;
        *width: 70.8023%;
    }

    .pure-u-sm-3-4,
    .pure-u-sm-18-24 {
        width: 75%;
        *width: 74.9690%;
    }

    .pure-u-sm-19-24 {
        width: 79.1667%;
        *width: 79.1357%;
    }

    .pure-u-sm-4-5 {
        width: 80%;
        *width: 79.9690%;
    }

    .pure-u-sm-5-6,
    .pure-u-sm-20-24 {
        width: 83.3333%;
        *width: 83.3023%;
    }

    .pure-u-sm-7-8,
    .pure-u-sm-21-24 {
        width: 87.5000%;
        *width: 87.4690%;
    }

    .pure-u-sm-11-12,
    .pure-u-sm-22-24 {
        width: 91.6667%;
        *width: 91.6357%;
    }

    .pure-u-sm-23-24 {
        width: 95.8333%;
        *width: 95.8023%;
    }

    .pure-u-sm-1,
    .pure-u-sm-1-1,
    .pure-u-sm-5-5,
    .pure-u-sm-24-24 {
        width: 100%;
    }
}

@media screen and (min-width: 48em) {
    .pure-u-med-1,
    .pure-u-med-1-1,
    .pure-u-med-1-2,
    .pure-u-med-1-3,
    .pure-u-med-2-3,
    .pure-u-med-1-4,
    .pure-u-med-3-4,
    .pure-u-med-1-5,
    .pure-u-med-2-5,
    .pure-u-med-3-5,
    .pure-u-med-4-5,
    .pure-u-med-5-5,
    .pure-u-med-1-6,
    .pure-u-med-5-6,
    .pure-u-med-1-8,
    .pure-u-med-3-8,
    .pure-u-med-5-8,
    .pure-u-med-7-8,
    .pure-u-med-1-12,
    .pure-u-med-5-12,
    .pure-u-med-7-12,
    .pure-u-med-11-12,
    .pure-u-med-1-24,
    .pure-u-med-2-24,
    .pure-u-med-3-24,
    .pure-u-med-4-24,
    .pure-u-med-5-24,
    .pure-u-med-6-24,
    .pure-u-med-7-24,
    .pure-u-med-8-24,
    .pure-u-med-9-24,
    .pure-u-med-10-24,
    .pure-u-med-11-24,
    .pure-u-med-12-24,
    .pure-u-med-13-24,
    .pure-u-med-14-24,
    .pure-u-med-15-24,
    .pure-u-med-16-24,
    .pure-u-med-17-24,
    .pure-u-med-18-24,
    .pure-u-med-19-24,
    .pure-u-med-20-24,
    .pure-u-med-21-24,
    .pure-u-med-22-24,
    .pure-u-med-23-24,
    .pure-u-med-24-24 {
        display: inline-block;
        *display: inline;
        zoom: 1;
        letter-spacing: normal;
        word-spacing: normal;
        vertical-align: top;
        text-rendering: auto;
    }

    .pure-u-med-1-24 {
        width: 4.1667%;
        *width: 4.1357%;
    }

    .pure-u-med-1-12,
    .pure-u-med-2-24 {
        width: 8.3333%;
        *width: 8.3023%;
    }

    .pure-u-med-1-8,
    .pure-u-med-3-24 {
        width: 12.5000%;
        *width: 12.4690%;
    }

    .pure-u-med-1-6,
    .pure-u-med-4-24 {
        width: 16.6667%;
        *width: 16.6357%;
    }

    .pure-u-med-1-5 {
        width: 20%;
        *width: 19.9690%;
    }

    .pure-u-med-5-24 {
        width: 20.8333%;
        *width: 20.8023%;
    }

    .pure-u-med-1-4,
    .pure-u-med-6-24 {
        width: 25%;
        *width: 24.9690%;
    }

    .pure-u-med-7-24 {
        width: 29.1667%;
        *width: 29.1357%;
    }

    .pure-u-med-1-3,
    .pure-u-med-8-24 {
        width: 33.3333%;
        *width: 33.3023%;
    }

    .pure-u-med-3-8,
    .pure-u-med-9-24 {
        width: 37.5000%;
        *width: 37.4690%;
    }

    .pure-u-med-2-5 {
        width: 40%;
        *width: 39.9690%;
    }

    .pure-u-med-5-12,
    .pure-u-med-10-24 {
        width: 41.6667%;
        *width: 41.6357%;
    }

    .pure-u-med-11-24 {
        width: 45.8333%;
        *width: 45.8023%;
    }

    .pure-u-med-1-2,
    .pure-u-med-12-24 {
        width: 50%;
        *width: 49.9690%;
    }

    .pure-u-med-13-24 {
        width: 54.1667%;
        *width: 54.1357%;
    }

    .pure-u-med-7-12,
    .pure-u-med-14-24 {
        width: 58.3333%;
        *width: 58.3023%;
    }

    .pure-u-med-3-5 {
        width: 60%;
        *width: 59.9690%;
    }

    .pure-u-med-5-8,
    .pure-u-med-15-24 {
        width: 62.5000%;
        *width: 62.4690%;
    }

    .pure-u-med-2-3,
    .pure-u-med-16-24 {
        width: 66.6667%;
        *width: 66.6357%;
    }

    .pure-u-med-17-24 {
        width: 70.8333%;
        *width: 70.8023%;
    }

    .pure-u-med-3-4,
    .pure-u-med-18-24 {
        width: 75%;
        *width: 74.9690%;
    }

    .pure-u-med-19-24 {
        width: 79.1667%;
        *width: 79.1357%;
    }

    .pure-u-med-4-5 {
        width: 80%;
        *width: 79.9690%;
    }

    .pure-u-med-5-6,
    .pure-u-med-20-24 {
        width: 83.3333%;
        *width: 83.3023%;
    }

    .pure-u-med-7-8,
    .pure-u-med-21-24 {
        width: 87.5000%;
        *width: 87.4690%;
    }

    .pure-u-med-11-12,
    .pure-u-med-22-24 {
        width: 91.6667%;
        *width: 91.6357%;
    }

    .pure-u-med-23-24 {
        width: 95.8333%;
        *width: 95.8023%;
    }

    .pure-u-med-1,
    .pure-u-med-1-1,
    .pure-u-med-5-5,
    .pure-u-med-24-24 {
        width: 100%;
    }
}

@media screen and (min-width: 58em) {
    .pure-u-lrg-1,
    .pure-u-lrg-1-1,
    .pure-u-lrg-1-2,
    .pure-u-lrg-1-3,
    .pure-u-lrg-2-3,
    .pure-u-lrg-1-4,
    .pure-u-lrg-3-4,
    .pure-u-lrg-1-5,
    .pure-u-lrg-2-5,
    .pure-u-lrg-3-5,
    .pure-u-lrg-4-5,
    .pure-u-lrg-5-5,
    .pure-u-lrg-1-6,
    .pure-u-lrg-5-6,
    .pure-u-lrg-1-8,
    .pure-u-lrg-3-8,
    .pure-u-lrg-5-8,
    .pure-u-lrg-7-8,
    .pure-u-lrg-1-12,
    .pure-u-lrg-5-12,
    .pure-u-lrg-7-12,
    .pure-u-lrg-11-12,
    .pure-u-lrg-1-24,
    .pure-u-lrg-2-24,
    .pure-u-lrg-3-24,
    .pure-u-lrg-4-24,
    .pure-u-lrg-5-24,
    .pure-u-lrg-6-24,
    .pure-u-lrg-7-24,
    .pure-u-lrg-8-24,
    .pure-u-lrg-9-24,
    .pure-u-lrg-10-24,
    .pure-u-lrg-11-24,
    .pure-u-lrg-12-24,
    .pure-u-lrg-13-24,
    .pure-u-lrg-14-24,
    .pure-u-lrg-15-24,
    .pure-u-lrg-16-24,
    .pure-u-lrg-17-24,
    .pure-u-lrg-18-24,
    .pure-u-lrg-19-24,
    .pure-u-lrg-20-24,
    .pure-u-lrg-21-24,
    .pure-u-lrg-22-24,
    .pure-u-lrg-23-24,
    .pure-u-lrg-24-24 {
        display: inline-block;
        *display: inline;
        zoom: 1;
        letter-spacing: normal;
        word-spacing: normal;
        vertical-align: top;
        text-rendering: auto;
    }

    .pure-u-lrg-1-24 {
        width: 4.1667%;
        *width: 4.1357%;
    }

    .pure-u-lrg-1-12,
    .pure-u-lrg-2-24 {
        width: 8.3333%;
        *width: 8.3023%;
    }

    .pure-u-lrg-1-8,
    .pure-u-lrg-3-24 {
        width: 12.5000%;
        *width: 12.4690%;
    }

    .pure-u-lrg-1-6,
    .pure-u-lrg-4-24 {
        width: 16.6667%;
        *width: 16.6357%;
    }

    .pure-u-lrg-1-5 {
        width: 20%;
        *width: 19.9690%;
    }

    .pure-u-lrg-5-24 {
        width: 20.8333%;
        *width: 20.8023%;
    }

    .pure-u-lrg-1-4,
    .pure-u-lrg-6-24 {
        width: 25%;
        *width: 24.9690%;
    }

    .pure-u-lrg-7-24 {
        width: 29.1667%;
        *width: 29.1357%;
    }

    .pure-u-lrg-1-3,
    .pure-u-lrg-8-24 {
        width: 33.3333%;
        *width: 33.3023%;
    }

    .pure-u-lrg-3-8,
    .pure-u-lrg-9-24 {
        width: 37.5000%;
        *width: 37.4690%;
    }

    .pure-u-lrg-2-5 {
        width: 40%;
        *width: 39.9690%;
    }

    .pure-u-lrg-5-12,
    .pure-u-lrg-10-24 {
        width: 41.6667%;
        *width: 41.6357%;
    }

    .pure-u-lrg-11-24 {
        width: 45.8333%;
        *width: 45.8023%;
    }

    .pure-u-lrg-1-2,
    .pure-u-lrg-12-24 {
        width: 50%;
        *width: 49.9690%;
    }

    .pure-u-lrg-13-24 {
        width: 54.1667%;
        *width: 54.1357%;
    }

    .pure-u-lrg-7-12,
    .pure-u-lrg-14-24 {
        width: 58.3333%;
        *width: 58.3023%;
    }

    .pure-u-lrg-3-5 {
        width: 60%;
        *width: 59.9690%;
    }

    .pure-u-lrg-5-8,
    .pure-u-lrg-15-24 {
        width: 62.5000%;
        *width: 62.4690%;
    }

    .pure-u-lrg-2-3,
    .pure-u-lrg-16-24 {
        width: 66.6667%;
        *width: 66.6357%;
    }

    .pure-u-lrg-17-24 {
        width: 70.8333%;
        *width: 70.8023%;
    }

    .pure-u-lrg-3-4,
    .pure-u-lrg-18-24 {
        width: 75%;
        *width: 74.9690%;
    }

    .pure-u-lrg-19-24 {
        width: 79.1667%;
        *width: 79.1357%;
    }

    .pure-u-lrg-4-5 {
        width: 80%;
        *width: 79.9690%;
    }

    .pure-u-lrg-5-6,
    .pure-u-lrg-20-24 {
        width: 83.3333%;
        *width: 83.3023%;
    }

    .pure-u-lrg-7-8,
    .pure-u-lrg-21-24 {
        width: 87.5000%;
        *width: 87.4690%;
    }

    .pure-u-lrg-11-12,
    .pure-u-lrg-22-24 {
        width: 91.6667%;
        *width: 91.6357%;
    }

    .pure-u-lrg-23-24 {
        width: 95.8333%;
        *width: 95.8023%;
    }

    .pure-u-lrg-1,
    .pure-u-lrg-1-1,
    .pure-u-lrg-5-5,
    .pure-u-lrg-24-24 {
        width: 100%;
    }
}

@media screen and (min-width: 75em) {
    .pure-u-xl-1,
    .pure-u-xl-1-1,
    .pure-u-xl-1-2,
    .pure-u-xl-1-3,
    .pure-u-xl-2-3,
    .pure-u-xl-1-4,
    .pure-u-xl-3-4,
    .pure-u-xl-1-5,
    .pure-u-xl-2-5,
    .pure-u-xl-3-5,
    .pure-u-xl-4-5,
    .pure-u-xl-5-5,
    .pure-u-xl-1-6,
    .pure-u-xl-5-6,
    .pure-u-xl-1-8,
    .pure-u-xl-3-8,
    .pure-u-xl-5-8,
    .pure-u-xl-7-8,
    .pure-u-xl-1-12,
    .pure-u-xl-5-12,
    .pure-u-xl-7-12,
    .pure-u-xl-11-12,
    .pure-u-xl-1-24,
    .pure-u-xl-2-24,
    .pure-u-xl-3-24,
    .pure-u-xl-4-24,
    .pure-u-xl-5-24,
    .pure-u-xl-6-24,
    .pure-u-xl-7-24,
    .pure-u-xl-8-24,
    .pure-u-xl-9-24,
    .pure-u-xl-10-24,
    .pure-u-xl-11-24,
    .pure-u-xl-12-24,
    .pure-u-xl-13-24,
    .pure-u-xl-14-24,
    .pure-u-xl-15-24,
    .pure-u-xl-16-24,
    .pure-u-xl-17-24,
    .pure-u-xl-18-24,
    .pure-u-xl-19-24,
    .pure-u-xl-20-24,
    .pure-u-xl-21-24,
    .pure-u-xl-22-24,
    .pure-u-xl-23-24,
    .pure-u-xl-24-24 {
        display: inline-block;
        *display: inline;
        zoom: 1;
        letter-spacing: normal;
        word-spacing: normal;
        vertical-align: top;
        text-rendering: auto;
    }

    .pure-u-xl-1-24 {
        width: 4.1667%;
        *width: 4.1357%;
    }

    .pure-u-xl-1-12,
    .pure-u-xl-2-24 {
        width: 8.3333%;
        *width: 8.3023%;
    }

    .pure-u-xl-1-8,
    .pure-u-xl-3-24 {
        width: 12.5000%;
        *width: 12.4690%;
    }

    .pure-u-xl-1-6,
    .pure-u-xl-4-24 {
        width: 16.6667%;
        *width: 16.6357%;
    }

    .pure-u-xl-1-5 {
        width: 20%;
        *width: 19.9690%;
    }

    .pure-u-xl-5-24 {
        width: 20.8333%;
        *width: 20.8023%;
    }

    .pure-u-xl-1-4,
    .pure-u-xl-6-24 {
        width: 25%;
        *width: 24.9690%;
    }

    .pure-u-xl-7-24 {
        width: 29.1667%;
        *width: 29.1357%;
    }

    .pure-u-xl-1-3,
    .pure-u-xl-8-24 {
        width: 33.3333%;
        *width: 33.3023%;
    }

    .pure-u-xl-3-8,
    .pure-u-xl-9-24 {
        width: 37.5000%;
        *width: 37.4690%;
    }

    .pure-u-xl-2-5 {
        width: 40%;
        *width: 39.9690%;
    }

    .pure-u-xl-5-12,
    .pure-u-xl-10-24 {
        width: 41.6667%;
        *width: 41.6357%;
    }

    .pure-u-xl-11-24 {
        width: 45.8333%;
        *width: 45.8023%;
    }

    .pure-u-xl-1-2,
    .pure-u-xl-12-24 {
        width: 50%;
        *width: 49.9690%;
    }

    .pure-u-xl-13-24 {
        width: 54.1667%;
        *width: 54.1357%;
    }

    .pure-u-xl-7-12,
    .pure-u-xl-14-24 {
        width: 58.3333%;
        *width: 58.3023%;
    }

    .pure-u-xl-3-5 {
        width: 60%;
        *width: 59.9690%;
    }

    .pure-u-xl-5-8,
    .pure-u-xl-15-24 {
        width: 62.5000%;
        *width: 62.4690%;
    }

    .pure-u-xl-2-3,
    .pure-u-xl-16-24 {
        width: 66.6667%;
        *width: 66.6357%;
    }

    .pure-u-xl-17-24 {
        width: 70.8333%;
        *width: 70.8023%;
    }

    .pure-u-xl-3-4,
    .pure-u-xl-18-24 {
        width: 75%;
        *width: 74.9690%;
    }

    .pure-u-xl-19-24 {
        width: 79.1667%;
        *width: 79.1357%;
    }

    .pure-u-xl-4-5 {
        width: 80%;
        *width: 79.9690%;
    }

    .pure-u-xl-5-6,
    .pure-u-xl-20-24 {
        width: 83.3333%;
        *width: 83.3023%;
    }

    .pure-u-xl-7-8,
    .pure-u-xl-21-24 {
        width: 87.5000%;
        *width: 87.4690%;
    }

    .pure-u-xl-11-12,
    .pure-u-xl-22-24 {
        width: 91.6667%;
        *width: 91.6357%;
    }

    .pure-u-xl-23-24 {
        width: 95.8333%;
        *width: 95.8023%;
    }

    .pure-u-xl-1,
    .pure-u-xl-1-1,
    .pure-u-xl-5-5,
    .pure-u-xl-24-24 {
        width: 100%;
    }
}

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

/*
 * -- BASE STYLES --
 * Most of these are inherited from Base, but I want to change a few.
 */
body {
    line-height: 1.7em;
    color: #7f8c8d;
    font-size: 13px;
}

h1,
h2,
h3,
h4,
h5,
h6,
label {
    color: #34495e;
}

.pure-img-responsive {
    max-width: 100%;
    height: auto;
}

/*
 * -- LAYOUT STYLES --
 * These are some useful classes which I will need
 */
.l-box {
    padding: 1em;
}

.l-box-lrg {
    padding: 2em;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.is-center {
    text-align: center;
}



/*
 * -- PURE FORM STYLES --
 * Style the form inputs and labels
 */
.pure-form label {
    margin: 1em 0 0;
    font-weight: bold;
    font-size: 100%;
}

.pure-form input[type] {
    border: 2px solid #ddd;
    box-shadow: none;
    font-size: 100%;
    width: 100%;
    margin-bottom: 1em;
}

/*
 * -- PURE BUTTON STYLES --
 * I want my pure-button elements to look a little different
 */
.pure-button {
    background-color: #1f8dd6;
    color: white;
    padding: 0.5em 2em;
    border-radius: 5px;
}

a.pure-button-primary {
    background: white;
    color: #1f8dd6;
    border-radius: 5px;
    font-size: 120%;
}


/*
 * -- MENU STYLES --
 * I want to customize how my .pure-menu looks at the top of the page
 */

.home-menu {
    padding: 0.5em;
    text-align: center;
    box-shadow: 0 1px 1px rgba(0,0,0, 0.10);
}
.home-menu.pure-menu-open {
    background: #2d3e50;
}
.pure-menu.pure-menu-open.pure-menu-fixed {
    /* Fixed menus normally have a border at the bottom. */
    border-bottom: none;
    /* I need a higher z-index here because of the scroll-over effect. */
    z-index: 4;
}

.home-menu .pure-menu-heading {
    color: white;
    font-weight: 400;
    font-size: 120%;
}

.home-menu .pure-menu-selected a {
    color: white;
}

.home-menu a {
    color: #6FBEF3;
}
.home-menu li a:hover,
.home-menu li a:focus {
    background: none;
    border: none;
    color: #AECFE5;
}


/*
 * -- SPLASH STYLES --
 * This is the blue top section that appears on the page.
 */

.splash-container {

    background: transparent url('/static/img/jardin-flou.jpg') 0 0 no-repeat fixed;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/static/img/jardin-flou.jpg', sizingMethod='scale');
    text-shadow: 0 1px 1px black;
/*
    background: #1f8dd6;
*/

    z-index: 1;
    overflow: hidden;
    /* The following styles are required for the "scroll-over" effect */
    width: 100%;
    height: 60%;
    top: 0;
    left: 0;
    position: fixed !important;
}

.splash {
    /* absolute center .splash within .splash-container */
    width: 80%;
    height: 50%;
    margin: auto;
    position: absolute;
    top: 70px; left: 0; bottom: 0; right: 0;
    text-align: center;
    /*text-transform: uppercase;*/
}

/* This is the main heading that appears on the blue section */
.splash-head {
    text-transform: uppercase;
    font-size: 18px;
    font-weight: bold;
    color: white;
    border: 4px solid white;
    padding: 1em 1.6em;
    font-weight: 100;
    border-radius: 5px;
    line-height: 1em;
    margin: auto;
}

/* This is the subheading that appears on the blue section */
.splash-subhead {
    color: white;
    font-size: 18px;
    letter-spacing: 0.05em;
    opacity: 0.9;
}

/*
 * -- CONTENT STYLES --
 * This represents the content area (everything below the blue section)
 */
.content-wrapper {
    /* These styles are required for the "scroll-over" effect */
    position: absolute;
    top: 60%;
    width: 100%;
    min-height: 12%;
    z-index: 2;
    background: white;

}

/* This is the class used for the main content headers (<h2>) */
.content-head {
    font-weight: 400;
    /*text-transform: uppercase;*/
    letter-spacing: 0.1em;
    margin: 2em 0 1em;
}

/* This is a modifier class used when the content-head is inside a ribbon */
.content-head-ribbon {
    color: white;
}

/* This is the class used for the content sub-headers (<h3>) */
.content-subhead {
    color: #1f8dd6;
}
    .content-subhead i {
        margin-right: 7px;
    }

/* This is the class used for the dark-background areas. */
.ribbon {
    background: #2d3e50;
    color: #aaa;
}

/* This is the class used for the footer */
.footer {
    background: #111;
}

/*
 * -- TABLET (AND UP) MEDIA QUERIES --
 * On tablets and other medium-sized devices, we want to customize some
 * of the mobile styles.
 */
@media (min-width: 48em) {

    /* We increase the body font size */
    body {
        font-size: 16px;
    }
    /* We want to give the content area some more padding */
    .content {
        padding: 1em;
    }

    /* We can align the menu header to the left, but float the
    menu items to the right. */
    .home-menu {
        text-align: left;
    }

    .home-menu ul {
        float: right;
    }

    /* We increase the height of the splash-container */
    /* .splash-container {
        height: 500px;
    }*/

    /* We decrease the width of the .splash, since we have more width
    to work with */
    .splash {
        /*width: 50%;*/
        height: 50%;
    }

    .splash-head {
        width: 65%;
        font-size: 250%;
    }


    /* We remove the border-separator assigned to .l-box-lrg */
    .l-box-lrg {
        border: none;
    }

}

/*
 * -- DESKTOP (AND UP) MEDIA QUERIES --
 * On desktops and other large devices, we want to over-ride some
 * of the mobile and tablet styles.
 */
@media (min-width: 78em) {
    /* We increase the header font size even more */
    .splash-head {
        font-size: 300%;
    }
}

/** My changes **/
.minicode {
    padding: 2px 5px;
    border-radius: 3px;
    background-color: #DEDEDE;
    color: #2D2D2D;
    text-shadow: 1px 1px 1px white;
}

a.gpg-key {
    color: #6397A5;
    text-decoration: none;
}

textarea {
    width: 100%;
}

h3.content-subhead a {
    text-decoration: none;
    color: #1f8dd6;
}

a.bluelink {
    text-decoration: none;
    color: #1f8dd6;
}

a.bluelink:hover {
    color: #53B1EF;
}

.portrait-photo {
    border-radius: 150px;
    box-shadow: 0px 0px 10px black;
}

.rotate {
    -webkit-transition-duration: 0.6s;
    -moz-transition-duration: 0.6s;
    -o-transition-duration: 0.6s;
    transition-duration: 0.6s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    overflow:hidden;
}

.rotate:hover {
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
}

#map-container {
    display: inline-block;
    position: relative;
    width: 100%;
}

#map-container:after {
    content: '';
    display: block;
    margin-top: 100%;
}

#map, #map-big {
    /*margin: auto;*/
    /*border-radius: 1000px;*/
    box-shadow: 0px 0px 10px black;
    /*width: 300px;*/
    /*height: 300px;*/

    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: silver;
}

.map-big-container {
    height: 80%;
}

.pure-button-green {
    background-color: #48D97E;
    /*color: #2D2D2D;*/
}