.development-portfolio .projects-grid{padding:0;margin:0;list-style-type:none;display:grid;grid-gap:20px;box-sizing:border-box;margin-top:10vw;max-width:100%;width:100%}@media(min-width: 400px){.development-portfolio .projects-grid{grid-template-columns:repeat(auto-fit, minmax(400px, 1fr))}}.development-portfolio .portfolio-hero{display:flex;width:100%;overflow:hidden}.development-portfolio .portfolio-hero .hero-project{flex:0 0 100%;width:100%}.development-portfolio .hero-project{display:flex;margin-right:5vw}.development-portfolio .hero-project .image{flex:0 1 50%;padding:0 0 30%;position:relative;height:0;margin-right:2vw;display:block}.development-portfolio .hero-project .image img{display:block;width:100%;height:100%;position:absolute;top:0;left:0;object-fit:cover;object-position:top}.development-portfolio .hero-project .body{flex:1 0 40%;padding:2lh 5vw;box-sizing:border-box;background:#fff}.development-portfolio .project{box-sizing:border-box;list-style-type:none;width:100%;position:relative}.development-portfolio .project .project-link{color:inherit;text-decoration:none;outline:none}.development-portfolio .project .project-link:hover,.development-portfolio .project .project-link:focus{outline:none}.development-portfolio .project .project-link:hover .project-title,.development-portfolio .project .project-link:focus .project-title{transform:translateY(-110%)}.development-portfolio .project .project-link:hover .thumbnail,.development-portfolio .project .project-link:focus .thumbnail{border-radius:0;border-width:3px}.development-portfolio .project .thumbnail{display:block;border-radius:100%;transition:border-radius .2s .1s;overflow:hidden;border:1px solid #000}.development-portfolio .project .thumbnail,.development-portfolio .project .thumbnail img{display:block;width:100%;max-width:100%;height:auto}.development-portfolio .project .project-title{font-size:1.4rem;position:absolute;top:0;left:0;z-index:2;opacity:1;padding:.3lh 1em;transition:transform .3s;transform:translateY(0)}.development-portfolio-item{display:grid;grid-gap:1lh 1em;padding:1lh 1em;grid-template-areas:"bread" "title" "images" "url" "role" "published" "intro" "body"}@media all and (min-width: 600px){.development-portfolio-item{grid-template-columns:repeat(12, 1fr);align-items:center;grid-template-areas:"bread bread bread bread bread bread bread bread bread bread bread bread" "title title title title title title title title title title title title" "url url url url role role role role published published published published" "images images images images images images images images images images images images" "intro intro intro intro intro intro intro intro intro intro intro intro" "body body body body body body body body body body body body"}}@media all and (min-width: 900px){.development-portfolio-item{grid-template-areas:"bread bread bread bread bread bread bread bread bread bread bread bread" "title title title title title title title title title title title title" "url url url url role role role role published published published published" "intro intro intro intro images images images images images images images images" "body body body body body body body body body body body body"}}.development-portfolio-item .breadcrumbs{grid-area:bread}.development-portfolio-item .page-title{grid-area:title;margin:0;font-size:2em}@media all and (min-width: 600px){.development-portfolio-item .page-title{font-size:3em}}.development-portfolio-item .page-title .title-box{background:#fff;padding:0 1em;position:relative;z-index:2;box-sizing:border-box;width:100%}.development-portfolio-item .url{grid-area:url;margin:0;text-align:left}.development-portfolio-item .url-link{color:inherit}.development-portfolio-item .role{text-align:left;grid-area:role;margin:0;align-self:flex-start}@media all and (min-width: 600px){.development-portfolio-item .role{text-align:center}}.development-portfolio-item .published{grid-area:published;margin:0;text-align:left}@media all and (min-width: 600px){.development-portfolio-item .published{text-align:right}}.development-portfolio-item .introduction{grid-area:intro;animation-delay:.5s;position:relative;z-index:2;width:100%;max-width:70em}@media all and (min-width: 900px){.development-portfolio-item .introduction{max-width:auto;max-width:45em;margin-left:auto}}.development-portfolio-item .introduction .box-pad{padding-top:1lh;padding-bottom:2lh}.development-portfolio-item .body{grid-area:body;animation-delay:1.5s;position:relative;top:-3lh;max-width:70em;z-index:2}@media all and (min-width: 600px){.development-portfolio-item .body{top:-1.5lh}}@media all and (min-width: 900px){.development-portfolio-item .body{top:0;margin:0 0 0 auto}}.development-portfolio-item .body>.box{border-top:none}@media all and (min-width: 900px){.development-portfolio-item .body>.box{border-top:1px solid #000}}.development-portfolio-item .body h2{font-size:1.4em}.development-portfolio-item .body h3{font-size:1.2em}.images{position:relative;width:100%;grid-area:images}.images:hover{z-index:3}.images::after{content:"";height:0;padding-bottom:62.5%;display:inline-block}.images .images-scale{transform-origin:top right;overflow:hidden;position:absolute;top:0;left:0;width:100%;height:100%}@media all and (min-width: 900px){.images .images-scale{transform:scale(1.1)}}.images .portfolio-picture{display:none;position:absolute;top:0;right:100%;height:100%;width:100%;transition:right .5s}.images .portfolio-picture img{display:block;width:100%;height:auto;border:1px solid #000}.images .portfolio-picture.active{display:block;top:0;right:0;z-index:1}.images .portfolio-picture.transition-in{display:block;right:-100%;z-index:2}.images .portfolio-picture.transition-out{display:block;z-index:0}.label{font-weight:bold}#product-info-before-after{margin:2lh 0 0}#product-info-before-after .boxes{display:flex;width:100%;max-width:100%}#product-info-before-after .boxes .box{flex:1 0 300px;overflow:auto}#product-info-before-after.code .visual{display:none}#product-info-before-after.visual .code{display:none}#product-info-before-after .controls{flex:0 0 100%;display:flex;justify-content:flex-start;margin:0 0 .5lh}#product-info-before-after .before,#product-info-before-after .after{display:block;flex:1 0 350px;font-size:14px}#product-info-before-after .before{margin-right:2em}#product-info-before-after .code,#product-info-before-after .visual{overflow:auto;max-height:20em}#product-info-before-after .code{padding:1lh 1em;background:#ddd;border-color:#aaa;border-style:solid;overflow:auto;border-width:1px 1px 1px 1em;overflow-x:auto;max-width:100%;box-sizing:border-box;width:100%;display:flex;flex:1 0 200px;min-width:0}#product-info-before-after table{width:100%;text-align:left}#product-info-before-after .indent-1{padding-left:20px}#product-info-before-after .indent-2{padding-left:40px}#product-info-before-after .indent-3{padding-left:60px}