/* prefix declarations */
@-webkit-keyframes scaleAndFade {

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

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

    100% {
        -webkit-transform: scale(1.3);
        opacity: 0;
        z-index: 3;
    }
}
@-moz-keyframes scaleAndFade {

    0% {
        opacity: 1;
        -moz-transform: scale(1);
    }

    75% {
        -moz-transform: scale(1.3);
        opacity: 1;
    }

    100% {
        -moz-transform: scale(1.3);
        opacity: 0;
        z-index: 3;
    }
}
@-ms-keyframes scaleAndFade {

    0% {
        opacity: 1;
        -ms-transform: scale(1);
    }

    75% {
        -ms-transform: scale(1.3);
        opacity: 1;
    }

    100% {
        -ms-transform: scale(1.3);
        opacity: 0;
        z-index: 3;
    }
}
@-o-keyframes scaleAndFade {

    0% {
        opacity: 1;
        -o-transform: scale(1);
    }

    75% {
        -o-transform: scale(1.3);
        opacity: 1;
    }

    100% {
        -o-transform: scale(1.3);
        opacity: 0;
        z-index: 3;
    }
}
@keyframes scaleAndFade {

    0% {
        opacity: 1;
        transform: scale(1);
    }

    75% {
        transform: scale(1.3);
        opacity: 1;
    }

    100% {
        transform: scale(1.3);
        opacity: 0;
        z-index: 3;
    }
}

#sequence.sequence-fallback > .sequence-canvas li {
    opacity: 1 !important;
    /* in fallback mode, frames should always have an opacity of 1 */
}
/* THEME STYLES */

#sequence {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    height: 400px;
    max-width: 1920px;
    /* Fallback (could use .jpg/.png alternatively) */
    background-color: #006cc4;

    /* SVG fallback for IE 9 (could be data URI, or could use filter) */
    background-image: url(/images/background-gradient.svg);

    /* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */
    background-image:
    -webkit-gradient(linear, left top, left bottom, from(#00366b), to(#006cc4));

    /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
    background-image:
    -webkit-linear-gradient(top, #00366b, #006cc4);

    /* Firefox 3.6 - 15 */
    background-image:
    -moz-linear-gradient(top, #00366b, #006cc4);

    /* Opera 11.1 - 12 */
    background-image:
    -o-linear-gradient(top, #00366b, #006cc4);

    /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
    background-image:
    linear-gradient(to bottom, #00366b, #006cc4);
}

#sequence > .sequence-canvas {
    height: 100%;
    width: 100%;
}

#sequence ul {
    margin: 0;
}
#sequence > .sequence-canvas > li {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

#sequence > .sequence-canvas li > * {
    position: absolute;
}

#sequence .sequence-pagination,
#sequence .controls {
    position: absolute;
    bottom: 20px;
}

#sequence .controls {
    left: 12px;
}

#sequence .sequence-pagination {
    left: 130px;
}

#sequence .sequence-pagination li,
#sequence .controls li {
    background-image: url("/images/slider/buttons.png");
    background-repeat: no-repeat;
    cursor: pointer;
    display: inline-block;
    *display: inline;
    text-indent: -99999px;
    opacity: 0.8;
}

#sequence .sequence-pagination li:hover,
#sequence .controls li:hover {
    opacity: 1;
}

#sequence .sequence-pagination li {
    background-position: 0 -8px;
    padding-right: 4px;
    height: 20px;
    width: 20px;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);
}

#sequence .sequence-pagination li.current {
    background-image: url("/images/slider/buttons.png");
    background-repeat: no-repeat;
    background-position: -22px -8px;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

#sequence .controls li {
    height: 34px;
    width: 34px;
    padding-left: 5px;
}

#sequence .controls .sequence-prev {
    background-position: -47px 0;
}

#sequence .controls .sequence-next {
    background-position: -87px 0;
}

#sequence li img.slide {
    opacity: 0;
    left: 50%;
    /* move the left of the image to the horizontal center */
    margin-left: -960px;
    /* ...then pull it back by half its width to center it */
    top: 50%;
    /* move the top of the image to the vertica center */
    margin-top: -200px;
    /* ...then pull it back by half its height to center it */
    max-width: none;
    z-index: -10;
}

#sequence li.animate-in img.slide {
    opacity: 1;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -ms-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-delay: 1s;
    -moz-transition-delay: 1s;
    -ms-transition-delay: 1s;
    -o-transition-delay: 1s;
    transition-delay: 1s;
}

#sequence li.animate-out img.slide {
    opacity: 0;
    /* fade out */
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
    transform: scale(1.3);
    /* zoom in */
    -webkit-transition-property: opacity, -webkit-transform;
    -webkit-transition-duration: 0s, 2s;
    -webkit-transition-delay: 2s, 0s;
    -moz-transition-property: opacity, -moz-transform;
    -moz-transition-duration: 0s, 2s;
    -moz-transition-delay: 2s, 0s;
    -ms-transition-property: opacity, -ms-transform;
    -ms-transition-duration: 0s, 2s;
    -ms-transition-delay: 2s, 0s;
    -o-transition-property: opacity, -o-transform;
    -o-transition-duration: 0s, 2s;
    -o-transition-delay: 2s, 0s;
    transition-property: opacity, transform;
    /* animate opacity and the scale transform */
    transition-duration: 0s, 2s;
    /* opacity will snap to 0 immediately, scale transform will animate over 2 seconds */
    transition-delay: 2s, 0s;
    /* delay the opacity snap by 3 seconds (to let the scale finish animating first). no delay on the scale transform */
}

#sequence li:nth-child(1) img.slide {
    -webkit-transform-origin: 30% 40%;
    -moz-transform-origin: 30% 40%;
    -ms-transform-origin: 30% 40%;
    -o-transform-origin: 30% 40%;
    transform-origin: 30% 40%;
    /* the origin of the scale for the first frame's image (which point in the picture Sequence should zoom in to) */
}

#sequence li:nth-child(2) img.slide {
    -webkit-transform-origin: 60% 50%;
    -moz-transform-origin: 60% 50%;
    -ms-transform-origin: 60% 50%;
    -o-transform-origin: 60% 50%;
    transform-origin: 60% 50%;
    /* the origin of the scale for the second frame's image (which point in the picture Sequence should zoom in to) */
}

#sequence li:nth-child(3) img.slide {
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    /* the origin of the scale for the third frame's image (which point in the picture Sequence should zoom in to) */
}

#cta {
    position: absolute;
    width: 100%;
}
#cta-inner {
    position: relative;
    width: 100%;
    margin: 0 auto;
    max-width: 1200px;
    top: 30px;
    z-index: 20;
}

.black-bg {
    position: absolute;
    background-image: url("/images/slider/black-bg.png");
    background-repeat: repeat;
    width: 520px;
    height: 275px;
    z-index: -5;
}

.box-padding {
    padding: 20px;
    height: 360px;
}

#cta h1 {
    color: white;
    font-family: "Lato", Helvetica, Arial, sans-serif;
    font-size: 44px;
    font-weight: 700;
    line-height: 120%;
    opacity: 1;
    margin: 0;

    /* start the h1 title at 90% size */
    text-shadow: 1px 1px 2px #333333;
}

#cta h2 {
    color: white;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 18px;
    font-weight: 300;
    z-index: 4;
    opacity: 1;
    margin: 20px 0;
    line-height: 1.4;
}

@media only screen and (min-width: 1024px) {
    #cta h2 {
        width: 40%;
    }
}

@media only screen and (max-width: 1023px) {
    #cta h2 {
        width: 50%;
    }
}

@media only screen and (max-width: 767px) {
    #cta h2 {
        width: 100%;
    }
}


#cta p.subtitle {
    color: #fff;
    font-family: "Lato", Helvetica, Arial, sans-serif;
    font-size: 30px;
    margin: 0;
    text-shadow: 1px 1px 2px #333333;
}

.sequence-nav-caption {
    list-style: none;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    text-shadow: 1px 1px 2px #333333;
    padding: 8px 15px;
    /*background: url("/images/black-bg.png") repeat;*/
    opacity: 1;
    position: absolute;
    left: 48%;
    /* ...then pull it back by half its width to center it */
    bottom: 0;
    z-index: 100;
    margin: 0 0 15px 0;
}
.sequence-nav-caption a {
    color: #fff;
}

@media only screen and (max-width: 600px) {
    /* reduce the height of Sequence when the viewport begins to get narrow */

    #sequence {
        height: 400px;
    }
    #cta p.subtitle {
        font-size: 36px;

    }
}

@media only screen and (max-width: 480px) {
    /* reduce the height of Sequence when the viewport begins to get narrow */

    #sequence {
        height: 400px;
    }

    #cta-inner {
        top: 10px;
    }
    #cta h1 {
        font-size: 36px;
        line-height: 120%;
        margin: 0;
    }

    #cta h2 {
        font-size: 18px;
        margin: 10px 0;
    }
    #cta p.subtitle {
        font-size: 18px;
    }
}
@media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
    /* retina devices */

    #sequence .sequence-pagination li,
    #sequence .controls li,
    #sequence .sequence-pagination li.current {
        background-image: url("/images/slider/buttons@2x.png");
        /* use a larger image for retina devices and shrink it down to fit in the same space for better quality */
        background-size: 123px 34px;
    }
}