.macbookbg{
    width: 540px;
    height: 300px;
/*
    background: url(1.jpg) no-repeat;
    background-size: contain;
*/
    box-shadow: 0px 0px 1px rgba(0,0,0,0.4);
    transition: all 1s;
    transition-delay: 1s;
}
.p-art{
    box-shadow: none!important;    
    transition: all 1s;
}
.p-item{
    width: 540px;
    height: 300px;
    overflow: hidden;
    position: relative;
    font-family: monospace;
}
.item-hover{
    width: 540px;
    height: 300px;
    left: 0;
    z-index: 10;
}
.p-wrapper{
    width: 540px;
    height: 300px;
    transition: all 1s;
    transition-delay: 1s;
    overflow: hidden;
}
.p-wrapper-transform{
    margin-left: 1px;
    margin-top: 54px;
    width: 363px;
    transform: perspective(1734px) rotate3d(-500,-1256,121,-48deg);
    transition: all 1s;
    height: 200px;
    overflow: hidden;
}
.p-wrapper>img{
    width: 100%;   
    transition: all 1s;
    transition-delay: 3s;
    

}
.p-wrapper>img.go:after{
    transition-delay: 3s;
}
.p-wrapper>img.go{
/*    transform: translateY(-83.3%);*/
    transition: 10s all ease-in-out 2s!important;
    transition-delay: 5s;
}
.p-line{
    top: 60px;
    right: 14px;
    background: #28ce17;
    width: 0;
    height: 2px;
    transition: all 1s;
    transition-delay: 0.3s;
    

}
.p-item.active>.p-line{
    width: 152px;
    transition: all 1s;
    transition-delay: 0.3s;
}
.p-bg{
    z-index: 1!important;
    width: 540px;
    height: 300px;
    background: url(bg-mac.jpg) no-repeat; 
    background-size: contain;
    opacity: 0;
    transition: all .5s;
    transition-delay: 1s;

}

.p-item.active>.p-bg{
    opacity: 1;
    transition: all 2s;
}
.p-fill{
    background: white;
    z-index: 3!important;
    top: 0;
    right: 0;
    width: 150px;
    height: 62px;
    margin-right: 15px;
}
.p-name{
    left: 375px;
    margin-top: 45px;
    color: #444;
    transition: all 0.3s;
    opacity: 0;
    z-index: 2!important;
}  

.p-item.active>.p-name{
    margin-top: 65px;
    opacity: 1;
    transition: all 1s;
    transition-delay: 1s;

}
.p-type {
    left: 375px;
    margin-top: 20px;
    color: #28ce17;
    transition: all 0.3s;
    opacity: 0;
}
.p-item.active>.p-type{
    opacity: 1;
    transition: all 1s;
    transition-delay: 2s;

    
}
.p-url:hover{
    background: green; 
    transition: all 1s!important;
}
.p-item.active>.p-url{
    opacity: 1;
    transition: all 5s;
}
.p-url{
    right: 13px;
    top: 128px;
    background: #28ce17;
    padding: 10px 20px;
    font-size: 20px;
    color: white;
    z-index: 11!important;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 0;
}
.p-item>div{
    position: absolute;
    z-index: 5;
}