@import "fonts.css";
/*@import "timeline.css";*/

/* main styles */
html, body {
    font-size               : 100%;
    font-family             : 'Brown-Pro-Regular', sans-serif;
    -webkit-font-smoothing  : antialiased;
    -moz-osx-font-smoothing : grayscale;
    margin                  : 0;
    min-height              : 100vh;
    max-width               : 100vw;
    overflow-x              : hidden;
    color                   : #323237;

}

* {
    scrollbar-width : thin; /* Thin Scrollbar: Firefox */
}

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

/* Customise Scrollbar: Webkit */
*::-webkit-scrollbar {
    width  : 7px;
    height : 7px;
}

*::-webkit-scrollbar-track {
    background : #f1efef;
}

*::-webkit-scrollbar-thumb {
    background-color : #d1d1d1;
}

h1, h2, h3, h4, h5, h6 {
    font-family     : 'Brown-Pro-Regular', sans-serif !important;
    word-break      : break-word;
    -webkit-hyphens : auto;
    -moz-hyphens    : auto;
    hyphens         : auto;
    margin-bottom   : 0.5em;
}

h1 {
    font-size : 2.5rem;
}

h2 {
    font-size : 1.7rem;
}

h3 {
    font-size   : 1.25rem;
    font-weight : 300;
}

h4 {
    font-size   : 1rem;
    font-weight : 300;
}

pre {
    font-family   : monospace;
    background    : lightgray;
    margin        : 3em;
    padding       : 1em;
    overflow      : scroll;
    border-radius : 5px;
}

/* ***** PAGE WRAP ***** */
.wrapper {
    position   : relative;
    min-height : 100vh;
}

main.main {
    padding-bottom : 160px; /* Footer height */
}

footer {
    position : absolute;
    bottom   : 0;
    width    : 100%;
    height   : 175px; /* Footer height */
}

/* ***** MAIN HEAD ***** */
header.main {
    margin      : 0 10px -50px 10px;
    padding-top : 40px;
    display     : flex;
    flex-flow   : wrap;
    align-items : center;
}

header.main .logo {
    width   : 33%;
    margin  : 0 30px;
    display : inline-block;
}

header.main .faculty_list {
    margin    : auto;
    width     : 35%;
    float     : right;
    font-size : 1em;
}

header.sub .faculty_list {
    margin-right : 15px !important;
    font-size    : 1em !important;
}

header .faculty_list ul {
    list-style-type : none;
}

header .faculty_list select {
    -moz-appearance    : none;
    -webkit-appearance : none;
    appearance         : none;
    cursor             : pointer;

    font-family        : "Brown-Pro-Regular", sans-serif;
    text-align         : center;
    color              : #004f59;
    border             : 1px solid #004f59;
    border-radius      : 7px;
    padding            : 0 7px;
    margin             : 5px;
    line-height        : 1.5rem;
    font-size          : inherit;
    text-decoration    : none;
    width              : 40%;
    float              : right;
}

header .faculty_list a:hover, header .faculty_list a:focus {
    background : #fffafa;
    color      : #004f59;
    border     : 1px solid #9d9d9d;
}

header .badge {
    background      : #89764b;
    border          : 1px solid #cdcdcd;
    color           : #ffffff;
    width           : 215px;
    height          : 135px;
    margin          : auto;
    border-radius   : 3px;
    font-size       : 0.85em;
    text-align      : center;
    text-decoration : none;
    transform       : rotate(4deg);
    transition      : .5s;
    display         : inline-block;
}

header .badge:hover {
    transition : .5s;
    transform  : rotate(3deg) scale(1.05);
}

header .badge a {
    color           : #ffffff;
    text-decoration : none;
}

header h4.badgeHeader {
    margin-bottom : -0.5em;
    font-size     : 1.2rem;
}

header.videowall h3.welcome {
    margin : 2em 90px -0.25em !important;
}

header.videowall div#timeline {
    display : none;
}

header.main .timeline_container {
    width : 100vw;
}

/* ***** MAIN NO CONTENT ***** */
.noContent {
    text-align : center;
    margin     : 25vh 1.5em;
}

.noContent h2 {
    font-family : "Brown-Pro-Light", sans-serif !important;
    font-weight : 300;
}

/* ***** MAIN MAIN ***** */
main.main {
    margin          : 80px auto 0 auto;
    width           : calc(100% - 200px);
    scrollbar-width : inherit;
    position        : relative;
}

main.main .carousel-navigation {
    position : absolute;
    width    : 100%;
    height   : 75%;
    z-index  : 2;
}

main.main .carousel-navigation button {
    top        : 50%;
    height     : 60px;
    width      : 45px;
    border     : none;
    background : url('data:image/svg+xml;utf8,%3Csvg xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width%3D"35px" height%3D"60px" viewBox%3D"112 0 60 285"%3E%3Cpath fill%3D"%23dadada" d%3D"M222.701%2C135.9L89.652%2C2.857C87.748%2C0.955%2C85.557%2C0%2C83.084%2C0c-2.474%2C0-4.664%2C0.955-6.567%2C2.857L62.244%2C17.133c-1.906%2C1.903-2.855%2C4.089-2.855%2C6.567c0%2C2.478%2C0.949%2C4.664%2C2.855%2C6.567l112.204%2C112.204L62.244%2C254.677c-1.906%2C1.903-2.855%2C4.093-2.855%2C6.564c0%2C2.477%2C 0.949%2C4.667%2C2.855%2C6.57l14.274%2C14.271c1.903%2C1.905%2C4.093%2C2.854%2C6.567%2C2.854c2.473%2C0%2C4.663-0.951%2C6.567-2.854l133.042-133.044c1.902-1.902%2C2.854-4.093%2C2.854-6.567S224.603%2C137.807%2C222.701%2C135.9z"%2F%3E%3C%2Fsvg%3E%0A') no-repeat;
    cursor     : pointer;
}

main.main .carousel-navigation button:hover {
    background : url('data:image/svg+xml;utf8,%3Csvg xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width%3D"35px" height%3D"60px" viewBox%3D"112 0 60 285"%3E%3Cpath fill%3D"%23868686" d%3D"M222.701%2C135.9L89.652%2C2.857C87.748%2C0.955%2C85.557%2C0%2C83.084%2C0c-2.474%2C0-4.664%2C0.955-6.567%2C2.857L62.244%2C17.133c-1.906%2C1.903-2.855%2C4.089-2.855%2C6.567c0%2C2.478%2C0.949%2C4.664%2C2.855%2C6.567l112.204%2C112.204L62.244%2C254.677c-1.906%2C1.903-2.855%2C4.093-2.855%2C6.564c0%2C2.477%2C 0.949%2C4.667%2C2.855%2C6.57l14.274%2C14.271c1.903%2C1.905%2C4.093%2C2.854%2C6.567%2C2.854c2.473%2C0%2C4.663-0.951%2C6.567-2.854l133.042-133.044c1.902-1.902%2C2.854-4.093%2C2.854-6.567S224.603%2C137.807%2C222.701%2C135.9z"%2F%3E%3C%2Fsvg%3E%0A') no-repeat;
}

main.main .carousel-navigation button.bt-left {
    position  : absolute;
    left      : -75px;
    transform : rotate(180deg);
}

main.main .carousel-navigation button.bt-right {
    position : absolute;
    right    : -75px;
}

main.main .carousel-content {
    display         : flex;
    width           : 100%;
    overflow-x      : hidden;
    scrollbar-width : inherit;
    scroll-behavior : smooth;
    position        : relative;
    z-index         : 3;
}

main.main article {
    /* display   : grid; */
    width     : 28.3vw;
    min-width : 28.3vw;
    margin    : 30px 40px 50px 0;
}

main.main article time {
    font-size     : 1.5em;
    font-weight   : bold;
    margin-bottom : 0;
}

main.main article time:empty {
    margin : 1em;
}

main.main article h2 {
    font-size     : 1.8em;
    font-weight   : bold;
    margin-bottom : 0;
}

main.main article img {
    object-fit : cover;
}

main.main article .imgWrapper {
    height     : 370px;
    margin     : 3px 0 10px 0;
    background : lightgrey;
}

main.videowall article .imgWrapper {
    position : relative;
}

main.videowall article .imgWrapper div.videowall_overlay {
    transition : .5s;
    background : radial-gradient(circle, rgba(0, 0, 0, 0.7) 0, rgba(0, 0, 0, 0.65) 45px, rgba(255, 255, 255, 0) 45px, rgba(255, 255, 255, 0) 45px);
    width      : 100%;
    height     : 100%;
    position   : absolute;
    top        : 0;
    left       : 0;
}

main.videowall article .imgWrapper div.videowall_overlay:hover {
    transition : .5s;
    background : radial-gradient(circle, rgba(0, 0, 0, 0.9) 0, rgba(0, 0, 0, 0.85) 45px, rgba(255, 255, 255, 0) 45px, rgba(255, 255, 255, 0) 45px);
}

main.videowall article .imgWrapper span.play {
    position      : absolute;
    z-index       : 5;
    border-left   : solid 50px #ffffff;
    border-bottom : solid 25px transparent;
    border-top    : solid 25px transparent;
    display       : inline-block;
    top           : calc(50% - 25px);
    left          : calc(50% - 20px);
}

main.main article p {
    font-family : "CelesteWebPro", serif;
    font-size   : 1.25em;
    display     : none;
}

main.main article a {
    text-decoration : unset;
    color           : unset;
}


/* VIDEOWALL CATEGORY */
main.videowall .carousel-content {
    display               : grid;
    grid-template-columns : 1fr 1fr 1fr;
    margin-bottom         : 75px;
}

main.videowall article h2 {
    font-size : 1.5em;
    margin    : 0 10px 10px 10px;
}

main.videowall.noTitles article h2 {
    display : none !important;
}

main.videowall article {
    margin : 20px 0 0 0;
}

main.videowall article .imgWrapper {
    margin : 3px 10px 10px 10px;
}

/* END VIDEOWALL */

.tags {
    margin-top : 10px;
    display    : flex;
    flex-wrap  : wrap;
}

.tags a {
    color           : #004f59 !important;
    border          : 1px solid #004f59 !important;
    border-radius   : 3px;
    padding         : 0 10px;
    margin          : 2px;
    line-height     : 1rem;
    font-size       : 0.9em;
    text-decoration : none !important;
    /*transition    : .025s;*/
}

.tags a:empty {
    visibility : hidden;
    margin     : 0.7em;
}

/* ***** SUB HEAD ***** */
header.sub {
    height          : 145px !important;
    width           : 100vw !important;
    position        : relative !important;
    box-shadow      : 0 0 15px 0 #b5b5b5 !important;
    display         : flex;
    justify-content : space-between;
    align-items     : center;
}

header.sub .logo {
    width  : 375px !important;
    margin : auto 25px !important;
}

/* ***** SUB MAIN ***** */
main.sub {
    width    : 100vw;
    overflow : hidden;
}

main.sub div.sub_sidebar {
    font-family        : "CelesteWebPro", serif;
    width              : 25%;
    height             : calc(100vh - 145px);
    padding            : 10px 35px;
    overflow-y         : scroll;
    -ms-overflow-style : none !important; /* Hide Scrollbar: IE and Edge */
    scrollbar-width    : thin !important; /* Hide Scrollbar: Firefox */
    box-shadow         : inset -7px -20px 50px 7px #d3d3d3;
    float              : right;
}

/* Hide Scrollbar: Webkit */
main.sub div.sub_sidebar::-webkit-scrollbar {
    display : none !important;
}

main.sub div.sub_sidebar a {
    text-decoration : none;
    color           : #1d1d1b;
}


main.sub div.sub_sidebar img {
    width         : 100%;
    margin-bottom : -1em;
}

main.sub div.sub_sidebar hr {
    border : 1px solid #80808026;
}

main.sub div.sub_sidebar hr:last-of-type {
    display : none;
}

main.sub div.sub_sidebar p:last-child {
    margin-bottom : 2em;
}

main.sub div.sub_content {
    float           : left;
    padding         : 35px 180px 0;
    width           : 75%;
    height          : calc(100vh - 145px);
    overflow-y      : scroll;
    scrollbar-width : inherit; /* Thin Scrollbar: Firefox */
    overflow-x      : hidden;
}

main.sub div.sub_content .gallery-container {
    max-width : 100%;
    margin    : 0 auto;
}

main.sub div.sub_content .gallery-container .gallery-content {
    display         : flex;
    flex-direction  : row;
    flex-wrap       : nowrap;
    align-content   : stretch;
    padding         : 0;
    max-width       : 100%;
    overflow        : hidden;
    scroll-behavior : smooth;
    justify-content : unset;
    position        : relative;
    z-index         : 2;
}

main.sub div.sub_content .gallery-container .gallery-content a {
    text-decoration : none;
    display         : flex;
}

main.sub div.sub_content .gallery-container .gallery-content a img {
    display    : block;
    float      : left;
    flex       : 0 0 auto;
    object-fit : cover;
    margin     : 5px;
    min-width  : 250px;
    min-height : 250px;
    height     : 250px;
    width      : 250px;
}

main.sub div.sub_content a img {
    max-width : 100%;
}

main.sub div.sub_content iframe {
    max-width  : 100% !important;
    margin-top : 1em;
    width      : 100%;
    height     : 30vw;
}

main.sub div.sub_content p:last-child {
    margin-bottom : 2em;
}

main.sub div.sub_content video {
    width  : 100%;
    height : auto;
}

main.sub div.sub_content h1,
main.sub div.sub_content h2,
main.sub div.sub_content h3,
main.sub div.sub_content h4,
main.sub div.sub_content h5 {
    margin-top : 0.5em;
}

main.sub div.sub_content h1:first-child {
    margin-top : unset;
}

/* Customise Scrollbar: Webkit */
main.sub div.sub_content::-webkit-scrollbar {
    width : 7px;
}

main.sub div.sub_content::-webkit-scrollbar-track {
    background : #f1efef;
}

main.sub div.sub_content::-webkit-scrollbar-thumb {
    background-color : #d1d1d1;
}

main.sub div.sub_content span.intro {
    font-family   : 'Brown-Pro-Light', sans-serif;
    font-size     : 1.5em;
    margin-bottom : 1em;
}

main.sub div.sub_content img.cover_img {
    width      : 100%;
    margin-top : 1.5em;
    object-fit : cover;
}

main.sub div.sub_content p {
    font-family : "CelesteWebPro", serif;
    font-size   : 22px;
    line-height : 1.4em;
    color       : #323237;
}

main.sub div.sub_content p > small {
    line-height : 5px !important;
    color       : gray;
}

main.sub div.sub_content a {
    color : #2a6599;
}

main.sub div.sub_content .carousel-navigation {
    height : 30px;
}

main.sub div.sub_content .carousel-navigation button {
    height          : 100%;
    justify-content : center;
    border          : none;
    background      : none;
    font-size       : 3em;
    margin-top      : 0;
    color           : gray;
    line-height     : .5em;
    cursor          : pointer;
}

main.sub div.sub_content .carousel-navigation {
    display         : flex;
    justify-content : center;
}

@media (hover : none) {
    /* Auf Touchgeräten die Navigation für Bildergalerien ausblenden und durchswipebar machen */
    main.sub div.sub_content .carousel-navigation {
        display : none;
    }

    main.sub div.sub_content .gallery-container .gallery-content {
        overflow-x : scroll;
    }
}

main.sub div.sub_content div.suggestion_contact {
    font-family : "CelesteWebPro", serif;
    font-style  : italic;
    font-size   : 1.2em;
    border-top  : 1px solid gray;
    padding-top : 1em;
    margin      : 0.25em 0 3em;
}


/* ***** PAGEFOOTER ***** */
footer {
    display        : flex;
    flex-wrap      : wrap;
    flex-direction : column;
    height         : 175px;
    margin         : 3em 0 0 0;
    background     : #eeeeee;
    padding        : 1em 5em 0 5em;
    z-index        : 3;
    text-align     : center;
}

main.sub footer {
    position    : unset;
    width       : calc(100% + 360px);
    padding     : 1em 5px !important;
    margin-left : -180px !important;
}

footer section {
    height      : 100%;
    font-size   : .8em;
    line-height : 1.4em;
}

footer section a {
    color           : #0014a0;
    text-decoration : none;
    transition      : .2s;
}

footer section a:hover {
    color : #1d1d1d;
}

footer section ul {
    padding : 0;
}

footer section ul li {
    list-style : none;
}

footer address {
    font-style : normal;
}

.footer_up {
    display : flex;
    width   : 66%;
}

.footer_up > section:nth-child(1) {
    width : 50%;
}

.footer_up > section:nth-child(2) {
    width : 50%;
}

.footer_legal {
    width : 33%;
}

.legal {
    font-size : 80%;
}

.legal ul {
    list-style   : none;
    padding-left : 0;
}

.legal ul li {
    display      : inline-block;
    margin-right : 1em;
}

.bulletpoint {
    height  : 12px;
    width   : 11px;
    display : inline-flex;
}


/* ***** MEDIA QUERIES ***** */

@media (max-width : 1500px) {
    header .logo {
    }

    header.main .faculty_list {
    }

    header .faculty_list select {
    }
}

@media (max-width : 1200px) {
    .noContent {
        margin : 20vh 1.5em;
    }

    header.main .logo {
        width  : 60%;
        margin : auto;
    }

    header.sub .logo {
    }

    header.main .faculty_list {
        width         : 100% !important;
        margin        : 40px auto 0;
        float         : unset;
        display       : flex;
        align-content : space-between;
    }

    header .faculty_list select {
        flex : 1;
    }

    header .faculty_list a {
        font-size : 0.9em !important;
        float     : left;
    }

    .cd-horizontal-timeline {
        margin : 3em auto -35px auto !important;
    }

    main.main {
        margin : 65px auto 0 auto;
    }

    main.main article {
        min-width : 39.5vw;
    }

    main.sub div.sub_content {
        padding : 35px 80px 0;
        height  : calc(100vh - 145px);
    }

    main.sub div.sub_sidebar {
        height : calc(100vh - 145px);
    }

    main.sub footer {
        width       : calc(100% + 160px);
        margin-left : -80px !important;
    }

    main.videowall .carousel-content {
        grid-template-columns : 1fr 1fr;
    }

    @media screen and (orientation : portrait) {
        main.main article {
            min-width : 36vw;
        }
    }
}

@media (max-width : 1000px) {
    .noContent {
        margin : 25vh 1.5em;
    }

    .noContent h1, h2 {
        font-size : 1.5rem;
    }

    header.sub {
        height          : 200px !important;
        flex-wrap       : wrap;
        justify-content : center;
    }

    header.sub .logo {
    }

    header.sub .faculty_list {
        width           : 100vw !important;
        justify-content : center;
        display         : flex;
        margin          : auto 5px auto 5px;
    }

    main.sub {
        height : calc(100vh - 200px);
    }

    main.sub div.sub_content h1 {
        font-size : 2.2em;
    }

    main.sub div.sub_content span.intro {
        font-size : 1.3em;
    }


    main.sub div.sub_content {
        padding : 35px 70px;
    }

    footer {
        display  : inline-block !important;
        position : unset;
        width    : 100%;
        height   : 100%;
        padding  : 1em;
    }

    footer > .footer_up {
        display        : inline-block !important;
        vertical-align : top;
        margin         : .5em 0;
        width          : 100%;
    }

    footer > .footer_up > section:first-child {
        float : left;
    }

    footer > .footer_up > section:last-child {
        float : right;
    }

    footer > .footer_legal {
        width : 100%;
    }

    main.sub footer {
        width          : calc(100% + 140px);
        margin-left    : -70px !important;
        height         : auto;
        padding-bottom : 2em !important;
    }

    main.sub footer > .footer_up {
        display        : inline !important;
        vertical-align : top;
        margin         : unset;
        width          : 33%;
    }
}

@media (max-width : 850px) {
    main.main {
        width : calc(100% - 140px);
    }

    main.main article {
        min-width : 100%;
    }

    main.main .carousel-navigation {
        display : none;
    }

    main.main .carousel-content {
        display : block;
    }

    main.main article {
        border-bottom : 1px solid #eeeeee;
        padding       : 2em 0;
    }

    main.main article:last-child {
        border-bottom : none;
        padding       : 2em 0;
    }

    main.sub div.sub_content {
        width   : 100vw;
        padding : 35px 50px;
    }

    main.sub div.sub_sidebar {
        display : none;
    }

    footer > .footer_up > section {
        width : 100% !important;
    }

    footer section ul {
        padding    : 0;
        margin-top : 0;
    }

    main.sub footer > .footer_up {
        display        : initial;
        vertical-align : top;
        margin         : initial;
        width          : 33%;
    }

    footer > .footer_up > section:first-child {
        float         : unset;
        margin-bottom : 2em;
    }

    footer > .footer_up > section:last-child {
        float : unset;
    }

    .noContent {
        margin : 15vh 1.5em 10vh 1.5em;
    }

    main.sub div.sub_content iframe {
        height : 50vw;
    }
}

@media (max-width : 720px) {
    header.sub {
    }

    header.sub .logo {
        width : 340px !important;
        top   : 35% !important;
    }

    header.sub .faculty_list {
    }

    header .faculty_list select {
        width : 100%;
    }

    header.main .welcome {
        margin : 30px 5px -25px 5px !important;
        width  : 100%;
    }

    main.sub {
        height : calc(100vh - 200px);
    }

    main.sub div.sub_content h1 {
        font-size : 2em;
    }

    main.main {
        display : block;
        width   : calc(100% - 100px);
    }

    main.main article {
        margin-bottom : 50px;
    }

    main.main article h2 {
        margin-top : 13px;
    }

    main.main article p {
        margin-top : 10px;
    }

    header a.badge {
        display : none;
    }

    .noContent {
        margin : 15vh 1.5em 0 1.5em;
    }
}

@media screen and (max-width : 600px) {
    header.main .logo {
        width : 75%;
    }

    header .faculty_list select {
        width : 100%;
    }

    main.main {
        width : calc(100% - 100px);
    }
}

@media (max-width : 400px) {
    header.main .logo {
        width : 85%;
    }


    main.sub div.sub_content h1 {
        font-size : 1.75em;
    }

    main.sub div.sub_content span.intro {
        font-size : 1.2em;
    }

    header.sub .logo {
        width  : 85vw !important;
        margin : auto 25px !important;
    }

    header .faculty_list {
        font-size : 0.9em !important;
    }

    main.sub div.sub_content {
        padding : 35px 25px;
    }

    @media screen and (orientation : portrait) {
        main.main {
            width : calc(100% - 30px);
        }
    }

    @media screen and (max-width : 600px) {
        header a.badge {
            display : none;
        }
    }
}