@media(max-width:767px) {
    .agloader {
        background-size: 150%
    }
    #video {
        display: none
    }
    .top-plane {
        display: none
    }
    .mobileHomeDrop {
        margin-top: -30px
    }
    .FormSkin {
        width: 95%
    }
    .sectionTwo {
        background-image: url(../images/mobile-bg.png);
        background-attachment: fixed;
        background-size: cover
    }
    .sectionTwo h2 {
        top: 13%;
        font-size: 6vw
    }
    .sectionTwo .ticker-parachute {
        top: 8%!important
    }
    .elf {
        width: 250px;
        bottom: 0;
        left: -20%
    }
    .messageGroup-inner {
        top: -30px;
        left: 8%;
        transform: scale(.7);
        transform: scale(.7);
        transform: scale(.7);
        width: 84%;
        height: 110%
    }
    .thankYou {
        background-image: url(../images/mobile-bg.png);
        background-size: cover
    }
    .thankYouMsg {
        width: 90%
    }
    .ty {
        width: 120px
    }
    .messageGroup {
        zoom: .9
    }
    .secTwoTwo .FormSkinOuter {
        margin-top: -40px
    }
    .formBtn1 {
        bottom: 65px
    }
    .hohoho {
        left: 10%;
        top: 35%
    }
    .twoho {
        margin-top: 25px
    }
    .videoWrapper {
        height: 100vh;
        background-color: #242c3b!important
    }
    body {
        background-color: #242c3b!important
    }
    .formBtn {
        position: relative;
        bottom: 25px
    }
    .form-control {
        height: 45px
    }
    .the_image_wrapper {
        position: absolute;
        bottom: -110px;
        left: 0
    }
    .ticker-parachute {
        width: 60px;
        top: 25%;
        z-index: 999
    }
    .ticker-parachute span {
        font-size: 30px;
        top: 0
    }
    .textarea-group {
        margin-bottom: 10px;
        margin-top: 0
    }
    .headingLogo {
        position: relative;
        top: -30px
    }
    .countryCode {
        width: 35%
    }
    .mobileNo {
        width: 65%
    }
    .formFields {
        width: 90%
    }
    .form-inner {
        margin: 0!important;
        left: -15px!important;
        -webkit-transform: translateY(-50%) scale(.7)!important;
        -moz-transform: translateY(-50%) scale(.7)!important;
        transform: translateY(-50%) scale(.7)!important;
        top: 35%
    }
    .go-cart-wrapper {
        position: absolute;
        bottom: 65px;
        width: 60%;
        left: 10%;
        z-index: 10
    }
    .only-sledge {
        display: none
    }
    .building-and-rocks {
        background: 0 0
    }
    .groundColor {
        background: #d9f2f1
    }
    .postBox {
        height: 380px;
        position: absolute;
        bottom: 60%;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        transform: translateX(-50%)
    }
    .postBox svg.postboxSvg {
        width: 90%
    }
    .carousel-control.left,
    .carousel-control.right {
        opacity: 0
    }
    .FormSkinOuter-letter .inner-container {
        height: 100%
    }
    .letter {
        height: auto
    }
    .thnakuMsgText {
        background: #ffedbf;
        border: inset 10px #bc2026
    }
    .exploreBtn .redBtn {
        position: relative;
        background-position: 0;
        display: inline-block;
        font-size: 2.5em;
        font-weight: 600;
        background-size: 100%
    }
    .postBox::before {
        content: none
    }
    .postBox::after {
        content: none
    }
    .videoMobile {
        background: url(../images/mobile-home-screen-8-12.png);
        background-repeat: no-repeat;
        background-size: contain;
        width: 100%;
        height: 100vh;
        background-position: 0 -40px
    }
    .videoMobile .the_image_wrapper img {
        opacity: 0
    }
    .wrtnxtbtn {
        bottom: 25px
    }
    .reciverName {
        font-size: 3.5rem
    }
    .thnakuMsgText h1 {
        font-size: 4.5rem
    }
    .shareSocial {
        font-size: 3.5rem
    }
    .infoIcon {
        left: .88em
    }
    .infoIcon .popover {
        width: 26rem
    }
    .thnakuMsgText {
        position: relative;
        left: 0;
        right: 0;
        transform: translate(0, 0);
        top: 35px
    }
    .letter-input-area {
        margin-top: 100px
    }
    .secTwoTwo {
        background-color: #fff
    }
    html body {
        overflow: auto!important
    }
    .secTwoOne .nextSubmit {
        position: relative
    }
    .formcontent1 {
        height: 250px
    }
    .multiPopup img {
        max-width: 90%
    }
    .dmDrag {
        top: 30%
    }
    .audioBox {
        z-index: 99;
    }
    .mobileThemeSticker .continue {
        color: #fff !important;
    }
}

@media only screen and (max-width:991px) and (min-width:768px) {
    .agloader {
        background-size: 150%
    }
    #video {
        display: none
    }
    .top-plane {
        display: none
    }
    .mobileHomeDrop {
        margin-top: -90px
    }
    .FormSkin {
        width: 95%
    }
    .sectionTwo {
        background-image: url(../images/mobile-bg.png);
        background-attachment: fixed;
        background-size: cover
    }
    .sectionTwo h2 {
        top: 10%;
        font-size: 6vw
    }
    .sectionTwo .ticker-parachute {
        top: 8%!important
    }
    .elf {
        width: 250px;
        bottom: 0;
        left: -20%
    }
    .messageGroup-inner {
        top: -30px;
        left: 8%;
        transform: scale(.7);
        transform: scale(.7);
        transform: scale(.7);
        width: 84%;
        height: 110%
    }
    .thankYou {
        background-image: url(../images/mobile-bg.png);
        background-size: cover
    }
    .thankYouMsg {
        width: 90%
    }
    .ty {
        width: 120px
    }
    .messageGroup {
        zoom: .9
    }
    .secTwoTwo .FormSkinOuter {
        margin-top: -40px
    }
    .formBtn1 {
        bottom: 65px
    }
    .hohoho {
        left: 10%;
        top: 35%
    }
    .twoho {
        margin-top: 25px
    }
    .videoWrapper {
        height: 100vh;
        background-color: #242c3b!important
    }
    body {
        background-color: #242c3b!important
    }
    .formBtn {
        position: relative;
        bottom: 25px
    }
    .form-control {
        height: 45px
    }
    .the_image_wrapper {
        position: absolute;
        bottom: -25%;
        left: 0
    }
    .ticker-parachute {
        width: 60px;
        top: 25%;
        z-index: 999
    }
    .ticker-parachute span {
        font-size: 30px;
        top: 0
    }
    .textarea-group {
        margin-bottom: 10px;
        margin-top: 0
    }
    .headingLogo {
        position: relative;
        top: -30px
    }
    .countryCode {
        width: 35%
    }
    .mobileNo {
        width: 65%
    }
    .formFields {
        width: 90%
    }
    .form-inner {
        margin: 0!important;
        left: -15px!important;
        -webkit-transform: translateY(-50%) scale(.7)!important;
        -moz-transform: translateY(-50%) scale(.7)!important;
        transform: translateY(-50%) scale(.7)!important
    }
    .go-cart-wrapper {
        position: absolute;
        bottom: 0
    }
    .postBox::before {
        display: none
    }
    .postBox::after {
        display: none
    }
    .formcontent1 {
        height: 520px
    }
    .continue {
        color: #fff;
        background-image: url(../images/button_step1_m.png);
        background-repeat: no-repeat;
        background-size: 90% 145%;
        background-position: center;
        text-transform: uppercase;
        font-size: 2.7vh;
        display: block;
        width: 100%;
        margin-top: 5px
    }
    .mobileThemeSticker ul li {
        font-size: 45px
    }
    .desktoponly.continue {
        background-image: none!important
    }
    .letter-printable-area {
        background-color: #fff
    }
}

@media(min-width:992px) {
    .mobileHomeDrop {
        display: none!important
    }
    #video1 {
        display: none
    }
    .mobileThemeSticker-wrapper {
        display: none!important
    }
    .sectionTwo h2 {
        top: 8%
    }
    .form-control {
        height: 40px;
        margin-bottom: 20px
    }
    .elf {
        left: 0;
        bottom: 0;
        width: 25%
    }
    .ticker-parachute {
        width: 76px
    }
    .ticker-parachute span {
        font-size: 26px
    }
    .share-details {
        bottom: 30%;
        left: 0;
        width: 100px
    }
    .letterbox {
        width: 120px;
        bottom: 0;
        right: 10%
    }
    .formBtn {
        bottom: 10%
    }
    @keyframes angry-animation {
        0% {
            transform: translate(0, 0) rotate(0) scale(1)
        }
        50% {
            transform: translate(200px, 200px) rotate(180deg) scale(.5)
        }
        100% {
            transform: translate(200px, 200px) rotate(360deg) scale(0)
        }
    }
    .thankYouMsg {
        -webkit-transform: scale(.8);
        -moz-transform: scale(.8);
        transform: scale(.8);
        top: 35px
    }
    .oneho {
        top: 32%;
        z-index: 2;
        left: 3%;
        width: 40%
    }
    .twoho {
        top: 32%;
        right: 3%;
        z-index: 2;
        width: 40%
    }
    .desktopcarousels {
        -webkit-transform: scale(.9) translateY(-50%);
        -moz-transform: scale(.9) translateY(-50%);
        transform: scale(.9) translateY(-50%)
    }
    .desktopcarousels {
        right: 2%;
        zoom: .6
    }
    video {
        -webkit-transform: scale(1.5);
        -moz-transform: scale(1.5);
        transform: scale(1.5)
    }
    .videoWrapper video {
        bottom: 70px
    }
    .FormSkin {
        width: 65%
    }
    .customese-letter {
        left: 10%
    }
    .customese-letter-elf {
        left: 10%;
        z-index: 2
    }
    .sectionTwo {
        background-size: 175%
    }
    .form-group {
        margin-bottom: 12px
    }
    .building-and-rocks {
        background-image: url(../images/ipad-buildings.png);
        background-size: cover;
        bottom: -3%
    }
    .bigFigure {
        display: none
    }
    .ag-letterBox {
        display: block
    }
    .letter-write textarea {
        background-image: none!important
    }
    .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: 8.6%;
        top: 69%;
        padding: 40px 0;
        z-index: 1
    }
    .postBox::before {
        top: 15%
    }
    .postBox::after {
        top: 15%
    }
    .ag-themes {
        left: 0;
        opacity: 1
    }
}

@media(min-width:1200px) {
    .sectionTwo h2 {
        top: 6%
    }
    .form-control {
        height: 40px;
        margin-bottom: 0
    }
    .elf {
        left: 17%;
        bottom: 0;
        width: 25%
    }
    .ticker-parachute {
        width: 76px
    }
    .ticker-parachute span {
        font-size: 26px;
      font-weight: 600;
    }
    .share-details {
        bottom: 50%;
        left: 19%;
        width: 100px
    }
    .letterbox {
        width: 110px;
        bottom: 0;
        right: 28%
    }
    .formBtn {
        bottom: 10%
    }
    .messageGroup {
        width: 25%
    }
    @keyframes angry-animation {
        0% {
            transform: translate(0, 0) rotate(0) scale(1)
        }
        50% {
            transform: translate(200px, 200px) rotate(180deg) scale(.5)
        }
        100% {
            transform: translate(200px, 200px) rotate(360deg) scale(0)
        }
    }
    .thankYouMsg {
        -webkit-transform: scale(.7);
        -moz-transform: scale(.7);
        transform: scale(.7)
    }
    .oneho {
        top: 35%;
        z-index: 2;
        left: 0;
        width: 50%
    }
    .twoho {
        top: 35%;
        right: 0;
        z-index: 2;
        width: 50%
    }
    .desktopcarousels {
        -webkit-transform: scale(.9) translateY(-50%);
        -moz-transform: scale(.9) translateY(-50%);
        transform: scale(.9) translateY(-50%)
    }
    .desktopcarousels {
        right: 2%
    }
    video {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        transform: scale(1)
    }
    .videoWrapper video {
        bottom: 0
    }
    .FormSkin {
        width: 37%
    }
    .desktopcarousels {
        zoom: .8
    }
    .sectionTwo {
        background-size: 150%
    }
    .customeAnime {
        -webkit-transform: translate(235px, 22%) rotate(-40deg) scale(.1);
        -moz-transform: translate(235px, 22%) rotate(-40deg) scale(.1);
        transform: translate(235px, 22%) rotate(-40deg) scale(.1)
    }
    .ticker-parachute {
        right: 25px;
        top: 35%;
        width: 75px;
    }
    .textarea-group {
        height: 120px
    }
    .building-and-rocks {
        background-image: url(../images/building-and-rocks.png);
        background-size: 100% 100%;
        bottom: -1.5%
    }
    .letterFlow {
        -webkit-transform: scale(.2) translateX(5vh) translateY(-1100%) rotate(360deg) scaleY(0) scaleX(.01);
        -moz-transform: scale(.2) translateX(5vh) translateY(-1100%) rotate(360deg) scaleY(0) scaleX(.01);
        transform: scale(.2) translateX(5vh) translateY(-1100%) rotate(360deg) scaleY(0) scaleX(.01)
    }
    .bigFigure {
        display: block
    }
    .ag-letterBox {
        display: block
    }
    .formcontent1 {
        height: 250px
    }
    .postBox::before {
        top: 15%
    }
    .postBox::after {
        top: 15%
    }
    .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: 7.6%;
        top: 59%;
        padding: 40px 0;
        z-index: 1
    }
    .only-sledge-wrapper {
        margin-top: -57px
    }
  
   .giftB1 { bottom: 8%; }
  
}

@media(min-width:1366px) {
  .sectionTwo h2 {
        top: 14%
    }
  
    .FormSkin {
      top: 10%;
    }
}

@media(min-width:1400px) {
    .sectionTwo h2 {
        top: 13%
    }
    .form-control {
        height: 40px
    }
    .elf {
        left: 12%;
        bottom: 0;
        width: 32%
    }
    .ticker-parachute {
        width: 75px;
        right: 4%;
        top: 33%
    }
    .ticker-parachute span {
        font-size: 32px
    }
    .share-details {
        bottom: 50%;
        left: 13%;
        width: 150px
    }
    .letterbox {
        bottom: 0;
        right: 24%;
        width: 150px
    }
    .formBtn {
        bottom: 15%
    }
    .messageGroup {
        width: 30%
    }
    @keyframes angry-animation {
        0% {
            transform: translate(0, 0) rotate(0) scale(1)
        }
        50% {
            transform: translate(150px, 150px) rotate(180deg) scale(.5)
        }
        100% {
            transform: translate(250px, 250px) rotate(360deg) scale(0)
        }
    }
    .sectionTwo {
        background-size: 150%
    }
    .customeAnime {
        -webkit-transform: translate(235px, 22%) rotate(-40deg) scale(.1);
        -moz-transform: translate(235px, 22%) rotate(-40deg) scale(.1);
        transform: translate(235px, 22%) rotate(-40deg) scale(.1)
    }
    .textarea-group {
        height: 160px
    }
    .postBox svg.postboxSvg {
        width: 70%
    }
    .postBox {
        height: 400px
    }
    .letterFlow {
        -webkit-transform: scale(.2) translateX(5vh) translateY(-1000%) rotate(360deg) scaleY(0) scaleX(.05);
        -moz-transform: scale(.2) translateX(5vh) translateY(-1000%) rotate(360deg) scaleY(0) scaleX(.05);
        transform: scale(.2) translateX(5vh) translateY(-1000%) rotate(360deg) scaleY(0) scaleX(.05)
    }
    .postBox::before {
        top: 5%
    }
    .postBox::after {
        top: 5%
    }
    .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: 7.6%;
        top: 57%;
        padding: 40px 0;
        z-index: 1
    }
    .top-plane-new {
        top: 10%
    }
    .only-sledge-wrapper {
        margin-top: 0
    }
  
  .giftB1 { bottom: 8%; }
  
  .FormSkin {
      top: 0%;
    }
  
}

@media(min-width:1600px) {
    .sectionTwo h2 {
        top: 15%
    }
    .form-control {
        height: 50px
    }
    .elf {
        left: 12%;
        bottom: 0;
        width: 32%
    }
    .ticker-parachute {
        width: 150px
    }
    .ticker-parachute span {
        font-size: 55px
    }
    .share-details {
        bottom: 50%;
        left: 15%;
        width: 150px
    }
    .letterbox {
        bottom: 0;
        right: 26%;
        width: 200px
    }
    .formBtn {
        bottom: 18%
    }
    @keyframes angry-animation {
        0% {
            transform: translate(0, 0) rotate(0) scale(1)
        }
        50% {
            transform: translate(0, 0) rotate(180deg) scale(.5)
        }
        100% {
            transform: translate(0, 0) rotate(360deg) scale(0)
        }
    }
    .thankYouMsg {
        -webkit-transform: scale(1.0);
        -moz-transform: scale(1.0);
        transform: scale(1.0)
    }
    .oneho {
        top: 45%;
        z-index: 2;
        left: 0
    }
    .twoho {
        top: 45%;
        right: 0;
        z-index: 2
    }
    .postBox svg.postboxSvg {
        width: 80%
    }
    .postBox {
        height: 425px;
        left: 52%
    }
    .letterFlow {
        -webkit-transform: scale(.3) translateX(5vh) translateY(-1000%) rotate(360deg) scaleY(0) scaleX(.05);
        -moz-transform: scale(.3) translateX(5vh) translateY(-1000%) rotate(360deg) scaleY(0) scaleX(.05);
        transform: scale(.3) translateX(5vh) translateY(-1000%) rotate(360deg) scaleY(0) scaleX(.05)
    }
  
  .giftB1 { bottom: 8%; }
  .thankYouMsg .ty {  bottom: -15px; }
  
}

@media(min-width:1900px) {
    .sectionTwo h2 {
        top: 10%
    }
    .elf {
        left: 17%;
        bottom: 0;
        width: 25%
    }
    .share-details {
        bottom: 50%;
        left: 18%;
        width: 150px
    }
    .letterbox {
        bottom: 0;
        right: 27%;
        width: 160px
    }
    .nextSubmit {
        transform: scale(1)
    }
    .formBtn {
        bottom: 10%
    }
    @keyframes angry-animation {
        0% {
            transform: translate(0, 0) rotate(0) scale(1)
        }
        50% {
            transform: translate(150px, 150px) rotate(180deg) scale(.5)
        }
        100% {
            transform: translate(300px, 300px) rotate(360deg) scale(0)
        }
    }
    .thankYouMsg {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        transform: scale(1)
    }
    .desktopcarousels {
        -webkit-transform: scale(1) translateY(-50%);
        -moz-transform: scale(1) translateY(-50%);
        transform: scale(1) translateY(-50%)
    }
    .desktopcarousels {
        zoom: 1
    }
    .customeAnime {
        -webkit-transform: translate(330px, 30%) rotate(-40deg) scale(.2);
        -moz-transform: translate(330px, 30%) rotate(-40deg) scale(.2);
        transform: translate(330px, 30%) rotate(-40deg) scale(.2)
    }
    .postBox svg.postboxSvg {
        width: 100%
    }
    .postBox {
        height: 500px;
        left: 49.5%
    }
    .only-sledge-img {
        width: 100%
    }
    .letterFlow {
        -webkit-transform: scale(.3) translateX(20vh) translateY(-1600%) rotate(360deg) scaleY(0) scaleX(.09);
        -moz-transform: scale(.3) translateX(20vh) translateY(-1600%) rotate(360deg) scaleY(0) scaleX(.09);
        transform: scale(.3) translateX(20vh) translateY(-1600%) rotate(360deg) scaleY(0) scaleX(.09)
    }
    .postBox::before {
        right: 20em
    }
    .postBox::after {
        left: 22em
    }
    .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: 44%;
        padding: 40px 0;
        z-index: 1
    }
    .top-plane-new {
        top: 5%
    }
    .info {
        bottom: 15px;
    }
    .homeBtn {
        bottom: 35px;
    }
  
  .giftB1 { bottom: 4%;}
  
  
}

@media(min-width:2500px) {
    .sectionTwo h2 {
        top: 15%
    }
    .form-control {
        height: 60px;
        font-size: 50px
    }
    .elf {
        left: 14%;
        bottom: 0;
        width: 29%
    }
    .ticker-parachute {
        width: 200px
    }
    .ticker-parachute span {
        font-size: 75px
    }
    .share-details {
        bottom: 52%;
        left: 17%;
        width: 200px
    }
    .letterbox {
        bottom: 0;
        right: 27%;
        width: 210px
    }
    .nextSubmit {
        transform: scale(1.5)
    }
    .formBtn {
        bottom: 15%
    }
    .messageGroup {
        width: 25%
    }
    @keyframes angry-animation {
        0% {
            transform: translate(0, 0) rotate(0) scale(1)
        }
        50% {
            transform: translate(400px, 400px) rotate(180deg) scale(.5)
        }
        100% {
            transform: translate(400px, 400px) rotate(360deg) scale(0)
        }
    }
    .thankYouMsg {
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        transform: scale(1.2)
    }
    .desktopcarousels {
        -webkit-transform: scale(1.5) translateY(-50%);
        -moz-transform: scale(1.5) translateY(-50%);
        transform: scale(1.5) translateY(-50%)
    }
    .desktopcarousels {
        right: 7%
    }
    .oneho {
        top: 40%;
        z-index: 2;
        left: 0;
        width: 50%;
        zoom: 1.5
    }
    .twoho {
        top: 40%;
        right: 0;
        z-index: 2;
        zoom: 1.5
    }
    .top-plane {
        -webkit-transform: scale(1.9);
        -moz-transform: scale(1.9);
        transform: scale(1.9)
    }
    .desktopcarousels {
        zoom: 1.3
    }
    .customeAnime {
        -webkit-transform: translate(280px, 35%) rotate(-40deg) scale(.1);
        -moz-transform: translate(280px, 35%) rotate(-40deg) scale(.1);
        transform: translate(280px, 35%) rotate(-40deg) scale(.1)
    }
    .sectionTwo h2 {
        font-size: 3vw;
        top: 12%
    }
    .textarea-group {
        height: 260px
    }
    .postBox svg.postboxSvg {
        width: 100%
    }
    .postBox {
        height: 500px;
        left: 50%
    }
    .only-sledge-img {
        width: 100%
    }
    .letterFlow {
        -webkit-transform: scale(.3) translateX(20vh) translateY(-1600%) rotate(360deg) scaleY(0) scaleX(.09);
        -moz-transform: scale(.3) translateX(20vh) translateY(-1600%) rotate(360deg) scaleY(0) scaleX(.09);
        transform: scale(.3) translateX(20vh) translateY(-1600%) rotate(360deg) scaleY(0) scaleX(.09)
    }
    .building-and-rocks {
        bottom: -6.5%
    }
    .groundColor {
        bottom: -52px
    }
    .formcontent1 {
        height: 395px
    }
    .only-sledge-wrapper {
        margin-top: 65px
    }
    .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: 3.6%;
        top: 33%;
        padding: 40px 0;
        z-index: 1
    }
    .giftB1 {
        bottom: 35%;
        right: 39%;
        width: 15%
    }
    .info {
        bottom: 15px;
    }
    .redBtn {
        bottom: 20px
    }
}