@font-face {
    font-family: 'TIGR';
    src:
        url('TIGR-Regular.woff2') format('woff2'),
        url('TIGR-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
body{
    font-family: 'TIGR', 'Georgia', sans-serif;
    margin: 0 0px;

}
img{
    /*filter: contrast(1.3);*/


}
@keyframes example {
  0%  {color: #000}
  50%  {color: #321}
  100% {color: #000;}
}

.page p, .page ul, .page li { 
    /*font-family: 'Georgia', serif; */
    font-size: 16px;
    max-width: 500px;
    -webkit-hyphens: auto;
    -webkit-hyphenate-limit-before: 3;
    -webkit-hyphenate-limit-after: 3;
    -webkit-hyphenate-limit-chars: 6 3 3;
    -webkit-hyphenate-limit-lines: 2;
    -webkit-hyphenate-limit-last: always;   
    -webkit-hyphenate-limit-zone: 8%;

    -moz-hyphens: auto;
    -moz-hyphenate-limit-chars: 6 3 3;
    -moz-hyphenate-limit-lines: 2;  
    -moz-hyphenate-limit-last: always;
    -moz-hyphenate-limit-zone: 8%;

    -ms-hyphens: auto;
    -ms-hyphenate-limit-chars: 6 3 3;
    -ms-hyphenate-limit-lines: 2;
    -ms-hyphenate-limit-last: always;   
    -ms-hyphenate-limit-zone: 8%;

    hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
    hyphenate-limit-lines: 2;
    hyphenate-limit-last: always;   
    hyphenate-limit-zone: 8%;
}

a {
    color: #000;
/*
  animation-name: example;
  animation-duration: 2s;
  animation-iteration-count: infinite;*/
}

a:hover {
    color: #333;
}

header, footer {
    max-width: 760px;
    margin: 0 auto;
    padding: 30px 30px;
}
footer{
    text-align: center;
    font-size: 0.8em;
}

header #logo{
    margin: 28px 0 0;
}
#logo a{
    text-decoration: none;
    color: #fff;
}

header h1 {
    color: #fff;
    background: #000;
    margin: 0;
    font-weight: normal;
    display: inline-block;
    padding: 4px 8px;
    transform: skew(166deg, -9deg);
    font-size: 2.2em;
}
header h1 span {
    display: inline-block;
    transform: skew(4deg, 0deg);
}

header nav ul {
    list-style: none;
    margin: 33px 0 0 80px;
    padding: 3px 2px 4px;

    background: #fff;
    display: inline-block;
}

header nav ul li {
    display: inline;
    margin: 0 8px 0 6px;
    padding: 4px;
}

div.page {
/*    max-width: 760px;
    margin: 0 auto;*/
    padding: 0px 30px;
}
div.page p{
    /*text-indent: 1em;*/
}
p, ul, li{
        line-height: 1.5em;
}
h1,h2,h3,h4,h5{
/*    font-weight: normal;
*/    margin-top: 1.7em;
}

img {
    max-width: 100%;
}
a:focus {
outline: none;
}
img:hover{
    /*clip-path:polygon(0 0, 100% 0 , 100% 100%, 0% 100%)!important;*/
        /*transition: all .02s linear;*/

}

#headerimg{
    position: absolute;
    height: 240px;
    top: 0px;
    z-index: -2;
    right: 5%;
    transition: all 0.5s ;
    /*transform: skew(166deg, -9deg);*/
}
#headerimgdesc{
        position: absolute;
    top: 240px;
    z-index: -2;
    right: 5%;
    font-size: 10px;
    font-style: italic;
    color: #999;
}


.faculty-post{
    position: relative;
    margin-bottom: 1rem;
}
.facultylist-member{
    width: 250px;
    margin: 0 auto 40px;
}
.facultylist-member h3{
    position: absolute;
    top: 60%;
    right: 0;
    background: #fff;
    padding: 2px 4px;
    /*pointer-events: none;*/
}
.dreispalten, .bildtext{
    display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content:flex-end;
}
.dreispalten div, .bildtext div{
    padding: 20px 30px 0px 0;
 /*   width: calc(50% - 30px);*/
    width: 340px;
    max-width: 375px;
}
.dreispalten div.spalte0{
    width: 25%;
}
@media only screen and (max-width: 1200px) {
    .dreispalten div.spalte0{
        width: 40%;
        max-width: 800px
    }   
}
@media only screen and (max-width: 950px) {
    .dreispalten div.spalte0{
        width: 85vw;
        max-width: 800px
        margin-left:0vw;
    }   
    .dreispalten div, .bildtext div{
    padding: 0;
 /*   width: calc(50% - 30px);*/
    margin-right: 0;
    margin-left: 20vw;
    width: 85vw;
    max-width: 800px;
}
}
@media only screen and (max-width: 800px) {
    .dreispalten div.spalte0{
        width: 85vw;
        max-width: 800px
        margin-left:0vw;
    }   
    .dreispalten div, .bildtext div{
    padding: 0;
 /*   width: calc(50% - 30px);*/
    margin-right: 0;
    margin-left: 2vw;
    width: 90vw;
    max-width: 800px;
}
}
.single-image{
    max-width: 75%;
    /*margin-left: calc(100vw*0.75 - 800px*0.75);*/
}
h1.pagetitle{
    font-size: 1.8em;   
}

h1.pagetitle, .text-block, .bodytext{
    margin-left: calc(100vw*0.75 - 800px*0.75);
    margin-right: calc(100vw*0.25 - 800px*0.25);
    min-width: 740px;
    /*max-width: 800px;*/
}

@media only screen and (max-width: 1200px) {
    h1.pagetitle, .text-block, .bodytext{
        margin-left: 20vw;
        min-width: auto;
        /*max-width: 800px;*/
    }
}
@media only screen and (max-width: 800px) {
    h1.pagetitle, .text-block, .bodytext{
        margin-left: 2vw;
        min-width: auto;
        max-width: 80vw;
        /*max-width: 800px;*/
    }
}

#facultylist, #ehemaligelist{
      display: flex;
  flex-flow: wrap;
  /*max-height: 1000px;*/
}

#facultylist, #ehemaligelist{
margin-left: calc(100vw*0.75 - 940px*0.75);
/*margin-right: calc(100vw*0.25 - 800px*0.25);*/
/*max-width: 100vw;*/
min-width: 320px;
max-width: 900px;
}

@media only screen and (max-width: 1200px) {
    #facultylist, #ehemaligelist{
    margin-left: 20vw;
    /*margin-right: calc(100vw*0.25 - 800px*0.25);*/
    /*max-width: 100vw;*/
    min-width: 320px;
    max-width: 600px;
      flex-flow:  wrap;
/*  max-height: 1500px;
*/    }
}

@media only screen and (max-width: 800px) {
    #facultylist, #ehemaligelist{
    margin-left: 20vw;
    /*margin-right: calc(100vw*0.25 - 800px*0.25);*/
    /*max-width: 100vw;*/
    min-width: 320px;
    max-width: 300px;
      flex-flow: wrap;
  max-height: 40000px;
    }
}


.dreispalten, .bildtext{
/*margin-left: calc(65vw*0.75 - 740px*0.75);*/
margin-right: calc(100vw*0.25 - 800px*0.25);
/*max-width: 800px;
*/}

.bildtext > div.spalte:first-child{
    width: 35vw;
    max-width: 500px;
    min-width: 
}

@media only screen and (max-width: 1200px) {
    .dreispalten, .bildtext{
        margin-right: 0;
    /*margin-right: calc(100vw*0.25 - 800px*0.25);*/
    /*max-width: 800px;
    */}
    .bildtext > div.spalte:first-child{
    width: 85vw;
    max-width: 500px;
    min-width: 
}
}