.contApps{
    position: relative;
    margin-left: 4em;
}

.apps {
    position: relative;
    margin-left: 20%;
}

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,800);

/* My Apps View CSS*/
strong {
    font-weight: 900;
}
.canvas-wrapper {
    display: flex;


    height: 40%; /* Distance between Second Block and third block */
    font-family: Open sans, sans-serif;
}
.canvas-wrapper .canvas + .canvas {
    margin-left: 40px;
}
.canvas {
    position: relative;
    display: block;
    width: 300px;
    height: 300px;
    padding: 20px;
    color: inherit;
    text-decoration: none;
}
.canvas_border {
    position: absolute;
    top: 40px;
    left: -40px;
    height: 100%;
    width: 100%;
    z-index: 0;

}
.canvas_border svg {
    height: 90%;
    width: 90%;

}
.rect-gradient {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    animation: erase-line 1s ease-in-out forwards;

}
.canvas_img-wrapper {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    height: 90%;
    top: 0;
    left: 0;
    transform: rotate(-10deg) skew(-10deg);
    overflow: hidden;
    background: #2e2e2e;
}
.canvas_img {
    transform: scale3d(0.9, 0.9, 0.9);
    opacity: 0.3;
    max-width: 200px;
    max-height: 200px;
    border-radius: 40px;
}

.canvas_copy {
    position: absolute;
    bottom: 0;
    left: 85%;
    text-transform: uppercase;
    color: #04dc2d;
    z-index: 100;
}
.canvas_copy--left {
    left: -25%;
}
.canvas_copy_title {
    font-size: 62px;
    display: block;
    transform: translateX(-80px);
    transition: all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
    color: black;
}
.canvas_copy_title:nth-child(1) {
    transition-delay: 0.1s;
}
.canvas_copy_title:nth-child(2) {
    transition-delay: 0.2s;
}
.canvas_copy_subtitle {
    display: block;
    transform: rotate(270deg) translateY(-100%) translateX(calc(-100% - 80px));
    transform-origin: top left;
    position: absolute;
    left: 0;
    top: 8px;
    font-size: 24px;
    font-weight: 900;
    transition: all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.35s;
}
.canvas_copy_details {
    display: block;
    transition: all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.14s;
    transform: translateX(-80px);
}
.canvas_border, .canvas_img-wrapper, .canvas_img {
    transition: all 0.25s ease-in-out 0s;
}
.canvas_border, .canvas_img-wrapper {
    transform: rotate(-10deg) skew(-10deg);
}
.canvas_copy_title, .canvas_copy_subtitle, .canvas_copy_details {
    opacity: 0;
}
.canvas:hover .canvas_copy_title, .canvas:hover .canvas_copy_subtitle, .canvas:hover .canvas_copy_details, .canvas:hover .canvas_img {
    opacity: 1;
}
.canvas:hover .canvas_border, .canvas:hover .canvas_img-wrapper {
    transform: rotate(-14deg) skew(-14deg) scale(0.96);
}
.canvas:hover .canvas_img {
    transform: scale3d(1, 1, 1);
}
.canvas:hover .canvas_copy_title, .canvas:hover .canvas_copy_details {
    transform: translateX(0);
}
.canvas:hover .canvas_copy_subtitle {
    transform: rotate(270deg) translateY(-100%) translateX(-100%);
}
.canvas:hover .rect-gradient {
    animation: draw-line 3s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}
@keyframes draw-line {
    from {
        stroke-dashoffset: 2000;
    }
    to {
        stroke-dashoffset: 0;
    }
}
@keyframes erase-line {
    from {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: 2000;
    }
}
@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}