/* Project Description
-------------------------------------------------------*/
.project__title { font-size: 1.5rem; }

.project__category { text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.8125rem; }

.project__description-wrap { position: absolute; opacity: 0; bottom: 40px; right: 40px; display: inline-block; width: 78%; max-width: 260px; -webkit-clip-path: inset(0 0 0 100%); clip-path: inset(0 0 0 100%); -webkit-transition: opacity 0.2s 0.3s, clip-path 0s 0.3s; -moz-transition: opacity 0.2s 0.3s, clip-path 0s 0.3s; -ms-transition: opacity 0.2s 0.3s, clip-path 0s 0.3s; -o-transition: opacity 0.2s 0.3s, clip-path 0s 0.3s; transition: opacity 0.2s 0.3s, clip-path 0s 0.3s; }

.project__description { position: relative; padding: 20px 26px; }

.project__description:after { content: ""; position: absolute; display: block; width: 100%; height: 100%; top: 0; right: 0; background-color: #fff; -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -ms-transform: scaleX(0); -o-transform: scaleX(0); transform: scaleX(0); -webkit-transition: transform 0.35s cubic-bezier(0.07, 0.98, 0, 0.96); -moz-transition: transform 0.35s cubic-bezier(0.07, 0.98, 0, 0.96); -ms-transition: transform 0.35s cubic-bezier(0.07, 0.98, 0, 0.96); -o-transition: transform 0.35s cubic-bezier(0.07, 0.98, 0, 0.96); transition: transform 0.35s cubic-bezier(0.07, 0.98, 0, 0.96); }

.project__description .project__title { margin-bottom: 0; }

.project__description .project__title, .project__description .project__categories { opacity: 0; z-index: 2; position: relative; -webkit-transition: opacity 0.2s cubic-bezier(0.07, 0.98, 0, 0.96); -moz-transition: opacity 0.2s cubic-bezier(0.07, 0.98, 0, 0.96); -ms-transition: opacity 0.2s cubic-bezier(0.07, 0.98, 0, 0.96); -o-transition: opacity 0.2s cubic-bezier(0.07, 0.98, 0, 0.96); transition: opacity 0.2s cubic-bezier(0.07, 0.98, 0, 0.96); }

.project:hover .project__description-wrap { opacity: 1; -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); -webkit-transition: -webkit-clip-path 0.8s cubic-bezier(0.07, 0.98, 0, 0.96); transition: clip-path 0.8s cubic-bezier(0.07, 0.98, 0, 0.96); }

.project:hover .project__description:after { -webkit-transform-origin: 0% 50%; -moz-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); -webkit-transition: transform 0.7s cubic-bezier(0.07, 0.98, 0, 0.96); -moz-transition: transform 0.7s cubic-bezier(0.07, 0.98, 0, 0.96); -ms-transition: transform 0.7s cubic-bezier(0.07, 0.98, 0, 0.96); -o-transition: transform 0.7s cubic-bezier(0.07, 0.98, 0, 0.96); transition: transform 0.7s cubic-bezier(0.07, 0.98, 0, 0.96); }

.project:hover .project__title, .project:hover .project__categories { opacity: 1; }