/*
Theme Name: initiative.ulm.digital
Theme URI: https://ulm-digital.com
Author: Coretex Media
Author URI: https://cortex-media.de/
Description: Theme for initiative.ulm.digital e.V.
Text Domain: initiative.ulm
*/

/*
 _       _ _   _       _   _
(_)_ __ (_) |_(_) __ _| |_(_)_   _____
| | '_ \| | __| |/ _` | __| \ \ / / _ \
| | | | | | |_| | (_| | |_| |\ V /  __/
|_|_| |_|_|\__|_|\__,_|\__|_| \_/ \___|

 */

/* * * * * * * * * *
    FONTS
 * * * * * * * * * */

/* istok-web-regular - latin-ext_latin */
@font-face {
  font-family: 'Istok Web';
  font-style: normal;
  font-weight: 400;
  src: url('assets/fonts/istok-web-v20-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('assets/fonts/istok-web-v20-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('assets/fonts/istok-web-v20-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('assets/fonts/istok-web-v20-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
       url('assets/fonts/istok-web-v20-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('assets/fonts/istok-web-v20-latin-ext_latin-regular.svg#IstokWeb') format('svg'); /* Legacy iOS */
}
/* istok-web-700 - latin-ext_latin */
@font-face {
  font-family: 'Istok Web';
  font-style: normal;
  font-weight: 700;
  src: url('assets/fonts/istok-web-v20-latin-ext_latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('assets/fonts/istok-web-v20-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('assets/fonts/istok-web-v20-latin-ext_latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('assets/fonts/istok-web-v20-latin-ext_latin-700.woff') format('woff'), /* Modern Browsers */
       url('assets/fonts/istok-web-v20-latin-ext_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('assets/fonts/istok-web-v20-latin-ext_latin-700.svg#IstokWeb') format('svg'); /* Legacy iOS */
}


/* General
-------------------------------------------------------------------------------*/

.white-bg {
    background-color: white;
}

.no-decoration,.only-hover {
    text-decoration: none;
}

.only-hover:hover {
    text-decoration: underline;
}

.no-decoration:hover {
    text-decoration: none;
}
.hidden {
    display:none;
}

.flex-container {
    /* Safari */
    display: -webkit-flex;
    -webkit-flex-direction: row;
    -webkit-flex-wrap: wrap;
    -webkit-justify-content: center;

    /* Other browsers */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.flex-row {
    -webkit-flex-direction: row;
    flex-direction: row;
}

.flex-column {
    -webkit-flex-direction: column;
    flex-direction: column;
}

.flex-item {
    margin: 0 1% 2% 0;
    display: block;
    text-decoration: none;
}

.flex-width-3 {
    width: 32%;
}

.flex-width-4 {
    width: 22.5%;
}

.flex-item:hover {
    text-decoration: none;
}

.flex-last {
    display: none;
}

@media screen and (max-width: 900px){
    .flex-container {
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;

        -webkit-justify-content: flex-start;
        justify-content: flex-start;
    }

    .flex-item {
        width: 47%;
        margin-left: auto;
        margin-right: auto;
    }

    .flex-last {
        display: block;
    }
}

@media screen and (max-width: 750px){
    .flex-item {
        width: 99%;
    }
}

/* News
-------------------------------------------------------------------------------*/
.news > a {
    background-color: white;
}

.news > a:hover .news-image-container {
    opacity: 0.7;
}

.news > a:hover {
    background-color: #EEEEEE;
}

.news-container {
    padding: 5% 5% 5% 5%;
}

.news-container a {
    text-decoration: none;
}

.news-container a:hover {
    text-decoration: underline;
}

.news-image-container {
    height: 300px;
    position: relative;
}

.news-image-container img {
    max-width: 100%;
}


.center-img {
    /* Center horizontally */
    position: absolute;
    margin: auto;
    display: block;
    left: 0;
    right: 0;

    /* Center vertically */
    top: 0;
    bottom: 0;
}

.news-date {
    font-size: 10pt;
    color: grey;
}

.news-image-link {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

/* Single Post
-------------------------------------------------------------------------------*/
.single-post {
    font-size: 12pt;
}

.single-post-title-image {
    width: 100%;
    height: 400px;
}

.single-post-caption {
    padding: 5px 10px 0 10px;
    font-size: 10pt;
    color: grey;
}

.single-post-date {
    font-size: 12pt;
    color: grey;
}

.single-post-logo {
    position: absolute;
    width: 300px;
    top: 10px;
    left: 20px;
}

.single-post-logo a {
}

.single-post-logo-icon {
    width: 50px;
}

.single-post-logo-font {
    width: 100px;
}

.single-diagonal-container {
    position: absolute;
    width: 100%;
    bottom: 0;
}

.single-diagonal-fill {
    /*
    position: absolute;
    width: 100%;
    bottom: 0;
    */
    background-color: rgba(10,54, 83); /* the fallback */
    background-color: rgba(10,54, 83, 0.6);
    width: 100%;
    height: 50px;
    text-align: center;
}

.single-diagonal {
    width: 100%;
    height: auto;
    border-style: solid;
    border-width: 0 0 48 97vw;
    border-color: transparent transparent rgba(10,54, 83, 0.6) transparent;
    z-index: 3;
}

.single-back {
    margin: 50px 0 0 0;
}

@media screen and (max-width: 920px) {
    .single-post .col7 {
        width: 100%;
    }

    .single-post .col4 {
        width: 100%;
    }
}

/* 404
-------------------------------------------------------------------------------*/
.not-found {
    margin-top: 100px;
    margin-bottom: 100px;
    text-align: center;
}


/* Site-Origin builder
-------------------------------------------------------------------------------*/
/*
@media screen and (max-width: 920px){
    .initiative .panel-grid-cell-empty {
        display: none;
    }
    .panel-row-style {
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .text-block .panel-grid-cell {
        width: 100%!important;
        padding: 0;
        margin-right: 0;
    }

}

@media screen and (max-width: 1000px) and (min-width: 921px) {
    .initiative .panel-grid-cell-empty {
        display: none;
    }

    .text-block .panel-grid-cell {
        width: 45%!important;
    }
}
*/

/*
                    _
 _ __ ___  ___  ___| |_
| '__/ _ \/ __|/ _ \ __|
| | |  __/\__ \  __/ |_
|_|  \___||___/\___|\__|


 */
/*
	HTML5 Reset :: style.css
	----------------------------------------------------------
	We have learned much from/been inspired by/taken code where offered from:

	Eric Meyer					:: http://meyerweb.com
	HTML5 Doctor				:: http://html5doctor.com
	and the HTML5 Boilerplate	:: http://html5boilerplate.com

-------------------------------------------------------------------------------*/

/* Let's default this puppy out
-------------------------------------------------------------------------------*/

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font-weight: normal;
    vertical-align: baseline;
    background: transparent;
}

article, aside, figure, footer, header, nav, section, details, summary {display: block;}

/* Handle box-sizing while better addressing child elements:
   http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
html {
    box-sizing: border-box;
}

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

/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */

/* Responsive images and other embedded objects */
/* if you don't have full control over `img` tags (if you have to overcome attributes), consider adding height: auto */
img,
object,
embed {max-width: 100%;}

/*
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
	In fact, it *will* cause problems with Google Maps' controls at small size.
	If this is the case for you, try uncommenting the following:

#map img {
		max-width: none;
}
*/

/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}

/* we use a lot of ULs that aren't bulleted.
	you'll have to restore the bullets within content,
	which is fine because they're probably customized anyway */
ul {list-style: none;}

blockquote, q {quotes: none;}

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

a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

/* tables still need cellspacing="0" in the markup */
table {border-collapse: separate; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}

hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}

input, select {vertical-align: middle;}

pre {
    white-space: pre; /* CSS2 */
    white-space: pre-wrap; /* CSS 2.1 */
    white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
    word-wrap: break-word; /* IE */
}

input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom;}
.ie7 input[type="checkbox"] {vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}

select, input, textarea {font: 99% sans-serif;}

table {font-size: inherit; font: 100%;}

small {font-size: 85%;}

strong {font-weight: bold;}

td, td img {vertical-align: top;}

/* Make sure sup and sub don't mess with your line-heights http://gist.github.com/413930 */
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}

/* hand cursor on clickable elements */
.clickable,
label,
input[type=button],
input[type=submit],
input[type=file],
button {cursor: pointer;}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}

/* make buttons play nice in IE */
button,
input[type=button] {width: auto; overflow: visible;}

/* scale images in IE7 more attractively */
.ie7 img {-ms-interpolation-mode: bicubic;}

/* prevent BG image flicker upon hover
   (commented out as usage is rare, and the filter syntax messes with some pre-processors)
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}
*/

/* let's clear some floats */
.clearfix:after { content: " "; display: block; clear: both; }

/*
                 _
 _ __ ___   __ _(_)_ __
| '_ ` _ \ / _` | | '_ \
| | | | | | (_| | | | | |
|_| |_| |_|\__,_|_|_| |_|


 */

/* A Linux- and Windows-friendly sans-serif font stack: http://prospects.mhurrell.co.uk/post/updating-the-helvetica-font-stack */
body {font: 18px 'Istok Web', sans-serif; -webkit-text-size-adjust: 100%;}

/* We like off-black for text. */
body, select, input, textarea {
    color: #333;
}

a {color: #0a3653;}
a:hover {text-decoration: underline;}

::-moz-selection{background: #fcd700; color: #fff; text-shadow: none;}
::selection {background: #fcd700; color: #fff; text-shadow: none;}

a:link {-webkit-tap-highlight-color: #fcd700;}

ins {background-color: #fcd700; color: #000; text-decoration: none;}
mark {background-color: #fcd700; color: #000; font-style: italic; font-weight: bold;}

input:-moz-placeholder { color:#a9a9a9; }
textarea:-moz-placeholder { color:#a9a9a9; }

html {
    height: 100%;
}

body {
    height: 100%;
}

.wrapper {
    height: 100%;
}


body.ie-fix {
    background: #fff url(/assets/img/divider_foto_1.jpg) no-repeat fixed center 100%;
    background-size: cover;
}

body.ie-fix .fixed{
    display: none;
}

/* Grid
-------------------------------------------------------------------------------*/
.grid-inner {
    width: 1170px;
    margin: 0 auto;
}

@media screen and (max-width: 1220px) {
    .grid-inner {
        width: 90%;
        margin: 0 auto;
    }
}


.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
    float: left;
    margin: 0 3% 0 0;
}

.col1.last, .col2.last, .col3.last, .col4.last, .col5.last, .col6.last, .col7.last, .col8.last, .col9.last, .col10.last, .col11.last, .col12 {
    margin: 0;
}

.col1 { width: 5.5%; }
.col2 { width: 14%; }
.col3 { width: 22.5%; }
.col4 { width: 31.3%; }
.col5 { width: 39.5%; }
.col6 { width: 48%; }
.col7 { width: 56.5%; }
.col8 { width: 65%; }
.col9 { width: 73.5%; }
.col10 { width: 82%; }
.col11 { width: 90.5%; }
.col12 { width: 99%; margin: 0; }

/* General
-------------------------------------------------------------------------------*/
h1 {
    color: #0a3653;
    font-size: 3.15em;
    line-height: 1.3em;
    margin-bottom: 40px;
}

h2 {
    color: #0a3653;
    font-size: 2em;
    margin-bottom: 48px;
}

h3 {
    font-size: 1em;
    color: #0a3653;
    margin-bottom: 1em;
    font-weight: 700;
}

p {
    margin-bottom: 1.6em;
    line-height: 1.6em;
}

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

.align-right {
    text-align: right;
}

.relative {
    position: relative;
}

.full-height {
    height: 100%;
}

.uppercase {
    text-transform: uppercase;
}

.margin-bottom {
    margin-bottom: 48px;
}

.margin-bottom-double {
    margin-bottom: 96px;
}

.no-margin-bottom {
    margin-bottom: 0;
}

.divider {
    height: 540px;
    background: transparent;
}

.parallax-mirror {
    z-index: 1 !important;
}

.float-right {
    float: right;
}


.fixed {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: -1;
}

.overflow-hidden {
    overflow: hidden;
}

.responsive-br {
    display: none;
}

.hidden {
    display: none;
}

/* Header
-------------------------------------------------------------------------------*/
.logo-container {
    margin-top:130px;
    padding: 40px 0;
    text-align: center;
    background-color: #ffffff;
    position: relative;
    z-index: 2;
}

.logo-icon {
    width: 150px;
    margin-right:10px;
}
.logo-font {
    width: 350px;
    margin-bottom: 15px;
}

.header-image {
    height: 999px;
    /*overflow: hidden;*/
}

.statement {
    position: absolute;
    font-size: 0.88em;
    bottom: -696px;
    left: 0;
    background: rgb(10, 55, 83); /* The Fallback */
    background: rgba(10, 55, 83, 0.8);
    height: 440px;
    width: 440px;
    padding: 78px 72px;
    border-radius: 50%;
    moz-border-radius: 50%;
    khtml-border-radius: 50%;
    color: #ffffff;
    z-index: 3;
}

.statement h2{
    color: #ffffff;
    margin-bottom: 1em;
    font-size: 1.5em;
    text-align: center;
}

/* Content
-------------------------------------------------------------------------------*/
.content-block {
    padding: 110px 0 100px 0;
    background-color: #ffffff;
    z-index: 2;
    position: relative;
}

.content-block-first {
    margin-top: 652px;
}

.content-block-grey {
    background-color: #dadad9;
}

.icon {
    height: 100px;
    text-align: center;
    margin-bottom: 1em;
}

.initiative-text-mobile {
    display: none;
}

.founder-portrait-container {
    margin-bottom: 48px;
}

.founder-portrait {
    width: 100%;
    /*height: 100%;*/
    border-radius: 50%;
    moz-border-radius: 50%;
    khtml-border-radius: 50%;
    background-color: transparent;
    display: block;
}

.quote-portrait {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    moz-border-radius: 50%;
    khtml-border-radius: 50%;
    background-color: transparent;
}

.quotation-container {
    position: absolute;
    right: 0;
    top: 0;
}

.quotation {
    font-size: 0.88em;
    background: rgb(10, 55, 83); /* The Fallback */
    background: rgba(10, 55, 83, 0.8);
    height: 440px;
    width: 440px;
    padding: 84px 72px;
    border-radius: 50%;
    moz-border-radius: 50%;
    khtml-border-radius: 50%;
    color: #ffffff;
    margin-bottom: 172px;
    float: right;
}

.quotation-mark {
    font-family: Georgia, serif;
    font-size: 6em;
}

.quotation-mark-left {
    line-height: 0.3em;
}

.quotation-mark-right {
    line-height: 1em;
}

.quote-image {
    position: absolute;
    bottom: -54px;
    left: -32px;
}

.quote-person {
    position: absolute;
    background: rgb(10, 55, 83); /* The Fallback */
    background: rgba(10, 55, 83, 0.8);
    height: 190px;
    width: 190px;
    padding-left: 15px;
    border-radius: 50%;
    moz-border-radius: 50%;
    khtml-border-radius: 50%;
    color: #ffffff;
    right: 56px;
    bottom: 48px;
}

.quote-person-text {
    position: absolute;
    width: 80%;
    margin: auto;
    padding-left: 7px;
    font-size: 0.88em;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.founder-info {
    font-size: 0.88em;
    position: absolute;
    top: 0;
    text-align: center;
    background: rgb(10, 55, 83); /* The Fallback */
    background: rgba(10, 55, 83, 0.8);
    height: 100%;
    border-radius: 50%;
    moz-border-radius: 50%;
    khtml-border-radius: 50%;
    color: #ffffff;
    width: 100%;
    display: none;
}

.founder-info-text {
    position: absolute;
    width: 70%;
    left: 15%;
    bottom: 30px;
}

.founder-info-text a{
    color: #ffffff;
}

.icon-chair {
    height: 86px;
}

h1.with-margin-bottom{
    margin-bottom: 70px;
}

.counting-content {
    position: relative;
    z-index: 2;
    background-color: #0a3653;
    padding: 50px 0;
    color: #ffffff;
}

.counting-content img.icon {
    height: 48px;
    margin-bottom: 16px;
}

.counting-content .counter {
    margin-top: 16px;
    font-size: 2.4em;
}

/* Footer
-------------------------------------------------------------------------------*/
.diagonal-container {
    background-color: #dadad9;
}

.diagonal {
    width: 100%;
    height: auto;
    border-style: solid;
    border-width: 0 0 48px 97vw;
    border-color: transparent transparent #0a3653 transparent;
    z-index: 2;
    position: relative;
}

.diagonal-bottom {
    border-color: #dadad9 #dadad9 #dadad9 #0a3653;
}

.footer {
    padding: 60px 0 75px 0;
    background-color: #0a3653;
    color: #ffffff;
}

.footer h1 {
    color: #ffffff;
}

.footer a {
    color: #ffffff;
    text-decoration: underline;
}

.footer a:hover {
    color: #dadad9;
}

.footer2 {
    padding: 70px 0 60px 0;
}

.indent.single-back {
    margin-left:50px;
}

/* General
-------------------------------------------------------------------------------*/
.no-padding-bottom {
    padding-bottom: 0;
}
.no-padding-top {
    padding-top: 0;
}



/* Logo animation
-------------------------------------------------------------------------------*/
.the-animation {
    -webkit-animation-name: rotate-logo;
    -moz-animation-name: rotate-logo;
    -o-animation-name: rotate-logo;
    animation-name: rotate-logo;

    -webkit-animation-duration: 8s;
    -moz-animation-duration: 8s;
    -o-animation-duration: 8s;
    animation-duration: 8s;

    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-timing-function: ease-in-out;
    -o-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;

    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;

    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;

}

@keyframes rotate-logo {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    50% {
        -webkit-transform: rotate(-18deg);
        -moz-transform: rotate(-18deg);
        -ms-transform: rotate(-18deg);
        -o-transform: rotate(-18deg);
        transform: rotate(-18deg);
    }

    100% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}


/* Media queries
-------------------------------------------------------------------------------*/
@media screen and (max-width: 1220px) {
    .quote-image {
        bottom: 4px;
    }

    .quote-portrait {
        width: 240px;
        height: 240px;
    }

}

@media screen and (max-width: 1080px) {
    .quote-image {
        left: -64px;
    }

    .founders .col3 {
        width: 30%;
        margin-left: 1.5%;
        margin-right: 1.5%;
    }
}

@media screen and (max-width: 920px) {
    .initiative-text {
        display: none;
    }
    .initiative-text-mobile {
        display: block;
    }

    .col5, .col6 {
        width: 100%;
        float: none;
    }

    .goals .col4 {
        width: 75%;
        margin: 0 auto 64px !important;
        float: none;
    }

    .founders .col3, .counting-content .col3 {
        width: 42%;
        margin-right: 4% !important;
        margin-left: 4% !important;
    }

    .counting-content .col3.first-row {
        margin-bottom: 48px;
    }

    .divider-col {
        display: none;
    }

    .quotation-container {
        position: relative;
        margin: 0 auto 120px !important;
        float: none;
        width: 100%;
    }

    .quotation {
        float: none;
        margin: 0 auto;
    }

    .quote-image {
        left: 50%;
        margin-left: -252px;
        bottom: -164px;
    }

    .quote-person {
        left: 50%;
        margin-left: -40px;
        bottom: -132px;
    }

    .founder-info-text {
        bottom: 40px;
    }

    .responsive-br {
        display: inline;
    }
}

@media screen and (max-width: 768px) {
    .footer .col4 {
        width: 48%;
    }

    .footer .col4.second {
        margin-right: 0;
    }
}

@media screen and (max-width: 630px), screen and (max-height: 400px) and (max-width: 768px){
    h1 {
        font-size: 2.2em;
        line-height: 1.2em;
    }

    h2 {
        font-size: 1.6em;
        line-height: 1.2em;
    }

    .logo-container {
        padding: 26px 0 21px 0;
    }

    .logo-icon {
        width: 72px;
        margin-right:10px;
    }
    .logo-font {
        width: 170px;
        margin-bottom: 10px;
    }

    .content-block-first {
        margin-top: 0;
    }

    .content-block {
        padding: 60px 0 50px 0;
    }

    .statement-container {
        width: 100%;
    }

    .statement {
        position: static;
        width: 100%;
        height: auto;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        margin-top: 210px;
        padding: 5%;
    }

    /* Break out of the grid, so that the statement covers the full website width*/
    .content-block-first .grid-inner {
        width: 100%;
    }

    .content-block-first .col6 {
        width: 90%;
        margin: 0 auto;
    }

    .quotation-container {
        margin-bottom: 0 !important;
    }

    .quotation {
        height: auto;
        width: 100%;
        padding: 10% 5% 5% 5%;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }

    .quotation-mark-right {
        height: 36px;
    }

    .quote-image {
        position: static;
        margin-left: 0;
        left: 0;
        bottom: 0;
    }

    .quote-portrait {
        height: auto;
        width: 100%;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        position: static;
        display: block;
    }

    .quote-person {
        left: 0;
        margin-left: 0;
        bottom: 0;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        width: 100%;
        height: auto;
        padding: 5%;
        position: absolute;
    }

    .goals .col4 {
        width: 100%;
        margin: 0 auto 64px !important;
        float: none;
    }

    .founders .col3 {
        float: none;
        width: 88%;
        margin: 0 auto !important;
    }

    .icon-chair {
        display: none;
    }

    .diagonal {
        border-width: 0px 0 48px 95vw;
    }

    .footer .col4 {
        width: 100%;
        float: none;
    }
}

@media  screen and (max-height: 420px) and (min-width: 480px) and (max-width: 768px){
    .founders .col3 {
        width: 48%;
        float: left;
        margin-right: 3% !important;
        margin-left: 0 !important;
    }

    .founders .col3.third {
        margin-right: 3% !important;
    }

    .founders .col3.second, .founders .col3.last  {
        margin-right: 0 !important;
    }

    .quote-image {
        background-color: rgb(10, 55, 83);
        background-color: rgba(10, 55, 83, 0.8);
    }

    .quote-portrait {
        width: 66%;
        margin: 0 auto;
    }
}

/* Datenschutz
-------------------------------------------------------------------------------*/
.datenschutz {
    text-align: justify;
}
.datenschutz h2 {
    margin-top: 60px;
}
.datenschutz ul, .datenschutz ol {
    margin: 20px 0 0 20px;
}

.datenschutz li {
    margin-bottom: 10px;
}

.datenschutz ul {
    list-style: disc;
}