html,
body {
    width: 100%;
    height: 100%;
    color: #303030;
    font-family: 'Times New Roman', Times, serif;
    text-align: center;
}

body {
    font-size: 1.5rem;
    line-height: 1.375;
}

h1 {
    position: relative;
    margin-top: 0px;
    margin-bottom: 45px;
    font-size: 3rem;
    padding-top: 4.0625rem;
    text-transform: uppercase;
}

h1:before {
    content: '';
    position: absolute;
    top: 0px;
    left: -moz-calc(50% - 55px);
    left: calc(50% - 55px);
    width: 110px;
    height: 3px;
    background: #303030;
}

p {
    margin: 0;
}

p+p,
h1+p {
    margin-top: 45px;
}

p a {
    color: #5299ff;
    cursor: pointer;
    text-decoration: underline;
}

.padded {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 50px 25px;
}

@media(min-width: 768px) {
    .padded {
        padding: 100px 50px;
    }
}

@media(min-width: 1025px) {
    .padded {
        padding: 100px;
    }
}

@media(min-width: 1340px) {
    .padded {
        padding-left: -moz-calc((100% - 1140px) / 2);
        padding-left: calc((100% - 1140px) / 2);
        padding-right: -moz-calc((100% - 1140px) / 2);
        padding-right: calc((100% - 1140px) / 2);
    }
}

@media(max-width: 700px) {
    h1 {
        font-size: 2rem;
    }
    p {
        font-size: 1.3rem;
    }
}

.padded+.padded {
    padding-top: 0px;
}

.center {
    text-align: center;
}

.large {
    font-size: 2.625rem;
    line-height: 1.25;
}

.strong {
    font-weight: bold;
}

@media(min-width: 450px) {
    .mobile-only {
        display: none;
    }
}

.sticky {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    will-change: transform;
}

.section {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    background: #FFF;
}

.bordered {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 15px solid #181818;
}

.animation-trigger {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    pointer-events: none;
}

@-webkit-keyframes light-flicker {
    0% {
        opacity: .75;
    }
    18% {
        opacity: .65
    }
    20% {
        opacity: .75
    }
    60% {
        opacity: .9;
    }
    70% {
        opacity: .65
    }
    95% {
        opacity: .8
    }
    100% {
        opacity: .75;
    }
}

@-moz-keyframes light-flicker {
    0% {
        opacity: .75;
    }
    18% {
        opacity: .65
    }
    20% {
        opacity: .75
    }
    60% {
        opacity: .9;
    }
    70% {
        opacity: .65
    }
    95% {
        opacity: .8
    }
    100% {
        opacity: .75;
    }
}

@keyframes light-flicker {
    0% {
        opacity: .75;
    }
    18% {
        opacity: .65
    }
    20% {
        opacity: .75
    }
    60% {
        opacity: .9;
    }
    70% {
        opacity: .65
    }
    95% {
        opacity: .8
    }
    100% {
        opacity: .75;
    }
}

header {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 10;
    padding-bottom: 0px !important;
    padding-top: 0px !important;
}

header nav {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 20px 0px 10px;
    line-height: 0;
    -border-bottom: 1px solid #413d6d;
}

header .jkm {
    display: inline-block;
    width: 94px;
    height: 30px;
    background: url(../img/jankelley-logo.png) no-repeat center / 100% auto;
    font-size: 0px;
    cursor: pointer;
}

header .social-links {
    padding: 0px;
    margin: 0px;
    list-style: none;
}

header .social-links li {
    display: inline-block;
}

header .social-links a {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: url(../img/social-icons.png) no-repeat left center / auto 23px;
    font-size: 0px;
}

header .social-links .linkedin {
    background-position: 4px center;
}

header .social-links .twitter {
    background-position: -37px center;
}

header .social-links .facebook {
    background-position: -74px center;
}

header .social-links .instagram {
    background: url(../img/instagram.svg) no-repeat center / auto 23px;
}

@media(min-width: 768px) {
    header .jkm {
        width: 125px;
        height: 40px;
    }
    header nav {
        padding: 50px 0px 25px;
    }
}

.landing {
    height: 170vh;
    min-height: 1000px;
    width: 100%;
    overflow: hidden;
}

.landing .sticky {
    height: 125vh;
}

.image {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 100ms;
    transition: -webkit-transform 100ms;
    -moz-transition: transform 100ms, -moz-transform 100ms;
    transition: transform 100ms;
    transition: transform 100ms, -webkit-transform 100ms, -moz-transform 100ms;
    -webkit-transition-timing-function: ease-in-out;
    -moz-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
}

body.touch-swipe .image,
body.no-scroll-transitions .image {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    transition: none !important;
}

.section .text {
    position: relative;
    font-family: 'Bangers', cursive;
    font-size: 1rem;
    line-height: 1;
    background: #fff7ae;
    color: #000;
    padding: 20px;
    border: 2px solid #181818;
}

.section.landing .image {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 125vh;
    -moz-background-size: cover;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    will-change: transform;
}

html.notready .section.landing .image {
    display: none;
}

.section.landing .stars-and-moon {
    background-image: url(../img/landing/small/stars-and-moon.jpg);
}

.section.landing .clouds {
    background-image: url(../img/landing/small/clouds.png);
    background-position: center;
    height: 150vh;
}

.section.landing .hills-building {
    background-image: url(../img/landing/small/hills-building.png);
}

.section.landing .hills-building-light {
    background-image: url(../img/landing/small/hills-building-light.png);
    -webkit-animation: light-flicker;
    -moz-animation: light-flicker;
    animation: light-flicker;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.section.landing .trees {
    background-image: url(../img/landing/small/trees.png);
}

.section.landing .title-card {
    background-image: url(../img/landing/small/title-card.png);
    will-change: transform, opacity;
}

@-webkit-keyframes scroll-arrow {
    0% {
        background-position: 50% 90%;
    }
    50% {
        background-position: 50% 85%;
    }
    100% {
        background-position: 50% 90%;
    }
}

@-moz-keyframes scroll-arrow {
    0% {
        background-position: 50% 90%;
    }
    50% {
        background-position: 50% 85%;
    }
    100% {
        background-position: 50% 90%;
    }
}

@keyframes scroll-arrow {
    0% {
        background-position: 50% 90%;
    }
    50% {
        background-position: 50% 85%;
    }
    100% {
        background-position: 50% 90%;
    }
}

.section.landing .scroll-arrow {
    height: 100vh;
    background: url(../img/scroll-arrow.svg) no-repeat center / 60px auto;
    background-position: 50% 90%;
    -webkit-animation: scroll-arrow;
    -moz-animation: scroll-arrow;
    animation: scroll-arrow;
    -webkit-animation-duration: 3s;
    -moz-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}

@media(min-width: 700px) {
    .section.landing .stars-and-moon {
        background-image: url(../img/landing/medium/stars-and-moon.jpg);
    }
    .section.landing .clouds {
        background-image: url(../img/landing/medium/clouds.png);
    }
    .section.landing .hills-building {
        background-image: url(../img/landing/medium/hills-building.png);
    }
    .section.landing .hills-building-light {
        background-image: url(../img/landing/medium/hills-building-light.png);
    }
    .section.landing .trees {
        background-image: url(../img/landing/medium/trees.png);
    }
    .section.landing .title-card {
        background-image: url(../img/landing/medium/title-card.png);
    }
}

@media(min-width: 1000px) {
    .section.landing .title-card {
        background-image: url(../img/landing/large/title-card.png);
    }
}

@media(min-width: 1500px) {
    .section.landing .stars-and-moon {
        background-image: url(../img/landing/large/stars-and-moon.jpg);
    }
    .section.landing .clouds {
        background-image: url(../img/landing/large/clouds.png);
    }
    .section.landing .hills-building {
        background-image: url(../img/landing/large/hills-building.png);
    }
    .section.landing .hills-building-light {
        background-image: url(../img/landing/large/hills-building-light.png);
    }
    .section.landing .trees {
        background-image: url(../img/landing/large/trees.png);
    }
}

@media(max-aspect-ratio: 1/1) {
    .landing .sticky {
        height: 110vh;
    }
    .section.landing .image {
        height: 110vh
    }
    .section.landing .stars-and-moon {
        background-image: url(../img/landing/portrait-small/stars-and-moon.jpg);
    }
    .section.landing .clouds {
        background-image: url(../img/landing/portrait-small/clouds.png);
    }
    .section.landing .hills-building {
        background-image: url(../img/landing/portrait-small/hills-building.png);
    }
    .section.landing .hills-building-light {
        background-image: url(../img/landing/portrait-small/hills-building-light.png);
    }
    .section.landing .trees {
        background-image: url(../img/landing/portrait-small/trees.png);
    }
    .section.landing .title-card {
        height: 100vh;
        -moz-background-size: contain;
        background-size: contain;
        background-position: center;
    }
}

@media(max-aspect-ratio: 1/1) and (min-width: 450px) {
    .section.landing .stars-and-moon {
        background-image: url(../img/landing/portrait-medium/stars-and-moon.jpg);
    }
    .section.landing .clouds {
        background-image: url(../img/landing/portrait-medium/clouds.png);
    }
    .section.landing .hills-building {
        background-image: url(../img/landing/portrait-medium/hills-building.png);
    }
    .section.landing .hills-building-light {
        background-image: url(../img/landing/portrait-medium/hills-building-light.png);
    }
    .section.landing .trees {
        background-image: url(../img/landing/portrait-medium/trees.png);
    }
}

@media(orientation: portrait) {
    .section.landing .scroll-arrow {
        height: 90vh;
    }
}

.section.second {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -moz-box-orient: vertical;
    -moz-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.section.second .animation {
    width: 100%;
    max-width: 490px;
}

.christmas-once-a-year-animation {
    width: 100%;
    height: 0;
    padding-bottom: 93.4667%;
    background-color: #241B38;
    position: relative;
    overflow: hidden;
}

.christmas-once-a-year-animation .image {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    will-change: transform;
    -moz-background-size: cover;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.christmas-once-a-year-animation .bg {
    background-image: url(../img/christmas-once-a-year/small/bg.jpg);
}

.christmas-once-a-year-animation .swipe {
    background-image: url(../img/christmas-once-a-year/small/swipe.png);
    background-position: top left;
}

.christmas-once-a-year-animation .text {
    position: absolute;
    padding: 0px;
    background-color: transparent;
    border: none;
    background-image: url(../img/christmas-once-a-year/small/text.png);
}

.christmas-once-a-year-animation .frame {
    background-image: url(../img/christmas-once-a-year/small/frame.png);
}

@media(min-width: 450px) and (max-width: 767px) {
    .christmas-once-a-year-animation .bg {
        background-image: url(../img/christmas-once-a-year/medium/bg.jpg);
    }
    .christmas-once-a-year-animation .swipe {
        background-image: url(../img/christmas-once-a-year/medium/swipe.png);
        background-position: top left;
    }
    .christmas-once-a-year-animation .text {
        background-image: url(../img/christmas-once-a-year/medium/text.png);
    }
    .christmas-once-a-year-animation .frame {
        background-image: url(../img/christmas-once-a-year/medium/frame.png);
    }
}

@media(min-width: 768px) and (max-width: 999px) {
    .christmas-once-a-year-animation .bg {
        background-image: url(../img/christmas-once-a-year/large/bg.jpg);
    }
    .christmas-once-a-year-animation .swipe {
        background-image: url(../img/christmas-once-a-year/large/swipe.png);
        background-position: top left;
    }
    .christmas-once-a-year-animation .text {
        background-image: url(../img/christmas-once-a-year/large/text.png);
    }
    .christmas-once-a-year-animation .frame {
        background-image: url(../img/christmas-once-a-year/large/frame.png);
    }
}

.section.third .window-frame-animation-container {
    position: relative;
    width: 1140px;
    max-width: 100%;
    margin: 0 auto;
}

.third .window-frame-animation {
    position: relative;
    height: 0px;
    width: 100%;
    padding-bottom: 83.33333%;
    overflow: hidden;
}

@media(max-aspect-ratio: 1/1) {
    .third .animation-trigger {
        top: -300px;
    }
}

.third .image {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    will-change: transform, width;
    -moz-background-size: cover;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transition: width 100ms, -webkit-transform 100ms;
    transition: width 100ms, -webkit-transform 100ms;
    -moz-transition: transform 100ms, width 100ms, -moz-transform 100ms;
    transition: transform 100ms, width 100ms;
    transition: transform 100ms, width 100ms, -webkit-transform 100ms, -moz-transform 100ms;
}

.third .inside {
    background-image: url(../img/window/small/inside.jpg);
}

.third .window-frame {
    background-image: url(../img/window/small/frame.png);
}

@media(min-width: 450px) {
    .third .inside {
        background-image: url(../img/window/medium/inside.jpg);
    }
    .third .window-frame {
        background-image: url(../img/window/medium/frame.png);
    }
}

@media(min-width: 768px) {
    .third .inside {
        background-image: url(../img/window/large/inside.jpg);
    }
    .third .window-frame {
        background-image: url(../img/window/large/frame.png);
    }
}

@media(min-width: 768px) {
    .third .text {
        position: absolute;
        left: auto;
        text-align: left;
        bottom: 20px;
        right: 20px;
    }
}

.section.fifth {
    z-index: 100;
}

.section.fifth {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -moz-box-orient: vertical;
    -moz-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.section.fifth .animation {
    width: 100%;
    max-width: 450px;
}

.flasks-animation {
    position: relative;
    height: 0px;
    width: 100%;
    padding-bottom: 93.46667%;
    overflow: hidden;
}

@media(min-width: 1000px) {
    .section.fifth {
        -webkit-box-pack: justify;
        -moz-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
}

.flasks-animation .image {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    will-change: transform;
    -moz-background-size: cover;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.flasks-animation .bg {
    background-image: url(../img/flasks/small/bg.jpg);
}

.flasks-animation .flask-1 {
    top: 20%;
    left: -11%;
    background-image: url(../img/flasks/small/1.png);
}

.flasks-animation .flask-2 {
    top: -15%;
    left: 30%;
    background-image: url(../img/flasks/small/2.png);
}

.flasks-animation .flask-3 {
    top: -31%;
    left: -27%;
    background-image: url(../img/flasks/small/3.png);
}

.flasks-animation .flask-4 {
    top: 52%;
    left: 43%;
    background-image: url(../img/flasks/small/4.png);
}

.flasks-animation .flask-5 {
    top: -37%;
    left: 18%;
    background-image: url(../img/flasks/small/5.png);
}

@media(min-width: 450px) and (max-width: 767px) {
    .flasks-animation .bg {
        background-image: url(../img/flasks/medium/bg.jpg);
    }
    .flasks-animation .flask-1 {
        background-image: url(../img/flasks/medium/1.png);
    }
    .flasks-animation .flask-2 {
        background-image: url(../img/flasks/medium/2.png);
    }
    .flasks-animation .flask-3 {
        background-image: url(../img/flasks/medium/3.png);
    }
    .flasks-animation .flask-4 {
        background-image: url(../img/flasks/medium/4.png);
    }
    .flasks-animation .flask-5 {
        background-image: url(../img/flasks/medium/5.png);
    }
}

@media(min-width: 768px) and (max-width: 999px) {
    .flasks-animation .bg {
        background-image: url(../img/flasks/large/bg.jpg);
    }
    .flasks-animation .flask-1 {
        background-image: url(../img/flasks/large/1.png);
    }
    .flasks-animation .flask-2 {
        background-image: url(../img/flasks/large/2.png);
    }
    .flasks-animation .flask-3 {
        background-image: url(../img/flasks/large/3.png);
    }
    .flasks-animation .flask-4 {
        background-image: url(../img/flasks/large/4.png);
    }
    .flasks-animation .flask-5 {
        background-image: url(../img/flasks/large/5.png);
    }
}

.santa-kicking-presents-animation-container {
    position: relative;
    width: 1140px;
    max-width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.santa-kicking-presents-animation {
    width: 100%;
    height: 0;
    padding-bottom: 65.4792%;
    background-color: #241B38;
    position: relative;
}

.santa-kicking-presents-animation .image {
    position: absolute;
    display: block;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    will-change: transform;
    -moz-background-size: cover;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.santa-kicking-presents-animation .bg {
    background-image: url(../img/kicking-presents/small/bg.jpg);
}

.santa-kicking-presents-animation .bg-light {
    background-image: url(../img/kicking-presents/small/bg-light.png);
}

.santa-kicking-presents-animation .santas-boot {
    background-image: url(../img/kicking-presents/small/santas-boot.png);
}

.santa-kicking-presents-animation .santas-boot-light {
    background-image: url(../img/kicking-presents/small/santas-boot-light.png);
}

.santa-kicking-presents-animation .left-present {
    background-image: url(../img/kicking-presents/small/left-present.png);
}

.santa-kicking-presents-animation .right-present {
    background-image: url(../img/kicking-presents/small/right-present.png);
}

.santa-kicking-presents-animation .bg-light,
.santa-kicking-presents-animation .santas-boot-light {
    -webkit-animation: light-flicker;
    -moz-animation: light-flicker;
    animation: light-flicker;
    -webkit-animation-duration: 2.5s;
    -moz-animation-duration: 2.5s;
    animation-duration: 2.5s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@media(min-width: 450px) {
    .santa-kicking-presents-animation .bg {
        background-image: url(../img/kicking-presents/medium/bg.jpg);
    }
    .santa-kicking-presents-animation .bg-light {
        background-image: url(../img/kicking-presents/medium/bg-light.png);
    }
    .santa-kicking-presents-animation .santas-boot {
        background-image: url(../img/kicking-presents/medium/santas-boot.png);
    }
    .santa-kicking-presents-animation .santas-boot-light {
        background-image: url(../img/kicking-presents/medium/santas-boot-light.png);
    }
    .santa-kicking-presents-animation .left-present {
        background-image: url(../img/kicking-presents/medium/left-present.png);
    }
    .santa-kicking-presents-animation .right-present {
        background-image: url(../img/kicking-presents/medium/right-present.png);
    }
}

@media(min-width: 768px) {
    .santa-kicking-presents-animation .bg {
        background-image: url(../img/kicking-presents/large/bg.jpg);
    }
    .santa-kicking-presents-animation .bg-light {
        background-image: url(../img/kicking-presents/large/bg-light.png);
    }
    .santa-kicking-presents-animation .santas-boot {
        background-image: url(../img/kicking-presents/large/santas-boot.png);
    }
    .santa-kicking-presents-animation .santas-boot-light {
        background-image: url(../img/kicking-presents/large/santas-boot-light.png);
    }
    .santa-kicking-presents-animation .left-present {
        background-image: url(../img/kicking-presents/large/left-present.png);
    }
    .santa-kicking-presents-animation .right-present {
        background-image: url(../img/kicking-presents/large/right-present.png);
    }
}

@media(max-aspect-ratio: 1/1) {
    .santa-kicking-presents-animation-trigger {
        top: -150px;
    }
}

.section.sixth {
    padding-bottom: 0px;
}

@media(min-width: 768px) {
    .sixth .text {
        position: absolute;
        left: auto;
        text-align: left;
        bottom: 20px;
        right: 20px;
    }
}

.section.eighth .animation,
.section.eighth .right {
    width: 100%;
    max-width: 450px;
    margin: 0px auto 50px;
}

.section.eighth .right {
    margin-bottom: 0px;
}

@media(min-width: 1000px) {
    .section.eighth {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: start;
        -moz-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-box-align: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .section.eighth .animation {
        width: -moz-calc(50% - 10px);
        width: calc(50% - 10px);
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        margin-bottom: 0px;
    }
}

.merry-christmas-santa-animation {
    width: 100%;
    height: 0px;
    padding-bottom: 125.6%;
    position: relative;
    overflow: hidden;
}

.merry-christmas-santa-animation .image {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    will-change: transform;
    -moz-background-size: cover;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.merry-christmas-santa-animation .bg {
    background-image: url(../img/merry-christmas-santa/medium/bg.jpg);
}

.merry-christmas-santa-animation .left-papers {
    background-image: url(../img/merry-christmas-santa/small/left.png);
}

.merry-christmas-santa-animation .right-papers {
    background-image: url(../img/merry-christmas-santa/small/right.png);
}

@media(min-width: 450px) and (max-width: 767px) {
    .merry-christmas-santa-animation .bg {
        background-image: url(../img/merry-christmas-santa/medium/bg.jpg);
    }
    .merry-christmas-santa-animation .left-papers {
        background-image: url(../img/merry-christmas-santa/medium/left.png);
    }
    .merry-christmas-santa-animation .right-papers {
        background-image: url(../img/merry-christmas-santa/medium/right.png);
    }
}

@media(min-width: 768px) and (max-width: 1024px) {
    .merry-christmas-santa-animation .bg {
        background-image: url(../img/merry-christmas-santa/large/bg.jpg);
    }
    .merry-christmas-santa-animation .left-papers {
        background-image: url(../img/merry-christmas-santa/large/left.png);
    }
    .merry-christmas-santa-animation .right-papers {
        background-image: url(../img/merry-christmas-santa/large/right.png);
    }
}

.ninth-container {
    margin-top: -50px;
}

.ninth .left {
    margin-bottom: 50px;
}

.ninth .right {
    width: 100%;
}

.ninth .animation {
    margin: 0 auto;
    max-width: 450px;
}

.the-gosh-darn-traditions-animation {
    width: 100%;
    height: 0px;
    padding-bottom: 93.4667%;
    position: relative;
    overflow: hidden;
}

.the-gosh-darn-traditions-animation .image {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    will-change: transform, width;
    -moz-background-size: cover;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-transition: width 100ms, -webkit-transform 100ms;
    transition: width 100ms, -webkit-transform 100ms;
    -moz-transition: transform 100ms, width 100ms, -moz-transform 100ms;
    transition: transform 100ms, width 100ms;
    transition: transform 100ms, width 100ms, -webkit-transform 100ms, -moz-transform 100ms;
}

.the-gosh-darn-traditions-animation .bg {
    background-image: url(../img/the-gosh-darn-traditions/small/bg.jpg);
}

.the-gosh-darn-traditions-animation .text {
    position: absolute;
    padding: 0px;
    background-color: transparent;
    border: none;
    background-image: url(../img/the-gosh-darn-traditions/small/text.png);
    background-position: top left;
}

.the-gosh-darn-traditions-animation .swipe {
    background-image: url(../img/the-gosh-darn-traditions/small/swipe.png);
    background-position: left top;
}

.the-gosh-darn-traditions-animation .frame {
    background-image: url(../img/the-gosh-darn-traditions/small/frame.png);
}

@media(min-width: 450px) and (max-width: 767px) {
    .the-gosh-darn-traditions-animation .bg {
        background-image: url(../img/the-gosh-darn-traditions/medium/bg.jpg);
    }
    .the-gosh-darn-traditions-animation .text {
        background-image: url(../img/the-gosh-darn-traditions/medium/text.png);
    }
    .the-gosh-darn-traditions-animation .swipe {
        background-image: url(../img/the-gosh-darn-traditions/medium/swipe.png);
    }
    .the-gosh-darn-traditions-animation .frame {
        background-image: url(../img/the-gosh-darn-traditions/medium/frame.png);
    }
}

@media(min-width: 768px) {
    .the-gosh-darn-traditions-animation .bg {
        background-image: url(../img/the-gosh-darn-traditions/large/bg.jpg);
    }
    .the-gosh-darn-traditions-animation .text {
        background-image: url(../img/the-gosh-darn-traditions/large/text.png);
    }
    .the-gosh-darn-traditions-animation .swipe {
        background-image: url(../img/the-gosh-darn-traditions/large/swipe.png);
    }
    .the-gosh-darn-traditions-animation .frame {
        background-image: url(../img/the-gosh-darn-traditions/large/frame.png);
    }
}

.final {
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

.final .image {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 120vh;
    -moz-background-size: cover;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}

.final .text {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    top: 10%;
    left: 0;
    width: 100%;
    padding: 25px;
    font-size: 1.75rem;
    line-height: 1.3;
    text-align: center;
    color: #FFF;
}

.final .bg {
    background-position: top center;
    background-image: url(../img/final/small/bg.jpg);
}

.final .dust {
    background-image: url(../img/final/small/dust.png);
}

.final .sun {
    background-image: url(../img/final/small/sun.png);
}

.final .clouds {
    background-image: url(../img/final/small/clouds.png);
}

.final .hills-jk-land {
    background-image: url(../img/final/small/hills-jk-land.png);
}

.final .trees-near {
    background-image: url(../img/final/small/trees-near.png);
}

.final .christmas-card {
    background-image: url(../img/final/small/christmas-card.png);
    top: -20vh;
    height: 120vh;
    -moz-background-size: 60%;
    background-size: 60%;
    background-position: bottom right;
}

@media(min-width: 700px) {
    .final .bg {
        background-image: url(../img/final/medium/bg.jpg);
    }
    .final .dust {
        background-image: url(../img/final/medium/dust.png);
    }
    .final .sun {
        background-image: url(../img/final/medium/sun.png);
    }
    .final .clouds {
        background-image: url(../img/final/medium/clouds.png);
    }
    .final .hills-jk-land {
        background-image: url(../img/final/medium/hills-jk-land.png);
    }
    .final .trees-near {
        background-image: url(../img/final/medium/trees-near.png);
    }
    .final .christmas-card {
        background-image: url(../img/final/medium/christmas-card.png);
    }
}

@media(min-width: 1500px) {
    .final .bg {
        background-image: url(../img/final/large/bg.jpg);
    }
    .final .dust {
        background-image: url(../img/final/large/dust.png);
    }
    .final .sun {
        background-image: url(../img/final/large/sun.png);
    }
    .final .clouds {
        background-image: url(../img/final/large/clouds.png);
    }
    .final .hills-jk-land {
        background-image: url(../img/final/large/hills-jk-land.png);
    }
    .final .trees-near {
        background-image: url(../img/final/large/trees-near.png);
    }
    .final .christmas-card {
        background-image: url(../img/final/large/christmas-card.png);
    }
}

@media(max-aspect-ratio: 1/1) {
    .final .bg {
        background-image: url(../img/final/portrait-small/bg.jpg);
    }
    .final .dust {
        background-image: url(../img/final/portrait-small/dust.png);
    }
    .final .sun {
        background-image: url(../img/final/portrait-small/sun.png);
    }
    .final .clouds {
        background-image: url(../img/final/portrait-small/clouds.png);
    }
    .final .hills-jk-land {
        background-image: url(../img/final/portrait-small/hills-jk-land.png);
    }
    .final .trees-near {
        background-image: url(../img/final/portrait-small/trees-near.png);
    }
}

@media(max-aspect-ratio: 1/1) and (min-width: 450px) {
    .final .bg {
        background-image: url(../img/final/portrait-medium/bg.jpg);
    }
    .final .dust {
        background-image: url(../img/final/portrait-medium/dust.png);
    }
    .final .sun {
        background-image: url(../img/final/portrait-medium/sun.png);
    }
    .final .clouds {
        background-image: url(../img/final/portrait-medium/clouds.png);
    }
    .final .hills-jk-land {
        background-image: url(../img/final/portrait-medium/hills-jk-land.png);
    }
    .final .trees-near {
        background-image: url(../img/final/portrait-medium/trees-near.png);
    }
}

@media(max-aspect-ratio: 1200/768) {
    .final .christmas-card {
        -moz-background-size: 70%;
        background-size: 70%;
    }
}

@media(max-aspect-ratio: 650/680) {
    .final .christmas-card {
        -moz-background-size: 100%;
        background-size: 100%;
    }
}