/*
  使用しているゲームID  
  gmWrapperBackground
*/

/*-------------------------------------------------------------------------------*/
/* ボタン関連
/*-------------------------------------------------------------------------------*/
.gmWrap {
    height: 300px;
    width: 300px;
}

.gmWrap a {
    display: block;
    width: 100%;
    height: 100%;
}

.gmButton {
    width: 160px;
    height: 50px;
    color: #FFF;
    border: 2px solid #000;
    border-radius: 10px;
    box-shadow: 0 0 0 2px #FFF inset;
    background-color: rgba(0,0,0,0.9);
    overflow: hidden;
    margin-bottom: 5px;
}
@media screen and (max-width: 480px) {
    .gmButton {
        width: 105px;
        height: 42px;
        font-size: 12px;
    }
}
.gmButton:hover {
  background-color: rgba(0,0,0,0.2);
}
.gmButton p {
    text-align: center;
    padding: 14px 0;
}
@media screen and (max-width: 480px) {
    .gmButton p {
        padding: 11px 0;
    }
}

.gmButtonCursor {
  cursor: pointer;
}

/*-------------------------------------------------------------------------------*/
/* 背景関連
/*-------------------------------------------------------------------------------*/
#gmWrapperBackground {
    position: relative;
    width: 100%;
    padding-top: 100%;
    background-size: cover;
    overflow: hidden;
}
@media screen and (max-width: 480px) {
    #gmWrapperBackground {
        margin-top: -10px;
    }
}

/*-------------------------------------------------------------------------------*/
/* inner関連
/*-------------------------------------------------------------------------------*/
.gmInnerBackground {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

/*---------------------------------------------------------------------------*/
/* その他
/*---------------------------------------------------------------------------*/
.wrapper {
    width: 200px;
    height: 250px;
    margin: 0 auto;
    -webkit-perspective: 1000;
    perspective: 1000;
}
.inner {
    position: relative;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: .6s;
    transition: .6s;
}
.front,
.back {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 250px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.front {
    background-color: #146AFC;
}
.back {
    background-color: #39FA29;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.wrapper:hover .inner {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.animation-element {
    -moz-transform
    -webkit-transition: 1500ms linear all;
    transition: 1500ms linear all;
    
    // アニメ中はblockにしてやる
    &.ng-hide-add,
    &.ng-hide-remove {
      display: block !important;
    }

    // 表示→非表示
    &.ng-hide-add {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
    &.ng-hide-add-active {
      -webkit-transform: translate3d(0, 100px, 0);
      transform: translate3d(0, 10px, 0);
      opacity: 0;
    }

    // 非表示→表示
    &.ng-hide-remove {
      -webkit-transform: translate3d(0, 100px, 0);
      transform: translate3d(0, 10px, 0);
      opacity: 0;
    }
    &.ng-hide-remove-active {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }

.animation-container { 
  animation: translate 3s; 
  animation-iteration-count: 1; 
  -webkit-animation: translate 3s; /* Safari & Chrome */
  -webkit-animation-iteration-count: 1; 
  /*background-image: url('images/logo.png'); */
  /*background-repeat: no-repeat; */
  /*
  height: 220px; 
  width: 180px; 
  margin:50px auto;
  */
}  
@keyframes translate { 
  0%   { transform:  translate(0px, 0px);    } 
  25%   { transform:  translate(300px, 0px);   }
  75%   { transform:  translate(-300px, 0px);   }
  100%  { transform:  translate(0px, 0px);   } 
} 
@-webkit-keyframes translate { 
  0%   { -webkit-transform:  translate(0px, 0px) ;   } 
  25%   { -webkit-transform:  translate(300px, 0px);   }
  75%   { -webkit-transform:  translate(-300px, 0px);   }
  100%  { -webkit-transform:  translate(0px, 0px);   } 
}