header{width:var(--container-width);padding:0 calc((100% - var(--container-width)) / 2);margin-top:2.8rem;background-color:var(--color-light);display:grid;grid-template-columns:calc(var(--column-width) * 6 + var(--container-gap) * 5);column-gap:var(--container-gap);justify-items:center;position:relative}header::after{content:"";position:absolute;bottom:-10px;left:0;width:100%;height:14px;border-radius:50%;opacity:0.1;box-shadow:2px 2px 20px var(--color-dark);z-index:-1}.header__icon{width:calc(var(--column-width) * 2 + var(--container-gap));display:flex;justify-content:center}.header__icon svg{max-height:100px}.header__icon .svg--bw{opacity:0}.header__content{width:calc(var(--column-width) * 6 + var(--container-gap) * 5);text-align:center}.header__content h1{margin:2.25rem 0 1rem;font-size:2.25rem}.header__content h2{width:calc(var(--column-width) * 6 + var(--container-gap) * 5);margin:0 0 2.5rem;font-family:var(--font-corpus);font-size:1.125rem;font-weight:var(--font-light);line-height:1.5}.header__tags{width:calc(var(--column-width) * 5 + var(--container-gap) * 4);margin:0 0 2.5rem;text-align:center}.header__tags>div{display:flex;flex-wrap:wrap;justify-content:center}.header__tags p{padding:.2rem .5rem;margin:0 .5rem .5rem 0;font-size:.625rem;text-transform:uppercase;font-weight:var(--font-bold);color:var(--color-main);border:1px solid var(--color-main);border-radius:4px}.header__tags h5,.header__extra h5{display:inline-block}.header__extra{text-align:center}.header__extra p{margin:0 0 2.5rem;font-weight:var(--font-light)}.header__social{display:flex;justify-content:center;margin-bottom:3.4rem}.header__social a{margin-right:1rem}.header__social a:last-child{position:relative;margin-right:0}.header__social a:last-child::before{content:"";position:absolute;left:0.7rem;top:3.5rem;width:0;height:0;border-right:0.4rem solid transparent;border-left:0.4rem solid transparent;border-bottom:0.4rem solid var(--color-dark);opacity:0;transition:opacity 0.6s;pointer-events:none}.header__social a:last-child::after{content:"Link copied to clipboard!";position:absolute;left:-4rem;top:3.8rem;width:158px;padding:0.2rem 0.5rem;border-radius:0.2rem;background-color:var(--color-dark);font-size:0.875rem;font-weight:var(--font-medium);color:var(--color-light);opacity:0;transition:opacity 0.6s;pointer-events:none}.header__social a.btn--clicked:last-child::before,.header__social a.btn--clicked:last-child::after{transition:opacity 0.15s;opacity:1}.header__social svg{max-width:100%;height:35px}.header__social .twitter .svg--filled-light{fill:var(--color-main)}.header__social .twitter .svg--filled-dark{fill:var(--color-light)}@media (min-width: 576px){header{margin-top:6.8rem}.header__content{width:calc(var(--column-width) * 4 + var(--container-gap) * 3)}.header__content h1{margin:2.5rem 0 1rem;font-size:2.5rem}.header__content h2{width:calc(var(--column-width) * 4 + var(--container-gap) * 3);font-size:1.25rem;line-height:1.6}.header__tags{width:calc(var(--column-width) * 3 + var(--container-gap) * 2)}.header__social{margin-bottom:8rem}}@media (min-width: 768px){header{padding:2rem calc((100% - var(--container-width)) / 2) 0;grid-template-columns:calc(var(--column-width) * 2 + var(--container-gap) * 1) calc(var(--column-width) * 4 + var(--container-gap) * 3);justify-items:start;align-items:flex-start}.header__icon{justify-content:flex-start}.header__content{text-align:left}.header__content h1{margin:0 0 1rem}.header__content h2{width:calc(var(--column-width) * 4 + var(--container-gap) * 2)}.header__tags{text-align:left;width:auto}.header__tags>div{justify-content:flex-start}.header__extra{text-align:left}.header__social{justify-content:normal;margin-bottom:4rem}.header__social a:last-child::before{left:calc(100% + 0.5rem);top:0.7rem;border-right:0.4rem solid var(--color-dark);border-left:none;border-top:0.4rem solid transparent;border-bottom:0.4rem solid transparent}.header__social a:last-child::after{left:calc(100% + 0.8rem);top:0.2rem}}@media (min-width: 992px){header{grid-template-columns:calc(var(--column-width) * 4 + var(--container-gap) * 3) calc(var(--column-width) * 8 + var(--container-gap) * 7)}.header__icon{width:calc(var(--column-width) * 3 + var(--container-gap) * 2);padding-left:calc(var(--column-width) + var(--container-gap))}.header__icon svg{max-height:130px}.header__content{width:calc(var(--column-width) * 8 + var(--container-gap) * 7)}.header__content h1{font-size:3rem}.header__content h2{width:calc(var(--column-width) * 5 + var(--container-gap) * 5);font-size:1.375rem}.header__tags{padding-left:calc(var(--column-width) + var(--container-gap))}}main{width:var(--container-width);margin:3rem auto 1rem;display:flex;flex-direction:column-reverse}.related__content{margin-top:2.5rem}.related__content h5{margin-bottom:1rem}.related__content .tip{text-decoration:underline}.tip svg{margin-left:0.2rem;height:0.75rem}.related__tool,.related__tutorial{width:210px;padding:1.125rem;margin:1.5rem 0 2.5rem;display:flex;align-items:center}.related__tutorial{width:234px;padding:.375rem}.related__tool svg{max-width:60px;height:46px;margin-left:0.75rem}.related__tool p,.related__tutorial p{font-size:0.8rem;font-weight:var(--font-medium);text-transform:uppercase}.related__tool p{width:50%;margin-left:1.4rem}.related__tutorial p{padding:.875rem;border:2px solid var(--color-main)}.main__content{width:calc(var(--column-width) * 6 + var(--container-gap) * 5)}.main__content p{font-size:1.125rem;font-weight:var(--font-light);line-height:1.6}.additional__content{margin:2.5rem 0}.additional__content div{padding:0 1.5rem;border-left:0.5px solid var(--color-line-light)}.additional__content div:first-child{padding:0 1.5rem 2rem}.additional__content p{width:95%;font-size:1rem;font-weight:var(--font-light);line-height:1.5}.main__content img{width:100%;border:0.5px solid var(--color-line-light)}.download__links{margin:2rem 0 3.75rem;text-align:center;display:flex;flex-direction:column;align-items:center}.download__links svg{fill-rule:evenodd;width:1rem;position:relative;top:2px;right:4px}.download__links .outside--link{margin-top:1.25rem}.guidelines{margin-bottom:3.75rem}.guideline__step{margin-bottom:2.5rem}.guidelines .guideline__index{margin-right:var(--container-gap);margin-bottom:.625rem;font-size:2rem;line-height:1.2;color:var(--color-main)}.guidelines .guideline__text>p{width:calc(var(--column-width) * 6 + var(--container-gap) * 5);font-size:1rem}.guideline__attention{background-color:rgba(0,210,230,0.1);display:flex;align-items:flex-start;padding:1rem;margin-top:1.4rem}.guideline__attention svg{width:22px;margin:.3rem 1rem 0 0}.guidelines .guideline__attention p{font-size:.875rem;width:80%}.references{padding-top:1rem}.references p{font-size:1rem;margin-bottom:1rem;line-height:1.5}.references a{text-decoration:underline;display:block;margin-bottom:1rem;line-height:1.5}@media (min-width: 576px){.additional__content p{width:60%}.guideline__step{display:flex}.guidelines .guideline__index{margin-bottom:0}.guidelines .guideline__text>p{width:calc(var(--column-width) * 5 + var(--container-gap) * 4);font-size:1.2rem}.guidelines .guideline__attention p{font-size:1rem;width:98%}}@media (min-width: 768px){main{flex-direction:row;justify-content:space-between;margin:3rem auto 5rem}.guidelines .guideline__text>p{width:calc(var(--column-width) * 3 + var(--container-gap) * 3)}.related__content{margin-top:0}.related__tool{width:calc(var(--column-width) * 2 + var(--container-gap) * 1 - 1.125rem * 2)}.related__tutorial{width:calc(var(--column-width) * 2 + var(--container-gap) * 1 - .375rem * 2)}.main__content{width:calc(var(--column-width) * 4 + var(--container-gap) * 3)}}@media (min-width: 992px){.related__tool{width:210px}.related__tutorial{width:234px}.main__content{width:calc(var(--column-width) * 8 + var(--container-gap) * 7)}.main__content p{width:98%;font-size:1.25rem}.guidelines .guideline__index{width:var(--column-width)}.guidelines .guideline__text>p{width:calc(var(--column-width) * 6 + var(--container-gap) * 5)}.guidelines .guideline__attention p{width:calc(var(--column-width) * 4 + var(--container-gap) * 5)}.references p{font-size:1rem}.additional__content{padding:1.6rem 0;display:flex;border-top:0.5px solid var(--color-line-light);border-bottom:0.5px solid var(--color-line-light)}.additional__content div{width:calc(50% - 1.875rem / 2);padding:0 1.875rem;border-left:none}.additional__content div:first-child{padding:0 1.875rem;border-right:0.5px solid var(--color-line-light)}.additional__content p{font-size:1rem}}@media (min-width: 1200px){.main__content p{width:84%}}@media (hover: hover) and (pointer: fine){.related__tool svg .svg--filled-main{opacity:0;transition:opacity 0.5s}.related__tool:hover svg .svg--filled-main{opacity:1}.related__tool svg .svg--bw{opacity:1;transition:opacity 0.5s}.related__tool:hover svg .svg--bw{opacity:0}}body.modal--open{overflow:hidden}.case-studies__container{width:var(--container-width);padding:3rem calc((100% - var(--container-width)) / 2) 0;background-color:var(--color-background-light)}.case-studies__container h4{font-family:var(--font-corpus);font-weight:var(--font-medium)}.case-studies__container h3{color:var(--color-dark)}.case-studies__container h5{margin-top:2rem;padding-left:0;border-left:none}.case-study{display:flex;flex-wrap:wrap;justify-content:flex-end;padding:2rem 0 3.75rem}.case-study:not(:last-of-type){border-bottom:1px solid var(--color-line-light)}.case-study__left-column{width:calc(var(--column-width) * 6 + var(--container-gap) * 5);margin-right:auto}.case-study__image{position:relative;cursor:pointer}.images__details{position:absolute;top:0.5rem;right:1rem;color:var(--color-light);font-weight:var(--font-medium)}.images__details svg{height:1.3rem;position:relative;top:0.3rem}.case-study__image img{width:100%;margin-bottom:1rem}.case-study__content{width:calc(var(--column-width) * 6 + var(--container-gap) * 5);overflow:hidden}.case--reduced .case-study__content{height:80px}.case-study__content p,.case-study__left-column p{font-weight:var(--font-light);line-height:1.5}.case-study__subtitle{margin-top:.4rem;font-size:1.2rem}.case-study__description{overflow:hidden}.case--reduced .case-study__description{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.case--reduced .case-study__description>*:not(:first-child){display:none}.case--reduced .case-study__description ~ *{opacity:0}.case-study__content ul{font-weight:var(--font-light);line-height:1.5;list-style-type:circle;margin:1.5rem 0;padding-left:2rem}.case-study__content .outside--link{display:inline-block;margin:2rem 0}.case-study__content :last-child:not(a){margin-bottom:2rem}.btn--view-more{position:relative;margin-right:1.25rem;cursor:pointer}.btn--view-more::after{content:"-";position:absolute;right:-1.25rem;bottom:-4px;font-size:1.4rem;font-weight:var(--font-medium);color:var(--color-main)}.case--reduced .btn--view-more::after{content:"+"}.tool__modal{position:fixed;top:0;left:0;width:100%;height:100vh;display:grid;grid-template-columns:1fr var(--column-width) calc(var(--column-width) * 4 + var(--container-gap) * 5) var(--column-width) 1fr;grid-template-rows:1fr 10vh 60vh 4vh 3fr;z-index:99;background-color:rgba(38,45,50,0.9)}.tool__modal h4{grid-column:2 / span 2;grid-row:2 / span 1;font-family:var(--font-corpus);font-weight:var(--font-medium);color:var(--color-light);margin:1rem 0 0}.modal__image{grid-column:2 / span 3;grid-row:3 / span 1;display:none}.modal__image.shown{display:flex;justify-content:center;align-items:center}.modal__image img{max-width:100%;max-height:100%}.modal__close{grid-column:-3 / span 1;grid-row:2 / span 1;display:flex;justify-content:flex-end}.btn--close{position:relative;bottom:1.2rem;left:-1.2rem;font-size:2.9rem;font-weight:var(--font-light);color:var(--color-light);cursor:pointer;transform:rotate(45deg)}.prev,.next{display:flex;align-items:center}.prev{justify-content:start;grid-column:3 / span 1;grid-row:4 / span 1}.next{justify-content:end;grid-column:-4 / span 1;grid-row:4 / span 1}.prev span,.next span{font-size:3.8rem;font-weight:var(--font-light);color:var(--color-light);cursor:pointer}@media (min-width: 576px){.case--reduced .case-study__content{height:85px}}@media (min-width: 768px){.case-studies__container h4{margin:0}.case-study__left-column{width:calc(var(--column-width) * 2 + var(--container-gap) * 2)}.case-study__image img{width:90%}.case-study__content{width:calc(var(--column-width) * 4 + var(--container-gap) * 3)}.case--reduced .case-study__content{height:275px}.images__details{right:calc(10% + 1rem)}.case-study__left-column>p{width:90%}}@media (min-width: 992px){.case-study__left-column{width:calc(var(--column-width) * 4 + var(--container-gap) * 3)}.case-study__content{width:calc(var(--column-width) * 7.5 + var(--container-gap) * 7)}.case--reduced .case-study__content{height:283px}.tool__modal{grid-template-columns:1fr calc(var(--column-width) + var(--container-gap)) calc(var(--column-width) * 10 + var(--container-gap) * 9) calc(var(--column-width) + var(--container-gap)) 1fr;grid-template-rows:1fr 10vh 76vh 4vh 1fr}.modal__image{grid-column:3 / span 1}.prev{grid-column:2 / span 1;grid-row:3 / span 1}.next{grid-column:-3 / span 1;grid-row:3 / span 1}}@media (min-width: 1200px){.btn--close{left:1rem}}.contribute{width:var(--container-width);padding:6rem calc((100% - var(--container-width)) / 2);background-color:var(--color-support);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.contribute svg{height:194px;margin-bottom:2.875rem}.contribute svg .svg--outline{stroke-width:1px}.contribute__column{text-align:center;color:var(--color-light)}.contribute__column h3{color:var(--color-light)}.contribute__column p{line-height:1.6;margin-bottom:2.7rem}.contribute__column .btn--action{background-color:var(--color-light);color:var(--color-support)}@media (min-width: 576px){.contribute svg{height:246px}.contribute__column p{padding:0 3rem}}@media (min-width: 768px){.contribute{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.contribute svg{height:221px;margin-right:3.75rem;margin-bottom:0}.contribute__column{width:47%;text-align:left}.contribute__column h2{font-size:1.75rem;padding:0}.contribute__column p{padding:0}}@media (min-width: 992px){.contribute svg{height:285px;margin-right:calc(var(--column-width) * 1 + var(--container-gap) * 1)}.contribute__column{width:46%}.contribute__column h2{font-size:2.25rem;padding:0}}@media (min-width: 1200px){.contribute svg{margin-right:calc(var(--column-width) * 2 + var(--container-gap) * 2)}.contribute__column{width:38%}}

/*# sourceMappingURL=tool.css.map */