@font-face {
  font-family: 'Lovato';
  src: url("../fonts/Lovato.otf") format("opentype");
}

@font-face {
  font-family: 'Lovato-Light';
  src: url("../fonts/Lovato-Light.otf") format("opentype");
}

@font-face {
  font-family: 'Lovato-Bold';
  src: url("../fonts/Lovato-Bold.otf") format("opentype");
}

@font-face {
    font-family: 'SimHei';
    src: url ("../fonts/simhei.ttf") format("truetype");
}

* { margin: 0; padding: 0;}
body { margin: 0;  font-family:"Lovato-Bold"; height: 100% !important; overflow-x: hidden !important; }
h1 { background: #222 -webkit-gradient(linear, left top, right top, from(#fff), to(#fff), color-stop(0.5, #ffb800)) 0 0 no-repeat;
  -webkit-background-size: 100px;
  color: rgba(255, 255, 255, 0.5);
  -webkit-background-clip: text;
  -webkit-animation-name: shine;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  text-shadow: 0 0px 0px rgba(255, 255, 255, 0.9); }
h2 { font-size: 26px; color: #fff; }
h3 { font-size: 35px; color: #ffce00; }
h4 { font-size: 45px; color: #fff; }
h3:before { position: absolute; content: ''; background-image: url(../images/star.png); width: 14px; height: 14px;  margin-left: -30px;  margin-top: 15px;}
h3:after { position: absolute; content: ''; background-image: url(../images/star.png); width: 14px; height: 14px;  margin-left:15px;  margin-top: 15px;}
img.retina { max-width: 100%; }
h6 {
    font-size: 12px;
    font-weight: 400;
    font-family: 'lovato';
    padding-top: 10px;
    text-transform: initial;
}

#logo { width: 401px; position: fixed; height: 435px; z-index: 1; top: -235px; bottom: 0; left: 0; right: 0; margin: 0 auto; background-image: url(../images/Flag-BG.png); background-repeat: no-repeat; background-position: center center; }
#logo-text { width: 414px; position: relative; height: 275px; z-index: 1; top: 0px; bottom: 0; left: 0; right: 0; margin: 0 auto; background-image: url(../images/logo-text.png); background-position: -8px;
    background-repeat: no-repeat; }
#logo-s { width: 292px; position: fixed; height: 300px; z-index: 1005; top:-300px; bottom: 0; left:-18px; cursor: pointer; }
#logo-s img { width: 80%;}
.main-navigation { position: fixed; z-index: 1000; right: 0px; top: 0px;  padding-top: 20px; padding-right: 10px; width: 100%; max-width: 540px; }
nav { position: relative; float: left; width: 100%; padding-left: 126px; }
nav li { float: left;  position: relative; font-size: 20px;  color: #fff; padding: 10px;  margin-left:15px; margin-right: 15px; list-style: none; text-transform: uppercase; transition: all ease 500ms;  text-shadow: 0 0 20px rgba(53,20,52,0.5); }
nav li:hover { float: left;  position: relative; font-size: 20px;  color: #ffce00; padding: 10px;  margin-left:15px; margin-right: 15px; list-style: none; text-transform: uppercase; }
nav li.active { float: left;  position: relative; font-size: 20px;  color: #ffce00; padding: 10px;  margin-left:15px; margin-right: 15px; list-style: none; text-transform: uppercase; }
ul li.active { color: #ffce00 !important; }

.sub-navigation { position: fixed;  z-index: 1002; float: left;  top: 30px; left: 20px;  }
.sub-navigation ul { }
.sub-navigation ul li {  display: inline; float: left; margin-right: 20px; font-family:"Lovato-Bold", 'SimHei'; color: #fff; }
.sub-navigation ul li:first-child {  display: inline; float: left; margin-right: 20px; font-family:'SimHei'; color: #fff; font-weight: bold;}
.sound-navigation { width: 40px; height: 40px; margin-top: -10px; }

.fp-section { z-index: 0; }

/* loading */
/* Loading Scene */
.loading { position: fixed; width: 100%; color: #c8c9cb; top: 50px; letter-spacing: 0.2em; opacity: .5; }
.loading-scene { position: fixed;  background-color:rgba(76, 28, 76, 1); left: 0%; top: 0%; bottom: 0%; right: 0%; width: 100%; height: 100vh; background-repeat: no-repeat;  background-position: center 45%;  z-index: 1001; }
.loading-progress { margin-top:25px;  font-size: 28px;  color: #752775;  font-family: 'Lovato-Bold'; z-index: 1002;  width: 300px; float: right; }
.loading-scene .loading-progress-bar {  background-color: #fff;  z-index: 10;  height: 1px;  float: left;  position: absolute;  width:0px;  max-width: 100px;  overflow: visible !important; }
.loading-scene .loading-progress-bar-bg {  background-color: #8b8b8b; z-index: 1;  height: 1px;  position: relative;  width:100%;  max-width: 100px;  overflow: visible !important; display: none;}
.top-bar { height: 80px; position: fixed; background-color: #010001; top: 0px; z-index: 1000; width: 100%;  z-index: 1002;}
.bottom-bar { height: 80px; position: fixed; background-color: #010001; bottom: 0px; z-index: 1000; width: 100%;  z-index: 1002;}
.bottom-bar .copyright { float: left; position: relative; padding-top:32px; padding-left: 20px; font-size: 16px; color: #fff; font-family: 'Lovato';  }
.loading-scene .loading-sprite { width: 225px; height: 225px; transform: scale(1); opacity: 1;  margin-left: auto; margin-right: auto; background-image: url(../images/Loading_Final.gif); margin-top: 1%; position: relative; margin-top: 25vh;} 

/* news */
#slider { position: relative; overflow: hidden; border-radius: 4px; width: 100%; height: 100vh;  }
#slider ul { position: relative; margin: 0; padding: 0; height: 74vh;  list-style: none; overflow: hidden; display: flow-root; margin-top: -340px;  }
#slider ul li { position: relative; float: left; padding: 0; width:20%;  height: 74vh; text-align: center; opacity:0; display: none; }
#slider ul li iframe { background-color: #fff !important; border: 0px !important;   width: 80%; min-height: 610px; margin-left: 10%; margin-right: 10%; }
#slider ul li.active { position: relative; float: left; padding: 0; width: 80%; padding-left: 10%; padding-right: 10%; height: 80vh; text-align: center;  opacity: 1; display: block;}


.control { width: 80%; position: relative; padding-top: 25px;  margin-top:150px; height: 200px; z-index: 10000;}
a.control_prev, a.control_next { position: absolute; top: 50%; z-index: 999; display: block;  opacity: 1; cursor: pointer; }
a.control_prev:hover, a.control_next:hover { opacity: 1; -webkit-transition: all 100ms ease; }
a.control_prev {  background-image: url(../images/Arrow-left-new.png); width: 47px; height: 93px; border: 0px !important;  background-repeat: no-repeat;  background-position: center center; }
a.control_next {  right: 0; background-image: url(../images/Arrow-right-new.png); width: 47px; height: 93px; border: 0px !important;  background-repeat: no-repeat;  background-position: center center;  }
a.control_prev:hover { background-image: url(../images/Arrow-left-new-hover.png);}
a.control_next:hover { background-image: url(../images/Arrow-right-new-hover.png);}
.slider_option { position: relative;  margin: 10px auto;  width: 160px;  font-size: 18px; }
.section-title { position: relative; width: 100%; }
.section-title h1 { color: #fff;  padding-top: 50px; padding-bottom: 30px; }
button:focus { outline: none; }
.close-btn { color: #301c33; font-size:30px; width: 150px; cursor: pointer;  padding: 5px 25px 0px 5px; transition: all 200ms ease-in;   border-radius: 30px; background-color: #fff;   z-index: 999; position: relative;/* margin-top:14px;*/ }
.close-btn.hover {color: #301c33;  font-size: 30px;  width: 150px; cursor: pointer;  padding: 5px 25px 0px 5px;  background-color: #ffce00;  border-radius: 30px; /* margin-top:14px;*/}
/*.news .close-btn {  margin-top: 86px; }*/
.close-text { position: relative; float: right; margin-top:3px; line-height: 31px; }
.circle { width: 40px; height: 40px; background: transparent; border: 0px solid #fff; -moz-border-radius: 50%; -webkit-border-radius: 50%;  border-radius: 50%;  position: relative;  cursor: pointer;  display: inline-block; padding-top: 20px; }
.circle:after { width: 24px; height: 5px; background-color: #301c33; content: ""; left: 50%; top: 50%;  margin-left: -12px; margin-top: -2px;  position: absolute;  -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg);  -webkit-transform: rotate(-45deg);  transform: rotate(-45deg);  transition: all 200ms ease-in;   /*@include transform-origin(100%,100%);*/}
.circle.hover:after { background-color: #301c33; }
.circle:before { left: 50%; top: 50%; margin-left: -12px; margin-top:-2px; width: 24px; height: 5px;  background-color: #301c33;  content: ""; position: absolute; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);  transition: all 200ms ease-in;  /*@include transform-origin(0%,0%);*/ }
.circle.hover:before { background-color: #301c33;}



/* trailer */

.overlay-pattern { background-image: url(../images/raster.png); width: 100%; height: 110vh; position: absolute; background-repeat: repeat-x; background-position: center bottom; }
.trailer { background-color:rgba(76, 28, 76, 0.85); position: fixed; width: 80%; padding: 10%; padding-top: 3%; padding-bottom: 15%; height: 80vh; z-index: 10000; top: 0; left: 0px; display: none;}

.trailer-scenario { position: relative;padding-bottom: 50%; /* 16:9 */ padding-top: 25px; height: 0; margin-top: 25px; }
.trailer-scenario  iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height:90%;
}

/* footer */
footer { position: fixed; z-index: 999; width: 100%; height:80px; bottom: -80px; color: #fff; background-color: rgba(100,34,98,0.8); font-size: 14px; text-align: left;  font-family:"Lovato-Light"; transition: all 500ms ease-in-out; display: none;  }
footer.hide { position: fixed; z-index: 999; width: 100%; height:80px; bottom: -80px !important; color: #fff; background-color: rgba(100,34,98,0.8); font-size: 14px; text-align: left;  font-family:"Lovato-Light";  }
footer.stick { position: absolute; z-index: 999; width: 100%; height:80px; bottom: 0px !important; color: #fff; background-color: rgba(100,34,98,0.8); font-size: 14px; text-align: left;  font-family:"Lovato-Light";  }
.copyright { float: left; position: relative; padding-top:32px; padding-left: 20px; font-size: 16px; }
.download {width: 258px; height: 55px; position: absolute; left: 0px;  right: 0px;  margin: 0 auto; margin-top: 15px; background-image: url(../images/ryi.png); transition: all 150ms ease-in;  }
.download:hover {width: 258px; height: 55px; position: absolute; left: 0px;  right: 0px;  margin: 0 auto; margin-top: 15px; background-image: url(../images/ryi-hover.png);  }
.download-text { font-size: 24px; color: #fff; font-family: 'Lovato-Bold'; width: 200px; float:left; padding-top: 15px;}
.social-media { float: right; position: relative;  padding-top:57px; margin-right:6px; }
.social-media ul { }
.social-media ul li { float: left; position: relative; display:inline; margin-right:15px; cursor: pointer; }
.facebook { background-image: url(../images/fb-icon.png); width: 32px; height: 32px; transition: all 200ms ease-in; }
.facebook:hover { background-image: url(../images/fb-icon-hover.png); width: 32px; height: 32px; }
.twitter { background-image: url(../images/twitter-icon.png); width: 32px; height: 32px; transition: all 200ms ease-in; }
.twitter:hover { background-image: url(../images/twitter-icon-hover.png); width: 32px; height: 32px; }
.youtube { background-image: url(../images/youtube-icon.png); width: 32px; height: 32px; transition: all 200ms ease-in; }
.youtube:hover { background-image: url(../images/youtube-icon-hover.png); width: 32px; height: 32px; }
.social-media ul li img { width:90%; height: auto;}
.apple-icon {   transition:all 100ms ease-in;  background-image: url(../images/apple-arcade-icon.png); width: 248px; position: relative; height: 78px;}
.steam-icon {   transition:all 100ms ease-in;  background-image: url(../images/steam-icon.png); width: 248px; position: relative; height: 78px;}
.apple-icon:hover {     background-image: url(../images/apple-arcade-icon-hover.png); width: 248px; position: relative; height: 78px;}
.steam-icon:hover {     background-image: url(../images/steam-icon-hover.png); width: 248px; position: relative; height: 78px;}



.section-container { width: 100%; height: 100vh; position: absolute; }
.news { background-color: rgba(76, 28, 76, 0.85); z-index:10000; display: none; position: fixed; top: 0px; left: 0px; right: 0px; margin: 0 auto;  width: 80%;  padding-top: 3% !important;  padding: 10%; }
#features { }
.section { background-color: #130d13;}
.ribbon { background-image: url(../images/ribbon.png); width:35px; height: 42px; position: relative;  margin-bottom:40px; margin-top: -150px;}

.fullpage-wrapper { background-color:#5fd3f4; }


/* home */
.home-bg { background-image: url(../images/home-bg-latest.jpg); background-position: center top;  overflow: hidden; background-repeat: no-repeat; position: absolute; top: 0px; width: 100%; height: 110vh; z-index: 0; background-size:cover;  }
#section-home { background-image: none; height: 110vh !important; }
.play-section { position: relative; z-index: 1000; width: 1020px; padding-left: 30px; margin-top:88vh; }
.game-desc-content { color: #fff; font-size: 32px; line-height: 34px; text-transform: uppercase; }
.play { position: absolute; left:12%; z-index: 10; transition: all 100ms ease-in;   height: 65px;  width: 56px;  background-image: url(../images/play_btn.png); }
.play-text:hover .play { background-image: url(../images/play_btn_hover.png); }
.play-text { position: absolute; float: left; color: #fff;  width: 50%; margin-left: 25%;  margin-right: 25%; margin-top:-150px;  background-image: url(../images/Shadow.png); background-position: 0px 4px; background-repeat: no-repeat;   cursor:pointer; }
.play-text:hover  h1{ color:#ffce00; }
.play-text h1 { margin: 12px; transition: all 100ms ease-in;  }
.play img { }
.news-update { position: absolute; width: 176px; height: 34px; background-image: url(../images/news-btn.png); left: 21px; margin-top: -33px; z-index: 1000; transition: all 100ms ease-in;  }
.news-update:hover {  background-image: url(../images/news-btn-hover.png); }


/* feature */
.brick-wall { position: absolute; width: 100%; height: 610px; background-image: url(../images/feature-brick.png); background-position: top center;  margin-top: -150px; }
#section-feature { background-color: #b4a5a5; min-height:3198px !important; }
#section-feature .section-title { width: 100%; position: absolute;  z-index: 900;  font-size: 30px;  color: #fffbe9; background-image: url(../images/wings.png); background-repeat: no-repeat; background-position: center center;  height: 69px;  opacity: 0px;  padding-top: 70px;  margin-top:0px; }
.feature-title {  top: -370px;  }
.feat_container { position:relative; z-index: 99; max-width:860px; width: 100%;  }
.breaker { background-image: url(../images/breaker.png); width: 100%;  height: 18px;  position: relative;  float: left;  background-position: center;  background-repeat: no-repeat; margin-top: 30px; margin-bottom:78px; }

/*feature 1*/
.feat_container .part-1-a { position: relative; float: left; height: auto; width: 100%; }
.part-1-a .recruit-section { position: relative; float: left; background-image: url(../images/outer-frame-new.png); width: 100%; height: 428px; background-position: center center; background-repeat: no-repeat; margin-top: -125px; }
.recruit-section .recruit-title { position: relative; background-image: url(../images/recruit-title.png); width: 368px; height: 103px; margin-top: -40px; }
.recruit-icon-list { position: absolute; right: 0; z-index: 99;  }
.recruit-icon-list ul  { }
.recruit-icon-list ul li { margin-bottom:10px; margin-top: 10px; list-style: none;   }
.recruit-icon-list ul li.village { background-image: url(../images/icon-recruit-village.png); width: 61px; height: 60px; transition: all 200ms ease-in;  }
.recruit-icon-list ul li.village.active { background-image: url(../images/icon-recruit-village-hover.png); }
.recruit-icon-list ul li.village:hover { background-image: url(../images/icon-recruit-village-hover.png); }
.recruit-icon-list ul li.forrest { background-image: url(../images/icon-recruit-forrest.png); width: 61px; height: 60px; transition: all 200ms ease-in; }
.recruit-icon-list ul li.forrest.active { background-image: url(../images/icon-recruit-forrest-hover.png); }
.recruit-icon-list ul li.forrest:hover { background-image: url(../images/icon-recruit-forrest-hover.png); }
.recruit-icon-list ul li.mountain { background-image: url(../images/icon-recruit-mountain.png); width: 61px; height: 60px; transition: all 200ms ease-in;  }
.recruit-icon-list ul li.mountain.active { background-image: url(../images/icon-recruit-mountain-hover.png); }
.recruit-icon-list ul li.mountain:hover { background-image: url(../images/icon-recruit-mountain-hover.png); }
.recruit-icon-list ul li.city { background-image: url(../images/icon-recruit-city.png); width: 61px; height: 60px; transition: all 200ms ease-in;  }
.recruit-icon-list ul li.city.active { background-image: url(../images/icon-recruit-city-hover.png); }
.recruit-icon-list ul li.city:hover { background-image: url(../images/icon-recruit-city-hover.png); }

.recruit-bg-layout { width: 91%; margin-left: 4%;  margin-right: 4%; height: 260px;  background-color: #2c152b;  z-index: -1;  position: absolute; margin-top: -100px; display:none; }
.village { background-image: url(../images/recruit-background-village.jpg); }
.forrest { background-image: url(../images/recruit-background-forrest.jpg); }
.mountain { background-image: url(../images/recruit-background-mountain.jpg); }
.city { background-image: url(../images/recruit-background-city.jpg); }

.recruit-bg-layout.active { display: block;  }

.recruit-container-content { position: absolute; z-index: 0; width: 100%;  height: 334px; transition: all 200ms ease-in; opacity: 0; display: none;  }
.recruit-container-content.show { display: block; opacity: 1;  }
.recruit-container-content .row-1 { position: relative; float: left; width: 100%; height:260px; margin-top: -40px;}
.recruit-container-content .row-2 { position: relative; float: left; width: 100%; height:120px; }
.recruit-container-content .row-1 .col-1 { width: 100%; height: auto; position: relative;}
.recruit-container-content .row-2 .col-4 { width: 30%; padding-left: 10%;  margin-top: 10px;  position: relative;  float: left;  text-align: left; color: #cfd1d2;  }
.recruit-container-content .row-2 .col-6 { width: 60%; position: relative;  float: left;  text-align: left; color: #cfd1d2;  }
.class-type ul { }
.class-type ul li { display: inline; margin-left: -5px; width: 110px;  height: 110px;  position: relative;  float: left;}
.class-type ul .warrior-thumb { background-image: url(../images/recruit-warrior-type.png); }
.class-type ul .warrior-thumb:hover { background-image: url(../images/recruit-warrior-type-hover.png); }
.class-type ul .archer-thumb { background-image: url(../images/recruit-archer-type.png); }
.class-type ul .archer-thumb:hover { background-image: url(../images/recruit-archer-type-hover.png); }
.class-type ul .magician-thumb { background-image: url(../images/recruit-magician-type.png); }
.class-type ul .magician-thumb:hover { background-image: url(../images/recruit-magician-type-hover.png); }
.class-type ul .thief-thumb { background-image: url(../images/recruit-thief-type.png); }
.class-type ul .thief-thumb:hover { background-image: url(../images/recruit-thief-type-hover.png); }
.class-type ul .null-thumb { background-image: url(../images/recruit-null-type.png); }

.class-type ul .warrior-thumb.active { background-image: url(../images/recruit-warrior-type-hover.png); }
.class-type ul .archer-thumb.active { background-image: url(../images/recruit-archer-type-hover.png); }
.class-type ul .magician-thumb.active { background-image: url(../images/recruit-magician-type-hover.png); }
.class-type ul .thief-thumb.active { background-image: url(../images/recruit-thief-type-hover.png); }

.job { position: absolute; width: 100%; opacity: 0; transition: all 300ms ease-in;  }
.job.active { display: block;  opacity: 1;  }

.chatbox { background-image: url(../images/chatbox.png); width: 170px; padding-left: 15px; padding-right: 15px; height: 104px; position: absolute; top: 0px; right: 150px; z-index: 1; opacity: 0; transition: all 500ms ease-in-out; text-align: center; padding-top: 40px; margin-top: 30px; color: #5f225e; transform-origin: 0% 80%; }
.chatbox-small { background-image: url(../images/chatbox-2.png); width: 108px; height: 68px; position: absolute; top: 0px; right:220px; z-index: 1; opacity: 0; transition: all 500ms ease-in-out; text-align: center; padding-top:30px; margin-top:70px; color: #5f225e; transform-origin: 0% 80%; }
.job.warrior.active .chatbox {  opacity: 1; -webkit-animation: bubbleboxappear 10s infinite; padding-top: 50px; height: 94px; }
.job.archer.active .chatbox {  opacity: 1; -webkit-animation: bubbleboxappear 10s infinite; }
.job.magician.active .chatbox {  opacity: 1; -webkit-animation: bubbleboxappear 10s infinite; }
.job.thief.active .chatbox {  opacity: 1; -webkit-animation: bubbleboxappear 10s infinite; }
.job.warrior.active .chatbox-small {  opacity: 1; -webkit-animation: bubbleboxappear 10s infinite; }
.job.archer.active .chatbox-small {  opacity: 1; -webkit-animation: bubbleboxappear 10s infinite; }
.job.magician.active .chatbox-small {  opacity: 1; -webkit-animation: bubbleboxappear 10s infinite; }
.job.thief.active .chatbox-small {  opacity: 1; -webkit-animation: bubbleboxappear 10s infinite; }


.class-description { width: 300px; height: 75px; position: absolute; margin-left: 85px; margin-top:50px;}
.icon { position: relative; float: left; width: 60px; }
.class-text { position: relative; float: left; text-align: left; margin-left: 15px; color: #cfd1d2;  }
.class-text .small { font-size: 18px; font-family: 'Lovato';  margin-bottom: 2px; }
.class-text .small:first-child { padding-left: 20px; }
.class-text .small:first-child::before { margin-left: -20px; margin-top: 3px; position: absolute; content: ''; width: 12px; height: 16px; background-image: url(../images/rarity.png); }
.class-text .big { font-size: 30px; line-height: 25px; }
.class-job { position: relative; margin-top: 45px; z-index: -1; }

.recruit-location .title { font-size: 30px;  padding-left: 30px; }
.recruit-location .title.village-icon:before { position: absolute; content: ''; width: 23px; height: 22px; background-image: url(../images/icon-village.png);  margin-top: 9px; margin-left: -30px; }
.recruit-location .title.forrest-icon:before { position: absolute; content: ''; width: 23px; height: 22px; background-image: url(../images/icon-forrest.png);  margin-top: 9px; margin-left: -30px; }
.recruit-location .title.mountain-icon:before { position: absolute; content: ''; width: 23px; height: 22px; background-image: url(../images/icon-mountain.png);  margin-top: 9px; margin-left: -30px; }
.recruit-location .title.city-icon:before { position: absolute; content: ''; width: 23px; height: 22px; background-image: url(../images/icon-city.png);  margin-top: 9px; margin-left: -30px; }
.recruit-location .text { font-size: 12px; line-height: 18px; font-family: 'Lovato'; margin-top: 5px; }

/*feature 2*/
.feat_container .part-1-b { position: relative; float: left; height: auto; width: 100%; }
.part-1-b .training-section { position: relative; float: left; background-image: url(../images/outer-frame-new.png); width: 100%; height: 428px; background-position: center center; background-repeat: no-repeat; }
.training-section .training-title { position: relative; background-image: url(../images/training-title.png); width: 368px; height: 103px; margin-top: -40px; }
.training-icon-list { position: absolute; right: 0; z-index: 99;  }
.training-icon-list ul  { }
.training-icon-list ul li { margin-bottom:10px; margin-top: 10px; list-style: none;   }
.training-icon-list ul li.gym { background-image: url(../images/icon-training-gym.png); width: 61px; height: 60px; transition: all 200ms ease-in;  }
.training-icon-list ul li.gym.active { background-image: url(../images/icon-training-gym-hover.png); }
.training-icon-list ul li.gym:hover { background-image: url(../images/icon-training-gym-hover.png); }
.training-icon-list ul li.dance { background-image: url(../images/icon-training-dance.png); width: 61px; height: 60px; transition: all 200ms ease-in; }
.training-icon-list ul li.dance.active { background-image: url(../images/icon-training-dance-hover.png); }
.training-icon-list ul li.dance:hover { background-image: url(../images/icon-training-dance-hover.png); }
.training-icon-list ul li.read { background-image: url(../images/icon-training-read.png); width: 61px; height: 60px; transition: all 200ms ease-in;  }
.training-icon-list ul li.read.active { background-image: url(../images/icon-training-read-hover.png); }
.training-icon-list ul li.read:hover { background-image: url(../images/icon-training-read-hover.png); }
.training-icon-list ul li.travel { background-image: url(../images/icon-training-travel.png); width: 61px; height: 60px; transition: all 200ms ease-in;  }
.training-icon-list ul li.travel.active { background-image: url(../images/icon-training-travel-hover.png); }
.training-icon-list ul li.travel:hover { background-image: url(../images/icon-training-travel-hover.png); }


.training-bg-layout { width: 91%; margin-left: 4%;  margin-right: 4%; height: 260px;  background-color: #2c152b;  z-index: -1;  position: absolute; margin-top: 25px; display:none; }
.gym-bg { background-image: url(../images/training-background-gym.jpg); }
.dance-bg { background-image: url(../images/training-background-travel.jpg); }
.read-bg { background-image: url(../images/training-background-read.jpg); }
.travel-bg { background-image: url(../images/training-background-travel.jpg); }

.training-bg-layout.active { display: block;  }


.training-container-content { position: absolute; z-index: 0; width: 100%;  height: 334px; transition: all 200ms ease-in; opacity: 0; display: none;  }
.training-container-content.show { display: block; opacity: 1;  }
.training-container-content .row-1 { position: relative; float: left; width: 100%; height:260px; margin-top: -40px;}
.training-container-content .row-2 { position: relative; float: left; width: 100%; height:120px; }
.training-container-content .row-1 .col-1 { width: 100%; height: auto; position: relative;}
.training-container-content .row-2 .col-4 { width: 30%; padding-left: 10%;  margin-top: 10px;  position: relative;  float: left;  text-align: left; color: #cfd1d2;  }
.training-container-content .row-2 .col-6 { width: 60%; position: relative;  float: left;  text-align: left; color: #cfd1d2;  }

.training-location .title { font-size: 30px;  padding-left: 30px; }
.training-location .title.gym-icon:before { position: absolute; content: ''; width: 23px; height: 22px; background-image: url(../images/icon-gym.png);  margin-top: 9px; margin-left: -30px; }
.training-location .title.read-icon:before { position: absolute; content: ''; width: 23px; height: 22px; background-image: url(../images/icon-read.png);  margin-top: 9px; margin-left: -30px; }
.training-location .title.dance-icon:before { position: absolute; content: ''; width: 23px; height: 22px; background-image: url(../images/icon-dance.png);  margin-top: 9px; margin-left: -30px; }
.training-location .title.travel-icon:before { position: absolute; content: ''; width: 23px; height: 22px; background-image: url(../images/icon-travel.png);  margin-top: 9px; margin-left: -30px; }
.training-location .text { font-size: 12px; line-height: 18px; font-family: 'Lovato'; margin-top: 5px; }

.training-container-content .class-job { position: relative; margin-top: 35px; z-index: -1; }
.training-container-content .class-job.small { position: relative; margin-top: 5px; z-index: -1; }



/*#section-feature .feat_container .part-1 { position: relative; width: 100%; height: 750px; float: left; margin-top: -280px; margin-bottom: 100px; background-image: url(../images/brick-pattern.png); background-position: -78px;  }
.recruit-section { position: absolute; margin: 0 auto;  left: -50%; right: 0; top: 60px; bottom: 0; width: 482px;  height: 637px; background-image: url(../images/recruit_banner_2.png);  }
.recruitment-bg { background-image: url(../images/recruitment-bg.png); width: 388px; height: 292px; position: relative; margin-right: 20px; margin-top: 170px; transition: all 300ms ease-in-out;  }
.class-container { width: 380px; height: 190px;  position: relative; transition: all 200ms ease-in; background-image: url(../images/recruitment-melee.png); background-position: 0px 10px;  background-repeat: no-repeat;  }

.recruitment-character-container { transition: 0.5s all ease-in;  width: 380px; height: 230px; background-position: center; background-repeat:no-repeat; transform-origin: bottom center; position: relative;}
.recruitment-archer { background-image: url(../images/Archer-Recruitment.png);   }
.recruitment-warrior { background-image: url(../images/Warrior-Recruitment.png);   }
.recruitment-magician { background-image: url(../images/Magician-Recruitment.png);   }
.recruitment-thief { background-image: url(../images/Thief-Recruitment.png);   }

.blink-s { background-image: url(../images/blink-s.png); width: 70px; height: 50px; position: absolute; margin-left: -5px; z-index: 100; opacity: 0;  }
.blink-s.show { opacity: 1; }
.melee-bg { background-image: url(../images/recruitment-melee.png);  }
.range-bg { background-image: url(../images/recruitment-range.png); }
.magic-bg { background-image: url(../images/recruitment-magic.png); }
.stealth-bg { background-image: url(../images/recruitment-stealth.png); }
.stat-bar { width: 100%; margin-left: 10px; margin-top: 35px;  position: absolute;  }
.stat-bar ul li { transform: scale(1); transition: all 200ms ease-in; }
.stat-bar .focus { transform: scale(1); }

.recruit-section ul { margin-right: 16px; margin-top:0px; }
.recruit-section ul li { display: inline-block; width: 18%; cursor: pointer; }
.recruitment-range { background-image: url(../images/recruit-icon-range.png); min-width: 94px; height: 134px; background-position: center center;  background-repeat: no-repeat; transition: all 300ms ease-in-out;  background-size: 75%;}
.recruitment-range:hover { background-image: url(../images/recruit-icon-range-hover.png); min-width: 94px; height: 134px; background-position: center center;  background-repeat: no-repeat; background-size: 90%; }
.recruitment-range.active { background-image: url(../images/recruit-icon-range-hover.png); min-width: 94px; height: 134px; background-position: center center;  background-repeat: no-repeat; background-size: 90%; }
.recruitment-melee { background-image: url(../images/recruit-icon-melee.png); min-width: 94px; height: 134px; background-position: center center;  background-repeat: no-repeat; transition: all 300ms ease-in-out; background-size: 75%;}
.recruitment-melee:hover { background-image: url(../images/recruit-icon-melee-hover.png); min-width: 94px; height: 134px; background-position: center center;  background-repeat: no-repeat; background-size: 90%;}
.recruitment-melee.active { background-image: url(../images/recruit-icon-melee-hover.png); min-width: 94px; height: 134px; background-position: center center;  background-repeat: no-repeat; background-size: 90%;}
.recruitment-magic { background-image: url(../images/recruit-icon-magic.png); min-width: 94px; height: 134px; background-position: center center;  background-repeat: no-repeat; transition: all 300ms ease-in-out; background-size: 75%;}
.recruitment-magic:hover { background-image: url(../images/recruit-icon-magic-hover.png); min-width: 94px; height: 134px; background-position: center center;  background-repeat: no-repeat; background-size: 90%;}
.recruitment-magic.active { background-image: url(../images/recruit-icon-magic-hover.png); min-width: 94px; height: 134px; background-position: center center;  background-repeat: no-repeat; background-size: 90%;}
.recruitment-stealth { background-image: url(../images/recruit-icon-stealth.png); min-width: 94px; height: 134px; background-position: center center;  background-repeat: no-repeat; transition: all 300ms ease-in-out; background-size: 75%;}
.recruitment-stealth:hover { background-image: url(../images/recruit-icon-stealth-hover.png); min-width: 94px; height: 134px; background-position: center center;  background-repeat: no-repeat; background-size: 90%;}
.recruitment-stealth.active { background-image: url(../images/recruit-icon-stealth-hover.png); min-width: 94px; height: 134px; background-position: center center;  background-repeat: no-repeat; background-size: 90%;}


.add { height: 70px; }
.training-section { position: absolute; margin: 0 auto;  left: 50%; right: 0; top: 0px; bottom: 0;  width: 532px;  height: 637px; background-image: url(../images/training_banner_2.png);  }
.training-section ul { margin-right: 35px; margin-left: 20px; transform: scale(0.9); margin-top:0px;}
.training-section ul li { display: inline-block; width: 18%; cursor: pointer; }
.training-rest { background-image: url(../images/training_rest.png); min-width: 90px; height: 109px; background-position: center center;  background-repeat: no-repeat; transition: all 300ms ease-in-out; }
.training-rest:hover { background-image: url(../images/training_rest_hover.png); min-width: 90px; height: 109px; background-position: center center;  background-repeat: no-repeat; }
.training-rest.active { background-image: url(../images/training_rest_hover.png); min-width: 90px; height: 109px; background-position: center center;  background-repeat: no-repeat; }
.training-read { background-image: url(../images/training_read.png); min-width: 90px; height: 109px; background-position: center center;  background-repeat: no-repeat; transition: all 300ms ease-in-out;}
.training-read:hover { background-image: url(../images/training_read_hover.png); min-width: 90px; height: 109px; background-position: center center;  background-repeat: no-repeat; }
.training-read.active { background-image: url(../images/training_read_hover.png); min-width: 90px; height: 109px; background-position: center center;  background-repeat: no-repeat; }
.training-gym { background-image: url(../images/training_gym.png); min-width: 90px; height: 109px; background-position: center center;  background-repeat: no-repeat; transition: all 300ms ease-in-out;}
.training-gym:hover { background-image: url(../images/training_gym_hover.png); min-width: 90px; height: 109px; background-position: center center;  background-repeat: no-repeat; }
.training-gym.active { background-image: url(../images/training_gym_hover.png); min-width: 90px; height: 109px; background-position: center center;  background-repeat: no-repeat; }
.training-dance { background-image: url(../images/training_dance.png); min-width: 90px; height: 109px; background-position: center center;  background-repeat: no-repeat; transition: all 300ms ease-in-out;}
.training-dance:hover { background-image: url(../images/training_dance_hover.png); min-width: 90px; height: 109px; background-position: center center;  background-repeat: no-repeat; }
.training-dance.active { background-image: url(../images/training_dance_hover.png); min-width: 90px; height: 109px; background-position: center center;  background-repeat: no-repeat; }
.training-swim { background-image: url(../images/training_swim.png); min-width: 90px; height: 109px; background-position: center center;  background-repeat: no-repeat; transition: all 300ms ease-in-out;}
.training-swim:hover { background-image: url(../images/training_swim_hover.png); min-width: 90px; height: 109px; background-position: center center;  background-repeat: no-repeat; }
.training-swim.active { background-image: url(../images/training_swim_hover.png); min-width: 90px; height: 109px; background-position: center center;  background-repeat: no-repeat; }
.add .active { background-image: url(../images/add.png); width: 70px; height: 100px; background-repeat: no-repeat; background-position: 50px 10px;}

.add li .tooltip-bg { background-image: url(../images/tooltip-bg.png); width: 272px; height: 80px; margin-left: -100px; margin-top: -100px; color: #FFCC00; position: absolute; padding-top: 36px; font-size: 26px; opacity: 0; transition: all 300ms ease-in; z-index: 10; }
.add .str:hover .tooltip-bg { opacity: 1; margin-top: -120px;  }
.add .vit:hover .tooltip-bg { opacity: 1; margin-top: -120px; }
.add .int:hover .tooltip-bg { opacity: 1; margin-top: -120px; }
.add .agi:hover .tooltip-bg { opacity: 1; margin-top: -120px; }

.add ul { margin-top: 0px;  }
.add ul li { margin-top: 0px; width: 70px; height: 100px;  }

.training-character-container { transition: 0.5s all ease-in; width: 440px; height: 235px;   transform-origin: bottom center;  margin-left: -17px; margin-top: 180px;}

.training-resting { background-image: url(../images/training_read_anim.png); }
.training-reading { background-image: url(../images/training_read_anim.png); }
.training-gyming { background-image: url(../images/training_gym_anim.png); }
.training-dancing { background-image: url(../images/training_travel_anim.png); }
.training-swimming { background-image: url(../images/training_swim_anim.png); }*/
    
    
.feature-section-1 {  width: 100%;  position:relative; text-align: left; color: #fff; }
.feature-section-1  h1 { font-size: 46px; padding-left: 40px; line-height: 50px; }
.feature-section-1  p { font-size: 16px; line-height:24px;  padding-left: 40px; font-family: 'Lovato'; }

/*feature 3*/
.part-2-fw-brick {     width: 100%; position: absolute; height: 2950px;  margin-top: 220px; background-image: url(../images/brick-pattern.png);}
#section-feature .feat_container .part-2 { position: relative; width: 100%;  height: auto;  float: left;  }
.battle-section {  position: relative; z-index: 0; float: left; background-image: url(../images/outer-frame-new-clean.png); width: 100%; height: 428px; background-position: center center; background-repeat: no-repeat; margin-bottom:53px;  }
.battle-section .battle-title { position: relative; background-image: url(../images/battle-title.png); width: 368px; height: 103px; margin-top: -40px; }
.battle-list { width: 100%; position: relative; float: left; height: 149px; margin-top: 265px; }
.b-l-1 { background-image: url(../images/knight-archer-team.png); width: 229px; height: 149px; display: inline-block; cursor: pointer;}
.b-l-2 { background-image: url(../images/archer-wizard-team.png); width: 229px; height: 149px; display: inline-block;  cursor: pointer;}
.b-l-1:hover { background-image: url(../images/knight-archer-team-active.png); width: 229px; height: 149px; display: inline-block;}
.b-l-2:hover { background-image: url(../images/archer-wizard-team-active.png); width: 229px; height: 149px; display: inline-block; }
.b-l-1.active { background-image: url(../images/knight-archer-team-active.png); width: 229px; height: 149px; display: inline-block;}
.b-l-2.active { background-image: url(../images/archer-wizard-team-active.png); width: 229px; height: 149px; display: inline-block; }
.battle-sword { position: relative; background-image: url(../images/battleSword.png); width: 78px; height: 78px; margin-top: -70px; margin-left: -238px;  }
.bang-one { position: absolute; background-image: url(../images/bang-ani.png); width: 220px; height: 220px; margin-top: 120px; margin-left: -120px; z-index: 999; }
.bang-two { position: absolute; background-image: url(../images/bang-ani.png); width: 220px;  height: 220px;  right: -90px;  z-index:-3; margin-top: -80px;}
.feature-section-2 {  width: 100%;  position: relative; text-align: left;  color: #fff; float: left;  }
.feature-section-2  h1 { font-size: 48px; line-height: 56px; width: 43%; padding-left: 7%; float: left; }
.feature-section-2  p { font-size: 16px; line-height: 32px; font-family: 'Lovato'; width: 45%; padding-right:5%; float: right; padding-top: 40px;  }


.battle-scenario { position: absolute; z-index: -2; width: 772px; height: 378px; overflow: hidden; margin-left: 41px; margin-top:22px; }
.battle-scenario video { width: 774px; margin-top: -1px; } 
.defeat {  opacity: 1; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: 0 auto; }
.victory {  opacity: 1; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: 0 auto; }


/*feature 4*/
#section-feature .feat_container .part-3 { position: relative; width: 100%;  height: auto;  float: left;   }
#section-feature .feat_container .part-3 ul { width: 100%; position: relative; margin-top:52px; }
#section-feature .feat_container .part-3 ul li { position: relative; display: inline; }
#section-feature .feat_container .part-3 .video { background-image: url(../images/outer-frame-new-clean.png); width: 100%; height: 428px; background-position: center center; background-repeat: no-repeat; margin-bottom:53px; position: relative; float: left; }
.sword-movement { width: 180px; height: 240px; position: absolute; background-image: url(../images/Sword.png); margin-top: 220px; margin-left: -40px; z-index: 100; }
.spark { background-image: url(../images/spark.png); width: 249px; height: 96px; position: absolute; margin-left: -70px;  margin-top: 320px;}
.thalia {     position: absolute;  max-width: 490px; bottom: -100px; right: -190px;}
.feature-section-3 { width: 45%; position: relative;  float: left; text-align: left; color: #fff; padding-left: 7%; }
.feature-section-3  h1 { font-size: 48px; line-height: 56px; float: left; text-transform: uppercase; margin-top: 0px;  }
.feature-section-3  p { font-size: 16px; line-height: 30px; font-family: 'Lovato'; float: left; }

.turntide-scenario { position: absolute; z-index: -2; width: 772px; height: 378px; overflow: hidden; margin-left: 41px; margin-top:22px; }
.turn { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: 0 auto; }

/* Class */
#section-class { background-image: url(../images/class-bg-top.jpg);background-position: top center; background-repeat: no-repeat;  background-color: #4c1c4c; height: 1851px !important; overflow: hidden; transition: all 100ms ease-in;}
#section-class.showshort { background-color: #4c1c4c; height: 2810px  !important; overflow: hidden;}
#section-class.show { background-color: #4c1c4c; height: 3310px  !important; overflow: hidden;}
.class_feat_container { position:relative; z-index: 99; width: 100%;  }

.feature-section-4 { width: 40%; position: relative; float: left; text-align: left; color: #fffbe9; margin-top: 47px; padding-left: 7%; }
.feature-section-4  h1 { font-size: 48px; line-height: 56px; float: left; text-transform: uppercase; margin-top: 0px;  width: 100%; margin-bottom: 32px; }
.feature-section-4  p:first-child { font-size: 16px; line-height:24px; text-transform: uppercase; font-family: 'Lovato-Bold'; float: left;  width: 100%; }
.feature-section-4  p { font-size: 16px; line-height: 30px; font-family: 'Lovato'; float: left;  }
button {z-index: 10; position: relative; }

#section-class .class_feat_container .part-1 { position: relative; width: 100%; max-width: 880px;  height: 1030px; }
.card-section { width: 50%; height: 750px; position: relative; float: right; top: 60px; }
.card1 { width: 303px; height: 461px;  background-image: url(../images/Card-1.png); -webkit-transform: translatez(-50px); position: absolute;  right: 140px;  }
.card1-shadow { width: 338px; height: 475px;  background-image: url(../images/Card-1-shadow.png); -webkit-transform: translatez(-50px); position: absolute; right: -60px; top: 275px;}
.card2 { width: 338px; height: 475px;  background-image: url(../images/Card-2.png); -webkit-transform: translatez(-50px);  position: absolute; right: -70px; top: 273px; }
.card3 { width: 337px; height: 61px;  background-image: url(../images/Card-3.png); -webkit-transform: translatez(-50px); transform: translatez(-50px); position: absolute; right: 30px; top: 700px; z-index: 10; }
@keyframes fade {  from { opacity: 1.0; }  50% { opacity: 0.1; }  to { opacity: 1.0; } }                                                                                                                                   @-webkit-keyframes fade {  from { opacity: 1.0; }   50% { opacity: 0.1; }   to { opacity: 1.0; } }
.blink { background-image: url(../images/blink.png); width: 101px; height: 101px; }
.b1 {  position: absolute; right: 50px; top: 240px;  z-index: 10;  animation:fade 1400ms infinite; -webkit-animation:fade 1400ms infinite;  }
.b2 {  position: absolute; right: 30px; top: 450px;  z-index: 10;  animation:fade 1000ms infinite; -webkit-animation:fade 1000ms infinite;  }
.b3 {  position: absolute; left: -20px; top: 250px;  z-index: 10;  animation:fade 1100ms infinite; -webkit-animation:fade 1100ms infinite;  }
.b4 { width:50px; height: 50px; background-size: 100%; position: absolute; left: 120px; top: 460px;  z-index: 10;  animation:fade 1500ms infinite; -webkit-animation:fade 1500ms infinite;  }
.b5 { width:50px; height: 50px; background-size: 100%; position: absolute; right: 110px; top: 50px; z-index: 10;  animation:fade 1800ms infinite; -webkit-animation:fade 1800ms infinite;  }

#section-class .class_feat_container .part-2 { position: relative; width: 100%;  float: left;  min-height: 161px; background-size: 100%;  }
.class-icon { position: absolute;     left: -60px;  top: 320px; background-image: url(../images/Knight_Character.png); width: 460px; height: 530px; }


.fp-slides {
    z-index: 1;
    height: 100%;
    padding-left: 10%;
    min-width: 880px;
    overflow: hidden;
    position: relative;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    padding-right: 10%;
}
#section-class .fp-slidesNav.top { top: 955px;  z-index: 100; }
.bgm { position: absolute; width: 100%; background-image: url(../images/desc-bg.png); height: 271px; background-position: center; background-repeat: no-repeat; margin-top: -55px; }
.class-container {     position: relative; max-width: 1000px;  background-image: url(../images/class-advancement-bg.png); height: auto;  min-height: 1169px; padding: 100px; padding-top: 50px; }
.class-container.clean { background-image: url(../images/class-advancement-bg-short.png); min-height: 654px; padding: 100px; padding-top: 50px; }
.class-container.short {     position: relative; max-width: 1000px;  background-image: url(../images/class-advancement-bg-short.png); height: auto;  min-height: 654px; padding: 100px; padding-top: 50px; }


#section-class .fp-slidesNav ul { width: 1080px; }
#section-class .fp-slidesNav ul li { width: 18%;  }
#section-class .fp-slidesNav ul li a span { border-radius:0;  position: absolute; background:none; left: 0; margin: 0px !important;  transition: all 300ms ease-in-out; }
#section-class .fp-slidesNav ul li:first-child a span { background-image: url(../images/Melee-Icon.png) !important; width: 100%  !important; height: 179px  !important; background-position: center center; background-repeat: no-repeat;  }
#section-class .fp-slidesNav ul li:first-child a span:hover { background-image: url(../images/Melee-Icon-Hover.png) !important; border-radius: 0% !important; margin: 0px !important; opacity:1;  }
#section-class .fp-slidesNav ul li:first-child a.active span { background-image: url(../images/Melee-Icon-Hover.png) !important; border-radius: 0% !important; margin: 0px !important; opacity:1;  }
#section-class .fp-slidesNav ul li:nth-child(2) a span { background-image: url(../images/Range-Icon.png) !important; width: 100%  !important; height: 179px  !important; background-position: center center; background-repeat: no-repeat;   }
#section-class .fp-slidesNav ul li:nth-child(2) a span:hover { background-image: url(../images/Range-Icon-Hover.png) !important; border-radius: 0% !important; margin: 0px !important; opacity:1;  }
#section-class .fp-slidesNav ul li:nth-child(2) a.active span { background-image: url(../images/Range-Icon-Hover.png) !important; border-radius: 0% !important; margin: 0px !important; opacity:1;  }
#section-class .fp-slidesNav ul li:nth-child(3) a span { background-image: url(../images/Magic-Icon.png) !important; width: 100%  !important; height: 179px  !important; background-position: center center; background-repeat: no-repeat;   }
#section-class .fp-slidesNav ul li:nth-child(3) a span:hover { background-image: url(../images/Magic-Icon-Hover.png) !important; border-radius: 0% !important; margin: 0px !important; opacity:1;  }
#section-class .fp-slidesNav ul li:nth-child(3) a.active span { background-image: url(../images/Magic-Icon-Hover.png) !important; border-radius: 0% !important; margin: 0px !important; opacity:1;  }
#section-class .fp-slidesNav ul li:last-child span { background-image: url(../images/Stealth-Icon.png) !important; width: 100%  !important; height: 179px  !important; background-position: center center; background-repeat: no-repeat;   }
#section-class .fp-slidesNav ul li:last-child a span:hover { background-image: url(../images/Stealth-Icon-Hover.png) !important; border-radius: 0% !important; margin: 0px !important; opacity:1;  }
#section-class .fp-slidesNav ul li:last-child a.active span { background-image: url(../images/Stealth-Icon-Hover.png) !important; border-radius: 0% !important; margin: 0px !important; opacity:1;  }


#section-class .desc-text { 
    width: 100%;
    background-image: url(../images/desc-bg.png);
    height: 271px;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 40px;
}
#section-class .desc-text p { color: #fff;  font-size: 16px;  line-height: 30px;  font-family: 'Lovato';  letter-spacing: 0.8px;  max-width: 750px; width: 100%;  padding-top: 100px; }


#section-class .main-type { position: relative;  height: 380px;  padding-bottom: 50px;  padding-left: 10%;  padding-right: 10%; min-width: 880px; padding-top:50px; z-index: 0; }
#section-class .main-type .half { width: 50%; position: relative; float: left; color: #fff;  }
.placeholder { background-image: url(../images/placeholder.png); width: 195px;  height: 72px;  position: relative;  margin-left: -40px;  margin-top: -60px;  z-index: -1;}
#section-class .main-type .half  h1 { font-size: 48px; line-height: 65px;  text-transform: uppercase; margin-top: 90px; margin-bottom: 20px; width: 100%; text-align: left;} 
#section-class .main-type .half  p { font-size: 16px; line-height: 30px; margin-bottom: 10px; font-family: 'Lovato'; float: left;  width: 70%;  text-align: left; padding-right: 40%; }
#section-class .main-type .half .show-more { transition: all 100ms ease-in;  position: absolute; float: left; margin-top: 20px; color:#301c33;  background-color:#fff; padding:15px 69px 17px 30px;  border-radius: 30px; cursor: pointer; }
#section-class .main-type .half .show-more:hover { color: #301c33; position: absolute; float: left; margin-top: 20px;  background-color: #ffce00; padding:15px 69px 17px 30px;  border-radius: 30px; cursor: pointer; }
#section-class .main-type .half .show-more:hover:after {  position: absolute; content: ''; background-image: url(../images/arrow-down-hover.png); width: 23px; height: 11px;  margin-top: 5px; margin-left: 15px;  } 
#section-class .sub-type-1 { width: 50%; position: relative;  float: left;     margin-top: 30px; min-height: 590px; }
#section-class .main-type .half .show-more:after {  position: absolute; content: ''; background-image: url(../images/arrow-down.png); width: 23px; height: 11px;  margin-top: 5px; margin-left: 15px;  } 
#section-class .sub-type-1 { width: 50%; position: relative;  float: left;     margin-top: 30px; min-height: 590px; }
#section-class .sub-type-1 .half { width: 100%%; position: relative; color: #fff;  }
#section-class .sub-type-1 .half h1 { padding-top: 20px; font-size: 48px;     margin-bottom: 10px; }
#section-class .sub-type-1 .half p { font-size:16px; line-height: 30px; font-weight: 400; font-family: 'Lovato'; max-width: 70%; }
#section-class .bottom-type { width: 100%; position: relative; float:left; height: 380px; margin-top: 50px;}

#section-class .bottom-type .show-less {  transition: all 100ms ease-in;  position: relative; margin-top: 20px; width: 100px; color: #301c33; font-size: 16px; background-color: #fff; padding:15px 65px 17px 30px;  border-radius: 30px; cursor: pointer; z-index: 10; float: none;text-align: center;  }
#section-class .bottom-type .show-less:hover {  position: relative; margin-top: 20px; width: 100px; color: #301c33; font-size: 16px; background-color: #ffce00; padding:15px 65px 17px 30px;  border-radius: 30px; cursor: pointer; }
#section-class .bottom-type .show-less:after {  position: absolute; content: ''; background-image: url(../images/arrow-up.png); width: 23px; height: 11px;  margin-top: 5px; margin-left: 15px; }
#section-class .bottom-type .show-less:hover:after {  background-image: url(../images/arrow-up-hover.png); }


.top-type { position: relative;  float: left; width: 100%;}
.show-less { width: 121.41px; transition: all 100ms ease-in;  position: absolute; float: left; margin-top: 20px; color: #301c33;  background-color: #fff; padding:15px 69px 17px 30px;  border-radius: 30px; cursor: pointer; z-index:-1; }
.show-less:hover {  color: #301c33; position: absolute; float: left; margin-top: 20px;  background-color: #ffce00; padding:15px 69px 17px 30px;  border-radius: 30px; cursor: pointer; }
.show-less:after {  position: absolute; content: ''; background-image: url(../images/arrow-up.png); width: 23px; height: 11px;  margin-top: 5px; margin-left: 33px; }
.show-less:hover:after {  background-image: url(../images/arrow-up-hover.png); }

.half .archer:after { position: absolute; content: ''; width: 46px; height: 53px; background-image: url(../images/icon-archer.png);  margin-left: 19px; margin-top: 9px;}
.half .warrior:after { position: absolute; content: ''; width: 46px; height: 53px; background-image: url(../images/icon-warrior.png);  margin-left: 19px; margin-top: 9px;}
.half .magician:after { position: absolute; content: ''; width: 46px; height: 53px; background-image: url(../images/icon-magician.png);  margin-left: 19px; margin-top: 9px;}
.half .stealth:after { position: absolute; content: ''; width: 46px; height: 53px; background-image: url(../images/icon-stealth.png);  margin-left: 19px; margin-top: 9px;}

.half .gladiator:before { position: absolute; content: ''; width: 46px; height: 53px; background-image: url(../images/icon-gladiator.png);  margin-left: 107px; margin-top: -63px;}
.half .berserker:before { position: absolute; content: ''; width: 46px; height: 53px; background-image: url(../images/icon-berserker.png);  margin-left: 103px; margin-top: -63px; }
.half .knight:before { position: absolute; content: ''; width: 46px; height: 53px; background-image: url(../images/icon-knight.png);  margin-left: 65px; margin-top: -63px; }
.half .paladin:before { position: absolute; content: '';width: 46px; height: 53px;; background-image: url(../images/icon-paladin.png);  margin-left: 75px; margin-top: -63px; }

.half .ranger:after { position: absolute; content: ''; width: 46px; height: 53px; background-image: url(../images/icon-ranger.png);  margin-left: -117px; margin-top: -63px; }
.half .sentinel:after { position: absolute; content: ''; width: 46px; height: 53px; background-image: url(../images/icon-sentinel.png);  margin-left: -131px;margin-top: -63px; }
.half .hunter:after { position: absolute; content: ''; width: 46px; height: 53px; background-image: url(../images/icon-hunter.png);  margin-left: -116px;margin-top: -63px; }
.half .sniper:after { position: absolute; content: ''; width: 46px; height: 53px; background-image: url(../images/icon-sniper.png);  margin-left: -104px;margin-top: -63px; }

.half .sorcerer:after { position: absolute; content: '';width: 46px; height: 53px; background-image: url(../images/icon-sorcerer.png);  margin-left: -140px; margin-top: -63px;  }
.half .wizard:after { position: absolute; content: ''; width: 46px; height: 53px;background-image: url(../images/icon-wizard.png);  margin-left: -118px; margin-top: -63px;  }
.half .acolyte:after { position: absolute; content: ''; width: 46px; height: 53px; background-image: url(../images/icon-acolyte.png);  margin-left: -127px;  margin-top: -63px; }
.half .cleric:after { position: absolute; content: ''; width: 46px; height: 53px; background-image: url(../images/icon-cleric.png);  margin-left: -102px; margin-top: -63px;  }

.half .rouge:after { position: absolute; content: ''; width: 46px; height: 53px; background-image: url(../images/icon-rouge.png);  margin-left: -93px; margin-top: -63px;  }
.half .assassin:after { position: absolute; content: ''; width: 46px; height: 53px; background-image: url(../images/icon-assassin.png);  margin-left: -114px; margin-top: -63px;  }




/* Fade In Slide */
/*#section-class .fp-slidesContainer { width: 100%!important;	transform: none!important;   }
#section-class .fp-slide { width: 100%!important;  position: relative; left: 0;	top: 0;	visibility: hidden;	opacity: 0;	z-index: 0;	transition: all 300ms ease-in-out; }
#section-class .fp-slide.active {	visibility: visible;   position: absolute;	opacity: 1;	z-index: 1;}*/

/*#section-class .fp-controlArrow.fp-prev { top: 120px;  left: 6% !important; background-image: url(../images/Arrow-left.png); width: 69px !important; height: 94px;  border: 0px !important;  background-repeat: no-repeat; }
#section-class .fp-controlArrow.fp-next { top: 120px;  right: 6% !important;  background-image: url(../images/Arrow-right.png); width: 69px; height: 94px; border: 0px !important;  background-repeat: no-repeat;  }*/

#section-class .fp-controlArrow.fp-prev { transition: all 100ms ease-in; top: 200px;  left: 23% !important; background-image: url(../images/Arrow-left-new.png); width: 23px !important; height: 29px;  border: 0px !important;  background-repeat: no-repeat; }
#section-class .fp-controlArrow.fp-next { transition: all 100ms ease-in; top: 200px;  right: 23% !important;  background-image: url(../images/Arrow-right-new.png); width: 23px; height: 29px; border: 0px !important;  background-repeat: no-repeat;  }
#section-class .fp-controlArrow.fp-prev:hover { top: 200px;  left: 23% !important; background-image: url(../images/Arrow-left-new-hover.png); width: 23px !important; height: 29px;  border: 0px !important;  background-repeat: no-repeat; }
#section-class .fp-controlArrow.fp-next:hover { top: 200px;  right: 23% !important;  background-image: url(../images/Arrow-right-new-hover.png); width: 23px; height: 29px; border: 0px !important;  background-repeat: no-repeat;  }

/* feature-Extra */
#section-feature-extra {
    background-position: top center;
    background-repeat: no-repeat;
    background-color: #4c1c4c;
    height: 847px !important;
    overflow: hidden;
    transition: all 100ms ease-in;
    padding-top:78px !important;
    margin-top: -1px;
}

.part-3 { position: relative; width: 100%; }
.video-player { background-image: url(../images/outer-frame-new-bottom.png); background-repeat: no-repeat;  background-position: center;  position: relative;  width:906px; height: 470px; z-index: 100; }
.youtube-video { position: absolute; width: 100%; margin-top: 40px;}
.banner { width:145px; height: 167px; position: absolute; background-image: url(../images/banner.png); margin-left: 90%; margin-top: 80px; }
.army { width: 142px; height: 119px; position: absolute;  background-image: url(../images/army.png); margin-left: -10%; margin-top: 250px; }
.feature-section-5 {    position: relative; width: 900px;  color: #fffbe9; margin-top: 70px; z-index: 100; }
.feature-section-5 h1 {
    font-size: 48px;
    /* line-height: 65px; */
    padding: 0px;
    margin: 0px;
    margin-bottom: 23px;
}
.feature-section-5 p { font-size: 16px; line-height: 30px; font-family: 'Lovato'; width: 82%; }

.manage-scenario {  position: relative;  z-index: -2;  width: 870px;  height: 430px;  overflow: hidden;  margin-left: 0px; margin-top: -450px;}
.manage { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: 0 auto;width: 100%; }



/* lore */
#section-lore {background-color: rgba(229,55,74,1); background-image: url(../images/lore-bg-top.jpg); background-position: top center; background-repeat: repeat-x;  !important; height: 1650px !important; overflow: hidden;  }
#section-lore .story-title { width: 100%; position: absolute; top: -50px; opacity: 1;  z-index: 900;  font-size: 30px;  color: #fffbe9; background-image: url(../images/wings-news.png); background-repeat: no-repeat; background-position: center 135px;  height: 78px;  opacity: 0px;  padding-top: 170px; }


.story-bg-paragraph {  width: 100%; height: 100px; position: relative;  bottom: 200px; background-repeat: repeat-y; background-position: center; z-index: 9999;}
.story-bg-paragraph p { color: #fff; width: 100%; opacity: 1; line-height:24px;     margin-bottom: 40px; }
.story-bg-paragraph p:first-child { color: #fff;  width: 100%; opacity: 1; line-height:24px; }
.storyline-container { position: absolute; float: left; width: 100%;  margin-top: -150px; height: 100vh;  }


.story-bg {
    background-image: url(../images/story-bg-character.jpg); 
    width: 100%;
    height: 100vh;
    min-height: 1200px;
    background-repeat: no-repeat;
    background-position: top center;
    background-color: #e5374a;
    position: absolute;
    z-index: -1;
    transform-origin: bottom left;
    background-size: 100%;
}

.teammate-1-lore { background-image: url(../images/Teammate-1-Lore.png);
    width: 100%;
    height: 1275px;
    position: absolute;
    background-repeat: no-repeat;
    background-position: 90% 0%;
    transform-origin: bottom left;
    transform: scale(.4);
    z-index: 0;}

.teammate-3-lore {
    background-image: url(../images/Teammate-3-Lore.png);
    width: 100%;
    height: 1275px;
    position: absolute;
    background-repeat: no-repeat;
    transform-origin: bottom left;
    transform: scale(0.5);
    z-index: 0;
    margin-top: 150px;
}

.teammate-2-lore {
    background-image: url(../images/Teammate-2-Lore.png);
    width: 100%;
    height: 2185px;
    margin-top: -700px;
    margin-left: 370px;
    position: absolute;
    background-repeat: no-repeat;
    transform-origin: bottom right;
    transform: scale(0.4);
    z-index: 0;
}

.franc-lore {
    background-image: url(../images/Franc-lore.png);
    width: 200%;
    height: 1275px;
    margin-left: 250px;
    position: absolute;
    /* background-size: 100%; */
    background-repeat: no-repeat;
    transform-origin: bottom left;
    transform: scale(.5);
    /* right: -40%; */
    /* bottom: 0px; */
}

.maxwell-lore {
        background-image: url(../images/Maxwell-Lore.png);
    width: 2140px;
    height: 1275px;
    margin-left: -360px;
    position: absolute;
    background-repeat: no-repeat;
    transform-origin: bottom left;
    transform: scale(.9);
    z-index: 2;
    background-position: center;
}

.castle-lore { 
    background-image: url(../images/Castle.png);
    width: 100%;
    background-repeat: no-repeat;
    height: 100vh;
    background-size: 70%;
    transform-origin: bottom right;
    background-position: bottom right;
    margin-left: 130px;
    bottom: -320px;
    position: relative;
    z-index: -1;
} 

.paragraph-overlay { position: relative; background-image: url(../images/paragraph-overlay.png); background-repeat: repeat-x; width: 100%; z-index: 9999; height: 450px; margin-top:0px; float: left; }
.story-line-bg { position: absolute;  float: left; width: 100%;  height: 518px; background-repeat: no-repeat; z-index: 10000; background-image: url(../images/story-line-bg.png); background-position: center center; margin-top:0vh; bottom: 0; }
.story-container {
    position: relative;
    width: 400px;
    float: none;
    padding: 40px;
    padding-top: 190px;
}
.story-container p { color: #a68c9b; font-family: 'Lovato';  font-size: 18px; }

.blue { position: relative; background-image: url(../images/zip-zap-4.png); width: 100%; height: 244px; margin-top: -240px; background-size: 100%; background-position: center bottom; background-repeat: no-repeat;  }

/* characters */
#section-character { background-color: #5fd3f4; height: 950px !important; background-size: 100%;  background-image: url(../images/characters-bg.png); background-position: bottom center; background-repeat: no-repeat; }
#section-character .section-title { width: 100%; position: absolute;     z-index: 900;  font-size: 30px;  color: #fffbe9; background-image: url(../images/wings-character.png); background-repeat: no-repeat; background-position: center center;  height: 69px;  opacity: 0px;  padding-top: 70px; }
.characters-container { position: relative; padding-top: 150px; }
.characters-container .part-1 { }
.characters-img { position: absolute; width: 100%; max-width: 20%; margin-top:-450px;  }
.characters-img img { width: 40%; }
.characters-title { position: relative; width: 340px; height: 48px; padding: 35px; background-image: url(../images/characters-title-bg.png); background-position: center center; background-repeat: no-repeat; font-size: 35px; color: #fff;  margin-top: 444px; z-index: 10;  }
.characters-desc {     position: relative;
    width: 45%;
    background-image: url(../images/character-desc-bg.png);
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 80px;
    padding-bottom: 0px;
    padding-left: 15%;
    padding-right: 15%;
    margin-top: -60px;
    height: 207px; background-size: 100%;}
.characters-desc h1 { color: #fff; line-height: 30px; font-size: 26px; margin-bottom: 10px;  }
.characters-desc p { padding-bottom: 31px; color: #fff; line-height: 20px;  font-size: 15px; max-width: 70%; font-family: 'Lovato'; }

.slide .photo { opacity: 0.2; height:54%; transition: all 200ms; overflow: hidden;}
.slide.active .photo {  opacity: 1 !important; height: 54% !important; }
.slide h2 { padding-top: 60px; color: #0b0017; text-transform: uppercase; transition: all 200ms; }
#section-character .fp-slidesNav.top { bottom: 25px; top: auto !important; }

#section-character .fp-slidesNav ul li { margin-left: 15px !important; margin-right: 15px !important;}
#section-character .fp-slidesNav ul li a.active span { border-radius: 0% !important; margin: 0px !important; opacity:1;  }
#section-character .fp-slidesNav ul li a span { width: 10px !important; height: 10px !important; margin: 0px !important; border-radius: 0% !important; opacity: 0.5; transition: all 200ms ease-in !important; transform: rotate(45deg);  }
#section-character .fp-slidesNav ul li a span:hover { background:#ffce00 !important ; width: 10px !important; height: 10px !important; margin: 0px !important; border-radius: 0% !important; opacity:1;  }
#section-character .fp-slidesNav ul li a span { background: #fff !important; margin: 0px !important;}


/*#section-character .fp-controlArrow.fp-prev { left: 20% !important; background-image: url(../images/Arrow-left.png); margin-top: 90px; width: 69px !important; height: 94px;  border: 0px !important;  background-repeat: no-repeat; }
#section-character .fp-controlArrow.fp-next { right: 20% !important;  background-image: url(../images/Arrow-right.png); margin-top: 90px; width: 69px; height: 94px; border: 0px !important;  background-repeat: no-repeat;  }*/

#section-character .fp-controlArrow.fp-prev { left: 27% !important; background-image: url(../images/Arrow-left-new.png); margin-top:320px; width: 45px !important; height: 57px;  border: 0px !important;  background-repeat: no-repeat; transition: all 150ms ease-in;}
#section-character .fp-controlArrow.fp-prev:hover { left: 27% !important; background-image: url(../images/Arrow-left-new-hover.png); margin-top:320px; width: 45px !important; height: 57px;  border: 0px !important;  background-repeat: no-repeat; }
#section-character .fp-controlArrow.fp-next { right: 27% !important;  background-image: url(../images/Arrow-right-new.png); margin-top:320px; width: 45px; height: 57px; border: 0px !important;  background-repeat: no-repeat;   transition: all 150ms ease-in;}
#section-character .fp-controlArrow.fp-next:hover { right: 27% !important;  background-image: url(../images/Arrow-right-new-hover.png); margin-top:320px; width: 45px; height: 57px; border: 0px !important;  background-repeat: no-repeat;  }

/* Store Section */
.store-section {position: relative; height: 192px; width: 100%; float: left; background-image: url(../images/store-app-bg.png);  background-position: top center;  z-index: 100;}
.store-section ul { margin-top: 70px;  }
.store-section ul li { position: relative; display: inline-block; margin-left: 10px; margin-right: 10px;}

/* Footer Section */
#section-footer { background-color: #5f215e; height: 563px !important; padding-top: 0px !important;  }
.bottom-navigation {height: 134px; position: relative; float: left; width: 100%; background-color: #4c1c4c; }

.kurechii-section { width: 62%; position: relative; float: left; text-align: left;  }
.footer-logo { width: 233px;
    margin:21px;
    position: relative;
    float: left;
    /* margin-top: 40px; */
    background-image: url(../images/Kurechii-logo.png);
    background-position: center center;
    background-repeat: no-repeat;
    height: 90px;
    background-size: 100%; max-width: 233px; }
.footer-text {
        width: 64%;
    position: relative;
    float: left;
    color: #a68c9b;
    font-size: 15px;
    line-height: 16px;
    margin-top: 60px;
    font-family: 'Lovato';
    border-left: 1px solid #a68c9b;
    padding-left: 3%;
}

.download-section { width: 36%; position: relative; float: left; text-align: left;  }
.download-store ul { }
.download-store ul li { display: inline-block; width: 23%; margin-top: 20px; }
.download-store ul li img { width: 100%; }

.social-section { width: 19%; position: relative; float: right; text-align: left;  }
.social-section .social-media ul li { display: inline-block; }
.footer-title { width: 100%; position: relative; float: left; color: #a68c9b; font-size: 18px; padding-bottom: 30px; }

/* Copyright */
.copyright-section { position: relative; width: 100%; height: 50px; float: left; background-color: #200b1f; }
.copyright-section p { color: #fff; font-family: 'Lovato';  margin-top: 16px; font-size: 14px; }

/* Newsletter */
#mc_embed_signup { text-align: left; float: left;  color: #fffbe9; font-size: 34px; text-transform: uppercase; margin-top:35px; }
#mc_embed_signup p { font-family: 'Lovato-Bold'; font-size: 24px;  }
input:focus { outline: none; }
#mc_embed_signup_scroll { margin-top: 20px;}
#mc_embed_signup input.email { font-family: "Open Sans","Helvetica Neue",Arial,Helvetica,Verdana,sans-serif;
    font-size: 12px; border: 0px;
    color: #343434;
    background-color: #fffbe9;
    box-sizing: border-box;
    height: 35px;
    display: inline-block;
    margin: 0;
    width: 430px;
    vertical-align: top; float:left; padding-left: 30px; text-transform: uppercase; }
#mc_embed_signup .clear {
    display: inline-block;
}
#mc_embed_signup .button {
    width: 35px;
    cursor: pointer; 
    font-size: 13px;
    float:left;
    border: none;
    letter-spacing: .03em;
    color: #fff;
    background-color: #742774;
    box-sizing: border-box;
    height: 35px;
    display: inline-block;
    margin: 0;
    transition: all 0.23s ease-in-out 0s;
    -webkit-border-top-right-radius: 20%;
    -webkit-border-bottom-right-radius: 20%;
    -moz-border-radius-topright: 20%;
    -moz-border-radius-bottomright: 20%;
    border-top-right-radius: 20%;
    border-bottom-right-radius: 20%;
    background-image: url(../images/subcribe-arrow.png);
    background-position: center center; background-repeat: no-repeat; 
}
#mc_embed_signup .button:hover { background-color: #ffce00; }

.info { font-size:12px; text-transform: capitalize; font-family:"Lovato";  }
.info a { font-size:12px; text-transform: capitalize; font-family:"Lovato"; color: #fffbe9 !important;   }
.newsletter-section { height: 188px; position: relative; float: left; background-color: #5f215e; width: 100%; }
.col-2 { width: 100%; position: relative; float: left; color: #fffbe9; }
.col-2 p { font-family: 'Lovato'; }
.col-3 { width: 30%; padding-left: 5%; padding-top: 40px; position: relative; float: left; z-index: 10;}
.col-7 { width: 64%; padding-left: 1%; height: 100%; position: relative; float: left; z-index: 10; }
.newsletter-bg { width: 960px; }


/* Sound Icon */
.sound { width: 40px;  height: 40px;  position: relative; cursor: pointer;  display: inline-block; }
.sound--icon {  color: #fff; font-size: 40px !important; line-height: 100%; display: block; margin: auto; }
.sound--wave { position: absolute; border: 4px solid transparent; border-right: 4px solid #fff; border-radius: 50%; -webkit-transition: all 200ms; transition: all 200ms; margin: auto; top: 0; bottom: 0; left: 0; right: 0; }
.sound--wave_one { width: 50%; height: 50%; }
.sound--wave_two { width: 75%; height: 75%; }
.sound-mute .sound--wave { border-radius: 0; width: 50%; height: 50%; border-width: 0 4px 0 0; }
.sound-mute .sound--wave_one { -webkit-transform: rotate(45deg) translate3d(0, -50%, 0);  transform: rotate(45deg) translate3d(0, -50%, 0); }
.sound-mute .sound--wave_two { -webkit-transform: rotate(-45deg) translate3d(0, 50%, 0);  transform: rotate(-45deg) translate3d(0, 50%, 0); }
.fa-volume-off:before {  content: ""; background-image: url(../images/sound.png); width: 17px; height: 31px; position: absolute;  margin-left: -15px;  margin-top: 4px;  }


/* Animation */
@-webkit-keyframes shine {
  0%,
	10% {
    background-position: -1000px;
  }
  100% {
    background-position: 1000px;
  }
}

@-webkit-keyframes bubbleboxappear {
  0%   { opacity: 0; transform: rotate(45deg); top: 0px; }
  5% { opacity: 1;  transform: rotate(0deg);  top: 0px;}
  50% { opacity: 1; transform: rotate(0deg);  top: 0px;}
  55% { opacity: 0; transform: rotate(0deg);  top: -50px; }
  100% { opacity: 0; transform: rotate(0deg);  top: -50px; }
}
@-moz-keyframes bubbleboxappear {
 0%   { opacity: 0; transform: rotate(45deg); top: 0px; }
  5% { opacity: 1;  transform: rotate(0deg);  top: 0px;}
  50% { opacity: 1; transform: rotate(0deg);  top: 0px;}
  55% { opacity: 0; transform: rotate(0deg);  top: -50px; }
  100% { opacity: 0; transform: rotate(0deg);  top: -50px; }
}
@-o-keyframes bubbleboxappear {
 0%   { opacity: 0; transform: rotate(45deg); top: 0px; }
  5% { opacity: 1;  transform: rotate(0deg);  top: 0px;}
  50% { opacity: 1; transform: rotate(0deg);  top: 0px;}
  55% { opacity: 0; transform: rotate(0deg);  top: -50px; }
  100% { opacity: 0; transform: rotate(0deg);  top: -50px; }
}
@keyframes bubbleboxappear {
  0%   { opacity: 0; transform: rotate(45deg); top: 0px; }
  5% { opacity: 1;  transform: rotate(0deg);  top: 0px;}
  50% { opacity: 1; transform: rotate(0deg);  top: 0px;}
  55% { opacity: 0; transform: rotate(0deg);  top: -50px; }
  100% { opacity: 0; transform: rotate(0deg);  top: -50px; }
}


.smaller-size-view { display: none; position: fixed; width: 100%; height: 100%; z-index: 9999; background-color: #4c1c4c; top: 0px;  }


/* Desktop Retina --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen 
  and (min-width: 1px) 
  and (max-width: 959px) {
      
      /*body { display: none; }*/
      .smaller-size-view { display: block; position: fixed; width: 100%; height: 100%; z-index: 9999; background-color: #4c1c4c; top: 0px; }
      .smaller-size-view .top { width: 100%; height:38px; background-image: url(../images/story-tile.png); position: absolute; top: 0px;  }
      .smaller-size-view .bottom { width: 100%; height:38px; background-image: url(../images/story-tile.png); position: absolute; bottom: 0px;  }
      .smaller-size-view .text { position: relative; padding-top: 30%; color: #fff; text-transform: uppercase; font-size: 25px; }
}



@media screen 
  and (min-width: 960px) 
  and (max-width: 1280px) { 
      
       /* Character */
      
      .class_feat_container .fp-slides { padding: auto !important; }
     .characters-container .fp-slides { padding: 0% !important; }
      
      
      .game-desc-content {     font-size: 26px; }
      #section-class .desc-text { background-size: 92%; background-position: center 41px; margin-top: -10px; }
      #section-class .desc-text p { max-width: 53%; padding-top: 10%; }
      #section-class .fp-controlArrow.fp-next { top: 160px; }
      #section-class .fp-controlArrow.fp-prev { top: 160px; }
      #section-class .fp-controlArrow.fp-next:hover { top: 160px; }
      #section-class .fp-controlArrow.fp-prev:hover { top: 160px; }
      #section-class .main-type {    padding-top: 82px;}
      #section-class .main-type .half:first-child { margin-left: -50px;}
      #section-class .main-type .half:last-child { margin-left: 50px;}
      .class-container { background-size: 100% 100%; margin-left: 10px; background-repeat: no-repeat; }
      #section-class .sub-type-1 { margin-top: 15px; }
      
      
      #section-lore { height: 1500px !important; }
      
      
    .characters-desc h1 {  color: #fff;  line-height: 30px;  font-size: 24px;  margin-bottom: 10px; }
    .characters-desc p { max-width: 100%; }
    .characters-desc {  position: relative;  width: 55%;  background-image: url(../images/character-desc-bg.png);  background-repeat: no-repeat;  background-position: center;  padding-top: 80px;  padding-bottom: 0px; padding-left: 20%; padding-right: 20%; margin-top: -60px; height: 207px; background-size: 100%; }
   #section-character .fp-slidesNav.top { bottom: 30px; top: auto !important; }
   .characters-img { margin-top:-280px }  
    .characters-title { margin-top: 454px; }
    #section-character .fp-controlArrow.fp-prev {  left: 10% !important; }
    #section-character .fp-controlArrow.fp-prev:hover {  left: 10% !important; }
    #section-character .fp-controlArrow.fp-next {  right: 10% !important; }
    #section-character .fp-controlArrow.fp-next:hover {  right: 10% !important; } 
      
   .footer-text { width: 50%; margin-top: 30px; }
      
}

@media screen 
  and (min-width: 1281px) 
  and (max-width: 1599px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
      
      .class_feat_container .fp-slides { padding: auto !important; }
      .characters-container .fp-slides { padding: 0% !important; }
      
      .game-desc-content {     font-size: 26px; }
      #section-class .desc-text { background-size: 85%; background-position: center 41px; margin-top: -10px; }
      #section-class .desc-text p { max-width: 53%; padding-top: 10%; }
      #section-class .fp-controlArrow.fp-next { top: 160px; }
      #section-class .fp-controlArrow.fp-prev { top: 160px; }
      #section-class .fp-controlArrow.fp-next:hover { top: 160px; }
      #section-class .fp-controlArrow.fp-prev:hover { top: 160px; }
      #section-class .main-type {    padding-top: 82px;}
      #section-class .main-type .half:first-child { margin-left: -50px;}
      #section-class .main-type .half:last-child { margin-left: 50px;}
      .class-container { background-size: 100% 100%; margin-left: 10px; background-repeat: no-repeat; }
      #section-class .sub-type-1 { margin-top: 15px; }
      
      /* Trailer */
      .trailer-scenario { padding-bottom: 45%;}
      .trailer-scenario  iframe {height:80%;}
      .overlay-pattern { background-image: url(../images/raster.png); width: 100%; height: 110vh; position: absolute; background-repeat: repeat-x; background-position: center -20px; }
      
      
      /* Features */
      .brick-wall {  margin-top: -115px;  }
      
      /* Character */
    .characters-desc {  position: relative;  width: 55%;  background-image: url(../images/character-desc-bg.png);  background-repeat: no-repeat;  background-position:top center;  padding-top: 80px;  padding-bottom: 0px; padding-left: 20%; padding-right: 20%; margin-top: -60px; height: 207px; background-size: 100%; }
   #section-character .fp-slidesNav.top { bottom: 30px; top: auto !important; }
   .characters-img { margin-top:-450px; } 
   .characters-img img { max-width: :530px; }
    #section-character .fp-controlArrow.fp-prev {  left: 20% !important; }
    #section-character .fp-controlArrow.fp-prev:hover {  left: 20% !important; }
    #section-character .fp-controlArrow.fp-next {  right: 20% !important; }
    #section-character .fp-controlArrow.fp-next:hover {  right: 20% !important; } 
      
       /* Lore */
      .maxwell-lore { margin-left: -700px;}
      .teammate-1-lore { margin-top: -100px;  margin-left: 110px; }
      .teammate-2-lore { margin-top: -900px;  margin-left: 150px;}
      .franc-lore {     margin-left: 70px;}
      .paragraph-overlay {     margin-top:200px; }
      .story-line-bg { bottom: -120px;}
      .story-bg {  background-position: 0% 59%; }
      
      
      /* Footer */
      .kurechii-section {width: 65%;}
      .footer-text { width: 66%;  position: relative; float: left;  color: #a68c9b;  font-size: 14px;  line-height: 15px;  margin-top: 60px;  font-family: 'Lovato'; }
      .footer-logo {  width: 22%; margin: 2.5%;  position: relative;  float: left;  margin-top: auto;  background-image: url(../images/Kurechii-logo.png);  background-position: center bottom;  background-repeat: no-repeat;  height: 90px;  background-size: 100%; }
      
      
      /* News */
      #slider ul li iframe { background-color: #fff !important; border: 0px !important; max-height: 500px;  width: 40%; min-height: auto; margin-left: 30%; margin-right:30%; }
      .section-title h1 { padding-top: 0px;}
      /*.close-btn { margin-top: 72px; }
      .close-btn:hover { margin-top: 72px; }
      .news .close-btn { margin-top:64px; }
      .news .close-btn:hover { margin-top:64px; }*/
      
}




@media screen 
  and (min-width: 2048px) 
  and (max-width: 3840px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
      
      .home-bg  { background-size: cover;  }
      #section-home { height: 106vh !important; }
      
      .maxwell-lore { width: 2470px; height: 1517px; margin-left: -80px; margin-top: -120px; }
      .teammate-2-lore { margin-top: -780px; margin-left: 466px; transform: scale(0.5); }
      .teammate-3-lore { margin-left: 210px; margin-top: 100px; }
      .franc-lore { margin-left: 570px; margin-top: -20px; }
      
      .paragraph-overlay { margin-top: -30vh;}
      .castle-lore { bottom: 160px; }
      .characters-img img { width: 20%;  padding-top: 15vh; }
      
      
      .blue {background-size: 100%;   background-position: bottom center;   height: 492px; margin-top: -492px; }
      
      #section-class { background-repeat: repeat-x;} 
      #section-lore { background-repeat: repeat-x; height: 170vh !important;  }
      #section-character { background-size: contain; background-repeat: repeat-x; margin-top: -2px; }
      
      
      .story-bg { height: 140vh;}
      .story-line-bg { bottom:110px; }
      
      .characters-desc { background-position: top; }
      .footer-text {   width: 41%; margin-top: 53px; }
      #section-character .fp-slidesNav.top { bottom: 25px; }
      
      
      #slider ul li iframe {  min-height: 830px; }
      
      #section-class .fp-controlArrow.fp-prev { top: 200px;  left: 28% !important; background-image: url(../images/Arrow-left-new.png); width: 23px !important; height: 29px;  border: 0px !important;  background-repeat: no-repeat; }
      #section-class .fp-controlArrow.fp-next { top: 200px;  right: 28% !important;  background-image: url(../images/Arrow-right-new.png); width: 23px; height: 29px; border: 0px !important;  background-repeat: no-repeat;  }
      #section-class .fp-controlArrow.fp-prev:hover { top: 200px;  left: 28% !important; background-image: url(../images/Arrow-left-new-hover.png); width: 23px !important; height: 29px;  border: 0px !important;  background-repeat: no-repeat; }
      #section-class .fp-controlArrow.fp-next:hover { top: 200px;  right: 28% !important;  background-image: url(../images/Arrow-right-new-hover.png); width: 23px; height: 29px; border: 0px !important;  background-repeat: no-repeat;  }
      
      
      
}


@media screen
  and (min-height: 1152px) 
  and (min-width: 2048px) {
    
      /*.play-section { margin-top: 80vh; }*/
      .characters-img { margin-top:-40vh; }
      .breaker { margin-top: 10px; margin-bottom: 10px; }
      #section-feature .feat_container .part-3 { margin-top:40px;}
      #section-feature .feat_container .part-2 { margin-top:70px;}
      #section-feature .feat_container .part-1-b { margin-top:75px;}
      #section-feature { min-height: 3135px !important; }
      .footer-logo { margin: 2.4%; }
      .footer-text {   width: 35%; margin-top: 53px; }
    
}

@media screen
  and (min-height: 2160px) 
  and (min-width: 3084px) {
    
    .characters-img img { width: 20%;  padding-top: 20vh; }
}



/* Safari 10.1+ */

@media not all and (min-resolution:.001dpcm) { @media {
    
    .close-btn { padding: 5px 25px 2px 5px; }
    .close-btn:hover { padding: 5px 25px 2px 5px; }
    .close-text { margin-top:1px;  }
    .circle:after { width: 24px; height: 5px; background-color: #301c33; content: ""; left: 50%; top: 50%;  margin-left: -12px; margin-top: -4px;  position: absolute;  -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg);  -webkit-transform: rotate(-45deg);  transform: rotate(-45deg);  transition: all 200ms ease-in;   /*@include transform-origin(100%,100%);*/}
    .circle:before { left: 50%; top: 50%; margin-left: -12px; margin-top:-4px; width: 24px; height: 5px;  background-color: #301c33;  content: ""; position: absolute; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);  transition: all 200ms ease-in;  /*@include transform-origin(0%,0%);*/ }
    
}}