@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);
@import url(https://fonts.googleapis.com/css?family=Fauna+One);
@import url(https://fonts.googleapis.com/css?family=Raleway:500,600,700,400);

body, p {
    font-family: 'Fauna One', Georgia, "Times New Roman", Times, serif;
}

body {
/*    background-color: #fafafa;*/
}

body, p, a {
    color: #002;
}
h1, h2, h3 {
    font-family: Raleway, Verdana, Arial, Helvetica, sans-serif;
}

h1 {
    font-weight: bold;
    font-size: 40px;
    margin: 0.5em 0 1em;
}
h2 {
    font-weight: normal;
    font-size: 20px;
    margin: 0.5em 0 1em;
}

#footer {
    background: #08B8F1;
    font-size: 12px;
    padding: 1em;
}
.footer-inner,
.footer-inner p,
.footer-inner a
{
    margin: 0.5em 0 1em;
    color: white;
}

ul {
    text-align: left;
    margin: 1em 0;
}
a {
  text-decoration: none;
}


.columns {
            column-count: 3;
       -moz-column-count: 3;
    -webkit-column-count: 3;
}
.columns h2 {
    text-align: center;
            column-span: all;
       -moz-column-span: all;
    -webkit-column-span: all;
}
.columns-no-break {
                   break-inside: avoid;
              page-break-inside: avoid;
       -moz-column-break-inside: avoid;
    -webkit-column-break-inside: avoid;
}
/*
#content, #footer {
            box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
        -ms-box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
       -moz-box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
}
*/


#content,
.header-inner,
.footer-inner
{
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}
#content p,
#content h2,
#content h3,
#content blockquote
{
    padding-left: 1em;
    padding-right: 1em;
}
#content .node {
    margin-bottom: 4em;
}

.language-link {
    display: none;
}

.clickable {
    cursor: pointer;
}




/*      H E A D E R      */



.header-toggle {
    z-index: 101;
    position: fixed;
    top: 4px;
    right: 4px;
    font-size: 21px;
    background: #fff;
    padding: 4px 10px;

            border-radius: 3px;
       -moz-border-radius: 3px;
    -webkit-border-radius: 3px;

            box-shadow: 1px 1px 2px 1px #888888;
       -moz-box-shadow: 1px 1px 2px 1px #888888;
    -webkit-box-shadow: 1px 1px 2px 1px #888888;
}
header {
    z-index: 100;
    background: rgba(255, 255, 255, 1.0);
    height: auto;
    position: fixed;
    top: 0;
            transition: top 0.4s ease-in-out;
       -moz-transition: top 0.4s ease-in-out;
    -webkit-transition: top 0.4s ease-in-out;
    width: 100%;

            box-shadow: 0px -2px 7px 0px #888888;
       -moz-box-shadow: 0px -2px 7px 0px #888888;
    -webkit-box-shadow: 0px -2px 7px 0px #888888;
}
.header-inner {
    padding-top: 6px;
}
.header-spacer {
    width: 100%;
    height: 100px;
}
.nav-up {
    top: -284px;
}
.nav-down {
}

nav {
    vertical-align: top;
    display: inline-block;
}
nav a {
    font-weight: bold;
    font-family: Raleway, Arial, Helvetica, sans-serif;
    display: inline-block;
    padding: 0.5em 0.5em;
}
nav a:hover {
    color: #fff; background-color: #08B8F1;
}
nav a.active,
nav a.active:hover
{
    color: #08B8F1;
    background: transparent;
}

nav.front i {
    position: relative;
    top: -1px;
}
nav.front span {
    text-transform: uppercase;
    margin-left: 8px;
}
nav.lang {
    float: right;
}
nav.portraits {
    display: block;
    text-align: center;
}
.front nav.portraits {
    display: none;
}
nav.portraits a {
    padding: 0px;
    border: 2px solid transparent;
}
nav.portraits a:hover {
    border-color: #08B8F1;
}
nav.portraits .inactive img {
    -webkit-filter: grayscale(100%);
    filter: gray;
    filter: grayscale(100%);
    -webkit-transition: all .6s ease;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
}

/*
.language-switcher {
    z-index: 10;
    background: rgba(255, 255, 255, 0.75);
    position: absolute;
    right: 1em;

    font-weight: bold;
    font-family: Raleway, Arial, Helvetica, sans-serif;
}
.language-switcher a {
    padding-left: 1em;
}
*/







/*****************************************************/
/*                                                   */
/*                       T I L E                     */
/*                                                   */
/*****************************************************/



/*    Basic tile    */

.tile {
    display: inline-block;
    vertical-align: top;
    width: auto;
    margin: 0px;
    padding: 0px;
    text-align: left;
    position: relative;
}

.tile figure img,
.tile figcaption {
            transition:         transform 0.4s, opacity 0.1s;
       -moz-transition:    -moz-transform 0.4s, opacity 0.1s;
    -webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
}

.tile figure {
    margin: 0;
    position: relative;
    overflow: hidden;
}

.tile figure img {
    max-width: 100%;
    display: block;
    position: relative;
}

.tile figcaption {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    color: #fff;
}

.tile .tile-info {
    padding: 0.75em;
}
.tile figcaption .field-title {
    font-size: 130%;
    margin-bottom: 0.5em;
}
.tile figcaption .field-caption {
    line-height: 1.2em;
}
.tile a:hover {
    text-decoration: none;
}
.tile .field-caption a:hover {
    text-decoration: underline;
}

.no-touch .tile figure:hover img,
.tile figure.cs-hover img {
            transform: scale(1.1);
        -ms-transform: scale(1.1);
       -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
}


/* Info-Tile */
.info-tile figcaption .field-caption {
    font-size: 72%;
}

/* Tile style 0: Static text only */

.tile figure {
    background:
        linear-gradient(
            to bottom,
            rgba(250, 250, 250, 255),
            rgba(242, 242, 242, 255)
        );
}
.tile-style-0 .field-type-image {
    display: none;
}
.tile-style-0 figcaption {
    position: static;
    width: 100%;
    font-size: 133%;

    color: #001;
    text-shadow: 0 1px 2px white;
}



/* Tile style 1: Static text overlay on top of image with white sky fade */

.tile-style-1 figcaption {
    position: absolute;
    top: 0px;
    width: 100%;
    text-align: right;
    text-shadow: 0 -1px 2px white;

    bottom: auto;
    padding-bottom: 2em;

    color: #001;
    background:
        linear-gradient(
            to top,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 0.35),
            rgba(236, 236, 236, 0.9)
        );
}


/* Tile style 2: Static text overlay on bottom of image with dark floor fade */

.tile-style-2 figcaption {
    text-shadow: 0 1px 0 black;
    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0),
            rgba(0, 0, 0, 0.15),
            rgba(0, 0, 0, 0.75)
        );
}



/* Tile style 3: Hover-in opaque caption with image shift */

.no-touch .tile-style-3 figure:hover img,
.tile-style-3 figure.cs-hover img {
    /* filter: url(blur.svg#blur); -webkit-filter: blur(2px); filter: blur(2px); filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='2'); */
    /*
            transform: translateY(-50px);
        -ms-transform: translateY(-50px);
       -moz-transform: translateY(-50px);
    -webkit-transform: translateY(-50px);
    */
}
.tile-style-3 figcaption {
    text-shadow: 1px 1px 2px black;
    background: rgba(220, 220, 220, 0.5);
    font-size: 85%;

            transform: translateY(100%);
        -ms-transform: translateY(100%);
       -moz-transform: translateY(100%);
    -webkit-transform: translateY(100%);
}
.no-touch .tile-style-3 figure:hover figcaption,
.tile-style-3 figure.cs-hover figcaption {
            transform: translateY(0px);
        -ms-transform: translateY(0px);
       -moz-transform: translateY(0px);
    -webkit-transform: translateY(0px);
}



/*      T E X T    P A G E S    */

.node-page          { }

.node-page p,
.node-page h2,
.node-page h3,
.node-page blockquote
                    { max-width: 640px; margin-left: auto; margin-right: auto; }

.node-page h1       { font-size: 40px; color: #fff; background-color: #08B8F1; text-align: center; clear: both; }
.node-page h2       { font-size: 22px; font-weight: 500; color: #08B8F1; text-align: center; margin-top: 2.5em; margin-bottom 1.25em; clear: both; }
.node-page h3       { font-size: 120%; font-weight: bold; margin-top: 1.5em; margin-bottom: 1.25em; clear: both; }
.node-page p        { margin-top: 1.5em; margin-bottom: 1.5em; line-height: 2.25em; color: #555; }
.node-page p a      { text-decoration: underline; }

.picture-full       { display: block; max-width: 100%; height: auto; margin-left: auto; margin-right: auto; }
.content-embed img  { max-width: 100%; height: auto; }
.node-page .node-visual { font-size: 70%; color: #999; }

blockquote          { margin-top: 2em; margin-bottom: 2em; }
blockquote p        { font-style: italic; border-left: 6px solid #ccc; margin-left: 20em; margin-right: 0; padding-left: 2em; color: #999; }
blockquote p:last-of-type { font-style: normal; border-left-color: transparent; }
blockquote p:last-of-type::before { content: "— "; }


/*    C O N T E N T   E M B E D S   */
.content-embed {
    margin: 1em 0em;
    width: 100%;
    text-align: center;
}

.content-embed-left {
    width: auto;
    float: left;
    margin-right: 1em;
}

.content-embed-right {
    width: auto;
    float: right;
    margin-left: 1em;
}





/*      P O R T R A I T   P A G E      */

.details {
    text-align: center;
}

.details .tile {
    margin-top: 4px;
}

.timeline-container {
    width: 100%;
    padding: 1em 0em;
    text-align: center;
}

.timeline-thread {
    display: inline-block;
    width: 0px;
    min-height: 7em;
    border-right: 2px solid #fff15b;
    border-left: 2px solid #f84533;
}



/*      F E A T U R E      */

.tile.viewmode-feature figure img {
    max-width: 100%;
    height: auto;

    position: relative;
    width: 100%;
}
.tile.viewmode-feature:hover figure img {
            transform: scale(1);
        -ms-transform: scale(1);
       -moz-transform: scale(1);
    -webkit-transform: scale(1);
}
.viewmode-feature figcaption .field-title {
    font-size: 250%;
    margin-bottom: 0.5em;
}



/*     D E T A I L            */


.viewmode-detail, .viewmode-detail figure img { width: auto; }



/*     S W i P E B O X        */

#swipebox-caption {
    height: auto;
    padding: 0.5em 0em 1.25em;

    font-size: 20px;
    line-height:32px;
    text-align: center;

/*
    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0),
            rgba(0, 0, 0, 0.35),
            rgba(0, 0, 0, 0.75)
        );
 */
    text-shadow: 1px 1px 2px black;
    background: rgba(220, 220, 220, 0.5);
}



/*     T E A S E R S          */

.viewmode-teaser figure {
    opacity: 1;
    -webkit-filter: grayscale(100%);
    filter: gray;
    filter: grayscale(100%);
    -webkit-transition: all .6s ease;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
}
.viewmode-teaser figure:hover,
.viewmode-teaser figure.cs-hover {
    opacity: 1;
    -webkit-filter: grayscale(0%);
    filter: gray;
    filter: grayscale(0%);
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}



/*     I N T R O    T I L E S    */

.intro-title  figcaption { background: #08B8F1; color: #fff; text-shadow: none; }
.intro-info   figcaption { background: #fff15b; color: #002; text-shadow: none; }
.intro-engage figcaption { background: #f84533; color: #fff; text-shadow: none; }
    .intro-engage figcaption a { text-transform: uppercase; color: #fff; font-family: 'Raleway'; }
.intro-tile h1, .intro-tile h2 { margin: 0; }
.intro-tile h2 { font-family: 'Fauna One'; }
.lean-heading { font-family: Raleway; font-weight: normal; }



/*     L A Z Y   L O A D I N G   */

img.lazy-waiting {
            transform: scale(0);
        -ms-transform: scale(0);
       -moz-transform: scale(0);
    -webkit-transform: scale(0);
}





/*     R E S P O N S I V E N E S S      */


@media screen and (max-width: 48em) {
    .tile figure img {
                transform: translateY(0px) scale(1) !important;
            -ms-transform: translateY(0px) scale(1) !important;
           -moz-transform: translateY(0px) scale(1) !important;
        -webkit-transform: translateY(0px) scale(1) !important;
    }

    .teaser-big figure img { width: 120px; height: 120px; }
    .viewmode-teaser, .viewmode-teaser img { width: 60px; height: 60px; font-size: 75%; }




    .viewmode-detail, .viewmode-detail img { max-height: 160px; font-size: 75%; }
    .viewmode-detail figcaption { display: none; }

    .info-tile figcaption { height: 160px; width: 160px; }
    .info-tile figcaption .field-caption { display: none; }

    .viewmode-detail.tile-style-3 figcaption { display: none; }
    .viewmode-detail figure img {
        transform: translateY(0px) scale(1) !important;
        -ms-transform: translateY(0px) scale(1) !important;
        -moz-transform: translateY(0px) scale(1) !important;
        -webkit-transform: translateY(0px) scale(1) !important;
    }






    .viewmode-feature .field-caption { display: none; }

    .intro-title  figcaption { width: 180px; height: 120px; }
    .intro-title  figcaption h1 { font-size: 20px; }
    .intro-info   figcaption { width: 240px; height: 240px; }
    .intro-info   figcaption h2 { font-size: 20px; line-height: 28px; width: 200px; }
    .intro-engage figcaption { width: 300px; height: 60px; }

    .tile .tile-info { padding: 0.35em; }

    nav.front span { display: none; }

    .columns {
                column-count: 2;
           -moz-column-count: 2;
        -webkit-column-count: 2;
    }

    nav.portraits img { width: 56px; height: 56px; }
}

@media screen and (max-width: 32em) {
    .columns {
        column-count: 1;
        -moz-column-count: 1;
        -webkit-column-count: 1;
    }
}

@media screen and (min-width: 48em) and (max-width: 75em) {
    .teaser-big figure img { width: 200px; height: 200px; }
    .viewmode-teaser img { width: 100px; height: 100px; }
    .viewmode-detail, .viewmode-detail img { max-height: 200px; font-size: 75%; }

    .info-tile figcaption { height: 200px; width: 200px; }
    .info-tile figcaption .field-caption { display: none; }

    .viewmode-detail.tile-style-3 figcaption { display: none; }
    .viewmode-detail figure img {
                transform: translateY(0px) scale(1) !important;
            -ms-transform: translateY(0px) scale(1) !important;
           -moz-transform: translateY(0px) scale(1) !important;
        -webkit-transform: translateY(0px) scale(1) !important;
    }

    .intro-title  figcaption { width: 300px; height: 100px; }
    .intro-title  figcaption h1 { font-size: 26px; line-height: 28px; }
    .intro-info   figcaption { width: 300px; height: 300px; }
    .intro-info   figcaption h2 { font-size: 24px; line-height: 30px; width: 220px; }
    .intro-engage figcaption { width: 500px; height: 100px; }
    .intro-engage figcaption { font-size: 24px; line-height: 26px; }
    .intro-engage figcaption a { font-size: 34px; }

    .tile .tile-info { padding: 0.5em; }
}

@media screen and (min-width: 75em) {
    .teaser-big figure img { height: 250px; width: 250px; }
    .viewmode-teaser, .viewmode-teaser img { height: 125px; width: 125px; }
    .viewmode-detail, .viewmode-detail img { max-height: 300px; font-size: 100%; }

    .info-tile figcaption { height: 300px; width: 300px; }

    .viewmode-feature .field-caption { display: none; }

    .intro-title  figcaption { width: 375px; height: 125px;}
    .intro-title  figcaption h1 { font-size: 30px; line-height: 32px; }
    .intro-info   figcaption { width: 375px; height: 375px; font-size: 32px; }
    .intro-info   figcaption h2 { font-size: 26px; line-height: 40px; width: 250px; }
    .intro-engage figcaption { width: 625px; height: 125px; }
    .intro-engage figcaption { font-size: 26px; }
    .intro-engage figcaption a { font-size: 44px; line-height: 60px; }
}

@media screen and (max-width: 1464px) {
    nav.lang {
        margin-right: 48px;
    }
}