@font-face {
    font-family: 'Century Gothic';
    src: url('../fonts/CenturyGothic.eot');
    src: local('Century Gothic'), local('CenturyGothic'),
             url('../fonts/CenturyGothic.eot?#iefix') format('embedded-opentype'),
             url('../fonts/CenturyGothic.woff2') format('woff2'),
             url('../fonts/CenturyGothic.woff') format('woff'),
             url('../fonts/CenturyGothic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@media screen and (min-device-width: 600px) and (min-device-height: 600px) {
    html, body {
        width: 100%;
        height: 100vh;
        margin: 0;
        font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
        text-align: justify;
    }
    /*body {
        background-image: url('img/Hintergrund.svg');
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
        background-size: contain;
    }*/
    .container {
        width: 100%;
        height: 100%;
        display: block;
    }

    .reference {
        text-align: left;
    }

    .link {
        position: relative;
        top: 50%;
        transform: translate(0%, -50%); 
        width: 600px;
        height: 600px;
        display: block;
        margin: 0 auto;
        cursor: pointer;
    }
    a.text-link {
        color: black;
    }
    .image {
        width: 600px;
        height: 600px;
    }
    .subside {
        width: 600px;
        height: 100%;
        background: white;
        margin: 0 auto;
        position: fixed;
        top: 0%;
        transform: translate(-50%, 0%);
        left: 50%;
        display: none;
        line-height: 24px;
        font-size: 18px;
        z-index: 9999;
    }
    
    .subside-content {
        overflow-y: scroll;
        height: calc(100% - (50% - 300px));
    }
    .subside-content a {
        color: black;
    }

    .funktion ul {
        list-style-type: none;
    }
    
    .label {
        width: 50%;
        
    }
    .kontakt {
        text-align: center;
    }
    .cancle {
        margin: 0 auto;
        height: calc(50% - 300px);
    }
    .cancle-link{
        height: 100%;
        display: block;
        text-align: center;
    }
    .cancle-symbol {
        height: 50%;
        position: relative;
        top: 50%;
        transform: translate(0%, -50%);
    }
    .pfeil {
        height: 25%;
        position: relative;
        top: 50%;
        transform: translate(0%, -50%);
    }
    .pfeil-link {
        height: 100%;
        position:absolute;
        left: 50%;
        transform:translate(-50%, 0%);
        cursor: pointer;
    }
    .pfeil-oben {
        height: calc(50% - 300px);
    }
    .pfeil-unten {
        height: calc(50% - 300px);
        bottom: calc(-50% + 300px);
        position: relative !important;
    }
    .pfeil-oben, .pfeil-unten{
        width: 100%;
        position:absolute;
    }
    .text {
        color:rgb(128,128,128);
        font-size: 24px;
        position: relative;
        top: -45px;
        left: 5px;
        text-shadow: 0 0 10px white;
        text-align: center;
    }
    .subside.flex {
        width: 617px;
    }
    .flex-container {
        display: flex;
        height: 1215px;
        width: 600px;
        flex-wrap: wrap;
        align-content: space-between;
    }

    .flex-container > div {
        background-color: #f1f1f1;
        width: 190px;
        height: 190px;
        text-align: center;
        line-height: 75px;
        font-size: 30px;
        margin: 5px;
        cursor: pointer;
    }

    .flex-container > div#expand {
        position: absolute;
        width: 600px;
        height: 600px;
        margin: 0;
        display: none;
        text-align: center;
        font-size: 30px;
        cursor: auto;
    }

    .close-picture {
        position: absolute;
        top: 0;
        right: 0;
        width: 32px;
        height: 32px;
        cursor: pointer;
    }
    .picture img {
        width: 190px;
        height: 190px;
    }

    .big {
        width: 590px !important;
        height: 590px !important;
    }

    .expand-content img  {
        width: 600px;
        height: 600px;
    }

    .haftungsausschluss {
        text-align: justify;
    }

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

@media screen and (max-device-width: 600px) and (orientation: portrait) {
    html, body {
        width: 100vw;
        height: 100vh;
        margin: 0;
        font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
        text-align: justify;
    }
    .reference {
        text-align: left;
    }
    .container {
        width: 100%;
        height: 75%;
        display: block;
    }
    
    .image {
        width: 100%;
    }

    .label {
        width: 50vw;
    }

    .link {
        top: 50%;
        width: 95%;
        height: 95vw;
        display: block;
        margin: 0 auto;
    }

    pfeil, .pfeil-link, pfeil-oben, pfeil-unten {
        display: none;
    }

   .subside {
       width: 100vw;
       height: 100%;
       background: white;
       margin: 0 auto;
       position: fixed;
       top: 0%;
       display: none;
       line-height: 24px;
       font-size: 16px;
       z-index: 9999;
    }
   .subside-content {
       height: 90vh;
       padding-left: 10px;
       padding-right: 10px;
       padding-top: 10px;
       overflow-y: scroll;
   }
   .design {
       text-align: center;
   }
   .subside-content a {
       color: rgb(128,128,128);
   }

   .flex div.subside-content {
       padding-left: 0px !important;
       padding-right: 0px !important;
   }
   
   .text {
       color: rgb(128, 128, 128);
       font-size: 22px;
       position: relative;
       text-decoration: none;
       left: 5px;
       text-align: center;
   }
   .funktion ul {
       list-style-type: none;
       padding-left: 0;
   }
   .cancle {
       margin: 0 auto;
       height: 10vh;
       overflow-y: hidden;
   }
   .cancle-link{
       height: 100%;
       width: 50%;
       display: block;
       position: relative;
       left: 50%;
       transform: translate(-50%, 0%);
       text-align: center;
       -webkit-transform: translate(-50%, 0%);
       overflow-y: hidden;
   }
   .cancle-symbol {
       height: 100%;
       width: 100%;
       overflow-y: hidden;
   }
   
   .picture {
       width: 100vw;
       margin: 0 auto;
   }

   #expand {
       display: none;
   }
   
   .picture img {
       width: 100vw;
   }
}

@media screen and (max-device-height: 600px) and (orientation: landscape) {
    html, body {
        width: 98vw;
        height: 100vh;
        margin: 0;
        font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
        text-align: justify;
    }

    
    .container {
        width: 100%;
        height: 100%;
        display: block;
    }
    
    .image {
        height: 100%;
    }

    .link {
        position: relative;
        height: 100vh;
        width: 100vh;
        display: block;
        margin: 0 auto;
    }
    .pfeil-oben, .pfeil-unten {
        display: none;
    }

    .subside {
        width: 100vw;
        height: 100%;
        background: white;
        margin: 0 auto;
        position: fixed;
        top: 0;
        display: none;
        line-height: 24px;
        font-size: 18px;
        z-index: 9999;
    }
    .subside-content {
        height: 100%;
        overflow-y: scroll;
    }
    .text {
        color:white;
        font-size: 22px;
        position: absolute;
        bottom: 5px;
        left: 5px;
        text-shadow: 0 0 10px black;
    }
    .cancle {
        margin: 0 auto;
        height: 10vh;
    }
    .cancle-link{
        height: 100%;
        display: block;
        text-align: center;
    }
    .cancle-symbol {
        height: 100%;
    }
    .picture {
        height: 90vh;
        width: 100vh;
        margin: 0 auto;
    }

    #expand {
        display: none;
    }
    
    .picture img {
        height: 85vh;
    }
}