@-webkit-keyframes empty {
    0% {
        opacity: 1
    }
}
@-moz-keyframes empty {
    0% {
        opacity: 1
    }
}
@keyframes empty {
    0% {
        opacity: 1
    }
}
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}
@-moz-keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}
@-webkit-keyframes fadeOut {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}
@-moz-keyframes fadeOut {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}
@keyframes fadeOut {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}
@-webkit-keyframes backSlideOut {
    25% {
        opacity: .5;
        -webkit-transform: translateZ(-500px)
    }
    75% {
        opacity: .5;
        -webkit-transform: translateZ(-500px) translateX(-200%)
    }
    100% {
        opacity: .5;
        -webkit-transform: translateZ(-500px) translateX(-200%)
    }
}
@-moz-keyframes backSlideOut {
    25% {
        opacity: .5;
        -moz-transform: translateZ(-500px)
    }
    75% {
        opacity: .5;
        -moz-transform: translateZ(-500px) translateX(-200%)
    }
    100% {
        opacity: .5;
        -moz-transform: translateZ(-500px) translateX(-200%)
    }
}
@keyframes backSlideOut {
    25% {
        opacity: .5;
        transform: translateZ(-500px)
    }
    75% {
        opacity: .5;
        transform: translateZ(-500px) translateX(-200%)
    }
    100% {
        opacity: .5;
        transform: translateZ(-500px) translateX(-200%)
    }
}
@-webkit-keyframes backSlideIn {
    0%, 25% {
        opacity: .5;
        -webkit-transform: translateZ(-500px) translateX(200%)
    }
    75% {
        opacity: .5;
        -webkit-transform: translateZ(-500px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateZ(0) translateX(0)
    }
}
@-moz-keyframes backSlideIn {
    0%, 25% {
        opacity: .5;
        -moz-transform: translateZ(-500px) translateX(200%)
    }
    75% {
        opacity: .5;
        -moz-transform: translateZ(-500px)
    }
    100% {
        opacity: 1;
        -moz-transform: translateZ(0) translateX(0)
    }
}
@keyframes backSlideIn {
    0%, 25% {
        opacity: .5;
        transform: translateZ(-500px) translateX(200%)
    }
    75% {
        opacity: .5;
        transform: translateZ(-500px)
    }
    100% {
        opacity: 1;
        transform: translateZ(0) translateX(0)
    }
}
@-webkit-keyframes scaleToFade {
    to {
        opacity: 0;
        -webkit-transform: scale(.8)
    }
}
@-moz-keyframes scaleToFade {
    to {
        opacity: 0;
        -moz-transform: scale(.8)
    }
}
@keyframes scaleToFade {
    to {
        opacity: 0;
        transform: scale(.8)
    }
}
@-webkit-keyframes goDown {
    from {
        -webkit-transform: translateY(-100%)
    }
}
@-moz-keyframes goDown {
    from {
        -moz-transform: translateY(-100%)
    }
}
@keyframes goDown {
    from {
        transform: translateY(-100%)
    }
}
@-webkit-keyframes scaleUpFrom {
    from {
        opacity: 0;
        -webkit-transform: scale(1.5)
    }
}
@-moz-keyframes scaleUpFrom {
    from {
        opacity: 0;
        -moz-transform: scale(1.5)
    }
}
@keyframes scaleUpFrom {
    from {
        opacity: 0;
        transform: scale(1.5)
    }
}
@-webkit-keyframes scaleUpTo {
    to {
        opacity: 0;
        -webkit-transform: scale(1.5)
    }
}
@-moz-keyframes scaleUpTo {
    to {
        opacity: 0;
        -moz-transform: scale(1.5)
    }
}
@keyframes scaleUpTo {
    to {
        opacity: 0;
        transform: scale(1.5)
    }
}


#ez-skrollr .section-container {
    position: relative
}
#ez-skrollr article.create {
    box-sizing: border-box;
    max-width: 100%;
    padding: 15vh 8%;
    margin: 0 auto;
    position: relative
}
#ez-skrollr .fill {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: relative;
    margin-bottom: 0;
    z-index: 1
}



#ez-skrollr h2 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 200;
    line-height: 1.2em;
    margin: 0 0 32px;
    text-transform: none;
    color: #373741;
    text-shadow: none;
}
#ez-skrollr h2.headline-tagline {
    font-size: 36px;
    color: #FFF;
}
#ez-skrollr h2.mainheadline {
    color: #FFF;
    margin-bottom: 3px;
    font-size: 32px;
    line-height: 1.1em
}
#ez-skrollr h3.small-headline {
    font-size: 20px;
    text-transform: uppercase;
    color: #FFF;
    font-weight: 300;
    font-family: 'Open Sans', sans-serif;
    margin-bottom: 0;
}
#ez-skrollr p {
    font-family: 'Open Sans', sans-serif;
}
#ez-skrollr p.lede {
    font-size: 16px
}
#ez-skrollr .fixed {
    position: fixed !important;
    -webkit-backface-visibility: hidden
}
#ez-skrollr .relative {
    position: relative
}
#ez-skrollr .hidden-tablet {
    display: block
}
#ez-skrollr .hidden-desktop {
    display: none;
    position: relative
}
#ez-skrollr .clearfix {
    *zoom: 1
}
#ez-skrollr .clearfix:before,
#ez-skrollr .clearfix:after {
    display: table;
    content: ""
}
#ez-skrollr .clearfix:after {
    clear: both
}


#ez-skrollr .create i {
    margin: 0 0 10px;
    color: white;
    font-style: normal;
    font-size: 60px
}
#ez-skrollr .create-main {
    position: relative;
    margin-top: 40%;
    top: 20vh
}
#ez-skrollr .create-main+.create-bullet {
    margin-top: 50vh;
    margin-bottom: 40vh
}
#ez-skrollr .create-bullet {
    box-sizing: border-box;
    margin-top: 45vh;
    margin-bottom: 40vh;
    padding: 50px 0;
    background-size: 110%;
    background-position-x: -50%;
    background-repeat: no-repeat
}
#ez-skrollr .create-bullet:last-child {
    margin-bottom: 50vh
}


#ez-skrollr .skrollr-nav {
    bottom: 10%;
    right: 1.4%;
    z-index: 3
}
#ez-skrollr .skrollr-nav ul {
    margin: 0;
    padding: 0
}
#ez-skrollr .skrollr-nav li {
    list-style: none;
    margin-bottom: 20px
}
#ez-skrollr .skrollr-nav a {
    display: block;
    text-indent: -9999px;
    background: url(/assets/img/skrollr-nav-state.png) no-repeat 0 0;
    width: 15px;
    height: 15px
}

#ez-skrollr .main-title-wrapper {
    width: 48%;
    height: 100%;
    position: absolute;
    margin-left: 7vw
}
#ez-skrollr .main-heading {
    width: 75%;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    color: #FFF
}
#ez-skrollr .text-wrapper {
    left: 68%;
    width: 23%;
    max-width: 240px;
    display: block;
    vertical-align: middle;
    position: relative;
    padding-bottom: 30vh
}
#ez-skrollr .text-wrapper .lede {
    font-size: 18px;
    font-weight: 300;
    color: #FFF
}
#ez-skrollr .learn-more.btn {
    display: block;
    border: 2px solid #fff;
    border-radius: 5px;
    padding: 12px 0;
    width: 201px;
    text-align: center;
    background: transparent;
    font-weight: 300;
    color: #FFF;
    text-decoration: none;
    text-transform: capitalize;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px
}
#ez-skrollr .learn-more.btn:hover,
#ez-skrollr .learn-more.btn:active {
    border: 1px solid rgba(255, 255, 255, 0.85);
    outline: 0
}
#ez-skrollr .learn-more.btn:active {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2) inset, 5px 5px 10px rgba(0, 0, 0, 0.05)
}


#ez-skrollr .device.fixed {
    width: 45.1%;
    padding-bottom: 41%;
    bottom: 10%;
    display: block !important
}
#ez-skrollr .device {
    background: url(/assets/img/monitor.png) no-repeat 50% 50%;
    background-size: contain
}
#ez-skrollr .device .screen {
    position: absolute;
    top: 9.5%;
    left: 3.75%;
    width: 92.3%;
    height: 67.7%;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% center
}
#ez-skrollr .device-tablet .device-screen {
    position: absolute;
    top: 11.4%;
    left: 11.7%;
    width: 512px;
    height: 385px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% center
}
#ez-skrollr .device-tablet.fixed {
    width: 670px;
    height: 511px;
    display: block !important;
    z-index: 1
}
#ez-skrollr .device-tablet {
    background: url(/assets/img/tablet-display.png) no-repeat 50% 50%;
    background-size: contain
}


#ez-skrollr .ez-frame1-image {
    background: url(/assets/img/ez-frame1-image.png) no-repeat
}
#ez-skrollr .ez-frame2-image {
    background: url(/assets/img/ez-frame2-image.png) no-repeat
}
#ez-skrollr .ez-frame3-image {
    background: url(/assets/img/ez-frame3-image.png) no-repeat
}
#ez-skrollr .ez-frame4-image {
    background: url(/assets/img/ez-frame4-image.png) no-repeat
}
#ez-skrollr .ez-frame5-image {
    background: url(/assets/img/ez-frame5-image.png) no-repeat
}
#ez-skrollr .ez-frame6-image {
    background: url(/assets/img/ez-frame6-image.png) no-repeat
}



.mobile-section {
    padding: 30px 15px 15px;
    text-align: center;
}
.mobile-section a {
    text-align: center;
    width: 90%;
    display: block;
    margin: 0 auto;
}
.mobile-section a img {
    margin: 0 auto;
}
.mobile-section a:hover {
    text-decoration: none;
}
.mobile-section a h3 {
    font-size: 21px!important;
    color: white!important;
    font-weight: 600;
}
.mobile-section p {
    font-size: 14px!important;
    margin: 10px 0 15px;
    letter-spacing: .02em;
    line-height: 18px!important;
    color: white!important;
    font-weight: 500;
}



@media screen and (max-width: 992px) {
    #ez-skrollr .skrollr-body .fixed {
        position: relative !important
    }
    #ez-skrollr .hidden-tablet {
        display: none
    }
    #ez-skrollr .hidden-desktop {
        display: block
    }
    #ez-skrollr .create-main {
        margin-top: 0;
        float: left;
        width: 30%
    }
    #ez-skrollr .create-bullet {
        opacity: 1 !important;
        padding-top: 10px !important;
        top: auto !important;
        float: left;
        margin: 0 3%;
        width: 28%;
        box-sizing: border-box
    }
    #ez-skrollr .main-title-wrapper {
        position: relative;
        width: 100%;
        text-align: center
    }
    #ez-skrollr .main-heading {
        width: 100%;
        position: relative;
        top: auto
    }
    #ez-skrollr .text-wrapper {
        max-width: 1024px;
        position: relative;
        margin: 0 auto
    }
    #ez-skrollr .device.fixed {
        margin: 0 auto;
        left: -20px
    }
    #ez-skrollr .device-tablet.fixed {
        width: 568px;
        height: 412px;
        display: block !important;
        z-index: 1
    }
    #ez-skrollr .device-tablet .device-screen {
        top: 10.4%;
        left: 11.7%;
        width: 430px;
        height: 319px
    }
}

@media only screen and (max-height: 650px) and (min-width: 992px) {
    #ez-skrollr .main-heading {
        display:none;
    }
}

@media screen and (max-width: 992px), screen and (max-height: 650px) {
    #ez-skrollr .hidden-tablet {
        display: none
    }
    #ez-skrollr .hidden-desktop {
        display: block
    }
    #ez-skrollr .fixed {
        position: relative !important
    }
    #ez-skrollr .device-tablet.fixed {
        width: 560px;
        height: 380px;
        display: block !important;
        z-index: 1
    }
    #ez-skrollr .device-tablet .device-screen {
        top: 11.4%;
        width: 388px;
        height: 288px;
        left: 15.3%
    }
    #ez-skrollr .device-tablet.fixed {
        float: left
    }
    #ez-skrollr .device-tablet.fixed {
        width: 450px;
        height: 340px;
        display: block !important;
        z-index: 1
    }
    #ez-skrollr .device-tablet .device-screen {
        top: 11.4%;
        width: 339px;
        height: 253px;
        left: 12%
    }
}

@media only screen and (max-width: 1400px) and (min-width: 1300px) {
    #ez-skrollr .device.fixed {
        width: 45.1%;
        padding-bottom: 41%
    }
}
@media only screen and (min-width: 1900px) {
    #ez-skrollr .device.fixed {
        width: 45.1%;
        padding-bottom: 41%
    }
}
@media only screen and (max-width: 1400px) and (min-width: 1300px) {
    #ez-skrollr .device.fixed {
        width: 44.1%;
        padding-bottom: 37%
    }
}
@media only screen and (max-width: 1300px) and (min-width: 992px) {
    #ez-skrollr .device.fixed {
        width: 41.1%;
        padding-bottom: 34%
    }
}