/**SPECIAL**/

@media (min-width: 515px) and (max-width: 780px) {
    .banner {

        background: url(../img/banner-header.jpg) center center !important;

        background-size: cover !important;

        height: 400px !important;
    }


    .chars {

        background-size: cover !important;
    }



    .character-portrait {

        position: absolute !important;

        right: -10px !important;

        top: 20% !important;

        display: block !important;

        z-index: 3 !important;

    }



    .character-portrait img {

        width: 70% !important;

        height: auto !important;

    }



    .char-details {

        top: 0px !important;

        display: block;

        z-index: 4 !important;

    }



    .char-nav {

        left: -20px;

        top: 0px !important;

        z-index: 4 !important;

    }



    .banner {

        height: 600px !important;

        position: relative;

        display: block !important;

    }



    .opening {

        display: block !important;

    }

}



@media (max-width: 768px) {

    .navbar-collapse {

        position: absolute !important;

        width: 100%;

        z-index: 999;

        background: #000 !important;

        top: 50px !important;

    }



    .navbar-header {

        background: #000 !important
    }



    .navbar-brand-centered img {

        position: relative !important;

        display: block !important;

        top: 20px !important;

    }

}



@media (max-width: 515px) {

    .collapse .in section {

        background: red !important;

    }



    .navbar-collapse {

        position: absolute !important;

        width: 100%;

        z-index: 999;

        background: #000 !important;

    }



    .banner {

        height: 500px !important;

    }



    .char-details {

        position: relative !important;

        top: -20px !important;

    }



    .char-details p {

        width: 100% !important;

        display: block !important;

        position: relative !important;

    }



    .char-nav {

        position: relative !important;

        top: -100px !important;

    }



    .hiddenxxs {

        display: none !important;

        visibility: hidden !important;

    }



    .visiblexxs {

        margin: 20px 0px;

        width: 100%;

        height: auto;

        display: block;

    }

}



.bgcharacter .container {

    display: block;

    position: relative;

    top: 0px;

}



@media (min-width:768px) and (max-width: 992px) {

    .banner {

        position: relative;

        height: 100vh;

        background: url(../img/banner-header.jpg) center center !important;

        background-size: cover !important;

    }


}



@media (max-width: 768px) {

    h1 {

        font-size: 30px;

    }



    .newsletter-form input[type=text] {

        font-size: 20px;

    }



    body {

        font-size: 17px !important;

    }



    .row {

        padding: 10px 30px;

    }



    p {

        text-align: justify;

    }



    ul.nav-list {

        margin: 0px;

    }



    .bgcharacter {

        background-position: top center;

    }



    .pull-right ul.nav-list,

    .pull-right ul.nav-list .scrolled-nav {

        position: relative !important;

        left: 30px !important;

    }



    .char-details p {

        width: 60% !important;

        padding-right: 30px !important;

        font-size: 14px;

    }



    .char-details h2 {

        border: 0px;

        display: inline;

    }



    .character-portrait {

        display: inline;

        position: relative;

        float: right;

        text-align: center !important;

        top: 150px;

    }



    .character-portrait img {

        display: inline;

        left: 30px;

    }



    ul.char-nav {

        display: block;

        position: relative;

        top: -200px;

        padding: 10px 0px;

        margin-left: 10px !important;

    }



    ul.char-nav li img {

        width: 40px;

        height: 40px;

    }





    div.carousel-feature {

        padding: 0px;

    }



    div.carousel-feature div.carousel-caption {

        position: absolute;

        top: 200px;

        font-size: 14px;

    }



    .bgstory {

        background: url(../img/theletter/bg-story-xs.jpg) right center no-repeat !important;

    }



    .bgcharacter {

        position: relative !important;

        top: -100px !important;

        padding: 10px !important;

    }



    .carous {

        position: relative;

         !important;

        display: block !important;

        bottom: 150px !important;

    }



    .carousel-inner {

        display: block !important;

    }



    .carousel-control {

        top: -20%;

    }



    .carousel-control .right {

        position: relative !important;

        left: 120px !important;

    }



    .banner-content {

        position: relative;

        margin-top: 50px !important;

    }



    .opening {

        width: 100% !important;

    }



    .video-banner {

        position: absolute;

        width: 150%;

        top: -200px;

        left: -50px;

        height: auto;

        z-index: 1;

        margin: 0 auto !important;

    }

}



/*MOBILE*/



@media (max-width: 500px) {

    .bgcharacter {

        position: relative !important;

        top: 0px !important;

        padding: 10px !important;

    }



    p {

        font-size: 13px;

        line-height: 2 !important;

    }



    h1 {

        font-size: 30px !important;

    }



    .banner {

        background: url(../img/banner-header.jpg);

        position: relative;

        background-position: top center;

        height: 400px;

    }



    .bgstory {

        background: url(../img/theletter/bg-story-xs.jpg) right fixed !important;

        background-size: 75% 50%;

    }



    .carousel-feature {

        height: 300px;

        position: relative;

    }



    .carousel-feature .carousel-caption {

        font-size: 13px !important;

    }



    .bgcharacter .container {

        display: block;

        position: relative;

        top: -50px;

    }



    .bgcharacter {

        background: url(../img/theletter/bg-character2.jpg) center center no-repeat #010101 !important;

        background-size: cover !important;

    }



    .bgcharacter .container {

        position: relative;

        top: 0;

    }



    .character-portrait img {

        display: block !important;

        position: relative;

        top: 30px !important;

        left: 20%;

        margin-left: 170px;

    }



    .char-details h2 {

        font-size: 20px;

    }



    .bgcharacer .row {

        padding: 0px;

        margin: 0px;

    }



    .char-nav {

        position: absolute;

        display: block;

        background: ;

        top: 100px !important;

        margin: 0px !important;

        padding: 0px;

    }



    .row {

        padding: 10px 20px !important;

    }



    .newsletter-form input[type=text] {

        margin-top: 20px !important;

        font-size: 20px !important;

        padding: 10px !im;

    }



    .carousel-caption {

        width: 100% !important;

        height: 100% !important;

        position: relative !important;

        top: -90px !important;

        text-align: left !important;

    }

}



/**SUPERLARGE**/



@media (min-width: 1700px) {

    .banner {

        background: url(../img/banner-header.jpg) center center !important;

    }



    .container {

        width: 1100px;

    }



    .bgstory .container {

        background: url(../img/theletter/bg-story-xs.jpg) center center no-repeat !important;

        background-size: cover !important;

    }



    .bgstory {

        background: #010101 !important;

        background-image: none !important;

    }



    .bgcharacter {

        background: #010101 !important;

        background-image: none !important;

    }



    .bgcharacter .container {

        background: none !important;

        background-size: cover !important;

    }



    .char-details p {

        width: 70% !important;

        height: auto !important;

        padding: 30px 0px;

    }



    .char-nav {

        top: 10px !important;

    }



    .bgfeatures {

        background: #010101 !important;

    }



    .comtainer {

        width: 50%;

    }



    .logban {

        position: relative;

        top: -150px;

    }



    .banner .navbar-brand-centered {

        left: 50%;

    }

}



@media (max-width: 400px) {

    p {

        font-size: 1.75vh !important;

        text-align: left !important;

    }



    .bgdownload {

        height: 600px !important;

    }



    .bgdownload iframe {

        padding: 20px 0px !important;

        width: 100% !important;

    }



    .char-nav {

        width: 100% !important;

    }

}



@media (max-width: 515px) {

    .character-portrait {

        background: none !important;

        background-size: cover;

        display: none !important;

    }



    .char-details {

        position: relative;

        top: -20px !important;

    }



    .char-nav {

        position: relative !important;

        top: -100px !important;

    }



    .hiddenxxs {

        display: none !important;

        visibility: hidden !important;

    }



    .visiblexxs {

        margin: 20px 0px;

        width: 100%;

        height: auto;

        display: block;

    }



    .char-details {

        position: relative !important;

        top: -20px !important;

        display: block;

    }



    .char-details p {

        width: 100% !important;

        display: block !important;

        position: relative !important;

    }



    .char-nav {

        position: relative;

         !important;

        display: block !important;

        top: -50px !important;

    }



    .char-nav li img {

        width: 50px !important;

        height: auto !important;

    }

}