#sequence {
    height: 250px;
}

.hsequence-slider {
    margin-top: 20px;
    margin-bottom: 0px;
    background: none;
    position: relative;
}

.hsequence {
    margin: 0 auto;
    width: 100%;
    overflow: hidden;
    position: relative;
    height: 250px;
}

.hsequence > .sequence-canvas {
    margin: 0;
    height: 100%;
    width: 100%;
}

.hsequence > .sequence-canvas > li {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 1;
}

/* Sequence Content.htitle */
.htitle {
    margin: 20px;
    font-family: 'EB Garamond', serif;
    letter-spacing: 1pt;
    font-size: 2em;
    line-height: 2em;
    color: #132145;
    font-weight: lighter;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: 50;
    padding: 0px 20px;
    background: rgba(255, 255, 255, 0.83);
    transition-duration: 1s;
    -ms-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -webkit-transition-duration: 1s;
    -o-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-delay: 1s;
    -ms-transition-delay: 1s;
    -moz-transition-delay: 1s;
    -webkit-transition-delay: 1s;
    -o-transition-delay: 1s;
}

.animate-in .htitle {
    opacity: 1;
}

.animate-out .htitle {
    opacity: 0;
}

/* Sequence Content.hsubhtitle */
.hsubhtitle {
    margin-bottom: 0;
    height: 150px;
    font-family: 'EB Garamond', serif;
    font-size: 2em;
    font-weight: lighter;
    color: white;
    line-height: 1.5em;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: 50;
    transition-duration: 1s;
    -ms-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -webkit-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-delay: 1s;
    -ms-transition-delay: 1s;
    -moz-transition-delay: 1s;
    -webkit-transition-delay: 1s;
    -o-transition-delay: 1s;
}

.animate-in .hsubhtitle {
    opacity: 1;
}

.animate-out .hsubhtitle {
    opacity: 0;
}

/* Sequence Content Button */
.hmore-info {
    text-decoration: underline;
    font-size: 1.2em;
    padding: 30px 0px;
    color: #FFF;
    font-family: 'Josefin Sans';
    opacity: 0;
    position: absolute;
    z-index: 50;
    transition-duration: 2s;
    -ms-transition-duration: 2s;
    -moz-transition-duration: 2s;
    -webkit-transition-duration: 2s;
    transition-delay: 1s;
    -ms-transition-delay: 1s;
    -moz-transition-delay: 1s;
    -webkit-transition-delay: 1s;
    -o-transition-delay: 1s;
}

.hmore-info:hover {
    padding: 30px 0px;
    color: #FFF;
}

.animate-in .hmore-info {
    opacity: 1;
}

.animate-out .hmore-info {
    opacity: 0;
}

/* Sequence Content Image */
.main-image {
    width: 100%;
    opacity: 0;
    position: absolute;
}

.animate-in .main-image {
    opacity: 1;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -ms-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
}

.animate-out .main-image {
    opacity: 0;
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -ms-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
}

/* Sequence Content Background */

/* ----- Start Sequence Animation ----- */

/* Sequence Content.hsubhtitle */
.hsubhtitle {
    top: 22%;
    left: 4%;
}

.animate-in .hsubhtitle {
    left: 4%;
}

.animate-out .hsubhtitle {
    right: 0%;
}

/* Sequence Content Button */
.hmore-info {
    top: 47%;
    left: 4%;
}

.animate-in .hmore-info {
    left: 4%;
}

.animate-out .hmore-info {
    right: 70%;
}

/* Sequence Content Image */
.main-image {
    top: 0;
    right: 0;
}

.animate-in .main-image {
    right: 0;
}

.animate-out .main-image {
    right: 0;
}

.htr-bg {
    top: 5%;
    left: 1.2%;
}

.animate-in .htr-bg {
    width: 10%;
}

.animate-out .htr-bg {
    width: 10%;
}

/* ----- End Sequence Animation ----- */
/* Desktop large layout */
@media (min-width: 1510px) {
    #sequence {
        height: 450px;
    }
}

/* Desktop large layout */
@media (min-width: 1310px) and (max-width: 1509px) {
    #sequence {
        height: 350px;
    }
}

/* Desktop large layout */
@media (min-width: 1210px) and (max-width: 1309px) {
    #sequence {
        height: 300px;
    }
}

/* Desktop small layout */
@media (min-width: 980px) and (max-width: 1209px) {
    #sequence {
        height: 250px;
    }
}

/* Tablet layout */
@media (min-width: 768px) and (max-width: 979px) {
    #sequence {
        height: 400px;
    }

    .animate-in .htr-bg {
        width: 25%;
    }

    .animate-out .htr-bg {
        width: 25%;
    }

    #sequence {
        height: 200px;
    }

}

/* Mobile landscape layout */
@media (min-width: 480px) and (max-width: 767px) {

    #sequence {
        height: 155px;
    }

    .sequence-slider {
        margin-top: 10px;
    }

    #hsequence {
        height: 260px;
    }

    .hsequence-slider {
        margin-left: 20px;
        margin-right: 20px;
    }

    .hsubhtitle {
        display: none;
    }

    .animate-in .hmore-info {
        left: 0;
    }

    .animate-in .htr-bg {
        width: 35%;
    }

    .animate-out .htr-bg {
        width: 35%;
    }

    .animate-in .htitle {
        left: 4%;
    }

    .htitle, .animate-in .htitle, .animate-out .htitle {
        text-align: center;
        padding-top: 0px;
    }

    .htitle {
        background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.8);
        padding: 0px 20px;
        text-shadow: 0px 0px 0px black;
        margin: 20px auto 0;

    }

    .navbar .nav > li > a {
        color: rgba(255, 255, 255, 0.55);

    }

    .lead {
        margin-top: 20px;
        padding: 0px 20px 0;
        text-align: center;
    }

}

/* Mobile portrait layout */
@media (max-width: 479px) {

    .lead {
        margin-top: 0px;
    }

    .hsequence-slider {
        display: none;
    }

    .htr-bg {
        display: none;
    }

    .lead {
        margin-top: 20px;
        padding: 0px 20px 0;
        text-align: center;
    }

    .htitle, .animate-in .htitle, .animate-out .htitle {
        text-align: center;
        padding-top: 0px;
    }

    .htitle {
        background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.8);
        padding: 0px 30px;
        margin: auto;

    }

    .hsubhtitle {
        display: none;
    }

    .animate-in .hmore-info {
        left: 0;
    }

    .hmore-info {
        top: 20px;
    }

    .span1 {
        min-height: 0px;
    }

    .nav-tabs.nav-stacked > .active > a {
        border-right: 1px solid #DDD;
    }
}