@font-face {
    font-family: IBMPlex;
    src: url(Fonts/IBMPlexSans-Regular.woff);
  }
  @font-face {
    font-family: IBMPlexBold;
    src: url(Fonts/IBMPlexSans-Bold.woff);
  }
  @font-face {
    font-family: Alpina;
    src: url(Fonts/GT-Alpina-Fine-Standard-Bold.woff);
  }
* {
    margin: 0;
    padding: 0;
  }
  body{
    background-color: #ffff;

  }
html { 
    background: url(/Images/Background.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
p.about{
    font-family: IBMPlex;
    color: black;
    text-align: center;
    margin: auto;
    font-size: 100px;
    width: 50%;
    position: fixed;
    top: 50%;
}
.preview-p1, .preview-p2, .preview-p3, .preview-p4,.preview-p5,.preview-p6,.preview-p7, .preview-p8{
    display: none;
}
li.work-item1:hover + img.preview-p1{
    display:block;
    width:30%;
    position: fixed;
    bottom: 20%;
    right: 10%;
}
li.work-item2:hover + img.preview-p2{
    display:block;
    width:20%;
    position: fixed;
    bottom: 40%;
    right: 30%;
}
li.work-item3:hover + img.preview-p3{
    display:block;
    width:30%;
    position: fixed;
    bottom: 40%;
    right: 10%;
}
li.work-item4:hover + img.preview-p4{
    display:block;
    width:25%;
    position: fixed;
    bottom: 50%;
    right: 22%;
}
li.work-item5:hover + img.preview-p5{
    display:block;
    width:25%;
    position: fixed;
    bottom: 20%;
    right: 10%;
}
li.work-item6:hover + img.preview-p6{
    display:block;
    width:25%;
    position: fixed;
    bottom: 40%;
    right: 30%;
}
li.work-item7:hover + img.preview-p7{
    display:block;
    width:20%;
    position: fixed;
    bottom: 50%;
    right: 35%;
}
li.work-item8:hover + img.preview-p8{
    display:block;
    width:25%;
    position: fixed;
    bottom: 50%;
    right: 22%;
}

p.two:hover img{
    display: block;
}
.center-fit {
    background-size: cover;
    max-width: 100%;
    margin: auto;
}
.no-scrolling{
    margin: 0; 
    height: 100%; 
    overflow: hidden
}
#logo {
    position: relative;
    z-index: 99;
}
#logo img {
    position: fixed;
    top: 18px;
    left: 18px;
    width:100%; 
    height:auto; 
    max-width:300px;
}
.menu {
    z-index: 2;
    font-family: IBMPlex;
    position:fixed;
    background:transparent;
    top:10px;
    right:0;
    padding:0;
    text-align:center;
    font-size:20px;
 }
 
 .menu a:link, a:visited {
    display:block;
    width:100%;
    font-weight:light;
    color: white;
    background:transparent;
    text-align:center;
    text-decoration:none;
    text-transform:uppercase;
 }
 
 .menu a:hover,.menu a:active {
    padding-bottom:8px;
    background:transparent;
    border-bottom:4px solid rgb(58, 58, 58);
    color:rgb(58, 58, 58);
 }

.work-items {
   /* poppins-500 - latin */
    font-family: IBMPlex;
    font-style: normal;
    font-weight: 500;
    src: local(''),
         url('../fonts/poppins-v19-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('../fonts/poppins-v19-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    position:fixed;
    list-style-type:none;
    background:transparent;
    bottom:15px;
    text-align:left;
    overflow:hidden;
    height: 80%;
    padding:2%;
 } 
 .work-item1, .work-item2,.work-item3,.work-item3,.work-item4,.work-item5,.work-item6, .work-item7, .work-item8{
    padding-bottom: 4%;
}
 .work-list a {
    color:#ce5713;
    font-size:25px;
    text-decoration: none;
    padding-bottom: 4px;
    border-bottom-style: solid;
    border-bottom-width: 3.1px;
    width: fit-content;
 }
 .work-list a:hover, a:active {
    color:white;
    font-size:25px;
    text-decoration:none;
    padding-bottom: 4px;
    border-bottom-style: solid white;
    border-bottom-width: 3.1px;
    width: fit-content;
 }
 #portfolioBY{
     position: fixed;
     bottom: 20px;
     right:25px;
     color: white;
     font-size:16px;
     font-family: IBMPlex;
     font-style: normal;
 }
 #impressum{
    position: fixed;
    bottom: 20px;
    left:25px;
    margin-bottom: 1%;
    color: white;
    font-size:16px;
    font-family: IBMPlex;;
    font-style: normal;

 }
 #impText{
     background: transparent;
     margin-top: 15%;
     margin-left:1%;
 }
 .impressum{
    background: transparent;
 }
 #hello{
    z-index: 95;
    position: fixed;
    max-width: 15%;
    right:-5000px;
    bottom:60px;
 }
 #helloText{
    z-index: 3;
    position: fixed;
    background-color: white;
    border-radius: 25px;
    padding: 20px;
    right:-5000px;
    bottom:90px;

 }
 #mailadress{
    color:black;
 }
 .animationText{
  position: relative;
  animation-name: helloText;
  animation-duration: 14s;
 }
 @keyframes helloText {
    0%   { right:-2000px; bottom:90px;}
    15%  { right:50px; bottom:90px;}
    50%  { right:50px; bottom:90px;}
    75%  { right:-1200px; bottom:90px;}
    100% { right:-5000px; bottom:90px;}
 }
 .animationImg{
    position: relative;
    animation-name: helloImg;
    animation-duration: 14s;
   }
   @keyframes helloImg {
    0%   { right:-2000px; bottom:60px;}
    15%  { right:490px; bottom:60px;}
    50%  { right:490px; bottom:60px;}
    75%  { right:-1220px; bottom:60px;}
    100% { right:-5000px; bottom:60px;}
   }
 /* CSS für Tablet */
  
@media (max-width:992px) {
  
    li.work-item1, .work-item2,.work-item3,.work-item3,.work-item4,.work-item5,.work-item6, .work-item7, .work-item8{
        padding-bottom: 5%;
        position:relative;
        z-index: 99;
    }
    
    .work-list a {
        z-index: 99;
        font-size:38px;
    }
    .work-items {
         bottom:15px;
         height: 80%;
         padding:4%;
      }
    img.preview-p1{
        z-index: 1; 
        display:block;
        opacity:40%;
        width:15%;
        position: fixed;
        top: 18%;
        left: 30%;
    }
    img.preview-p2{
        z-index: 1;
        display:block;
        opacity:40%;
        width:12%;
        position: fixed;
        bottom: 40%;
        right: 10%;
    }
   img.preview-p3{
        z-index: 1;
        display:block;
        opacity:40%;
        width:15%;
        position: fixed;
        bottom: 66%;
        right: 4%;
    }
    img.preview-p4{
        z-index: 1;
        display:block;
        opacity:40%;
        width:15%;
        position: fixed;
        bottom: 58%;
        right: 60%;
    }
    img.preview-p5{
        z-index: 1;
        display:block;
        opacity:40%;
        width:15%;
        position: fixed;
        bottom: 35%;
        left: 10%;
    }
   img.preview-p6{
        z-index: 1;
        display:block;
        opacity:40%;
        width:15%;
        position: fixed;
        bottom: 28%;
        right: 30%;
    }
    img.preview-p7{
        z-index: 1;
        display:block;
        opacity:40%;
        width:13%;
        position: fixed;
        bottom: 13%;
        left: 20%;
    }
    img.preview-p8{
        z-index: 1;
        display:block;
        opacity:40%;
        width:15%;
        position: fixed;
        bottom: 46%;
        right: 40%;
    }
    #portfolioBY, #impressum{
        font-weight: 500;
    }
    .menudark {
        font-size:25px;
     }
     @keyframes helloText {
        0%   { right:-2000px; bottom:90px;}
        25%  { right:-2000px; bottom:90px;}
        50%  { right:-2000px; bottom:90px;}
        75%  { right:-2000px; bottom:90px;}
        100% { right:-2000px; bottom:90px;}
     }

       @keyframes helloImg {
        0%   { right:-2000px; bottom:60px;}
        25%  { right:-2000px; bottom:60px;}
        50%  { right:-2000px; bottom:60px;}
        75%  { right:-2000px; bottom:60px;}
        100% { right:-2000px; bottom:60px;}
       }
  }
  
  /* CSS für Smartphone */
  
  @media (max-width:768px) {
    html { 
        background: url(/Images/BackgroundTrans.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
      }
    img.preview-p1, img.preview-p2, img.preview-p3, img.preview-p4, img.preview-p5, img.preview-p6, img.preview-p7, img.preview-p8 {
     display: none;
    }
    #logo img{
        width: 45%;
        margin: 0.5%;
        padding:0.5%;
        top:5px;
        left:5px;
    }
    .work-list a{
        font-size: 14px;
        padding-bottom: 5px;
        border-bottom-width: 2px;
    }
    li.work-item1, .work-item2,.work-item3,.work-item3,.work-item4,.work-item5,.work-item6, .work-item7, .work-item8{
        margin-bottom:3%;
    }
    .work-list a:hover, a:active {
        padding-bottom: 5px;
        border-bottom-width: 2px;
     }
     .work-list a:hover, a:active {
        font-size:14px;
     }
    #portfolioBY, #impressum{
        font-size:12px;
        font-weight: 400;
    }
    .menu {
        top:15px;
        font-size:12px;
     }
     
     .menu a:link, a:visited {
        font-size:12px;
    }
     
     .menu a:hover,.menu a:active {
        padding-bottom:8px;
        border-bottom:4px solid rgb(58, 58, 58);
     }
    .menu a:active {
        padding-bottom:8px;
        border-bottom:4px solid rgb(58, 58, 58);
     }
     a.nav-link{
         padding: 0;
     }
     .mr-4{
         margin-right: 0.5em !important;
     }
     @keyframes helloText {
        0%   { right:-2000px; bottom:90px;}
        25%  { right:-2000px; bottom:90px;}
        50%  { right:-2000px; bottom:90px;}
        75%  { right:-2000px; bottom:90px;}
        100% { right:-2000px; bottom:90px;}
     }

       @keyframes helloImg {
        0%   { right:-2000px; bottom:60px;}
        25%  { right:-2000px; bottom:60px;}
        50%  { right:-2000px; bottom:60px;}
        75%  { right:-2000px; bottom:60px;}
        100% { right:-2000px; bottom:60px;}
       }
  
    }