@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Oswald');


body{
    text-align: center;
    font-family: 'Oswald', sans-serif;
}

@media (min-width: 2000px){
    .container {
        max-width: 1260px;
    }
}

.to_top{
    position: fixed;
    right: 0;
    bottom: 0;
    padding-bottom: 5px;
    cursor: pointer;
    z-index: 100;
}

@media (max-width: 1260px){
    .to_top{
        display: none;
    }
}

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#59f3ff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
    padding: 18px;
    background-color: rgba(255,255,40,.8);
}
.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#59f3ff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
    padding: 18px;
    background-color: rgba(255,255,40,.8);
}

.carousel-control-prev-icon:hover, .carousel-control-next-icon:hover {
    -webkit-animation: pulse 1s infinite;
    animation: pulse 1s infinite;
}

.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 400;
    color: #efefef;
    opacity: 1;
    cursor: pointer;
}

.float-right{
    float: right;
}

.float-left{
    float: left;
}

.title_headers{
    padding-top: 70px;

}

.header_design{
	background-color: rgb(0,0,0);
	font-family: 'Oswald', sans-serif;
	font-size: 1.7em;
	line-height: .5em;
}

.navbar-nav {
    float:none;
    margin: 0 auto;
    display: block;
    text-align: center;
}

.navbar-nav > li {
    display: inline-block;
    float:none;
}


/*TOP CSS*/
.top-btns{
    width: 50%;
    max-width: 310px;
}

.abs-btn{
    position: absolute;
    float: right;
    bottom: -20px;
    right: 0;
}

.top-btns:hover{
    cursor: pointer;
    -webkit-animation: pulse .2s infinite;
    animation: pulse .2s infinite;
}

.keyart{
    background: url(../img/buy/bg.jpg) top repeat-y;
    background-size: contain;
    padding-top: 70px;
}

.top-intro{
    background: url(../img/bg7.png) top repeat-x;
    background-size: contain;
}

.top-characters{
    background: url(../img/buy/bg.jpg) top repeat-y;
    background-size: contain;
    padding-bottom: 20px;
}

.top-composers{
    background: url(../img/bg3.jpg);
    background-size: cover;
    padding-bottom: 20px;
}

.top-system{
    padding-top: 20px;
    background: url(../img/bg4.png);
    background-size: cover;
}

.top-buy{
    padding-bottom: 30px;
    background: url(../img/bg6.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: 0;
    background-position-x: center;
}


@media (max-width: 768px){
    .keyart-top{
        display: none;
    }
    .keyart-2-top{
        display: none;
    }

    .reverse{
        width: 100%;
        max-width: 400px;
    }
}

@media (min-width: 769px) and (max-width: 1200px){
    .keyart-top{
        display: none;
    }
    .keyart-sp{
        display: none;
    }

    .reverse{
    position: absolute;
    margin: auto;
    top: 120px;
    left: 0;
    right: 711px;
    text-align: center;
    width: 330px;
    }
}

@media (min-width: 1201px){
    .keyart-2-top{
        display: none;
    }
    .keyart-sp{
        display: none;
    }

    .reverse{
    position: absolute;
    margin: auto;
    top: 120px;
    left: 0;
    right: 711px;
    text-align: center;
    }
}

.reverse:hover{
    opacity: .8;
    cursor: pointer;
}


.keyart-top{
    margin: auto;
    max-width: 1960px;
    height: 1200px;
    background: url(../img/keyart.png) no-repeat center center; 
    background-size: cover;
    position: relative;

}

#buy-text-01{
    padding-top: 15%;
}


/* INTRO CSS */

.intro_h{
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    top: 20px;
    left: 0;
    right: 0;
}

.intro_body{
    background-color: rgb(0,0,0);
}

.intro_floral_body{
    background: url(../img/intro/section_flower.png);
    background-position: center;
    background-repeat: repeat-y;
    background-size: contain;
}

.inner-container{
    margin: auto;
    position: relative;
}

.intro_body header .inner-container{
    max-width: 1400px;
    margin-top: 40px;
}

.intro_header_text {
    position: absolute;
    bottom: 30%;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 9;
    overflow: hidden;
}

.intro_01{
    padding-top: -10px;
    position: relative;
}

.ostinato_text{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.flower {
    width: 100%;
    position: absolute;
    top: -2.5%;
    left: -6%;
}

.scenario{
    max-width: 1400px;
}

.scen_ss{
    padding-left: 10%;
    padding-right: 10%;
}

.scen_ss_01{
    position: absolute;
    bottom: 55%;
    left: 3%;
    right: 0;

}
.scen_ss_02{
    position: absolute;
    bottom: 22%;
    left: 3%;
    right: 0;

}

.scen_ss_03{
    position: absolute;
    bottom: 1%;
    left: 3%;
    right: 0;

}

/* INTRO CAROUSELS */

.scenario_carousel_02{
    display: none;
}

.carousels{
    margin: 10px;
}

.intro_carousel{
    max-width: 950px;
    margin: auto;
}

.carousel-caption { 
    bottom: auto; 
    left: 0;
    right: 0;
    width: 100%;
    text-align: center;
}
.carousel-inner { padding-bottom:110px; }



/*FOOTER CSS*/

.main_footer{
   background-color: rgb(0,0,0);
   padding: 15px;
   border-top: 1px solid white;
}

.main_footer img{
    margin: 10px;
    margin-bottom: 20px;
}

.main_footer p{
    color: rgb(255,255,255);
    font-family: 'Arial', sans-serif;
    font-size: .7em;
    margin: .2em;

}

.main_footer .ps_left{
    margin-right: 2px;
}


/*BUY CSS */
.buy_body{
    background-color: rgb(0, 0, 0);
}

.buy_all{
    background: url(../img/buy/bg.jpg) top repeat-y;
    background-size: contain;
}

.buy_details{
    background: url(../img/buy/details_back.png);
    background-size: cover;

}

.buy_button{
    margin-bottom: 8px;
    cursor: pointer;
}

.buy_button:hover{
    box-shadow: 0 0 12px #f0f767;
}

.buy-img{
    position: relative;
    padding-top: 20px;
}

.buy-switch{
    position: absolute;
    top: 8%;
    left: 0;
    cursor: pointer;
}

.standard-edition{
    display: none;
}


/*SYSTEM CSS*/
.system_body{
    background: url(../img/buy/bg.jpg) top repeat-y;
    background-size: contain;
}

.system-cont{
    vertical-align: middle;
}

.system-cont img{
    margin: 5px;
}

.easy-mode{
    padding: 5%;
}

.mini-ss{
    max-width: 46%;
}

.has-modal{
    cursor: pointer;
}

/*TRAILERS CSS*/
.trailer_body{
    background-color: rgb(0,0,0);
}

.bg_fill{
    background: url(../img/buy/bg.jpg) top repeat-y;
    background-size: contain;
}

.trailers-cont {
    padding-bottom: 100px;
}

.trailers-cont img:hover{
  cursor: pointer;
  opacity: .7; 
}

#trailer_iframe{
    border: 0;
}

@media (min-width: 500px){
#trailer_iframe {
        height: 513px;
}
}



/*CHARACTERS CSS*/

.toggle-btn{
    width: 50px;
    margin: 10px;
    z-index: 10;
}

.toggle-btn:hover{
    cursor: pointer;
    -webkit-animation: pulse .2s infinite;
    animation: pulse .2s infinite;
}

.characters_body{
    background: url(../img/character/bg.jpg) top repeat-y;
    background-size: contain;


}

.char-flip-btn{
    position: absolute;
    top: 80%;
    left: 65%;
    width: 25%;
    max-width: 128px;
    margin: auto;
}

.chara-set{
    display: none;
}

#char-overlay{
    background: rgba(0,0,0, .6);
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -1;

   -webkit-backface-visibility: hidden;
}

.char_details{
    background: url(../img/character/sprite_overlay.png);
    background-size: cover;
    margin: auto;
}

.char-buttons img{
        max-width: 15%;
}

.is-button:hover{
    opacity: .6;
    cursor: pointer;
}

/*ALL ANIMATION CSS */

.intro_text_01, .intro_text_02{
    animation-delay: .4s;
    animation-duration: 2s;
}

#intro_ss{
    animation-duration: 3s;
}

#intro_text, #ostinato_txt{
    animation-duration: 1.5s;
}

#ostinato_img,  #scenario_05{
    animation-duration: 3s;
}

#scenario_01{
    animation-duration: 2s;
}

#scenario_02{
    animation-delay: .3s;
}

#scenario_03{
    animation-delay: .8s;
}
#scenario_04{
    animation-delay: 1.3s;
}

.fade-slow{
    animation-duration: 1.5s !important ;
    -webkit-animation-duration: 1.5s !important ;
    -webkit-backface-visibility: hidden;
}

.fade-in-1{
     animation-duration: 1s !important ;
}

.fade-in-2{
     animation-delay: .3s;
     animation-duration: 1s !important ;
}

.fade-in-3{
     animation-delay: .6s;
     animation-duration: 1.2s !important ;
}

/*CAROUSEL CSS*/

.my-3 .carousel-inner{
    padding-bottom: 15px;
}

.my-3 .carousel-inner .carousel-item-right.active,
.my-3 .carousel-inner .carousel-item-next {
  transform: translateX(32%);
}

.my-3 .carousel-inner .carousel-item-left.active, 
.my-3 .carousel-inner .carousel-item-prev {
  transform: translateX(-32%)
}
  
.my-3 .carousel-inner .carousel-item-right,
.my-3 .carousel-inner .carousel-item-left{ 
  transform: translateX(0);
}

.my-3{
        background-color: rgb(0, 129, 186);
}

.my-3 .col-4{
    max-width: 32%;
    padding: 2px;
}

#system_carousel_2 .carousel-inner {
    padding-bottom: 20px;
}

.carousel-control-next, .carousel-control-prev {
    opacity: 1;
}

.carousel-indicators{
    bottom: -5px;
}

h6{
    text-transform: uppercase;
    background-color: #000;
}

@media (max-width: 576px){
    h6{
        font-size: .7rem;
    }
}


@media (max-width: 900px){
    .for_pc{
        display: none;
    }
}


/* MODAL CSS */

@media (min-width: 576px){
.modal-dialog {
    max-width: 930px;
    margin: 1.75rem auto;
}
}

.modal-content{
    background-color: rgba(0,0,0, .8);
    border-radius: 0;
}

.modal-body{
    padding: .5rem;
}

.close{
        font-size: 2.5rem;
}

.na{
    opacity: .4;
}

.system_top{
    cursor: pointer;
}

.characters_body *{
    -webkit-backface-visibility: hidden;
    -webkit-transform:translate3d(0,0,0);
}

.modal-backdrop{
    z-index: -1;
    width: 100%;
}