@import url('https://fonts.googleapis.com/css?family=Lato:300,900');

:root {
    --main-red-color:white;
    --main-blue-color: #f88537;
    --main-lightRed-color:#f88537;
    --main-caseStudyHL-color:#02e3fb;
	--main-forground-color: white;
    --main-backgroundWhite-color: white;
  }
 strong {
	 font-weight: 900;
}
 .canvas-wrapper {
	 /* display: flex; */
	 align-items: center;
	 justify-content: center;
     height: 100%;
     margin:2%;
	 margin-top: -1%;
	 margin-right: 2%;
	 margin-left: 8%;
}
 .canvas-wrapper .canvas + .canvas {
     margin-left: 5%;
     margin-bottom: 2%;
}
 .canvas {
	 position: relative;
	 display:inline-block;
	 width: 300px;
	 height: 200px;
	 padding: 20px;
	 color: inherit;
     text-decoration: none;
     margin-top: 5%;
}
 .canvas_border {
	 position: absolute;
	 top: 20px;
	 left: -20px;
	 height: 100%;
	 width: 100%;
	 z-index: 0;
}
 .canvas_border svg {
	 height: 100%;
	 width: 100%;
}
 .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: 100%;
	 height: 100%;
	 top: 0;
	 left: 0;
	 transform: rotate(-10deg) skew(-10deg);
	 overflow: hidden;
	 background: #293c50cc;
}
.canvas_header{
    z-index: 2;
    position: absolute;
    /* top: -20%; */
    font-size: x-large;
    transform: rotate(-10deg) skew(-10deg);
    /* background-color: white; */
    color: var(--main-forground-color);
    width: 200px;
    padding-bottom: 2;
}
.canvas_headerText{
    font-size: x-large;
    padding-bottom: 5%;
    font-weight: 900;
}
 .canvas_img {
	 transform: scale3d(0.9, 0.9, 0.9);
	 opacity: 0.8;
	 max-width: 100%;
     max-height: 100%;
     height: 100%;
     width: 100%;
}
 .canvas_copy {
	 position: absolute;
	 bottom: 0;
	 left: 85%;
	 text-transform: uppercase;
     /* color: #dac527; */
     
	 z-index: 2;
}
 .canvas_copy--left {
	 left: -10%;
}
 .canvas_copy_title {
	 font-size: large;
	 display: block;
	 transform: translateX(-80px);
	 transition: all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s;
	 /* will-change: all; */
	 color: var(--main-forground-color);
}
 .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: smaller;
	 font-weight: 900;
	 /* will-change: scroll-position; */
     transition: all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.35s;
     color:var(--main-blue-color);
}
.fontcolor{
	color:var(--main-blue-color);
}
 .canvas_copy_details {
	 display: block;
	 transition: all 0.75s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.14s;
     transform: translateX(-80px);
     font-size: smaller;
     font-weight: 900;
     color:var(--main-red-color);
}
 .canvas_border, .canvas_img-wrapper, .canvas_img ,.canvas_headerText {
	 
	 transition: transform 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;
	}
}