@import url("https://fonts.googleapis.com/css?family=Nunito:400,700|Playfair+Display:700&display=swap");

/*--------Contact--------*/

.container {
  margin: auto;
  padding-top: 40px;
  padding-bottom: 20px;
}

h2{
    font-family: 'Playfair Display', serif;
    font-size: 40px;
    font-weight: 600;
    color: black;

}

.bottom{
    margin-bottom: 30px;
}
.field {
  width: 100%;
  text-align: left;
  margin-top: 15px; }

input[type=text], input[type=email]  {
  display: inline-block;
  width: 100%;
  padding: 5px;
  height: 40px;
  font-size: 16px;
  border-top: none;
  border-right: none;
  border-left: none;
  border-bottom: 1px #303030 solid;
  color: black; 
  margin-bottom: 4%;
  margin-top: 1%;
}
input::placeholder, textarea::placeholder {
  opacity: 0.5;
}

label {
  float:left;
  color: black;
  font-size: 20px;
  font-weight: 500;
}

textarea {
  display: inline-block;
  width: 100%;
  padding: 5px;
  font-size: 16px;
  background: black;
  border-top: none;
  border-right: none;
  border-left: none;
  border-bottom: 1px #303030 solid;
  color: black; 
  margin-top: 1%;
  font-family: "Roboto", sans-serif;
}

#message{
    color: black;
}

#btn-form {
  padding: 10px;
  background: none;
  border: 1px #303030 solid;
  cursor: pointer;
  font-size: 16px;
  float: right; 
  transition: all 0.1S;
  color: black;
}

#btn-form:hover {
color:white;
background-color: #303030;
}

form {
  width:100%  ;
}

/*--------Portfolio--------*/

*,
::after,
::before {
    box-sizing: inherit;
    background-repeat: no-repeat;
}

::after,
::before {
    text-decoration: inherit;
    vertical-align: inherit;
}

html {
    box-sizing: border-box;
    cursor: default;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

article,
aside,
footer,
header,
nav,
section {
    display: block;
}

body {
    margin: 0;
}

figcaption,
figure,
main {
    display: block;
}

figure {
    margin: 1em 40px;
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}

nav ol,
nav ul {
    list-style: none;
}

pre {
    font-family: monospace,monospace;
    font-size: 1em;
}

a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted;
    -webkit-text-decoration: underline dotted;
}

b,
strong {
    font-weight: inherit;
}

b,
strong {
    font-weight: bolder;
}

code,
kbd,
samp {
    font-family: monospace,monospace;
    font-size: 1em;
}

dfn {
    font-style: italic;
}

mark {
    color: #000;
    background-color: #ff0;
}

small {
    font-size: 80%;
}

sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}

sub {
    bottom: -.25em;
}

sup {
    top: -.5em;
}

::-moz-selection {
    text-shadow: none;
    color: #000;
    background-color: #b3d4fc;
}

::selection {
    text-shadow: none;
    color: #000;
    background-color: #b3d4fc;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

audio,
video {
    display: inline-block;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

img {
    border-style: none;
}

svg {
    fill: currentColor;
}

svg:not(:root) {
    overflow: hidden;
}

table {
    border-collapse: collapse;
}

button,
input,
optgroup,
select,
textarea {
    margin: 0;
}

button,
input,
select,
textarea {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    background-color: transparent;
}

button,
input {
    overflow: visible;
}

button,
select {
    text-transform: none;
}

[type=reset],
[type=submit],
button,
html [type=button] {
    -webkit-appearance: button;
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
    padding: 0;
    border-style: none;
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
    outline: 1px dotted ButtonText;
}

legend {
    display: table;
    box-sizing: border-box;
    padding: 0;
    max-width: 100%;
    white-space: normal;
    color: inherit;
}

progress {
    display: inline-block;
    vertical-align: baseline;
}

textarea {
    overflow: auto;
    resize: vertical;
}

[type=checkbox],
[type=radio] {
    box-sizing: border-box;
    padding: 0;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto;
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
    -webkit-appearance: none;
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}

details,
menu {
    display: block;
}

summary {
    display: list-item;
}

canvas {
    display: inline-block;
}

template {
    display: none;
}

[tabindex],
a,
area,
button,
input,
label,
select,
summary,
textarea {
    touch-action: manipulation;
}

[hidden] {
    display: none;
}

[aria-busy=true] {
    cursor: progress;
}

[aria-controls] {
    cursor: pointer;
}

[aria-hidden=false][hidden]:not(:focus) {
    display: inherit;
    position: absolute;
    clip: rect(0,0,0,0);
}

[aria-disabled] {
    cursor: default;
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
ul,
ol,
blockquote,
pre,
code {
    margin-top: 0;
    margin-bottom: 0;
}

ul,
ol {
    margin-left: 0;
    padding-left: 0;
}

blockquote {
    margin: 0;
    padding: 0;
}

button {
    padding: 0;
    border: 0;
    border-radius: 0;
    text-align: left;
    background-color: transparent;
}

button[type="button"] {
    -webkit-appearance: none;
}

form {
    margin: 0;
}

iframe {
    border: 0;
}

svg {
    max-height: 11000px;
}

@-webkit-keyframes hvr-icon-pop {
    50% {
        transform: scale(1.25) translateY(-50%);
    }
}

@keyframes hvr-icon-pop {
    50% {
        transform: scale(1.25) translateY(-50%);
    }
}

@-webkit-keyframes hvr-ripple-out {
    0% {
        opacity: 1;
    }

    100% {
        top: -8px;
        right: -8px;
        bottom: -8px;
        left: -8px;
        opacity: 0;
    }
}

@keyframes hvr-ripple-out {
    0% {
        opacity: 1;
    }

    100% {
        top: -8px;
        right: -8px;
        bottom: -8px;
        left: -8px;
        opacity: 0;
    }
}

@-webkit-keyframes hvr-ripple-circle {
    0% {
        opacity: 1;
        transform: scale(1) translateX(3px) translateY(3px);
    }

    50% {
        opacity: 0;
        transform: scale(1.4) translateX(3px) translateY(3px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateX(3px) translateY(3px);
    }
}

@-webkit-keyframes hvr-ripple-out-circle {
    0% {
        opacity: 1;
        transform: scale(1) translateX(3px) translateY(3px);
    }

    50% {
        opacity: 0;
        transform: scale(1.4) translateX(3px) translateY(3px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateX(3px) translateY(3px);
    }
}

@keyframes hvr-ripple-out-circle {
    0% {
        opacity: 1;
        transform: scale(1) translateX(3px) translateY(3px);
    }

    50% {
        opacity: 0;
        transform: scale(1.4) translateX(3px) translateY(3px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateX(3px) translateY(3px);
    }
}

@-webkit-keyframes small {
    0% {
        opacity: 0;
        transform: scale(1);
    }

    100% {
        opacity: 1;
        transform: scale(1.1);
        transform-origin: right;
    }
}

@keyframes small {
    0% {
        opacity: 0;
        transform: scale(1);
    }

    100% {
        opacity: 1;
        transform: scale(1.1);
        transform-origin: right;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeInSlightly {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 0.4;
    }
}

@keyframes fadeInSlightly {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 0.4;
    }
}

@-webkit-keyframes swipeRight {
    0% {
        left: -100%;
    }

    100% {
        left: 0;
    }
}

@keyframes swipeRight {
    0% {
        left: -100%;
    }

    100% {
        left: 0;
    }
}

@-webkit-keyframes swipeLeft {
    0% {
        right: -100%;
    }

    100% {
        right: 0;
    }
}

@keyframes swipeLeft {
    0% {
        right: -100%;
    }

    100% {
        right: 0;
    }
}

@-webkit-keyframes swipeDown {
    0% {
        top: -100%;
    }

    100% {
        top: 0;
    }
}

@keyframes swipeDown {
    0% {
        top: -100%;
    }

    100% {
        top: 0;
    }
}

@-webkit-keyframes dash {
    from {
        stroke-dashoffset: 822;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes dash {
    from {
        stroke-dashoffset: 822;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@-webkit-keyframes typing {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes typing {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@-webkit-keyframes blink-caret {
    from,
    to {
        border-color: transparent;
    }

    50% {
        border-color: #FAE0E6;
    }
}

@keyframes blink-caret {
    from,
    to {
        border-color: transparent;
    }

    50% {
        border-color: #FAE0E6;
    }
}

@-webkit-keyframes morph {
    0% {
        transform: translateX(450px);
        d: path("M114.499 -0.999968L240.999 -1.00003L240.999 217.5C240.999 217.5 81.9999 310 67.499 217.5C52.9982 125 -29.0004 116 11.9998 57.5C53 -1.00005 114.499 -0.999968 114.499 -0.999968Z");
    }

    100% {
        d: path("M6 -1.00002L665 -1.00006L665 861C665 861 195.93 718.511 245.775 487.68C295.619 256.85 212.917 235.324 84.8721 149.674C-30.0745 72.7857 6 -1.00002 6 -1.00002Z");
    }
}

@keyframes morph {
    0% {
        transform: translateX(450px);
        d: path("M114.499 -0.999968L240.999 -1.00003L240.999 217.5C240.999 217.5 81.9999 310 67.499 217.5C52.9982 125 -29.0004 116 11.9998 57.5C53 -1.00005 114.499 -0.999968 114.499 -0.999968Z");
    }

    100% {
        d: path("M6 -1.00002L665 -1.00006L665 861C665 861 195.93 718.511 245.775 487.68C295.619 256.85 212.917 235.324 84.8721 149.674C-30.0745 72.7857 6 -1.00002 6 -1.00002Z");
    }
}

@-webkit-keyframes morph-blue {
    0% {
        transform: translateX(600px);
        d: path("M300 41.9999C380 29.9999 402.045 69 402.045 69V311C402.045 311 423.247 389.812 255 329C172 299 68.0001 369 21.0001 273C-26.7812 175.404 16.9184 77.4431 70.9999 33C172 -50 220 53.9999 300 41.9999Z");
    }

    100% {
        d: path("M399.544 38.4444C531.544 -48.0556 977.044 38.4444 977.044 38.4444V938.445C977.044 938.445 600.547 1132.86 366.544 1065.44C198.725 1017.1 36.8275 976.29 3.04443 804.945C-41.7432 577.785 421.472 680.14 483.044 456.944C527.364 296.29 267.544 124.944 399.544 38.4444Z");
    }
}

@keyframes morph-blue {
    0% {
        transform: translateX(600px);
        d: path("M300 41.9999C380 29.9999 402.045 69 402.045 69V311C402.045 311 423.247 389.812 255 329C172 299 68.0001 369 21.0001 273C-26.7812 175.404 16.9184 77.4431 70.9999 33C172 -50 220 53.9999 300 41.9999Z");
    }

    100% {
        d: path("M399.544 38.4444C531.544 -48.0556 977.044 38.4444 977.044 38.4444V938.445C977.044 938.445 600.547 1132.86 366.544 1065.44C198.725 1017.1 36.8275 976.29 3.04443 804.945C-41.7432 577.785 421.472 680.14 483.044 456.944C527.364 296.29 267.544 124.944 399.544 38.4444Z");
    }
}

@-webkit-keyframes morph-left {
    0% {
        transform: translateX(600px);
        transform: scaleX(-1);
        d: path("M300,41.9999 C380,29.9999 402.045,69 402.045,69 L402.045,311 C402.045,311 423.247,389.812 255,329 C172,299 68.0001,369 21.0001,273 C-26.7812,175.404 16.9184,77.4431 70.9999,33 C172,-50 220,53.9999 300,41.9999 Z");
    }

    100% {
        d: path("M399.544,38.4444 C531.544,-48.0556 977.044,38.4444 977.044,38.4444 L977.044,938.445 C977.044,938.445 600.547,1132.86 366.544,1065.44 C198.725,1017.1 36.8275,976.29 3.04443,804.945 C-41.7432,577.785 421.472,680.14 483.044,456.944 C527.364,296.29 267.544,124.944 399.544,38.4444 Z");
    }
}

@keyframes morph-left {
    0% {
        transform: translateX(600px);
        transform: scaleX(-1);
        d: path("M300,41.9999 C380,29.9999 402.045,69 402.045,69 L402.045,311 C402.045,311 423.247,389.812 255,329 C172,299 68.0001,369 21.0001,273 C-26.7812,175.404 16.9184,77.4431 70.9999,33 C172,-50 220,53.9999 300,41.9999 Z");
    }

    100% {
        d: path("M399.544,38.4444 C531.544,-48.0556 977.044,38.4444 977.044,38.4444 L977.044,938.445 C977.044,938.445 600.547,1132.86 366.544,1065.44 C198.725,1017.1 36.8275,976.29 3.04443,804.945 C-41.7432,577.785 421.472,680.14 483.044,456.944 C527.364,296.29 267.544,124.944 399.544,38.4444 Z");
    }
}

html {
    font-size: 10px;
}

@media(max-width:800px) {
    html {
        -webkit-text-size-adjust: 100%;
    }
}

@media screen and (min-width:900px) {
    html.js {
        cursor: none;
    }

    html.js button,
    html.js a,
    html.js a:hover {
        cursor: none;
    }
}

body {
    overflow-x: hidden;
    font-family: "Nunito",sans-serif;
    font-size: 1.6rem;
    line-height: 2;
    color: #6b6b6b;
}

@media screen and (min-width:1600px) {
    body {
        font-size: 1.8rem;
    }
}

a,
.fauxlink {
    text-decoration: none;
    color: #FAE0E6;
    cursor: pointer;
}

a:hover,
a:focus,
a:active,
.fauxlink:hover,
.fauxlink:focus,
.fauxlink:active {
    -webkit-text-decoration-color: #e1466a;
    text-decoration-color: #e1466a;
}

a[href^="tel"] {
    text-decoration: none;
    color: inherit;
}

.max_width {
    display: block;
    height: auto;
    max-width: 100%;
}

.full_width {
    display: block;
    width: 100%;
    height: auto;
}

@media screen and (min-width:900px) {
    .content-container {
        padding-left: 115px;
    }
}

strong,
b {
    font-weight: 600;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

input,
textarea,
select,
button {
    font-family: "Nunito",sans-serif;
}

.typeXXL,
.typebase h1,
.typebase h2,
.typeXL,
.typebase h3,
.typeL,
.typebase h4,
.typeM,
.typebase h5,
.typeMe,
.typebase h6,
.typeS,
.typeXS,
.text,
.unordered_list li,
.typebase ul li,
.ordered_list li,
.typebase ol li,
.simple_list li,
.description_list dt,
.typebase dl dt,
.description_list dd,
.typebase dl dd,
.typebase p {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 2;
}

.typeXXL,
.typebase h1,
.typebase h2 {
    letter-spacing: -0.125rem;
    -webkit-font-kerning: normal;
    font-kerning: normal;
}

.typeXXL,
.typebase h1,
.typebase h2 {
    font-size: 6rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.typeXL,
.typebase h3 {
    font-size: 3.8rem;
}

.typeL,
.typebase h4 {
    font-size: 2.8rem;
}

.typeM,
.typebase h5 {
    font-size: 2rem;
}

.typeMe,
.typebase h6 {
    font-size: 1.6rem;
}

.typeS {
    font-size: 1.4rem;
}

.typeXS {
    font-size: 1.2rem;
}

.heading,
.typebase h1,
.typebase h2,
.typebase h3,
.typebase h4,
.typebase h5,
.typebase h6 {
    display: block;
    font-weight: 600;
    color: #2F2F2F;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.text,
.unordered_list li,
.typebase ul li,
.ordered_list li,
.typebase ol li,
.simple_list li,
.description_list dt,
.typebase dl dt,
.description_list dd,
.typebase dl dd,
.typebase p {
    font-size: 1.6rem;
}

@media screen and (min-width:1300px) {
    .text,
    .unordered_list li,
    .typebase ul li,
    .ordered_list li,
    .typebase ol li,
    .simple_list li,
    .description_list dt,
    .typebase dl dt,
    .description_list dd,
    .typebase dl dd,
    .typebase p {
        font-size: 1.8rem;
    }
}

.typebase li {
    padding-bottom: .8rem;
}

.typebase li:last-of-type {
    padding-bottom: 0;
}

.unordered_list,
.typebase ul {
    list-style-type: disc;
}

.unordered_list ul,
.typebase ul ul {
    padding-left: 2rem;
    list-style-type: disc;
}

.ordered_list,
.typebase ol {
    list-style-type: decimal;
}

.ordered_list ol,
.typebase ol ol {
    padding-left: 2rem;
    list-style-type: decimal;
}

.simple_list {
    list-style-type: none;
}

.simple_list ol,
.simple_list ul {
    padding-left: 2rem;
    list-style-type: none;
}

.description_list,
.typebase dl {
    margin-right: 0;
    margin-left: 0;
    overflow: hidden;
}

.description_list dt,
.typebase dl dt,
.description_list dd,
.typebase dl dd {
    margin-right: 0;
    margin-bottom: .4rem;
    margin-left: 0;
    line-height: 1.8;
}

.description_list dt,
.typebase dl dt {
    display: block;
}

.description_list dd,
.typebase dl dd {
    display: block;
    margin-left: 1.8rem;
}

.description_list dd + dt,
.typebase dl dd + dt {
    margin-top: 1.8rem;
}

.description_list code,
.typebase dl code {
    display: inline;
}

.typebase p {
    display: block;
    margin-top: 1.6rem;
}

.typebase ul,
.typebase ol {
    margin-top: 1.6rem;
}

.typebase dl {
    margin: 2.4rem 0;
}

.typebase img {
    display: block;
    height: auto;
    max-width: 100%;
}

.typebase h1,
.typebase h2,
.typebase h3,
.typebase h4,
.typebase h5,
.typebase h6 {
    position: relative;
    margin-top: 6.4rem;
}

.typebase h1 + p,
.typebase h2 + p,
.typebase h3+p,
.typebase h4+p,
.typebase h5+p,
.typebase h6+p,
.typebase h1+ol,
.typebase h2+ol,
.typebase h3+ol,
.typebase h4+ol,
.typebase h5+ol,
.typebase h6+ol,
.typebase h1+ul,
.typebase h2+ul,
.typebase h3+ul,
.typebase h4+ul,
.typebase h5+ul,
.typebase h6+ul {
    margin-top: .8rem;
}

.typebase > h1:first-child,
.typebase > h2:first-child,
.typebase>h3:first-child,
.typebase>h4:first-child,
.typebase>h5:first-child,
.typebase>h6:first-child,
.typebase>img:first-child,
.typebase>p:first-child,
.typebase>ol:first-child,
.typebase>ul:first-child,
.typebase>media-video-wrapper:first-child {
    margin-top: 0;
}

.typebase br + br,
.typebase h1:empty,
.typebase h2:empty,
.typebase h3:empty,
.typebase h4:empty,
.typebase h5:empty,
.typebase h6:empty,
.typebase p:empty,
.typebase ul:empty,
.typebase ol:empty,
.typebase span:empty,
.typebase cite:empty,
.typebase div:empty {
    display: none;
}

.footer {
    z-index: 15;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    border: 0 solid #fff;
    overflow-y: scroll;
    opacity: 0;
    background-color: #FAE0E6;
    transition: height 0.3s ease-in-out 0s,transform 0.3s ease-in-out 0s,border 0.3s ease-in-out 0.3s,opacity 0.3s ease-in-out 0s;
    transform: translateY(-100%);
}

@media screen and (min-width:900px) {
    .footer {
        position: fixed;
        transform: translateY(100%);
    }
}

.footer .social {
    margin-top: 2.1em;
    transform: translateX(250px);
}

.footer .social a {
    color: #2F2F2F;
}

@media screen and (min-width:900px) {
    .footer .social {
        margin-top: 0;
    }
}

.footer--active {
    height: 100vh;
    opacity: 1;
    transform: translateY(0);
}

@media screen and (min-width:900px) {
    .footer--active {
        border: 3em solid #fff;
        transform: translateY(0);
    }
}

.footer--active .footer__close {
    transform: translateX(0);
}

.footer--active .social {
    transform: translateX(0);
}

.footer__close {
    display: block;
    position: relative;
    margin-top: 5em;
    margin-left: 3em;
    transition: transform 0.3s ease-in-out 1s;
    transform: translateX(-100px);
}

@media screen and (min-width:900px) {
    .footer__close {
        margin-top: 3em;
    }
}

.footer__close svg,
.footer__close img {
    width: 36px;
    height: 36px;
}

.footer__close:after {
    content: "";
    z-index: -1;
    position: absolute;
    top: 3px;
    left: 3px;
    width: 36px;
    height: 36px;
    background-image: url(../img/menu-close-white.svg);
    transition: all linear 0.3s;
}

.footer__close:hover:after,
.footer__close:focus:after,
.footer__close:active:after {
    top: 0;
    left: 0;
}

.header {
    z-index: 10;
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    padding: 1.5em;
    border-bottom: 1px solid #F3F3F3;
    background-color: #fff;
    -webkit-animation: swipeDown;
    animation: swipeDown;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-delay: 2.25s;
    animation-delay: 2.25s;
}

@media screen and (min-width:900px) {
    .header {
        position: fixed;
        top: 0;
        left: -100%;
        width: 115px;
        height: 100vh;
        padding: 2em;
        border-right: 1px solid #F3F3F3;
        border-bottom: 0;
        -webkit-animation: swipeRight;
        animation: swipeRight;
        -webkit-animation-duration: 0.5s;
        animation-duration: 0.5s;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
        -webkit-animation-delay: 2.25s;
        animation-delay: 2.25s;
    }
}

.header__icon {
    display: block;
    position: relative;
    margin-left: 10px;
}

.header__icon svg,
.header__icon img {
    width: 31px;
    height: 31px;
}

.header__icon:after {
    z-index: -1;
    position: absolute;
    top: 3px;
    left: 3px;
    transition: all linear 0.3s;
}

.header__icon:hover:after,
.header__icon:focus:after,
.header__icon:active:after {
    top: 0;
    left: 0;
}

.header__icon--menu:after {
    content: "";
    width: 31px;
    height: 31px;
    background-image: url(../img/menu-pink.svg);
}

.body--about .header__icon--menu:after {
    background-image: url(../img/menu-blue.svg);
}

.body--portfolio .header__icon--menu:after,
.body--portfolio-single .header__icon--menu:after {
    background-image: url(../img/menu-yellow.svg);
}

.header__icon--next {
    margin-left: 4px;
}

.header__icon--next svg,
.header__icon--next img {
    width: 44px;
    height: 44px;
}

.header__icon--next:after {
    content: "";
    width: 44px;
    height: 44px;
    background-image: url(../img/arrow-down-pink.svg);
}

.body--about .header__icon--next:after {
    background-image: url(../img/arrow-down-blue.svg);
}

.header__icon--prev {
    margin-left: 4px;
}

.header__icon--prev svg, /*vrais icon*/
.header__icon--prev img {
    width: 44px;
    height: 44px;
}

.header__icon--prev:after {
    content: "";
    width: 44px;
    height: 44px;
    background-image: url(../img/arrow-up-blue.svg);
}

.body--portfolio .header__icon--prev:after,
.body--portfolio-single .header__icon--prev:after {
    background-image: url(../img/arrow-up-yellow.svg);
}

.header__icon--email {
    position: absolute;
    right: 3em;
    bottom: 1.6em;
}

.header__icon--email:after {
    content: "";
    width: 31px;
    height: 31px;
    
    background-image: url(../img/email-pink.svg);
}

.body--about .header__icon--email:after {
    background-image: url(../img/email-blue.svg);
}

.body--portfolio .header__icon--email:after,
.body--portfolio-single .header__icon--email:after {
    background-image: url(../img/email-yellow.svg);
}

@media screen and (min-width:900px) {
    .header__icon--email {
        right: auto;
        bottom: 3em;
    }
}

.header__controls {
    display: none;
}

@media screen and (min-width:900px) {
    .header__controls {
        display: block;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
}

.l-2up,
.l-4up,
.l-5up {
    display: block;
    position: relative;
}

@media screen and (min-width:900px) {
    @supports(display:grid) {
    .l-2up {
        display: -ms-grid;
        display: grid;
        grid-template-columns: repeat(auto-fit,47.5%);
        grid-gap: 5%;
        grid-row-gap: inherit;
    }
}

@supports(display:-ms-grid) {
    .l-2up {
        display: block;
    }
}
}

.l-2up__col {
    margin-bottom: 3em;
}

@media screen and (min-width:900px) {
    .l-2up__col {
        display: block;
        float: left;
        width: 47.5%;
        margin-left: 5%;
    }

    .l-2up__col:nth-child(2n+1) {
        clear: left;
        margin-left: 0;
    }

    @supports(display:grid) {
    .l-2up__col:nth-child(2n+1) {
        margin-left: 0;
    }
}

@supports(display:grid) {
    .l-2up__col {
        width: auto;
        margin-left: 0;
    }
}

@supports(display:-ms-grid) {
    .l-2up__col {
        float: left;
        width: 47.5%;
        margin-left: 5%;
    }

    .l-2up__col:nth-child(2n+1) {
        clear: left;
        margin-left: 0;
    }
}
}

.l-2up__col--work:nth-child(odd) {
    margin-bottom: 7em;
}

@media screen and (min-width:900px) {
    .l-2up__col--work:nth-child(odd) {
        transform: translateY(60px);
    }
}

@media screen and (min-width:900px) {
    .l-2up__col--offset {
        transform: translateY(200px);
    }
}

@media screen and (min-width:1100px) {
    .l-2up__col--offset {
        transform: translateY(300px);
    }
}

@media screen and (min-width:1300px) {
    .l-2up__col--offset {
        transform: translateY(450px);
    }
}

@media screen and (min-width:900px) {
    .l-2up__col--offset-minor {
        transform: translateY(90px);
    }
}

@media screen and (min-width:1100px) {
    .l-2up__col--offset-minor {
        transform: translateY(90px);
    }
}

@media screen and (min-width:1300px) {
    .l-2up__col--offset-minor {
        transform: translateY(90px);
    }
}

@supports(display:grid) {
    .l-4up {
        display: -ms-grid;
        display: grid;
        grid-template-columns: repeat(auto-fit,47.5%);
        grid-gap: 5%;
        grid-row-gap: inherit;
    }
}

@supports(display:-ms-grid) {
    .l-4up {
        display: block;
    }
}

@media screen and (min-width:900px) {
    @supports(display:grid) {
    .l-4up {
        display: -ms-grid;
        display: grid;
        grid-template-columns: repeat(auto-fit,21.25%);
        grid-gap: 5%;
        grid-row-gap: inherit;
    }
}

@supports(display:-ms-grid) {
    .l-4up {
        display: block;
    }
}
}

.l-4up__col {
    display: block;
    float: left;
    width: 47.5%;
    margin-bottom: 3em;
    margin-left: 5%;
}

.l-4up__col:nth-child(2n+1) {
    clear: left;
    margin-left: 0;
}

@supports(display:grid) {
    .l-4up__col:nth-child(2n+1) {
        margin-left: 0;
    }
}

@supports(display:grid) {
    .l-4up__col {
        width: auto;
        margin-left: 0;
    }
}

@supports(display:-ms-grid) {
    .l-4up__col {
        float: left;
        width: 47.5%;
        margin-left: 5%;
    }

    .l-4up__col:nth-child(2n+1) {
        clear: left;
        margin-left: 0;
    }
}

@media screen and (min-width:900px) {
    .l-4up__col {
        display: block;
        float: left;
        width: 21.25%;
        margin-left: 5%;
    }

    .l-4up__col:nth-child(2n+1) {
        clear: none;
        margin-left: 5%;
    }

    @supports(display:grid) {
    .l-4up__col:nth-child(2n+1) {
        margin-left: 5%;
    }
}

.l-4up__col:nth-child(4n+1) {
    clear: left;
    margin-left: 0%;
}

@supports(display:grid) {
    .l-4up__col:nth-child(4n+1) {
        margin-left: 0;
    }
}

@supports(display:grid) {
    .l-4up__col {
        width: auto;
        margin-left: 0;
    }
}

@supports(display:-ms-grid) {
    .l-4up__col {
        float: left;
        width: 21.25%;
        margin-left: 5%;
    }

    .l-4up__col:nth-child(2n+1) {
        clear: none;
        margin-left: 5%;
    }

    .l-4up__col:nth-child(4n+1) {
        clear: left;
        margin-left: 0%;
    }

    @supports(display:grid) {
    .l-4up__col:nth-child(4n+1) {
        margin-left: 0;
    }
}
}
}

@supports(display:grid) {
    .l-5up {
        display: -ms-grid;
        display: grid;
        grid-template-columns: repeat(auto-fit,47.5%);
        grid-gap: 5%;
        grid-row-gap: inherit;
    }
}

@supports(display:-ms-grid) {
    .l-5up {
        display: block;
    }
}

@media screen and (min-width:900px) {
    @supports(display:grid) {
    .l-5up {
        display: -ms-grid;
        display: grid;
        grid-template-columns: repeat(auto-fit,16%);
        grid-gap: 5%;
        grid-row-gap: inherit;
    }
}

@supports(display:-ms-grid) {
    .l-5up {
        display: block;
    }
}
}

.l-5up__col {
    display: block;
    float: left;
    width: 47.5%;
    margin-bottom: 3em;
    margin-left: 5%;
}

.l-5up__col:nth-child(2n+1) {
    clear: left;
    margin-left: 0;
}

@supports(display:grid) {
    .l-5up__col:nth-child(2n+1) {
        margin-left: 0;
    }
}

@supports(display:grid) {
    .l-5up__col {
        width: auto;
        margin-left: 0;
    }
}

@supports(display:-ms-grid) {
    .l-5up__col {
        float: left;
        width: 47.5%;
        margin-left: 5%;
    }

    .l-5up__col:nth-child(2n+1) {
        clear: left;
        margin-left: 0;
    }
}

@media screen and (min-width:900px) {
    .l-5up__col {
        display: block;
        float: left;
        width: 16%;
        margin-left: 5%;
    }

    .l-5up__col:nth-child(2n+1) {
        clear: none;
        margin-left: 5%;
    }

    @supports(display:grid) {
    .l-5up__col:nth-child(2n+1) {
        margin-left: 5%;
    }
}

.l-5up__col:nth-child(5n+1) {
    clear: left;
    margin-left: 0%;
}

@supports(display:grid) {
    .l-5up__col:nth-child(5n+1) {
        margin-left: 0;
    }
}

@supports(display:grid) {
    .l-5up__col {
        width: auto;
        margin-left: 0;
    }
}

@supports(display:-ms-grid) {
    .l-5up__col {
        float: left;
        width: 16%;
        margin-left: 5%;
    }

    .l-5up__col:nth-child(2n+1) {
        clear: none;
        margin-left: 5%;
    }

    .l-5up__col:nth-child(5n+1) {
        clear: left;
        margin-left: 0%;
    }

    @supports(display:grid) {
    .l-5up__col:nth-child(5n+1) {
        margin-left: 0;
    }
}
}
}

.row {
    position: relative;
    margin-right: auto;
    margin-left: auto;
    padding-right: 5%;
    padding-left: 5%;
    max-width: 1440px;
    min-width: auto;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

.rowStatic {
    position: static;
}

@media screen and (min-width:900px) {
    .row {
        padding-right: 8%;
        padding-left: 8%;
    }
}

.section {
    position: relative;
    margin: 200px 0;
}

@media screen and (min-width:900px) {
    .section--offset {
        margin-bottom: 250px;
    }
}

.section--summary {
    margin-top: 400px;
}

@media screen and (min-width:650px) {
    .section--summary {
        margin-top: 500px;
    }
}

@media screen and (min-width:900px) {
    .section--summary {
        margin-top: 600px;
    }
}

@media screen and (min-width:1100px) {
    .section--summary {
        margin-top: 800px;
    }
}

.section__module {
    margin-top: 50px;
}

.section__flourish {
    display: none;
    position: absolute;
    top: -50px;
    left: 0;
}

@media screen and (min-width:900px) {
    .section__flourish {
        display: block;
    }
}

.section__flourish.on-screen svg.section__flourish-shape {
    height: 100%;
    max-height: 1080px;
    max-width: 100%;
    transform: translateX(-10px);
}

.section__flourish.on-screen svg.section__flourish-shape path {
    -webkit-animation-name: morph-left;
    animation-name: morph-left;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    d: path("M399.544 38.4444C531.544 -48.0556 977.044 38.4444 977.044 38.4444V938.445C977.044 938.445 600.547 1132.86 366.544 1065.44C198.725 1017.1 36.8275 976.29 3.04443 804.945C-41.7432 577.785 421.472 680.14 483.044 456.944C527.364 296.29 267.544 124.944 399.544 38.4444Z");
}

.section__flourish.on-screen svg.section__flourish-outline {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 1164px;
    opacity: 0;
    -webkit-animation-name: small;
    animation-name: small;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
    transform: translateX(-10px);
}

.section__flourish.on-screen svg.section__flourish-outline path {
    d: path("M399.544 38.4444C531.544 -48.0556 977.044 38.4444 977.044 38.4444V938.445C977.044 938.445 600.547 1132.86 366.544 1065.44C198.725 1017.1 36.8275 976.29 3.04443 804.945C-41.7432 577.785 421.472 680.14 483.044 456.944C527.364 296.29 267.544 124.944 399.544 38.4444Z");
}

.section__title {
    width: 0;
    margin-bottom: 1em;
    overflow: hidden;
    font-family: "Playfair Display",serif;
    font-size: 3.8rem;
    line-height: 1.2;
    white-space: nowrap;
    color: #2F2F2F;
}

@media screen and (min-width:900px) {
    .section__title {
        font-size: 6rem;
    }
}

.section__title--center {
    margin-right: auto;
    margin-left: auto;
    max-width: 80ch;
    text-align: center;
}

.section__title.on-screen {
    -webkit-animation: typing 0.75s steps(40,end);
    animation: typing 0.75s steps(40,end);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-delay: 0.25s;
    animation-delay: 0.25s;
}

.section__copy {
    opacity: 0;
    transition: all,ease-in,0.75s;
    transform: translateY(50%);
    transition-delay: 0.25s;
}

.section__copy.on-screen {
    opacity: 1;
    transform: translateY(0);
}

.section__copy--center {
    margin-right: auto;
    margin-left: auto;
    max-width: 80ch;
    text-align: center;
}

@media screen and (min-width:900px) {
    .section__copy--columns {
        -moz-column-gap: 100px;
        column-gap: 100px;
        -moz-columns: 2;
        columns: 2;
    }
}

.button,
a.button,
button.button {
    display: inline-block;
    position: relative;
    padding: 0.25em 3em;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    transition: all linear 0.3s;
    cursor: pointer;
    transition-duration: 0.5s;
}

.button span {
    font-size: inherit;
    font-weight: inherit;
}

.button:focus {
    outline: none;
}

.button,
a.button,
button.button {
    font-size: 1.4rem;
    line-height: 35px;
    color: #00b1da;
    background: linear-gradient(259.07deg, #DAF8FF 4.07%, #B2EAF8 100%);
    background-color: #DAF8FF;
    box-shadow: 0 8px 20px #E5F4F5;
    transition-duration: 0.1s;
}

.button:before,
a.button:before,
button.button:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 3px solid #c1f3ff;
    border-radius: 10px;
    opacity: 0;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}

.button:hover,
.button:focus,
.button:active,
a.button:hover,
a.button:focus,
a.button:active,
button.button:hover,
button.button:focus,
button.button:active {
    text-decoration: none;
    box-shadow: 0 8px 20px #daeff1;
    transition-duration: 0.1s;
}

.button:hover:before,
.button:focus:before,
.button:active:before,
a.button:hover:before,
a.button:focus:before,
a.button:active:before,
button.button:hover:before,
button.button:focus:before,
button.button:active:before {
    -webkit-animation-name: hvr-ripple-out;
    animation-name: hvr-ripple-out;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}

.buttonSmall,
a.buttonSmall,
button.buttonSmall {
    padding: 0 12px;
    font-size: 1.4rem;
    line-height: 30px;
}

.button--block,
a.button--block,
button.button--block {
    left: 50%;
    transform: translateX(-50%);
}

.button--secondary,
a.button--secondary,
button.button--secondary {
    color: #d8bd1b;
    background: linear-gradient(259.07deg, #FFFCE9 4.07%, #FDF7D2 100%);
    background-color: #F8F1C7;
    box-shadow: 0 8px 20px #F8F3E1;
}

.button--secondary:before,
a.button--secondary:before,
button.button--secondary:before {
    border-color: #F8F1C7;
    -webkit-animation-duration: 3.5s;
    animation-duration: 3.5s;
}

.button--secondary:hover,
.button--secondary:focus,
.button--secondary:active,
a.button--secondary:hover,
a.button--secondary:focus,
a.button--secondary:active,
button.button--secondary:hover,
button.button--secondary:focus,
button.button--secondary:active {
    box-shadow: 0 8px 20px #f5eed5;
}

.button--tertiary,
a.button--tertiary,
button.button--tertiary {
    color: #e1466a;
    background: linear-gradient(259.07deg, #F5CED7 4.07%, #F8C3D0 100%);
    background-color: #FAE0E6;
    box-shadow: 0 8px 20px #FAE0E6;
    margin-bottom: 2%;
}

.button--tertiary:before,
a.button--tertiary:before,
button.button--tertiary:before {
    border-color: #FAE0E6;
    -webkit-animation-duration: 3.5s;
    animation-duration: 3.5s;
}

.button--tertiary:hover,
.button--tertiary:focus,
.button--tertiary:active,
a.button--tertiary:hover,
a.button--tertiary:focus,
a.button--tertiary:active,
button.button--tertiary:hover,
button.button--tertiary:focus,
button.button--tertiary:active {
    box-shadow: 0 8px 20px #f8d3db;
}

.buttonIcon,
a.buttonIcon,
button.buttonIcon {
    padding-right: 45px;
    text-align: left;
}

.buttonIcon svg,
a.buttonIcon svg,
button.buttonIcon svg {
    display: block;
    position: absolute;
    top: 50%;
    right: 12px;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    transform-origin: top;
    transition-duration: 0.3s;
    transition-property: transform;
    transition-timing-function: ease-out;
}

.buttonIcon:hover svg,
.buttonIcon:focus svg,
.buttonIcon:active svg,
a.buttonIcon:hover svg,
a.buttonIcon:focus svg,
a.buttonIcon:active svg,
button.buttonIcon:hover svg,
button.buttonIcon:focus svg,
button.buttonIcon:active svg {
    -webkit-animation-name: hvr-icon-pop;
    animation-name: hvr-icon-pop;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

.buttonIcon.buttonPrimary svg,
a.buttonIcon.buttonPrimary svg,
button.buttonIcon.buttonPrimary svg {
    fill: #fff;
}

.buttonDisabled,
a.buttonDisabled,
button.buttonDisabled {
    opacity: 0.3;
    cursor: not-allowed;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.buttonDisabled:focus,
a.buttonDisabled:focus,
button.buttonDisabled:focus {
    text-decoration: none;
    outline: none;
}

.buttonDisabled:hover,
.buttonDisabled:focus,
.buttonDisabled:active,
a.buttonDisabled:hover,
a.buttonDisabled:focus,
a.buttonDisabled:active,
button.buttonDisabled:hover,
button.buttonDisabled:focus,
button.buttonDisabled:active {
    text-decoration: none;
}

.buttonBlock,
a.buttonBlock,
button.buttonBlock {
    display: block;
}

.form {
    position: relative;
}

.fieldset {
    padding: 0;
    border: none;
}

.formlabel {
    font-size: 1.4rem;
    color: #2F2F2F;
}

.formlabel.formlabelHidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0;
    border: 0 !important;
    overflow: hidden;
    clip: rect(1px,1px,1px,1px);
}

.formfield {
    position: relative;
}

.formfield:after {
    content: "";
    display: table;
    clear: both;
}

.formfieldSpaced {
    padding-top: 3.33333%;
}

.formfieldError .formitem {
    border-color: #B10E1E;
}

.formfieldError .formitem:focus {
    border-color: #B10E1E;
}

.formfieldError .formlabel {
    color: #B10E1E;
}

.formfieldCheckRadio {
    position: relative;
}

.formfieldCheckRadio > .formlabel {
    display: block;
    margin-bottom: 12px;
}

.formfieldSelectButton:after {
    content: "";
    display: table;
    clear: both;
}

.formfieldSelectButton .formfield_select {
    float: left;
    position: relative;
}

.formfieldSelectButton .formfield_select select {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.formfieldSelectButton .button {
    float: left;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.formfield .hint {
    display: block;
    clear: left;
    padding-top: 6px;
    font-size: 1.2rem;
}

.formfield .errormessage {
    display: none;
    clear: left;
    padding-top: 6px;
    font-size: 1.2rem;
    color: #B10E1E;
}

.formfield .errormessageVisible {
    display: block;
}

.formitem {
    display: block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 40px;
    padding: 10px;
    border: 1px solid #F3F3F3;
    border-radius: 0;
    border-radius: 5px;
    font-size: 15px;
    background-color: #fff;
}

.formitem::focus-inner {
    padding: 0;
    border: 0;
}

.formitem:focus {
    border-color: #2F2F2F;
    outline: none;
}

.formitemSmall {
    height: 32px;
}

.formitem[type=number]::-webkit-inner-spin-button,
.formitem[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
}

textarea.formitem {
    min-height: 200px;
}

.formfield_radiobuttons label,
.formfield_checkboxes label {
    position: relative;
    top: 0;
    vertical-align: middle;
}

.formfield_radiobuttons label:after,
.formfield_checkboxes label:after {
    content: "";
    display: block;
    clear: left;
    height: 0;
}

.formfield_radiobuttons input,
.formfield_checkboxes input {
    float: left;
    margin-right: 12px;
    vertical-align: middle;
}

.formfield_radiobuttons input:after,
.formfield_checkboxes input:after {
    content: "";
    display: block;
    clear: left;
    height: 0;
}

.formfield_radiobuttons input[type="radio"],
.formfield_radiobuttons input[type="checkbox"],
.formfield_checkboxes input[type="radio"],
.formfield_checkboxes input[type="checkbox"] {
    position: relative;
    top: 4px;
    width: 16px;
    height: 16px;
}

.formfield_radiobuttons input[type="radio"],
.formfield_checkboxes input[type="radio"] {
    position: relative;
    top: 3px;
    width: 16px;
    height: 16px;
}

.formfield_select {
    height: 40px;
    background-color: #fff;
}

.formfield_select select {
    display: block;
    -webkit-appearance: none;
    -moz-appearance: window;
    appearance: none;
    width: 100%;
    height: 40px;
    padding: 2px 15px 0 15px;
    border: 1px solid #F3F3F3;
    border-radius: 0;
    border-radius: 5px;
    font-size: 15px;
    line-height: 15px;
    vertical-align: middle;
    background: url(../img/drop.svg) #fff no-repeat right 43%;
    background-size: 15px 8px;
    background-origin: content-box;
}

.formfield_select select:hover,
.formfield_select select:focus {
    border-color: #2F2F2F;
    cursor: pointer;
}

.formfield_select select:focus {
    outline: none;
}

.formfield_select select::-ms-expand {
    display: none;
}

.formfieldError .formfield_select select {
    border-color: #B10E1E;
}

.formfield_select select option {
    max-width: 90%;
}

.formfield_selectSmall {
    height: 32px;
}

.formfield_selectSmall select {
    height: 32px;
}

.hero {
    position: relative;
    padding-top: 200px;
}

@media screen and (min-width:900px) {
    .hero {
        padding-top: 250px;
    }
}

.hero--home {
    height: 100vh;
    padding-top: 0;
}

.hero__flourish {
    position: absolute;
    top: -100px;
    right: 0;
    height: 100vh;
}

@media screen and (min-width:900px) {
    .hero__flourish {
        top: 0;
    }
}

.hero__flourish svg.hero__flourish-shape {
    height: 100%;
    max-height: 861px;
    max-width: 100%;
}

.hero__flourish svg.hero__flourish-shape path {
    -webkit-animation-name: morph;
    animation-name: morph;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    d: path("M114.499 -0.999968L240.999 -1.00003L240.999 217.5C240.999 217.5 81.9999 310 67.499 217.5C52.9982 125 -29.0004 116 11.9998 57.5C53 -1.00005 114.499 -0.999968 114.499 -0.999968Z");
}

.hero__flourish svg.hero__flourish-outline {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    max-height: 861px;
    opacity: 0;
    -webkit-animation-name: small;
    animation-name: small;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
}

.hero__flourish svg.hero__flourish-outline path {
    d: path("M6 -1.00002L665 -1.00006L665 861C665 861 195.93 718.511 245.775 487.68C295.619 256.85 212.917 235.324 84.8721 149.674C-30.0745 72.7857 6 -1.00002 6 -1.00002Z");
}

.body--about .hero__flourish,
.body--portfolio .hero__flourish,
.body--portfolio-single .hero__flourish {
    top: 0;
    right: 0;
    height: 1080px;
}

@media screen and (min-width:900px) {
    .body--about .hero__flourish,
    .body--portfolio .hero__flourish,
    .body--portfolio-single .hero__flourish {
        top: 130px;
    }
}

.body--about .hero__flourish svg.hero__flourish-shape,
.body--portfolio .hero__flourish svg.hero__flourish-shape,
.body--portfolio-single .hero__flourish svg.hero__flourish-shape {
    max-height: 1080px;
    max-width: 100%;
}

.body--about .hero__flourish svg.hero__flourish-shape path,
.body--portfolio .hero__flourish svg.hero__flourish-shape path,
.body--portfolio-single .hero__flourish svg.hero__flourish-shape path {
    -webkit-animation-name: morph-blue;
    animation-name: morph-blue;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    d: path("M399.544 38.4444C531.544 -48.0556 977.044 38.4444 977.044 38.4444V938.445C977.044 938.445 600.547 1132.86 366.544 1065.44C198.725 1017.1 36.8275 976.29 3.04443 804.945C-41.7432 577.785 421.472 680.14 483.044 456.944C527.364 296.29 267.544 124.944 399.544 38.4444Z");
}

.body--about .hero__flourish svg.hero__flourish-outline,
.body--portfolio .hero__flourish svg.hero__flourish-outline,
.body--portfolio-single .hero__flourish svg.hero__flourish-outline {
    width: 100%;
    max-height: 1164px;
}

@media screen and (min-width:900px) {
    .body--about .hero__flourish svg.hero__flourish-outline,
    .body--portfolio .hero__flourish svg.hero__flourish-outline,
    .body--portfolio-single .hero__flourish svg.hero__flourish-outline {
        right: -40px;
    }
}

.body--about .hero__flourish svg.hero__flourish-outline path,
.body--portfolio .hero__flourish svg.hero__flourish-outline path,
.body--portfolio-single .hero__flourish svg.hero__flourish-outline path {
    d: path("M399.544 38.4444C531.544 -48.0556 977.044 38.4444 977.044 38.4444V938.445C977.044 938.445 600.547 1132.86 366.544 1065.44C198.725 1017.1 36.8275 976.29 3.04443 804.945C-41.7432 577.785 421.472 680.14 483.044 456.944C527.364 296.29 267.544 124.944 399.544 38.4444Z");
}

.hero__caption .button {
    margin-top: 2em;
    opacity: 0;
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-delay: 2.25s;
    animation-delay: 2.25s;
}

.hero--home .hero__caption {
    position: fixed;
    top: 50%;
    margin-top: 0;
    transform: translateY(-50%);
}

.hero__title {
    width: 0;
    overflow: hidden;
    font-family: "Playfair Display",serif;
    font-size: 3.8rem;
    line-height: 1.2;
    white-space: nowrap;
    color: #2F2F2F;
    -webkit-animation: typing 0.75s steps(40,end);
    animation: typing 0.75s steps(40,end);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
}

.hero__title span {
    display: inline-block;
    position: relative;
}

.hero__title span:after {
    content: "";
    display: block;
    z-index: -1;
    position: absolute;
    bottom: 3px;
    width: 0;
    height: 13px;
    overflow: hidden;
    background-image: url(../img/brush.svg);
    background-repeat: no-repeat;
    -webkit-animation: typing 0.3s steps(40,end);
    animation: typing 0.3s steps(40,end);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
}

.body--about .hero__title span:after {
    background-image: url(../img/brushbleu.svg);
}

.body--portfolio .hero__title span:after,
.body--portfolio-single .hero__title span:after {
    background-image: url(../img/brushjaune.svg);
}

@media screen and (min-width:900px) {
    .hero__title {
        font-size: 6rem;
    }
}

.hero__copy {
    margin-top: 2em;
    font-size: 1.6rem;
    opacity: 0;
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}

.hero__copy--major {
    font-size: 1.8rem;
}

@media screen and (min-width:900px) {
    .hero__copy {
        max-width: 40%;
    }
}

@media screen and (min-width:1100px) {
    .hero__copy {
        max-width: 50%;
    }

    .hero--home .hero__copy {
        max-width: 45%;
    }
}

@media screen and (min-width:1600px) {
    .hero__copy {
        max-width: 60%;
        font-size: 1.8rem;
    }

    .hero--home .hero__copy {
        max-width: 55%;
    }
}

.m-image {
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    opacity: 0;
    box-shadow: 0 10px 50px rgba(38,45,56,0.15);
    transition: all,cubic-bezier(0.285,0.105,0.465,1.015) ,0.75s;
    transform: scale(0.8);
}

.m-image img {
    display: block;
    width: 100%;
    height: auto;
}

.m-image--overlay:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(218,248,255,0.5);
}

.m-image--preview {
    max-height: 600px;
}

@media screen and (min-width:900px) {
    .m-image--preview {
        max-height: 800px;
    }
}

.m-image--full {
    max-height: 900px;
}

@media screen and (min-width:900px) {
    .m-image--full {
        max-height: 1470px;
    }
}

.m-image.on-screen {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.3s;
}

.m-service {
    overflow: hidden;
}

.m-service.on-screen .m-service__icon {
    opacity: 1;
    transition: all,ease-in-out,0.75s;
    transform: scale(1);
}

.m-service.on-screen .m-service__icon:after {
    top: 10px;
    left: 10px;
    transition: all,ease-in-out,0.5s;
    transition-delay: 1s;
}

.m-service.on-screen .m-service__copy {
    opacity: 1;
    transition: all,ease-in-out,0.75s;
    transition-delay: 0.75s;
}

.m-service__icon {
    position: relative;
    margin-right: auto;
    margin-bottom: 2em;
    margin-left: auto;
    max-width: 120px;
    opacity: 0;
    transform: scale(0.8);
}

.m-service__icon svg,
.m-service__icon img {
    display: block;
    height: auto;
    max-width: 120px;
}

.m-service__icon:after {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 112px;
    background-color: #DAF8FF;
}

.m-service__copy {
    text-align: center;
    font-size: 1.6rem;
    line-height: 1.5;
    opacity: 0;
}

@media screen and (min-width:1300px) {
    .m-service__copy {
        font-size: 1.8rem;
    }
}

.m-testimonial {
    position: relative;
}

@media screen and (min-width:900px) {
    .m-testimonial {
        margin-right: auto;
        margin-left: auto;
        max-width: 80%;
    }
}

.m-testimonial__icon {
    position: absolute;
    top: -4em;
    left: 0;
    opacity: 0;
    transition: opacity,ease-in-out,0.75s;
    transition-delay: 1s;
}

.m-testimonial__icon img {
    width: 50px;
    height: 50px;
}

.m-testimonial__icon:after {
    content: "";
    z-index: -1;
    position: absolute;
    top: 4px;
    left: 3px;
    width: 50px;
    height: 50px;
    background-image: url(../img/quotes-blue.svg);
    background-size: contain;
}

@media screen and (min-width:900px) {
    .m-testimonial__icon {
        left: -1em;
    }
}

.m-testimonial.on-screen .m-testimonial__icon {
    opacity: 1;
}

.m-testimonial.on-screen .m-testimonial__flourish {
    transform: scale(1);
}

.m-testimonial.on-screen .m-testimonial__copy,
.m-testimonial.on-screen .m-testimonial__meta {
    opacity: 1;
    transform: translateY(0);
}

.m-testimonial__flourish {
    z-index: -1;
    position: absolute;
    top: -150px;
    left: -150px;
    transition: transform,ease-in,0.75s;
    transform: scale(0);
    transition-delay: 0.25s;
}

.m-testimonial__copy {
    font-size: 1.6rem;
    color: #2F2F2F;
    opacity: 0;
    transition: all,ease-in,0.75s;
    transform: translateY(50%);
    transition-delay: 0.25s;
}

@media screen and (min-width:1300px) {
    .m-testimonial__copy {
        font-size: 1.8rem;
    }
}

.m-testimonial__meta {
    display: block;
    margin-top: 1em;
    text-transform: uppercase;
    font-size: 1.2rem;
    font-style: normal;
    letter-spacing: 3px;
    opacity: 0;
    transition: opacity,ease-in,0.75s;
    transition-delay: 0.75s;
}

#cssda-badge {
    z-index: 10;
    position: absolute;
    top: 2em;
    right: 2em;
    width: 90px;
    height: 90px;
    border-radius: 90px;
    background: #EDEDED;
    transition: all 0.25s cubic-bezier(0.615,0.19,0.305,0.91);
    cursor: pointer;
}

#cssda-badge:hover {
    background: #673AB7;
    -webkit-animation: bounce .75s linear both;
    animation: bounce .75s linear both;
}

#cssda-badge svg {
    position: absolute;
    width: 90px;
    height: 90px;
    fill: #000;
}

#cssda-badge:hover svg {
    fill: #EDEDED;
}

.cssda-badge-content {
    position: absolute;
    width: 90px;
    height: 90px;
    transition: all 0.12s cubic-bezier(0.615,0.19,0.305,0.91);
}

#cssda-badge:hover .cssda-badge-content {
    transform: rotate(360deg);
}

#cssda-badge:hover #cssda-badge-logo {
    transform: scale(1.1);
}

@media only screen and (max-width:700px) {
    #cssda-badge {
        top: 6em;
        right: 1em;
        width: 60px;
        height: 60px;
    }

    #cssda-badge svg {
        width: 60px;
        height: 60px;
    }

    #cssda-badge-logo {
        transform: scale(1.35);
    }

    #cssda-badge:hover #cssda-badge-logo {
        transform: scale(1.5);
    }

    #cssda-badge-title {
        display: none;
    }

    #cssda-badge-award {
        display: none;
    }
}

@-webkit-keyframes bounce {
    0% {
        transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);
    }

    3.4% {
        transform: matrix3d(1.032,0,0,0,0,1.041,0,0,0,0,1,0,0,0,0,1);
    }

    4.7% {
        transform: matrix3d(1.045,0,0,0,0,1.06,0,0,0,0,1,0,0,0,0,1);
    }

    6.81% {
        transform: matrix3d(1.066,0,0,0,0,1.089,0,0,0,0,1,0,0,0,0,1);
    }

    9.41% {
        transform: matrix3d(1.088,0,0,0,0,1.117,0,0,0,0,1,0,0,0,0,1);
    }

    10.21% {
        transform: matrix3d(1.094,0,0,0,0,1.123,0,0,0,0,1,0,0,0,0,1);
    }

    13.61% {
        transform: matrix3d(1.112,0,0,0,0,1.133,0,0,0,0,1,0,0,0,0,1);
    }

    14.11% {
        transform: matrix3d(1.114,0,0,0,0,1.133,0,0,0,0,1,0,0,0,0,1);
    }

    17.52% {
        transform: matrix3d(1.121,0,0,0,0,1.124,0,0,0,0,1,0,0,0,0,1);
    }

    18.72% {
        transform: matrix3d(1.121,0,0,0,0,1.119,0,0,0,0,1,0,0,0,0,1);
    }

    21.32% {
        transform: matrix3d(1.12,0,0,0,0,1.107,0,0,0,0,1,0,0,0,0,1);
    }

    24.32% {
        transform: matrix3d(1.115,0,0,0,0,1.096,0,0,0,0,1,0,0,0,0,1);
    }

    25.23% {
        transform: matrix3d(1.113,0,0,0,0,1.094,0,0,0,0,1,0,0,0,0,1);
    }

    29.03% {
        transform: matrix3d(1.106,0,0,0,0,1.09,0,0,0,0,1,0,0,0,0,1);
    }

    29.93% {
        transform: matrix3d(1.105,0,0,0,0,1.09,0,0,0,0,1,0,0,0,0,1);
    }

    35.54% {
        transform: matrix3d(1.098,0,0,0,0,1.096,0,0,0,0,1,0,0,0,0,1);
    }

    36.74% {
        transform: matrix3d(1.097,0,0,0,0,1.098,0,0,0,0,1,0,0,0,0,1);
    }

    41.04% {
        transform: matrix3d(1.096,0,0,0,0,1.102,0,0,0,0,1,0,0,0,0,1);
    }

    44.44% {
        transform: matrix3d(1.097,0,0,0,0,1.103,0,0,0,0,1,0,0,0,0,1);
    }

    52.15% {
        transform: matrix3d(1.099,0,0,0,0,1.101,0,0,0,0,1,0,0,0,0,1);
    }

    59.86%,
    63.26% {
        transform: matrix3d(1.101,0,0,0,0,1.099,0,0,0,0,1,0,0,0,0,1);
    }

    100%,
    75.28%,
    85.49%,
    90.69% {
        transform: matrix3d(1.1,0,0,0,0,1.1,0,0,0,0,1,0,0,0,0,1);
    }
}

@keyframes bounce {
    0% {
        transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);
    }

    3.4% {
        transform: matrix3d(1.032,0,0,0,0,1.041,0,0,0,0,1,0,0,0,0,1);
    }

    4.7% {
        transform: matrix3d(1.045,0,0,0,0,1.06,0,0,0,0,1,0,0,0,0,1);
    }

    6.81% {
        transform: matrix3d(1.066,0,0,0,0,1.089,0,0,0,0,1,0,0,0,0,1);
    }

    9.41% {
        transform: matrix3d(1.088,0,0,0,0,1.117,0,0,0,0,1,0,0,0,0,1);
    }

    10.21% {
        transform: matrix3d(1.094,0,0,0,0,1.123,0,0,0,0,1,0,0,0,0,1);
    }

    13.61% {
        transform: matrix3d(1.112,0,0,0,0,1.133,0,0,0,0,1,0,0,0,0,1);
    }

    14.11% {
        transform: matrix3d(1.114,0,0,0,0,1.133,0,0,0,0,1,0,0,0,0,1);
    }

    17.52% {
        transform: matrix3d(1.121,0,0,0,0,1.124,0,0,0,0,1,0,0,0,0,1);
    }

    18.72% {
        transform: matrix3d(1.121,0,0,0,0,1.119,0,0,0,0,1,0,0,0,0,1);
    }

    21.32% {
        transform: matrix3d(1.12,0,0,0,0,1.107,0,0,0,0,1,0,0,0,0,1);
    }

    24.32% {
        transform: matrix3d(1.115,0,0,0,0,1.096,0,0,0,0,1,0,0,0,0,1);
    }

    25.23% {
        transform: matrix3d(1.113,0,0,0,0,1.094,0,0,0,0,1,0,0,0,0,1);
    }

    29.03% {
        transform: matrix3d(1.106,0,0,0,0,1.09,0,0,0,0,1,0,0,0,0,1);
    }

    29.93% {
        transform: matrix3d(1.105,0,0,0,0,1.09,0,0,0,0,1,0,0,0,0,1);
    }

    35.54% {
        transform: matrix3d(1.098,0,0,0,0,1.096,0,0,0,0,1,0,0,0,0,1);
    }

    36.74% {
        transform: matrix3d(1.097,0,0,0,0,1.098,0,0,0,0,1,0,0,0,0,1);
    }

    41.04% {
        transform: matrix3d(1.096,0,0,0,0,1.102,0,0,0,0,1,0,0,0,0,1);
    }

    44.44% {
        transform: matrix3d(1.097,0,0,0,0,1.103,0,0,0,0,1,0,0,0,0,1);
    }

    52.15% {
        transform: matrix3d(1.099,0,0,0,0,1.101,0,0,0,0,1,0,0,0,0,1);
    }

    59.86%,
    63.26% {
        transform: matrix3d(1.101,0,0,0,0,1.099,0,0,0,0,1,0,0,0,0,1);
    }

    100%,
    75.28%,
    85.49%,
    90.69% {
        transform: matrix3d(1.1,0,0,0,0,1.1,0,0,0,0,1,0,0,0,0,1);
    }
}

.navigation {
    z-index: 15;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    border: 0 solid #fff;
    overflow: hidden;
    background-color: #FAE0E6;
    transition: height 0.3s ease-in-out 0s,border 0.3s ease-in-out 0.3s;
}

@media screen and (min-width:900px) {
    .navigation {
        position: fixed;
    }
}

.navigation--active {
    height: 100vh;
}

@media screen and (min-width:900px) {
    .navigation--active {
        border: 3em solid #fff;
    }
}

.navigation--active .navigation__close {
    transform: translateX(0);
}

.navigation--active .social {
    transform: translateX(0);
}

.body--about .navigation {
    background-color: #DAF8FF;
}

.body--portfolio .navigation,
.body--portfolio-single .navigation {
    background-color: #F8F1C7;
}

.navigation__close {
    display: block;
    position: relative;
    margin-top: 3em;
    margin-left: 3em;
    transition: transform 0.3s ease-in-out 1s;
    transform: translateX(-100px);
}

.navigation__close svg,
.navigation__close img {
    width: 36px;
    height: 36px;
}

.navigation__close:after {
    content: "";
    z-index: -1;
    position: absolute;
    top: 3px;
    left: 3px;
    width: 36px;
    height: 36px;
    background-image: url(../img/menu-close-white.svg);
    transition: all linear 0.3s;
}

.navigation__close:hover:after,
.navigation__close:focus:after,
.navigation__close:active:after {
    top: 0;
    left: 0;
}

.navigation__list {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.285,0.105,0.465,1.015) 0s;
    transform: translateY(-50%);
}

.navigation--active .navigation__list {
    opacity: 1;
    transition: opacity 0.5s cubic-bezier(0.285,0.105,0.465,1.015) 0.75s;
}

.navigation__list-item {
    margin-bottom: 1em;
    overflow: hidden;
    font-family: "Playfair Display",serif;
    font-size: 3.8rem;
    line-height: 1.2;
}

@media screen and (min-width:900px) {
    .navigation__list-item {
        font-size: 6rem;
    }
}

.navigation__list-item a {
    display: inline-block;
    position: relative;
    text-decoration: none;
    color: #2F2F2F;
    transform: translateY(-100%);
}

.navigation__list-item a:hover:after,
.navigation__list-item a:focus:after,
.navigation__list-item a:active:after {
    content: "";
    display: block;
    z-index: -1;
    position: absolute;
    bottom: 3px;
    left: 50%;
    width: 0;
    height: 13px;
    overflow: hidden;
    background-image: url(../img/brushblanc.svg);
    background-repeat: no-repeat;
    -webkit-animation: typing 0.3s steps(40,end);
    animation: typing 0.3s steps(40,end);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    transform: translateX(-50%);
}

.navigation__list-item.current a:after {
    content: "";
    display: block;
    z-index: -1;
    position: absolute;
    bottom: 3px;
    left: 50%;
    width: 100%;
    height: 13px;
    overflow: hidden;
    background-image: url(../img/brushblanc.svg);
    background-repeat: no-repeat;
    transform: translateX(-50%);
}

.navigation--active .navigation__list-item a {
    transform: translateY(0);
    transition-duration: 0.3s;
    transition-delay: 0.3s;
}

.navigation--active .navigation__list-item:nth-of-type(1) a {
    transition-delay: 0.65s;
}

.navigation--active .navigation__list-item:nth-of-type(2) a {
    transition-delay: 0.75s;
}

.navigation--active .navigation__list-item:nth-of-type(3) a {
    transition-delay: 0.8s;
}

.l-2up:after,
.l-4up:after,
.l-5up:after,
.teaser__meta:after {
    content: "";
    display: table;
    clear: both;
    *zoom: 1;
}

.cursor {
    display: none;
}

@media screen and (min-width:900px) {
    .cursor {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        pointer-events: none;
    }
}

.cursor--small {
    z-index: 11000;
    top: -2.5px;
    left: -2.5px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #2F2F2F;
}

.cursor--canvas {
    z-index: 12000;
    width: 100vw;
    height: 100vh;
}

.social {
    position: absolute;
    top: 3em;
    right: 3em;
    transition: transform 0.3s ease-in-out 1s;
    transform: translateX(150px);
}

.social__item {
    display: inline-block;
    margin-right: 1em;
}

.social__item svg,
.social__item img {
    width: 20px;
    height: 20px;
}

.transition-fade {
    opacity: 1;
    transition: 1s;
}

html.is-animating .transition-fade {
    opacity: 0;
}

html.is-animating .transition-fade .hero__flourish {
    right: -100%;
    opacity: 0;
    transition: 1.25s;
}

html.is-animating .transition-fade .header {
    opacity: 0;
    transition: 1s;
    transform: translateX(-100%);
}

.teaser {
    display: block;
    position: relative;
    padding: 2em;
    min-height: 435px;
    border-radius: 30px;
    opacity: 0;
    background-color: #fbf7de;
    transition: all,ease-in-out,0.3s;
    transform: scale(0.8);
    transition-delay: 0s;
}

@media screen and (min-width:900px) {
    .teaser {
        padding: 4em;
    }
}

.teaser.on-screen {
    opacity: 1;
    transform: scale(1);
}

a.teaser .teaser__title {
    text-decoration: none;
}

a.teaser:hover {
    padding: 4.5em;
    box-shadow: 0 10px 50px rgba(38,45,56,0.15);
    transform: translateY(-2px);
    transition-delay: 0s;
}

a.teaser:hover .teaser__flourish svg image {
    opacity: 1;
}

a.teaser:hover .teaser__logo {
    right: -15px;
    bottom: -15px;
    border-radius: 50%;
    transition: all,ease-in-out,0.3s;
}

.teaser__title {
    max-width: 70%;
    font-family: "Playfair Display",serif;
    font-size: 2.8rem;
    line-height: 1.2;
    color: #2F2F2F;
}

.teaser__meta {
    display: block;
    margin-top: 1.5em;
    text-transform: uppercase;
    font-size: 1.2rem;
    letter-spacing: 2px;
    color: #6b6b6b;
}

.teaser__meta li {
    float: left;
    position: relative;
    margin-right: 12px;
    list-style: none;
}

.teaser__meta li:after {
    content: "|";
    position: absolute;
    top: 0;
    right: -8px;
}

.teaser__meta li:last-child:after {
    content: none;
}

.hero .teaser__meta {
    opacity: 0;
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: 0.75s;
    animation-duration: 0.75s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-delay: 1.75s;
    animation-delay: 1.75s;
}

.teaser__flourish {
    position: absolute;
    right: 0;
    bottom: 0;
}

.teaser__flourish svg.teaser__flourish-shape {
    height: 100%;
    max-height: 408px;
    max-width: 90%;
    transform: translateX(11%);
}

.teaser__flourish svg.teaser__flourish-shape path {
    d: path("M485 23.7617C485 23.7617 381.532 -29.7021 302.624 23.7617C223.716 77.2254 308.895 155.672 243.574 193.146C178.253 230.621 48.6564 216.131 12.5992 270.594C-14.5916 311.664 11.397 368.931 25.8222 394.611C30.6419 403.191 39.8719 408 49.7131 408H455C471.569 408 485 394.569 485 378V23.7617Z");
}

.teaser__flourish svg.teaser__flourish-shape image {
    transition: all,ease-in-out,0.3s;
}

.teaser__flourish svg.teaser__flourish-outline {
    z-index: -1;
    position: absolute;
    right: 0;
    bottom: 0;
    width: auto;
    height: 100%;
    max-height: 420px;
}

.teaser__flourish svg.teaser__flourish-outline path {
    d: path("M317.704 24.8743C358.129 -2.53882 404.868 -2.55433 441.554 4.31342C459.892 7.74634 475.701 12.8962 486.925 17.1881C492.537 19.3338 497.001 21.2646 500.062 22.6582C501.592 23.355 502.77 23.9175 503.566 24.3053C503.964 24.4992 504.266 24.6495 504.468 24.7511L504.5 24.7674V390C504.5 406.292 491.292 419.5 475 419.5H33.366C33.3574 419.488 33.3485 419.475 33.3392 419.461C33.2239 419.293 33.0532 419.042 32.8321 418.712C32.3899 418.052 31.7466 417.076 30.9437 415.816C29.3378 413.295 27.0939 409.636 24.5445 405.087C19.4447 395.988 13.1268 383.336 8.24691 369.119C-1.52535 340.649 -5.47151 306.09 17.369 281.113C18.7475 279.606 20.064 277.995 21.2782 276.356C31.0321 263.187 46.4479 254.137 65.1887 247.389C83.927 240.642 105.933 236.217 128.813 232.258C135.002 231.188 141.255 230.151 147.525 229.112C164.415 226.312 181.417 223.494 197.571 219.94C219.723 215.066 240.331 208.797 256.939 199.261C273.866 189.542 281.074 177.133 283.602 163.136C285.869 150.586 284.369 136.759 282.825 122.521C282.654 120.94 282.481 119.354 282.314 117.764C280.634 101.817 279.404 85.4419 283.627 69.6279C287.843 53.8392 297.508 38.5707 317.704 24.8743Z");
}

.teaser__logo {
    z-index: 10;
    position: absolute;
    right: -20px;
    bottom: -20px;
    width: 150px;
    height: 150px;
    border-radius: 60px;
    background-color: #fff;
    background-position: center;
    background-size: 65%;
    box-shadow: 0 8px 40px rgba(0,0,0,0.1);
    transition: all,ease-in-out,0.3s;
}

.teaser__logo--round {
    background-size: 50%;
}