/* prefix declarations */
/* THEME STYLES */
.sequence-theme {
    /* this container is just to ensure the background color stretches all the way across on bigger screens */
    background: transparent;
    float: none;
    clear: both;
}

#sequence {
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    width: 1024px;
    max-width: 1024px;
    background-color: transparent;
    color: white;
    font-size: 0.625em;
    height: 656px;
}

#sequence > .sequence-canvas {
    height: 100%;
    width: 100%;
}
#sequence > .sequence-canvas > li {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    top: -50%;
}
#sequence > .sequence-canvas > li img {
    width: 1024px;
}
#sequence > .sequence-canvas li > * {
    position: absolute;
    /* only cause the left and opacity properties to transition */
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -ms-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
}

.sequence-next,
.sequence-prev {
    color: white;
    cursor: pointer;
    display: none;
    position: absolute;
    top: 40%;
    z-index: 1000;
    height: 64px;
    width: 64px;
    margin-top: -32px;
}

.sequence-pause {
    bottom: 0;
    cursor: pointer;
    position: absolute;
    z-index: 1000;
}

.sequence-paused {
    opacity: 0.3;
}

.sequence-prev {
    left: 3%;
    background: url("../icon/control_sprite.png")no-repeat -128px 0;
}

.sequence-next {
    right: 3%;
    background: url("../icon/control_sprite.png")no-repeat -192px 0;
}

#sequence-preloader {
    background: #d9d9d9;
}

.sequence-pagination {
    top: 575px;
    display: none;
    left: 10px;
    position: absolute;
    z-index: 10;
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
    background: rgba(0,0,0,0.9);
}
.sequence-pagination li {
    display: inline-block;
    *display: inline;
    /* Hack for IE7 and below as they don't support inline-block */
    height: 64px;
    padding: 5px;
}
.sequence-pagination li img {
    cursor: pointer;
    border: 1px solid #202020;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -ms-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -ms-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
.sequence-pagination li img:hover {

    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -ms-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
}
.sequence-pagination li.current img {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
}

.sequence-next,
.sequence-prev {
    position: absolute;
    opacity: 0.6;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -ms-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
}

.sequence-next:hover,
.sequence-prev:hover {
    opacity: 1;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -ms-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
}

.image-slide {
    margin-left: 0;
    top: 328px;
    left: 0;
    opacity: 0;
    position: relative;
    width: auto;
    height: auto;
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
}

.animate-in .image-slide {
    opacity: 1;
    -webkit-transition-duration: 2s;
    -moz-transition-duration: 2s;
    -ms-transition-duration: 2s;
    -o-transition-duration: 2s;
    transition-duration: 2s;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

.animate-out .image-slide {
    opacity: 0;
    -webkit-transition-duration: 2s;
    -moz-transition-duration: 2s;
    -ms-transition-duration: 2s;
    -o-transition-duration: 2s;
    transition-duration: 2s;
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
}

@media only screen and (min-width: 1280px) {
    #sequence {
        width: 1280px;
        max-width: 1280px;
        height: 820px;
    }
    #sequence > .sequence-canvas > li img {
        width: 1280px;
    }
    .image-slide {
        top: 410px;
    }
    .sequence-pagination {
        top: 740px;
    }
}