fsfe-website/look/style.less

@import "bootstrap/bootstrap.less";

// ============================================================================
// very generic elements
// ============================================================================

body {
    @media (min-width: @screen-lg-min) {
        font-size: ceil(@font-size-base * 1.1428); // ~16px
    }
}

hr {
    clear: both;
}

.list-no-style {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.quote {
    font-family: @font-family-serif;
}

.fr q, .el q {
    quotes: "« " " »" "“" "”";
}
.de q {
    quotes: "„" "“" "," "‘";
}
q, .en q {
    .quote;
    quotes: "“" "”" "‘" "’";
}

.action a, .action a:hover{
    .btn;
    .btn-lg;
    .btn-primary;
}

.n {
    .hide;
}


/* Typography */

h1, .h1 {
    .page-header;
    color: @brand-strong;
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
    font-weight: 400;
}

// Inherit the non-standard font settings into form controls.
.form-control, .btn {
    font-weight: inherit;
    font-size: inherit;
    height: auto;
}


// ----------------------------------------------------------------------------
// Classes to place a decorative image beside a block element
// ----------------------------------------------------------------------------

// Common styles for images on the left or right side
.with-image() {
    .make-row();

    // The image must be the first child of the .with-image-* container, and
    // takes 1/4 of the total width. On XS sized screens, it will go above the
    // text.
    > img:first-child {
        display: block;
        margin-top: 5px;
        margin-bottom: 10px;
        .make-sm-column(3);
        @media (max-width: @screen-xs-max) {
            width: 180px;       // includes grid padding of 30px!
            margin-left: auto;
            margin-right: auto;
        }
    }

    // All other children of the .with-image-* container take 3/4 of the total
    // width.
    > :nth-child(n+2) {
        .make-sm-column(9);
    }
}

// Image on the left side of text
.with-image-left {
    .with-image();

    // The second child element will go beside the image. All further children
    // (starting with #3) need an explicit offset to go below the second.
    > :nth-child(n+3) {
        .make-sm-column-offset(3);
    }
}

// Image on the right side of text
.with-image-right {
    .with-image();

    // The image is pushed to the right side...
    > img:first-child {
        .make-sm-column-push(9);
    }

    // ...and the text pulled to the left side.
    > :nth-child(2) {
        .make-sm-column-pull(3);
    }

    // Need an explicit clear below the image
    > :nth-child(3) {
        clear: both;
    }
}


// ============================================================================
// Page structure and grids
// ============================================================================

#translations, #top, #notifications, #main, #followup, #page-info {
    .container;
}

div#subpages, {
    .make-row();
    padding-bottom: 1em;
    .half {
        .make-sm-column(6);
    }
}

// ----------------------------------------------------------------------------
// Translation selector
// ----------------------------------------------------------------------------

#translations {
    .collapse;
    .fade;
    background: @body-bg;
    border-bottom: 1px solid @gray-light;
    position: absolute;
    width: 100%;
    z-index: 1000;
    transition: display 0.15s linear 0s, opacity 0.15s linear 0s;

    a.close {.pull-right;.make-md-column(1);}
    a.contribute-translation {
        .make-xs-column(12);
        .make-md-column(2);
    }

    ul {
        .list-no-style;
        .make-xs-column(12);
        .make-md-column(9);
    }

    li {
    	display: inline-block;
        margin-right: .5em;
    }
    li:before {
        content: "› ";
    }
}

.no-js #translations {
    .collapse.in;
    .fade.in;
    position: relative;
    font-size: 0.8em;

    a.close {display: none;}
}

// ----------------------------------------------------------------------------
// Page header
// ----------------------------------------------------------------------------

#top {
    @media (max-width: @screen-xs-max) {
        padding: 0;
    }
}

#masthead {
    margin: 19px 16px 29px 16px;

    @media (max-width: @screen-xs-max) {
        margin: 0;
        background-color: @body-bg;
        padding: 10px;
    }

    @media (min-width: @screen-sm-min) {
        .pull-left;
    }
}

#logo {
    display: block;
    height: 85px;
    width: 158px;
    background: url(/graphics/logo_transparent.svg) top left no-repeat;

    @media (max-width: @screen-xs-max) {
        height: 50px;
        width: 93px;
        background-size: contain;
    }

    span {
        display: none;
    }
}

#motto {
    color: @brand-strong;
    font-size: 18px;
    font-weight: 500;
    padding-left: 52px;

    @media (min-width: @screen-xs-min) {
        br {
            display: none;
        }
    }

    @media (max-width: @screen-xs-max) {
        padding-left: 30px;
    }
}

#menu {
    text-align: right;

    @media (max-width: @screen-xs-max) {
        background-color: @body-bg;
        padding: 5px 10px 10px 10px;
    }

    @media (min-width: @screen-sm-min) {
        .pull-right;
    }

    p {
        display: none;
    }
}

#direct-links {
    .list-inline;
    .clearfix;

    @media (min-width: @screen-sm-min) {
        margin-bottom: 2em;
    }

    li {
        display: none;
        padding: .5em;

        .fa {
            padding-right: .3em;
        }
    }

    #direct-to-menu-list {
        @media (max-width: @screen-xs-max) {
            display: inline-block;
            .pull-left;
            font-size: 1.3em;
        }
    }

    #direct-to-translations, #direct-to-login {
        display: inline-block;
    }
}

.no-js #direct-links {
    #direct-to-translations, #direct-to-menu-list {
        display: none;
    }
}

#menu-list {
    .list-no-style;
    .collapse;
    padding-bottom: 1.5em;

    @media (max-width: @screen-xs-max) {
        display: block;
        margin-top: 10px;
        padding-bottom: 0;
        text-align: left;
    }

    @media (min-width: @screen-xs-min) {
        .collapse.in;
        padding-bottom: 0.5em;
    }

    li {
        display: inline-block;

        a {
            .btn;
            font-weight: 400;

            @media (min-width: @screen-lg-min) {
                .btn-lg;
            }
        }
        a:hover {
            .btn-primary;
            background-color: @brand-strong-semialpha;
        }
    }
}

.no-js #menu-list {
    .collapse.in;

    @media (min-width: @screen-xs-min) {
        padding-bottom: 0.5em;
    }
}

// ----------------------------------------------------------------------------
// Page body
// ----------------------------------------------------------------------------

/* grid */
.article {
    #content {
        .make-xs-column(12);
        .make-md-column(8);
        padding-left: 0;
    }
    #sidebar {
        .make-xs-column(12);
        .make-md-column(4);
        padding-right: 0;
    }
}

#main, #followup {
    background: @body-bg;
    margin: 1em auto;
    padding: 1.5em;
    font-size: 1.1em;
    box-shadow: 0 .4em 1em rgb(200,200,200);

    @media (min-width: @screen-sm-min) {
        padding: 3em;
    }
}

#main {
    padding-top: 1em;

    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
        -moz-hypens: manual;
        -webkit-hyphens: manual;
        hyphens: manual;
    }

    p {
        -moz-hyphens: auto;
        -webkit-hyphens: auto;
        hyphens: auto;
    }

    footer#tags {
        .small;
        margin: 3em 0 -2em 0;
        clear: both;

        h2 {
            .text-muted;
            font-weight: normal;
            font-size: inherit;
            margin-right: 5px;
            display: inline;

            &::after {
                content: ":";
            }
        }

        ul.tags {
            .list-inline;
            display: inline;

            li {
                white-space: nowrap;

                a {
                    padding: 4px;
                    border-radius: 4px;
                    background: lighten(@brand-primary,40%);
                    margin-bottom: .3em; /* in case there are 2 lines of tags */
                    display: inline-block;
                }
            }
        }
    }

    form.share-buttons {
        // Modify spacing originally set in upstream CSS.
        margin-top: 4em;
        margin-bottom: -2em;
    }

    footer.notice {
        .clearfix;
        clear: both;
        margin: 3em -1.5em -3em;
        background: @gray-lighter;
        color: @gray;
        padding: 1em;

        a {color: @gray-dark;}

        @media (min-width: @screen-sm-min) {
            margin: 3em -3em -3em;
        }
    }

    footer.copyright.notice {
        min-height: 30px;
        a {color: @gray;}
    }
    footer.creativecommons {
        background: url(/graphics/cc-logo.png) 2em 50% no-repeat @gray-lighter;
        padding-left: 150px;
    }
}

#content {
    max-width: 99ex;
    margin-left: auto;
    margin-right: auto;
}

#sidebar {
    color: @gray-light;
    padding: 2em 0;

    ul {
        .list-no-style;
        margin-bottom: 1em;

        li {
            border-bottom: 1px solid @gray-lighter;
            padding: .3em 0;
        }
    }
}


/* elements inside content */

#category {
    background: lighten(@brand-primary,40%);
    display: block;
    width:42%;
    padding: .5em;
    margin: -2em 0 0;

    a:before {
            content: "‹ ";
    }
}


#article-metadata {
    font-weight: 300;
    margin-bottom: 1.5em;

    img {
        height: 24px;
        margin: -0.2em 0.2em -0.2em;
        box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
    }

    time.dt-updated:after {
        content: ", ";
    }
    time.dt-updated:last-child:after {
        content: ".";
    }
}

#introduction {
    p {
        font-weight: 300;
        font-size: 1.1em;

        strong {
            font-weight: 500;
        }
    }
}


#content {
    aside {
        @media (min-width: @screen-md-min) {
            float: right;
            margin-left: 100%;
            position: absolute;

            p {
                width: 100%;
                min-width: 320px;
                max-width: 340px;
            }
        }
        p {
            border-left: 1px solid @brand-primary;
            padding-left: 1em;
            font-size: 0.9em;
        }
    }


    blockquote,
    .blockQuote {
        .quote;
        border: 0;
        padding-top: 20px;
        padding-bottom: 20px;
        /* does not work, weird: background-color: lighten(@brand-secondary, 77%);*/
        background-color: rgba(116, 140, 156, 0.23);

        p {
            line-height: 1.35;
        }

        footer {
            cite {
                font-style: italic;
            }
        }

        & + & {
            margin-top: -1.3em;
        }
    }

    pre, pre code {
        white-space: pre;
    }

    pre {
        font-size: 1em;
        padding-left: 3em;
        border-style: dotted;
        border-width: 1px 1px 1px 0px;
        border-radius: 0;
        overflow-x: auto;

        code {
            font-size: 0.95em;
        }
    }

    pre.term {
        background: #0C141F;
        color: #E6FFFF;

        code:before {
            content: "$ ";
        }
    }

    img {
        max-width: 100%;
    }

    .captioned {
        text-align: center;

        img {
            margin: 0 auto;
            display: block;
            box-shadow: 0.2em 0.2em 1em rgba(0,0,0,0.3)
        }

        header, footer, img + p {
            padding: 10px 15px;
        }

        header, footer {
            text-align: left;
            display: block;

            p {
                margin: 5px;
            }
        }

        footer, img + p {
            background: @gray-lighter;
            font-weight: 300;
        }

        img + p {
            display: inline-block;
        }

    }

    .captioned.center-block, .captioned.center {
        margin-left: auto;
        margin-right: auto;
    }
    .captioned.right {
        margin-left: 1.5em;
        margin-right: 0;
    }
    .captioned.left {
        margin-right: 1.5em;
        margin-left: 0;
    }

    .p-summary {
        font-size: 1.2em;
        font-weight: 300;
    }

    .blockHighlight {
        .blockQuote;
        padding-right: 20px;
    }
}

.fsfe-form {
    label.required {
        .star {
            font-weight: 400;
        }
    }
    label + input, label + textarea {
        .form-control;
        margin-bottom: 1.25em;

        & + .help-block {
            margin-top: -1em;
            margin-bottom: 1.25em;
        }
    }
    textarea {
        min-height: 150px;
    }
    button, input[type="submit"] {
        .btn-lg;
        display: block;
        margin: 1em 0;
    }
}

/* style specific to certain pages */

.toplevel {
    #category {
        display: none;
    }
    h1 {
        background: lighten(@brand-primary,20%);
        color: #FFF;
        text-shadow: 0px 1px 2px @brand-strong;
        display: block;
        min-width: 200px;
        padding: .5em;
        margin: -0.5em -0.2em 0.5em;
        border: 0;

        @media (min-width: @screen-sm-min) {
            width: 50%;
            margin: -1em 0 1em 0;
        }
    }
}

.full-width {
    /* For very particular pages where you need as wide as possible */
    #main {
        width: 100%;
    }
}

.frontpage, .subsite, .full-width {
    #content {
        max-width: none;
    }
}

.article {
    #content {
        display: inline-block;

        .p-name {
            color: @brand-strong;
        }
    }

/* blocks that stand out */

    .standout {
        margin-top: 1.5em;
        margin-bottom: 1.5em;
        margin-left: -1.5em;
        @media (min-width: @screen-sm-min) {
            margin-left: -3em;
        }
    }
    .standout-text {
        .standout;
        padding-left: 1.5em;
        @media (min-width: @screen-sm-min) {
            padding-left: 3em;
        }
    }

    blockquote, .blockQuote, .blockHighlight,pre {
        .standout-text;
    }
    .captioned, {
        .standout;
    }
    .captioned.center-block, .captioned.center {
        margin-left: auto;
        margin-right: auto;
    }
    .captioned.right {
        margin-left: 1.5em;
        margin-right: 0;
    }
    .captioned.left {
        margin-right: 1.5em;
        margin-left: 0;
    }
}

        /* subpages "backward compatibility" */

        h2#subpages, h3#subpage, h4#subpages {
                display: none;
            }
        h2#subpages.show-heading,
        h3#subpages.show-heading,
        h4#subpages.show-heading {
          display: block;
        }

        ul#subpages, h2#subpages + ul, h3#subpages + ul, h4#subpages + ul, ul.subheadings, ul.overview {
            clear: both;
            .subsite #content .subheadings;

            li {
                .make-sm-column(6);
            }

            @media (min-width: @screen-sm-min) {
                li {
                    display: inline-block;
                }
            }
        }

.subsite {
    .toplevel;

    #content {
        .make-row;

        #introduction {
            .make-xs-column(12);
            .make-sm-column(4);
        }
        #introduction + .subheadings {
            .make-xs-column(12);
            .make-sm-column(8);
        }
        .subheadings, .subheadings + .subheadings {
            clear: none;
            .make-row;
            .list-no-style;
            padding: 0 0 2em 0;

            li {
                .make-xs-column(12);
                .make-sm-column(6);
            }

            @media (min-width: @screen-xs-min) {
                li:nth-child(odd) {
                    clear: both;
                }
            }

            li ul {
                padding: 0;
            }

            li ul li {
                float: none;
                width: 100%;
                display: block;
                padding: 0;

                a:before {
                    content: "› ";
                }
            }
        }
        .subheadings + .subheadings {
            clear: both;
            li {
                .make-xs-column(6);
                .make-sm-column(4);
            }

            @media (min-width: @screen-xs-min) {
                li:nth-child(odd) {
                    clear: none;
                }
                li:nth-child(3n+4) {
                    clear: both;
                }
            }
        }
    }

    #introduction {
        padding-top: 1.5em;

        .image {
            .pull-left;
            max-width: 30%;
            margin-right: .5em;
        }
    }

}


// ----------------------------------------------------------------------------
// Condensed listing of news and events
// ----------------------------------------------------------------------------

ul.news-list, ul.event-list {
    span.date {
        .text-muted;
        .small;
    }
}


// ----------------------------------------------------------------------------
// Verbose listing of news and events
// ----------------------------------------------------------------------------

article.news, article.event {
    border-bottom: 1px solid @gray-lighter;
    margin-bottom: 10px;

    p.meta {
        .text-muted;
        .small;

        a {
            color: inherit;
        }
    }

    ul.tags {
        .list-inline;
        .text-muted;
        .small;

        li {
            white-space: nowrap;

            a {
                color: inherit;
            }
        }
    }
}

// In a "related news" section, display all but the first news items in a
// compressed form.
section#related-news article.news:nth-of-type(n+2) {
    border-bottom: none;
    margin-bottom: 0;

    h3 {
        font-size: inherit;
        margin-right: .5em;
        display: inline;
    }

    p {
        display: none;
    }

    // Make sure that there is no line break within the news date. The p.meta
    // element also is responsible for the margin-bottom of the while item.
    p.meta {
        display: inline-block;
    }
}


// ----------------------------------------------------------------------------
// Followup boxes
// ----------------------------------------------------------------------------

#followup {
    .clearfix();

    h2 {
        padding:0;
    }

    form {
        display: inline-block;
    }

    input#email {
        margin:0 1em;
        max-width: 18em;
    }

    a.btn {
        .btn-primary;
    }

    @media (min-width: @screen-sm-min) {
        padding: 3em 3em 3em 2em;
    }
}

#followup.subscribe-nl {
    h2 {
        .make-md-column(6);
        .make-lg-column(5);
        margin: 0 0 10px;
    }
    form {
        .make-md-column(6);
        .make-lg-column(7);
    }
}

@media (min-width: @screen-md-min) {
    #followup.subscribe-nl {
        h2 {
            margin: 0;
            top: 5px;
        }
    }
}

#followup.join,
#followup.support,
#followup.donate {
    h2 {
        .make-sm-column(4);
        text-align: center;
    }

    p {
        .make-sm-column(8);
        padding: 0;
        padding-top: 1em;
    }

    a.btn {
        margin-top: 8px;
    }
}

// ----------------------------------------------------------------------------
// Page footer
// ----------------------------------------------------------------------------

#direct-to-top {
    .container;

    a {
        .pull-right;
        text-decoration: none !important;

        &:before {
            content: "▴";
            padding-right: 0.5ex;
            text-decoration: none !important;
        }
    }
}

#bottom {
    background: @body-bg;
    box-shadow: 1em 0 1em 1em @body-bg;
    margin: 40px 0 0 0;
    padding: 20px 0;
    width: 100%;

    @media (max-width: @screen-xs-max) {
        padding: 10px;
    }

    #page-info {
        // .make-row;  can't use .container and .make-row on same element

        div {
            .make-xs-column(12);
            .make-sm-column(4);
        }
    }
}


// ============================================================================
// Other elements
// ============================================================================

/* footnotes */

a.fn {
    bottom: 0.5em;
    font-size: 0.7em;
    position: relative;
}

h2#fn {
    display: none;
}

h2#fn + ol {
    border-top: 1px solid @gray-lighter;
    font-size: 0.9em;
    margin: 2em 0;
    padding-top: 1em;
}

/* trivia */

form input#email {
    .form-control;
    max-width: 25em;
    display: inline-block;
}

button, input[type="submit"] {
    .btn;
    .btn-default;
    .btn-primary;
}

a.learn-more {
    font-size: 1.2em;
    font-weight: 300;
    line-height: 1;
    border-bottom: 1px dotted @brand-primary;
    font-variant: small-caps;
    text-transform: lowercase;
    padding-right: 1em;
    position: relative;

    &:hover {
        text-decoration: none;
        border-bottom-style: solid;
    }

    &:after {
        position: absolute;
        right: .3em;
        top: .1em;
        content: " ▸";
        opacity: 0.8;
        transition: all 150ms linear;
    }

    &:hover:after {
        right: 0;
        content: " ▸";
        opacity: 1;
    }
}

.big-donate, .big.donate {
    .btn;
    .btn-lg;
    .btn-block;
    .btn-success;
    font-size: 1.4em;
}

.supporter-text {
    margin-top: 5px;
}

.small-donate, .small.donate {
    .btn;
    .btn-sm;
    .btn-success;
}

.alert.red {
    .alert-danger;
}

.alert.green {
    .alert-success;

}

.alert.yellow {
    .alert-warning;
}

.warning {
    .alert;
    .fade.in;
}


/* People's personal pages */

.bio {
    .article;
}


/* backward compatibility with old fsfe.org's generic.css */

.left { .pull-left; margin-right: 1em; margin-left: 0; }
.right { .pull-right; margin-left: 1em; margin-right: 0; }
.center { text-align: center; }

#introduction .image img { float: left; margin-right: 1em;}

.grid-50-50 {
    .make-row;
    .box {
        .make-sm-column(6);
    }
}


/* in donors page */
table#gold {
    .table;
    .table-striped;
    .table-hover;
}

/* in spreadtheword */

.margin-vertical {
    .make-row;
    margin: 1em 0;
    .grid-30 {
        .make-sm-column(4);
    }
    .grid-70 {
        .make-sm-column(6);
    }
    .grid-60 {
        .make-sm-column(5);
    }
}
#orderpromo {
    background: rgb(223, 240, 216);
    padding: 0.1em 1em 1em;
    .formlabel {
        display: block;
    }
}

.compare {
    .clear {
        .make-row;
        .left, .right {
            margin-right: 0;
            margin-left: 0;
            float: none;
        }
        .grid-20 {
            .make-xs-column(2);
        }
        .grid-40 {
            .make-xs-column(4);
        }
        .grid-50 {
            .make-xs-column(6);
        }
        .grid-60 {
            .make-xs-column(8);
        }
        .grid-80 {
            .make-xs-column(10);
        }
    }
}

/* in EIFv2 analysis */

#eifv2-track {
    .clear {
        font-size: 0.9em;
        .make-row;
    }
    .grid-50 {
        .make-md-column(6);
    }
    blockquote {
        margin-left: 0;
        p { font-size: 0.9em; }
    }
}


/* AskYourCandidates - parties colors for their answers */

.question {
   margin-bottom: 15px;
   margin-top: 60px;
}

.answer,
.question2,
.answer2 {
  padding: 0.5em 1em;
  text-align: justify;
}

.question2 {
  margin-left: 1em;
}

.answer2 {
  margin-left: 2em;
}

.colorless {
   background-color: rgb(238,238,238);
   border-left: 10px solid rgb(170,170,170);
}

/* Germany */

.diegrüne {
  background-color: rgb(200,255,200);
  border-left: 10px solid rgb(0,139,0);
}

.cdu {
  background-color: rgb(180,230,255);
  border-left: 10px solid rgb(0,79,122);
}

.csu {
  background-color: #B4E6FF;
  border-left: 10px solid #00304A;
}

.spd {
  background-color: rgb(255,200,200);
  border-left: 10px solid rgb(255,0,0);
}

.dielinke {
  background-color: rgb(255,198,255);
  border-left: 10px solid rgb(139,28,98);
}

.piraten {
   background-color: rgb(255,233,146);
   border-left: 10px solid rgb(243,125,32);
}

.fdp {
   background-color: rgb(255,255,200);
   border-left: 10px solid rgb(255,255,0);
}

.oedp {
   background-color: rgb(255,233,187);
   border-left: 10px solid rgb(242,134,43);
}

.bayernpartei {
   background-color: rgb(85,144,202);
   border-left: 10px solid rgb(28,38,236);
}

.violetten {
   background-color: rgb(124,62,139);
   border-left: 10px solid rgb(210,0,255);
}

.afd {
  background-color: #009EE0;
  border-left: 10px solid #E40F27;
}


/* France */

.partisocialiste {
   background-color: rgb(255,220,220);
   border-left: 10px solid rgb(255,128,128);
}

.ump {
   background-color: rgb(160,200,255);
   border-left: 10px solid rgb(0,102,204);
}

.pcf {
   background-color: rgb(255,200,200);
   border-left: 10px solid rgb(221,0,0);
}

.prg, .mrc {
   background-color: rgb(255,240,250);
   border-left: 10px solid rgb(255,209,220);
}

.eelv {
   background-color: rgb(200,255,200);
   border-left: 10px solid rgb(0,255,0);
}

.nouveaucentre {
   background-color: rgb(220,255,255);
   border-left: 10px solid rgb(128,255,255);
}

.modem {
   background-color: rgb(255,230,150);
   border-left: 10px solid rgb(255,153,0);
}

.alliancecentriste {
   background-color: rgb(255,235,200);
   border-left: 10px solid rgb(245,222,179);
}


/* Signature pictures */

.signature-logo img {
  height: auto;
  max-height: 130px;
  max-width: 150px !important;
}

.signature-table {
  table {
    .table;
    .table-striped;
    margin-top: 40px;
  }

  table > tbody > tr > td {
    vertical-align: middle;
  }

  img {
    height: auto;
    max-height: 65px;
    max-width: 120px !important;
  }
}

.signature-table-orgs {
  ul {
    display: block;
    position: relative;
    list-style: none;
    text-align: center;
    padding: 0;
  }
  ul li {
    display: inline-block;
    position: relative;
    list-style: none;
    vertical-align: middle;
  }
  ul li a {
    display: block;
    position: relative;
    max-width: 120px;
    max-height: 80px;
    min-width: 120px;
    min-height: 80px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    transform: scale(0.8);
    opacity: 1;
    transition: opacity .5s, transform .5s, background-color .5s, filter .5s;
  }
  ul li a:hover {
    opacity: 1;
    transform: scale(0.9);
    z-index: 5;
  }
  #larger {
    max-width: 150px;
    max-height: 100px;
    min-width: 150px;
    min-height: 100px;
  }
}

/* statement block with lighter background and normal font */

blockquote#statement {
  background-color: rgba(116, 140, 156, 0.1);
}

blockquote#statement p {
  font-family: "Roboto",sans-serif;
  font-weight: unset;
}


/* -------------------------------------------------------------------- */
/* Interviews                                                           */
/* -------------------------------------------------------------------- */

.interview-question {
  font-style:italic;
  font-weight:bold;
}


/* HIDE SOMETHING */
.special {
  display: none;
}