/*=============================================================================
  Page Styles
  ========================================================================== */

h4:first-child {
    margin-top: 0px;
}

#header {
    height: 350px;

    background-image: url(/images/header-background.png);
    background-size: 1px, 360px;
}

#header-icon {
    margin-top: 64px;
    height: 285px;

    background-image: url(/images/icon.png);
    background-size: 305px, 285px;
}

#header-title-container {
    height: 300px;

    background-image: url(/images/physique-title.png);
    background-position: left center;
    background-size: 460px, 165px;
    background-repeat: no-repeat;
}

#header-title {
    /* Same as .visuallyhidden class */
    border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;
}

#hero {
    background: #FFFFFF; /* Old browsers */
    background: -moz-linear-gradient(top, #FFFFFF 0%, #eff0f1 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#eff0f1)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #FFFFFF 0%,#eff0f1 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #FFFFFF 0%,#eff0f1 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #FFFFFF 0%,#eff0f1 100%); /* IE10+ */
    background: linear-gradient(to bottom, #FFFFFF 0%,#eff0f1 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#eff0f1',GradientType=0 ); /* IE6-9 */

    border-bottom: 1px solid #ddd;
}

#hero h2 {
    font-size: 48px;
    margin-top: 48px;
}

#hero p {
    font-size: 20px;
}

.appstorebutton {
    width: 306px;
    height: 91px;
    margin: 0 auto 0 auto;

    background-image: url(/images/appstore306.png);
    background-position: center center;
    background-size: 306px, 91px;
    background-repeat: no-repeat;
}

#hero .appstorebutton {
    margin-top: 55px;
}

#demo {
    position: relative;
    height: 668px;
    
    background-image: url(/images/hero-iphone.png);
    background-position: center bottom;
    background-size: 364px, 668px;
    background-repeat: no-repeat;
}

#demo #video {
    position: absolute;
    top: 114px;
    left: 87px;

    width: 303px;
    height: 540px;
}

#routines {
    padding-top: 32px;
    padding-bottom: 60px;
    border-bottom: 1px solid #ddd;
}

#routines .title h2 {
    margin-top: 32px
}

#routines .title h3 {
    margin-bottom: 32px
}

#routine-info h3 {
    margin-top: 52px;
}

#routine-catalog {
    padding-top: 20px;
    height: 545px;
    background-image: url(/images/routine-catalog.png);
    background-position: center bottom;
    background-size: 300px 545px;
    background-repeat: no-repeat;
}

#routine-view {
    padding-bottom: 16px;
    height: 566px;

    background-image: url(/images/routine-view.png);
    background-position: center center;
    background-size: 368px, 550px;
    background-repeat: no-repeat;
}

#workout-details {
    padding-top: 50px;
    padding-bottom: 16px;
    height: 551px;
    
    background-image: url(/images/workout-view.png);
    background-position: center center;
    background-size: 368px, 551px;
    background-repeat: no-repeat;
}

#routine-editor {
    height: 200px;
    
    background-image: url(/images/routine-editor.png);
    background-position: center center;
    background-size: 300px, 200px;
    background-repeat: no-repeat;
}

#routine-info_1 h4 {
    margin-top: 30px;
}

#routine-info_1 h4:first-child {
    margin-top: 64px;
}

#routine-info_2 h4 {
    margin-top: 30px;
}

#routine-info_2 h4:first-child {
    margin-top: 70px;
}

#considerations h3 {
    margin-top: 38px;
}

#engineering {
    background: #FFFFFF; /* Old browsers */
    background: -moz-linear-gradient(top, #eff0f1 0%, #ffffff 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eff0f1), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #eff0f1 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #eff0f1 0%,#ffffff 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #eff0f1 0%,#ffffff 100%); /* IE10+ */
    background: linear-gradient(to bottom, #eff0f1 0%,#ffffff 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eff0f1', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

    padding-top: 50px;
    padding-bottom: 60px;

    border-bottom: 1px solid #ddd;
}

#engineering h2 {
    margin-top: 16px;
}

#engineering h4 {
    margin-top: 50px;
}

#workout-preview {
    height: 712px;

    background-image: url(/images/workout-preview.png);
    background-position: center center;
    background-size: 270px, 712px;
    background-repeat: no-repeat;
}

#in-workout {
    height: 440px;
    border-bottom: 1px solid #ddd;

    background-image: url(/images/in-workout.png);
    background-position: center bottom;
    background-size: 996px, 440px;
    background-repeat: no-repeat;
}

#design {
    background: #FFFFFF; /* Old browsers */
    background: -moz-linear-gradient(top, #eff0f1 0%, #ffffff 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eff0f1), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #eff0f1 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #eff0f1 0%,#ffffff 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #eff0f1 0%,#ffffff 100%); /* IE10+ */
    background: linear-gradient(to bottom, #eff0f1 0%,#ffffff 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eff0f1', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

    padding-bottom: 38px;
    border-bottom: 1px solid #ddd;
}

#design .centered-title h2 {
    margin-top: 38px;
}

#design .centered-title h3 {
    margin-bottom: 32px;
}

#in-workout-images-row {
    display: block !important;
    visibility: visible;
}

#in-workout-slider-container {
    display: none !important;
    visibility: hidden;
}

#in-workout-overview {
    height: 524px;
    padding-bottom: 50px;

    background-image: url(/images/in-workout-overview.png);
    background-position: center top;
    background-size: 300px, 524px;
    background-repeat: no-repeat;
}

#in-workout-set {
    height: 524px;
    padding-bottom: 50px;

    background-image: url(/images/in-workout-set.png);
    background-position: center top;
    background-size: 300px, 524px;
    background-repeat: no-repeat;
}

#in-workout-rest {
    height: 524px;
    padding-bottom: 50px;

    background-image: url(/images/in-workout-rest.png);
    background-position: center top;
    background-size: 300px, 524px;
    background-repeat: no-repeat;
}

#analysis {
    padding-top: 50px;
    padding-bottom: 60px;
    border-bottom: 1px solid #ddd;
}

#analysis h4 {
    margin-top: 30px;
}

#finished-workout {
    height: 712px;

    background-image: url(/images/finished-workout.png);
    background-position: center center;
    background-size: 270px, 712px;
    background-repeat: no-repeat;
}

#routine-consistency {
    height: 185px;
    
    background-image: url(/images/routine-consistency.png);
    background-position: center center;
    background-size: 300px, 185px;
    background-repeat: no-repeat;
}

#more {
    padding-top: 4px;
    padding-bottom: 40px;
    border-bottom: 1px solid #ddd;
}

#more h2 {
    text-align: center;
}

.more-item {
    padding-left: 50px;
}

#buy-bottom {
    margin-top: 64px;
    text-align: center;
}

#buy-bottom .appstorebutton {
    margin-bottom: 16px;
}

#testimonials {
    padding-top: 4px;
    padding-bottom: 38px;
    background-color: #eff0f1;
    border-bottom: 1px solid #ddd;
}

#testimonials h2 {
    text-align: center;
}

#testimonials .quote {
    margin-bottom: 16px;
}

#testimonials .quote p {
    margin-bottom: 0px;
}

#testimonials .quote p:before {
    content: "\201C ";
}

#testimonials .quote p:after {
    content: "\201D";
}

#testimonials .quote .name {
    text-align: right;
    font-weight: 600;
    padding-right: 32px;
}

#testimonials .quote .name:before {
    content: "- ";
}

/* =============================================================================
   Media Queries
   ========================================================================== */

/* Desktop - Retina */
@media  only screen and (-webkit-min-device-pixel-ratio: 2),
        only screen and (   min--moz-device-pixel-ratio: 2),
        only screen and (     -o-min-device-pixel-ratio: 2/1),
        only screen and (        min-device-pixel-ratio: 2),
        only screen and (                min-resolution: 192dpi),
        only screen and (                min-resolution: 2dppx) {

    #header-icon {
        background-image: url(/images/icon@2x.png);
    }

    #header-title-container {
        background-image: url(/images/physique-title@2x.png);
    }

    #demo-video {
        background-image: url(/images/hero-iphone@2x.png);
    }

    #routine-catalog {
        background-image: url(/images/routine-catalog@2x.png);
    }

    .appstorebutton {
        background-image: url(/images/appstore306@2x.png);
    }

    #routine-view {
        background-image: url(/images/routine-view@2x.png);
    }

    #workout-details {
        background-image: url(/images/workout-view@2x.png);
    }

    #routine-editor {
        background-image: url(/images/routine-editor@2x.png);
    }

    #workout-preview {
        background-image: url(/images/workout-preview@2x.png);
    }

    #in-workout {
        background-image: url(/images/in-workout@2x.png);
    }

    #in-workout-overview {
        background-image: url(/images/in-workout-overview@2x.png);
    }

    #in-workout-set {
        background-image: url(/images/in-workout-set@2x.png);
    }

    #in-workout-rest {
         background-image: url(/images/in-workout-rest@2x.png);
    }

    #finished-workout {
        background-image: url(/images/finished-workout@2x.png);
    }

    #routine-consistency {
        background-image: url(/images/routine-consistency@2x.png);
    }

}

/* Tablet Portrait size to Base 996px */
@media only screen and (min-width: 768px) and (max-width: 995px) {
    
    #header-title-container {
        background-image: url(/images/physique-title-tablet.png);
        background-size: 415px, 145px;
    }

    #hero h2 {
        font-size: 38px;
    }

    #hero p {
        font-size: 18px;
    }

    #hero .appstorebutton {
        margin-top: 80px;
    }

    #demo #video {
        top: 114px;
        left: 35px;
    }

    #routine-info_1 h4 {
        margin-top: 0px;
    }

    #routine-info_2 h4:first-child {
        margin-top: 50px;
    }

    #workout-details {
        padding-top: 80px;
    }

    #engineering h4 {
        margin-top: 30px;
    }

    .more-item {
        padding-left: 0px;
    }

    #in-workout-overview {
        height: 416px;
        background-image: url(/images/in-workout-overview-tablet.png);
        background-size: 240px, 416px;
    }

    #in-workout-set {
        height: 416px;
        background-image: url(/images/in-workout-set-tablet.png);
        background-size: 240px, 416px;
    }

    #in-workout-rest {
        height: 416px;
        background-image: url(/images/in-workout-rest-tablet.png);
        background-size: 240px, 416px;
    }
}

/* Tablet - Retina */
@media  only screen and (min-width: 768px) and (max-width: 995px) and (-webkit-min-device-pixel-ratio: 2),
        only screen and (min-width: 768px) and (max-width: 995px) and (   min--moz-device-pixel-ratio: 2),
        only screen and (min-width: 768px) and (max-width: 995px) and (     -o-min-device-pixel-ratio: 2/1),
        only screen and (min-width: 768px) and (max-width: 995px) and (        min-device-pixel-ratio: 2),
        only screen and (min-width: 768px) and (max-width: 995px) and (                min-resolution: 192dpi),
        only screen and (min-width: 768px) and (max-width: 995px) and (                min-resolution: 2dppx) {
    
    #header-title-container {
        background-image: url(/images/physique-title-tablet@2x.png);
    }

    #in-workout-overview {
        background-image: url(/images/in-workout-overview-tablet@2x.png);
    }

    #in-workout-set {
        background-image: url(/images/in-workout-set-tablet@2x.png);
    }

    #in-workout-rest {
        background-image: url(/images/in-workout-rest-tablet@2x.png);
    }
}

/* All Mobile Sizes */
@media only screen and (max-width: 767px) {

    h4:first-child {
        margin-top: 0px;
    }

    #header {
        height: 300px;

        background-image: url(/images/header-background-mobile.png);
        background-size: 1px, 300px;
    }

    #header-icon {
        margin-top: 16px;
        height: 145px;

        background-image: url(/images/icon-mobile.png);
        background-position: center center;
        background-size: 150px, 145px;
    }

    #header-title-container {
        height: 96px;

        background-image: url(/images/physique-title-mobile.png);
        background-position: center center;
        background-size: 260px, 96px;
    }

    #hero {
        padding-top: 32px;
    }
    #hero h2 {
        font-size: 27px;
        margin-top: 0px;
    }

    #hero p {
        font-size: 16px;
    }

    .appstorebutton {
        width: 240px;
        height: 71px;

        background-image: url(/images/appstore240.png);
        background-size: 240px, 71px;
    }

    #hero .appstorebutton {
        margin-top: 32px;
        margin-bottom: 32px;
    }

    #demo {
        position: relative;
        height: 439px;

        /* Fix for unknown space between #demo and it's parent. Keep it aligned at the bottom. */
        bottom: -6px;
        
        background-image: url(/images/hero-iphone-mobile.png);
        background-position: center bottom;
        background-size: 240px, 439px;
        background-repeat: no-repeat;
    }

    #demo #video {
        position: absolute;
        top: 74px;
        left: 86px;

        width: 303px;
        height: 540px;
    }

    #routines {
        padding-top: 0px;
        padding-bottom: 32px;
    }

    #routines .title h2 {
        margin-top: 32px;
    }

    #routines .title h3 {
        margin-bottom: 16px;
    }

    #routine-info h3 {
        margin-top: 32px;
    }

    #routine-catalog {
        padding-top: 0px;
        height: 268px;
        background-image: url(/images/routine-catalog-mobile.png);
        background-position: center center;
        background-size: 260px 268px;
    }

    #routine-view {
        padding-bottom: 0px;
        height: 357px;

        background-image: url(/images/routine-view-mobile.png);
        background-position: center center;
        background-size: 260px, 357px;
    }

    #workout-details {
        padding-top: 0px;
        padding-bottom: 0px;
        height: 329px;
        
        background-image: url(/images/workout-view-mobile.png);
        background-position: center center;
        background-size: 260px, 329px;
    }

    #routine-editor {
        height: 222px;
        
        background-image: url(/images/routine-editor-mobile.png);
        background-position: center center;
        background-size: 260px, 222px;
    }

    #routine-info_1 h4 {
        margin-top: 24px;
    }

    #routine-info_1 h4:first-child {
        margin-top: 0px;
    }

    #routine-info_2 h4 {
        margin-top: 24px;
    }

    #routine-info_2 h4:first-child {
        margin-top: 24px;
    }

    #considerations h3 {
        margin-top: 32px;
    }

    #customizable h3 {
        margin-top: 32px;
        margin-bottom: 12px;
    }

    #engineering {
        padding-top: 32px;
        padding-bottom: 32px;
    }

    #engineering h2 {
        margin-top: 0px;
        margin-bottom: 32px;
    }

    #engineering h4 {
        margin-top: 24px;
    }

    #workout-preview {
        /* Hidden on mobile */
        display: none !important; 
        visibility: hidden;
        background-image: url();
    }

    #in-workout {
        height: 202px;

        background-image: url(/images/in-workout-mobile.png);
        background-position: center bottom;
        background-size: 456px, 202px;
    }

    #design {
        padding-bottom: 32px;
    }

    #design .centered-title h2 {
        margin-top: 32px;
    }

    #design .centered-title h3 {
        margin-bottom: 32px;
    }

    #design h4 {
        margin-top: 24px;
    }

    #design h4:first-child {
        margin-top: 9px;
    }

    #in-workout-images-row {
        display: none !important;
        visibility: hidden;
    }

    #in-workout-slider-container {
        display: block !important;
        visibility: visible;
    }

    #in-workout-overview {
        height: 0px;
        padding-bottom: 0px;

        background-image: url();
        background-size: 0px, 0px;
    }

    #in-workout-set {
        height: 0px;
        padding-bottom: 0px;

        background-image: url();
        background-size: 0px, 0px;
    }

    #in-workout-rest {
        height: 0px;
        padding-bottom: 0px;

        background-image: url();
        background-size: 0px, 0px;
    }

    #in-workout-slider-overview {
        background-image: url(/images/in-workout-overview-mobile.png);
        background-position: center center;
        background-size: 260px, 431px;
    }

    #in-workout-slider-set {
        background-image: url(/images/in-workout-set-mobile.png);
        background-position: center center;
        background-size: 260px, 431px;
    }

    #in-workout-slider-rest {
        background-image: url(/images/in-workout-rest-mobile.png);
        background-position: center center;
        background-size: 260px, 431px;
    }

    #analysis {
        padding-top: 32px;
        padding-bottom: 32px;
    }

    #analysis h2 {
        margin-top: 0px;
        margin-bottom: 32px;
    }

    #analysis h4 {
        margin-top: 24px;
    }

    #finished-workout {
        height: 393px;

        background-image: url(/images/finished-workout-mobile.png);
        background-position: center center;
        background-size: 260px, 393px;
    }

    #routine-consistency {
        height: 208px;
        
        background-image: url(/images/routine-consistency-mobile.png);
        background-position: center center;
        background-size: 260px, 208px;
    }

    #more {
        padding-top: 32px;
        padding-bottom: 32px;
    }

    #more h2 {
        margin-top: 0px;
        margin-bottom: 32px;
    }

    .more-item {
        padding-left: 0px;
    }

    #buy-bottom {
        margin-top: 32px;
        text-align: center;
    }

    #buy-bottom .appstorebutton {
        margin-bottom: 5px;
    }

    #testimonials {
        padding-top: 32px;
        padding-bottom: 32px;
    }

    #testimonials h2 {
        margin-top: 0px;
        margin-bottom: 32px;
    }

    #testimonials .quote {
        margin-bottom: 24px;
    }
    
}

/* Mobile - Retina */
@media  only screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 2),
        only screen and (max-width: 767px) and (   min--moz-device-pixel-ratio: 2),
        only screen and (max-width: 767px) and (     -o-min-device-pixel-ratio: 2/1),
        only screen and (max-width: 767px) and (        min-device-pixel-ratio: 2),
        only screen and (max-width: 767px) and (                min-resolution: 192dpi),
        only screen and (max-width: 767px) and (                min-resolution: 2dppx) {

    #header {
        background-image: url(/images/header-background-mobile@2x.png);
    }

    #header-icon {
        background-image: url(/images/icon-mobile@2x.png);
    }

    #header-title-container {
        background-image: url(/images/physique-title-mobile@2x.png);
    }

    .appstorebutton {
        background-image: url(/images/appstore240@2x.png);
    }

    #demo {
        background-image: url(/images/hero-iphone-mobile@2x.png);
    }

    #routine-catalog {
        background-image: url(/images/routine-catalog-mobile@2x.png);
    }

    #routine-view {
        background-image: url(/images/routine-view-mobile@2x.png);
    }

    #workout-details {
        background-image: url(/images/workout-view-mobile@2x.png);
    }

    #routine-editor {
        background-image: url(/images/routine-editor-mobile@2x.png);
    }

    #in-workout {
        background-image: url(/images/in-workout-mobile@2x.png);
    }

    #in-workout-slider-overview {
        background-image: url(/images/in-workout-overview-mobile@2x.png);
    }

    #in-workout-slider-set {
        background-image: url(/images/in-workout-set-mobile@2x.png);
    }

    #in-workout-slider-rest {
        background-image: url(/images/in-workout-rest-mobile@2x.png);
    }

    #finished-workout {
        background-image: url(/images/finished-workout-mobile@2x.png);
    }

    #routine-consistency {
        background-image: url(/images/routine-consistency-mobile@2x.png);
    }
}


/* Mobile Landscape Size to Tablet Portrait */
@media only screen and (min-width: 480px) and (max-width: 767px) {

    #demo #video {
        top: 74px;
        left: 109px;

        width: 199px;
        height: 354px;
    }
}

/* Mobile Portrait Size to Mobile Landscape Size */
@media only screen and (max-width: 479px) {

    #demo #video {
        top: 74px;
        left: 31px;

        width: 199px;
        height: 354px;
    }
}



/*=============================================================================
  Animation
  ========================================================================== */

/* All Mobile Sizes */
@media only screen and (max-width: 767px) {
    #in-workout-slider {
        /* This prevents flickering in the window */
        -webkit-transform:translate3d(0,0,0);
        
        height: 431px;
        width: 260px;
        margin: 0 auto 0;
        overflow: visible;
        position: relative;
    }

    #in-workout-mask {
        overflow: hidden;
        height: 431px; 
    }

    #in-workout-slider ul {
       margin: 0;
       padding: 0;
       position: relative;
    }

    #in-workout-slider li { 
       width: 260px;
       height: 431px;
       position: absolute;
       left: 260px;
       list-style: none;
    }

    #in-workout-slider li.firstanimation {
        -webkit-animation: cycle 15s linear infinite;
        -moz-animation: cycle 15s linear infinite;        
    }

    #in-workout-slider li.secondanimation {
        -webkit-animation: cycletwo 15s linear infinite; 
        -moz-animation: cycletwo 15s linear infinite; 
    }

    #in-workout-slider li.thirdanimation {
        -webkit-animation: cyclethree 15s linear infinite;
        -moz-animation: cyclethree 15s linear infinite;
    }

    @-webkit-keyframes cycle {
        /* Start in visible position */
        0%  { left:0px; opacity:1; z-index:0; }
        
        /* Animate to left position, hide, then jump back to right position */
        27% { left:0px; opacity:1; z-index:0; } 
        33% { left:-260px; opacity:1; z-index:0; }
        34% { left:-260px; opacity:0; z-index:-1; }
        35% { left:260px; opacity:0; z-index:-1; }

        /* Animate from right position to visible position */
        92% { left:260px; opacity:1; z-index:0; }
        99%{ left:0px; opacity:1; z-index:0; }
        100%{ left:0px; opacity:1; z-index:0; }
    }

    @-webkit-keyframes cycletwo {
        /* Start in right position */
        0%  { left:260px; opacity:0; z-index:0; }
        
        /* Animate from right position to visible position */
        27% { left:260px; opacity:1; z-index:0;}
        33% { left:0px; opacity:1; z-index:0;}

        /* Animate to left position, hide, then jump back to right position */
        60% { left:0px; opacity:1; z-index:0; } 
        66% { left:-260px; opacity:1; z-index:0; }
        67% { left:-260px; opacity:0; z-index:-1; }
        68% { left:260px; opacity:0; z-index:-1; }
    }

    @-webkit-keyframes cyclethree {
        /* Start in right position */
        0%  { left:260px; opacity:0; z-index:-1; }

        /* Animate from right posiition to visible position */
        60% { left:260px; opacity:1; z-index:0; }
        66% { left:0px; opacity:1; z-index:0; }

        /* Animate to left position and hide */
        91% { left:0px; opacity:1; z-index:0; } 
        98% { left:-260px; opacity:1; z-index:0; } 
        99% { left:-260px; opacity:0; z-index:-1; } 
        100% { left:260px; opacity:0; z-index:-1; } 
    }

    @-moz-keyframes cycle {
        /* Start in visible position */
        0%  { left:0px; opacity:1; z-index:0; }
        
        /* Animate to left position, hide, then jump back to right position */
        27% { left:0px; opacity:1; z-index:0; } 
        33% { left:-260px; opacity:1; z-index:0; }
        34% { left:-260px; opacity:0; z-index:-1; }
        35% { left:260px; opacity:0; z-index:-1; }

        /* Animate from right position to visible position */
        92% { left:260px; opacity:1; z-index:0; }
        99%{ left:0px; opacity:1; z-index:0; }
        100%{ left:0px; opacity:1; z-index:0; }
    }

    @-moz-keyframes cycletwo {
        /* Start in right position */
        0%  { left:260px; opacity:0; z-index:0; }
        
        /* Animate from right position to visible position */
        27% { left:260px; opacity:1; z-index:0;}
        33% { left:0px; opacity:1; z-index:0;}

        /* Animate to left position, hide, then jump back to right position */
        60% { left:0px; opacity:1; z-index:0; } 
        66% { left:-260px; opacity:1; z-index:0; }
        67% { left:-260px; opacity:0; z-index:-1; }
        68% { left:260px; opacity:0; z-index:-1; }
    }

    @-moz-keyframes cyclethree {
        /* Start in right position */
        0%  { left:260px; opacity:0; z-index:-1; }

        /* Animate from right posiition to visible position */
        60% { left:260px; opacity:1; z-index:0; }
        66% { left:0px; opacity:1; z-index:0; }

        /* Animate to left position and hide */
        91% { left:0px; opacity:1; z-index:0; } 
        98% { left:-260px; opacity:1; z-index:0; } 
        99% { left:-260px; opacity:0; z-index:-1; } 
        100% { left:260px; opacity:0; z-index:-1; } 
    }

}