@keyframes clip1 {
    0% {
        clip-path: polygon(0% -50%, 50% -50%, -50% 50%, -100% 50% );
    }

    100% {
        clip-path: polygon(150% 50%, 200% 50%, 100% 150%, 50% 150%);
    }
}

@keyframes clipa {
    0% {
        clip-path: polygon(-5% -55%, 55% -45%, -45% 55%, -95% 55% );
    }

    100% {
        clip-path: polygon(150% 50%, 200% 50%, 100% 150%, 50% 150%);
    }
}

@keyframes clip2 {
    0% {
        clip-path: polygon(50% -50%, 100% -50%, 200% 50%, 150% 50%);
    }

    100% {
        clip-path: polygon(-100% 50%, -50% 50%, 50% 150%, 0% 150%);
    }
}

@keyframes clipb {
    0% {
        clip-path: polygon(40% -60%, 100% -50%, 190% 40%, 150% 50%);
    }

    100% {
        clip-path: polygon(-100% 50%, -50% 50%, 50% 150%, 0% 150%);
    }
}

@keyframes clip3 {
    0% {
        clip-path: polygon(-100% -150%, -50% -150%, -150% -50%, -200% -50%);
    }

    100% {
        clip-path: polygon(150% 50%, 200% 50%, 100% 150%, 50% 150%);
    }
}

@keyframes clip4 {
    0% {
        clip-path: polygon(150% -150%, 200% -150%, 300% -50%, 250% -50%);
    }

    100% {
        clip-path: polygon(-100% 50%, -50% 50%, 50% 150%, 0% 150%);
    }
}
.divmargin {
    height: 140px;
    margin-top: -60px;
}
/*.clip {
    filter: scale(1);
    position:absolute;
    width: 25%;
    height: 50%;*/
   /* background: url("/assets/images/client/my-construction.jpg") no-repeat center;*/
    /*transform-origin: center;
}*/

#clip1 {
    animation: clip1 4s linear infinite;
}

#clipa {
    transform: scale(1.1,1.1);
    animation: clipa 9s linear infinite;
}

#clip2 {
    transform: scale(1.12,1.12);
    animation: clip2 5s linear infinite;
}

#clipb {
    transform: scale(1.14,1.14);
    animation: clipb 4s linear infinite;
}

#clip3 {
    transform: scale(1.15,1.15);
    animation: clip3 7s linear infinite;
}

#clip4 {
    transform: scale(1.13,1.13);
    animation: clip4 6s linear infinite;
}









.containers {
    position: relative;
    width: 320px;
    height: 540px;
    background: rgba(0,0,0,0);
    transform: rotate(-30deg) skew(25deg) scale(.8);
    transition: 0.5s;
    writing-mode: rl-tb;
    margin-top:50px;
    margin-left:85px;
}

    .containers img {
        position: absolute;
        width: 100%;
        transition: 0.5s;
    }

    .containers:hover img:nth-child(4) {
        transform: translate(160px,-160px);
        opacity: 1;
    }

    .containers:hover img:nth-child(3) {
        transform: translate(120px,-120px);
        opacity: .8;
    }

    .containers:hover img:nth-child(2) {
        transform: translate(80px,-80px);
        opacity: .6;
    }
    .containers:hover img:nth-child(1) {
        transform: translate(40px,-40px);
        opacity: .4;
    }

.imgcontainers {
    position: relative;
    width: 320px;
    height: 540px;
    background: rgba(0,0,0,0);
    transform: rotate(-30deg) skew(25deg) scale(.8);
    transition: 0.5s;
    writing-mode: rl-tb;
}
.alignself {
    text-align: right;
    margin-top: 170px;
}
.imgcontainers img {
    position: absolute;
    width: 100%;
    transition: 0.5s;
}
.imgcontainers img:nth-child(4) {
    transform: translate(160px,-160px);
    opacity: 1;
}
/*
*//*.imgcontainers:hover img:nth-child(3) {
    transform: translate(120px,-120px);
    opacity: .8;
}*/

    .imgcontainers img:nth-child(2) {
        transform: translate(130px,-95px);
        opacity: .7;
    }

.servicecontainer {
    padding-top: 80px;
    height: 710px;
}
.aboutcontainer {
    height: 805px;
}

.margintop0px {
  margin-top:0px !important;
}
@media only screen and (max-width: 480px) {
    .containers {
        width: 175px !important;
        height: 258px !important;
        margin-bottom: -70px;
    }

    .imgcontainers {
        width: 165px !important;
        height: 325px !important;
        margin-top: 40px;
    }
    .aboutcontainer {
        height: 950px;
    }
    .alignself {
        text-align: end;
        margin-top: 95px;
    }
    .servicecontainer {
        padding-top: 80px;
        height: 950px;
    }
    .fleximage {
        padding-top: 80px !important;
        height: 1120px !important;
    }
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    .containers {
        width: 200px !important;
        height: 360px !important;
        margin-top: 100px !important;
        margin-left: 135px !important;
    }

    .imgcontainers {
        width: 175px !important;
        height: 360px !important;
    }

    .slick-track {
        left: -20px !important;
    }

    .marginleft {
        margin-left: 15px;
    }
}