/* PORTFOLIO - MOBILE */
html{
    scroll-behavior: smooth;
}

#wrap {
    width: 100%;
    margin-top: 10%;
    line-height: 0.10;
}

.wrap-galerie {
    width: 100%;
    margin: auto;
}

.wrap-pic-waage {
    position: relative;
}

.wrap-pic {
    position: relative;
}

.wrap-pic-waage img {
    width: 100%;
    height: 100%;
    z-index: 10;
}

.wrap-pic img {
    width: 100%;
    height: 100%;
    z-index: 10;
}

.wrap-pic-waage a {
    display: contents;
}

.wrap-pic a {
    display: contents;
}

.wrap-cover, .wrap-cover-2 {
    display: grid;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.8);
    text-align: center;
    line-height: 1.8;
    padding-left: 0;
}

.wrap-cover, .wrap-cover-2 {
    display: grid;
}

.wrap-cover {
    height: 10%;
    top: 96%;
}

.wrap-cover-2 {
    height: 23%;
    top: 89%;
}

.wrap-titel, .wrap-titel-2 {
    display: grid;
    grid-template-rows: 40% 50%;
    grid-template-areas: "wrap-titel-h2" "wrap-titel-p";
    margin-top: 2%;
}

.wrap-titel h2 {
    /*grid-area: titel-h2;*/
    font-size: 2em;
    color: #FFF;
    text-transform: uppercase;
}

.wrap-titel-p, .wrap-titel-p-2 {
    /*grid-area: wrap-titel-p;*/
    color: #F2F2F2;
    font-size: 1em;
}

.wrap-titel-2 h2 {
    /*grid-area: titel-h2;*/
    font-size: 2em;
    color: #FFF;
    text-transform: uppercase;
}

.zitat-above {
    width: 100%;
    padding-top: 30%;
}

.zitat-below {
    margin: auto;
    width: 80%;  
}

.zitat {
    width: 65%;
    margin: auto;
    letter-spacing: 0.2em;
}

.zitat h2 {
    font-size: 2em;
    text-align: center;
}

.button-up-over {
    display: none;
}

/* PORTFOLIO - TABLET - PORTRAIT */
@media only screen and (device-width: 768px) and (max-width: 1000px){
    #wrap {
        width: 100%;
        margin-top: 5%;
    }

    .wrap-galerie {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        margin-bottom: 10%;
    }
    
    .wrap {
        width: 100%;
    }

    .wrap-2 {
        width: 100%;
    }

    .wrap-3 {
        width: 100%;
    }

    .wrap-pic-img, .wrap-pic-waage-img {
        display: block;
        opacity: 1;
        transition: .5s ease;
        backface-visibility: hidden;
    }

    .wrap-cover, .wrap-cover-2 {
        display: grid;
        position: absolute;
        transition: .5s ease;
        opacity: 0;        
        width: 100%;
        height: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: rgba(0,0,0,0.4);
        text-align: center;
        padding-left: 0;
    }

    .puffer {
        height: 1%;
    }

    .wrap-pic {
        position: relative;
    }

    .wrap-pic-waage {
        position: relative;
    }
    
    .wrap-titel, .wrap-titel-2 {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: "wrap-titel-h2" "wrap-titel-p";
        align-self: center;
    }
    
    .wrap-titel h2, .wrap-titel-2 h2 {
        font-size: 1em;
    }
    
    .wrap-titel-p, .wrap-titel-p-2 {
        display: grid;
        font-size: 1em;
    } 
    
    .wrap-pic:hover .wrap-pic-img,
    .wrap-pic-waage:hover .wrap-pic-waage-img {
        opacity: 0.5;
    }

    .wrap-pic:hover .wrap-cover,
    .wrap-pic-waage:hover .wrap-cover-2 {
        opacity: 1;
    }

 }


/* PORTFOLIO - TABLET */
@media only screen and (min-width: 1001px) and (max-width: 1280px){
    #wrap {
        width: 100%;
        margin-top: 5%;
        margin-bottom: 30%;
    }

    .wrap-galerie {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        margin-bottom: 10%;
    }
    
    .wrap {
        width: 100%;
    }

    .wrap-2 {
        width: 100%;
    }

    .wrap-3 {
        width: 100%;
    }

    .wrap-pic-img, .wrap-pic-waage-img {
        display: block;
        opacity: 1;
        transition: .5s ease;
        backface-visibility: hidden;
    }

    .wrap-cover, .wrap-cover-2 {
        display: grid;
        position: absolute;
        width: 100%;
        /*height: 100%;
        top: 50%;*/
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: rgba(0,0,0,0.8);
        text-align: center;
        padding-left: 0;
    }

    .wrap-cover {
        height: 20%;
        top: 90%;
    }
    
    .wrap-cover-2 {
        height: 45%;
        top: 80%;
    }

    .puffer {
        /*height: 2%;*/
    }

    .wrap-pic {
        position: relative;
    }

    .wrap-pic-waage {
        position: relative;
    }
    
    .wrap-titel, .wrap-titel-2 {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: "wrap-titel-h2" "wrap-titel-p";
        align-self: center;
    }
    
    .wrap-titel h2, .wrap-titel-2 h2 {
        font-size: 1em;
    }
    
    .wrap-titel-p, .wrap-titel-p-2 {
        display: grid;
        font-size: 1em;
    } 
    
}

/* DESKTOP - SMALL */
@media only screen and (min-width: 1281px) and (max-width: 1440px) {
    #wrap {
        width: 100%;
        margin-top: 2%;
    }
    
    .wrap-galerie {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        width: 90%;
        margin-bottom: 10%;
    }

    .wrap {
        width: 95%;
    }

    .wrap-2 {
        width: 95%;
    }

    .wrap-3 {
        width: 95%;
    }

    .wrap-pic-img, .wrap-pic-waage-img {
        display: block;
        opacity: 1;
        transition: .5s ease;
        backface-visibility: hidden;
    }

    .wrap-cover, .wrap-cover-2 {
        display: grid;
        position: absolute;
        transition: .5s ease;
        opacity: 0;        
        width: 100%;
        height: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: rgba(0,0,0,0.4);
        text-align: center;
        padding-left: 0;
    }

    .puffer {
        height: 1%;
    }

    .wrap-titel, .wrap-titel-2 {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: "wrap-titel-h2" "wrap-titel-p";
        align-self: center;
    }

    .wrap-titel h2, .wrap-titel-2 h2 {
        display: grid;
        font-size: 1.5em;
    }

    .wrap-titel-p, .wrap-titel-p-2 {
        font-size: 1em;
        display: grid;
    }

    .wrap-pic:hover .wrap-pic-img,
    .wrap-pic-waage:hover .wrap-pic-waage-img {
        opacity: 0.5;
    }

    .wrap-pic:hover .wrap-cover,
    .wrap-pic-waage:hover .wrap-cover-2 {
        opacity: 1;
    }

    .zitat-above {
        padding-top: 10%;
    }

    }

    /* DESKTOP */
@media only screen and (min-width: 1441px) {
    #wrap {
        width: 100%;
        margin-top: 2%;
    }

    #wrap_2 {
        width: 100%;
    }

    .wrap_2 {
        width: 100%;
    }

    .wrap-galerie {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        width: 80%;
        /*margin-bottom: 10%;*/
        /*padding-left: 10%;*/
    }

    .wrap_2 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .section {
        grid-column: 1;
    }

    .sec. {
        grid-column: 2;
    }

    .sec-2 {
        grid-column: 3;
        margin: auto;
        width: 20%;
        padding: 5% 10%;
    }

    .stylebox-over {
        width: 100%;
    }

    .stylebox-under {
        width: 50%;
        margin: auto;
    }

    .stylebox {
        /*width: 600px;
        height: 600px;
        background-color: purple;*/
    }

    .wrap {
        /*width: 100%;
    }

    .wrap-2 {
        width: 100%;
    }

    .wrap-3 {
        width: 100%;
    }

    .wrap-4 {
        width: 100%;*/
    }

    .wrap-pic-img, .wrap-pic-waage-img {
        display: block;
        opacity: 1;
        transition: .5s ease;
        backface-visibility: hidden;
        /*transform: rotate(-10deg);*/
    }

    .wrap-cover {
        display: grid;
        transition: .5s ease;
        opacity: 0;        
        width: 100%;
        height: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /*background-color: rgba(0,0,0,0.4);*/
        background-color: #050505;
        /*transform: rotate(-10deg);*/
        position: absolute;
        padding-left: 0;
        text-align: center;
    }

    .wrap-cover-2 {
        display: grid;
        transition: .5s ease;
        opacity: 0;        
        width: 100%;
        height: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /*transform: rotate(-10deg);*/
        /*background-color: rgba(0,0,0,0.4);*/
        background-color: #050505;
        position: absolute;
        padding-left: 0;
        text-align: center;
    }

    .puffer {
        /*height: 0.3%;*/
    }

    .wrap-titel, .wrap-titel-2 {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: "wrap-titel-h2" "wrap-titel-p";
        align-self: center;
    }

    .wrap-titel h2, .wrap-titel-2 h2 {
        display: grid;
        font-size: 1.5em;
    }

    .wrap-titel-p, .wrap-titel-p-2 {
        font-size: 1.3em;
        display: grid;
    }

    .wrap-pic:hover .wrap-pic-img {
        opacity: 0.5;
    }

    .wrap-pic-waage:hover .wrap-pic-waage-img {
        opacity: 0.5;
    }

    .wrap-pic:hover .wrap-cover {
        opacity: 1;
    }

    .wrap-pic-waage:hover .wrap-cover-2 {
        opacity: 1;
    }

    .button-up-over {
        position: absolute;
        right: 2%;
        width: 80px;
        height: 80px;
        padding-top: 5%;
        opacity: 0.8;
        transition: ease-in-out;
        transition-duration: 2s;
        
    }
    #jump {
        transition: ease-in-out;
        transition-duration: 2s;
       
    }
    .button-up-one {
        width: 100%;
    }

    .button-up {
        transform: rotate(-720deg);
        transition: ease-in-out;
        transition-duration: 1.2s;
    }

    .button-jump a {
        /*background-color: #FFF;
        width: 10%;*/
        display: block;
        width: 100%;
        height: 100%;
    }

    .button-up:hover {
        /*background-color: #050505;
        border: 1px solid #fff;*/
        opacity: 0.6;
        transform: rotate(720deg);
        transition: ease-in-out;
        transition-duration: 1.2s;
    }

    .zitat-above {
        padding-top: 10%;
    }



    




}