@-webkit-keyframes pen-writing {
    to {
        -webkit-transform: rotate(360deg) translateX(20px) rotate(-360deg);
        transform: rotate(360deg) translateX(20px) rotate(-360deg)
    }
}

@keyframes pen-writing {
    to {
        -webkit-transform: rotate(360deg) translateX(20px) rotate(-360deg);
        transform: rotate(360deg) translateX(20px) rotate(-360deg)
    }
}

@-webkit-keyframes pen-wiggling {
    to {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg)
    }
}

@keyframes pen-wiggling {
    to {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg)
    }
}

@-webkit-keyframes wiggleEraser {
    0% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg)
    }

    50% {
        -webkit-transform: rotate(-3deg);
        transform: rotate(-3deg)
    }

    100% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg)
    }
}

@keyframes wiggleEraser {
    0% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg)
    }

    50% {
        -webkit-transform: rotate(-3deg);
        transform: rotate(-3deg)
    }

    100% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg)
    }
}

@-webkit-keyframes swingArrow {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    50% {
        -webkit-transform: translateX(10px);
        transform: translateX(10px)
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@keyframes swingArrow {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    50% {
        -webkit-transform: translateX(10px);
        transform: translateX(10px)
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

@-webkit-keyframes swingRoller {
    0% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg)
    }

    50% {
        -webkit-transform: rotate(-3deg);
        transform: rotate(-3deg)
    }

    100% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg)
    }
}

@keyframes swingRoller {
    0% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg)
    }

    50% {
        -webkit-transform: rotate(-3deg);
        transform: rotate(-3deg)
    }

    100% {
        -webkit-transform: rotate(3deg);
        transform: rotate(3deg)
    }
}

@-webkit-keyframes swingLetter {
    0% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg)
    }

    50% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }

    100% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg)
    }
}

@keyframes swingLetter {
    0% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg)
    }

    50% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg)
    }

    100% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg)
    }
}

@-webkit-keyframes cloudGrow {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    50% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
    }

    75% {
        -webkit-transform: scale(.9);
        transform: scale(.9)
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes cloudGrow {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    50% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
    }

    75% {
        -webkit-transform: scale(.9);
        transform: scale(.9)
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

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

    50% {
        -webkit-transform: scale(.9);
        transform: scale(.9)
    }

    75% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
    }

    100% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }
}

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

    50% {
        -webkit-transform: scale(.9);
        transform: scale(.9)
    }

    75% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
    }

    100% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }
}

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

    50% {
        -webkit-transform: scale(.9);
        transform: scale(.9)
    }

    75% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }

    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0
    }
}

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

    50% {
        -webkit-transform: scale(.9);
        transform: scale(.9)
    }

    75% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }

    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0
    }
}

@-webkit-keyframes cloudTextShake {

    0%,
    100%,
    50% {
        -webkit-transform: translateX(0) translateY(0);
        transform: translateX(0) translateY(0)
    }

    25% {
        -webkit-transform: translateX(-10px) translateY(-5px);
        transform: translateX(-10px) translateY(-5px)
    }

    75% {
        -webkit-transform: translateX(-1px) translateY(-1px);
        transform: translateX(-1px) translateY(-1px)
    }
}

@keyframes cloudTextShake {

    0%,
    100%,
    50% {
        -webkit-transform: translateX(0) translateY(0);
        transform: translateX(0) translateY(0)
    }

    25% {
        -webkit-transform: translateX(-10px) translateY(-5px);
        transform: translateX(-10px) translateY(-5px)
    }

    75% {
        -webkit-transform: translateX(-1px) translateY(-1px);
        transform: translateX(-1px) translateY(-1px)
    }
}

@-webkit-keyframes letter-replace {
    0% {
        z-index: 4;
        -webkit-transform-origin: 6% 0;
        transform-origin: 6% 0;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        -webkit-animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);
        animation-timing-function: cubic-bezier(.07, 2.02, .67, .57)
    }

    40% {
        z-index: 4;
        -webkit-transform-origin: 6% 0;
        transform-origin: 6% 0;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-animation-timing-function: cubic-bezier(.13, .84, .82, 1);
        animation-timing-function: cubic-bezier(.13, .84, .82, 1)
    }

    70% {
        z-index: 4;
        -webkit-transform: translateX(0) translateY(100px) rotate(90deg, 20deg);
        transform: translateX(0) translateY(100px) rotate(90deg, 20deg)
    }

    100%,
    90% {
        z-index: 4;
        -webkit-transform: translateY(100vh) rotate(90deg);
        transform: translateY(100vh) rotate(90deg)
    }
}

@keyframes letter-replace {
    0% {
        z-index: 4;
        -webkit-transform-origin: 6% 0;
        transform-origin: 6% 0;
        -webkit-transform: rotate(0);
        transform: rotate(0);
        -webkit-animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);
        animation-timing-function: cubic-bezier(.07, 2.02, .67, .57)
    }

    40% {
        z-index: 4;
        -webkit-transform-origin: 6% 0;
        transform-origin: 6% 0;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-animation-timing-function: cubic-bezier(.13, .84, .82, 1);
        animation-timing-function: cubic-bezier(.13, .84, .82, 1)
    }

    70% {
        z-index: 4;
        -webkit-transform: translateX(0) translateY(100px) rotate(90deg, 20deg);
        transform: translateX(0) translateY(100px) rotate(90deg, 20deg)
    }

    100%,
    90% {
        z-index: 4;
        -webkit-transform: translateY(100vh) rotate(90deg);
        transform: translateY(100vh) rotate(90deg)
    }
}

@-webkit-keyframes treeBounce {

    0%,
    100%,
    20%,
    50%,
    80% {
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    40% {
        -ms-transform: translateY(-30px);
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px)
    }

    60% {
        -ms-transform: translateY(-15px);
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px)
    }
}

@keyframes treeBounce {

    0%,
    100%,
    20%,
    50%,
    80% {
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    40% {
        -ms-transform: translateY(-30px);
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px)
    }

    60% {
        -ms-transform: translateY(-15px);
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px)
    }
}

@-webkit-keyframes treeJump {
    0% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg)
    }

    100% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg)
    }
}

@keyframes treeJump {
    0% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg)
    }

    100% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg)
    }
}

@-webkit-keyframes eyeBlink {

    43%,
    45%,
    49%,
    51% {
        transform: scaleY(.1)
    }

    0%,
    100%,
    40%,
    42%,
    46%,
    48%,
    52% {
        transform: scaleY(1)
    }
}

@keyframes eyeBlink {

    43%,
    45%,
    49%,
    51% {
        transform: scaleY(.1)
    }

    0%,
    100%,
    40%,
    42%,
    46%,
    48%,
    52% {
        transform: scaleY(1)
    }
}

.letter-printable-area.tiltAndScale {
    will-change: transform;
    -ms-transform: rotate(10deg) scale(.7) translate(47vh, -20vh);
    -webkit-transform: rotate(10deg) scale(.7) translate(47vh, -20vh);
    transform: rotate(10deg) scale(.7) translate(47vh, -20vh);
    pointer-events: none;
    -webkit-filter: drop-shadow(-11px 17px 9px rgba(0, 0, 0, .1));
    filter: drop-shadow(-11px 17px 9px rgba(0, 0, 0, .1))
}

.bigBubble .red {
    color: #ed3131 !important
}

.bigBubble .text-group-top {
    position: absolute;
    text-align: center;
    height: 25%;
    top: 25%;
    left: calc(50% - 28vh)
}

.bigBubble .text-group-top h3 {
    font-size: 4vh;
    line-height: 1;
    letter-spacing: 3px;
    margin-bottom: 2vh;
    display: block
}

.isSafari .bigBubble .text-group-top h3 {
    letter-spacing: 2px
}

.bigBubble .text-group-top .message {
    color: #3c799b;
    font-size: 2vh;
    line-height: 1;
    margin-top: 2%;
    position: relative;
    letter-spacing: 1px;
    font-family: HelveticaNeueW01-75Bold, 'Helvetica Neue', Helvetica, Arial, sans-serif
}

.bigBubble .text-group-top .message span:after {
    content: "";
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAYCAYAAADpnJ2CAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDphNDU1ZjdjZS05NDgyLTQ0NjctYTNmMC0yMGEzMTA1YTMxY2IiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzI1QkYyRTM5REYyMTFFN0FBNUNBRDhDQ0VDQTY2QzciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzI1QkYyRTI5REYyMTFFN0FBNUNBRDhDQ0VDQTY2QzciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5N2Y0ZGM4OC1iMjMyLTQ0MzMtYTBkYi1kNzcwOTk1YmQ5ZTgiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDpmNDg0NDI5OS1kZjczLTExN2EtOTQ4Ni04YjFlOTFlNTA2ODMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz78TVd+AAACTklEQVR42rSWS0hUURjHZ6akkChQ8hHWwiBKCNHciKuioIQWtehBlNTCcJUaMfaQoqJSXFQQUdA7giAoXAWVEdQycVpoQS0qjAo0JpPsMU6/E/+By3S8c47aBz+4c++53/+c73UnOlRVFQmxcjALkvAI0tkLCnp7Iz42M+RZLVyAFTAAKdgEicgULBZy/xIsh3o4DkugD3qgbLoFm2CZrvfDTXij3yvhPVyFeb6CUUsO58IgzAncW6NTXbH4OAwd5PLHZAWvw/ase09gNbyExRY/P6HRRALhlI+gCWN/SBEtneCUGRuGzaaiEU7nymEU7oQ4a1cu34asKYAHJhLD1dWVuQQ3QEWIs3pV7SmHVP2taER7oMwW0lkKR34OR7dhB7yGhR7FeQ32EOZkRvAYHHJ4Ma08m9Y479kRL2CLESzi4pPnbhsdTjkOT+GeGIX5Jod54DMQt0EJnLA8G4Nu2AXFsBY+wjn4YEZpTE1u5mUNvHKcv21wWRPni3p3IxSq+N5BF3yGW7AOnpHDRLBKnys/q7SJMNsp53UmTDhqUIiPaBMPoSFrWp21zVJTFI+Vm/UKh81mQ4u+IK2UfkJFsQ8WWNab3r070WgL2gzYCqd1oqD90vOYQxriRKEz4rA4peliimS3ejVjeY5i34MtFHOszN9wEUoVtqRHVd/gdCO+gsGvQpdOfBBGHN456vIBzmVj6kNTICfV1Da7z+kGp0MwY99weEDCndpI0Pa6/sXwMkS/Qlz/Cs5IuI97/f9FMCA8BM1cLlIf/2N/BBgA73ahEdC1Ma8AAAAASUVORK5CYII=) no-repeat;
    width: 7%;
    background-size: contain;
    padding-bottom: 7%;
    display: inline-block;
    margin-left: 1%;
    vertical-align: bottom;
    position: relative;
    top: 1vh
}

[device=desktop] .bigBubble .senditnow:hover {
    -webkit-animation: swingRoller .4s ease-in 2 both;
    animation: swingRoller .4s ease-in 2 both
}

.bigBubble .text-group-bottom {
    position: absolute;
    text-align: center;
    height: 31%;
    top: 68%;
    width: 48vh;
    left: calc(50% - 27vh);
    color: #3c799b;
    font-size: 2vh;
    line-height: 1.5;
    padding-top: 2%;
    letter-spacing: 1px !important
}

.bigBubble .text-group-bottom .red {
    font-family: kon-tiki-aloha-jf, Helvetica, sans-serif;
    letter-spacing: 1px !important
}

.bigBubble .text-group-bottom:before {
    content: "";
    position: absolute;
    width: 70%;
    left: 15%;
    border-top: 2px dashed #e6eef2;
    top: -5%
}

.bigBubble .text-group-bottom .print-it {
    cursor: pointer;
    text-decoration: underline
}

.bigBubble .text-group-bottom .print-it:after {
    content: "";
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAXCAYAAAD6FjQuAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDphNDU1ZjdjZS05NDgyLTQ0NjctYTNmMC0yMGEzMTA1YTMxY2IiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzI1QkYyRTc5REYyMTFFN0FBNUNBRDhDQ0VDQTY2QzciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzI1QkYyRTY5REYyMTFFN0FBNUNBRDhDQ0VDQTY2QzciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5N2Y0ZGM4OC1iMjMyLTQ0MzMtYTBkYi1kNzcwOTk1YmQ5ZTgiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDpmNDg0NDI5OS1kZjczLTExN2EtOTQ4Ni04YjFlOTFlNTA2ODMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz68EzI0AAABiElEQVR42mJkIADeGZrxASkpKJYEYhkoDcLSQCwBpe2Fzp86hc8sFgbC4AoQyxKh7ishBUxEGPKRgTjwhZ6WEVTHQqwh7JHhDCwa6phhV98EY36mmmU/l69k+IlbzQ9g4vhLDcs+gMNbWoqBkYcHQ/LvzVtEJQ6SfMYkJcXAJCmBy7IvVLXsz+kzBH1PDcvegxWammD12a9NW+A+AxYAbaDoBeInUPwIiJ8B4xPsYBaggk3QUkAEmhW+A/FtIJ4CVLQLZtm/Z88Y/n/6RChDpwGxMJZSCOQYXUYgA2Q4BxYDfgOxGhCrAvEuAr5fB8QhIDfhUWPOhCe8WYE4CeYzAuAzNGTwASEmApFrR6RloDgRI6BGmJBlOkRa9gVa8uP1GQsBy4ShCSYXauAHaJB9hvLBbGBC+gCM+zRCPmMhIo+IAA2bQqDOUwRSYYTMIcay1UDDXoMKC6RkDtLHDsTi0LpOmoigFiLGMnMG6gCCqZGagK6WCdPVMhYiLftHRE0MUvMJnwKAAAMAxHJ3lEdVBDEAAAAASUVORK5CYII=) no-repeat;
    width: 6%;
    background-size: contain;
    display: inline-block;
    padding-bottom: 5%;
    margin-left: 3%
}

.bigBubble .text-group-bottom .stores:after {
    content: "";
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAdCAYAAACqhkzFAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDphNDU1ZjdjZS05NDgyLTQ0NjctYTNmMC0yMGEzMTA1YTMxY2IiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzI1QkYyRUI5REYyMTFFN0FBNUNBRDhDQ0VDQTY2QzciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzI1QkYyRUE5REYyMTFFN0FBNUNBRDhDQ0VDQTY2QzciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5N2Y0ZGM4OC1iMjMyLTQ0MzMtYTBkYi1kNzcwOTk1YmQ5ZTgiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDpmNDg0NDI5OS1kZjczLTExN2EtOTQ4Ni04YjFlOTFlNTA2ODMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz51PrNvAAACYUlEQVR42mJkwAHeGZoJACk7INYAYi4gfg/EB4H4ttD5U19x6WPEYhAnkGoB4kwg5sSh7z8Q9wPxFCB+ALTgP1YDgYbxA6mdQGzOQDx4AMQhQEPPgjhMaJLzSTQMBBSA+DDQMYYoLgQKSAOpJwzkg0tAbIjswmoGyoAeEPsxQl0Hov8R1MLIyMAkKsLw79VrXCoWwlwoSowT2AP9GZi1tfApgXvZBUOKhYWBxdSYgYGNDcxlkpBg4CzMZ2Dk4cFnID8LlFGKIfXnDwOLtjYDz8Q+hj+nzzIwCgkyMHJzgb2NB/xhhobfdKyyFy8BDdViYLW3ZWASg4QKi6YmA7OsDAMDMzPDf1BYAi1GAotBXmbFad///wzfJ01FEWISF2Ng8/NhYHN0YGBWVsKIFJCXfwPxd1zZjDMvG4X/a/tOhm9tHQz/v37DpvwqEzQf3sAmy+buysCsq8PwY+EShu+Tp4HF/j17hsuwK0CzfsEi5QwoytFV/Hv+guGjpy88nJjkZBkYOblwBVAKcl4+hDVSLl1GCfTv7V0Mf+/exab0PBCfgudlYEzLAamHZGa5d0BsAvTufbgLgZxHuMKRAABl1zCYYejF104yDCwGGrYXJVkhsbeQaNgSoGET0AWRDQTVFx+INAyUKlKxScANBNoGSuBbiTDsJRAHAdX/wGsgFGwgYNhvaP3xGJcCdAN3APEPPAbmAg07gs9GFAOBir8AqW041M4Cys8kFB5MWMTmYBE7CnIdMbHFiKPVcABI2UO5T6E54QUxBjLhEIeV4D+BOJBYw/BnUEOzlUAcR6o+gAADAD9QrhaZLkp7AAAAAElFTkSuQmCC) no-repeat;
    width: 5%;
    background-size: contain;
    display: inline-block;
    padding-bottom: 6%;
    margin-left: 2%;
    vertical-align: middle
}

.bigBubble .text-group-bottom .stores:hover,
[device=desktop] .bigBubble .text-group-bottom .print-it:hover {
    text-decoration: none
}

[device=desktop] .bigBubble .text-group-bottom .print-it:after {
    text-decoration: none !important
}

.page.write-a-letter[step='3'] .letter-printable-area .edit-button {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABFCAYAAAD3upAqAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDphNDU1ZjdjZS05NDgyLTQ0NjctYTNmMC0yMGEzMTA1YTMxY2IiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjU0Q0M1MTQ5REY4MTFFN0FBNUNBRDhDQ0VDQTY2QzciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjU0Q0M1MTM5REY4MTFFN0FBNUNBRDhDQ0VDQTY2QzciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5N2Y0ZGM4OC1iMjMyLTQ0MzMtYTBkYi1kNzcwOTk1YmQ5ZTgiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDpmNDg0NDI5OS1kZjczLTExN2EtOTQ4Ni04YjFlOTFlNTA2ODMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42prGkAAAUV0lEQVR42uxceZAc1Xn/XnfPPXuvVitpV0LEcpAwiFsqQ4EVgcAOxuYoKhx2ZFNxqEicJkTYoqAcjBFxEnM4xq4yJphgm0tcoRyMMTaQIM4qIyRhLA6BVhLaXe0xs3P08fJ9r783/aa1q2N2xV/qqqfZ6e7pfu/Xv+/3He+1hJQSDm67b9ZBCA4CcxCYqdiciQ4cnskCCAGkQaRCFv5NW1yTLD4nwL+FsV/y94kU7MXuQ+ihHINtEbZjsc3D1outC1vGOLWC7SNsfdg+xPY6tnX0eeL298cm6v/G0tikgBETie/h2ZyiU1BDMBymx0AJBEQDocGDGBDCAIi2F7oPoT+XYPsKti9i65hE38vYnsL2ILZHEKTqJwLMkQiMHlTANkdQeLg3wN/YCEwCW4An+bjPZI2MseeFkB0XY7uWMD8AzN+GbRWCc+8BB2ZhNq9AIKbYImIOgUKsoYE7ZEYGqzRjTAahyfw1fnwP2xGfgDT8F7avE3smC8yEGuMIYgmCQgZvWYoZZRko3aF9BE4VG1GB2JNkDaoQcCEg8/HjDvzZUogx6ABuF2Frxnufh5/VA8KYJc2tih2lwEeTCZ1XAYHxgkDpiwlEFv/OWjaU8dhTXb1pPLIaD/0jXjkpDb35hMCh7QFsF7a/t8E/IO7aVgIrwEVAiC1aeMmEErjfqWlPuD3R1Xsc/v1H/PPb2JJTAYRz3DEgMun9/dn52P75gMQxxBYypySDY2NL499NyIwkuQQZSmwW2fR412z7/s5Z38LT/0+GbrfOMzXMFtuGpp/cCW3rX4XUBeer7/uxXTc4d8F5Uw5M2hKQwsMJ1BdiCOlM3go7VkRQMrhvupOAh7t62/AiT+GR7yIojm+I8WSzsNQ5Z4Foa8VeWpC7+UZoe+UPkFh8wv5c4m4EZ+7UAiNsaHZsmJ1IwkxsOcuqDTaPLGnCp3dnR/dhuHcdgrLMYUBq3kt7KNNb7Sdb3P9dB+W70QN7Xsi+tjZo+sU90Pz4A2DN7t2XqzRhuwfBsaYMmJxijIAW7GCHHYZ3BRTiHH4/LJ2BuzpnLrIlrCPTcfEYtaqgmCZscVBgP1mU/uqF0PLEQxD0D8CuM8+F6mNPRrpzxGeg9ff/A+m/+9q+XOpkbFdMmVdaMa27FtyV0NsM+z6akK+YtKa9awnufzQJojmNP/cYkKS6YPj7hCHMYpzAT+5Bd0Q+D60v/Q5ELgflDz4ABxlbve+X4L3yGmSuXAmJExer84ZOXgbBhx/tyzgL2A5DL7V10nHMLOwMdX6n58JOBIaYM89Jw/Jc8zFpEE+WQWYreEaavBOeGFDcI6NBB+OAAvsACm3ZG7+lQKHNHxuD9Pw54Fx7FRRefgXc516A8s9+Ds5RR+4rKLTlsX0f2wWTZswdPXNhDF30VrcKfa4LLSi8K1vaZyOS6/IgugVnd+RIKVghIFyOkOm7Zosds1cN0kQ2bH/qUGj5TWg2xY0bITd/vvq7unOn+kxOmwbBzn4YOhHjRtfdXws5GVnz/KQ0xkXAqJF7nu44sKqlI5kF8QgOqrvKA7Q4vCRtIca4RripL+yz/nix64+nPxRV5/5tzfj96e9XoKig8sFHGgEF9ie22aNaJ9H7kEuek0whO+R1LshjqwoAqdhCuZTPzBmDMJl0mCX6kzbSIG+cnApiZpZcthSF9fBx2ZLo7GR3h8HmHXc1GgGcgh7qc5ML8CiIQy9UxI6cmM72jgpYVWSRLQsCQ6pcyqkxI1QOx8jIA2YMCbIzDlNMcCCRULGK1hU7mx2XLcXrvwOyXJ5MeHTt5EwJJMciKpO+Cv9O69hEm4cETiIpGANy7+EF4zGLxQyKa40JVGbFN0C0t4eFFvRE6TlzdvtbjoxC5VcPTzbLOB1Z09swMGqgGNQtzeTQP8HFORkCoAftidCEAsNk/FhgZxluOy7xwvzEwC2z8tJx2WJ+L1z1T7jDnyww1J1LGgaGciQK6/CEUzGQm0YDSMjoyZOLFqwz3h5MxJ4AGFNrmv7lploeNBFbyDW7v/v9VGXfFzQuvjgqyofQZC6qiNAV65iEAMrwoLUIW8bFTJCCPdxcZerz/xISS5fsLrJxtqy4mipgUwXMp9GcDmkIGB87cVQqncSBneWxppRFZC5uzIxciNIBX0TC600AjmT3nP/R7eOLrOGVvNfeAO/N9VNds1ncEDB2aP2UZzRJIxbRgdwYMyjLauEZxiL5HE/UZ9rxxDJ1xmlgz+kdly118Txpy9RvhzUETCLMps8EZkWaPYtkgDwDKAvChFPriXbVQtabV12Cie45/+9r9sqW6uP/vT+h//5s8xoChlOFLwScHJJXSsh69xuwW0/yd09HwiDrZhhMEDVjcuSeU6ndRDbulYo33HSgyp+HNJREHpFMzcCD82gQtoy0w+JcKAPhXFOCxbgkIhGWEySNmlE0SVd97nnw39kMVs8sCJIJSF99eQ0kzZbSf/wE5NDwgQKmo7FZAoDPJmX01KsMSkaBIoDKDZIzaofjFcHmJNidO7GksVaGwMy5de0va/eq3P8AuM8+B9biEyK2TC70nzQw1h6AWai9S8DRGIHRTHVeaYo0a5AMzS3NUwOOEcTZsaK5LBQg2L4jCiYvPB8qyKDS+rdqJjUFof/etvaGGINj+4weiGWUEbTHkQxGImY6AZuc/l1SJ5LGDemwv+lPYHVPjyqGq66B0p13QeG+X4G/+V3wN759oKdYrMbEF2AOcAFKGB6phP+6RuwyxoKrtaXKLLMYNNvIrXwDQH9T/cBFNgPZb14OiVNOgmDbjqkM5hqbttkDMD3alISIWANhmhCmAxzwpfkYRchl5aUirdHxiwLYGKuHjImiSR8qjz4BJdQU74Mte3+cU7DJSQDTBrHgzHTTvlGsEmwqRTxzzLho2QBDxopXlY2bIM+AFBGQAAE5EDOVZok1BorfEDAqxjOpX7u4rJmEDuqIWSUI12WYNlphVjns0hN8TFUA0VUPLP4cQP9ALeEcrz48GUCCmOjHgBluCJj4DKJZh9ED91VmLWrH0ga7xoRRepCgajX0vcjmmaPpXgbFmqAksa+zCnEgdPRd5eDUijGczx9o1JRc/ZClwTvf6GiZc6QEF6mcnh7wemaqTlHwl11wGNhNTRBs7YPgwbVhIgohSE1XrgjTi4/6wHtobejW8fzsFSug+ptnocz79oVBAbMT+Np6jkuyE/BY/4TU8ZYCbWtDwKCJDOJ1ptdMiOu2MjY9YsmIOc3nfhnacGDxrbJhEwwgMJZKOrlswedVXnoZ3If42PWr1BRsYtlSqOJ++VHY9+Zf3AMO7i/d9kMo/+CHu12/ykzM8mzFiAjTkmZ2FNoj2lxc47rSlsYCPAnvCyOUFzLKewKjefy0CtiR8tat4PJgqvg5jAP28DOFTNBVP4uvs/nQBbt1ovLwY6p86SIoPv5uT8UtXdLQ5po0QgNLmTXPdxlxl763F37f1Kgp/Rk/FtkxFE1blpqifKEBBCIxaxZ0IhuGHn4UhvAJd517NiTRvPSTpadmGwGfqSFV/L1qPJikjAbrGKZcEiZbw3PyMvKWTUZWX2Hz1WEHsWcU1EqO9TMaAQZRfVmEK5RCOxb1T0waRSrBiabHA9JpANnz8MNrQ53gXCt/3tmQP+dL0M7MEkx1YlUOTUmzcOCmW8B+axN0vrehdl8yP2r9CHgBW8qoPetyCN0jxVSrMFMSBrMDDlARwJcbddcv6XpKwAMLYoIH8RxoAqHU1G/FQbWPo0GKhc3NSkeAzWIUv9sT658avMWRdymcyahN9mWF4DJIuIYww9m/Pg9/v7lp1TU7GtWYV/EC23SSSLS1ZZQ0glF48vjJmVtm0fEKhA5sSfRMquiN4kzb9ksvg9G/v6w+DNiwEUYuWB4FUTJ8wjsuXK7EmzYyzbcPnQ8j+Gnxfcc4rqrTQwa3SYadKoqIMfQ3eqxfu0NDjUW+v66MBZ9PZddiB/4hXpXT7DEjX8HmppmUpafPDBhd9wqUX1oHiZ5ZYZ3l6d8qoJuMqZhgdBQq615GTxJFzap8ikLcPDJS0ygLwvXFY8a9fHbPpEkt7Il81hQPwjTF5nPcsK9PFt99rzFgaBYSbfNnBIwptiJmSsC0TkL9/PQYuWEEhM7bhaDoOKOI+8mVUidpCbjFYAWxyJkGU+W8yzShNPeBBLQs6k3YqotrZO2eWn+ccMnKx/jnMw0nkX+ulOHWavXVa1o6XkD0TzI9iB+LMs21L/qcIoKy7bY7FQA0mBwfSS+YX5vvViaDwOiqoC/MmdDI1s3pmArUexxdPNMFtWE8i1IVM0qXEC1TwQd4b+rLZ3l7ex1p4plIYUG3kyCbXGPqR2BEv1oEhaapiC5os4eq8Pkpvb+5SUXKaWYPMFNGRagX4wm33kvXG0ZbLnG0nWbN80LdCOfUOcMv8fcCr8TgdbUe9uUOd3gY9qYxEwJD6+5osdDz5dKTSMFnHENTMhDlPhoQV4uekU0TdResuRnm3HqzorbHLjrJ5iNqkauEARzwkKjvmPYkVf5dYBTc9dpzM4fT5l1hbfFjpo99/Xmw8Igt1V1DIPcy1bsHxoSXpDW+CMrV2Dw9eFL7lKw3KeWJMBZxZoXBXHLx8dB9xUrIU4iPQJBbLbJ36bj1u9By5UqMXebXTDMBUbVPg1ZmcKpb+9S+tlOXKpYEIjwmRf35ZlyldU/PXiBzCgjoamHZYKdTjZf3cngBWne3C9sdI7veROrekDKiX2nUZ3RJoWf1ddCCARxtTYtOgOnoqgmUgCffdj3zW3WMwJp5eRTPNGNu1LVoEZyweWNt36fu/0/4NDJNhQOjoVeipHThuxvhL+66M0xUZX1/4tm/nu7hwO/6zosv6MvN7gUZSAiqbmPiS9Qf9D0YoZWaqDd4jzVZEKej/Z5cZhpneWEimRLFOKUNm+qeoNYG2k8dHcFw/0PUGI+TxxwypmP5V8OYZGQYCrgvEEYNCPMm2nZg9JxFoNtOWxoOGq+h9cx8T2q8NIPjrqeRabe1HncsjGK8VNq+HYST2CMwE67Bu6JrhnqJgoCZ5YRO8+u5lpkI2Kv4ZGboMFu7zBR7FdcQZZdLn3rxIhh13wTvN0P2sohqJ35skNrjEWtGGWgw5s+FwRStc/TQkDVv49M/KXnFin53eARktQqB64L0PDjyX9fsvynRMrM0tjmJFHQhum2OA3cXh/uww2ei7Y7YRl4kjIl8rTkpPffEYljhwWuz0zWSiojo73DO5RiDlrFAknRKGKGCGT7onC2I6tFb8evp+RtXK1CG31wPY319au4qM2d2YxpD62MsXgoyiOh+jNKbtSxYOzb6Ou4+GwdTcmPTr3o+yavlKVF2rG8Wz9Y1cB4XkgIRlQ5M15+QEUDmcjbbqEPr1IRXj262iSnLv/KBXyyCk89Dqq0NbHzIfqkElmM3pjE+hewowGROA35ovfS9yXbgscrYs0vS2TOwk08kIIzi9ayBzpZHuHCkZipFfYELoH6dnhbOhHGeNNiSYpYVdARrXCtlmFGCxRiBeR2PfcFZ+lc7qoODkO7ugtycXkjP6IZUeyuUtm1HQS80xpgs0oVWhNMLFjNp4aBtqfeRyI13Ijgvlkt/wIEva5LQn5FRJU3XRwLWDD0vZSqZzSbmGm7WjplGXGO0dtixZFEDl4sm9yi/OyXzpS/u8AqjUO0fwDYIAsfQgQLeevRRypSCvSyHnTiOoTc+sNF7BN0Y7KXx1NGA3LenvBV93l0YWofacTzGGn90Y4PQy0b0anFzDrxqFMpTPKWrmVaNTdUAJ4wehGtxEkYgqQterDE+Rumr8WGc+9ORXYXuM06H6aefBl2nLoFsbw+U+7ZBCfUlwNg3Pb0rzDAbMaUhvEBvMqkYQ5doRZscrHjKrFqkDXmMijtRkJ+qjL1/ajr7WTznx3ixizwjYdOUBxlFx57hymtLXEWkEbbBuCBW8bc53g34ty2ytkDyHbzE154tFV+kl80GUBPbjjkKvOI8bEUYe38Lms822PX6G2qxQHrGDITxtUbjmEC9JVvAAK+s3nOUCuQMeqppKGCkPSTKO4k51UoRmXXx2dmmR3HUP8KOdlZFNNBEzHQcwwTSXMrQwZleGkt5U0FE51YEz0cZ2XILCB9//31MHG+8tzhcLvpBTc+qmA+VUUsoJyohW1JdXZBoyiugBJoXBXkNAUPIj9JMId6GPJLNzKGFQjvwe59bhSE83o6mNiMRBkv3FYYfWp5vec4WcAM+yUt9fX2jxGjzIqSMelVZryYXkNMzlAYj9BLawLiGH9V9HytJ+PY3B7a/Ra8J0bHRwINmy8Fmw9iWj6CMgZyLeZFAZucPnQuJ1hbwyxUFTutRCxsDhkyGaEwaQ246xW/PbnEr6qULWvwzA29I5tSC51Qwp/oQwfrOrp39c5PJy87Jt9yOccxqFMS/QY1I+hC9fGGWKioMtsNV/YIImUJsytfmPkPW+bTgCuSTqCPfe61aWTeMmteO99/uVRUYTQhKnpfFuoMDkOrogCSCYaWSCEgJXaUF2dk96u6pzo5GC1XIGFU69pgtlnq6CX4NsB07QCZF+VS43MyCfmSSp6plKUB7fweZ9rcr823X+FJegqZwPgaBR6uYR4YZtW3EOVWI9FCzK8PRNHqxN/HrgxgO/PT2kcE+elAEBIFADmIbPqissJW7p7d+aaZQWGGUlMGklhLHkQ0b0JSaITVtGgKV4uONiC8yxlFPTih20Cs6u1BTCIAFSF16mZQSTMq+6Xl/LF18cq568v2eFy5YRD36wejgThTwW/BSt1ySb+1BEE7DQR+N5y1EKZ2LgLThvnwlZM0IsmQUTehPyK712PU3cPfT3xjctpWYQStJ6W6EJPUv49nq3c0shhJk+vTA6FVo9Uo0BnOpzk6wkgmwMhnIz5sHgs7D/CvREZr+nsARB/9jnQZWFR0E5uB2EJh93f5fgAEAt6D0bqKrWT0AAAAASUVORK5CYII=) no-repeat;
    background-size: 100% auto;
    width: 10vh;
    height: 10vh;
    position: absolute;
    bottom: 4%;
    right: -8%;
    cursor: pointer;
    pointer-events: visible;
    z-index: 3;
    -webkit-transition: all .2s ease;
    transition: all .2s ease
}

.page.write-a-letter[step='3'] .letter-printable-area .edit-button:hover {
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-transform: scale(1.1)
}

@media(min-width:751px) {
    .bigBubble {
        position: absolute;
        -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        transform-origin: 0 0;
        will-change: transform;
        width: 88vh;
        height: 70vh;
        top: 7vh;
        left: calc(50% - 44vh);
        opacity: 0;
        font-family: HelveticaNeueW01-75Bold, 'Helvetica Neue', Helvetica, Arial, sans-serif
    }

    .bigBubble img {
        width: 100%;
        height: 100%
    }

    .bigBubble .senditnow {
        position: absolute;
        top: 51%;
        left: calc(50% - 16vh);
        background-color: #ee3237
    }
}

.bigFigure {
    opacity: 1;
    position: absolute;
    -webkit-transition: -webkit-transform .5s ease-out;
    transition: -webkit-transform .5s ease-out;
    -o-transition: transform .5s ease-out;
    transition: transform .5s ease-out;
    transition: transform .5s ease-out, -webkit-transform .5s ease-out;
    z-index: 333;
    will-change: transform;
    width: 27vh;
    height: 45vh;
    top: 50%;
    left: 50%;
    margin-left: -60vh;
    pointer-events: none
}

.ag-elf {
    margin-left: -65vh;
}

@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio:2) {
    .bigFigure {
        margin-left: -50vh
    }
}

.bigFigure .snowman {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-origin: 40% 100%
}

.bigFigure .snowman #leftHand,
.bigFigure .snowman #rightHand {
    transform-origin: 50% 0
}

.bigFigure .snowman[data-mood=happyFace] #leftHand {
    -webkit-animation: leftArmWaving 5s infinite 2s forwards ease-in;
    animation: leftArmWaving 5s infinite 2s forwards ease-in
}

.bigFigure .snowman[data-mood=happyFace] #rightHand {
    -webkit-animation: rightArmWaving 5s infinite 2s forwards ease-in;
    animation: rightArmWaving 5s infinite 2s forwards ease-in
}

.page.write-a-letter.isSafari .bigFigure .snowman #leftHand,
.page.write-a-letter.isSafari .bigFigure .snowman #rightHand {
    transform-origin: 50% 50%
}

.page.write-a-letter.isSafari .bigFigure .snowman[data-mood=happyFace] #leftHand {
    -webkit-animation: leftArmWavingSafari 5s infinite 2s forwards ease-in;
    animation: leftArmWavingSafari 5s infinite 2s forwards ease-in
}

.page.write-a-letter.isSafari .bigFigure .snowman[data-mood=happyFace] #rightHand {
    -webkit-animation: rightArmWavingSafari 5s infinite 2s forwards ease-in;
    animation: rightArmWavingSafari 5s infinite 2s forwards ease-in
}

.page.write-a-letter[step='2'] .bigFigure {
    transform: translate(-17vh, -5vh);
    transition: transform .7s ease-in-out
}

.talk-bubble {
    position: absolute;
    width: 95%;
    height: 40%;
    right: 14%;
    top: -35%;
    opacity: 0;
    transition: all .5s;
    transform: rotate(-45deg);
    transform-origin: 100% 100%;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-self: center;
    align-items: center;
    justify-content: center;
    font-family: Paintline
}

.talk-bubble[data-bubble-state=error3] {
    pointer-events: initial
}

.talk-bubble > img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    -webkit-filter: drop-shadow(7px 7px 1px rgba(0, 0, 0, .1));
    filter: drop-shadow(7px 7px 1px rgba(0, 0, 0, .1))
}

.talk-bubble .text-group > img {
    width: 75%;
    backface-visibility: hidden
}

.talk-bubble.small .text-group > img {
    width: 50%;
    position: relative;
    top: -.5em
}

.talk-bubble.cloudGrow {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1
}

.talk-bubble .text-group-wrapper-centered {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: center
}

.talk-bubble .text-group {
    text-align: center;
    width: 90%
}

.talk-bubble .text-group .confirm-action span,
.talk-bubble .text-group p {
    line-height: 1.4;
    letter-spacing: 1px;
    font-size: 1.7vh
}

.talk-bubble .text-group p {
    font-family: Paintline;
    font-size: 25px;
    font-weight: 700
}

.talk-bubble .text-group .confirm-action .cancel,
.talk-bubble .text-group .confirm-action .confirm,
.talk-bubble .text-group p .larger {
    font-size: 2.4vh;
    line-height: 1.2;
    margin-top: .5vh;
    display: inline-block;
    font-family: kon-tiki-aloha-jf, Helvetica, sans-serif
}

.talk-bubble .text-group p .largest {
    font-size: 3vh;
    line-height: 1.2;
    margin-bottom: 1vh;
    display: inline-block;
    font-family: kon-tiki-aloha-jf, Helvetica, sans-serif
}

.talk-bubble.cloudShrink .text-group {
    -webkit-animation: cloudTextShrink 1s ease-in forwards;
    animation: cloudTextShrink 1s ease-in forwards
}

.talk-bubble.cloudGrow .text-group {
    -webkit-animation: cloudTextShake .8s .2s;
    animation: cloudTextShake .8s .2s
}

.talk-bubble .text-group .action,
.talk-bubble .text-group .confirm-action .confirm {
    color: #ee3136
}

.talk-bubble .text-group .confirm-action .cancel,
.talk-bubble .text-group .description {
    color: #14526c
}

.talk-bubble .text-group .confirm-action span {
    cursor: pointer;
    text-decoration: underline;
    display: block;
    margin: 2%
}

.page.write-a-letter[step='3'] .bigFigure {
    -webkit-transform: scale(1.1) translate(4vh, -10vh) rotate(-5deg);
    transform: scale(1.1) translate(4vh, -10vh) rotate(-5deg);
    -webkit-transform-origin: bottom right;
    transform-origin: bottom right
}

.page.write-a-letter[step='4'] .bigFigure,
.page.write-a-letter[step='5'] .bigFigure {
    -webkit-transition: top 1s ease, -webkit-transform 1.5s cubic-bezier(.6, .48, .27, .41);
    transition: top 1s ease, -webkit-transform 1.5s cubic-bezier(.6, .48, .27, .41);
    transition: transform 1.5s cubic-bezier(.6, .48, .27, .41), top 1s ease;
    transition: transform 1.5s cubic-bezier(.6, .48, .27, .41), top 1s ease, -webkit-transform 1.5s cubic-bezier(.6, .48, .27, .41);
    top: calc(100% - 36vh - 50px - 16vh);
    -webkit-transform: scale(.2) translateX(15vh);
    transform: scale(.2) translateX(15vh);
    -webkit-transform-origin: bottom right;
    transform-origin: bottom right;
    display: none;
    opacity: 0 !important
}

.talk-bubble .text-group.greeting2 .description {
    padding: 20% 5% 0;
    background-image: url(../images/write-a-letter/greeting2.png);
    background-repeat: no-repeat;
    background-position: 50% 5%;
    background-size: 36% auto
}

.talk-bubble .text-group.greeting3 .description .largest {
    color: #e82629
}

.bigFigure .snowman svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    backface-visibility: hidden
}

#boredFace,
#sadFace {
    opacity: 0
}

.envelope {
    position: absolute;
    width: 62vh;
    height: 37vh;
    transform-origin: 50% 50%;
    left: 50%;
    top: 50%;
    display: none
}

.envelope .name {
    position: absolute;
    top: 25%;
    left: 20%;
    margin-left: -3vh;
    font-size: 3vh;
    font-family: Paintline;
    color: #14526c;
    letter-spacing: .2vh
}

.page.write-a-letter[step='3'] .envelope {
    display: block;
    transform: rotate(-75deg);
    left: calc(50% + 13vh);
    top: 27vh
}

.page.write-a-letter[step='4'] .envelope {
    left: 0;
    top: 0
}

.envelope img {
    width: 100%;
    height: 100%
}

.page.write-a-letter[step='4'] .envelope {
    display: block
}

.page.write-a-letter[step='5'] .letter {
    display: none
}

.letter-printable-area.initial {
    z-index: 1;
    overflow: hidden;
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    transition: all 2s
}

.letter-printable-area.cloned-letter {
    z-index: 0
}

.letter-printable-area.cloned-letter-to-print {
    opacity: 0;
    z-index: -1 !important;
    background: 0 0
}

.letter-printable-area.cloned-letter-to-print .ui-droppable [class^=sticker-].ui-draggable .stickers-arrows {
    z-index: 1
}

.letter-printable-area.cloned-letter-to-print [class^=sticker-] .ui-rotatable-handle {
    z-index: 2
}

.letter-img-container img {
    height: 100%
}

.letter-printable-area.letter-replace {
    -webkit-animation: letter-replace 3s forwards ease-in;
    animation: letter-replace 3s forwards ease-in
}

.rolling-in-progress .letter-input-area {
    pointer-events: none
}

.stickers-dropbox {
    position: absolute;
    width: 95%;
    height: 100%;
    left: 4%;
    top: 0
}

.letter-write textarea {
    background: 0 0;
    width: 99%;
    height: 70%;
    border: 0 none;
    resize: none;
    outline: 0;
    font-size: 30px;
    line-height: 127%;
    padding: 18px 50px 0 50px;
    overflow: hidden;
    font-family: Paintline;
    font-weight: 600;
    color: #14526c;
    font-size: 3vh;
    line-height: 4.1vh;
    padding: 1.5vh 4vh 0 4vh
}

.letter-sign input.font-autoscale {
    display: block;
    background: 0 0;
    border: 0;
    outline: 0;
    height: 4vh;
    line-height: 4vh;
    color: #14526c;
    font-family: Paintline;
    font-weight: 600
}

.pen-container {
    -webkit-transform: rotate(-25deg);
    -ms-transform: rotate(-25deg);
    transform: rotate(-25deg);
    -webkit-animation: pen-wiggling .5s ease-in-out infinite alternate paused;
    animation: pen-wiggling .5s ease-in-out infinite alternate paused;
    pointer-events: none;
    position: absolute;
    left: 85%;
    top: 15%;
    -webkit-transform-origin: 0 50%;
    -ms-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transition: top .25s ease, left .25s ease, opacity .1s ease, -webkit-transform .2s ease;
    transition: top .25s ease, left .25s ease, opacity .1s ease, -webkit-transform .2s ease;
    -o-transition: top .25s ease, left .25s ease, transform .2s ease, opacity .1s ease;
    transition: top .25s ease, left .25s ease, transform .2s ease, opacity .1s ease;
    transition: top .25s ease, left .25s ease, transform .2s ease, opacity .1s ease, -webkit-transform .2s ease;
    z-index: 999;
    width: 69%;
    height: 12%;
    filter: url(../images/write-a-letter/drop-shadow.svg#drop-shadow);
    -webkit-filter: drop-shadow(-3px 15px 3px rgba(0, 0, 0, .1))
}

.page.write-a-letter.isSafari .pen-container {
    -webkit-animation: none;
    animation: none
}

.letter-replace .pen-container.active-pen,
.pen-container {
    opacity: 0
}

.pen-container.active-pen {
    opacity: 1
}

.pen-container.roll-out-of-screen {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
    -webkit-transform: translateY(50vh);
    -ms-transform: translateY(50vh);
    transform: translateY(50vh);
    -webkit-transition: -webkit-transform 1s ease;
    transition: -webkit-transform 1s ease;
    -o-transition: transform 1s ease;
    transition: transform 1s ease;
    transition: transform 1s ease, -webkit-transform 1s ease
}

.page.write-a-letter.isSafari .pen-container.roll-out-of-screen {
    -webkit-animation: none;
    animation: none
}

.pen-container.pen-writing {
    -webkit-animation: pen-wiggling .5s ease-in-out infinite alternate running;
    animation: pen-wiggling .5s ease-in-out infinite alternate running
}

.page.write-a-letter.isSafari .pen-container.pen-writing {
    -webkit-animation: pen-wiggling .5s ease-in-out infinite alternate;
    animation: pen-wiggling .5s ease-in-out infinite alternate
}

.letter-write .pen-container {
    margin-top: -1%;
    margin-left: 3%
}

.letter-sign .pen-container {
    margin-top: -1%;
    margin-left: 3%
}

.pen-container .pen {
    background: url(../images/write-a-letter/pen.svg) no-repeat;
    width: 100%;
    height: 100%;
    -webkit-animation: pen-writing .5s ease-in-out infinite alternate paused;
    animation: pen-writing .5s ease-in-out infinite alternate paused
}

.page.write-a-letter.isSafari .pen-container .pen {
    -webkit-animation: none;
    animation: none
}

.pen-container.pen-writing .pen {
    -webkit-animation: pen-writing .5s ease-in-out infinite alternate running;
    animation: pen-writing .5s ease-in-out infinite alternate running
}

.page.write-a-letter.isSafari .pen-container.pen-writing .pen {
    -webkit-animation: pen-writing .5s ease-in-out infinite alternate;
    animation: pen-writing .5s ease-in-out infinite alternate
}

.canvasContainer {
    position: relative;
    top: 1%;
    left: 4%;
    width: 95%;
    height: 96%;
    z-index: 2;
    overflow: hidden
}

.arrow-wrapper {
    opacity: 0;
    position: absolute;
    z-index: 2;
    height: 8vh;
    left: 31%;
    width: 24vh;
    top: 73vh;
    cursor: pointer;
    -webkit-transform: translateY(50vh);
    -ms-transform: translateY(50vh);
    transform: translateY(50vh)
}

.arrow-wrapper .arrow {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-image: url(../images/continue-btn.png);
    background-size: contain;
    background-repeat: no-repeat;
    text-align: center;
    line-height: 63px;
    letter-spacing: 4px;
    margin-top: 10px;
    font-size: 3vh;
    font-weight: 700;
    text-indent: -9999px
}

.arrow-wrapper.roll-into-screen {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: top .5s linear, left .5s linear, -webkit-transform .5s ease-out;
    transition: top .5s linear, left .5s linear, -webkit-transform .5s .5s ease-out;
    -o-transition: transform .5s .5s ease-out, top .5s linear, left .5s linear;
    transition: transform .5s .5s ease-out, top .5s linear, left .5s linear;
    opacity: 1
}

.arrow-wrapper:hover .arrow {
    -webkit-animation: swingRoller .4s ease-in infinite both;
    animation: swingRoller .4s ease-in 2 both
}

.eraser-wrapper {
    opacity: 0;
    position: absolute;
    left: -5%;
    z-index: 3;
    cursor: pointer;
    display: block;
    -webkit-transform: translateY(50vh);
    -ms-transform: translateY(50vh);
    transform: translateY(50vh);
    width: 15vh;
    height: 11vh;
    top: 64vh
}

.page.write-a-letter.isIE .eraser-wrapper {
    top: 58vh
}

.eraser-wrapper.roll-into-screen {
    -webkit-transition: -webkit-transform .5s ease;
    transition: -webkit-transform .5s ease;
    -o-transition: transform .5s ease;
    transition: transform .5s ease;
    transition: transform .5s ease, -webkit-transform .5s ease;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    opacity: 1
}

[device=desktop] .eraser-wrapper:hover .eraser {
    -webkit-animation: wiggleEraser .3s ease infinite both;
    animation: wiggleEraser .3s ease 2 forwards
}

.roller-container {
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0
}

.canvasContainer {
    position: relative;
    top: 1%;
    left: 2%;
    width: 97%;
    height: 96%;
    z-index: 2;
    overflow: hidden
}

.canvas {
    position: relative;
    z-index: 10
}

.rolling-in-progress .roller {
    display: none
}

.activator {
    z-index: 1000
}

.roller {
    left: calc(50% + 27vh);
    width: 25vh;
    height: 25vh;
    opacity: 0;
    z-index: 20;
    position: absolute;
    cursor: pointer;
    top: 55vh
}

.roller-thingy {
    left: calc(50% + 27vh);
    top: 55vh;
    position: absolute;
    z-index: 20;
    width: 10px;
    height: 10px;
    pointer-events: none;
    transition: transform .5s;
    transform: translate(5vw, 40vh)
}

.roller-thingy {
    transform: translate(0, 0);
    -ms-transform-origin: 1000% 1000%;
    -webkit-transform-origin: 1000% 1000%;
    transform-origin: 1000% 1000%
}

[device=desktop] .roller-thingy.hovered {
    -webkit-animation: swingRoller .4s ease-in infinite both;
    animation: swingRoller .4s ease-in 2 both
}

.roller-thingy.roll-into-screen {
    transform: translate(0, 0)
}

.roller-thingy.roll-out-of-screen {
    transform: translate(5vw, 40vh)
}

.handle {
    background: url(../images/write-a-letter/roller.png) no-repeat;
    position: absolute;
    width: 25vh;
    height: 25vh;
    z-index: 20;
    background-size: auto 100%
}

.rubber-stamp {
    background: url(../images/write-a-letter/roller_pattern_on_roller.png);
    width: 8vh;
    height: 8.5vh;
    position: absolute;
    top: 15.2vh;
    z-index: 20;
    -webkit-transform: rotate(13deg);
    -ms-transform: rotate(13deg);
    transform: rotate(13deg);
    left: 3vh;
    background-size: cover
}

.roller-greeting {
    background-image: url(../images/write-a-letter/roller-greeting1.png);
    background-repeat: no-repeat;
    height: 8vh;
    width: 10vh;
    position: absolute;
    left: 15vh;
    top: 11vh;
    z-index: 20;
    background-size: auto 100%
}

@media(min-width:751px) {
    .letter {
        max-width: 55vh;
/*        top: 5.5vh;*/
        top: 10.5vh;
        height: 73vh;
        left: calc(50% - 26vh);
        position: relative
    }

    .letter-printable-area {
        width: 100%;
        height: 100%;
        position: absolute;
        will-change: transform
    }

    .letter-img-container {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 1
    }

    .letter-input-area {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 3
    }

    .letter-write {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 13.5%
    }

    .letter-sign {
        position: absolute;
        top: 80.5%;
        left: 49%;
        width: 100%;
        height: 100%
    }

    .page.write-a-letter:not(.isSafari) .cloned-letter-to-print .letter-write {
        top: 11%
    }

    .page.write-a-letter:not(.isSafari) .cloned-letter-to-print .letter-sign {
        top: 78%
    }

    .page.write-a-letter:not(.isSafari) .cloned-letter-to-print .letter-sign input.font-autoscale {
        height: 6vh
    }

    .letter-sign input.font-autoscale {
        width: 48%;
        font-size: 2.7vh
    }
}

.mailbox {
    display: none;
    position: absolute;
    bottom: 16vh;
    left: calc(50% + 17vh);
    width: 11.4vh;
    max-width: 107px;
    height: 23.4vh;
    max-height: 219px;
    z-index: 11;
    -webkit-transition: -webkit-transform 1.5s cubic-bezier(.6, .48, .27, .41);
    transition: -webkit-transform 1.5s cubic-bezier(.6, .48, .27, .41);
    -o-transition: transform 1.5s cubic-bezier(.6, .48, .27, .41);
    transition: transform 1.5s cubic-bezier(.6, .48, .27, .41);
    transition: transform 1.5s cubic-bezier(.6, .48, .27, .41), -webkit-transform 1.5s cubic-bezier(.6, .48, .27, .41)
}

.page.write-a-letter[step='3'] .mailbox {
    display: block;
    bottom: 23vh;
    left: calc(50% + 15vh);
    width: 10vh;
    height: 20vh
}

.page.write-a-letter[step='4'] .mailbox,
.page.write-a-letter[step='5'] .mailbox {
    display: block;
    -ms-transform: scale(.9) translate(-25vh, 3vh) !important;
    -webkit-transform: scale(.9) translate(-25vh, 3vh) !important;
    transform: scale(.9) translate(-25vh, 3vh) !important
}

.mailbox img {
    max-width: 100%;
    max-height: 100%;
    position: relative;
    z-index: 12
}

.mailbox .mailbox-target {
    position: absolute;
    width: 2px;
    height: 2px;
    left: calc(50% - 1px);
    top: 37%
}

.mailbox .mailbox-target .envelope {
    left: -50%;
    top: 50%
}

.stars-blast-container {
    position: absolute;
    width: 3vh;
    height: 3vh;
    left: 81%;
    top: 25%;
    z-index: 11;
    overflow: visible;
    visibility: hidden
}

.stars-blast-container svg {
    overflow: visible;
    width: 100%;
    height: 100%
}

.stars-blast-container svg #oneStar,
.stars-blast-container svg #stars .st0 {
    will-change: transform;
    position: absolute;
    backface-visibility: hidden
}

@media(max-height:720px) {

    [device=desktop] .page.write-a-letter[step='4'] .mailbox,
    [device=desktop] .page.write-a-letter[step='5'] .mailbox {
        display: block;
        -ms-transform: scale(.8) translate(-28vh, 9vh) !important;
        -webkit-transform: scale(.8) translate(-28vh, 9vh) !important;
        transform: scale(.8) translate(-28vh, 9vh) !important
    }
}

#af-smart-banner {
    display: none !important
}

html body {
/*    overflow: hidden;*/
    margin-top: 0 !important
}

html[page=write-a-letter] #finderContainer {
    margin-top: 0
}

html[page=write-a-letter] #finderContainer .footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 200
}

@font-face {
    font-family: swankyandmoomoo;
    src: url(//storage.googleapis.com/digital-media-fonts/package/swankyandmoomoo/SwankyandMooMoo.ttf);
    src: url(//storage.googleapis.com/digital-media-fonts/package/swankyandmoomoo/SwankyandMooMoo.ttf) format('truetype');
    font-style: normal;
    font-weight: 400
}

.page.write-a-letter {
    width: 100%;
    position: relative;
    background-color: #232356
}

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

.star-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden
}

.button {
    text-align: center;
    font-size: 3vh;
    color: #fff;
    background-size: 100%;
    cursor: pointer;
    font-family: kon-tiki-aloha-jf, Helvetica, sans-serif
}

.breadcrumbs {
    position: absolute;
    left: 2vw;
    top: 1vw;
    z-index: 10
}

.breadcrumbs .star {
    position: absolute;
    bottom: 0;
    display: none
}

.breadcrumbs .star.step1 {
    left: 9%
}

.breadcrumbs .star.step2 {
    left: 49%
}

.breadcrumbs .star.step4 {
    left: 89%
}

.maw-logo {
    position: absolute;
    right: 2vw;
    display: block;
    background: url(../images/write-a-letter/logo-MAW.png) no-repeat;
    background-position: 0 0;
    max-width: 154px;
    max-height: 32px;
    background-size: auto 100% !important;
    z-index: 10
}

@media screen and (max-height:800px) {
    [device=desktop] .arrow-wrapper {
        top: 70vh
    }

    [device=desktop] .bigBubble .text-group-top .header {
        font-size: 4.7vh
    }

    [device=desktop] .letter-printable-area.tiltAndScale {
        -ms-transform: rotate(10deg) scale(.7) translate(62vh, -20vh);
        -webkit-transform: rotate(10deg) scale(.7) translate(62vh, -20vh);
        transform: rotate(10deg) scale(.7) translate(62vh, -20vh)
    }

    [device=desktop] .thankyou .copy-area h4 {
        font-size: 3.4vh;
        padding: 0 0 .5vh
    }

    [device=desktop] .thankyou .copy-area p {
        line-height: 1.4
    }

    [device=desktop] .page.write-a-letter[step='3'] .letter-printable-area .edit-button {
        bottom: 3%;
        right: -4%
    }
}

@media only screen and (orientation:portrait) and (max-width:800px) and (max-height:1100px) {
    html[page=write-a-letter] #finderContainer .footer {
        padding: 7px 0
    }

    div.footer p {
        padding: 5px
    }
}

@media(min-width:751px) {
    .page.write-a-letter {
        height: calc(100vh - 60px);
        overflow: hidden
    }

    .bg-wrapper,
    .bg-wrapper .houses,
    .ground-wrapper {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 44%;
        left: 0;
        background-position: center bottom;
        background-size: auto 335px
    }

    .bg-wrapper {
        background-image: url(../images/bgrepeat.png);
        background-repeat: repeat-x
    }

    .bg-wrapper .houses {
        top: 0;
        bottom: 0;
        background-image: url(../images/bghouse.png);
        background-repeat: no-repeat
    }

    .ground-wrapper {
        top: 50%;
        bottom: 0;
        background-color: #ece8d9
    }

    .inner-container {
        margin: 0 auto !important;
        -webkit-transform-origin: center top;
        -ms-transform-origin: center top;
        transform-origin: center top;
        -webkit-transition: all .5s ease-out;
        -o-transition: all .5s ease-out;
        transition: all .5s ease-out;
        height: 100%;
        position: relative;
        z-index: 100;      
    }

    .button {
        width: 26vh;
        height: 5.2vh;
        line-height: 5.2vh;
        font-size: 2.6vh
    }

    .maw-logo {
        top: 1vw;
        width: 11.5vw;
        height: 2.4vw
    }
}

@media(max-width:750px) {
    .desktoponly {
        display: none !important
    }

    .letter-printable-area {
        background: url(../images/frames/mframe-1.png);
        background-size: 100% 100% !important;
        margin-top: 50px;
        background-color: #fff !important
    }
}

.stickers-dropbox [class^=sticker-] .draggable-area img,
.stickers-group [class^=both-sticker-] img {
    width: 100%
}

.stickers-group [class^=sticker-] {
    opacity: 1;
    -webkit-transition: opacity .25s ease;
    -o-transition: opacity .25s ease;
    transition: opacity .25s ease
}

.stickers-dropbox [class^=sticker-],
.stickers-group .both-sticker-container [class^=behind-sticker-],
.stickers-group [class^=sticker-] {
    position: absolute;
    z-index: 5
}

.stickers-dropbox .sticker-candy,
.stickers-group .both-sticker-container.candy,
.stickers-group .both-sticker-container.candy > * {
    width: 8.8vh;
    height: 8.7vh;
    max-width: 98px;
    max-height: 97px
}

.stickers-dropbox .sticker-gingerman,
.stickers-group .both-sticker-container.gingerman,
.stickers-group .both-sticker-container.gingerman > * {
    width: 6.8vh;
    height: 9.3vh;
    max-width: 76px;
    max-height: 103px
}

.stickers-dropbox .sticker-dog,
.stickers-group .both-sticker-container.dog,
.stickers-group .both-sticker-container.dog > * {
    width: 9vh;
    height: 8.4vh;
    max-width: 100px;
    max-height: 93px
}

.stickers-dropbox .sticker-drum,
.stickers-group .both-sticker-container.drum,
.stickers-group .both-sticker-container.drum > * {
    width: 6.8vh;
    height: 6.5vh;
    max-width: 76px;
    max-height: 72px
}

.stickers-dropbox .sticker-house,
.stickers-group .both-sticker-container.house,
.stickers-group .both-sticker-container.house > * {
    width: 8.5vh;
    height: 6.4vh;
    max-width: 94px;
    max-height: 71px
}

.stickers-dropbox .sticker-firecrackers,
.stickers-group .both-sticker-container.firecrackers,
.stickers-group .both-sticker-container.firecrackers > * {
    width: 11vh;
    height: 8.2vh;
    max-width: 122px;
    max-height: 91px
}

.stickers-dropbox .sticker-trees,
.stickers-group .both-sticker-container.trees,
.stickers-group .both-sticker-container.trees > * {
    width: 6.2vh;
    height: 8.6vh;
    max-width: 69px;
    max-height: 96px
}

.stickers-dropbox .sticker-birds,
.stickers-group .both-sticker-container.birds,
.stickers-group .both-sticker-container.birds > * {
    width: 13.4vh;
    height: 5.7vh;
    max-width: 149px;
    max-height: 63px
}

.stickers-dropbox .sticker-trumpet,
.stickers-group .both-sticker-container.trumpet,
.stickers-group .both-sticker-container.trumpet > * {
    width: 8.6vh;
    height: 7vh;
    max-width: 96px;
    max-height: 78px
}

.stickers-dropbox .sticker-ornament,
.stickers-group .both-sticker-container.ornament,
.stickers-group .both-sticker-container.ornament > * {
    width: 8.2vh;
    height: 10.3vh;
    max-width: 91px;
    max-height: 115px
}

.stickers-dropbox .sticker-stocking,
.stickers-group .both-sticker-container.stocking,
.stickers-group .both-sticker-container.stocking > * {
    width: 6.7vh;
    height: 7.5vh;
    max-width: 74px;
    max-height: 83px
}

.stickers-dropbox .sticker-deco,
.stickers-group .both-sticker-container.deco,
.stickers-group .both-sticker-container.deco > * {
    width: 11.2vh;
    height: 9.8vh;
    max-width: 125px;
    max-height: 109px
}

@media(min-width:751px) {
    .stickers {
        width: 19.3vh;
        height: 70.2vh;
        left: -38%;
        top: 2%;
        background-size: auto 100%;
        position: absolute;
        opacity: 0;
        will-change: transform;
        -webkit-transform: translateX(-5vw);
        -ms-transform: translateX(-5vw);
        transform: translateX(-5vw);
        -o-transition: transform .5s, opacity .5s;
        -webkit-transition: opacity .5s, -webkit-transform .5s;
        transition: transform .5s, opacity .5s;
        background-color: #f2f2f2;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-pointer-events: none;
        z-index: 1
    }

    .page.write-a-letter[step='2'] .stickers {
        -webkit-user-select: auto;
        -moz-user-select: auto;
        -ms-user-select: auto;
        user-select: auto;
        pointer-events: auto;
        -webkit-pointer-events: auto
    }

    .stickers.roll-into-screen {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }

    .stickers:not(.roll-into-screen) {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none
    }

    .stickers.roll-out-of-screen {
        -webkit-transform: translateX(-10vw);
        -ms-transform: translateX(-10vw);
        transform: translateX(-10vw);
        opacity: 0 !important
    }

    .stickers .top-instructions {
        text-align: center;
        padding: 2vh 0 0
    }

    .stickers .top-instructions p {
        font-family: Paintline;
        color: #d7333c;
        line-height: 1;
        margin: 1% auto 5%;
        font-size: 3.1vh;
        letter-spacing: 1px;
        font-weight: 600
    }

    .stickers .top-instructions p span {
        color: #224a5c
    }

    .stickers .top-instructions small {
        display: block;
        font-size: 2.8vh;
        font-weight: 600;
        letter-spacing: 2px;
        line-height: 1;
        color: #14536d;
        color: #224a5c;
        font-family: Paintline
    }

    .stickers .stickers-group {
        position: absolute;
        width: 100%;
        height: 68%;
        top: 15%
    }

    .stickers .stickers-group1,
    .stickers .stickers-group2 {
        width: 100%;
        height: 100%;
        position: absolute
    }

    .stickers .stickers-group1.hidden,
    .stickers .stickers-group2.hidden {
        display: none
    }

    .stickers .both-sticker-container {
        position: absolute;
        left: 20%;
        width: 7vh;
        height: 7vh;
        opacity: 1;
        -ms-transform: scale(1);
        transform: scale(1);
        -webkit-transform: scale(1);
        -webkit-transition: all .2s ease;
        transition: all .2s ease
    }

    .stickers .both-sticker-container.bigger {
        -ms-transform: scale(1.1);
        transform: scale(1.1);
        -webkit-transform: scale(1.1)
    }

    .stickers-group .both-sticker-container [class^=behind-sticker-] {
        user-drag: none;
        user-select: none;
        -moz-user-select: none;
        -webkit-user-drag: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        pointer-events: none
    }

    .stickers-group [class^=sticker-] img {
        cursor: move;
        width: 100%;
        position: relative;
        z-index: 1
    }

    .stickers-group [class^=both-sticker-] img,
    .stickers-group [class^=sticker-] img {
        backface-visibility: hidden
    }

    .stickers [class^=sticker-] .stickers-arrows img {
        max-width: 100%
    }

    .stickers [class^=sticker-] .draggable-area {
        position: relative
    }

    .stickers.roll-into-screen {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }

    .stickers .stickers-arrow {
        position: absolute;
        cursor: pointer;
        top: 92%;
        bottom: 2%;
        left: 36%;
        height: 5%
    }

    .stickers .stickers-arrow span {
        font-family: 'Londrina Solid', cursive;
        color: #d7333c;
        letter-spacing: 1px;
        font-size: 1.8vh
    }

    .stickers .stickers-arrow img {
        max-width: 100%;
        transform-origin: center;
        margin: -.5vh 0 0 .3vh;
        -webkit-transition: -webkit-transform .5s cubic-bezier(.6, -.43, .38, 1.35);
        transition: -webkit-transform .5s cubic-bezier(.6, -.43, .38, 1.35);
        -o-transition: transform .5s cubic-bezier(.6, -.43, .38, 1.35);
        transition: transform .5s cubic-bezier(.6, -.43, .38, 1.35);
        transition: transform .5s cubic-bezier(.6, -.43, .38, 1.35), -webkit-transform .5s cubic-bezier(.6, -.43, .38, 1.35)
    }

    .stickers .stickers-arrow.group1-active img {
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg)
    }

    .stickers .stickers-arrow.group2-active img {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0)
    }

    [class^=sticker-] .close-sticker {
        display: block;
        position: relative;
        top: -10vh;
        right: -90%;
        color: #fff;
        font-weight: 700;
        opacity: 0;
        -webkit-transition: opacity .4s ease;
        -o-transition: opacity .4s ease;
        transition: opacity .4s ease;
        border-radius: 50%;
        background: #ed1c26;
        text-align: center;
        font-size: 2.5vh;
        width: 2.5vh;
        height: 2.5vh;
        line-height: 2.5vh
    }

    .ui-droppable [class^=sticker-].ui-draggable:hover > .close-sticker {
        cursor: pointer
    }

    .ui-droppable [class^=sticker-].ui-draggable:hover .stickers-arrows,
    .ui-droppable [class^=sticker-].ui-draggable:hover > .close-sticker {
        opacity: 1
    }

    .sticker-ornament.ui-draggable > .close-sticker {
        top: -13vh;
        right: -100%
    }

    .sticker-deco.ui-draggable > .close-sticker {
        top: -13vh
    }

    [class^=sticker-] .stickers-arrows {
        opacity: 0;
        -webkit-transition: opacity .4s ease;
        -o-transition: opacity .4s ease;
        transition: opacity .4s ease;
        position: absolute;
        top: 20%;
        left: -25%;
        width: 150%;
        height: 100%;
        background: url(data:image/png;base64,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) no-repeat;
        background-size: 100%;
        z-index: 0
    }

    [class^=sticker-] .stickers-arrows,
    [class^=sticker-] img {
        transform-origin: 50% 50% !important
    }

    [class^=sticker-] .stickers-arrows-left,
    [class^=sticker-] .stickers-arrows-right {
        opacity: 0;
        -webkit-transition: opacity .4s ease;
        -o-transition: opacity .4s ease;
        transition: opacity .4s ease;
        position: absolute;
        width: 50%;
        background-size: contain;
        top: 20%;
        height: 70%;
        cursor: pointer
    }

    [class^=sticker-] .stickers-arrows-left {
        background: url(../images/write-a-letter/stickers/stickers-arrows-left.png) no-repeat;
        left: -30%
    }

    [class^=sticker-] .stickers-arrows-right {
        background: url(../images/write-a-letter/stickers/stickers-arrows-right.png) no-repeat;
        right: -30%
    }

    .ui-droppable [class^=sticker-].ui-draggable .stickers-arrows {
        z-index: -2
    }

    [class^=sticker-] .ui-rotatable-handle {
        cursor: pointer;
        z-index: 999;
        position: absolute;
        top: 20%;
        left: -25%;
        width: 150%;
        height: 100%;
        opacity: 0;
        z-index: -1
    }

    .stickers .stickers-group1 [class^=sticker-] {
        opacity: 0;
        transition: opacity .2s ease-out, transform .2s ease-out;
        transform: scale(1.9) translateY(-15%)
    }

    .stickers [class^=sticker-].pop {
        opacity: 1;
        transform: scale(1) translateY(0)
    }

    .stickers .both-sticker-container.candy {
        top: 2%
    }

    .stickers .both-sticker-container.gingerman {
        top: 13%;
        left: 53%
    }

    .stickers .both-sticker-container.dog {
        top: 32%;
        left: 20%
    }

    .stickers .both-sticker-container.drum {
        top: 52%;
        left: 49%
    }

    .stickers .both-sticker-container.house {
        top: 68%;
        left: 20%
    }

    .stickers .both-sticker-container.firecrackers {
        top: 83%;
        left: 23%
    }

    .stickers .both-sticker-container.trees {
        top: 1%;
        left: 33%
    }

    .stickers .both-sticker-container.birds {
        top: 21%;
        left: 18%
    }

    .stickers .both-sticker-container.trumpet {
        top: 36%;
        left: 18%
    }

    .stickers .both-sticker-container.ornament {
        top: 48%;
        left: 46%
    }

    .stickers .both-sticker-container.stocking {
        top: 64%;
        left: 18%
    }

    .stickers .both-sticker-container.deco {
        top: 80%;
        left: 23%
    }
}

@media(max-width:750px) {
    .stickers {
        height: 0;
        background-color: #fff;
        background-color: #fff;
        border: 5px solid #79bea6;
        border-radius: 10px;
        margin-bottom: -30px;
        -webkit-transition: all .5s ease;
        transition: all .5s ease;
        -webkit-box-shadow: 0 -5px 5px 0 rgba(0, 0, 0, .15);
        -moz-box-shadow: 0 -5px 5px 0 rgba(0, 0, 0, .15);
        box-shadow: 0 -5px 5px 0 rgba(0, 0, 0, .15);
      opacity: 0;
      display: none;
    }

    .stickers_mobile.open {
        height: 44vw;
        margin-bottom: -10px
    }

    .stickers_mobile .hidden {
        display: block !important
    }

    .stickers_mobile .top-instructions {
        position: absolute;
        left: 50%;
        top: 0;
        border: 3px solid #fff;
        background-color: #fff;
        border-radius: 50%;
        width: 34px;
        height: 34px;
        margin: -18px 0 0 -17px;
        -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, .1);
        -moz-box-shadow: 0 0 2px 2px rgba(0, 0, 0, .1);
        box-shadow: 0 0 2px 2px rgba(0, 0, 0, .1);
        z-index: 300
    }

    .stickers_mobile .top-instructions .close {
        width: 100%;
        height: 100%;
        line-height: 24px;
        padding: 0 0 0 7px;
        font-size: 24px;
        color: #fff;
        background-color: #9678b6;
        font-family: 'Helvetica Neue LT W01_95 Black', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        border-radius: 50%;
        box-sizing: border-box;
        z-index: 1000
    }

    .stickers_mobile .stickers-group1,
    .stickers_mobile .stickers-group2 {
        height: 9vh;
        padding-left: 2vh;
        white-space: nowrap
    }

    .stickers_mobile .stickers-group1 {
        margin-top: 2vh
    }

    .stickers-group2 {
        display: block !important
    }

    .stickers_mobile .both-sticker-container {
        display: inline-block;
        vertical-align: middle;
        margin-right: 1.5vw;
        position: relative
    }

    .stickers-dropbox {
        width: 100%;
        left: 0
    }

    .stickers-dropbox > * img {
        width: 100%
    }

    [class^=sticker-] .stickers-arrows {
        display: none !important
    }

    .stickers_mobile .both-sticker-container {
        display: inline-block;
        vertical-align: middle;
        margin-right: .5vh
    }

    .stickers-dropbox .sticker-candy,
    .stickers-group .both-sticker-container.candy,
    .stickers-group .both-sticker-container.candy > * {
        width: 13.6vw;
        height: 13.4vw
    }

    .stickers-dropbox .sticker-gingerman,
    .stickers-group .both-sticker-container.gingerman,
    .stickers-group .both-sticker-container.gingerman > * {
        width: 10.2vw;
        height: 14.2vw
    }

    .stickers-dropbox .sticker-dog,
    .stickers-group .both-sticker-container.dog,
    .stickers-group .both-sticker-container.dog > * {
        width: 14.2vw;
        height: 12.8vw
    }

    .stickers-dropbox .sticker-drum,
    .stickers-group .both-sticker-container.drum,
    .stickers-group .both-sticker-container.drum > * {
        width: 12vw;
        height: 11.6vw
    }

    .stickers-dropbox .sticker-house,
    .stickers-group .both-sticker-container.house,
    .stickers-group .both-sticker-container.house > * {
        width: 13.6vw;
        height: 10.4vw
    }

    .stickers-dropbox .sticker-firecrackers,
    .stickers-group .both-sticker-container.firecrackers,
    .stickers-group .both-sticker-container.firecrackers > * {
        width: 16vw;
        height: 13vw
    }

    .stickers-dropbox .sticker-trees,
    .stickers-group .both-sticker-container.trees,
    .stickers-group .both-sticker-container.trees > * {
        width: 10vw;
        height: 13.8vw
    }

    .stickers-dropbox .sticker-birds,
    .stickers-group .both-sticker-container.birds,
    .stickers-group .both-sticker-container.birds > * {
        width: 18.8vw;
        height: 8vw
    }

    .stickers-dropbox .sticker-trumpet,
    .stickers-group .both-sticker-container.trumpet,
    .stickers-group .both-sticker-container.trumpet > * {
        width: 13.6vw;
        height: 11vw
    }

    .stickers-dropbox .sticker-ornament,
    .stickers-group .both-sticker-container.ornament,
    .stickers-group .both-sticker-container.ornament > * {
        width: 11.4vw;
        height: 15vw
    }

    .stickers-dropbox .sticker-stocking,
    .stickers-group .both-sticker-container.stocking,
    .stickers-group .both-sticker-container.stocking > * {
        width: 11.8vw;
        height: 13.3vw
    }

    .stickers-dropbox .sticker-deco,
    .stickers-group .both-sticker-container.deco,
    .stickers-group .both-sticker-container.deco > * {
        width: 15vw;
        height: 13vw
    }

    [class^=sticker-] .close-sticker {
        display: none
    }
}

.page.write-a-letter[step='4'] .thankyou,
.page.write-a-letter[step='5'] .thankyou {
    display: block
}

.thankyou .bg {
    background-repeat: repeat-x;
    width: 100%;
    z-index: 2
}

.thankyou .copy-area {
    color: #fff;
    font-family: HelveticaNeueW01-55Roma, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1.9vh;
    margin: 0 auto;
    text-align: center;
    padding-top: 2vh;
    position: relative;
    z-index: 3
}

.thankyou .copy-area h3 {
    color: #fff;
    font-size: 3.8vh;
    letter-spacing: .2vh;
    padding: .5vh 0 1.5vh
}

.thankyou .copy-area p {
    letter-spacing: .1vh;
    line-height: 1.8
}

.thankyou .copy-area p sup {
    position: relative;
    top: -5px;
    font-size: small
}

.thankyou .findoutmore {
    margin: 1.5vh auto 2vh;
    -webkit-transition: -webkit-transform .5s ease;
    transition: transform .5s ease;
    display: block;
    text-decoration: none
}

.thankyou .bottom > * {
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    font-family: 'Londrina Solid', cursive;
    font-family: HelveticaNeueW01-75Bold, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    text-decoration: none;
    font-size: 1.3vh;
    line-height: 2.5vh;
    height: 2.5vh;
    background-color: transparent
}

.thankyou .bottom > a {
    cursor: pointer
}

.thankyou .bottom .another {
    border-right: 3px solid #fff;
    padding: 0 5vh 0 0;
    position: relative
}

.thankyou .bottom .another:after {
    content: "";
    background-image: url(../images/write-a-letter/thankyou_pen.png);
    width: 2.3vh;
    height: 2.3vh;
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
    position: absolute;
    bottom: 0;
    right: 1vh
}

[device=desktop] .thankyou .bottom .another:hover {
    color: #136c9a
}

.thankyou .bottom span {
    padding: 0 1vh
}

[device=desktop] .thankyou .bottom .another:hover:after {
    background-image: url(../images/write-a-letter/thankyou_pen_hover.png);
    -webkit-animation: swingRoller .4s ease-in infinite both;
    animation: swingRoller .4s ease-in 2 both
}

.thankyou .bottom .share-icon {
    width: 5vh;
    background-size: auto 90%;
    background-position: center;
    background-repeat: no-repeat
}

.thankyou .bottom .share-facebook:hover {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAVCAYAAAB/sn/zAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MkUwQThGQ0NDNUE3MTFFOEE1NzhGRDhFOEM3QzhDMTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MkUwQThGQ0RDNUE3MTFFOEE1NzhGRDhFOEM3QzhDMTIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpEQzg0REU3RkM1OUUxMUU4QTU3OEZEOEU4QzdDOEMxMiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpEQzg0REU4MEM1OUUxMUU4QTU3OEZEOEU4QzdDOEMxMiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pk4GdasAAACCSURBVHjaYvz//z8DOuAMrQkAUgZIQg8YkRUCFSgAqf1ArICm9wATmkA9FkVggK4wgAEHYEHjCyC7C4gNv69u+YDNRGTwAKaIkEIUwMgRUt0A9QQ+cIBoE4lVeAHk6wNo4Yjs64Uwq9FjBjk+DwB97Uiyr0cV4gXo6bERLWbgACDAANs0JFouEwQqAAAAAElFTkSuQmCC)
}

.thankyou .bottom .share-twitter:hover {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAARCAYAAAAyhueAAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MkUwQThGRDBDNUE3MTFFOEE1NzhGRDhFOEM3QzhDMTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MkUwQThGRDFDNUE3MTFFOEE1NzhGRDhFOEM3QzhDMTIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyRTBBOEZDRUM1QTcxMUU4QTU3OEZEOEU4QzdDOEMxMiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyRTBBOEZDRkM1QTcxMUU4QTU3OEZEOEU4QzdDOEMxMiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pic3LEkAAAFOSURBVHjapJRBTsMwEEXjqgvY9Qb4BuQGhBMAUrtuewLoGiSKRNctJ2hY00Vv0HIC2huEG5QV7ML/aFwNxo2jMNJXnHHmZWzP2JRlmdCMMUkdO+repnhcQifQFsq/FpMdOce9O/v58lgYeeFHBSY3EeAAj7nn3kEP0CnHgI5aMnEGrRCUVQCzAJDWgaYQV7Bltg5qZZLgMdQJBPcjO0Poz/Id9FVN3kNvAN9AVvltBDoDcMxBWxw5dK0CrSxpCjD3uagB/XCDtspucyAwFcVsf8hu+e9SJv+xwofm2tkEiP38nSkcrLVzaN0Q+qxfWl4RJw0yZtwsCGWrVRxWlT1J7N6M3/ssfin0OvAlgFccOI6/fJcxoUNdIhUlNAxNGGnJVNXkBZTFugc/H2mHztTdUgPpqFiRL3kjhW6zP1C3p9LrWWA/CVn7B3II+i3AALlig8oAoFhkAAAAAElFTkSuQmCC)
}

.thankyou .far {
    position: absolute;
    width: 100%;
    height: 20vh;
    bottom: 50px;
    background-color: #fff;
    pointer-events: none
}

@media(min-width:751px) {
    .thankyou {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0
    }

    .thankyou .bg {
        background-image: url(../images/write-a-letter/thankyou_bg.png);
        width: 100%;
        background-size: auto 100%;
        background-position: top center;
        height: 23vh;
        bottom: 15vh;
        position: absolute
    }

    .thankyou .copy-area {
        display: none
    }

    .thankyou .findoutmore {
        background-color: #136c9a;
        margin: 1vh auto 1.5vh
    }

    .thankyou .findoutmore:hover {
        background-color: #fff !important;
        color: #136c9a
    }
}

body[device=mobile] #finderContainer {
    margin-top: 54px !important
}

.inApp body[device=mobile] #finderContainer {
    margin-top: 0 !important
}

body[device=mobile] .page.write-a-letter {
    margin-top: 0 !important
}

@media(max-width:750px) {
    html[page=write-a-letter] body.mobile-size .brand-bar-container {
        display: none !important
    }

    nav .nav {
        padding-top: 0
    }

    nav .nav .nav-icon.nav-bag,
    nav .nav .nav-macyslogo {
        display: none !important
    }

    nav .nav .nav-content {
        top: 6em
    }

    .page.write-a-letter {
        overflow-x: hidden;
        height: calc(100vh - 86px)
    }

    .inner-container p {
        font-family: Helvetica, arial, sans-serif;
        text-align: center;
        color: #fff;
        font-size: 1.16666em;
        line-height: 1.4
    }

    .handwriting {
        font-family: kon-tiki-aloha-jf, Helvetica, sans-serif !important;
        line-height: 1.4;
        letter-spacing: .5px
    }

    .canvasContainer,
    .edit-button {
        display: none
    }

    .inner-container {
        display: -webkit-box;
        display: -ms-flexbox;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        height: 100%
    }

    .inner-container.preventMove {
        display: block;
        overflow: hidden
    }

    .inner-container > * {
        position: relative;
        width: 100vw;
        height: 100%;
        overflow: hidden
    }

    .letter-img-container {
        text-align: center
    }

    .letter-img-container img {
        filter: none !important;
        height: auto;
        margin-bottom: 2vh
    }

    .letter-printable-area {
        height: calc(100vh - 50px - 0vh)
/*      height: calc(100vh - 50px - 18vh);*/
          -webkit-border-radius: 20px;
          -moz-border-radius: 20px;
          border-radius: 20px;
    }

    .letter-write {
        position: relative
    }

    .letter-write textarea {
        font-size: 3.3vh !important;
        line-height: calc(3.8vh + 1px);
        margin: 0 5%;
        background-image: -webkit-linear-gradient(#e8e8e8 1px, transparent 1px);
        background-image: -moz-linear-gradient(#e8e8e8 1px, transparent 1px);
        background-image: -o-linear-gradient(#e8e8e8 1px, transparent 1px);
        background-image: linear-gradient(#e8e8e8 1px, transparent 1px);
        background-size: 3.8vh 3.8vh;
        background-repeat: repeat;
        background-position: 0 3.2vh;
        width: 90%;
        padding: 0
    }

    .letter-sign {
        border-bottom: 1px solid #e8e8e8;
        width: 32vh;
        font-size: 4vh;
        line-height: 4.5vh;
        left: 40%;
        position: relative;
      padding-bottom: 30px;
    }

    .letter-sign input {
        font-size: 2.8vh !important;
        line-height: 4vh !important;
        width: 85%;
        left: 15%;
        padding-top: 0;
        padding-bottom: 0;
        position: relative
    }

    .letter-sign:before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 3vh;
        background-image: url(../images/write-a-letter/icon_signoff.png);
        background-repeat: no-repeat;
        background-size: auto 80%
    }

    .stickers {
        z-index: 100
    }

    .bottom-nav,
    .stickers {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0
    }

    .bottom-nav {
        height: 8.5vh;
        font-size: 2.3vh;
        display: -webkit-box;
        display: -ms-flexbox;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row
    }

    .bottom-nav > * {
        position: relative;
        width: 100vw;
        height: 100%;
        overflow: hidden
    }

    .bottom-nav > .bottom_letter {
        background-color: #fff
    }

    .bottom-nav > * > * {
        display: inline-block;
        vertical-align: middle;
        width: 39%;
        margin: 0 5%;
        height: 100%;
        line-height: 8.5vh
    }

    .bottom-nav .addstickers {
        color: #764fa2;
        text-transform: uppercase;
        letter-spacing: .1vh !important;
        white-space: nowrap
    }

    .bottom-nav .addstickers img {
        height: 75%;
        margin-right: 1vh
    }

    .continue {
        
       /* background-image: url(../images/continue.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        text-transform: uppercase;
        font-family: Paintline;
        LETTER-SPACING: 4px;
        font-weight: 700;
        text-indent: -9999px*/
        color: #fff;        
        font-family: Paintline;
        letter-spacing: 2px;
        display: inline-block;   
    }

    .bigBubble {
        position: relative;
        text-align: center
    }

    .bigBubble p {
        font-size: 17px
    }

    .bigBubble .button {
        font-size: 2.5vh
    }

    .bigBubble .top {
        margin-top: 6vh
    }

    .bigBubble .mobile-letter {
        width: 64%;
        top: 5vh;
        left: -1.5vh;
        position: relative
    }

    .bigBubble .senditnow {
        width: 30vh;
        margin: 1.5vh auto;
        background-size: 100% 100%;
        background-image: url(../images/write-a-letter/button_step3_m.png);
        position: relative;
        height: 5.6vh;
        line-height: 5.6vh
    }

    .bigBubble .senditnow > * {
        margin-left: -10px
    }

    .bigBubble .senditnow img {
        position: absolute;
        right: 2.2vh;
        width: 3.8vh;
        top: 1.4vh;
        -webkit-animation: swingLetter .5s ease-in-out infinite;
        animation: swingLetter .5s ease-in-out infinite;
        display: inline-block
    }

    .bigBubble .bottom {
        margin-top: 1vh;
        position: relative
    }

    .bigBubble .bottom p {
        color: #266a90;
        position: relative;
        font-family: 'Helvetica Neue LT W01_65 Md', 'Helvetica Neue', Helvetica, Arial, sans-serif
    }

    .bigBubble .bottom p:first-of-type {
        padding-top: 7vh;
        margin-left: -15%;
        line-height: 1.2
    }

    .bigBubble .bottom .bg {
        display: block;
        position: absolute;
        width: 76%;
        left: 12%
    }

    .bigBubble .bottom .button {
        display: inline-block;
        background-size: 100% 100%;
        background-image: url(../images/write-a-letter/button_step3_bottom.png);
        position: relative;
        width: 20vh;
        margin: 3vh 1vh 0;
        text-decoration: none;
        height: 6.4vh;
        line-height: 6.4vh
    }

    .bottom-nav .bottom_send {
        background-image: url(../images/write-a-letter/step3_edit_m.png);
        background-size: 100%;
        text-align: left;
        background-position: left center
    }

    .bottom-nav .bottom_send .button {
        font-size: 2.6vh;
        text-decoration: underline;
        margin: .2vh auto 0 8%;
        color: #ed3131 !important
    }

    .bigBubble .mailbox {
        width: 8.5vh;
        height: auto;
        -webkit-transform: rotate(5deg);
        -ms-transform: rotate(5deg);
        transform: rotate(5deg);
        left: calc(50% + 9vh);
        top: 0
    }

    .maw-logo {
        top: 2vw;
        width: 21vw;
        height: 4.4vw
    }

    .page.write-a-letter[step='1'] .maw-logo {
        background: url(../images/write-a-letter/logo-MAW-blue.png) no-repeat
    }

    .thankyou .bg {
        background-image: url(../images/write-a-letter/thankyou_bg_m.png);
        background-size: 100% auto;
        height: 30vh;
        margin-top: 5vh;
        position: relative
    }

    .thankyou .copy-area img {
        width: 22%;
        margin: 1vh 0 .5vh
    }

    .thankyou .copy-area h4 {
        font-size: 3.2vh
    }

    .thankyou .copy-area p {
        font-size: 1em;
        line-height: 1.6
    }

    .thankyou .bottom .another {
        display: block;
        width: 50%;
        margin: 2vh auto 1vh;
        white-space: nowrap;
        border-right: none;
        font-size: 1.8vh
    }

    .thankyou .bottom span {
        font-size: 1.8vh
    }

    .thankyou .bottom .share-icon {
        background-size: auto 40%;
        background-color: rgba(38, 106, 144, .2);
        border-radius: 50%;
        height: 5vh;
        margin: auto .7vh
    }

    .button.findoutmore {
        margin-bottom: 0;
        background-image: url(../images/write-a-letter/thankyou_button_m.png);
        width: 26vh;
        font-size: 2.6vh;
        padding: 1vh 0
    }

    .thankyou .copy-area h3 {
        text-transform: uppercase;
        font-size: 3.4vh
    }

    .thankyou .far {
        bottom: 0;
        height: 10vh
    }
}

.bigFigure.desktoponly.roll-out-of-screen {
    transform: translate(-17vh, -5vh);
    transition: transform .7s ease-in-out
}

.ag-themes {
    right: -38%;
    -webkit-transform: translateX(50vw);
    -moz-transform: translateX(50vw);
    transform: translateX(50vw);
    -o-transition: transform .5s, opacity .5s
}

.roll-into-screen1 {
    -webkit-transform: translateX(78vh);
    -ms-transform: translateX(78vh);
    transform: translateX(78vh);
    opacity: 1
}

.ag-letterBox {
    right: 50%;
    margin-right: -60vh;
/*
    -webkit-transform: translate(92vh, 14vh);
    -moz-transform: translate(92vh, 14vh);
    transform: translate(92vh, 14vh);
*/
    
    -webkit-transform: translate(92vh, 13vh);
    -moz-transform: translate(92vh, 13vh);
    transform: translate(92vh, 13vh);
    z-index: 0
}

.text-group h1 {
    margin-top: 0;
    font-family: Paintline;
    font-weight: 700;
    font-size: 22px
}

.talk-bubble .text-group p {
    font-size: 20px;
    font-weight: 700
}

@media(min-width:1920px) {
    text-group h1 {
        font-size: 35px
    }

    .talk-bubble .text-group p {
        font-size: 28px
    }
}

@media(min-width:2500px) {
    text-group h1 {
        font-size: 35px
    }

    .talk-bubble .text-group p {
        font-size: 25px
    }
}