/* You can add global styles to this file, and also import other style files */

/* Sticky footer styles







-------------------------------------------------- */



html {

  position: relative;

  min-height: 100%;

}

body {

  /* Margin bottom by footer height */

  

  margin-bottom: 0;

}

.footer {

  width: 100%;

  min-height: 60px;

  background-color: #f5f5f5;

}

div#platform {
  z-index: 4;
  width: 100%;
  height: 25px;
  position: relative;
  background: aliceblue;
  top: 0px;
  background: #cedce7;
  background: -moz-linear-gradient(top, #093456 0%, #152330 100%);
  background: -webkit-linear-gradient(top, #093456 0%, #152330 100%);
  background: linear-gradient(to bottom, #093456 0%, #152330 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#093456', endColorstr='#152330', GradientType=0);
}

/* Custom page CSS







  -------------------------------------------------- */

/* Not required for template or sticky footer method. */



.footer .container .text-muted {

  margin: 20px 0;

}

/* Rules for sizing the icon. */



.material-icons.md-14 {

  font-size: 14px;

}

.material-icons.md-18 {

  font-size: 18px;

}

.material-icons.md-24 {

  font-size: 24px;

}

.material-icons.md-36 {

  font-size: 36px;

}

.material-icons.md-48 {

  font-size: 48px;

}

.material-icons.md-96 {

  font-size: 96px;

}

.material-icons.md-192 {

  font-size: 192px;

}

.key {

  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

  color: #000000;

  font-size: 12;

  padding: 5;

  font-weight: bold;

}

.footer {

  background: #2B2E31;

  padding: 25px 25px 25px 25px;

  position: relative;

  overflow: hidden;

  display: block;

  z-index: 1;

  box-shadow: 0px -10px 0px rgba(0, 0, 0, 0.1);

  -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);

  color: #cecece;

}

.widget h3,

.widget h4 {

  font-weight: 500;

  font-size: 18px;

  letter-spacing: 0;

}

.title {

  position: relative;

  padding-bottom: 20px;

  margin: 20px 0;

  border-bottom: 1px solid #dcdbd7;

}

.footer .title {

  border-bottom: 1px solid #696E74;

}

.footer .widget h4 {

  color: #ffffff;

}

*,

*:after,

*:before {

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

  padding: 0;

  margin: 0;

}

.title:before {

  content: "";

  position: absolute;

  left: 0;

  bottom: -5px;

  height: 10px;

  width: 10px;

  border-radius: 500px;

  background-color: #F0454D;

}

.pagination > li > a:hover,

.pagination > li > span:hover,

.pagination > li > a:focus,

.pagination > li > span:focus,

.list-group-item.active,

.list-group-item.active:hover,

.list-group-item.active:focus,

.panel-primary > .panel-heading,

.breadcrumb,

blockquote,

blockquote.pull-right,

.nav .open > a,

.nav .open > a:hover,

.nav .open > a:focus,

.form-control:focus,

.nav .open > a,

.nav .open > a:hover,

a.thumbnail:hover,

.nav-tabs.nav-stacked > li > a,

.owl-carousel .item a div span,

a.thumbnail:focus,

.post-wrapper-top h2,

.nav .open > a:focus,

#volume,

.title:before,

.post-meta a:hover,

.title:after {

  border-color: #3a5795;

}

.pagination > .active > a,

.pagination > .active > span,

.pagination > .active > a:hover,

.pagination > .active > span:hover,

.pagination > .active > a:focus,

.pagination > .active > span:focus,

.pagination > li > a:hover,

.pagination > li > span:hover,

.pagination > li > a:focus,

.pagination > li > span:focus,

.nav-tabs.nav-stacked > li > a:hover,

.nav-tabs.nav-stacked > li > a:focus,

.nav-tabs.nav-stacked > .active > a,

.nav-tabs.nav-stacked > .active > a:hover,

.nav-tabs.nav-stacked > .active > a:focus,

.nav-list > .active > a,

.nav-list > .active > a:hover,

.nav-list > .active > a:focus,

.navbar-default .navbar-nav > li > a:hover,

.navbar-inverse .navbar-nav > li > a:hover,

.navbar-default .navbar-nav > li > a:focus,

.navbar-inverse .navbar-nav > li > a:focus,

.nav-pills > li.active > a,

.nav-pills > li.active > a:hover,

.nav-pills > li.active > a:focus,

.pager li > a:hover,

.pager li > a:focus,

.label-primary,

.list-group-item.active,

.list-group-item.active:hover,

.list-group-item.active:focus,

.panel-success > .panel-heading,

.btn-primary,

.tagcloud a,

.tagweb a,

.btn-primary.disabled,

.btn-primary[disabled],

fieldset[disabled] .btn-primary,

.btn-primary.disabled:hover,

.btn-primary[disabled]:hover,

fieldset[disabled] .btn-primary:hover,

.btn-primary.disabled:focus,

.btn-primary[disabled]:focus,

fieldset[disabled] .btn-primary:focus,

.btn-primary.disabled:active,

.btn-primary[disabled]:active,

fieldset[disabled] .btn-primary:active,

.btn-primary.disabled.active,

.btn-primary[disabled].active,

fieldset[disabled] .btn-primary.active,

.topbar,

.progress-bar-danger,

.servicetitle hr,

.icn-container,

.no-touch .dm-icon-effect-1 .dm-icon.active,

.no-touch .dm-icon-effect-1 .dm-icon:hover,

.naver .naver-handle:before,

button,

.button,

.owl-theme .owl-controls .owl-page.active span,

.owl-theme .owl-controls.clickable .owl-page:hover span,

.title:before,

.owl-carousel .item i,

#volume,

mark,

#bbpress-forums li.bbp-body ul.forum li.bbp-forum-topic-count,

#bbpress-forums li.bbp-body ul.forum li.bbp-forum-reply-count,

.dmtop {

  background-color: #3a5795;

}

.pagination > li > a:hover,

.pagination > li > span:hover,

.pagination > li > a:focus,

.pagination > li > span:focus,

.list-group-item.active,

.list-group-item.active:hover,

.list-group-item.active:focus,

.panel-primary > .panel-heading,

.breadcrumb,

blockquote,

blockquote.pull-right,

.nav .open > a,

.nav .open > a:hover,

.nav .open > a:focus,

.form-control:focus,

.nav .open > a,

.nav .open > a:hover,

a.thumbnail:hover,

.nav-tabs.nav-stacked > li > a,

.owl-carousel .item a div span,

a.thumbnail:focus,

.post-wrapper-top h2,

.nav .open > a:focus,

#volume,

.title:before,

.post-meta a:hover,

.title:after {

  border-color: #3a5795;

}

.title:after {

  content: "";

  position: absolute;

  left: 0;

  bottom: -1px;

  width: 65px;

  height: 0;

  border-bottom: 2px solid #3a5795;

}

.carousel-item img {

  width: 100%;

}

@keyframes animatedBackground {

  from {

      background-position: 100% 0;

  }

  to {

      background-position: 0 0;

  }

}

@keyframes resize {

  0% {

      width: 130px;

  }

  25% {

      width: 110px;

  }

  50% {

      width: 130px;

  }

}

#animate-area {

  width: 2000px;

  height: 730px;

  background-image: url('../img/background.png');

  background-position: 0px 0px;

  background-repeat: repeat-x;

  animation: animatedBackground 5s linear infinite;

  top: -280px;

  position: relative;

  perspective: 20em;

}

#animate-area center {

  position: relative;

  bottom: 0;

  top: 450px;

  position: relative;

  z-index: 10;

}

.joker-container {
    z-index: 10;
    width: 360px;
    overflow: hidden;
    position: absolute;
    left: calc( 50% - 180px);
    right: 50%;
    top: -60px;
}



.batman-container {
  display: none;
  z-index: 10;

  width: 400px;

  overflow: hidden;

  position: absolute;

  left: calc( 50% - 500px);

}

button.btn.btn-sm.btn-primary {
    z-index: 1000;
}

@media (max-width: 992px) {

  .batman-container {
    display: none;
  }

  .joker-container {
    left: calc( 50% - 180px);
  }

}

@media (max-width: 359px){
  .joker-container {
    width: 100%;
    left: 0;
  }
  .joker {
    width: 100% !important;
    left: 0;
  }
}

.shadow {
width: 275px;
    height: 21px;
    background-color: rgba(0, 27, 48, 0.46);
    -moz-border-radius: 100px / 50px;
    -webkit-border-radius: 100px / 178px;
    border-radius: 999px / 200px;
    z-index: 0;
    position: relative;
    top: -54px;
    left: -50px;
    animation-name: resize;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: reverse;
    animation-timing-function: ease-in-out;
    margin: auto;
}

/* Safari 4.0 - 8.0 */



@-webkit-keyframes example {

  0% {

      left: 0px;

      top: 0px;

  }

  25% {

      left: 0px;

      top: -55px;

  }

  50% {

      left: 0px;

      top: 0px;

  }

}

/* Standard syntax */



@keyframes example {

  0% {

      left: 0px;

      top: 0px;

  }

  25% {

      left: 0px;

      top: -55px;

  }

  50% {

      left: 0px;

      top: 0px;

  }

}

.monster {

  width: 397px;

  height: 283px;

  margin: 2% auto;

  background: url('../img/batman2.png') left center;

  animation: play .50s steps(13) infinite;

}

.joker {

  width: 360px;

  height: 342px;

  margin: 2% auto;

  background: url('../img/gigen.png') left center;

  animation: playGigen .70s steps(5) infinite;

}

@keyframes playGigen {

  100% {

      background-position: 1800px;

  }

  0% {

      background-position: 0px;

  }

}

@keyframes play {

  0% {

      background-position: 5161px;

  }

  100% {

      background-position: 0px;

  }

}

#animate-container {

  width: 100%;

  overflow: hidden;

  margin: 0;

  padding: 0;

  height: 450px;

}

.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  position: relative;
  top: -272px;
  left: 0;
  right: 0;
  z-index: 10;
}

.sun {

  background: rgb(255, 255, 255);

  position: absolute;

  top: 350px;

  right: 350px;

  height: 80px;

  width: 80px;

  border-radius: 50%;

  -webkit-filter: blur(10px);

  -moz-filter: blur(10px);

  -o-filter: blur(10px);

  -ms-filter: blur(10px);

  filter: blur(10px);

}

.banner {

  position: relative;

  margin: .5em;

  width: 3em;

  height: 9em;

  display: inline-block;

  top: 400px;

  transform: rotateY(90deg);

  /* background: #b3b3b3; */

  

  left: 1700px;

  border-radius: 8%;

  /* border: 2px solid #989898; */

  

  animation: movex 10.0s steps(240) infinite;

  z-index: 0;

}

@keyframes movex {

  0% {

      right: 0px;

      top: 400px;

  }

  100% {

      left: 0px;

      top: 400px;

  }

}