@charset "utf-8";

.agloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 999999;
    background-image: url(../images/loader-new.gif);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 40%
}

@font-face {
    font-family: Paintline;
    src: url(../fonts/Paintline.eot);
    src: url(../fonts/Paintline.eot) format('embedded-opentype'), url(../fonts/Paintline.woff2) format('woff2'), url(../fonts/Paintline.woff) format('woff'), url(../fonts/Paintline.ttf) format('truetype'), url(../fonts/Paintline.svg#Paintline) format('svg')
}

body,
html {
    width: 100%;
    height: 100%;
    padding: 0;
    margin-left: 0;
    margin-right: 0;
    margin: 0;
    -webkit-font-smoothing: antialiased
}

a {
    text-decoration: none
}

a:focus,
a:hover {
    text-decoration: none;
    outline: 0
}

img {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    user-drag: none
}

.valign {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.img-center {
    margin-left: auto;
    margin-right: auto;
    left: auto;
    right: auto
}

.noscroll {
    overflow: hidden
}

.static {
    position: static
}

.nopadding {
    padding-left: 0;
    padding-right: 0
}

.clear {
    clear: both
}

body {
    background-color: #252f3b
}

.img-responsive {
    max-width: 100%;
    width: auto;
    height: auto
}

#sky {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1
}

.ag-Wrapper {
    width: 100%;
    height: 100%;
    overflow-x: hidden
}

.videoWrapper {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 4;
    position: absolute;
    background-color: #252f3b
}

.videoWrapper video {
    width: 100%;
    position: absolute;
    bottom: 0
}

.ticker-parachute {
    position: absolute;
    width: 100px;
    right: 3%;
    top: 18%;
    z-index: 13;
    animation: bouncepara 3s infinite;
    -webkit-animation: bouncepara 3s infinite;
    -moz-animation: bouncepara 3s infinite
}

.ticker-parachute span {
    font-family: Paintline;
    font-weight: bolder;
    color: red;
    font-size: 35px;
    display: block;
    text-align: center;
    padding-top: 0;
    position: absolute;
    left: 50%;
    top: 6%;
    transform: translateX(-50%)
}

@-webkit-keyframes bouncepara {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-10%)
    }
}

@-moz-keyframes bouncepara {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-10%)
    }
}

.top-plane {
    position: absolute;
    top: 15%;
    width: 100%;
    height: 125px;
    background-image: url(../images/helicoptor-flag.gif);
    background-repeat: no-repeat;
    background-size: contain;
    animation: drive2 25s infinite linear;
    -webkit-animation: drive2 25s infinite linear;
    -moz-animation: drive2 25s infinite linear;
    -o-animation: drive2 25s infinite linear
}

@-webkit-keyframes drive2 {
    from {
        background-position: 2000px
    }

    to {
        background-position: -1000px
    }
}

@-moz-keyframes drive2 {
    from {
        background-position: 2000px
    }

    to {
        background-position: -1000px
    }
}

.redBtn {
    width: 200px;
    height: 53px;
    background-image: url(../images/wyletter.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    margin: 0 auto;
    font-family: Paintline;
    color: #fff;
    font-weight: 600;
    font-size: 25px;
    text-align: center;
    line-height: 53px;
    z-index: 99999;
    text-indent: -9999px
}

.redBtn:focus,
.redBtn:hover {
    color: #fff
}

.sectionTwo {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom center;
    position: absolute;
    top: 0;
    left: 0
}

.sectionTwo .building-and-rocks,
.sectionTwo .groundColor {
    z-index: 0
}

.FormSkinOuter {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%
}

.FormSkinOuter-letter {
    display: table
}

.FormSkin {
    width: 37%;
    display: table;
    position: relative
}

.secTwoOne {
    width: 100%;
    height: 100%
}

.sectionTwo h2 {
    display: table;
    position: absolute;
    margin: 0;
    font-size: 3vw;
    color: #fff;
    font-family: Paintline;
    font-weight: 600;
    left: 50%;
    transform: translateX(-50%);
    text-align: center
}

.formFields {
    width: 65%;
    float: left;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%
}

.form-inner .form-control {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    font-family: Paintline;
    color: #006a66;
    font-size: 1.8em;
    font-weight: 600;
    padding: 6px 6px
}

.form-inner {
    position: relative;
    top: 40%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 80%;
    margin: 0 auto
}

.form-control ::-webkit-input-placeholder {
    color: #006a66
}

.form-control ::-moz-placeholder {
    color: #006a66
}

.form-control :-ms-input-placeholder {
    color: #006a66
}

.form-control :-moz-placeholder {
    color: #006a66
}

textarea.addressLine {
    height: 80px !important
}

.formcontent1 {
    height: 350px;
    overflow-y: auto;
    overflow-x: hidden
}

.formcontent1::-webkit-scrollbar {
    width: .55em
}

.formcontent1::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
}

.formcontent1::-webkit-scrollbar-thumb {
    background-color: #a9a9a9;
    outline: 1px solid #708090
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background-color: #bb2026 !important;
    background-color: #bb2026 !important;
    filter: "alpha(opacity=75)";
    -ms-filter: "alpha(opacity=75)"
}

select.selectEmir option {
    color: #006a66 !important;
    opacity: 1;
    font-weight: 700
}

select.selectEmir {
    color: #006a66 !important
}

.elf {
    display: table;
    position: fixed;
    pointer-events: none
}

.share-details {
    display: table;
    position: absolute
}

.scale-up-br {
    -webkit-animation: scale-up-br 2s linear infinite both;
    animation: scale-up-br 2s linear infinite both
}

@-webkit-keyframes scale-up-br {
    0% {
        -webkit-transform: scale(.5);
        transform: scale(.5);
        -webkit-transform-origin: 100% 100%;
        transform-origin: 100% 100%
    }

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

@keyframes scale-up-br {
    0% {
        -webkit-transform: scale(.5);
        transform: scale(.5);
        -webkit-transform-origin: 100% 100%;
        transform-origin: 100% 100%
    }

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

.letterbox {
    display: table;
    position: absolute
}

.formBtn {
    position: absolute;
    left: 0;
    right: 0
}

.nextSubmit {
    display: block;
    width: 200px;
    height: 53px;
    background-color: transparent;
    border: none;
    outline: 0;
    cursor: pointer;
    background-image: url(../images/wyletter.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    margin: 0 auto;
    font-family: Paintline;
    color: #fff;
    font-weight: 600;
    font-size: 25px;
    text-indent: -9999px
}

.swirl-in-fwd {
    -webkit-animation: swirl-in-fwd .6s ease-out both;
    animation: swirl-in-fwd .6s ease-out both
}

@-webkit-keyframes swirl-in-fwd {
    0% {
        -webkit-transform: rotate(-540deg) scale(0);
        transform: rotate(-540deg) scale(0);
        opacity: 0
    }

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

@keyframes swirl-in-fwd {
    0% {
        -webkit-transform: rotate(-540deg) scale(0);
        transform: rotate(-540deg) scale(0);
        opacity: 0
    }

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

.secTwoTwo {
    width: 100%;
    height: 100%
}

.messageGroup {
    position: relative;
    z-index: 2;
    -webkit-transition: all .7s;
    -moz-transition: all .7s;
    transition: all .7s
}

.messageGroup-inner {
    position: absolute;
    width: 70%;
    height: 85%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.textarea-group {
    margin-bottom: 0;
    margin-top: 0
}

.textarea-group textarea {
    width: 100%;
    border: none;
    outline: 0;
    background-color: transparent;
    line-height: 4ch;
    background-position: top 88px center;
    font-family: Paintline;
    font-weight: 600;
    color: #006a66;
    font-size: 33px;
    height: 190px
}

.agsignature {
    border: none;
    background-color: transparent;
    height: 50px;
    outline: 0;
    font-family: Paintline;
    font-weight: 600;
    color: #006a66;
    font-size: 30px;
    float: right;
    border-bottom: 1px dashed #000
}

.formBtn1 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 5%
}

.mobileThemeSticker {
    padding: 4px;
    background-color: rgba(255, 255, 255, 1);
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 9999;
    -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)
}

.mobileThemeSticker ul {
    list-style: none;
    padding: 0;
    margin: 0
}

.mobileThemeSticker ul li {
    width: 28%;
    text-align: center;
    float: left;
    font-family: Paintline;
    color: #006a66;
    font-weight: 600;
    font-size: 25px;
    cursor: pointer
}

.mobileThemeSticker ul li a {
    color: #006a66
}

.themestickerWrapper ul {
    padding: 0;
    padding-top: 15px;
    list-style: none;
    display: table;
    margin-bottom: 0;
    height: 235px;
    width: 100%;
    overflow-y: scroll
}

.themestickerWrapper ul li {
    width: 33.33%;
    float: left;
    padding: 5px
}

.themestickerWrapper ul li a {
    display: block
}

.themestickerWrapper {
    position: fixed;
    padding: 10px;
    padding-bottom: 0;
    bottom: 0;
    left: 0;
    background-color: #fff;
    z-index: 3;
    border: 5px solid #79bea6;
    -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);
    background-color: #fff;
    z-index: 3;
    width: 100%;
    z-index: 999
}

.themestickerWrapper ul li img {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%
}

.closing.mobileonly {
    width: 30px;
    height: 30px;
    line-height: 25px;
    padding: 0 0 0 7px;
    font-size: 24px;
    color: #fff;
    background-color: #c41818;
    font-family: 'Helvetica Neue LT W01_95 Black', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    border-radius: 50%;
    box-sizing: border-box;
    z-index: 1000;
    text-align: center;
    padding: 0;
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    border: 2px solid #ffffff
}

.draggable-area {
    width: 75px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5
}

.draggable-area .close-sticker {
    display: table;
    position: relative;
    top: 0;
    right: 0;
    float: right;
    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;
    cursor: pointer;
    margin-bottom: 5px
}

.draggable-area:focus .close-sticker,
.draggable-area:hover .close-sticker {
    opacity: 1 !important
}

.themeWrapper {
    background-color: #e2e2e2;
    padding: 0;
    padding-left: 45px;
    padding-top: 8px;
    padding-bottom: 8px
}

.desktopThemeStickers-wrapper {
    position: absolute;
    top: 0;
    left: 75px
}

.owl-carousel .item img {
    max-width: 100px !important;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%
}

.owl-nav {
    position: absolute;
    right: 0;
    top: 50%;
    margin: 0 !important;
    padding-left: 5px;
    padding-right: 5px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%)
}

.owl-nav button {
    font-size: 30px !important;
    outline: 0
}

.themeWrapper span {
    display: inline-block;
    float: left;
    margin-right: 12px
}

.themeWrapper::before {
    content: "Templates";
    width: 90px;
    height: 90px;
    background: #bc2026;
    position: absolute;
    top: 0;
    left: -50px;
    border-radius: 50px;
    vertical-align: middle;
    line-height: 4.5;
    text-align: center;
    color: #fff;
    font-family: Paintline;
    font-size: 1.5em;
    font-weight: 600;
    letter-spacing: 2px
}

.carouselArrow {
    width: 100px;
    height: 100%;
    position: absolute;
    top: 0;
    right: -75px;
    background-color: #e2e2e2;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 15px
}

.carouselArrow a {
    margin: 2px
}

.giftB1 {
    position: absolute;
    bottom: 44%;
    right: 41%;
    width: 15%
}

.angry-animation {
    animation-name: angry-animation;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal
}

.thankYou {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: #252f3b;
    background-image: url(../images/MAIN-BG1.png);
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: bottom center;
    z-index: 2
}

.thankYouMsg {
    position: relative
}

.messageTxtwrt1 {
    display: block;
    margin: 1em 0;
    padding: 0 .55em
}

.exploreBtn {
    display: block;
    margin: 1em 0;
    position: relative;
    width: 100%
}

.exploreBtn .redBtn {
    position: relative;
      bottom: 7px;
}

.reciverName {
    font-size: 5rem;
    color: #026964;
    letter-spacing: 2px;
    font-weight: 700 !important;
    text-transform: capitalize
}

.reciverName h1 {
    font-size: 5rem;
    color: #026964;
    letter-spacing: 2px
}

.thnakuMsgText h1 {
    font-size: 5rem;
    font-weight: 600;
    margin: 0;
    letter-spacing: 2px
}

.thnakuMsgText h4 {
    font-size: 4rem;
    font-weight: 600;
    margin: 0;
    letter-spacing: 2px
}

.messageTxtwrt1 p {
    font-size: 2.5rem;
    font-weight: 600;
    margin: 0;
    line-height: 1em;
    letter-spacing: 2px
}

.capMsgltt {
    text-transform: uppercase;
    display: block
}

.borderBtt {
    border-bottom: 3px dotted #bc2026
}

.greenTxtmsg {
    color: #025a56
}

.redTxtmsg {
    color: #bc2026
}

.shareSocial {
    display: block;
    margin: 1em 0;
    margin-top: 0 !important
}

.exploreBtn .redBtn {
    position: relative;
    background-position: 0;
    margin-top: .22em;
    display: inline-block;
    font-size: 2.5em;
    font-weight: 600;
    background-size: 100%
}

.shareBtns {
    color: #bc2026
}

.shareSocial {
    font-size: 2.2em
}

.shareSocial a {
    color: #025a56;
    text-decoration: none
}

.shareSocial a:hover {
    color: #bc2026
}

.thnakuMsgText {
    position: absolute;
    top: 44%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    font-family: Paintline;
    font-weight: 600
}

.shareSocial {
    font-size: 4rem
}

.ty {
    position: absolute;
    bottom: -50px
}

.ty1 {
    left: 0;
    pointer-events: none
}

.ty2 {
    right: 0;
    pointer-events: none
}

.swirl-out-bck {
    -webkit-animation: swirl-out-bck .6s ease-in both;
    animation: swirl-out-bck .6s ease-in both
}

@-webkit-keyframes swirl-out-bck {
    0% {
        -webkit-transform: rotate(0) scale(1);
        transform: rotate(0) scale(1);
        opacity: 1
    }

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

@keyframes swirl-out-bck {
    0% {
        -webkit-transform: rotate(0) scale(1);
        transform: rotate(0) scale(1);
        opacity: 1
    }

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

.scrollable {
    height: 250px;
    overflow: scroll
}

.ag-header {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    background-color: #fff;
    padding: 15px
}

.hohoho {
    position: absolute;
    width: 50%;
    text-align: center;
    z-index: 2
}

.seltOtpWrap {
    position: absolute;
    width: 450px;
    top: 0;
    overflow: hidden
}

.owl-carousel .owl-item img {
    width: 100px !important
}

.owl-carousel {
    background-color: #e2e2e2
}

.desktopcarousels {
    position: absolute;
    width: 500px;
    top: 25%;
    right: 5%;
    z-index: 222;
    padding-left: 50px;
    z-index: 99999
}

.boxAfBf {
    position: relative;
    padding-left: 3.5em;
    padding-right: 3em;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    margin: 2em 0
}

.boxAfBf::after {
    content: "Templates";
    width: 100px;
    height: 100px;
    background: #bc2026;
    position: absolute;
    top: 0;
    left: -50px;
    border-radius: 50px;
    vertical-align: middle;
    line-height: 4.5;
    text-align: center;
    color: #fff;
    font-family: Paintline;
    font-size: 1.5em;
    font-weight: 600;
    letter-spacing: 2px
}

.boxAfBf1::after {
    content: "Christmas Stamps & Stickers";
    background: #006a66;
    line-height: 1;
    padding-top: 18px
}

.formloader {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 1);
    background-image: url(../images/loader-new.gif);
    background-repeat: no-repeat;
    background-position: center center
}

.microsoft {
    background-color: #252f3b !important
}

.macbook {
    background-color: #2c3545 !important
}

.headingLogo {
    position: relative;
    top: 0
}

span.textlabel {
    display: block;
    width: 100%;
    content: 'Dear Santa,';
    font-family: Paintline;
    font-weight: 600;
    color: #006a66;
    font-size: 33px
}

.countryCode {
    width: 20%;
    float: left
}

.mobileNo {
    width: 80%;
    float: left
}

.form-group {
    position: relative;
    display: table;
    clear: both;
    width: 100%
}

.tooltips {
    position: absolute;
    right: 5px;
    width: 20px;
    top: 10px
}

.textarea-group {
    overflow: hidden
}

.mobileHomeDrop {
    position: relative;
    z-index: 999
}

.letter-printable-area {
    background-repeat: no-repeat !important;
    background-size: contain !important
}

.arrow {
    font-family: Paintline;
    color: #fff
}

.stickerBox {
    width: 42%;
    margin: 10px auto 0
}

.carousel-control.left,
.carousel-control.right {
    background-image: none !important
}

.carousel-control.left span {
    left: 0
}

.carousel-control.right span {
    right: 0
}

.carousel-control.left span:hover {
    -webkit-animation: swingRoller .4s ease-in infinite both;
    animation: swingRoller .4s ease-in 2 both
}

.carousel-control.right span:hover {
    -webkit-animation: swingRoller .4s ease-in infinite both;
    animation: swingRoller .4s ease-in 2 both
}

.carousel-fade .carousel-inner .item {
    opacity: 0;
    transition-property: opacity
}

.carousel-fade .carousel-inner .active {
    opacity: 1
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    opacity: 0;
    z-index: 1
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1
}

.carousel-fade .carousel-control {
    z-index: 2
}

@media all and (transform-3d),
(-webkit-transform-3d) {

    .carousel-fade .carousel-inner > .item.active.right,
    .carousel-fade .carousel-inner > .item.next {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    .carousel-fade .carousel-inner > .item.active.left,
    .carousel-fade .carousel-inner > .item.prev {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

    .carousel-fade .carousel-inner > .item.active,
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
}

.carousel-control span {
    position: fixed;
    top: 50%
}

.stickers {
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px
}

.homeAnimation {
    width: 100%;
    height: 100%
}

.groundColor {
    width: 100%;
    height: 30%;
    background-image: url(../images/ground-bottom.png);
    background-size: 100% 100%;
    background-position: bottom center;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10
}

.building-and-rocks {
    width: 100%;
    height: 50%;
    background-image: url(../images/building-and-rocks.png);
    background-size: 100% 100%;
    background-position: bottom center;
    background-repeat: no-repeat;
    position: absolute;
    bottom: -1.5%;
    left: 0;
    z-index: 9
}

.christmasTree {
    width: 15%;
    position: absolute;
    bottom: 65%;
    left: 10%;
    z-index: 10
}

.only-sledge {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 107%;
    z-index: 11;
    pointer-events: none
}

.only-sledge-img {
    position: absolute;
    top: 0;
    width: 100%
}

@-webkit-keyframes myfirst {
    0% {
        left: -50%
    }

    100% {
        left: 100%
    }
}

@keyframes myfirst {
    0% {
        left: -50%
    }

    100% {
        left: 100%
    }
}

.helicopterFlag {
    width: 90%;
    margin: 0 auto
}

.babyshop {
    position: absolute;
    bottom: 90%;
    right: 25%
}

.baby2 {
    position: absolute;
    bottom: 28%;
    left: 3%;
    width: 13%
}

.baby5 {
    position: absolute;
    bottom: 28%;
    right: 25%;
    width: 13%
}

.baby6 {
    position: absolute;
    bottom: 28%;
    right: 11%;
    width: 11%
}

.postBox svg.postboxSvg {
    width: 70%
}

.postBox {
    height: 400px;
    position: absolute;
    bottom: 50%;
    left: 53%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    transform: translateX(-50%)
}

.small-letter {
    display: table;
    width: 12%;
    position: absolute;
    z-index: 10;
    bottom: 46%;
    left: 12%;
    overflow: visible;
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    transition: all 2s
}

.dmDrag {
    left: 45%;
    top: 45%
}

@-webkit-keyframes animationFrames {
    0% {
        opacity: 1;
        -webkit-transform: translate(0, 0) rotate(0) skewX(0)
    }

    22% {
        opacity: 1;
        -webkit-transform: translate(-202px, -150px) rotate(-26deg) skewX(19deg)
    }

    59% {
        opacity: 1;
        -webkit-transform: translate(-202px, -350px) rotate(-26deg) skewX(19deg)
    }

    78% {
        opacity: 0;
        -webkit-transform: translate(-202px, -150px) rotate(-26deg) skewX(19deg)
    }

    100% {
        opacity: 0;
        -webkit-transform: translate(-202px, -150px) rotate(-26deg) skewX(19deg)
    }
}

@keyframes anim-glow {
    0% {
        box-shadow: 0 0 rgba(#61ef61, 1)
    }

    100% {
        box-shadow: 0 0 10px 8px transparent;
        border-width: 2px
    }
}

.svgPath {
    overflow: visible !important
}

.only-sledge-img {
    width: 100%
}

.nxtstep2 {
    display: block
}

.draggable-area img {
    width: 80%
}

.angry-animation-new {
    -webkit-transform: scale(.2) translateX(185vh) translateY(205%) rotate(360deg) scaleY(0) scaleX(.2);
    -webkit-transform: scale(.2) translateX(185vh) translateY(205%) rotate(360deg) scaleY(0) scaleX(.2);
    transform: scale(.2) translateX(185vh) translateY(205%) rotate(360deg) scaleY(0) scaleX(.2)
}

.only-sledge-wrapper {
    display: table;
    position: relative;
    left: -50%;
    transition: ease-in 10s
}

.letterFlow {
    -webkit-transform: scale(.3) translateX(20vh) translateY(-800%) rotate(360deg) scaleY(.2) scaleX(.5);
    -moz-transform: scale(.3) translateX(20vh) translateY(-800%) rotate(360deg) scaleY(.2) scaleX(.5);
    transform: scale(.3) translateX(20vh) translateY(-800%) rotate(360deg) scaleY(.2) scaleX(.5)
}

.postBox::before {
    content: "";
    display: block;
    position: absolute;
    background: url(../images/1.png);
    background-repeat: no-repeat;
    width: 30em;
    background-size: contain;
    height: auto;
    right: 20em;
    padding: 40px 0
}

.postBox::after {
    content: "";
    display: block;
    position: absolute;
    background: url(../images/2.png);
    background-repeat: no-repeat;
    width: 30em;
    background-size: contain;
    height: auto;
    left: 16em;
    padding: 40px 0
}

.infoIcon {
    position: absolute;
    bottom: 5em;
    left: 61%;
    z-index: 999;
    font-size: 1.5em;
    font-weight: 600
}

.infoIcon a {
    color: #bc2127;
    text-decoration: none
}

.infoIcon a:hover {
    color: #016b66;
    text-decoration: none
}

.infoIcon .popover {
    width: 26rem;
    font-family: Paintline;
    font-weight: 600;
    letter-spacing: 1px
}

.infoIcon .popover .popover-title {
    font-size: 2em;
    font-weight: 600;
    color: #bc2127
}

.infoIcon .popover .popover-content {
    font-size: 1.4em;
    font-weight: 600;
    color: #016b66
}

.homeBtn {
    cursor: pointer;
          bottom: 35px;
}

.santa-awaits {
    display: table;
    position: absolute;
    left: -45%;
    top: 35%;
    width: 120px
}

.info {
    position: absolute;
    bottom: 15px;
    font-size: 35px;
    left: 50%;
    display: table;
    margin: 0 auto
}

.info a {
    color: #c41818 !important
}

.top-plane-new {
    right: -100%;
    width: 100%;
    top: -32px;
    position: absolute;
    -webkitt-transition: all 8s;
    -moz-transition: all 8s;
    transition: all 8s
}

.top-plane-new img {
    max-width: 200px
}

.top-plane-new::after {
    content: "";
    display: block;
    position: absolute;
    background: url(../images/message-flag.png);
    background-repeat: no-repeat;
    width: 62%;
    background-size: contain;
    height: 100%;
    left: 5.6%;
    top: 45%;
    padding: 40px 0;
    z-index: 1
}
/*

.btn-default {
    color: #fff !important;
    background-color: red !important;
    border-color: red !important
}
*/

.modal-header {
    border-bottom: 1px solid red
}

.modal-footer {
    border-top: 1px solid red
}

.overlayMulti {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .7);
    z-index: 999999
}

.multiPopup {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.multiPoup-close {
    float: right
}

.multiPoup-close .fa-close {
    color: #bc2026;
    font-size: 2em
}

.formcontent1 .form-group {
    width: 95%
}

.simplebar-track.simplebar-vertical {
    cursor: pointer
}

.simplebar-scrollbar:before {
    background: #bc2026 !important;
    cursor: pointer
}

.simplebar-scrollbar.simplebar-visible:before {
    opacity: .9 !important
}

.simplebar-track.simplebar-vertical::before {
    content: "\f0d8";
    position: absolute;
    top: -5px;
    right: 0;
    font-size: 1.88rem;
    font-family: FontAwesome;
    color: #bc2026;
    font-weight: 600
}

.simplebar-track.simplebar-vertical::after {
    content: "\f0d7";
    position: absolute;
    bottom: -5px;
    right: 0;
    font-size: 1.88rem;
    font-family: FontAwesome;
    color: #bc2026;
    font-weight: 600
}

.simplebar-track.simplebar-vertical {
    background: rgba(12, 131, 126, 0.48);
}


.main-footer {
/*    position: relative !important;*/
    z-index: 999 !important;
}

#main-part {
    position: relative;
    
    width: 100%;
    height: 100vh;
}

.carousel {
    background: transparent !important;
}

.header {
    z-index: 9999 !important;
}


@media(max-width:767px){
    #main-part {
        top: 0px;
    }
  
  .audioBox { display: none !important; }
}

@media(min-width:992px){
    #main-part {
        top: 0px;
    }
}

.formcontent1 .form-group {
/*    background-color: #FFFFFF;*/
}

.jcf-select-text {
/*
    font-size: 32px !important;
    font-weight: 700 !important;
    font-family: Paintline !important;
*/
}


.thankYouMsg .ty {  bottom: -15px; }

.top-bar {
    background: #ffffff !important;
}

.mobileThemeSticker .selectTheme,.mobileThemeSticker .addSticker { 
    background: #c41818;
    color: #fff;
    padding: 0.22em 0.44em 0.11em 0.44em;
    font-size: 0.88em; 
}

.mobileThemeSticker .continue { background: #c41818; color: #fff; padding: 0.22em 7px 0 7px;  }


.audioBox { position: absolute; bottom: 30px; right: 30px; z-index: 999;  cursor: pointer; }
.audioBox .fa-play:before, .audioBox .fa-pause:before { content: none; }
.audioBox .fa-play {
    background: url(../images/audio_control.png) no-repeat 0px 0px;
    width: 45px;
    height: 45px;
    display: block;
   cursor: pointer;
}
.audioBox .fa-pause {
    background: url(../images/audio_control.png) no-repeat -55px 0px;
    width: 45px;
    height: 45px;
    display: block;
   cursor: pointer;
}