/*
  animate2.css ----------------------------------------
  Styles for animations of the first screen for OS page
  Latest modified 2016-03-14 12:28
  -----------------------------------------------------
*/

.animate-container {
  position: relative;
  padding-top: 0;
  width: 100%;
}
.anim-els {
  position: absolute;
  left: 50%;
  background-repeat: no-repeat;
  background-position: center center;
}
.anim-logo {
  transition: opacity 1s ease;
  -webkit-animation: logoMove .8s 1 linear;
  -moz-animation: logoMove .8s 1 linear;
  -ms-animation: logoMove .8s 1 linear;
  -o-animation: logoMove .8s 1 linear;
  animation: logoMove .8s 1 linear;
}
.anim-text {
  -webkit-animation: textMove 1s 1 ease-in;
  -moz-animation: textMove 1s 1 ease-in;
  -ms-animation: textMove 1s 1 ease-in;
  -o-animation: textMove 1s 1 ease-in;
  animation: textMove 1s 1 ease-in;
}
.anim-text a {
    position: absolute;
    bottom: -50px;
    display: block;
    left: 50%;
    transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    color: #fff;
    font-size: 18px;
    opacity: 0.8;
    transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -webkit-transition: opacity 0.3s;
    animation: textFadeIn 1s 1s backwards;
}
.anim-text a:hover {
    opacity: 1;
    text-decoration: none;
    transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -webkit-transition: opacity 0.3s;
}

.anim-breathe {
    animation: anim-breathe 2.5s infinite forwards;
    -webkit-animation: anim-breathe 2.5s infinite forwards;
}
@keyframes textFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 0.8;
    }
}
@keyframes anim-breathe {
    0% {
        opacity: 0.5;
        transform: scale(1);
    	-webkit-transform: scale(1);
    	-moz-transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.04);
    	-webkit-transform: scale(1.04);
    	-moz-transform: scale(1.04);
    }
    100% {
        opacity: 0.5;
        transform: scale(1);
    	-webkit-transform: scale(1);
    	-moz-transform: scale(1);
    }
}
@-webkit-keyframes anim-breathe {
    0% {
        opacity: 1;
        transform: scale(1);
    	-webkit-transform: scale(1);
    	-moz-transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.04);
    	-webkit-transform: scale(1.04);
    	-moz-transform: scale(1.04);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    	-webkit-transform: scale(1);
    	-moz-transform: scale(1);
    }
}


/* =================== For different width limit ==================== */
@media screen and (max-width: 767px) { /* NOTICE: Includes 767, for iphones etc... */
  img.remix_header.img4SmlScreen { /* 移动端的窄屏用长条图 */
    display: block;
  }
  @-webkit-keyframes logoMove{
    from { background-size: 156px 156px; opacity: 0; }
    to { background-size: 195px 195px; opacity: 1; }
  }
  @-moz-keyframes logoMove{
    from { background-size: 156px 156px; opacity: 0; }
    to { background-size: 195px 195px; opacity: 1; }
  }
  @-ms-keyframes logoMove{
    from { background-size: 156px 156px; opacity: 0; }
    to { background-size: 195px 195px; opacity: 1; }
  }
  @-o-keyframes logoMove{
    from { background-size: 156px 156px; opacity: 0; }
    to { background-size: 195px 195px; opacity: 1; }
  }
  @keyframes logoMove{
    from { background-size: 156px 156px; opacity: 0; }
    to { background-size: 195px 195px; opacity: 1; }
  }
  .anim-text a {
      font-size: 14px;
  }
  .anim-logo {
    width: 195px;
    height: 195px;
    margin-left: -98px;
    top: 105px;
    background-image: url("https://webcdn.jide.com/jide_upload/2016_01/1453271781697_AoLAJr_animlogo_small.png");
    background-image: -webkit-image-set(
      url("https://webcdn.jide.com/jide_upload/2016_01/1453271781697_AoLAJr_animlogo_small.png") 1x,
      url("https://webcdn.jide.com/jide_upload/2016_01/1453271781697_AoLAJr_animlogo_small.png") 1.5x,
      url("https://webcdn.jide.com/jide_upload/2016_01/1453271781697_AoLAJr_animlogo_small.png") 2x
    );
  }
  @-webkit-keyframes textMove{
    from { background-size: 58% 13.4%; opacity: 0; }
    to { background-size: 78% 18%; opacity: 1; }
  }
  @-moz-keyframes textMove{
    from { background-size: 58% 13.4%; opacity: 0; }
    to { background-size: 78% 18%; opacity: 1; }
  }
  @-ms-keyframes textMove{
    from { background-size: 58% 13.4%; opacity: 0; }
    to { background-size: 78% 18%; opacity: 1; }
  }
  @-o-keyframes textMove{
    from { background-size: 58% 13.4%; opacity: 0; }
    to { background-size: 78% 18%; opacity: 1; }
  }
  @keyframes textMove{
    from { background-size: 58% 13.4%; opacity: 0; }
    to { background-size: 78% 18%; opacity: 1; }
  }
  .anim-text {
    width: 78%;
    height: 18%;
    margin-left: -39%;
    top: 350px;
    background-size: 100% 100%;
    background-image: url("https://webcdn.jide.com/jide_upload/2016_07/1469438393665_S1qOqG_anim-text.png");
  }


}
/* ========================================= */
@media (min-width: 768px) and (max-width: 1455px){ /* Small width, for laptop or tablet. Or in big-screen devices, resize browsers manually to a small width */
  img.remix_header.img4BigScreen { /* 大屏幕用宽瘪图 */
    display: block;
  }
  @-webkit-keyframes logoMove{
    from { background-size: 156px 156px; opacity: 0; }
    to { background-size: 195px 195px; opacity: 1; }
  }
  @-moz-keyframes logoMove{
    from { background-size: 156px 156px; opacity: 0; }
    to { background-size: 195px 195px; opacity: 1; }
  }
  @-ms-keyframes logoMove{
    from { background-size: 156px 156px; opacity: 0; }
    to { background-size: 195px 195px; opacity: 1; }
  }
  @-o-keyframes logoMove{
    from { background-size: 156px 156px; opacity: 0; }
    to { background-size: 195px 195px; opacity: 1; }
  }
  @keyframes logoMove{
    from { background-size: 156px 156px; opacity: 0; }
    to { background-size: 195px 195px; opacity: 1; }
  }
  .anim-logo {
    width: 195px;
    height: 195px;
    margin-left: -98px;
    bottom: 280px;
    background-image: url("https://webcdn.jide.com/jide_upload/2016_01/1453271781697_AoLAJr_animlogo_small.png");
    background-image: -webkit-image-set(
      url("https://webcdn.jide.com/jide_upload/2016_01/1453271781697_AoLAJr_animlogo_small.png") 1x,
      url("https://webcdn.jide.com/jide_upload/2016_01/1453271781697_AoLAJr_animlogo_small.png") 1.5x,
      url("https://webcdn.jide.com/jide_upload/2016_01/1453271781697_AoLAJr_animlogo_small.png") 2x
    );
  }

  @-webkit-keyframes textMove{
    from { background-size: 320px 115px; opacity: 0; }
    to { background-size: 365px 84px; opacity: 1; }
  }
  @-moz-keyframes textMove{
    from { background-size: 320px 115px; opacity: 0; }
    to { background-size: 365px 84px; opacity: 1; }
  }
  @-ms-keyframes textMove{
    from { background-size: 320px 115px; opacity: 0; }
    to { background-size: 365px 84px; opacity: 1; }
  }
  @-o-keyframes textMove{
    from { background-size: 320px 115px; opacity: 0; }
    to { background-size: 365px 84px; opacity: 1; }
  }
  @keyframes textMove{
    from { background-size: 320px 115px; opacity: 0; }
    to { background-size: 365px 84px; opacity: 1; }
  }
  .anim-text {
    width: 365px;
    height: 84px;
    margin-left: -182.5px;
    bottom: 150px;
    background-image: url("https://webcdn.jide.com/jide_upload/2016_07/1469438393665_S1qOqG_anim-text.png");
  }

}

@media (min-width: 1456px) and (max-width: 1855px) { /* Medium width, for desktop big screen, like my linux, etc. */
  img.remix_header.img4BigScreen { /* 大屏幕用宽瘪图 */
    display: block;
  }
  @-webkit-keyframes logoMove{
    from { background-size: 190px 190px; opacity: 0; }
    to { background-size: 238px 238px; opacity: 1; }
  }
  @-moz-keyframes logoMove{
    from { background-size: 190px 190px; opacity: 0; }
    to { background-size: 238px 238px; opacity: 1; }
  }
  @-ms-keyframes logoMove{
    from { background-size: 190px 190px; opacity: 0; }
    to { background-size: 238px 238px; opacity: 1; }
  }
  @-o-keyframes logoMove{
    from { background-size: 190px 190px; opacity: 0; }
    to { background-size: 238px 238px; opacity: 1; }
  }
  @keyframes logoMove{
    from { background-size: 190px 190px; opacity: 0; }
    to { background-size: 238px 238px; opacity: 1; }
  }
  .anim-logo {
    width: 238px;
    height: 238px;
    margin-left: -119px;
    bottom: 360px;
    background-image: url("https://webcdn.jide.com/jide_upload/2016_01/1453272424788_LhH3J6_animlogo_mid.png");
    background-image: -webkit-image-set(
      url("https://webcdn.jide.com/jide_upload/2016_01/1453272424788_LhH3J6_animlogo_mid.png") 1x,
      url("https://webcdn.jide.com/jide_upload/2016_01/1453272425079_lLsGQj_animlogo_mid@15x.png") 1.5x,
      url("https://webcdn.jide.com/jide_upload/2016_01/1453272424961_rfiBbs_animlogo_mid@2x.png") 2x
    );
  }

  @-webkit-keyframes textMove{
    from { background-size: 390px 90px; opacity: 0; }
    to { background-size: 440px 101.4px; opacity: 1; }
  }
  @-moz-keyframes textMove{
    from { background-size: 390px 90px; opacity: 0; }
    to { background-size: 440px 101.4px; opacity: 1; }
  }
  @-ms-keyframes textMove{
    from { background-size: 390px 90px; opacity: 0; }
    to { background-size: 440px 101.4px; opacity: 1; }
  }
  @-o-keyframes textMove{
    from { background-size: 390px 90px; opacity: 0; }
    to { background-size: 440px 101.4px; opacity: 1; }
  }
  @keyframes textMove{
    from { background-size: 390px 90px; opacity: 0; }
    to { background-size: 440px 101.4px; opacity: 1; }
  }
  .anim-text {
    width: 440px;
    height: 101.4px;
    margin-left: -220px;
    bottom: 190px;
    background-image: url("https://webcdn.jide.com/jide_upload/2016_07/1469438393665_S1qOqG_anim-text.png")
  }
}

@media (min-width: 1856px) { /* Large width, for super large screens like big Mac, etc. */
  img.remix_header.img4BigScreen { /* 大屏幕用宽瘪图 */
    display: block;
  }
  @-webkit-keyframes logoMove{
    from { background-size: 190px 190px; opacity: 0; }
    to { background-size: 238px 238px; opacity: 1; }
  }
  @-moz-keyframes logoMove{
    from { background-size: 190px 190px; opacity: 0; }
    to { background-size: 238px 238px; opacity: 1; }
  }
  @-ms-keyframes logoMove{
    from { background-size: 190px 190px; opacity: 0; }
    to { background-size: 238px 238px; opacity: 1; }
  }
  @-o-keyframes logoMove{
    from { background-size: 190px 190px; opacity: 0; }
    to { background-size: 238px 238px; opacity: 1; }
  }
  @keyframes logoMove{
    from { background-size: 190px 190px; opacity: 0; }
    to { background-size: 238px 238px; opacity: 1; }
  }
  .anim-logo {
    width: 238px;
    height: 238px;
    margin-left: -119px;
    bottom: 48%;
    background-image: url("https://webcdn.jide.com/jide_upload/2016_01/1453272424788_LhH3J6_animlogo_mid.png");
    background-image: -webkit-image-set(
      url("https://webcdn.jide.com/jide_upload/2016_01/1453272424788_LhH3J6_animlogo_mid.png") 1x,
      url("https://webcdn.jide.com/jide_upload/2016_01/1453272425079_lLsGQj_animlogo_mid@15x.png") 1.5x,
      url("https://webcdn.jide.com/jide_upload/2016_01/1453272424961_rfiBbs_animlogo_mid@2x.png") 2x
    );
  } /* In large width screen, we use same icons as the medium width screen. Just make bottom value different from the medium. */

  @-webkit-keyframes textMove{
    from { background-size: 390px 90px; opacity: 0; }
    to { background-size: 440px 101.4px; opacity: 1; }
  }
  @-moz-keyframes textMove{
    from { background-size: 390px 90px; opacity: 0; }
    to { background-size: 440px 101.4px; opacity: 1; }
  }
  @-ms-keyframes textMove{
    from { background-size: 390px 90px; opacity: 0; }
    to { background-size: 440px 101.4px; opacity: 1; }
  }
  @-o-keyframes textMove{
    from { background-size: 390px 90px; opacity: 0; }
    to { background-size: 440px 101.4px; opacity: 1; }
  }
  @keyframes textMove{
    from { background-size: 390px 90px; opacity: 0; }
    to { background-size: 440px 101.4px; opacity: 1; }
  }
  .anim-text {
    width: 440px;
    height: 101.4px;
    margin-left: -220px;
    bottom: 30%;
    background-image: url("https://webcdn.jide.com/jide_upload/2016_07/1469438393665_S1qOqG_anim-text.png");
  } /* In large width screen, we use same icons as the medium width screen. Just make bottom value different from the medium. */
}

/* IE8 and IE9 cannot make these animations, so we use css hack here: */
.anim-logo {
  width: 238px\0;
  height: 238px\0;
  margin-left: -119px\0;
  background-image: url("https://webcdn.jide.com/jide_upload/2016_01/1453272424788_LhH3J6_animlogo_mid.png")\0;
  bottom: 370px\0;
  opacity: 1\0;
}
.anim-text {
  width: 440px\0;
  height: 101.4px\0;
  margin-left: -220px\0;
  background-image: url("https://webcdn.jide.com/jide_upload/2016_07/1469438393665_S1qOqG_anim-text.png")\0;
  bottom: 190px\0;
  background-size: contain;
}