@property --rotate
{
    syntax: "<angle>";
    inherits: false;
    initial-value: 0turn;
}

@property --left
{
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 0;
}

@property --top
{
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 0;
}

@property --t
{
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

@property --delay
{
    syntax: "<angle>";
    inherits: true;
    initial-value: 0turn;
}

@property --floatAmount
{
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

@keyframes Smooch
{
    from
    {
        mask-size: 0% 0%;
        mask-position: 30% 35%;
    }

    to
    {
        mask-size: 100% 100%;
        mask-position: 50% 50%;
    }
}

@keyframes ItemFloat
{
    from 
    {
        scale: 1;
    }

    to 
    {
        scale: 1.01;
    }
}

@keyframes ItemFloatHover
{
    from 
    {
        scale: 1;
    }

    to 
    {
        scale: 1.02;
    }
}

@keyframes ShadowFloat
{
    from 
    {
        scale: 1;
        left: 0.75%;
        top: 0.5%;
        opacity: 1;
    }

    to 
    {
        scale: 1.02;
        left: 2%;
        top: 1.5%;
        opacity: 0.85;
    }
}

@keyframes ShadowFloatLow
{
    from 
    {
        scale: 1;
        left: 0.0%;
        top: 0.0%;
        opacity: 1;
    }

    to 
    {
        scale: 1.005;
        left: 0.2%;
        top: 0.6%;
        opacity: 0.75;
    }
}

@keyframes ShadowFloatHover
{
    from 
    {
        scale: 1;
        left: 0.75%;
        top: 0.5%;
        opacity: 0.75;
    }

    to 
    {
        scale: 1.02;
        left: 2%;
        top: 1.5%;
        opacity: 0.6;
    }
}

@keyframes HatPop
{   
    0%
    {
        scale: 2;
        transform: scale(0.9) translate(0rem, 0rem) rotate(21deg);
        animation-timing-function: ease-out;
    }
    
    60%
    {
        scale: 2.25;
        transform: scale(0.9) translate(0rem, 0rem) rotate(21deg);
        animation-timing-function: unset;
    }

    75%
    {
        scale: 1;
    }

    100%
    {
        transform: scale(1.0) translate(10rem, -20rem) rotate(-15deg);
    }
}

@keyframes HatPopMobile
{   
    0%
    {
        scale: 1.5;
        transform: scale(0.9) translate(-12rem, 0rem) rotate(-17deg);
        animation-timing-function: ease-out;
    }
    
    60%
    {
        scale: 1.75;
        transform: scale(0.9) translate(-12rem, 0rem) rotate(-17deg);
        animation-timing-function: unset;
    }

    75%
    {
        scale: 1;
    }

    100%
    {
        transform: scale(0.75) translate3d(-11rem, -25rem, 50px) rotate(-36deg);
    }
}

@keyframes HatLanding
{
    from
    {
        transform: scale(1.0) translate(10rem, -20rem) rotate(-15deg);
    }

    to
    {
        transform: scale(1) translate(-44rem, -26rem) rotate(-15deg);
    }
}

@keyframes HeartFloat1
{
    0%
    {
        opacity: 1;
        transform: scale(1) translate(-6rem, -1rem) rotate(-19deg);
        animation-timing-function: ease-out;
    }


    35%
    {
        transform: scale(2.2) translate(-6rem, -1rem) rotate(-19deg);
        animation-timing-function: cubic-bezier(0, 0, 0, 1);
    }

    45%
    {
        opacity: 1;
    }

    100%
    {
        transform: scale(2.5) translate(15rem, -6rem) rotate(15deg);
        opacity: 0;
    }
}

@keyframes HeartFloat1Mobile
{
    0%
    {
        opacity: 1;
        transform: scale(1) translate(-6rem, -1rem) rotate(-19deg);
        animation-timing-function: ease-out;
    }


    35%
    {
        transform: scale(2.2) translate(-6rem, -1rem) rotate(-19deg);
        animation-timing-function: cubic-bezier(0, 0, 0, 1);
    }

    45%
    {
        opacity: 1;
    }

    100%
    {
        transform: scale(2.5) translate(15rem, -15rem) rotate(15deg);
        opacity: 0;
    }
}

@keyframes HeartFloat2
{
    from
    {
        transform: scale(0.5) rotate(-45deg) translate(-2rem, 24rem) rotate(71deg);
        opacity: 0;
    }

    to
    { 
        opacity: 1;    
        transform: scale(1.0) rotate(0) translate(29rem, -13rem) rotate(5deg);
    }
}

@keyframes HeartFloat2Mobile
{
    from
    {
        transform: scale(0.5) rotate(-45deg) translate(0, 0) rotate(71deg);
        opacity: 0;
    }

    to
    { 
        opacity: 1;    
        transform: scale(1.0) rotate(0) translate3d(15rem, -23rem, 100px) rotate(5deg);
    }
}

@keyframes HeartLand2
{
    from
    {
        transform: translate(29rem, -13rem) rotate(5deg);
    }

    to
    { 
        transform: translate(-25rem, -19rem) rotate(5deg);
    }
}

@keyframes HeartFloat3
{
    0%
    {
        opacity: 1;
        transform: scale(1) rotate(25deg) translate(1rem, 9rem) rotate(-199deg);
        animation-timing-function: ease-out;
    }

    35%
    {
        transform: scale(2.2) rotate(25deg) translate(1rem, 9rem) rotate(-199deg);
        animation-timing-function: cubic-bezier(0, 0, 0, 1);
    }

    45%
    {
        opacity: 1;
    }

    100%
    {
        transform: scale(3.0) rotate(16deg) translate(14rem, -7rem) rotate(-49deg);
        opacity: 0;
    }
}

@keyframes HeartFloat3Mobile
{
    0%
    {
        opacity: 1;
        transform: scale(1) rotate(25deg) translate(1rem, 9rem) rotate(-199deg);
        animation-timing-function: ease-out;
    }

    35%
    {
        transform: scale(2.2) rotate(25deg) translate(1rem, 9rem) rotate(-199deg);
        animation-timing-function: cubic-bezier(0, 0, 0, 1);
    }

    45%
    {
        opacity: 1;
    }

    100%
    {
        transform: scale(3.0) rotate(16deg) translate(14rem, -20rem) rotate(-49deg);
        opacity: 0;
    }
}

@keyframes HeartFloat4
{
    from
    {
        transform: scale(0.65) rotate(38deg) translate(0, 0) rotate(-229deg);
        opacity: 0;
    }

    to
    {
        opacity: 1;
        transform: scale(0.75) rotate(-12deg) translate(27rem, 0rem) rotate(-25deg);
    }
}

@keyframes HeartFloat4Mobile
{
    from
    {
        transform: scale(0.65) rotate(38deg) translate(-2rem, 14rem) rotate(-229deg);
        opacity: 0;
    }

    to
    {
        opacity: 1;
        transform: scale(0.75) rotate(-12deg) translate3d(17rem, -19rem, 100px) rotate(-25deg);
    }
}

@keyframes HeartLand4
{
    from
    {
        transform: scale(0.75) rotate(-12deg) translate(27rem, 0rem) rotate(-25deg);
    }

    to
    { 
        transform: scale(0.75) rotate(-12deg) translate(-42rem, -22rem) rotate(-25deg);
    }
}

@keyframes HeartFloat5
{
    0%
    {
        opacity: 1;
        transform: scale(1) rotate(0deg) translate(-8rem, 10rem) rotate(-19deg);
        animation-timing-function: ease-out;
    }

    35%
    {
        transform: scale(2.2) rotate(0deg) translate(-8rem, 10rem) rotate(-19deg);
        animation-timing-function: cubic-bezier(0, 0, 0, 1);
    }

    45%
    {
        opacity: 1;
    }

    100%
    {
        transform: scale(2.75) rotate(5deg) translate(7rem, -7rem) rotate(-15deg);
        opacity: 0;
    }
}

@keyframes HeartFloat5Mobile
{
    0%
    {
        opacity: 1;
        transform: scale(1) rotate(0deg) translate(-8rem, 10rem) rotate(-19deg);
        animation-timing-function: ease-out;
    }

    35%
    {
        transform: scale(2.2) rotate(0deg) translate(-8rem, 10rem) rotate(-19deg);
        animation-timing-function: cubic-bezier(0, 0, 0, 1);
    }

    45%
    {
        opacity: 1;
    }

    100%
    {
        transform: scale(2.75) rotate(5deg) translate(7rem, -20rem) rotate(-15deg);
        opacity: 0;
    }
}

@keyframes HeartExplode
{
    from
    {
        transform: translate(0rem);
        opacity: 1;
    }

    to
    {
        opacity: 0;
        transform: translate(20rem);
    }
}

@keyframes Examn-Shine
{
    from
    {
        box-shadow: 0px 0px 80px 40px #FFFFFFFF;
    }

    to
    {
        box-shadow: 0px 0px 80px 0px #FFFFFF00;
    }
}

@keyframes Examn-Flash
{
    from
    {
        opacity: 1;
    }

    to
    {
        opacity: 0;
    }
}

@keyframes Examn-Flash2
{
    from
    {
        opacity: 1;
    }

    to
    {
        opacity: 0;
    }
}

@keyframes Examn-Pop
{
    0%
    {
        scale: 1;
    }

    5%
    {
        scale: 1.25;
    }

    20%
    {
        scale: 1.25;
    }

    100%
    {
        scale: 1;
    }
}

@keyframes Examn-Land
{
    0%
    {
        transform: translate3d(0, 0, calc(32px + var(--t) * 5px)) scale3d(1, 1, 1) translateX(-50%) rotate3d(0.5, -1, 1, 5deg) rotate(0deg);
        animation-timing-function: cubic-bezier(0.5, 0, 0.0, 1);
    }

    45%
    {
        transform: translate3d(45rem, 0, calc(274px + var(--t) * 5px)) scale3d(1, 1, 1) translateX(-50%) rotate3d(0.25, -1, 0.25, 34deg) rotate(0deg);
    }

    50%
    {
        transform: translate3d(45rem, 0, calc(274px + var(--t) * 5px)) scale3d(1, 1, 1) translateX(-50%) rotate3d(0.25, -1, 0.25, 34deg) rotate(0deg);
        animation-timing-function: ease-in-out;
    }

    100%
    {
        transform: translate3d(12.75rem, -25rem, 1px) scale3d(0.25, 0.25, 0.25) translateX(-50%) rotate3d(0.25, -1, 0.25, 0deg) rotate(6deg);
        z-index: 2;
    }
}

@keyframes Examn-Land-Mobile
{
    0%
    {
        transform: translate3d(0, 0, calc(32px + var(--t) * 5px)) scale3d(1, 1, 1) translateX(-50%) rotate3d(0.5, -1, 1, 5deg) rotate(0deg);
        animation-timing-function: cubic-bezier(0.5, 0, 0.0, 1);
    }

    45%
    {
        transform: translate3d(45rem, 0, calc(274px + var(--t) * 5px)) scale3d(1, 1, 1) translateX(-50%) rotate3d(0.25, -1, 0.25, 34deg) rotate(0deg);
    }

    50%
    {
        transform: translate3d(45rem, 0, calc(274px + var(--t) * 5px)) scale3d(1, 1, 1) translateX(-50%) rotate3d(0.25, -1, 0.25, 34deg) rotate(0deg);
        animation-timing-function: ease-in-out;
    }

    100%
    {
        transform: translate3d(-26.25rem, -10rem, 1px) scale3d(0.25, 0.25, 0.25) translateX(-50%) rotate3d(0.25, -1, 0.25, 0deg) rotate(1deg);
        z-index: 2;
    }
}

@keyframes Examn-Swipe-Away
{
    from
    {
        transform: translate3d(12.75rem, -25rem, 1px) scale3d(0.25, 0.25, 0.25) translateX(-50%) rotate3d(0.25, -1, 0.25, 0deg) rotate(6deg);
        z-index: 2;
    }

    to
    {
        transform: translate3d(100vw, -2rem, 1px) scale3d(0.25, 0.25, 0.25) translateX(0%) rotate3d(0.25, -1, 0.25, -4deg) rotate(76deg);
        z-index: 2;
    }
}

@keyframes Certificate-Land
{
    0%
    {
        transform: translate3d(-100vw, -7rem, 300px) scale3d(1, 1, 1) translateX(-50%) rotate3d(0.5, -1, 1, -45deg) rotate(0deg);
        animation-timing-function: cubic-bezier(0, 0.5, 0.0, 1);
    }

    45%
    {
        transform: translate3d(-5vw, -7rem, 32px) scale3d(1, 1, 1) translateX(-50%) rotate3d(0.5, -1, 1, -4deg) rotate(0deg);
    }

    50%
    {
        transform: translate3d(-5vw, -7rem, 32px) scale3d(1, 1, 1) translateX(-50%) rotate3d(0.5, -1, 1, -4deg) rotate(0deg);
        z-index: 2;
        animation-timing-function: ease-in-out;
    }

    100%
    {
        transform: translate3d(15rem, -31.5rem, 2px) scale3d(0.25, 0.25, 0.25) translateX(-50%) rotate3d(0.25, -1, 0.25, 0deg) rotate(21deg);
        z-index: 2;
    }
}

@keyframes Certificate-Land-Mobile
{
    0%
    {
        transform: translate3d(-100vw, -7rem, 300px) scale3d(1, 1, 1) translateX(-110%) rotate3d(0.5, -1, 1, -45deg) rotate(0deg);
        animation-timing-function: cubic-bezier(0, 0.5, 0.0, 1);
    }

    45%
    {
        transform: translate3d(-5vw, -7rem, 32px) scale3d(1, 1, 1) translateX(-50%) rotate3d(0.5, -1, 1, -4deg) rotate(0deg);
    }

    50%
    {
        transform: translate3d(-5vw, -7rem, 32px) scale3d(1, 1, 1) translateX(-50%) rotate3d(0.5, -1, 1, -4deg) rotate(0deg);
        z-index: 2;
        animation-timing-function: ease-in-out;
    }

    100%
    {
        transform: translate3d(-23rem, -16.5rem, 2px) scale3d(0.25, 0.25, 0.25) translateX(-50%) rotate3d(0.25, -1, 0.25, 0deg) rotate(12deg);
        z-index: 2;
    }
}

@keyframes Certificate-Swipe-Away
{
    from
    {
        transform: translate3d(15rem, -31.5rem, 2px) scale3d(0.25, 0.25, 0.25) translateX(-50%) rotate3d(0.25, -1, 0.25, 0deg) rotate(21deg);
        z-index: 2;
    }

    to
    {
        transform: translate3d(100vw, -21.5rem, 2px) scale3d(0.25, 0.25, 0.25) translateX(0%) rotate3d(0.25, -1, 0.25, -10deg) rotate(61deg);
        z-index: 2;
    }
}

@keyframes Examn-Header-Swoosh
{
    from
    {
        mask-position: 180% 0%;
    }

    to
    {
        mask-position: 35% 0%;
    }
}

@keyframes Examn-Header-Float
{
    from
    {
        transform: translate3d(-28rem, -16rem, -400px) rotate3d(-0.5, -0.5, -0.2, 0deg);
    }

    to
    {
        transform: translate3d(-28rem, -16rem, -110px) rotate3d(-0.5, -0.5, -0.2, 22deg);
    }
}

@keyframes Examn-Header-Float-Mobile
{
    from
    {
        transform: translate3d(-35rem, -18.5rem, -400px) rotate3d(-0.5, -0.5, -0.2, 0deg);
    }

    to
    {
        transform: translate3d(-35rem, -18.5rem, -160px) rotate3d(-0.5, -0.5, -0.2, 44deg);
    }
}

@keyframes Examn-Header-Float-Inverse
{
    from
    {
        transform: translate3d(-28rem, -16rem, -110px) rotate3d(-0.5, -0.5, -0.2, 22deg);
    }

    to
    {
        transform: translate3d(-30rem, -19.5rem, -110px) rotate3d(-0.5, -0.5, -0.2, 4deg);
        z-index: -1;
    }
}

@keyframes Examn-Header-Float-Inverse-Mobile
{
    from
    {
        transform: translate3d(-35rem, -18.5rem, -160px) rotate3d(-0.5, -0.5, -0.2, 44deg);
    }

    to
    {
        transform: translate3d(-34.5rem, -17.5rem, -110px) rotate3d(-0.5, -0.5, -0.2, 44deg);
        z-index: -1;
    }
}

@keyframes Examn-Header-Sub-Swoosh
{
    from
    {
        mask-position: 142% 0%;
    }

    to
    {
        mask-position: 58% 0%;
    }
}

@keyframes Examn-Header-Sub-Swoosh-Inverse
{
    from
    {
        mask-position: 58% 0%;
    }

    to
    {
        mask-position: 142% 0%;
    }
}

@keyframes Examn-Header-Sub-Float
{
    from
    {
        transform: translate3d(-34rem, 27rem, -400px) rotate3d(0.5, 0.5, 0.5, 0deg);
    }

    to
    {
        transform: translate3d(-34rem, 27rem, -110px) rotate3d(0.5, 0.5, 0.5, 20deg);
    }
}

@keyframes Lock-Drop
{
    from
    {
        transform: translate3d(2rem, 38.5rem, 300px) rotate3d(0.5, 0.5, 1, -3deg);
        visibility: visible;
    }

    to
    {
        visibility: visible;
        transform: translate3d(2rem, 38.5rem, -60px) rotate3d(0.5, 0.5, 1, 29deg);
    }
}

@keyframes Lock-Pop
{
    0%
    {
        transform: translate3d(2rem, 38.5rem, -60px) rotate3d(0.5, 0.5, 1, 29deg) scale(1);
    }

    1%
    {
        transform: translate3d(2rem, 38.5rem, -60px) rotate3d(0.5, 0.5, 1, 29deg) scale(1.15);
    }

    10%
    {
        transform: translate3d(2rem, 38.5rem, -60px) rotate3d(0.5, 0.5, 1, 29deg) scale(1);
    }
}

@keyframes LockShadowBlendIn
{
    from 
    {
        left: 1rem;
        top: 1rem;
        opacity: 0;
    }

    to 
    {
        left: 0.5rem;
        top: 0.5rem;
        opacity: 1;
    }
}

@keyframes LockFlash
{
    0% 
    {
        filter: brightness(1.5);
    }

    10% 
    {
        filter: brightness(1);
    }
}

@keyframes Improve-Booking
{
    from 
    {
        opacity: 0;
    }

    to 
    {
        opacity: 1;
    }
}

@keyframes LoadingPulse
{
    from 
    {
        opacity: 1;
    }

    to 
    {
        opacity: 0.5;
    }
}

@keyframes Introduce-Optin
{
    0% 
    {
        visibility: hidden;
    }

    100% 
    {
        visibility: hidden;
    }
}

@keyframes ScanDigital
{
    0% 
    {
        transform: translateY(15rem);
        opacity: 0.01;
    }

    1% 
    {
        transform: translateY(15rem);
        opacity: 1;
    }

    100% 
    {
        transform: translateY(0);
        opacity: 0.01;
    }
}

@keyframes ScanlineProcess
{
    0% 
    {
        bottom: 100%;
    }

    100% 
    {
        bottom: -15rem;
    }
}

@keyframes VisibilityProgress 
{
    0%   
    { 
        --floatAmount: 0; 
        animation-timing-function: cubic-bezier(0.75, 0, 0.75, 1);
    }
    
    50%  
    { 
        --floatAmount: 1; 
        animation-timing-function: cubic-bezier(0.25, 0, 0.25, 1);
    }
    
    100% 
    { 
        --floatAmount: 0; 
    }
}

@keyframes TestHover
{
    0%   
    { 
        transform: translate3d(0, 0, 2px);
    }
    
    100%
    { 
        transform: translate3d(0, 0, 10px);
    }
}

@keyframes Blink 
{
    0%, 49.99%
    {
        opacity: 1;
    }

    50%, 100% 
    {
        opacity: 0;
    }
}

@keyframes StopMotionCigarette 
{
    0%   { opacity: 0; }
    30% { opacity: 1; }
    60% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes OptinShadowHighlight
{
    0% 
    {
        filter: drop-shadow(0px 0px var(--shadowRadiusMedium) var(--primaryShadow))
    }

    100% 
    {
        filter: drop-shadow(0px 0px 16px #8800ff)
    }
}

@keyframes Scribbles1 
{
    0%        { opacity: 1; }
    22%       { opacity: 1; }
    22.0001%  { opacity: 0; }
    25%       { opacity: 0; }  
    25.0001%  { opacity: 1; }
    28%       { opacity: 1; }
    28.0001%  { opacity: 0; }
    34%       { opacity: 0; }  
    34.0001%  { opacity: 1; }
    69%       { opacity: 1; }
    69.0001%  { opacity: 0; }
    72%       { opacity: 0; }
    72.0001%  { opacity: 1; } 
    79%       { opacity: 1; }
    79.0001%  { opacity: 0; }  
    81%       { opacity: 0; }
    81.0001%  { opacity: 1; }
    100%      { opacity: 1; }
}

@keyframes Scribbles2
{
    0%        { opacity: 0; }
    22%       { opacity: 0; }
    22.0001%  { opacity: 1; }
    25%       { opacity: 1; }
    25.0001%  { opacity: 0; }
    28%       { opacity: 0; }
    28.0001%  { opacity: 1; }
    34%       { opacity: 1; }
    34.0001%  { opacity: 0; }
    69%       { opacity: 0; }
    69.0001%  { opacity: 1; }
    72%       { opacity: 1; }
    72.0001%  { opacity: 0; }
    100%      { opacity: 0; }
}

@keyframes Scribbles3
{
    0%        { opacity: 0; }
    79%       { opacity: 0; }
    79.0001%  { opacity: 1; }
    81%       { opacity: 1; }
    81.0001%  { opacity: 0; }
    100%      { opacity: 0; }
}

@keyframes Feather1 
{
    0%        { opacity: 1; }
    1.5%       { opacity: 1; }
    1.50001%  { opacity: 0; }
    3.5%       { opacity: 0; }
    3.50001%  { opacity: 1; }
    5%       { opacity: 1; }
    5.0001%  { opacity: 0; }
    16%       { opacity: 0; }
    16.0001%  { opacity: 1; }
    18%       { opacity: 1; }
    18.0001%  { opacity: 0; }
    40%       { opacity: 0; }
    40.0001%  { opacity: 1; }
    42%       { opacity: 1; }
    42.0001%  { opacity: 0; }
    59%       { opacity: 0; }
    59.0001%  { opacity: 1; }
    60%       { opacity: 1; }
    60.0001%  { opacity: 0; }
    63%       { opacity: 0; }  
    63.0001%  { opacity: 1; }
    65%       { opacity: 1; }
    65.0001%  { opacity: 0; }
    65%       { opacity: 0; }  
    65.0001%  { opacity: 1; }  
    68%       { opacity: 1; }  
    68.0001%  { opacity: 0; } 
    91%       { opacity: 0; }
    91.0001%  { opacity: 1; }
    95%       { opacity: 1; }
    95.0001%  { opacity: 0; }
    97%       { opacity: 0; }
    97.0001%  { opacity: 1; }
    98%       { opacity: 1; }
    98.0001%  { opacity: 0; }
    99.5%       { opacity: 0; }
    99.50001%  { opacity: 1; }
    100%      { opacity: 1; }
}

@keyframes Feather2
{
    0%        { opacity: 0; }
    5%       { opacity: 0; }
    5.0001%  { opacity: 1; }
    7.5%       { opacity: 1; }
    7.50001%  { opacity: 0; }
    9%       { opacity: 0; }
    9.0001%  { opacity: 1; }
    10%       { opacity: 1; }
    10.0001%  { opacity: 0; }
    22%       { opacity: 0; }
    22.0001%  { opacity: 1; }
    25%       { opacity: 1; }
    25.0001%  { opacity: 0; }
    26.5%     { opacity: 0; }
    26.50001% { opacity: 1; }
    28%       { opacity: 1; }
    28.0001%  { opacity: 0; }
    31%       { opacity: 0; }
    31.0001%  { opacity: 1; }
    34%       { opacity: 1; }
    34.0001%  { opacity: 0; }
    47%       { opacity: 0; }
    47.0001%  { opacity: 1; }
    51%       { opacity: 1; }
    51.0001%  { opacity: 0; }
    72%       { opacity: 0; }
    72.0001%  { opacity: 1; }
    73%       { opacity: 1; }
    73.0001%  { opacity: 0; }
    79%       { opacity: 0; }
    79.0001%  { opacity: 1; }
    81%       { opacity: 1; }
    81.0001%  { opacity: 0; }
    89%       { opacity: 0; }
    89.0001%  { opacity: 1; }
    91%       { opacity: 1; }
    91.0001%  { opacity: 0; }
    100%      { opacity: 0; }
}

@keyframes Feather3
{
    0%        { opacity: 0; }
    10%       { opacity: 0; }
    10.0001%  { opacity: 1; }
    13%       { opacity: 1; }
    13.0001%  { opacity: 0; }
    20%       { opacity: 0; }
    20.0001%  { opacity: 1; }
    22%       { opacity: 1; }
    22.0001%  { opacity: 0; }
    45%       { opacity: 0; }
    45.0001%  { opacity: 1; }
    47%       { opacity: 1; }
    47.0001%  { opacity: 0; }
    51%       { opacity: 0; }
    51.0001%  { opacity: 1; }
    54%       { opacity: 1; }
    54.0001%  { opacity: 0; }
    68%       { opacity: 0; }
    68.0001%  { opacity: 1; }
    72%       { opacity: 1; }
    72.0001%  { opacity: 0; }
    85%       { opacity: 0; }
    85.0001%  { opacity: 1; }
    89%       { opacity: 1; }
    89.0001%  { opacity: 0; }
    95%       { opacity: 0; }
    95.0001%  { opacity: 1; }
    97%       { opacity: 1; }
    97.0001%  { opacity: 0; }
    100%      { opacity: 0; }
}

@keyframes Feather4
{
    0%        { opacity: 0; }
    1.5%       { opacity: 0; }
    1.50001%  { opacity: 1; }
    3.5%       { opacity: 1; }
    3.5001%  { opacity: 0; }
    18%       { opacity: 0; }
    18.0001%  { opacity: 1; }
    20%       { opacity: 1; }
    20.0001%  { opacity: 0; }
    25%       { opacity: 0; }
    25.0001%  { opacity: 1; }
    26.5%       { opacity: 1; }
    26.5001%  { opacity: 0; }
    34%       { opacity: 0; }
    34.0001%  { opacity: 1; }
    37%       { opacity: 1; }
    37.0001%  { opacity: 0; }
    42%       { opacity: 0; }
    42.0001%  { opacity: 1; }
    45%       { opacity: 1; }
    45.0001%  { opacity: 0; }
    54%       { opacity: 0; }
    54.0001%  { opacity: 1; }
    56%       { opacity: 1; }
    56.0001%  { opacity: 0; }
    60%       { opacity: 0; }
    60.0001%  { opacity: 1; }
    63%       { opacity: 1; }
    63.0001%  { opacity: 0; }
    73%       { opacity: 0; }
    73.0001%  { opacity: 1; }
    76%       { opacity: 1; }
    76.0001%  { opacity: 0; }
    100%      { opacity: 0; }
}

@keyframes Feather5
{
    0%        { opacity: 0; }
    7.5%      { opacity: 0; }
    7.50001%  { opacity: 1; }
    9%        { opacity: 1; }
    9.0001%   { opacity: 0; }
    13%       { opacity: 0; }
    13.0001%  { opacity: 1; }
    16%       { opacity: 1; }
    16.0001%  { opacity: 0; }
    28%       { opacity: 0; }
    28.0001%  { opacity: 1; }
    31%       { opacity: 1; }
    31.0001%  { opacity: 0; }
    37%       { opacity: 0; }
    37.0001%  { opacity: 1; }
    40%       { opacity: 1; }
    40.0001%  { opacity: 0; }
    56%       { opacity: 0; }
    56.0001%  { opacity: 1; }
    59%       { opacity: 1; }
    59.0001%  { opacity: 0; }
    76%       { opacity: 0; }
    76.0001%  { opacity: 1; }
    79%       { opacity: 1; }
    79.0001%  { opacity: 0; } 
    81%       { opacity: 0; }
    81.0001%  { opacity: 1; }
    85%       { opacity: 1; }
    85.0001%  { opacity: 0; }
    98%       { opacity: 0; }
    98.0001%  { opacity: 1; }
    99.5%       { opacity: 1; }
    99.50001%  { opacity: 0; }
    100%      { opacity: 0; }
}

@keyframes Spill
{
    0% { transform: scale(0.2); }
    100% { transform: scale(1); }
}

div.rootContainer
{
    inset: 0;
    overflow: clip;
}

div#header
{
    width: 100%;
    height: 100svh;
    position: relative;
    overflow-y: visible;
    margin-bottom: 10vh;
}

div#header img.positionable,
div#header svg.positionable
{
    position: absolute;
}

div#header svg#feather
{
    left: calc(-89vh + 62vw);
    bottom: 5%;
    height: 23%;
    width: auto;
}

.withinViewport .stopmotion#feather .frame.one { animation: Feather1 15.7s steps(1, end) infinite; }
.withinViewport .stopmotion#feather .frame.two { animation: Feather2 15.7s steps(1, end) infinite; }
.withinViewport .stopmotion#feather .frame.three { animation: Feather3 15.7s steps(1, end) infinite; }
.withinViewport .stopmotion#feather .frame.four { animation: Feather4 15.7s steps(1, end) infinite; }
.withinViewport .stopmotion#feather .frame.five { animation: Feather5 15.7s steps(1, end) infinite; }

div#header img#paper
{    
    left: calc(-87vh + 60vw);
    translate: -51%;
    height: 69%;
    bottom: 30%;
    rotate: 8deg;
}

div#header img#phone
{    
    top: 0;    
    right: calc(-36vh + 25vw);
    translate: -76% -30%;
    height: 47%;
}

div#header img#leak
{
    mix-blend-mode: color-burn;
    right: calc(-14vh + 15vw);
    top: calc(-5vh + 10vw);
    height: 23%;
    animation: Spill 30s cubic-bezier(0, 0, 0.25, 1) 1;
}

div#header img#parfume
{
    right: calc(-25vh + 15vw);
    top: calc(-20vh + 10vw);
    height: 45%;
    translate: 45% -30%;
}

div#header svg#scribbles
{
    top: 0;    
    right: calc(-36vh + 25vw);
    translate: -150% -31%;
    height: 36%;
    width: auto;
}

.withinViewport .stopmotion#scribbles .frame.one { animation: Scribbles1 7.5s steps(1, end) infinite; }
.withinViewport .stopmotion#scribbles .frame.two { animation: Scribbles2 7.5s steps(1, end) infinite; }
.withinViewport .stopmotion#scribbles .frame.three { animation: Scribbles3 7.5s steps(1, end) infinite; }

div#header img#deco
{
    bottom: 39%;
    transform: translate(31%, 35%);
    height: 32.5rem;
    right: calc(-11vh + 9vw);
}

div#header img.heart
{
    right: calc(25% - 15vh + 12rem);
    bottom: calc(30% - 10vw);
    height: 55%;
}

div#header img#garbage
{
    right: calc(14% + 27rem);
    bottom: 5%;
    height: 10vh;
}

div#header img#band
{
    height: 15%;
    left: calc(-59vh + 63vw);
    bottom: 50%;
    translate: -50% 0;
}

div#header img#lips
{
    right: calc(-11vh + 9vw);
    height: 15rem;
    bottom: 39%;
    transform: translate(28%, 44%);
    mask-image: url(../images/header/header_smoochMask.svg?v=3);
    mask-repeat: no-repeat;
    mask-size: 0 0;
    animation-name: Smooch;
    animation-delay: 1.25s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-duration: 6s;
    animation-timing-function: cubic-bezier(0, 1, 0, 1);
}

div#header .title
{
    font-family: 'mrdodo';
    text-transform: uppercase;
    font-weight: 100;
    position: absolute;
    right: calc(-11vh + 9vw);
    margin: 0;
    line-height: 0.89;
}

div#header h1.title
{
    transform: translate(-35.5%, -10%);
    color: var(--white200);
    bottom: 39%;
    font-size: 12rem;
}

div#header p.title
{
    transform: translate(-35%, 113%);
    color: var(--accentGreen);
    bottom: 39%;
}

div#header .title span
{
    letter-spacing: -0.08em;
}

div#header h1.title span.first
{
    margin-right: -0.93rem;
}

div#header h1.title span.second
{    
    position: relative;
    top: 1.7rem;
}

div#header p.title span.first
{
    font-size: 10rem;
}

div#header p.title span.second
{
    font-size: 6.32rem;
}

div#header p.subtitle
{
    position: absolute;
    right: calc(-11vh + 9vw);
    bottom: 39%;
    transform: translate(-28%, 380%) rotate(-6deg);
    font-size: 2rem;
    margin: 0;
    width: 21rem;
    text-align: center;
    background-image: url(../images/worktogether/worktogether_frame_wide.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 0.65rem 2rem 1rem 2rem;
}

div#header p.subtitle strong
{
    font-size: inherit;
}

div#header picture
{
    position: absolute;
    right: calc(-36vh + 25vw);
    transform: translate(-261%, -10%) skew(-7.4deg, 3.4deg);
    width: 14vh;
}

div#header picture img
{
    width: 100%;
    height: auto;
}

div#header .arrow
{
    right: calc(-11vh + 9vw);
    bottom: calc(39%);
    height: 4rem;
    transform: translate(-18.5rem, 29rem);
}

div#topbar-gradient 
{
    width: 100%;
    height: 10%;
    display: none;
    background-image: linear-gradient(to bottom, var(--white200), #F5F3E600);
    position: absolute;
}

section#cards
{
    width: 100%;
    position: relative;
    overflow-y: visible;

    --cardSwitchDuration: 0.75s;
    --cardHoverDuration: 0.75s;
    --authenticDelay: 1.05s;
    --qualitativeDelay: 0.0s;
    --funDelay: 1.64s;
    --kpiDelay: 1.34s;
    --inclusiveDelay: 0.69s;
    --holisticDelay: 0.29s;
}

section#cards .interactiveShadow.weak
{
    filter: drop-shadow(0px 0px 4px var(--primaryShadowWeak));
}

section#cards h2.section
{
    margin-left: 20%;
}

div.cards.container
{
    width: 100%;
    height: 60rem;
    overflow-y: visible;
    position: relative;
    margin-top: -50px;
}

div.card
{
    height: 440px;
    aspect-ratio: 0.666666;
    position: absolute;
    width: auto;
    transform: translateX(-50%);
}

div.card input.cardSwitch
{
    position: absolute;
    width: 100%;
    height: 100%;
    appearance: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    z-index: 1;
    cursor: pointer;
}

section#cards input.picker
{
    height: 440px;
    aspect-ratio: 0.666666;
    position: absolute;
    width: auto;
    transform: translateX(-50%);
    display: none;
    appearance: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    z-index: 1;
}

.withinViewport div.card div.scaling
{
    transition-property: transform;
    transition-duration: var(--cardHoverDuration);
    transition-timing-function: cubic-bezier(0.15, 0.15, 0, 1);
}

div.card#authenticity
{
    top: 5.6rem;
    left: calc(47% + 31.75rem);
    rotate: -0.5deg;
}

div.card#qualitative
{
    left: calc(47% - 26.5rem);
    top: 8rem;
    rotate: 6deg;
}

div.card#fun
{
    left: 47%;
    rotate: -3deg;
}

div.card#kpi
{
    top: 29.35rem;
    left: calc(47% - 13rem);
    rotate: -9deg;
}

div.card#inclusive
{
    top: 30.65rem;
    left: calc(47% + 25.4rem);
    rotate: 8.69deg;
}

div.card#holistic
{
    top: 20rem;
    left: calc(47% + 9.25rem);
    rotate: 3deg;
}

div.card div.shadow img.shadow
{
    position: relative;
    width: 100%;
    height: 100%;
    transform: translate(50.85%, 0.65%) rotate3d(0, 1, 0, 0deg) translate(-50%);
}

.withinViewport div.card div.shadow img.shadow
{
    transition-property: transform;
    transition-duration: var(--cardSwitchDuration);
    transition-timing-function: cubic-bezier(0.75, 0, 0.25, 1);
}

div.card input.cardSwitch:checked ~ div.shadow img.shadow
{
    transform: translate(-49.15%, 0.65%) rotate3d(0, 1, 0, 179.99999999deg) translate(-50%);
}

div.card .side
{
    position: absolute;
}

.withinViewport div.card div.scaling
{
    perspective: 800px;
    width: 100%;
    height: 100%;
    position: relative;
}

div.card div.part
{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/card/card_frontal.svg);
    background-size: auto 100%;
    backface-visibility: hidden;
}

.withinViewport div.card div.part
{
    transition-property: transform;
    transition-duration: var(--cardSwitchDuration);
    transition-timing-function: cubic-bezier(0.75, 0, 0.25, 1);
}

div.card div.shadow
{
    background-image: unset;
    backface-visibility: unset;
    pointer-events: none;
}

.withinViewport div.card div.shadow
{
    perspective-origin: -85%;
    perspective: 400px;
    transition-property: transform, opacity;
    transition-duration: var(--cardHoverDuration);
    transition-timing-function: ease-out;
}

div.card#authenticity,
div.card#authenticity div.shadow img.shadow
{
    animation-delay: var(--authenticDelay);
}

div.card#qualitative,
div.card#qualitative div.shadow img.shadow
{
    animation-delay: var(--qualitativeDelay);
}

div.card#fun,
div.card#fun div.shadow img.shadow
{
    animation-delay: var(--funDelay);
}

div.card#kpi,
div.card#kpi div.shadow img.shadow
{
    animation-delay: var(--kpiDelay);
}

div.card#inclusive,
div.card#inclusive div.shadow img.shadow
{
    animation-delay: var(--inclusiveDelay);
}

div.card#holistic,
div.card#holistic div.shadow img.shadow
{
    animation-delay: var(--holisticDelay);
}

div.card img.overlay
{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

.withinViewport div.card img.overlay
{
    transition-property: opacity;
    transition-duration: calc(var(--cardSwitchDuration) / 2);
}

div.card img.overlay.glossing
{
    opacity: 100%;
    transition-timing-function: cubic-bezier(0.85, 0, 1, 0.15);
}

div.card input.cardSwitch:checked ~ div img.overlay.glossing
{
    opacity: 0%;
    transition-delay: calc(var(--cardSwitchDuration) / 2);
    transition-timing-function: cubic-bezier(0, 0.85, 0.15, 1);
}

div.card img.overlay.shadowing
{
    opacity: 0%;
    transition-delay: calc(var(--cardSwitchDuration) / 2);
    background-blend-mode: multiply;
    transition-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
}

div.card input.cardSwitch:checked ~ div img.overlay.shadowing
{
    transition-delay: 0s;
    opacity: 50%;
    transition-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
}

div.card div.back
{
    transform: rotate3d(0, 1, 0, -179.99999999deg);
}

div.card input.cardSwitch:checked ~ div.front
{
    transform: rotate3d(0, 1, 0, 179.99999999deg);
}

div.card input.cardSwitch:checked ~ div.back
{
    transform: rotate3d(0, 1, 0, 0deg);
}

div.card div.back p
{
    position: relative;
    font-family: 'Neucha';
    color: var(--dark200);
    letter-spacing: 0.032rem;
    line-height: 1.14;
    margin: 0 8.65% 0 8.65%;
    font-size: 1rem;
    font-weight: 100;
}

div.card div.back p.first
{
    padding-top: 25%;
}

div.card div.back svg.illustration
{
    padding: 5% 0%;
    width: 100%;
    height: auto;
}

div.card span.tier
{
    position: absolute;
    font-size: 1.68em;
    font-family: 'mrdodo';
    font-weight: 100;
    text-transform: uppercase;
    color: var(--dark100);
}

div.card .tier.capital
{
    font-weight: 200;
    color: var(--accentRed);
    font-size: 1.92em;
}

div.card#holistic .tier.capital
{
    color: var(--dark200);
}

div.card span.tier.top
{
    left: 8%;
    top: 1.75%;
}

div.card span.tier.bottom
{
    right: 8%;
    bottom: 1.75%;
    scale: -1 -1;
}

div.card img.tier
{
    position: absolute;
    width: 12%;
}

div.card img.tier.top
{
    left: 7%;
    top: 15.65%;
}

div.card img.tier.bottom
{
    right: 7%;
    bottom: 15.65%;
    scale: -1 -1;
}

div.card img.cover
{
    position: absolute;
    width: 100%;
}

div.card img.side
{
    height: 94%;
    top: 3%;
    left: 50%;
    backface-visibility: hidden;
}

div.card img.side.left
{
    transform: translateX(-50%) rotate3d(0, 1, 0, -90deg) translateZ(144px);
}

.withinViewport img.side.left
{
    transition-property: transform;
    transition-duration: var(--cardSwitchDuration);
    transition-timing-function: cubic-bezier(0.75, 0, 0.25, 1);
}

div.card input.cardSwitch:checked ~ img.side.left
{
    transform: translateX(-50%) rotate3d(0, 1, 0, 90deg) translateZ(144px);
}

img#pawn
{
    position: absolute;
    width: 9rem;
    top: 8rem;
    left: calc(47% + 15.5rem);
    transform: translateX(-50%);
}

img#dice
{
    position: absolute;
    left: calc(47% - 13.1rem);
    top: 20rem;
    width: 8.9rem;
    transform: translateX(-50%);
}

img#cards_pen
{
    position: absolute;
    top: 9rem;
    left: calc(47% + 37rem);
    width: 26rem;
}

section#worktogether
{
    margin-top: 13vh;
    position: relative;
}

section#worktogether h2.section
{
    margin-left: 15%;
    margin-bottom: 10vh;
    padding: 0.5rem 7rem 0rem 5rem;
    background-image: url(../images/headings/long_single1.svg?v=2);
}

section#worktogether div.teaser
{
    display: flex;
    align-items: stretch;
}

section#worktogether div.extended div.independent
{
    display: flex;
    gap: 4%;
    align-items: stretch;
}

section#worktogether img.progressArrow
{
    height: 4rem;
    margin: 1rem 50%;
}

section#worktogether img.progressArrow.one
{
    margin: 2rem 50% 8rem 50%;
}

section#worktogether img.progressArrow.two
{
    height: 4rem;
    margin: 4rem 50% 0rem 50%;
}

section#worktogether img.progressArrow.three
{
    margin: 0.5rem auto 1rem auto;
    display: block;
}

#firstContact
{
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4rem;
    margin: 0 2rem;
}

#firstContact a.booking
{
    z-index: 2;
}

section#worktogether h3.separator
{
    font-family: 'Neucha';
    color: var(--dark100);
    font-weight: 100;
    font-size: 2.25rem;
    margin-block: 0;
    margin-top: 4rem;
    left: 90%;
    transform: translateX(-100%);
    display: inline-block;
    position: relative;
}

section#worktogether img.separator
{
    width: calc(100% - 4rem);
    padding: 0rem 2rem 4rem 2rem
}

section#worktogether .extended div.locked
{
    max-height: 60rem;
    padding-top: 2rem;
    filter: blur(4px);
    mask-image: linear-gradient(black 0%, black 50%, transparent 90%, transparent 100%);
    mask-position: 0% 100%;
    mask-size: 100% 200%;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
}

section#worktogether .extended input#unlock:checked ~ div.locked,
section#worktogether .extended div.locked.bypass
{
    max-height: 150rem;
    filter: blur(0px);
    mask-position: 0% 0%;
    pointer-events: initial;
    -webkit-user-select: initial;
    user-select: initial;
    transition-property: filter, mask-position, max-height;
    transition-duration: 2s;
    transition-delay: 3s;
}

section#worktogether div.extended
{
    position: relative;
}

section#worktogether.withinViewport input#unlock:checked ~ .scaling input#certificateDownloadClosed:checked ~ input#certificateDownloadOpen:not(:hover) ~ div.shadowContainer.interactiveShadow
{
    animation-name: OptinShadowHighlight;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    animation-delay: 4s;
}

section#worktogether div.extended div.scaling
{
    position: absolute;
    perspective-origin: 50% 40vh;
    perspective: 1000px;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

:where(section#worktogether .extended .scaling > *) 
{
    pointer-events: auto;
}

section#worktogether div.shadowContainer
{
    position: absolute;
    inset: 0;
    perspective-origin: -30vh -30vh;
    perspective: 500px;
    z-index: 1;
    pointer-events: none;
    transition-property: opacity;
    transition-duration: 0.5s;
    transition-timing-function: cubic-bezier(0.5, 0, 0, 1);
}

section#worktogether .extras
{   
    position: absolute;
    transition-property: transform;
    transition-duration: 0.75s;
    transition-timing-function: cubic-bezier(0.5, 0, 0, 1);
    z-index: 2;
    transform: translate3d(calc(-50vw - 120%), -9rem, 60px) rotate3d(0.5, 0.5, 1, -35deg) rotate(-156deg);
    left: 50%;
}

section#worktogether .extras svg
{   
    width: 20rem;
    height: auto;
}

section#worktogether .extras.shadow svg path
{   
    fill: var(--primary);
}

section#worktogether input#unlock:checked ~ div.scaling .document
{
    pointer-events: none;
}

section#worktogether .examn
{
    left: 50%;
    top: -6.5rem;
    transform: rotate(calc(15deg * (1 - var(--floatAmount)))) scale3d(calc(0.25 + 0.75 * var(--floatAmount)), calc(0.25 + 0.75 * var(--floatAmount)), calc(0.25 + 0.75 * var(--floatAmount))) translateX(-50%) translate3d(0, 0, calc(7px + var(--floatAmount) * 25px + var(--t) * 5px)) rotate3d(0.5, -1, 1, calc(5deg * var(--floatAmount)));
}

section#worktogether.withinViewport .document
{
    transition-property: --floatAmount, left, top;
    transition-duration: 2s;
}

section#worktogether input#unlock:checked ~ div.scaling .examn,
section#worktogether input#unlock:checked ~ div.scaling div.shadowContainer .examn
{
    --floatAmount: 0;
    transition-property: opacity;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    transform-style: preserve-3d;
    transform: translate3d(12.75rem, -25rem, 1px) scale3d(0.25, 0.25, 0.25) translateX(-50%) rotate3d(0.25, -1, 0.25, 0deg) rotate(6deg);
}

section#worktogether input#unlock:checked ~ div.scaling .examn.animated,
section#worktogether input#unlock:checked ~ div.scaling div.shadowContainer .examn.animated
{
    animation-name: Examn-Land;
    animation-duration: 4s;
}

section#worktogether input#unlock:checked ~ div.scaling .examn.instant,
section#worktogether input#unlock:checked ~ div.scaling div.shadowContainer .examn.instant
{
    z-index: 2;
}

section#worktogether form#examn.pass
{
    pointer-events: none;
}

section#worktogether input#load
{
    visibility: hidden;
    height: 0;
    width: 0;
}

section#worktogether.withinViewport input#load:checked ~ div.scaling form#examn
{
    animation-name: clock, Examn-Shine;
    animation-duration: 4s, 2s;
    animation-timing-function: linear, cubic-bezier(.51,0,.71,.22);
    animation-iteration-count: infinite, 1;
    animation-fill-mode: forwards;
}

section#worktogether .document.shadow
{   
    transition-property: opacity, --floatAmount, left, top;
    transition-duration: 2s;
    transition-delay: 2s;
    transition-timing-function: ease-in-out;
    opacity: 0.5;
}

section#worktogether .document.shadow .inner
{
    background-color: var(--primary);
}

section#worktogether input#unlock:checked ~ div.scaling input.choice:checked ~ .document.examn,
section#worktogether input#unlock:checked ~ div.scaling input.choice:checked ~ div.shadowContainer .document.examn
{
    animation-name: Examn-Swipe-Away;
    animation-duration: 0.75s;
}

section#worktogether input#unlock:checked ~ div.scaling input.choice:checked ~ .document.certificate,
section#worktogether input#unlock:checked ~ div.scaling input.choice:checked ~ div.shadowContainer .document.certificate
{
    transform: translate3d(15rem, -31.5rem, 2px) scale3d(0.25, 0.25, 0.25) translateX(-50%) rotate3d(0.25, -1, 0.25, 0deg) rotate(21deg);
    animation-name: Certificate-Swipe-Away;
    animation-delay: 0.125s;
    animation-duration: 0.75s;
}

section#worktogether input.one.secondary:not(.redo):checked ~ .extras,
section#worktogether input.two:checked ~ .extras,
section#worktogether input.one.secondary:not(.redo):checked ~ .shadowContainer .extras,
section#worktogether input.two:checked ~ .shadowContainer .extras
{   
    transform: translate3d(60vw, -8rem, 35px) rotate3d(0.5, 0.5, 1, -7deg) rotate(110deg);
}

section#worktogether input.open:checked ~ div.shadowContainer,
section#worktogether input.redo:checked ~ div.shadowContainer
{
    opacity: 0.75;
}

section#worktogether input#unlock:checked ~ div.scaling div.shadowContainer .document.shadow
{   
    opacity: 1;
}

section#worktogether form#examn p.disclaimer.privacy
{
    position: absolute;
    font-family: 'mrdodo';
    left: -0.4rem;
    bottom: 0rem;
    padding: 1rem 0.5rem 1rem 2rem;
    background-image: url(../images/worktogether/worktogether_examn_privacydisclaimer.svg);
    background-size: 100% 100%;
    font-size: 1.35rem;
    font-weight: 100;
    color: var(--dark200);
    width: 16rem;
    rotate: 3deg;
    transition-property: opacity;
    transition-duration: 2s;
    pointer-events: none;
}

section#worktogether input.celebrationActive:checked ~ div.scaling form#examn p.disclaimer.privacy,
section#worktogether input.process:checked ~ form#examn p.disclaimer.privacy
{
    opacity: 0;
    transition-property: opacity;
}

section#worktogether form#examn p.disclaimer.privacy strong
{
    font-weight: 300;
    font-size: 1.35rem;
}

section#worktogether form#examn p.disclaimer.privacy img
{
    position: absolute;
    bottom: 18%;
    right: 9%;
    rotate: -15deg;
    width: 1.5rem;
}

section#worktogether form#examn label.answer input:checked ~ svg.scribble
{
    visibility: visible;
}

section#worktogether input.celebrationActive:checked ~ div.scaling form#examn div#cat
{
    display: block;
}

section#worktogether input.celebrationActive:checked ~ div.scaling form#examn fieldset p.scoresum
{
    display: block;
}

section#worktogether input#confirm:checked ~ form#examn legend svg path,
section#worktogether input.celebrationActive:checked ~ div.scaling form#examn legend svg path
{
    fill: var(--dark100);
    transition-property: fill;
    transition-duration: 1s;
}

section#worktogether input.celebrationActive:checked ~ div.scaling #examn.nopass.first .answer.retry
{
    display: none;
}

section#worktogether input.celebrationActive:checked ~ div.scaling #examn.nopass.first .answer
{
    display: inline-flex;
}

#examn .answerBox:checked ~ div.checkmark
{
    opacity: 1;
}

section#worktogether input.celebrationActive:checked ~ div.scaling form#examn .answerBox:not(#preferences):not(:checked) ~ div.checkmark.result,
section#worktogether input.celebrationActive:checked ~ div.scaling form#examn .answerBox#preferences:checked ~ div.checkmark.result,
section#worktogether input.celebrationActive:checked ~ div.scaling form#examn .answerBox:not(#preferences):not(:checked) ~ div.textContainer aside.fail,
section#worktogether input.celebrationActive:checked ~ div.scaling form#examn .answerBox:not(#preferences):checked ~ div.textContainer aside.succeed,
section#worktogether input.celebrationActive:checked ~ div.scaling form#examn .answerBox#preferences:checked ~ div.textContainer aside.fail,
section#worktogether input.celebrationActive:checked ~ div.scaling form#examn .answerBox#preferences:not(:checked) ~ div.textContainer aside.succeed
{
    visibility: visible;
    opacity: 1;
}

section#worktogether input.celebrationActive:checked ~ div.scaling form#examn .answerBox:not(#preferences):not(:checked) ~ div.textContainer p,
section#worktogether input.celebrationActive:checked ~ div.scaling form#examn .answerBox#preferences:checked ~ div.textContainer p
{
    text-decoration-style: double;
    text-decoration-color: var(--accentGreenTxt);
    text-decoration-line: underline;
    text-decoration-thickness: 1.5px;
}

section#worktogether input.celebrationActive:checked ~ div.scaling form#examn .answerBox#preferences:checked ~ div.textContainer p
{
    text-decoration-style: wavy;
}

section#worktogether form#examn .textareaWrapper span.counter
{
    position: absolute;
    right: -0.75rem;
    bottom: 0.1rem;
    font-family: 'mrdodo';
    font-weight: 100;
    color: var(--dark100);
    font-size: 1rem;
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.25s;
    background-color: #FFFFFFAA;
    padding: 0 0.35rem;
    border-radius: 12px;
}

section#worktogether form#examn .textareaWrapper span.counter.limit
{
    font-weight: 200;
    color: var(--accentRedTxt);
}

section#worktogether form#examn .textareaWrapper textarea:focus ~ span.counter
{
    opacity: 1;
}

section#worktogether input.celebrationActive:checked ~ div.scaling form#examn div.textareaClone
{
    display: block;
    overflow: visible;
}

section#worktogether input.celebrationActive:checked ~ div.scaling form#examn textarea
{
    display: none;
}

section#worktogether form#examn textarea:focus
{
    transform: scale(1.05);
    border-color: var(--accentGreen);
    outline: unset;
}

section#worktogether input#confirm:checked ~ form#examn textarea,
section#worktogether input.celebrationActive:checked ~ div.scaling form#examn textarea
{
    border-color: #FFFFFF00;
}


section#worktogether input#confirm:checked ~ form#examn textarea::placeholder,
section#worktogether input.celebrationActive:checked ~ div.scaling form#examn textarea::placeholder
{
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.5s;
}

section#worktogether input.celebrationActive:checked ~ div.scaling form#examn fieldset.custom .textareaWrapper aside.feedback
{
    visibility: visible;
}

section#worktogether input.celebrationActive:checked ~ div.scaling form#examn .reference
{
    visibility: visible;
}

section#worktogether form#examn div#scanline
{
    height: 15rem;
    width: 100%;
    position: absolute;
    background-image: url(../images/worktogether/worktogether_examn_scanline.svg);
    background-size: 100% 40%;
    left: 0;
    background-repeat: no-repeat;
    background-position: bottom;
    overflow: hidden;
    display: none;
    animation: none;
}

section#worktogether input#confirm:checked ~ form#examn div#scanline
{
    display: block;
    animation-name: ScanlineProcess;
    animation-duration: 6s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

section#worktogether input#confirm:checked ~ form#examn div#scanline.freeze
{
    animation-play-state: paused;
}

section#worktogether form#examn div#scanline span
{
    position: absolute;
    font-family: 'mrdodo';
    color: var(--accentGreen);
    font-size: 4rem;
    font-weight: 300;
    opacity: 0;
    animation: none;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}

section#worktogether input#confirm:checked ~ form#examn div#scanline span
{
    animation-name: ScanDigital;
}

section#worktogether form#examn div#scanline span.freeze
{
    animation: none;
}

section#worktogether form#examn div.flash
{
    position: absolute;
    inset: 0;
    background-color: var(--white100);
    opacity: 0;
    pointer-events: none;
}

section#worktogether label.finish
{
    position: absolute;
    left: calc(50% + 15.5rem);
    top: 42rem;
    rotate: -9deg;
    transform: translate(-50%) translate3d(0, 0, 50px) rotate3d(-0.5, -1, 0, -13deg);
    transition-duration: 0.35s;
    background-image: url(../images/worktogether/worktogether_examn_finish_bg.svg?v=2);
    background-size: 100% 100%;
    z-index: 1;
    font-family: 'mrdodo';
    color: var(--white200);
    text-transform: uppercase;
    font-size: 5rem;
    font-weight: 200;
    text-align: center;
    padding: 1rem 9rem 1.5rem 6rem;
    transform-style: preserve-3d;
    pointer-events: none;
    transition-property: transform, opacity;
    transition-delay: 0s, 0.25s;
}

section#worktogether #preload:checked ~ label.finish
{
    opacity: 0;
}

section#worktogether input.process:checked ~ form#examn fieldset,
section#worktogether input.celebrationActive:checked ~ div.scaling form#examn fieldset
{
    pointer-events: none;
}

section#worktogether div.certificate
{
    transform: rotate(0deg) translate3d(-100vw, -7rem, 300px) scale3d(1, 1, 1) translateX(-50%) rotate3d(0.5, -1, 1, -45deg);
    visibility: hidden;
}

section#worktogether .certificate.document
{
    transform-style: preserve-3d;
}

section#worktogether input#unlock:checked ~ div.scaling .certificate,
section#worktogether input#unlock:checked ~ div.scaling .shadowContainer .certificate
{
    animation-fill-mode: forwards;
    animation-delay: 0.35s;
    animation-iteration-count: 1;
    --floatAmount: 0;
    left: 50%;
    visibility: visible;
}

section#worktogether input#unlock:checked ~ div.scaling .certificate.animated,
section#worktogether input#unlock:checked ~ div.scaling .shadowContainer .certificate.animated
{
    animation-name: Certificate-Land;
    animation-duration: 4s;
}

section#worktogether input#unlock:checked ~ div.scaling .certificate.instant,
section#worktogether input#unlock:checked ~ div.scaling .shadowContainer .certificate.instant
{
    transform: translate3d(15rem, -31.5rem, 2px) scale3d(0.25, 0.25, 0.25) translateX(-50%) rotate3d(0.25, -1, 0.25, 0deg) rotate(21deg);
    z-index: 2;
}

section#worktogether input#submit
{
    inset: 0;
    appearance: none;
    position: absolute;
    left: calc(50% + 2.5rem);
    width: 27rem;
    height: 10rem;
    top: 45rem;
    rotate: -12deg;
    z-index: 2;
}

section#worktogether label div.shadowContainer
{
    z-index: unset;
}

section#worktogether label.finish img.icon
{
    position: absolute;    
    left: 69%;
    top: 2rem;
    width: 6rem;
    transform: translate(-50%, 0%) translate3d(0px, 0px, 5px) translate(50%, 0%) rotate3d(-1, -1, 0, 0deg);
    transition-property: transform, opacity;
    transition-duration: 0.15s;
}

section#worktogether label.finish span
{
    transition-duration: 250ms;
    transition-property: opacity;
}

section#worktogether label.finish span.primary
{
    transition-delay: 100ms;
    transition-duration: 150ms;
}

section#worktogether label.finish span.secondary
{
    position: absolute;
    left: 7rem;
    opacity: 0;
    transition-duration: 250ms;
}

section#worktogether input.process:checked ~ label.finish span.primary
{
    transition-delay: 0ms;
    transition-duration: 250ms;
    opacity: 0;
}

section#worktogether input.process:checked ~ label.finish span.secondary
{
    transition-delay: 100ms;
    transition-duration: 150ms;
    opacity: 1;
}

section#worktogether input.process:checked ~ label.finish img.icon
{
    opacity: 0;   
    transform: translate(-50%, 0%) translate3d(0px, 0px, 11px) translate(50%, 0%) rotate3d(-1, -1, 0, 14deg);
}

section#worktogether input#submit:checked ~ label.finish
{
    opacity: 0.75;
    transform: translate(-50%) translate3d(0, 0, -300px) rotate3d(-0.5, -1, 0, -13deg);
    transition-timing-function: cubic-bezier(0, 0.75, 0.25, 1);
    transition-duration: 1500ms;
}

section#worktogether input#confirm:checked ~ label.finish,
section#worktogether input.celebrationActive:checked ~ div.scaling label.finish
{
    opacity: 0.0;
    transform: translate(-50%) translate3d(0, 0, -300px) rotate3d(-0.5, -1, 0, -13deg);
    transition-timing-function: ease-out;
    transition-duration: 350ms;
}

section#worktogether div.confirm
{
    position: absolute;
    left: calc(50% + 10rem);
    top: 39rem;
    transform: translate(-50%) translate3d(0, 0, 200px) rotate3d(1, 1, 1, 13deg);
    z-index: 1;
    white-space: nowrap;
    transform-style: preserve-3d;
    pointer-events: none;
}

section#worktogether div.confirm div.outerMask,
section#worktogether div.retry.outerMask
{
    mask: url(../images/brush_swipe_mask.svg?v2);
    mask-size: 220% 100%;
    mask-position: 180% 0;
    mask-repeat: no-repeat;
    transition-duration: 250ms;
    transition-delay: 0ms, 0ms, 250ms;
    transition-timing-function: ease-in;
    transition-property: transform, mask-position, visibility;
    display: inline-block;
    visibility: hidden;
}

section#worktogether div.retry.outerMask
{
    left: calc(50% + 13rem);
    top: 41rem;
    position: absolute;
    z-index: 1;
    transform: rotate3d(0.35, -1, 0.25, 60deg);
}

section#worktogether input#submit:checked ~ div.confirm div.outerMask
{
    mask-position: 25% 0;
    mask-repeat: no-repeat;
    transition-duration: 500ms, 10000ms, 0ms;
    transition-delay: 0ms, 350ms, 0ms;
    transition-timing-function: cubic-bezier(0.0, 0.0, 0, 1.0), cubic-bezier(0.0, 1.0, 0.0, 1.0);
    visibility: visible;
}

section#worktogether input#load:checked ~ div.scaling form.examn.nopass.first ~ div.retry.outerMask
{
    mask-position: 25% 0;
    mask-repeat: no-repeat;
    transition-duration: 500ms, 10000ms, 0ms;
    transition-delay: 0ms, 2500ms, 0ms;
    transition-timing-function: cubic-bezier(0.0, 0.0, 0, 1.0), cubic-bezier(0.0, 1.0, 0.0, 1.0);
    visibility: visible;
}

section#worktogether input#confirm:checked ~ div.confirm div.proceed.outerMask
{
    mask-position: 0 0;
    mask-repeat: no-repeat;
    transform: translate3d(0, 0, -300px);
    transition-duration: 500ms, 10000ms, 0ms;
    transition-delay: 0ms, 350ms, 0ms;
    transition-timing-function: cubic-bezier(0.0, 0.0, 0, 1.0), cubic-bezier(0.0, 1.0, 0.0, 1.0);
    visibility: visible;
}

section#worktogether input.celebrationActive:checked ~ div.scaling div.confirm div.proceed.outerMask,
section#worktogether input.celebrationActive:checked ~ div.scaling form.examn.pass ~ div.retry.outerMask,
section#worktogether input.celebrationActive:checked ~ div.scaling form.examn.second ~ div.retry.outerMask
{
    display: none;
}

section#worktogether input#confirm:checked ~ div.confirm div.proceed svg.bg
{
    animation-name: LoadingPulse;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in;
}

section#worktogether input#confirm:checked ~ div.confirm div.proceed svg.bg path
{
    fill: var(--accentGreen);
    transition-property: fill;
    transition-duration: 0.75s;
}

section#worktogether div.confirm div.innerMask,
section#worktogether div.retry.outerMask div.innerMask
{
    position: relative;
    mask: url(../images/brush_swipe_mask.svg?v2);
    mask-size: 220% 100%;
    mask-position: 182% 50%;
    mask-repeat: no-repeat;
    transition-duration: 250ms;
    transition-timing-function: ease-in;
    transition-property: mask-position, mask-size;
}

section#worktogether input#submit:checked ~ div.confirm div.innerMask
{
    mask-position: 55% 55%;
    mask-size: 220% 600%;
    transition-duration: 10000ms;
    transition-delay: 350ms;
    transition-timing-function: cubic-bezier(0.0, 1.0, 0.0, 1.0);
}

section#worktogether input#submit:checked ~ div.confirm .cancel div.innerMask
{
    mask-position: 55% 55%;
}

section#worktogether input#load:checked ~ div.scaling form.examn.nopass.first ~ div.retry.outerMask div.innerMask
{
    mask-position: 50% 45%;
    mask-size: 220% 600%;
    transition-duration: 10000ms;
    transition-delay: 2500ms;
    transition-timing-function: cubic-bezier(0.0, 1.0, 0.0, 1.0);
}

section#worktogether input#confirm:checked ~ div.confirm div.proceed.outerMask div.innerMask
{
    mask-position: 0 0;
    mask-size: 220% 600%;
}

section#worktogether div.confirm div.outerMask.cancel
{
    margin-right: 8rem;
}

section#worktogether div.confirm div.outerMask.proceed,
section#worktogether div.confirm .proceed div.innerMask
{
    transition-delay: 100ms;
}

section#worktogether input#submit:checked ~ div.confirm div.outerMask.proceed
{
    transition-delay: 0ms, 600ms;
}

section#worktogether input#submit:checked ~ div.confirm .proceed div.innerMask
{
    transition-delay: 600ms;
}

section#worktogether input#idle
{
    inset: 0;
    appearance: none;
    position: absolute;
    left: calc(50% - 18.5rem);
    width: 26rem;
    height: 11rem;
    top: 38.5rem;
    rotate: 5deg;
    z-index: 2;
}

section#worktogether input#confirm
{
    appearance: none;
    position: absolute;
    width: 21rem;
    height: 9rem;
    rotate: 5deg;
    z-index: 2;
    inset: 43rem 0px 0px calc(50% + 18rem);
}

section#worktogether input#idle:checked
{
    pointer-events: none;
}

section#worktogether input.celebrationActive:checked ~ div.scaling input#idle
{
    pointer-events: none;
}

section#worktogether div.confirm label,
section#worktogether div.retry label
{
    position: absolute;
    inset: 0;
    font-family: 'mrdodo';
    color: var(--white200);
    text-transform: uppercase;
    font-size: 5rem;
    font-weight: 200;
    text-align: center;
    padding: 1rem 10rem 1rem 3rem;
    transform-style: preserve-3d;
    pointer-events: none;
    transition-property: transform, color;
}

section#worktogether div.retry label
{
    padding: 1.5rem 5rem 1rem 1rem;
    line-height: 4rem;
}

section#worktogether div.retry label p
{
    margin: 0;
    font-family: 'mrdodo';
    color: var(--white100);
    text-transform: none;
    font-size: 1.75rem;
    font-weight: 100;
    display: inline-block;
}

section#worktogether input#load:checked ~ div.scaling div.retry label
{
    pointer-events: initial;
}

section#worktogether div.confirm label.proceed span.secondary
{
    position: absolute;
    color: var(--white100);
    left: 2.25rem;
    top: 0.75rem;
    letter-spacing: -0.2rem;
    visibility: hidden;
}

section#worktogether input#confirm:checked ~ div.confirm label.proceed span.secondary,
section#worktogether input.celebrationActive:checked ~ div.scaling div.confirm label.proceed span.secondary
{
    visibility: visible;
}

section#worktogether input#confirm:checked ~ div.confirm label.proceed span.primary,
section#worktogether input.celebrationActive:checked ~ div.scaling div.confirm label.proceed span.primary
{
    visibility: hidden;
}

section#worktogether div.confirm label img.icon
{
    position: absolute;    
    left: 11.5rem;
    top: 1.5rem;
    width: 6rem;
    transform: translate3d(0px, 0px, 5px) rotate3d(-1, -1, 0, 0deg);
    transition-property: transform;
    transition-duration: 0.25s;
}

section#worktogether div.retry div.innerMask > svg.bg
{
    height: 9rem;
    width: auto;
}

section#worktogether div.retry label svg.icon
{
    position: absolute;
    left: 16rem;
    top: 2.25rem;
    width: 6rem;
}

section#worktogether div.retry label svg.icon.fg
{
    margin-left: -0.25rem;
    margin-top: -0.25rem;
}

section#worktogether div.retry label svg.icon.bg path
{
    fill: var(--primary);
}

section#worktogether input#confirm:checked ~ div.confirm label.proceed img.icon,
section#worktogether input.celebrationActive:checked ~ div.scaling div.confirm label.proceed img.icon
{
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.5s;
}

section#worktogether div.confirm .proceed label img.icon
{
    left: 13rem;
}

section#worktogether div#celebration
{
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 9rem;
    display: none;
    transform-style: preserve-3d;
}

section#worktogether input.celebrationActive:checked ~ div.scaling div#celebration
{
    display: block;
}

section#worktogether input#unlock:checked ~ div.scaling div#celebration
{
    pointer-events: none;
}

section#worktogether div#celebration img.hat
{
    position: absolute;
    animation-name: HatPop;
    animation-duration: 2.25s;
    animation-fill-mode: forwards;
}

section#worktogether div#celebration.nopass img.hat
{
    display: none;
}

section#worktogether input#unlock:checked ~ div.scaling div#celebration.animated img.hat
{
    animation-name: HatLanding;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.25, 0, 0, 1);
}

section#worktogether input#unlock:checked ~ div.scaling div#celebration.instant img.hat
{
    animation: none;
    transform: scale(1) translate(-44rem, -26rem) rotate(-15deg);
}

section#worktogether div#celebration img.heart
{
    position: absolute;
    animation-fill-mode: forwards;
    animation-duration: 1s;
    opacity: 0;
}

section#worktogether div#celebration.nopass img.heart
{
    display: none;
}

section#worktogether div#celebration img.heart.one
{
    animation-name: HeartFloat1;
    animation-duration: 3.75s;
}

section#worktogether div#celebration img.heart.one.alt
{
    scale: 2;
    rotate: 25deg;
    animation-duration: 3.8s;
}

section#worktogether div#celebration img.heart.two
{
    animation-name: HeartFloat2;
    animation-duration: 1.9s;
    animation-delay: 1.25s;
    animation-timing-function: cubic-bezier(0,0,0,1);
}

section#worktogether input#unlock:checked ~ div.scaling div#celebration.animated img.heart.two
{
    animation-name: HeartLand2;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.25, 0, 0, 1);
    animation-delay: 0s;
    opacity: 1;
}

section#worktogether input#unlock:checked ~ div.scaling div#celebration.instant img.heart.two
{
    animation: none;
    transform: translate(-25rem, -19rem) rotate(5deg);
    opacity: 1;
}


section#worktogether div#celebration img.heart.three
{
    animation-name: HeartFloat3;
    animation-duration: 3.9s;
}

section#worktogether div#celebration img.heart.three.alt
{
    scale: 2;
    rotate: -32deg;
    animation-duration: 3.95s;
}

section#worktogether div#celebration img.heart.four
{
    animation-name: HeartFloat4;
    animation-duration: 2.09s;
    animation-delay: 1.25s;
    animation-timing-function: cubic-bezier(0,0,0,1);
}

section#worktogether input#unlock:checked ~ div.scaling div#celebration.animated img.heart.four
{
    animation-name: HeartLand4;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.25, 0, 0, 1);
    animation-delay: 0s;
    opacity: 1;
}

section#worktogether input#unlock:checked ~ div.scaling div#celebration.instant img.heart.four
{
    animation: none;
    transform: scale(0.75) rotate(-12deg) translate(-42rem, -22rem) rotate(-25deg);
    opacity: 1;
}

section#worktogether div#celebration img.heart.five
{
    animation-name: HeartFloat5;
    animation-duration: 4s;
}

section#worktogether div#celebration img.heart.five.alt
{
    scale: 2;
    rotate: -36deg;
    animation-duration: 3.83s;
}

section#worktogether div#celebration img.heart.explode
{
    animation-name: HeartExplode;
    animation-duration: 2.75s;
    animation-timing-function: cubic-bezier(0, 0.5, 0, 1);
}

section#worktogether div#celebration div.outerMask.header
{
    position: absolute;
    transform: translate3d(-28rem, -16rem, -110px) rotate3d(-0.5, -0.5, -0.2, 22deg);
}

section#worktogether div#celebration.nopass div.outerMask.header
{
    top: -5rem;
    left: -5rem;
}

section#worktogether div#celebration.nopass div.outerMask.header svg path
{
    fill: var(--accentGreen);
}

section#worktogether div#celebration div.outerMask h3,
section#worktogether div#celebration div.outerMask p
{
    position: relative;
    font-family: 'mrdodo';
    text-transform: uppercase;
    font-weight: 200;
    color: var(--white200);
    inset: 0;
    margin-block: unset;
    margin-inline: unset;
}

section#worktogether div#celebration div.outerMask.header h3
{
    font-size: 5.5rem;
    line-height: 5rem;
    white-space: nowrap;
}

section#worktogether div#celebration.nopass div.outerMask.header h3
{
    font-size: 4.5rem;
}

section#worktogether div#celebration div.outerMask.header p
{
    font-size: 1.75rem;
    width: 100%;
    font-weight: 200;
    text-align: center;
}

section#worktogether div#celebration div.outerMask.subheader p
{
    font-size: 4rem;
    line-height: 4.5rem;
    width: 40rem;
}

section#worktogether div#celebration.nopass div.outerMask.subheader p
{
    font-size: 2.75rem;
    line-height: 3rem;
    width: 40rem;
}

section#worktogether input.celebrationActive:checked ~ div.scaling div#celebration.animated div.outerMask,
section#worktogether input.celebrationActive:checked ~ div.scaling div#celebration.animated div.innerMask
{
    mask: url(../images/brush_swipe_mask_large.svg?v2);
    mask-size: 220% 100%;
    mask-position: 180% 0;
    mask-repeat: no-repeat;
    animation-name: Examn-Header-Swoosh;
    animation-duration: 22s;
    animation-delay: 1.5s;
    animation-timing-function: cubic-bezier(0.0, 1.0, 0.0, 1.0);
    animation-fill-mode: forwards;
    display: inline-block;
}

section#worktogether div#celebration div.outerMask svg
{
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
}

section#worktogether input.celebrationActive:checked ~ div.scaling div#celebration.animated div.outerMask
{
    animation-name: Examn-Header-Float, Examn-Header-Swoosh;
    animation-duration: 8s, 22s;
}

section#worktogether input.celebrationActive:checked ~ div.scaling div#celebration.nopass div.outerMask,
section#worktogether input.celebrationActive:checked ~ div.scaling div#celebration.nopass div.innerMask
{
    animation-delay: 0.75s;
}

section#worktogether input.celebrationActive:checked ~ div.scaling div#celebration div.outerMask.subheader ,
section#worktogether input.celebrationActive:checked ~ div.scaling div#celebration .subheader div.innerMask
{
    mask-size: 330% 100%;
    mask-position: 142% 0;
    animation-name: Examn-Header-Sub-Swoosh;
    animation-duration: 8s;
    animation-delay: 2.5s;
}

section#worktogether input#unlock:checked ~ div.scaling div#celebration.animated div.outerMask.subheader
{
    animation-name: Examn-Header-Sub-Swoosh-Inverse;
    animation-delay: 0s;
    animation-duration: 2s;
    transform: translate3d(-34rem, 27rem, -110px) rotate3d(0.5, 0.5, 0.5, 20deg);
}

section#worktogether input#unlock:checked ~ div.scaling div#celebration.animated .subheader div.innerMask
{
    animation-delay: 0s;
    animation-duration: 2s;
    animation-name: Examn-Header-Sub-Swoosh-Inverse;
}

section#worktogether input#unlock:checked ~ div.scaling div#celebration.instant div.outerMask.subheader
{
    display: none;
}

section#worktogether input#unlock:checked ~ div.scaling div#celebration.animated div.outerMask.header
{
    animation-name: Examn-Header-Float-Inverse;
    animation-delay: 2s;
    animation-duration: 2s;
    mask-position: 35% 0;
    animation-timing-function: ease-in-out;
}

section#worktogether input#unlock:checked ~ div.scaling div#celebration.instant div.outerMask.header
{
    transform: translate3d(-30rem, -19.5rem, -110px) rotate3d(-0.5, -0.5, -0.2, 4deg);
    z-index: -1;
}

section#worktogether input.celebrationActive:checked ~ div.scaling div#celebration div.outerMask.subheader
{
    animation-name: Examn-Header-Sub-Float, Examn-Header-Sub-Swoosh;
    animation-duration: 8s, 8s;
}

section#worktogether input.celebrationActive:checked ~ div.scaling form#examn.animated div.flash
{
    animation-name: Examn-Flash;
    animation-duration: 2s;
    animation-timing-function: cubic-bezier(.51,0,.71,.22);
}

section#worktogether form#examn.animated.nopass.first div.flash
{
    animation-name: Examn-Flash2;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(.51,0,.71,.22);
}

section#worktogether div#celebration.pass .header svg path
{
    fill: var(--accentRed);
    transition-property: fill;
    transition-duration: 2s;
    transition-delay: 2s;
}

section#worktogether input#unlock:checked ~ div.scaling div#celebration .header svg path
{
    fill: var(--dark200);
}

section#worktogether div#celebration div.outerMask.subheader
{
    position: absolute;
    pointer-events: none;
}

section#worktogether div#celebration div.outerMask.header div.innerMask
{
    padding: 1rem 6rem;
}

section#worktogether div#celebration div.outerMask.subheader div.innerMask
{
    padding: 1rem 6rem 2.5rem 4.5rem;
}

section#worktogether div#celebration div#lock .shadow path
{
    fill: var(--primary);
}

section#worktogether div#celebration div#lock
{
    position: absolute;
    animation: Lock-Drop, Lock-Pop;
    animation-delay: 2.6s, 9s;
    animation-duration: 1.5s, 5s;
    animation-iteration-count: 1, infinite;
    animation-timing-function: cubic-bezier(0, 0, 0, 1), linear;
    animation-fill-mode: forwards;
    visibility: hidden;
    pointer-events: none;
    transition-property: opacity;
    transition-duration: 0.5s;
    opacity: 1;
}

section#worktogether div#celebration.nopass div#lock
{
    display: none;
}

section#worktogether input#unlock:checked ~ div.scaling div#celebration div#lock
{
    opacity: 0;
}

section#worktogether div#celebration div#lock svg
{
    position: absolute;
}

section#worktogether div#celebration div#lock > svg
{
    position: absolute;
    animation: LockFlash;
    animation-delay: 4s;
    animation-duration: 5s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
}

section#worktogether input#unlock:checked ~ .scaling div#celebration div#lock,
section#worktogether input#unlock:checked ~ .scaling div#celebration div#lock > svg
{
    animation-iteration-count: 1;
}

section#worktogether div#celebration div#lock div.shadow
{
    position: relative;
    left: 0.5rem;
    top: 0.5rem;
    opacity: 0;
    animation: LockShadowBlendIn;
    animation-delay: 3.25s;
    animation-duration: 0.85s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

section#worktogether div#celebration div#lock svg.bottom
{
    width: 7.5rem;
}

section#worktogether div#celebration div#lock svg.top
{
    top: -4.1rem;
    width: 7.5rem;
    transition-property: top;
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
}

section#worktogether input#unlock
{    
    appearance: none;
    position: absolute;
    left: calc(50% - 31rem);
    top: 35rem;
    width: 44rem;
    rotate: 14deg;
    height: 15rem;
    z-index: 2;
    display: none;
    cursor: pointer;
}

section#worktogether input#unlock.pass
{
    display: block;
}

section#worktogether input#unlock.pass:checked
{
    display: none;
}

section#worktogether div#celebration div.hoverShift
{
    transform-style: preserve-3d;
    transition-property: transform;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0, 0, 0, 1);
    transform: translate3d(0,0,0px) rotate3d(1, 1, 1, 0deg);
}

section#worktogether div#celebration.nopass div.hoverShift
{
    display: none;
}

section#worktogether div#celebration a.booking
{    
    opacity: 0;
    position: absolute;
    top: -21rem;
    left: 12.75rem;
    rotate: -3deg;
}

section#worktogether div#celebration a.booking
{    
    display: none;
}

section#worktogether div#celebration.animated a.booking
{    
    animation: Improve-Booking;
    animation-delay: 2s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

section#worktogether div#celebration.instant a.booking
{    
    opacity: 1;
}

section#worktogether div#celebration a.booking strong.second
{
    font-size: 2.9rem
}

section#worktogether div#celebration.nopass.second a.booking
{
    display: block;
}

input.certificateDownload 
{
    appearance: none;
}

section#worktogether div.dialogue .personalised .icon
{
    left: 89%;
}

section#worktogether div.dialogue.root.certificateDownload.one
{
    --top: -10rem;
    --left: 55vw;
    transform: translate(var(--left), var(--top)) translateX(-50%);
}

section#worktogether input.redo:checked ~ div.dialogue.root.certificateDownload.one
{
    --top: -6rem;
}

section#worktogether input#certificateDownloadOpen
{
    left: calc(50% + 20rem);
    top: -11rem;
    width: 18.5rem;
    height: 18.5rem;
    animation-name: Introduce-Optin;
    animation-duration: 4s;
}

section#worktogether input#certificateDownloadOpen.instant
{
    animation: none;
}

section#worktogether div.dialogue.root.certificateDownload.one div.pane
{
    --v: calc(pow(var(--active), 0.25));
    transform: translate3d(calc((1 - var(--v)) * 20vw + 50%), 50%, calc((1 - var(--v)) * 100px + 5px + var(--t) * 10px)) rotate3d(-0.25, 1, 0, calc(75deg - var(--v) * 71deg)) translate(-50%, -50%);
}

section#worktogether input.choice:checked ~ input.redo.one:not(:checked) ~ div.dialogue.root.certificateDownload.one div.pane
{
    transform: translate3d(0, -3rem, 1px) scale(0.5) rotate(5deg);
    transition-property: transform;
    transition-duration: 0.75s;
}

section#worktogether input.choice.two:checked ~ input.redo.one:not(:checked) ~ div.dialogue.root.certificateDownload.one div.pane 
{
    transform: translate3d(0, -1rem, 1px) scale(0.5) rotate(-16deg);
}

section#worktogether input.choice:checked ~ input.redo.one:not(:checked) ~ div.dialogue.root.certificateDownload.one
{
    --left: calc(50vw + 34rem);
    --top: -16rem;
    transform: translate(var(--left), var(--top)) translateX(-50%);
    transition-property: --active, --left, --top;
    transition-duration: 0.75s;
    transition-delay: 0s;
}

section#worktogether input.choice.two:checked ~ input.redo.one:not(:checked) ~ div.dialogue.root.certificateDownload.one
{
    --left: calc(50vw + 48.25rem);
    --top: -19rem;
}

section#worktogether div.dialogue.root.certificateDownload.two
{
    --left: calc(55vw - 10rem);
    --top: -6rem;
    transform: translate(var(--left), var(--top)) translateX(-50%);
}

section#worktogether div.dialogue.root.certificateDownload.two
{
    transition-delay: 0.5s;
}

section#worktogether div.dialogue.root.certificateDownload.two div.pane
{
    --v: calc(pow(var(--active), 0.25));
    transform: translate3d(calc((-1 + var(--v)) * 50vw - 50%), -50%, calc((1 - var(--v)) * 100px + 5px + var(--t) * 10px)) rotate3d(-0.25, 1, 0, calc(-94deg + var(--v) * 90deg)) translate(50%, 50%);
}

section#worktogether input.two:checked ~ div.dialogue.root.certificateDownload.two div.pane
{
    transform: translate3d(0, -4rem, 2px) scale(0.5) rotate(5deg);
    transition-property: transform;
    transition-duration: 0.75s;
}

section#worktogether input.choice:checked ~ div.dialogue.root.certificateDownload.one .shadow div.pane,
section#worktogether input.two:checked ~ div.dialogue.root.certificateDownload.two .shadow div.pane,
section#worktogether input#certificateDownloadPersonalisationRedo:checked ~ div.dialogue.root.certificateDownload.two .shadow div.pane
{
    opacity: calc(0.85 - var(--active) * 0.2);
}

section#worktogether input.choice:checked ~ div.dialogue.root.one.certificateDownload,
section#worktogether input.choice.one.secondary:checked ~ div.dialogue.root.two.certificateDownload,
section#worktogether input.choice.two:checked ~ div.dialogue.root.two.certificateDownload
{
    visibility: visible;
}

section#worktogether input.two:checked ~ div.dialogue.root.certificateDownload.two
{
    --left: calc(50vw + 36rem);
    --top: -8rem;
    transform: translate(var(--left), var(--top)) translateX(-50%);
    transition-property: --active, --left, --top;
    transition-duration: 0.75s;
    transition-delay: 0s;
}

section#worktogether div.optin.banner.outerMask,
section#worktogether div.optin.banner div.innerMask
{
    mask: url(../images/brush_swipe_mask_large.svg?v2);
    mask-size: 420% 100%;
    mask-position: 130% 0%;
    mask-repeat: no-repeat;
    transition-property: mask-size, mask-position, visibility;
    transition-duration: 10s, 10s, 0s;
    transition-timing-function: cubic-bezier(0, 1, 0, 1);
    visibility: hidden;
}

section#worktogether div.optin.banner div.innerMask
{
    mask-position: 130% 50%;
}

section#worktogether div.optin.banner.fresh.outerMask,
section#worktogether div.optin.banner.fresh div.innerMask
{
    transition-delay: 3.5s, 3.5s, 0s;
}

section#worktogether input#unlock:checked ~ div.scaling div.optin.banner.outerMask
{
    mask-position: 65% 0%;
    visibility: visible;
}

section#worktogether input#unlock:checked ~ div.scaling div.optin.banner div.innerMask
{
    mask-size: 420% 1200%;
    mask-position: 75% 40%;
    visibility: visible;
}

section#worktogether input#unlock:checked ~ div.scaling input.choice:checked ~ div.optin.banner.fresh.outerMask,
section#worktogether input#unlock:checked ~ div.scaling input.choice.one.primary:not(:checked) ~ div.optin.banner.claimed.outerMask
{
    mask-size: 420% 100%;
    mask-position: 130% 0%;
    transition-delay: 0s, 0s, 10s;
}

section#worktogether input#unlock:checked ~ div.scaling input.choice:checked ~ div.optin.banner.fresh div.innerMask,
section#worktogether input#unlock:checked ~ div.scaling input.choice.one.primary:not(:checked) ~ div.optin.banner.claimed div.innerMask
{
    mask-size: 420% 100%;
    mask-position: 130% 50%;
    transition-delay: 0s, 0s, 10s;
}

section#worktogether div.optin.banner
{    
    position: absolute;
    left: calc(50% + 25rem);
    rotate: 15deg;
    top: -5rem;
    width: 38rem;
}

section#worktogether div.optin.banner.claimed
{    
    left: calc(50% + 35rem);
    rotate: 5deg;
    top: -5rem;
}

section#worktogether div.optin.banner p
{
    font-family: mrdodo;
    text-transform: uppercase;
    font-weight: 200;
    font-size: 2rem;
    padding: 1.5rem 10rem 2rem 12rem;
    position: absolute;
    inset: 0;
    margin-inline: 0;
    margin-block: 0;
    color: var(--white200);
    line-height: 2.75rem;
    letter-spacing: -0.03rem;
    rotate: 2deg;
}

section#worktogether div.optin.banner p span.two
{
    font-size: 4rem;
    letter-spacing: -0.1rem;
}

section#worktogether div.optin.banner .innerMask
{
    position: relative;
    inset: 0;
}

section#worktogether div.optin.banner .innerMask svg
{
    position: relative;
    inset: 0;
    width: 100%;
}

section#worktogether div.dialogue.root.certificateDownload.one div.stamp
{
    rotate: -15deg;
    left: 31rem;
    bottom: 3rem;
}

section#worktogether div.dialogue.root.certificateDownload.one div.stamp span.one
{
    font-size: 5rem;
    letter-spacing: -0.35rem;
    line-height: 4.25rem;
}

section#worktogether div.dialogue.root.certificateDownload.one div.stamp p.primary
{
    color: var(--accentRed);
}

section#worktogether div.dialogue.root.certificateDownload.one div.stamp p.secondary
{
    color: var(--accentGreen);
}

section#worktogether div.dialogue.root.certificateDownload.one div.stamp span.two
{
    text-transform: none;
    font-size: 1.5rem;
    line-height: 1.5rem;
    word-break: initial;
}

section#worktogether div.dialogue.root.certificateDownload.two div.stamp
{
    rotate: 22deg;
    left: 29rem;
    bottom: 3rem;
}

section#worktogether div.dialogue.root.certificateDownload.two div.stamp p.primary
{
    font-size: 4.5rem;
    line-height: 3.75rem;
    letter-spacing: -0.1rem;
    color: var(--accentRed);
}

section#worktogether div.dialogue.root.certificateDownload.two div.stamp p.secondary
{
    font-size: 3rem;
    line-height: 2.75rem;
    letter-spacing: -0.05rem;
    color: var(--accentGreen);
}

section#worktogether input#certificateDownloadOptinRedo
{
    left: calc(50% + 21.5rem);
    top: -11rem;
    width: 24.4rem;
    height: 21rem;
    rotate: 5deg;
}

section#worktogether input.choice.two:checked ~ input#certificateDownloadOptinRedo
{
    left: calc(50% + 36.5rem);
    top: -14rem;
    rotate: -16deg;
}

section#worktogether input#certificateDownloadPersonalisationRedo:checked ~ input#certificateDownloadOptinRedo
{
    display: none;
}

section#worktogether input#certificateDownloadOptinRedo:hover ~ div.dialogue.root.certificateDownload.two,
section#worktogether input#certificateDownloadOptinRedo:checked ~ div.dialogue.root.certificateDownload.two
{
    pointer-events: none;
    z-index: 2;
}

section#worktogether input#certificateDownloadOptinRedo:checked ~ div.dialogue.root.certificateDownload.one div.pane,
section#worktogether input#certificateDownloadOptinRedo:checked:hover ~ div.dialogue.root.certificateDownload.one div.pane
{
    transform: scale(calc(var(--active) * 0.5 + 0.5)) translate3d(-50%, 50%, calc(var(--active) * (50px + var(--t) * 10px) + (1 - var(--active)) * 10px)) rotate3d(-1, -0.25, 0, calc(5deg + var(--active) * 5deg)) translate(50%, calc(-50% - 3rem)) rotate(calc(-7deg + var(--active) * 7deg));
    transition-property: none;
}

section#worktogether input.redo:checked ~ div.dialogue.root.certificateDownload.one
{
    transition-property: --left, --top, --active;
    transition-duration: 0.5s;
}

section#worktogether input.two:checked ~ input#certificateDownloadPersonalisationRedo
{
    left: calc(50% + 23.5rem);
    top: -6rem;
    width: 24.5rem;
    height: 12rem;
    rotate: 5deg;
    z-index: 5;
}

section#worktogether input#certificateDownloadPersonalisationRedo:checked ~ div.dialogue.root.certificateDownload.two div.pane,
section#worktogether input#certificateDownloadPersonalisationRedo:checked:hover ~ div.dialogue.root.certificateDownload.two div.pane
{
    transform: scale(calc(var(--active) * 0.5 + 0.5)) translate3d(50%, 50%, calc(var(--active) * (50px + var(--t) * 10px) + (1 - var(--active)) * 15px)) rotate3d(0, -1, 0, calc(-4deg - var(--active) * 3deg)) translate(-50%, -50%) rotate(calc(3deg - var(--active) * 3deg));
    transition-property: none;
}

section#worktogether input#certificateDownloadPersonalisationRedo:checked ~ div.dialogue.root.certificateDownload.two
{
    transition-property: --left, --top, --active;
    transition-delay: 0s;
    transition-duration: 0.5s;
}

div.dialogue.certificateDownload.two div.outerMask.secondary label div.iconGroup
{
    margin-left: -7%;
}

div.dialogue.certificateDownload.one div.outerMask.primary.redo label svg.fg path
{
    fill: var(--accentRed);
}

section#worktogether div.shoutout
{
    position: absolute;
    pointer-events: none;
    z-index: 1;
    rotate: 9deg;
    left: calc(50% - 24.5rem);
    top: 14rem;
}

section#worktogether div.shoutout.outerMask,
section#worktogether div.shoutout div.innerMask
{
    mask: url(../images/brush_swipe_mask_large.svg?v2);
    mask-size: 420% 100%;
    mask-position: 131% 0;
    mask-repeat: no-repeat;
    transition-duration: 650ms;
    transition-timing-function: cubic-bezier(0,0,1,0);
    transition-property: mask-position;
}

section#worktogether div.shoutout div.innerMask
{
    mask-size: 420% 100%;
    mask-position: 131% 50%;
    transition-property: mask-position, mask-size;
}

section#worktogether #preload:checked ~ div.shoutout.outerMask
{
    mask-position: 50% 0;
}

section#worktogether #preload:checked ~ div.shoutout.outerMask div.innerMask
{
    mask-position: 82.9% 40%;
    mask-size: 420% 1200%;
}

#preload
{
    display: none;
}

section#worktogether div.shoutout p
{
    font-family: 'mrdodo';
    font-size: 2.5rem;
    font-weight: 200;
    text-transform: uppercase;
    color: var(--white100);
    position: absolute;
    left: 6rem;
    margin: 0;
    top: 7.25rem;
    transform: rotate(0deg);
    width: 48rem;
    letter-spacing: -0.025rem;
}

section#worktogether div.shoutout svg
{
    height: 24rem;
    width: auto;
}

section#worktogether div.shoutout p strong
{
    font-size: 5.5rem;
    font-weight: 300;
    letter-spacing: -0.125rem;
}

section#worktogether div.shoutout .interactiveArea
{
    position: absolute;
    inset: 4.5rem 0 0 0;
    width: auto;
    height: auto;
}

section#worktogether #preload:checked ~ div.shoutout .interactiveArea
{
    pointer-events: auto;
}

section#worktogether .watch
{
    position: absolute;
    z-index: 1;
    left: calc(50% + 26rem);
    top: 18rem;
    transform: rotate(15deg);
    transition-property: opacity, transform;
    transition-duration: 0.65s;
    transition-timing-function: cubic-bezier(0.5, 0, 0, 1);
    pointer-events: none;
}

section#worktogether #preload:checked ~ .watch
{
    cursor: pointer;
    pointer-events: auto;
}

section#worktogether #confirm:checked ~ .watch,
section#worktogether .celebrationActive:checked ~ .scaling .watch
{
    transform: translate(50vw, 0) rotate(15deg);
    opacity: 0;
    transition-duration: 0.35s;
    transition-timing-function: cubic-bezier(1, 0, 1, 1);
}

section#worktogether .watch img
{
    height: 25rem;
}

section#worktogether .watch .shadow
{
    opacity: 0.25;
}


section#worktogether #preload:checked ~ .watch .time
{
    animation: Blink 1s infinite;
}

section#worktogether .watch .time
{
    position: absolute;
    font-family: 'DSEG';
    left: 6.9rem;
    top: 12.3rem;
    color: var(--dark200);
    font-size: 2rem;
    transform: translate(-50%, -50%);
}

section#worktogether .watch .time.bg
{
    color: var(--light200);
    transform: translate(calc(-50% + 0.15rem), calc(-50% + 0.15rem));
}

section#worktogether .watch .cover
{
    position: absolute;
    inset: 0;
}

section#worktogether div.offer div.study.shadow
{
    background-color: var(--primary);
}

section#worktogether .offer.audit header.package strong.entry.option
{
    background-image: url(../images/worktogether/worktogether_trackA_bg.svg);
}

section#worktogether .offer.workshop header.package strong.entry.option
{
    background-image: url(../images/worktogether/worktogether_trackB_bg.svg);
}

section#worktogether .offer.audit header.package strong.entry.type
{
    background-image: url(../images/worktogether/worktogether_trackA_desc_bg.svg);
}

section#worktogether .offer.workshop header.package strong.entry.type
{
    background-image: url(../images/worktogether/worktogether_trackB_desc_bg.svg);
}

section#worktogether .offer.sprint header.package strong.entry.option
{
    background-image: url(../images/worktogether/worktogether_Lvl1_bg.svg);
}

section#worktogether .offer.retainer header.package strong.entry.option
{
    background-image: url(../images/worktogether/worktogether_Lvl2_bg.svg);
}


section#worktogether div.offer
{
    position: relative;
}

section#worktogether img.frame
{
    inset: 1% 3% 2% 3%;
    position: absolute;
    width: 94%;
    height: 97%;
}

section#worktogether img.background
{
    position: absolute;
    width: 100%;
    height: 100%;
}

section#worktogether div.offer.retainer picture img.background
{
    scale: -100%;
}

section#worktogether div.offer header.package
{    
    position: absolute;
    display: inline-block;
    transform: translate(-1rem, -3rem);
    z-index: 1;
}

section#worktogether div.offer.wide header.package
{    
    left: 50%;
    transform: translate(calc(-50%), 0rem) rotate(-1deg);
}

section#worktogether div.offer.sprint header.package
{
    left: 51%;
    transform: translate(calc(-50%), -0.5rem) rotate(1.35deg);
}

section#worktogether header.package strong.entry.option
{
    font-family: 'Neucha';
    color: var(--white100);
    font-size: 3.5rem;
    padding: 1.5rem 2.2rem 0.75rem 1.5rem;
    background-size: 100% 100%;
    font-weight: 100;
}

section#worktogether div.offer.wide header.package strong.entry.option
{
    font-size: 2.5rem;
    padding: 1.25rem 1.85rem 0.5rem 1.25rem;
    white-space: nowrap;
}

section#worktogether div.offer.retainer header.package strong.entry.option
{
    padding: 0.75rem 2.25rem 0.35rem 2rem;
}

section#worktogether header.package strong.entry.type
{
    position: absolute;
    font-family: 'Neucha';
    color: var(--white100);
    font-size: 2.35rem;
    font-weight: 100;
    padding: 0.5rem 2rem 0.5rem 1.5rem;
    background-size: 100% 100%;
    transform: translate(-10.75rem, 2.25rem);
    rotate: -3deg;
    white-space: nowrap;
}

section#worktogether div.offer div.content
{
    position: relative;
    padding: 4rem 5.5rem 5rem 5.5rem;
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) minmax(12rem, 1fr);
    grid-template-rows: auto auto auto auto;
    column-gap: 6.5%;
}

section#worktogether div.offer.retainer div.content
{
    padding: 3.75rem 5.5rem 4rem 5.5rem;
}

section#worktogether div.offer.compact div.content
{
    padding: 4rem 5.5rem 6rem 5.5rem;
}

section#worktogether div.offer h3.title
{
    grid-row: 1;
    grid-column: 2;
    color: var(--dark200);
    font-family: 'mrdodo';
    font-size: 3.5rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: -0.2rem;
    display: inline-block;
    margin: 0;
    line-height: 1;
}

section#worktogether div.offer svg.title
{
    grid-row: 1 / 3;
    grid-column: 1;
    height: auto;
    align-self: start;
    justify-self: center;
    width: 22rem;
}

section#worktogether div.offer h4.purpose
{
    grid-row: 3;
    grid-column: 1;
}

section#worktogether div.offer div.purpose
{
    grid-row: 4;
    grid-column: 1;
}

section#worktogether div.offer h4
{
    font-family: 'mrdodo';
    color: var(--dark200);
    text-transform: uppercase;
    font-weight: 300;
    font-size: 2rem;
    letter-spacing: -0.05rem;
    margin: 0;
}

section#worktogether div.offer ul
{
    padding: 0;
    margin: 0;
}

section#worktogether div.offer li h5,
section#worktogether div.offer li p
{
    display: inline;
    padding-right: 0.5rem;
}

section#worktogether div.offer h4.studies
{
    grid-row: 3;
    grid-column: 2;
}

section#worktogether div.offer div.studies
{
    position: relative;
    grid-row: 4;
    grid-column: 2;
}

section#worktogether div.offer div.studies div.shadowContainer
{
    position: relative;
    z-index: unset;
    
}

section#worktogether div.offer div.studies div.bCardContainer
{
    inset: 0;
    perspective-origin: 0% 100%;
    perspective: 1000px;
    width: 100%;
    height: 100%;
}

section#worktogether div.offer .study
{
    position: absolute;
    width: 13rem;
    height: auto;
    aspect-ratio: 1.8275;
    transform: translate3d(0, 0, 2px);
    transition-property: border-color, transform, filter;
    transition-duration: 0.25s;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

section#worktogether div.offer .study
{
    z-index: 1;
}

section#worktogether div.offer.audit .study.tubics
{
    transform: translate3d(1rem, 2rem, 2px) rotate(8deg);
}

section#worktogether div.offer.workshop .study.plamp
{
    transform: translate3d(7rem, 5rem, 2px) rotate(-3deg);
}

section#worktogether div.offer.workshop .study.rotable
{
    transform: translate3d(-1rem, 2rem, 1px) rotate(11deg);
}

section#worktogether div.offer.sprint .study.tubics
{
    transform: translate3d(1rem, 2rem, 2px) rotate(-7deg);
}

section#worktogether div.offer.retainer .study.tricentis
{
    transform: translate3d(4.25rem, -0.5rem, 1px) rotate(-7deg);
}

section#worktogether div.offer.retainer .study.emarsys
{
    transform: translate3d(-1.5rem, 3.75rem, 1.5px) rotate(6deg);
}

section#worktogether div.offer.retainer .study.lotteries
{
    transform: translate3d(5em, 7.5rem, 2px) rotate(-2deg);
}

section#worktogether div.offer.consultation .study.rotable
{
    transform: translate3d(2rem, 2.25rem, 2px) rotate(3deg);   
}

section#worktogether div.offer.project .study.damit
{
    transform: translate3d(7rem, 2rem, 1px) rotate(0deg);
}

section#worktogether div.offer.project .study.riddler
{
    transform: translate3d(0.5rem, 1rem, 2px) rotate(4deg);
}

section#worktogether div.offer.project .study.duck
{
    transform: translate3d(12.25rem, -2rem, 2px) rotate(-9deg);
}

section#worktogether div.offer div.shadowContainer
{
    opacity: 1;
    transition-property: opacity;
    transition-duration: 0.25s;
    transition-timing-function: ease-out
}

section#worktogether div.offer .study img
{
    width: 100%;
    height: auto;
}

section#worktogether div.offer .study.vertical
{
    height: 13rem;
    width: auto;
    aspect-ratio: 0.547;
}

section#worktogether div.offer.compact a.booking
{
    position: absolute;
    margin: 0;
    bottom: -5rem;
    left: 24%;
}

section#worktogether div.offer.wide a.booking strong.second,
section#worktogether div.offer.project a.booking strong.second
{
    font-size: 2.89rem;
}

section#worktogether div.offer.audit
{
    rotate: 0.5deg;
}

section#worktogether div.offer.workshop
{
    rotate: -0.35deg;
}

section#worktogether div.offer.sprint
{
    rotate: -0.25deg;
}

section#worktogether div.offer.retainer
{
    rotate: 0.5deg;
}

section#worktogether div.offer.consultation
{
    rotate: 0.4deg;
}

section#worktogether div.offer.project
{
    rotate: -0.5deg
}

section#aboutme div#desk
{
    height: 85rem;
    position: relative;
}

section#aboutme
{
    margin-top: 7rem;
    margin-bottom: -5rem;
}

section#aboutme h2
{
    background-image: url(../images/headings/long_single3.svg);
    padding: 0rem 5rem;
    position: relative;
    display: block;
    width: fit-content;
    margin: 0 calc(0rem + 15%) 2rem auto;
}

section#aboutme div.intro
{
    position: relative;
    display: inline-block;
    margin: 0 0 -2rem calc(50% - 33rem);
    white-space: nowrap;
}

section#aboutme div.intro p
{
    position: relative;
    font-family: 'mrdodo';
    font-weight: 100;
    font-size: 5rem;
    color: var(--white200);
    text-transform: uppercase;
    margin: 0;
    letter-spacing: -0.15rem;
    margin: 1rem 6rem;
}

section#aboutme div.intro svg
{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

section#aboutme div.intro svg path
{
    fill: var(--dark100)
}

section#aboutme div.phone.background
{
    position: absolute;
    background-image: url('../images/aboutme/aboutme_phone_desktop.svg?v2');
    background-size: 100% 100%;
    height: 60rem;
    width: 41.75rem;
    transform: translate(calc(50vw - 50%), 0);
}

section#aboutme.withinViewport div.phone.background
{
    perspective-origin: 185% 0%;
    perspective: 6000px;
}

section#aboutme div.phone div.screen
{
    position: absolute;
    background-color: var(--white200);
    width: 74.75%;
    height: 89.25%;
    transform: translate3d(5rem, 0.75rem, 0) rotate3d(0, 0, 1, 4deg) rotate3d(1, 0, 0, 20deg);
}

section#aboutme.withinViewport div.phone div.screen
{
    clip-path:url(#clip); 
    -webkit-clip-path:url(#clip);
}

section#aboutme div.phone div.screen header
{
    position: relative;
}

section#aboutme div.phone div.screen div.content
{    
    position: relative;
    padding: 1rem 1rem;
    gap: 0.75rem;
    display: flex;
    flex-direction: column;
}

section#aboutme div.phone div.screen header img.profilepic
{
    width: auto;
    height: 24rem;
}

section#aboutme div.phone div.screen header h3
{
    font-family: 'mrdodo';
    font-weight: 200;
    font-size: 4rem;
    text-transform: uppercase;
    color: var(--white100);
    position: absolute;
    bottom: 2rem;
    left: 1.5rem;
    margin: 0;   
}

section#aboutme div.phone div.screen header p
{
    font-family: 'mrdodo';
    font-weight: 200;
    font-size: 1.4rem;
    text-transform: uppercase;
    color: var(--white200);
    position: absolute;
    bottom: 1.25rem;
    letter-spacing: -0.005rem;
    left: 1.5rem;
    margin: 0;
}

section#aboutme div.phone div.screen div.interactable
{
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
}

section#aboutme.withinViewport div.phone div.screen div.interactable
{
    perspective-origin: 100% 100%;
    perspective: 1000px;
}

section#aboutme div.phone div.screen div.shadowContainer
{
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
}

section#aboutme.withinViewport div.phone div.screen div.shadowContainer
{
    perspective-origin: -30vh -30vh;
    perspective: 500px;
    transition-property: opacity;
    transition-duration: 0.5s;
    transition-timing-function: cubic-bezier(0.5, 0, 0, 1);
}

section#aboutme div.phone div.screen header a.like img
{
    width: 100%;
    height: auto;
}

section#aboutme div.phone div.screen .like
{
    position: absolute;
    right: 2rem;
    top: 2rem;
    width: 6.5rem;
    z-index: 1;
}

section#aboutme div.phone div.screen .like
{
    transition-property: transform;
    transition-duration: 0.5s;
    transition-timing-function: cubic-bezier(0.5, 0, 0, 1);
    transform: translate3d(0px, 0px, 3px);
}

section#aboutme div.phone div.screen img.dislike
{
    position: absolute;
    right: 3.5rem;
    top: 9.25rem;
    width: 3.5rem;
    rotate: 19deg;
}

section#aboutme div.phone div.screen div.social,
section#aboutme div.phone div.screen div.experience,
section#aboutme div.phone div.screen div.vibes,
section#aboutme div.phone div.screen div.hobbies
{
    background-color: var(--white100);
    padding: 0.5rem 1rem;
    border-radius: 16px;
    corner-shape: bevel;
    position: relative;
}

section#aboutme div.phone div.screen ul
{
    padding: 0;
    margin: 0.5rem 0;
}

section#aboutme div.phone div.screen li
{
    display: inline-block;
}

section#aboutme div.phone div.screen div.content h4
{
    font-family: 'mrdodo';
    font-weight: 300;
    font-size: 1.5rem;
    text-transform: uppercase;
    color: var(--dark200);
    margin: 0;
}

section#aboutme div.phone div.social div.shadowContainer
{
    padding: 0.5rem 1rem;
}

section#aboutme.withinViewport div.phone div.social
{
    perspective-origin: 100% 100%;
    perspective: 1000px;
}

section#aboutme div.phone div.social img
{
    transform: translate3d(0, 0, 2px);
    margin-right: 0.5rem;
}

section#aboutme.withinViewport div.phone div.social img
{
    transition-property: transform;
    transition-duration: 0.25s;
    transition-timing-function: cubic-bezier(0.25, 0, 0.25, 1);
}

section#aboutme.withinViewport div.phone div.social .shadowContainer img
{
    transition-property: transform, opacity;
}

section#aboutme div.phone div.social a
{
    display: inline-block;
    transform-style: preserve-3d;
    z-index: 1;
    position: relative;
}

section#aboutme div.phone div.creds
{
    display: flex;
    gap: 1rem;
    z-index: 1;
}

section#aboutme div.phone div.experience
{
    flex: 1;
    z-index: 1;
}

section#aboutme div.phone div.experience strong
{
    font-weight: 200;
}

section#aboutme div.phone div.screen a.certificate
{
    position: relative;
}

section#aboutme.withinViewport div.phone div.screen a.certificate
{
    perspective-origin: 100% 100%;
    perspective: 1000px;
}

section#aboutme div.phone a.certificate .item
{
    position: relative;
    height: 7.75rem;
    width: 7.75rem;
}

section#aboutme.withinViewport div.phone a.certificate .item
{
    transform: translate3d(0px, 0px, 3px);
    transition-property: transform;
    transition-duration: 0.35s;
    transition-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
}

section#aboutme.withinViewport div.phone a.certificate .shadowContainer .item
{
    transition-property: transform, opacity;
}

section#aboutme div.phone a.certificate .shadowContainer .item path
{
    fill: var(--primary)
}

section#aboutme div.phone a.certificate div.item.foreground
{
    background-image: url('../images/aboutme/aboutme_profile_cert_background.svg');
    background-size: 100% 100%;
}

section#aboutme div.phone div.screen a.certificate h4
{
    color: var(--white100);
    font-size: 1.75rem;
    position: absolute;
    width: 100%;
    transform: translate(0%, 3.15rem);
    text-align: center;
    font-weight: 300;
    letter-spacing: -0.05rem;
}

section#aboutme div.phone div.screen a.certificate p
{    
    margin: 0;
    color: var(--white200);
    position: absolute;
    transform: translate(0%, 5rem);
    font-family: 'mrdodo';
    font-weight: 100;
    text-transform: uppercase;
    letter-spacing: -0.01rem;
    width: 100%;
    text-align: center;
    font-size: 0.85rem;
}


section#aboutme div.phone a.certificate img.machinations.logo
{    
    width: 100%;
    height: 2rem;
    margin-top: 1rem;
}

section#aboutme div.phone div.screen div.hobbies
{
    padding: 0.5rem 0.5rem 0.25rem 0.5rem
}

section#aboutme div.phone div.vibes ul
{
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto auto;
    gap: 0.5rem;
}

section#aboutme div.phone div.hobbies ul
{
    margin: 0;
}

section#aboutme div.phone div.hobbies li
{
    background-color: var(--light100);
    font-family: 'mrdodo';
    font-weight: 200;
    border-radius: 8px;
    corner-shape: bevel;
    padding: 0.25rem 0.65rem;
    text-transform: uppercase;
    letter-spacing: -0.01rem;
    margin-bottom: 0.25rem;
}

section#aboutme img#goggles
{    
    width: 70rem;
    position: absolute;
    left: 50%;
    transform: translate(calc(-50% + 56rem), 46rem) rotate(-15deg);
}

section#aboutme img#ticket
{    
    width: 70rem;
    position: absolute;
    left: 50%;
    transform: translate(calc(-50% - 35rem), 42rem) rotate(35deg);
}

section#aboutme img#wheels
{
    position: absolute;
    left: 70%;
    transform: translate(calc(-50% + 10rem), 21rem);
    width: 26rem;
}

section#aboutme img#controller
{    
    position: absolute;
    left: 30%;
    transform: translate(calc(-50% - 30rem), 12rem) rotate(-5deg);
    width: 61rem;
}

section#aboutme a.cv
{    
    position: absolute;
    right: -30rem;
    rotate: -7deg;
    top: -4rem;
    width: fit-content;
}

section#aboutme.withinViewport a.cv
{
    perspective: 500px;
    perspective-origin: 0 0;
}

section#aboutme a.cv .document
{    
    position: relative;
    width: 40rem;
}

section#aboutme.withinViewport a.cv .document
{
    transform: translate3d(0, 0, 2px);
    transition-property: transform;
    transition-duration: 0.5s;
    transition-timing-function: cubic-bezier(0.25, 0, 0, 1);    
}

section#aboutme a.cv div.shadowContainer
{    
    position: absolute;
    width: 100%;
    height: 100%;
}


section#aboutme.withinViewport a.cv div.shadowContainer
{    
    perspective-origin: -130vh -50vh;
    perspective: 500px;
}

section#aboutme.withinViewport a.cv img.document
{    
    transition-property: transform, filter;
}

section#aboutme a.cv div.shadowContainer div.document
{    
    height: 100%;
    background-color: var(--primary);
}

section#aboutme div#cvBanner
{    
    position: absolute;
    right: 6rem;
    padding: 0rem 6rem 0rem 9rem;
    top: 12.5rem;
    rotate: -9deg;
}

section#aboutme div#cvBanner svg
{    
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    scale: -1 1;
}

section#aboutme div#cvBanner svg path
{    
    fill: var(--dark200);
}

section#aboutme div#cvBanner h3
{    
    position: relative;
    font-family: 'mrdodo';
    font-size: 6rem;
    font-weight: 200;
    text-transform: uppercase;
    color: var(--white200);
    margin: 0;
}

@media (min-width: 1360px)
{
    section#worktogether div.offer.wide div.content
    {
        padding: 3rem 5.5rem 4rem 5.5rem;
        display: grid;
        grid-template-columns: auto minmax(20rem, 1fr) minmax(16rem, 1fr) minmax(16rem, 0.65fr) auto;
        grid-template-rows: auto auto;
        column-gap: 2%;
    }

    section#worktogether div.offer.wide div.content > p.description
    {
        grid-row: 2;
        grid-column: 2;
        margin-bottom: 2rem;
        margin-right: 2rem;
    }

    section#worktogether div.offer.wide h4.purpose
    {
        grid-row: 1;
        grid-column: 3;
    }

    section#worktogether div.offer.wide div.purpose
    {
        grid-row: 2;
        grid-column: 3;
    }

    section#worktogether div.offer.wide h4,
    section#worktogether div.offer.wide h3
    {
        align-self: end; 
    }

    section#worktogether div.offer.wide h4.studies
    {
        grid-row: 1;
        grid-column: 4;
    }

    section#worktogether div.offer.wide div.studies
    {
        grid-row: 2;
        grid-column: 4;
    }

    section#worktogether div.offer.wide a.booking
    {
        grid-column: 5;
        grid-row: 1 / 3;
        margin: 0 -6rem 0 0;
        align-self: center;
    }
    
    section#worktogether div.offer.compact
    {
        flex: 1;
        margin-bottom: 16rem;
    }
}

@media (hover: hover) and (pointer: fine) 
{
    div.card:hover
    {
        z-index: 2;
    }

    div.card:hover div.scaling
    {
        transform: scale(1.075);
    }

    div.card:hover div.shadow
    {
        transform: translate(10%, 6.5%) scale(1.05);
        opacity: 0.75;
    }

    section#worktogether input#certificateDownloadOptin:hover ~ .extras,
    section#worktogether input#certificateDownloadOptin:hover ~ .shadowContainer .extras
    {   
        transform: translate3d(-16rem, -18rem, 35px) rotate3d(0.5, 0.5, 1, -7deg) rotate(0deg);
    }

    section#worktogether input#certificateDownloadOpen:hover ~ .document.examn .inner,
    section#worktogether input#certificateDownloadOpen:hover ~ div.shadowContainer .document.examn .inner
    {
        transform: scale(1, 1) translate3d(-21rem, -5rem, 177px) rotate3d(-0.1, 0.5, -1, 22deg);
    }

    section#worktogether input#certificateDownloadOpen:hover ~ .document.certificate .inner,
    section#worktogether input#certificateDownloadOpen:hover ~ div.shadowContainer .document.certificate .inner
    {
        transform: scale(1, 1) translate3d(0px, 1rem, 250px) rotate3d(1, 1, 0, -18deg);
    }

    section#worktogether input.one:hover ~ .document.examn .inner,
    section#worktogether input.one:hover ~ div.shadowContainer .document.examn .inner
    {
        transform: scale(1.5, 1.5) translate3d(-55rem, -10rem, 87px) rotate3d(-0.1, 0.5, -1, 9deg);
    }

    section#worktogether input.one:hover ~ .document.certificate .inner,
    section#worktogether input.one:hover ~ div.shadowContainer .document.certificate .inner
    {
        transform: scale(1.5, 1.5) translate3d(-40rem, -3rem, 60px) rotate3d(1, 1, 0, -6deg);
    }

    section#worktogether input#certificateDownloadOpen:hover ~ div.shadowContainer
    {
        opacity: 0.75;
    }

    section#worktogether form#examn label.answer:hover
    {
        color: var(--accentGreenTxt);
    }

    section#worktogether form#examn label.answer:hover .answerBox,
    section#worktogether form#examn label.answer:hover div.checkmark
    {
        transform: scale(1.2);
        transition-duration: 0.35s;
        transition-timing-function: cubic-bezier(.5, 3.5, 0.25, -0.5);
    }

    section#worktogether form#examn textarea:hover
    {
        transform: scale(1.05);
    }

    section#worktogether input#submit:hover ~ label.finish img.icon
    {
        transform: translate(-50%, 0%) translate3d(0px, 0px, 11px) translate(50%, 0%) rotate3d(-1, -1, 0, 14deg);
    }

    section#worktogether input#submit:hover ~ label.finish
    {    
        transform: translate(-50%) translate3d(0rem, -2rem, 120px) rotate3d(-0.5, -1, 0, -20deg);
        color: var(--white100)
    }

    section#worktogether input#idle:hover ~ div.retry.outerMask
    {
        transform: translate3d(0,0,150px) rotate3d(0.35, -1, 0.25, 30deg)
    }

    section#worktogether input#idle:hover ~ div.confirm .cancel label,
    section#worktogether input#confirm:hover ~ div.confirm .proceed label
    {
        color: var(--white100);
    }

    section#worktogether input#idle:hover ~ div.confirm .cancel label img.icon,
    section#worktogether input#confirm:hover ~ div.confirm .proceed label img.icon
    {
        transform: translate3d(0px, 0px, 0px);
    }

    section#worktogether input#idle:hover ~ div.confirm div.outerMask.cancel
    {
        transform: translate3d(0,0, 180px) rotate3d(0.5, 1, -0.1, 30deg);
    }

    section#worktogether input#idle:hover ~ div.retry label svg.icon.fg
    {
        margin-left: 0rem;
        margin-top: 0rem;
    }

    section#worktogether input#confirm:hover ~ div.confirm div.outerMask.proceed
    {
        transform: rotate3d(0.5, -1, -0, 30deg) translate3d(0,0, 120px);
    }

    section#worktogether input#unlock:hover ~ div.scaling div#celebration div#lock svg.top
    {
        top: -6rem;
        width: 7.5rem;
    }

    section#worktogether input#unlock:hover ~ div.scaling div#celebration div.hoverShift
    {
        transform: translate3d(0,0,165px) rotate3d(1, 1, 1, 5deg);
    }

    section#worktogether input#certificateDownloadOptinRedo:hover ~ div.dialogue.root.certificateDownload.one div.pane
    {
        transform: scale(0.5) translate3d(-50%, 50%, 10px) rotate3d(-1,-0.25,0,5deg) translate(50%, calc(-50% - 3rem)) rotate(-7deg);
        transition-delay: 0s;
        transition-duration: 0.5s;
    }

    section#worktogether input#certificateDownloadPersonalisationRedo:hover ~ div.dialogue.root.certificateDownload.two div.pane
    {
        transform: scale(0.5) translate3d(50%, 50%, 15px) rotate3d(0, -1, 0, -4deg) translate(-50%, calc(-50% - 4rem)) rotate(3deg);
        transition-delay: 0s;
        transition-duration: 0.5s;
    }

    section#worktogether div.offer .study:hover + div.shadowContainer
    {
        z-index: 2;
    }

    section#worktogether div.offer .study:hover
    {
        z-index: 3;
        filter: brightness(0.98);
        border-color: #DDDDDD00;
    }

    section#worktogether div.offer .study:hover + div.shadowContainer
    {
        opacity: 0.65;
    }

    section#worktogether div.offer.audit .study.tubics:hover,
    section#worktogether div.offer.audit .study.tubics:hover + div.shadowContainer div.shadow
    {
        transform: rotate3d(-1, -1, 0, 13deg) translate3d(1rem, 2rem, 40px) rotate(8deg);
    }

    section#worktogether div.offer.workshop .study.plamp:hover,
    section#worktogether div.offer.workshop .study.plamp:hover + div.shadowContainer div.shadow
    {
        transform: translate3d(7rem, 5rem, 29px) rotate3d(1, -1, -0.5, 15deg) rotate(-3deg);
    }

    section#worktogether div.offer.workshop .study.rotable:hover,
    section#worktogether div.offer.workshop .study.rotable:hover + div.shadowContainer div.shadow
    {
        transform: translate3d(-1rem, 2rem, 24px) rotate3d(-1, -1, -1, 13deg) rotate(11deg);
    }

    section#worktogether div.offer.sprint .study.tubics:hover,
    section#worktogether div.offer.sprint .study.tubics:hover + div.shadowContainer div.shadow
    {
        transform: translate3d(1rem, 2rem, 29px) rotate3d(-1, 1, 1, 13deg) rotate(-7deg);
    }

    section#worktogether div.offer.retainer .study.tricentis:hover,
    section#worktogether div.offer.retainer .study.tricentis:hover + div.shadowContainer div.shadow
    {
        transform: translate3d(4rem, -0.5rem, 54px) rotate3d(-1, -0.5, 0, 26deg) rotate(-7deg);
    }

    section#worktogether div.offer.retainer .study.emarsys:hover,
    section#worktogether div.offer.retainer .study.emarsys:hover + div.shadowContainer div.shadow
    {
        transform: translate3d(-2rem, 3.75rem, 33px) rotate3d(0, 1, 0, 14deg) rotate(6deg);
    }

    section#worktogether div.offer.retainer .study.lotteries:hover,
    section#worktogether div.offer.retainer .study.lotteries:hover + div.shadowContainer div.shadow
    {
        transform: translate3d(5rem, 7.5rem, 24px) rotate3d(1, 0.25, 0, 14deg) rotate(-2deg);
    }

    section#worktogether div.offer.consultation .study.rotable:hover,
    section#worktogether div.offer.consultation .study.rotable:hover + div.shadowContainer div.shadow
    {
        transform: translate3d(2rem, 2.25rem, 32px) rotate3d(0.25, 1, -0.25, 16deg) rotate(3deg);
    }

    section#worktogether div.offer.project .study.damit:hover,
    section#worktogether div.offer.project .study.damit:hover + div.shadowContainer div.shadow
    {
        transform: translate3d(7rem, 2rem, 16px) rotate(0deg);
    }

    section#worktogether div.offer.project .study.riddler:hover,
    section#worktogether div.offer.project .study.riddler:hover + div.shadowContainer div.shadow
    {
        transform: translate3d(0.5rem, 1rem, 17px) rotate3d(0, 1, 0, 12deg) rotate(4deg);
    }

    section#worktogether div.offer.project .study.duck:hover,
    section#worktogether div.offer.project .study.duck:hover + div.shadowContainer div.shadow
    {
        transform: translate3d(12.25rem, -2rem, 26px) rotate3d(-0.3, -1, 0, 18deg) rotate(-9deg);
    }

    section#aboutme div.phone div.screen header a:hover,
    section#aboutme div.phone div.screen header a:hover ~ .shadowContainer img.like
    {
        transform: translate3d(0px, 0px, 25px) rotate3d(-1, 1, 0, 14deg);
    }

    section#aboutme div.phone div.social a.linkedin:hover > img,
    section#aboutme div.phone div.social a.linkedin:hover ~ .shadowContainer img.linkedin
    {
        transform: translate3d(0, 0, 13px) rotate3d(-0.5, 1, 0, 12deg);
    }

    section#aboutme div.phone div.social a.mail:hover > img,
    section#aboutme div.phone div.social a.mail:hover ~ .shadowContainer img.mail
    {
        transform: translate3d(0, 0, 13px) rotate3d(-1, -1, 0, 11deg)
    }

    section#aboutme div.phone div.social a.insta:hover > img,
    section#aboutme div.phone div.social a.insta:hover ~ .shadowContainer img.insta
    {
        transform: translate3d(0, 0, 13px) rotate3d(-1, 0.5, 0, 10deg);
    }

    section#aboutme div.phone div.social a.linkedin:hover ~ .shadowContainer img.linkedin,
    section#aboutme div.phone div.social a.mail:hover ~ .shadowContainer img.mail,
    section#aboutme div.phone div.social a.insta:hover ~ .shadowContainer img.insta
    {
        opacity: 0.85;
    }

    section#aboutme div.phone div.screen header a:hover ~ div.shadowContainer
    {
        opacity: 0.75;
    }

    section#aboutme div.phone a.certificate:hover .item
    {
        transform: translate3d(0px, 0px, 35px) rotate3d(-1, -1, 0, 7deg);
    }

    section#aboutme div.phone a.certificate:hover .shadowContainer .item
    {
        opacity: 0.75;
    }

    section#aboutme a:hover.cv
    {    
        z-index: 1;
    }

    section#aboutme a.cv:hover .document
    {    
        animation: none;
        transform: translate3d(-11rem, 0, 85px) rotate3d(0.5, -1, 0, -6deg);
    }

    section#aboutme a:hover.cv img.document
    {    
        filter: brightness(0.9);
    }
}

@media (hover: none), not (pointer: fine), (max-width: 960px)
{
    div.card,
    section#cards input.picker
    {
        transition-property: bottom, left, rotate, transform;
        height: 16.675rem;
        transition-duration: var(--cardSwitchDuration);
        transition-timing-function: cubic-bezier(0.15, 0.15, 0, 1);
    }

    div.cards.container
    {
        height: 41rem;
        margin: 0;
    }

    div.card:hover div.shadow
    {
        transform: unset;
        opacity: unset;
    }
    
    div.card span.tier
    {
        font-size: 1rem;
    }

    div.card div.back p,
    div.card div.back strong
    {
        font-size: 0.62rem;
        letter-spacing: 0.015rem;
    }

    div.card div.back strong
    {
        letter-spacing: -0.015rem;
    }

    section#cards h2.section
    {
        margin-left: calc(15% - 3rem);
    }

    section#cards input.picker
    {
        display: block;
    }

    section#cards input.picker:checked
    {
        display: none;
    }

    div.card#authenticity,
    #authenticityPick
    {
        top: unset;
        bottom: 4%;
        left: 36%;
        rotate: -80deg;
    }

    div.card#qualitative,
    #qualitativePick
    {
        top: unset;
        bottom: 13%;
        left: 84%;
        rotate: -20deg;
    }

    div.card#fun,
    #funPick
    {
        top: unset;
        bottom: 8%;
        left: 45%;
        rotate: -65deg;
    }

    div.card#kpi,
    #kpiPick
    {
        top: unset;
        bottom: 11%;
        left: 98%;
        rotate: -5deg;
    }

    div.card#inclusive,
    #inclusivePick
    {
        top: unset;
        bottom: 11%;
        left: 56%;
        rotate: -50deg;
    }

    div.card#holistic,
    #holisticPick
    {
        top: unset;
        bottom: 13%;
        left: 70%;
        rotate: -35deg;
    }

    #authenticityPick:checked ~ div.card#authenticity,
    #qualitativePick:checked ~ div.card#qualitative,
    #funPick:checked ~ div.card#fun,
    #kpiPick:checked ~ div.card#kpi,
    #inclusivePick:checked ~ div.card#inclusive,
    #holisticPick:checked ~ div.card#holistic
    {
        bottom: 55%;
        left: calc(6vh + 30vw);
        rotate: -2.69deg;
        z-index: 2;
    }

    #authenticityPick:checked ~ div.card#authenticity .scaling,
    #qualitativePick:checked ~ div.card#qualitative .scaling,
    #funPick:checked ~ div.card#fun .scaling,
    #kpiPick:checked ~ div.card#kpi .scaling,
    #inclusivePick:checked ~ div.card#inclusive .scaling,
    #holisticPick:checked ~ div.card#holistic .scaling
    {
        transform: scale(1.4);
    }

    #authenticityPick:checked ~ div.card#authenticity div.shadow,
    #qualitativePick:checked ~ div.card#qualitative div.shadow,
    #funPick:checked ~ div.card#fun div.shadow,
    #kpiPick:checked ~ div.card#kpi div.shadow,
    #inclusivePick:checked ~ div.card#inclusive div.shadow,
    #holisticPick:checked ~ div.card#holistic div.shadow
    {
        transform: translate(10%, 6.5%) scale(1.05);
        opacity: 0.75;
    }

    input.cardSwitch
    {
        display: none;
    }

    #authenticityPick:checked ~ div.card#authenticity input.cardSwitch,
    #qualitativePick:checked ~ div.card#qualitative input.cardSwitch,
    #funPick:checked ~ div.card#fun input.cardSwitch,
    #kpiPick:checked ~ div.card#kpi input.cardSwitch,
    #inclusivePick:checked ~ div.card#inclusive input.cardSwitch,
    #holisticPick:checked ~ div.card#holistic input.cardSwitch
    {
        display: unset;
    }

    div.card img.side.left
    {
        transform: translateX(-50%) rotate3d(0, 1, 0, -90deg) translateZ(5.47rem);
    }

    div.card input.cardSwitch:checked ~ img.side.left 
    {
        transform: translateX(-50%) rotate3d(0, 1, 0, 90deg) translateZ(5.47rem);
    }

    img#dice
    {
        width: 7rem;
    }

    img#pawn
    {
        width: 7rem;
        left: calc(-22vh + 40vw);
        top: unset;
        bottom: 14%;
        transform: translateX(0);
    }

    img#cards_pen
    {
        left: unset;
        height: 24rem;
        bottom: 56%;
        top: unset;
        right: calc(-32vh + 20vw);
        transform: translateX(0);
    }
}

@media (hover: none) and (min-width: 640px), not (pointer: fine) and (min-width: 640px)
{
    section#worktogether
    {
        margin-top: -5vh;
    }
}

@media (max-height: 1080px) and (pointer: fine) and (hover: hover) and (min-width: 960px), (max-width: 1600px) and (pointer: fine) and (hover: hover) and (min-width: 960px)
{
    section#cards h2.section
    {
        margin-bottom: -3rem;
    }

    div.cards.container 
    {
        height: 50rem;
    }

    img#pawn
    {
        top: 6rem;
        left: calc(47% + 11.5rem);
        width: 6.75rem;
    }

    img#dice
    {
        top: 15rem;
        left: calc(47% - 8.25rem);
        width: 6.75rem;
    }

    img#cards_pen
    {
        top: 6.75rem;
        left: calc(47% + 27.75rem);
        width: 19.5rem;
    }

    div.card div.scaling
    {
        transform: scale(0.75);
    }

    div.card#authenticity
    {
        top: 4.2rem;
        left: calc(47% + 24rem);
    }

    div.card#qualitative
    {
        top: 6rem;
        left: calc(47% - 20rem);
    }

    div.card#kpi
    {
        top: 22rem;
        left: calc(47% - 10rem);
    }

    div.card#inclusive
    {
        top: 23rem;
        left: calc(47% + 19rem);
    }

    div.card#holistic
    {
        top: 15rem;
        left: calc(47% + 7rem);
    }
}

@media (max-height: 1080px) and (min-width: 1360px)
{
    section#worktogether div.offer.wide header.package strong.entry.option
    {
        font-size: 2rem;
        padding: 0.75rem 1.5rem 0.35rem 1rem;
    }

    section#worktogether div.offer.wide div.content
    {
        padding: 2rem 5.5rem 3rem 4.5rem;
        column-gap: 1.5%;
    }

    section#worktogether div.offer.retainer div.content 
    {
        padding: 2.5rem 5.5rem 2rem 4.5rem;
    }
}

@media (max-height: 1080px) and (min-width: 640px), (max-width: 1600px) and (min-width: 640px)
{
    div#header img#deco
    {
        bottom: 39%;
        transform: translate(31%, 35%);
        height: calc(min(42vh, 28.6rem));
    }

    div#header img#lips
    {
        height: calc(min(20vh, 14rem));
        bottom: 39%;
        transform: translate(28%, 44%);
    }

    div#header .title
    {
        line-height: 0.89;
    }

    div#header h1.title
    {
        transform: translate(-35.5%, -10%);
        bottom: 39%;
        font-size: calc(min(15.5vh, 10.5rem));
    }

    div#header p.title
    {
        transform: translate(-35%, 113%);
        bottom: 39%;
    }

    div#header .title span
    {
        letter-spacing: -0.07em;
    }

    div#header h1.title span.first
    {
        margin-right: -0.82rem;
    }

    div#header h1.title span.second
    {    
        top: 1.5rem;
    }

    div#header p.title span.first
    {
        font-size: calc(min(12.85vh, 8.7rem));
    }

    div#header p.title span.second
    {
        font-size: calc(min(8.1vh, 5.48rem));
    }

    div#header p.subtitle
    {
        right: calc(-11vh + 9vw);
        bottom: 36%;
        transform: translate(-27.5%, 334%) rotate(-6deg);
        font-size: calc(min(1.75rem, 2.58vh));
        width: calc(min(18.5rem, 27.35vh));
        padding: calc(min(0.65rem, 0.96vh)) calc(min(2rem, 2.95vh)) calc(min(1rem, 1.48vh)) calc(min(2rem, 2.95vh));
    }
    
    div#header .arrow
    {
        height: calc(min(3rem, 4.5vh));
        transform: translate(-1250%, 822%);
    }
    
    div#header img.heart 
    {
        bottom: 20%;
    }

    div#header img#band
    {
        bottom: 64%;
    }

    section#worktogether h2.section
    {
        margin-bottom: 8vh;
    }

    section#worktogether header.package strong.entry.option
    {
        font-size: 2.25rem;
        padding: 1rem 1.5rem 0.5rem 1rem;
    }

    section#worktogether header.package strong.entry.type
    {
        font-size: 1.75rem;
        padding: 0.35rem 1.5rem 0.35rem 1.2rem;
        transform: translate(-7.5rem, 1.65rem);
    }
    
    section#worktogether div.offer header.package
    {
        transform: translate(1rem, -0.75rem);
    }

    section#worktogether div.offer h3.title
    {
        font-size: 2.75rem;
        line-height: 2.75rem;
    }

    section#worktogether div.offer h4
    {
        font-size: 1.75rem;
    }

    section#worktogether div.offer svg.title
    {
        align-self: center;
        max-width: 18rem;
        width: 110%;
    }

    section#worktogether div.offer div.content
    {
        padding: 2.75rem 8.5% 5rem 8.5%;
        column-gap: 5%;
    }

    section#worktogether .extended div.locked
    {
        max-height: 50rem;
    }

    section#worktogether div.extended div.independent
    {
        gap: 2%;
    }

    section#worktogether div.offer.compact div.content
    {
        padding: 2.75rem 8.5% 5rem 8.5%;
    }

    section#worktogether h3.separator
    {
        font-size: 2rem;
    }

    section#worktogether img.separator
    {
        padding: 0rem 2rem 2rem 2rem;
    }

    section#worktogether img.progressArrow.one
    {
        margin: 0rem 50% 6rem 50%;
    }

    section#worktogether img.progressArrow.two
    {
        margin: 1.5rem 50% 0rem 50%;
        height: 3rem;
    }

    section#worktogether img.progressArrow
    {
        height: 3rem;
    }

    section#worktogether div.extended div.scaling
    {
        transform: translateY(-50%) scale(0.75) translateY(50%);
    }
    
    section#worktogether .extras
    {
        left: 30%;
    }
    
    section#worktogether input#certificateDownloadOptin:hover ~ .extras, 
    section#worktogether input#certificateDownloadOptin:hover ~ .shadowContainer .extras 
    {
        left: 50%;
    }

    section#worktogether input.one.secondary:not(.redo):checked ~ .extras, 
    section#worktogether input.two:checked ~ .extras, 
    section#worktogether input.one.secondary:not(.redo):checked ~ .shadowContainer .extras, 
    section#worktogether input.two:checked ~ .shadowContainer .extras 
    {
        left: 70%;
    }
    
    section#worktogether input#unlock:checked ~ div.scaling input.choice:checked ~ .document.certificate, 
    section#worktogether input#unlock:checked ~ div.scaling input.choice:checked ~ div.shadowContainer .document.certificate 
    {
        left: 70%;
    }

    section#worktogether input#unlock
    {
        scale: 0.75;
        top: 24rem;
        left: calc(50% - 29rem);
    }

    #firstContact 
    {
        margin: 0 0rem;
    }

    section#aboutme 
    {
        margin-top: 4rem;
        margin-bottom: -2rem;
    }

    section#aboutme div.intro p
    {
        font-size: 3.5rem;
        margin: 0.75rem 4rem;
    }
    
    section#aboutme div.intro
    {
        margin: 0 0 -1rem calc(50% - 23rem);
    }

    section#aboutme h2
    {
        padding: 0rem 3.5rem;
        margin-bottom: 1rem;
    }

    section#aboutme img#controller
    {
        width: 50rem;
        transform: translate(calc(-50% - 25rem), 8.5rem) rotate(-5deg);
    }

    section#aboutme img#wheels
    {
        width: 22rem;
        transform: translate(calc(-50% + 8.5rem), 18rem);
    }

    section#aboutme img#ticket
    {
        width: 60rem;
        transform: translate(calc(-50% - 30rem), 35rem) rotate(35deg);
    }

    section#aboutme img#goggles
    {
        width: 60rem;
        transform: translate(calc(-50% + 48rem), 40rem) rotate(-15deg);
    }

    section#aboutme div#cvBanner
    {
        right: 5rem;
        padding: 0rem 5rem 0rem 7.5rem;
    }

    section#aboutme div#cvBanner h3
    {
        font-size: 4.5rem;
    }

    section#aboutme a.cv
    {
        right: -25rem;
        top: -3.5rem;
    }

    section#aboutme a.cv .document
    {
        width: 34rem;
    }

    section#aboutme div#desk
    {
        height: 70rem;
    }

    section#aboutme div.phone.background
    {
        transform: translate(calc(50vw - 50%), 0) translateY(-50%) scale(0.85) translateY(50%);
    }
}

@media (max-height: 760px) and (min-width: 640px)
{
    div.cards.container
    {
        height: 45rem;
    }
}

@media (orientation: portrait) and ((pointer: none) or (pointer: coarse))
{
    div#topbar-gradient 
    {
        display: block;
    }
}

@media (max-width: 1360px) and (min-width: 1024px) 
{
    section#aboutme 
    {
        margin-top: 20rem;
        margin-bottom: -15rem;
    }

    section#aboutme div.intro p
    {
        width: unset;
    }

    section#aboutme div#desk
    {
        height: 90rem;
    }

    section#aboutme img#ticket
    {
        width: 60rem;
        left: 50%;
        transform: translate(calc(-50% - 38rem), 29rem) rotate(41deg);
    }

    section#aboutme img#wheels
    {
        left: 50%;
        transform: translate(calc(-50% + -25rem), 49rem);
        width: 25rem;
    }

    section#aboutme img#goggles
    {
        width: 70rem;
        left: 50%;
        transform: translate(calc(-50% + 22rem), 41rem) rotate(-16deg);
    }

    section#aboutme img#controller
    {        
        left: 30%;
        transform: translate(calc(-50% + -26rem), 2rem) rotate(25deg);
        width: 50rem;
    }

    section#aboutme div#cvBanner
    {
        right: 50%;
        top: 12.5rem;
        padding: 0rem 4rem 0rem 6rem;
        transform: translate(calc(50% + 20.5rem), 17rem) rotate(-1deg);
    }

    section#aboutme div#cvBanner h3
    {
        font-size: 4rem;
    }

    section#aboutme a.cv
    {
        right: calc(50% - 61rem);
        rotate: -6deg;
        top: -5rem;
    }

    section#aboutme a.cv .document
    {
        width: 35rem;
    }
}

@media (max-width: 1360px) 
{    
    section#worktogether h2.section
    {
        margin-bottom: 4vh;
    }

    section#worktogether .extended input#unlock:checked ~ div.locked,
    section#worktogether .extended div.locked.bypass
    {
        max-height: 250rem;
        padding: 2rem 0 8rem 0rem;
    }

    section#worktogether div.offer.wide a.booking
    {
        position: absolute;
        margin: 0;
        bottom: -5rem;
        left: 19%;
    }

    #firstContact
    {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 4rem;
    }

    section#worktogether div.teaser,
    section#worktogether div.extended div.collaborate,
    section#worktogether div.extended div.independent
    {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    section#worktogether div.teaser
    {
        gap: 2rem;
        padding: 2rem 2rem;
    }

    section#worktogether div.offer
    {
        max-width: 64rem;
    }

    section#worktogether div.offer.compact
    {
        margin-bottom: 7rem;
    }

    section#worktogether img.progressArrow.three
    {
        margin: 1.5rem auto 2rem auto;
    }

    section#worktogether div.dialogue.root.certificateDownload.one div.stamp,
    section#worktogether div.dialogue.root.certificateDownload.two div.stamp
    {
        left: 1rem;
        bottom: 1rem;
    }
}

@media (max-width: 1024px) and (min-width: 640px) 
{
    div#header img.heart 
    {
        right: 22.5rem
    }

    section#worktogether div#examnShoutout
    {
        rotate: -9deg;
        left: calc(40% - 26rem);
        top: -11.25rem;
    }

    section#worktogether div#examnShoutout p
    {
        padding: 1rem 3rem;
    }
    
    section#worktogether div.offer.wide div.content
    {
        padding: 4rem 8% 5rem 8%
    }

    section#worktogether h2.section
    {
        margin: 0rem 4rem 2rem auto;
        padding: 0.5rem 3rem 0.5rem 2rem;
        width: fit-content;
        display: block;
    }

    section#aboutme 
    {
        margin-top: 15rem;
        margin-bottom: 0;
    }

    section#aboutme div.intro p
    {
        width: unset;
    }

    section#aboutme div#desk
    {
        height: 120rem;
    }

    section#aboutme div.phone.background
    {
        transform: translate(calc(60vw - 50%), 0) translateY(-50%) scale(0.85) translateY(50%);
    }

    section#aboutme img#ticket
    {
        width: 60rem;
        left: 50%;
        transform: translate(calc(-50% - 38rem), 29rem) rotate(41deg);
    }

    section#aboutme img#wheels
    {
        transform: translate(calc(-50% + -24.5rem), 9rem);
        left: 60%;
        width: 25rem;
    }

    section#aboutme img#goggles
    {
        width: 70rem;
        left: 50%;
        transform: translate(calc(-50% + 22rem), 41rem) rotate(-16deg);
    }

    section#aboutme img#controller
    {        
        left: 30%;
        transform: translate(calc(-50% + 35rem), 78rem) rotate(21deg);
        width: 50rem;
    }

    section#aboutme div#cvBanner
    {    
        right: 70%;
        top: 12.5rem;
        padding: 0rem 4rem 0rem 6rem;
        transform: translate(calc(50% + -6.5rem), 69rem) rotate(20deg);
    }

    section#aboutme div#cvBanner svg
    {
        scale: 1 1;
    }

    section#aboutme div#cvBanner h3
    {
        font-size: 4rem;
    }

    section#aboutme a.cv
    {
        left: calc(30% - 37rem);
        rotate: 10deg;
        top: 74rem;
    }

    section#aboutme a.cv .document
    {
        width: 35rem;
    }
}

@media (max-width: 640px)
{

    section#worktogether.withinViewport .document
    {
        animation: none;
    }

    section#worktogether.withinViewport input#load:checked ~ div.scaling form#examn
    {
        animation-name: Examn-Shine;
        animation-duration: 2s;
        animation-timing-function: cubic-bezier(.51,0,.71,.22);
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
    }
}

@media (max-width: 640px)
{
    div#header
    {
        margin-bottom: 6rem;
    }

    div#header svg#feather
    {
        left: 24%;
        bottom: calc(-13% + 15vw);
        translate: -51%;
        height: calc(16% + 6vw);
        rotate: 2deg;
    }

    div#header img#paper
    {    
        left: 33%;
        translate: -110%;
        height: calc(38% + 25vw);
        bottom: calc(7% + 17vw);
    }

    div#header img#phone
    {    
        right: -8%;
        translate: -8% -50%;
        height: 39%;
    }

    div#header svg#scribbles
    {
        right: -8%;
        translate: -87% -39%;
        height: 29%;
    }

    div#header img#deco
    {
        right: calc(-22.25rem + 50vw);
        height: 17.75rem;
        bottom: calc(25% + 4.25rem);
        transform: translateY(6.75rem);
    }

    div#header img.heart
    {
        translate: 40%;
        right: calc(34% - 9vh + 5rem);
        bottom: calc(25% + 10rem);
        height: calc(30% + 16vw);
    }

    div#header img#garbage
    {
        display: none;
    }

    div#header img#band
    {
        display: none;
    }

    div#header .title
    {
        right: 3.5vh;
    }

    div#header picture
    {        
        right: -8%;
        transform: translate(-114%, -50%) skew(-7.4deg, 3.4deg);
        width: 11vh;
    }

    div#header p.title
    {
        right: calc(-8.7rem + 50vw);
        bottom: calc(25% + 3rem);
        transform: translateY(8.75rem);
    }

    div#header h1.title
    {
        right: calc(-9rem + 50vw);
        bottom: calc(25% + 4.25rem);
        transform: unset;
        font-size: 7rem;
    }

    div#header h1.title span.first
    {
        margin-right: -0.6rem;
    }

    div#header h1.title span.second
    {
        top: 1rem;
    }

    div#header p.title span.first
    {
        font-size: 5.65rem;
    }

    div#header p.title span.second
    {
        font-size: 3.6rem;
    }

    div#header p.subtitle
    {
        bottom: calc(25% + 3rem);
        right: calc(-9rem + 50vw);
        transform: translateY(12.5rem) rotate(-4deg);
        font-size: 1.075rem;
        width: 12.25rem;
        padding: 0.5rem 0.75rem 0.5rem 1rem;
        line-height: 1;
    }

    div#header .arrow
    {
        right: calc(-8.7rem + 50vw);
        bottom: calc(25% + 3rem);
        height: 2.5rem;
        transform: translate(-6.5rem, 15.5rem);
    }
    
    div#header img#lips
    {
        height: 8.25rem;
        transform: translateY(5rem) rotate(10deg);
        right: calc(-15.25rem + 50vw);
        bottom: calc(25% + 4.25rem);
    }

    img#pawn
    {
        display: none;
        width: 16vh;
        left: 65%;
        top: 20%;
        transform: translateX(0);
    }

    section#aboutme
    {
        margin-top: 20rem;
    }

    section#aboutme h2
    {
        padding: 0.5rem 2.5rem 0.5rem 2rem;
        margin: 0px auto 2rem 3%;
        white-space: nowrap;
    }
    
    section#aboutme div.intro
    {
        margin: 0px 0% -1.75rem 6%;
        white-space: normal;
    }

    section#aboutme div.intro p
    {
        font-size: 2.5rem;
        letter-spacing: -0.1rem;
        margin: 0.5rem 2.5rem 1.5rem 2rem;
        display: inline-block;
        width: 14.5rem;
    }

    section#worktogether
    {
        margin-top: 0;
    }

    section#worktogether h2.section
    {
        margin-left: -23rem;
        padding: 1rem 4rem 1rem 25rem;
        width: 14rem;
        margin-bottom: 2rem;
        white-space: normal;
    }

    section#worktogether div.teaser,
    section#worktogether div.extended div.collaborate,
    section#worktogether div.extended div.independent
    {
        padding: 2rem 0.75rem;
    }

    section#worktogether div.offer
    {
        max-width: 32rem;
    }

    #firstContact 
    {
        gap: 2rem;
        margin: 1rem auto 2rem auto;
    }

    section#worktogether div.offer header.package
    {
        transform: translate(-0.25rem, -1rem);
    }

    section#worktogether .offer header.package strong.entry.option
    {
        font-size: 2rem;
        padding: 0.75rem 1.25rem 0.5rem 1rem;
    }
    
    section#worktogether .offer header.package strong.entry.type
    {
        font-size: 1.5rem;
        padding: 0.25rem 1.2rem 0.1rem 1rem;
        transform: translate(-6rem, 1.25rem);
    }
    
    section#worktogether div.offer div.content,
    section#worktogether div.offer.wide div.content,
    section#worktogether div.offer.compact div.content
    {
        padding: 8.5vw 9.5vw;
        grid-template-columns: auto;
        grid-template-rows: auto auto auto auto auto auto auto auto;
        column-gap: 0;
        row-gap: 0.25rem;
        align-items: end;
    }

    section#worktogether div.offer div.content h3.title
    {
        grid-row: 2;
        grid-column: 1;
        font-size: 2.75rem;
        letter-spacing: -0.15rem;
        margin-left: -0.1rem;
    }

    section#worktogether div.offer div.content h3.title span
    {
        font-size: 2rem;
        display: none;
    }

    section#worktogether div.offer div.content > p.description,
    section#worktogether div.offer.wide div.content > p.description
    {
        grid-row: 3;
        grid-column: 1;
        margin: 0 0 0.4rem 0;
    }

    section#worktogether div.offer div.content p.description
    {
        margin: 0 0 0.4rem 0;
    }

    section#worktogether div.offer div.content ul
    {
        margin: 0 0 0.4rem 0;
    }

    section#worktogether div.offer div.content svg.title
    {
        width: 75%;
        max-width: 20rem;
        grid-row: 1;
        grid-column: 1;
    }

    section#worktogether div.offer.audit div.content svg.title
    {
        margin-bottom: -0.25rem;
    }

    section#worktogether div.offer.workshop div.content svg.title
    {
        margin-top: 0.5rem;
        margin-bottom: 0.25rem;
    }

    section#worktogether div.offer div.content h4
    {
        font-size: 1.5rem;
        letter-spacing: -0.0375rem;
    }

    section#worktogether div.offer div.content h4.purpose
    {    
        grid-row: 4;
        grid-column: 1;
        display: none;
    }

    section#worktogether div.offer div.content div.purpose
    {
        grid-row: 5;
        grid-column: 1;
        display: none;
    }

    section#worktogether div.offer div.content h4.studies
    {
        grid-row: 4;
        grid-column: 1;
    }

    section#worktogether div.offer div.content div.studies
    {
        position: relative;
        grid-row: 5;
        grid-column: 1;
        height: 2.75rem;
    }

    section#worktogether div.offer div.content .study
    {
        width: 10rem;
    }

    section#worktogether div.offer div.content .study.vertical
    {
        width: unset;
        height: 10rem;
    }

    section#worktogether div.offer.compact
    {
        margin-bottom: 5rem;
    }

    section#worktogether div.offer.audit .study.tubics
    {
        transform: translate3d(1rem, 0.2rem, 2px) rotate(5deg);
    }

    section#worktogether div.offer.workshop .study.rotable
    {
        transform: translate3d(-2rem, 0.75rem, 1px) rotate(6deg);
    }

    section#worktogether div.offer.workshop .study.plamp
    {
        transform: translate3d(6.5rem, -0.5rem, 2px) rotate(-3deg);
    }
    
    section#worktogether div.offer.sprint .study.tubics
    {
        transform: translate3d(0rem, 0rem, 2px) rotate(-7deg);
    }

    section#worktogether div.offer.retainer .study.tricentis
    {
        transform: translate3d(0.75rem, -0.75rem, 1px) rotate(-4deg);
    }

    section#worktogether div.offer.retainer .study.emarsys
    {
        transform: translate3d(-2rem, 3rem, 1.5px) rotate(12deg);
    }

    section#worktogether div.offer.retainer .study.lotteries
    {
        transform: translate3d(1.5rem, 6.5rem, 2px) rotate(-21deg);
    }
    
    section#worktogether div.offer.consultation .study.rotable
    {
        transform: translate3d(-0.4rem, 0.25rem, 2px) rotate(3deg);
    }

    section#worktogether div.offer.project .study.damit
    {
        transform: translate3d(1.75rem, 4.5rem, 1px) rotate(4deg);
    }

    section#worktogether div.offer.project .study.riddler
    {
        transform: translate3d(-2.5rem, 0rem, 2px) rotate(5deg);
    }

    section#worktogether div.offer.project .study.duck
    {
        transform: translate3d(5.25rem, 0.5rem, 2px) rotate(-12deg);
    }

    section#worktogether h3.separator
    {
        font-size: 1.75rem;
        margin-top: 10rem;
        left: 95%;
    }

    section#worktogether img.separator
    {
        width: calc(108%);
        padding: 0.5rem 0rem 2rem 0rem;
        margin: 0 -1rem;
    }

    section#worktogether img.progressArrow.one
    {
        margin: 0rem 50% 5rem 50%;
        height: 3rem;
    }

    section#worktogether div.extended div.scaling
    {
        transform: translateY(-50%) scale(0.6) translateY(50%);
        perspective-origin: 50% 25rem;
    }

    section#worktogether .examn
    {
        transform: 
            rotate(calc(15deg * (1 - var(--floatAmount)))) 
            scale3d(calc(0.25 + 0.75 * var(--floatAmount)), calc(0.25 + 0.75 * var(--floatAmount)), calc(0.25 + 0.75 * var(--floatAmount))) 
            translateX(-50%) translate3d(0, 0, calc(7px + var(--floatAmount) * 25px + var(--t) * 5px)) 
            rotate3d(0.5, -1, 1, calc(1deg * var(--floatAmount)));
    }

    section#worktogether div.certificate
    {
        transform: translate3d(-100vw, -7rem, 300px) scale3d(1, 1, 1) translateX(-110%) rotate3d(0.5, -1, 1, -45deg) rotate(0deg);
    }

    section#worktogether .extended div.locked
    {
        padding: 2rem 0rem 10rem 0rem;
        mask-image: linear-gradient(black 0%, black 50%, transparent 100%);
        max-height: 25rem;
    }

    section#worktogether form#examn p.disclaimer.privacy
    {
        padding: 1rem 0.5rem 1rem 3rem;
    }

    section#worktogether label.finish
    {
        transform: translate(-80%) translate3d(0, 0, 50px) rotate3d(-1, 0.5, -0.15, -56deg) scale(0.95);
        rotate: unset;
        top: 45rem;
        left: calc(50% + 15rem);
    }
    
    section#worktogether input#submit:checked ~ label.finish,
    section#worktogether input#confirm:checked ~ label.finish,
    section#worktogether input.celebrationActive:checked ~ div.scaling label.finish
    {
        transform: translate(-80%) translate3d(0, 0, -300px) rotate3d(-1, 0.5, -0.15, -25deg) scale(0.95);
    }

    section#worktogether div.confirm
    {
        left: calc(50% + 1.5rem);
        top: 45.25rem;
        transform: translate(-50%) translate3d(0, 0, 0px) rotate3d(1, 1, 1, 13deg);
    }

    section#worktogether div.confirm div.outerMask.cancel
    {
        margin-right: 1rem;
    }
    
    section#worktogether input#submit
    {
        left: calc(50% - 5.5rem);
        width: 27rem;
        height: 8rem;
        top: 47rem;
        rotate: 7deg;
    }
    
    section#worktogether input#confirm
    {    
        width: 19.5rem;
        height: 8rem;
        inset: 46rem 0px 0px calc(50% + 1.5rem);
    }

    section#worktogether input#idle
    {
        left: calc(50% - 20.5rem);
        width: 20rem;
        height: 8rem;
        top: 44rem;
    }
    
    section#worktogether div.retry.outerMask
    {
        top: 48rem;
        left: calc(50% + -3.5rem);
        transform: rotate3d(1, -1, 0.1, 60deg);   
    }
    
    section#worktogether div#celebration.nopass div.outerMask.header
    {
        top: -3.5rem;
        left: -1rem;
    }

    section#worktogether div#celebration.pass div.outerMask.header div.innerMask
    {
        padding: 1.5rem 6rem 2rem 6rem;
    }

    section#worktogether div#celebration a.booking
    {
        top: -11.5rem;
        left: 7rem;
        rotate: -1deg;
    }

    section#worktogether div.scaling form#examn .reference,
    section#worktogether form#examn label.answer aside span,
    section#worktogether form#examn label.answer aside sup
    {
        display: none;
    }

    section#worktogether form#examn label.answer p
    {
        font-size: 1.4rem;
    }

    section#worktogether form#examn label.answer aside
    {
        font-size: 1.2rem;
        top: -1.15rem;
        left: -1rem;
    }

    section#worktogether form#examn label.answer aside.succeed
    {
        height: 1.2rem;
    }

    section#worktogether form#examn fieldset.custom .textareaWrapper aside.feedback
    {
        font-size: 1.2rem;
    }
    
    section#worktogether div#celebration div.hoverShift
    {
        position: absolute;
        left: 10rem;
    }

    section#worktogether input#unlock
    {
        left: -2rem;
        top: 21rem;
        height: 9rem;
        width: 26rem;
    }

    section#worktogether div#examnShoutout
    {
        display: none;
    }

    section#worktogether div#celebration div.outerMask.header
    {
        transform: translate3d(-35rem, -18.5rem, -160px) rotate3d(-0.5, -0.5, -0.2, 44deg);
    }


    section#worktogether div#celebration.instant.nopass div.outerMask.header
    {
        transform: translate3d(-28rem, -16rem, -110px) rotate3d(-0.5, -0.5, -0.2, 22deg);
    }

    section#worktogether div#celebration.pass div.outerMask.header h3
    {
        font-size: 6rem;
        line-height: 5.5rem;
        letter-spacing: -0.05rem;
    }

    section#worktogether input.celebrationActive:checked ~ div.scaling div#celebration.animated.pass div.outerMask.header
    {
        animation-name: Examn-Header-Float-Mobile, Examn-Header-Swoosh;
    }

    section#worktogether input#unlock:checked ~ div.scaling div#celebration.animated.pass div.outerMask.header
    {
        animation-name: Examn-Header-Float-Inverse-Mobile;
    }

    section#worktogether div#celebration img.heart.one
    {
        animation-name: HeartFloat1Mobile;
    }

    section#worktogether div#celebration img.heart.three
    {
        animation-name: HeartFloat3Mobile;
    }

    section#worktogether div#celebration img.heart.five
    {
        animation-name: HeartFloat5Mobile;
    }

    section#worktogether input#unlock:checked ~ div.scaling div#celebration.instant div.outerMask.header
    {
        transform: translate3d(-34.5rem, -17.5rem, -110px) rotate3d(-0.5, -0.5, -0.2, 44deg);
    }

    section#worktogether input#unlock:checked ~ div.scaling .examn, 
    section#worktogether input#unlock:checked ~ div.scaling div.shadowContainer .examn
    {
        transform: translate3d(-26.25rem, -10rem, 1px) scale3d(0.3, 0.3, 0.3) translateX(-50%) rotate3d(0.25, -1, 0.25, 0deg) rotate(1deg);
    }

    section#worktogether input#unlock:checked ~ div.scaling .examn.animated,
    section#worktogether input#unlock:checked ~ div.scaling div.shadowContainer .examn.animated
    {
        animation-name: Examn-Land-Mobile;
    }

    section#worktogether input#unlock:checked ~ div.scaling .certificate.instant, 
    section#worktogether input#unlock:checked ~ div.scaling .shadowContainer .certificate.instant
    {
        transform: translate3d(-22rem, -16.5rem, 2px) scale3d(0.3, 0.3, 0.3) translateX(-50%) rotate3d(0.25, -1, 0.25, 0deg) rotate(12deg);
    }

    section#worktogether input#unlock:checked ~ div.scaling .certificate.animated, 
    section#worktogether input#unlock:checked ~ div.scaling .shadowContainer .certificate.animated
    {
        animation-name: Certificate-Land-Mobile;
    }

    section#worktogether div.optin.banner
    {
        left: calc(50% + -13rem);
        top: 8.5rem;
        rotate: 8deg;
    }

    section#worktogether img.progressArrow.two
    {
        height: 3rem;
        margin: 12rem 50% 0rem 50%;
    }

    section#worktogether img.progressArrow.three
    {
        margin: 2rem auto 2rem auto;
    }

    section#worktogether div.dialogue.root.certificateDownload.one div.stamp
    {
        rotate: 25deg;
        left: 27rem;
        bottom: 4rem;
    }

    section#worktogether input.choice:checked ~ input.redo.one:not(:checked) ~ div.dialogue.root.certificateDownload.one,
    section#worktogether input.choice.two:checked ~ input.redo.one:not(:checked) ~ div.dialogue.root.certificateDownload.one
    {
        --left: calc(50vw - 11rem);        
        --top: 7rem;
        transform: translate(var(--left), var(--top)) translate(-50%, -25%);
    }

    section#worktogether input.choice:checked ~ input.redo.one:not(:checked) ~ div.dialogue.root.certificateDownload.one div.pane,
    section#worktogether input.choice.two:checked ~ input.redo.one:not(:checked) ~ div.dialogue.root.certificateDownload.one div.pane
    {
        transform: translate3d(-1rem, 0, 1px) scale(0.5) rotate(3deg);
    }

    section#worktogether input#certificateDownloadOptinRedo:checked ~ div.dialogue.root.certificateDownload.one div.pane,
    section#worktogether input#certificateDownloadOptinRedo:checked:hover ~ div.dialogue.root.certificateDownload.one div.pane 
    {    
        transform: 
            scale(calc(var(--active) * 0.5 + 0.5))
            translate3d(-50%, 50%, calc(var(--active) * (50px + var(--t) * 10px) + (1 - var(--active)) * 10px)) 
            rotate3d(-1, -0.25, 0, calc(0deg + var(--active) * 2deg))
            translate(calc(50% - 1rem), -50%)
            rotate(calc(3deg - var(--active) * 3deg));
    }

    section#worktogether input.two:checked ~ div.dialogue.root.certificateDownload.two
    {
        --left: calc(50vw + 7rem);
        --top: -6.5rem;
    }

    section#worktogether div.dialogue.root.certificateDownload.two
    {
        --left: 50vw;
        --top: 0rem;
    }

    section#worktogether div.dialogue.root.certificateDownload.two div.stamp
    {
        rotate: 22deg;
        left: 3rem;
        bottom: 1.5rem;
    }

    section#worktogether input.two:checked ~ div.dialogue.root.certificateDownload.two div.pane
    {
        transform: translate3d(0, 0, 2px) scale(0.5) rotate(-16deg);
    }

    section#worktogether input#certificateDownloadPersonalisationRedo:checked ~ div.dialogue.root.certificateDownload.two div.pane, 
    section#worktogether input#certificateDownloadPersonalisationRedo:checked:hover ~ div.dialogue.root.certificateDownload.two div.pane
    {
        transform: 
            scale(calc(var(--active) * 0.5 + 0.5)) 
            translate3d(50%, 50%, calc(var(--active) * (50px + var(--t) * 10px) + (1 - var(--active)) * 15px)) 
            rotate3d(0, -1, 0, calc(var(--active) * -7deg)) 
            translate(-50%, -50%) 
            rotate(calc(-16deg + var(--active) * 16deg));
    }

    section#worktogether input#certificateDownloadOpen
    {
        top: 3rem;
        left: calc(50% - 18rem);
        width: 18rem;
        height: 19rem;
    }

    section#worktogether div.dialogue.root.certificateDownload.one
    {
        --top: 4rem;
        transform: translate(var(--left), var(--top)) translate(-50%, -25%);
    }

    section#worktogether input.redo:checked ~ div.dialogue.root.certificateDownload.one
    {
        --top: 9rem;
    }

    section#worktogether input#certificateDownloadOptinRedo,
    section#worktogether input.choice.two:checked ~ input#certificateDownloadOptinRedo
    {
        left: calc(50% - 25rem);
        top: 7rem;
        width: 23.4rem;
        height: 21rem;
        rotate: 3deg;
    }

    section#worktogether input.two:checked ~ input#certificateDownloadPersonalisationRedo
    {
        left: calc(50% - 4rem);
        top: 0.5rem;
        width: 22rem;
        height: 15rem;
        rotate: -16deg;
    }

    section#worktogether .extras
    {
        display: none;
    }

    section#worktogether input#unlock:checked ~ div.scaling div#celebration.animated img.hat,
    section#worktogether input#unlock:checked ~ div.scaling div#celebration.animated img.heart.two,
    section#worktogether input#unlock:checked ~ div.scaling div#celebration.animated img.heart.four
    {
        opacity: 0;
        transition-property: opacity;
        transition-duration: 1s;
        transition-timing-function: linear;
    }

    section#worktogether input#unlock:checked ~ div.scaling div#celebration.instant img.hat,
    section#worktogether input#unlock:checked ~ div.scaling div#celebration.instant img.heart.two,
    section#worktogether input#unlock:checked ~ div.scaling div#celebration.instant img.heart.four
    {
        display: none;
    }

    section#worktogether div.offer.wide header.package strong.entry.option
    {
        font-size: 1.75rem;
        padding: 0.5rem 1.25rem 0.25rem 1rem;
    }

    section#worktogether div#celebration img.hat
    {
        animation-name: HatPopMobile;
    }

    section#worktogether div#celebration img.heart
    {
        scale: 0.75;
        left: -3rem;
        top: 12rem;
    }

    section#worktogether div#celebration img.heart.two
    {
        animation-name: HeartFloat2Mobile;
    }

    section#worktogether div#celebration img.heart.four
    {
        animation-name: HeartFloat4Mobile;
    }

    section#worktogether div.optin.banner.claimed
    {
        left: calc(50% + -10rem);
        rotate: 3deg;
        top: 8.25rem;
    }
    
    section#worktogether div.offer.wide a.booking,
    section#worktogether div.offer.compact a.booking
    {
        position: absolute;
        grid-row: 7;
        grid-column: 1;
        left: unset;
    }

    section#worktogether div.offer.sprint a.booking
    {
        right: 0rem;
        bottom: -1.75rem;
        rotate: 2deg;
    }

    section#worktogether div.offer.retainer a.booking
    {
        right: 0rem;
        bottom: -0.5rem;
        rotate: -10deg;
    }
    
    section#worktogether div.offer.consultation a.booking
    {
        right: 0rem;
        bottom: -2.5rem;
    }

    section#worktogether div.offer.project a.booking
    {
        right: 0rem;
        bottom: -2rem;
        rotate: 2deg;
    }

    section#worktogether .extended input#unlock:checked ~ div.locked,
    section#worktogether .extended div.locked.bypass
    {
        max-height: 250rem;
    }

    section#worktogether .offer.sprint img.frame
    {
        inset: 1% 3% 2% -1%;
        width: 98%;
    }

    section#aboutme img#ticket
    {
        width: 50rem;
        left: 50%;
        transform: translate(calc(-50% - 17rem), -44rem) rotate(32deg);
    }

    section#aboutme img#wheels
    {
        left: 0%;
        transform: translate(calc(-50% + 8rem), -30rem);
        width: 19rem;
    }

    section#aboutme img#goggles
    {
        width: 50rem;
        left: 50%;
        transform: translate(calc(-50% + 16rem), 29rem) rotate(-22deg);
    }

    section#aboutme img#controller
    {        
        left: 37%;
        transform: translate(calc(-50% - -19rem), 64rem) rotate(15deg);
        width: 35rem;
    }

    section#aboutme div#cvBanner
    {
        right: unset;
        top: unset;
        padding: 0rem 6rem 0rem 4rem;
        transform: translate(0rem, 58rem) rotate(25deg);
    }

    section#aboutme div#cvBanner h3
    {
        font-size: 4rem;
    }

    section#aboutme div#cvBanner svg
    {
        scale: 1 1;
    }

    section#aboutme a.cv
    {
        position: absolute;
        left: -16rem;
        rotate: 14deg;
        top: 49rem;
        perspective: 500px;
        perspective-origin: 0 0;
    }

    section#aboutme a.cv .document
    {
        width: 25rem;
    }

    section#aboutme div.phone div.screen div.content
    {
        padding: 0.6rem 0.6rem;
        gap: 0.4rem;
    }

    section#aboutme div.phone.background
    {
        background-image: url('../images/aboutme/aboutme_phone_mobile.svg?v16');
        height: 36rem;
        width: 23rem;
        perspective-origin: 185% 0%;
        perspective: 6000px;
        transform: translate(calc(50vw - 50%), 0);
    }

    section#aboutme div.phone div.screen header img.profilepic
    {
        height: 12.25rem;
    }

    section#aboutme div.phone div.screen header h3
    {
        font-size: 3rem;
        left: 0.75rem;
        bottom: 1.25rem;
    }

    section#aboutme div.phone div.screen header p
    {
        font-size: 0.925rem;
        letter-spacing: -0.004rem;
        bottom: 0.9rem;
        left: 0.75rem;
    }

    section#aboutme div.phone div.screen .like
    {
        right: 1.25rem;
        top: 1.25rem;
        width: 4rem;
    }

    section#aboutme div.phone div.screen img.dislike
    {
        right: 1.85rem;
        top: 5.75rem;
        width: 2.5rem;
    }

    section#aboutme div.phone div.screen div.shadowContainer
    {
        perspective-origin: -20rem -20rem;
    }
    
    section#aboutme div.phone div.screen
    {
        width: 85.25%;
        height: 94%;
        transform: translate3d(1.15rem, 0.4rem, 0) rotate3d(0, 0, 1, 1deg) rotate3d(1, 0, 0, 10deg);
    }

    section#aboutme div.phone div.screen div.social, 
    section#aboutme div.phone div.screen div.experience, 
    section#aboutme div.phone div.screen div.vibes, 
    section#aboutme div.phone div.screen div.hobbies,
    section#aboutme div.phone div.social div.shadowContainer
    {
        padding: 0.25rem 0.5rem;
        border-radius: 8px;
    }
    
    section#aboutme div.phone div.social img
    {
        height: 2rem;
        margin-right: 0.25rem;
    }

    section#aboutme div.phone div.screen div.content h4
    {
        font-size: 1.2rem;
    }

    section#aboutme div.phone a.certificate .item
    {
        height: 5.6rem;
        width: 5.6rem;
    }

    section#aboutme div.phone div.screen a.certificate h4
    {
        font-size: 1.4rem;
        transform: translate(0%, 2.5rem);
    }
    
    section#aboutme div.phone a.certificate img.machinations.logo
    {
        height: 1.75rem;
        margin-top: 0.8rem;
    }
    
    section#aboutme div.phone div.screen a.certificate p
    {
        display: none;
    }

    section#aboutme div.phone div.creds
    {
        gap: 0.4rem;
    }

    section#aboutme div.phone div.vibes ul
    {
        grid-template-rows: auto auto auto;
        grid-template-columns: auto;
    }

    section#aboutme div.phone div ul li.secondary
    {
        display: none;
    }

    section#aboutme div.phone div.vibes ul
    {
        gap: 0.35rem;
    }

    section#aboutme div.phone div.screen ul
    {
        margin: 0.25rem 0;
    }

    section#aboutme div.phone div.hobbies li
    {
        border-radius: 4px;
        padding: 0.2rem 0.4rem;
        letter-spacing: -0.005rem;
    }

    section#aboutme div#desk
    {
        height: 100rem;
    }
}

@media (max-width: 1024px) 
{

    div#header img#parfume
    {
        display: none;
    }

    div#header img#leak
    {
        display: none;
    }

    section#worktogether div.shoutout p 
    {
        font-size: 1.85rem;
        left: 6rem;
        top: 6.25rem;
        width: 29rem;
        letter-spacing: -0.015rem;
    }

    section#worktogether div.shoutout p strong 
    {
        font-size: 4.5rem;
        letter-spacing: -0.075rem;
    }

    section#worktogether #preload:checked ~ .watch 
    {
        left: calc(50% + 8rem);
        top: 15rem;
        transform: rotate(8deg);
    }

    section#worktogether .watch 
    {
        left: calc(50% + 8rem);
        top: 15rem;
        transform: translate(0.5rem, -31rem) rotate(-14deg);
    }

    section#worktogether #confirm:checked ~ .watch,
    section#worktogether .celebrationActive:checked ~ .scaling .watch
    {
        transform: translate(50vw, -31rem) rotate(-14deg);
    }
}

@media (max-width: 475px) 
{
    div#header svg#feather
    {
        display: none;
    }

    div#header img#paper
    {
        height: calc(38% + 55vw);
        left: calc(40% - 2rem);
        bottom: calc(15% + 2vw);
        rotate: 0deg;
    }
}

@media (max-width: 1920px) and (min-width: 640px)
{
    section#worktogether input.choice.two:checked ~ input#certificateDownloadOptinRedo
    {
        left: calc(50% + 20.5rem);
        top: -10rem;
    }

    section#worktogether input.two:checked ~ input#certificateDownloadPersonalisationRedo
    {
        left: calc(50% + 17.5rem);
        top: -18rem;
    }

    section#worktogether input#certificateDownloadOptinRedo
    {
        left: calc(50% + 18.5rem);
    }

    section#worktogether input.two:checked ~ div.dialogue.root.certificateDownload.two
    {
        --left: calc(50vw + 30rem);
        --top: -20rem;
    }   
    
    section#worktogether input.choice.two:checked ~ input.redo.one:not(:checked) ~ div.dialogue.root.certificateDownload.one
    {
        --left: calc(50vw + 32.25rem);
        --top: -17rem;
    }

    section#worktogether input.choice:checked ~ input.redo.one:not(:checked) ~ div.dialogue.root.certificateDownload.one
    {
        --left: calc(50vw + 31rem);
    }

    section#worktogether div.optin.banner
    {
        left: calc(50% - 7rem);
        rotate: 6deg;
        top: -8rem;
        z-index: 2;
        scale: -1 1;
    }

    section#worktogether div.optin.banner p 
    {
        padding: 1.5rem 10rem 2rem 8rem;
        scale: -1 1;
        text-align: right;
    }
} 

@media (min-width: 1360px) and (max-width: 1600px)
{
    section#worktogether div.offer div.content h3.title span
    {
        font-size: 2rem;
        display: none;
    }
}

@media (max-height: 1080px), (max-width: 1600px)
{
    section#worktogether div.offer.wide a.booking strong.second, 
    section#worktogether div.offer.project a.booking strong.second
    {
        font-size: 2.4rem;
    }

    section#worktogether div#celebration a.booking strong.second
    {
        font-size: 2.41rem;   
    }
}