@charset "UTF-8";
/* works */

.nav-works {
padding-left: 15px;
}
.worksimg-close {
    width: 135px;
    height: 180px;
}

.worksimg {
    width: 135px;
    height: 180px;
    margin-left: 30px;
}

.worksa {
    padding: 0% !important;
}

.wortainer {
    display: block;
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    margin-left: 75px;
}

.worksa span {
    position: absolute;
    width: 90px;
    height: 180px;
    display: block;
    opacity: 1;
    box-sizing: border-box;
    -moz-box-sizing: border-box;

    text-align: center;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 0.3s linear, background 0.3s linear;
    transition: transform 0.3s linear, background 0.3s linear;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 0 0;
}

.worksa:hover span:first-of-type {
    
    margin-left: 70px;
    }
    
    .worksa span:nth-last-of-type(2) {
        -webkit-transform: rotateY(90deg) translateZ(-120px);
        transform: rotateY(90deg) translateX(-120px);
        background: #C8ACA7;
    }
    
    .worksa:hover span:nth-of-type(2) {
        background: #fff7f5;
        color: #582d1d;
    }
    
    .worksa:hover:hover .wortainer {
        -webkit-transform: rotateY(-90deg);
        transform: rotateY(-90deg);
    }

    /* web */
.webimg-close {
    width: 135px;
    height: 180px;
}

.webimg {
    width: 135px;
    height: 180px;
    margin-left: 10px;
}

.weba {
    padding: 0% !important;
}

.webtainer {
    display: block;
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    
}

.weba span {
    position: absolute;
    width: 90px;
    height: 180px;
    display: block;
    opacity: 1;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    text-align: center;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 0.3s linear, background 0.3s linear;
    transition: transform 0.3s linear, background 0.3s linear;
    -webkit-transform-origin: 100% 100%;
    transform-origin: 0 0;
}

.weba:hover span:first-of-type {
    margin-left: 50px;
    }
    
    .weba span:nth-last-of-type(2) {
        -webkit-transform: rotateY(90deg) translateZ(-120px);
        transform: rotateY(90deg) translateX(-120px);
        background: #C8ACA7;
    }
    
    .weba:hover span:nth-of-type(2) {
        background: #fff7f5;
        color: #582d1d;
    }
    
    .weba:hover:hover .webtainer {
        -webkit-transform: rotateY(-90deg);
        transform: rotateY(-90deg);
    }