/****************************\
 *          General         *
\****************************/
  *
  {
    margin:0;
    padding:0;
  }
  html
  {
    position: relative;
    width: 100%;
    height: 100%;
  }
  body
  {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 910px;
    min-height: 605px;
    background-color: black;
    -webkit-user-select: none; /* Safari 3.1+ */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard syntax */
    font-style: normal;
    font-size: 12px;
    color: #000;
  }
  body[data-lang="en"]{
    font-family: itc-american-typewriter, serif;
    font-weight: 500;
  }
  body[data-lang="tc"] {
    font-family: 'Noto Serif TC', serif;
    font-weight: 400;
    letter-spacing: 1.5px;
  }
  body[data-lang="sc"] {
    font-family: 'Noto Serif SC', serif;
    font-weight: 400;
    letter-spacing: 1.5px;
  }
  body a
  {
    text-decoration: none;
  }
  /*body[data-lang="tc"] p{
    font-size: 1.1em;
  }
  body[data-lang="sc"] p{
    font-size: 1.1em;
  }*/
  .image
  {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
       -ms-flex-pack: center;
     justify-content: center;
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
  }
  .image img
  {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
  }
  #wrapper
  {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
//    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
  }
  #main
  {
    position: relative;
    display: inline-block;
    width: 910px;
    height: 605px;
    /*border: 1px solid red;*/
    overflow: hidden;
  }
  #main .bg-container
  {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
  }
  #main .bg-container img
  {
    width: 100%;
    height: 100%;
  }

/****************************\
 *          Header          *
\****************************/
  #header
  {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 13px 20px 0 10px;
    z-index: 50;
  }
  #header .menu-btn
  {
    display: inline-block;
    height: 35px;
    background-repeat: no-repeat;
    background-position: 0 0;
    vertical-align: top;
    cursor: pointer;
  }
  #header .menu-left
  {
    float: left;
  }
  #header .menu-left .menu-btn-home
  {
    width: 17px;
    height: 13px;
    margin-top: 3px;
    background-image: url("../img/menu/home-btn-off.png");
  }
  #header .menu-left .menu-btn-home:hover
  {
    background-image: url("../img/menu/home-btn-on.png");
  }
  #header .menu-left .menu-btn-en
  {
    width: 39px;
    height: 29px;
    margin-top: 3px;
    background-image: url("../img/menu/menu-en-off.png");
  }
  body[data-lang="en"] #header .menu-left .menu-btn-en,
  #header .menu-left .menu-btn-en:hover
  {
    background-image: url("../img/menu/menu-en-on.png");
  }
  #header .menu-left .menu-btn-tc
  {
    width: 15px;
    height: 34px;
    margin-top: 3px;
    background-image: url("../img/menu/menu-tc-off.png");
    background-repeat: no-repeat;
  }
  body[data-lang="tc"] #header .menu-left .menu-btn-tc,
  #header .menu-left .menu-btn-tc:hover
  {
    background-image: url("../img/menu/menu-tc-on.png");
  }
  #header .menu-left .menu-btn-sc
  {
    width: 39px;
    height: 29px;
    margin-top: 3px;
    background-image: url("../img/menu/menu-sc-off.png");
    background-repeat: no-repeat;
  }
  body[data-lang="sc"] #header .menu-left .menu-btn-sc,
  #header .menu-left .menu-btn-sc:hover
  {
    background-image: url("../img/menu/menu-sc-on.png");
  }
  #header .menu-left .menu-btn-fullscreen{
    width: 76px;
    height: 27px;
    margin-top: 0;
  }

  body[data-lang="en"] #header .menu-left .menu-btn-fullscreen
  {
    background-image: url("../img/menu/fullscreen-btn-en.png");
  }
  body[data-lang="tc"] #header .menu-left .menu-btn-fullscreen
  {
    background-image: url("../img/menu/fullscreen-btn-tc.png");
  }
  body[data-lang="sc"] #header .menu-left .menu-btn-fullscreen
  {
    background-image: url("../img/menu/fullscreen-btn-sc.png");
  }
  body[data-lang="en"] #header .menu-left .menu-btn-fullscreen:hover
  {
    background-image: url("../img/menu/fullscreen-btn-en-on.png");
  }
  body[data-lang="tc"] #header .menu-left .menu-btn-fullscreen:hover
  {
    background-image: url("../img/menu/fullscreen-btn-tc-on.png");
  }
  body[data-lang="sc"] #header .menu-left .menu-btn-fullscreen:hover
  {
    background-image: url("../img/menu/fullscreen-btn-sc-on.png");
  }
  #header .menu-right
  {
    float: right;
  }
  #header .menu-right .menu-btn-about,
  body[data-lang="en"] #header .menu-right .menu-btn-about
  {
    height: 38px;
    width: 102px;
    margin-top: -7px;
    background-image: url("../img/menu/about-btn-en.png");
  }
  body[data-lang="tc"] #header .menu-right .menu-btn-about
  {
    background-image: url("../img/menu/about-btn-tc.png");
  }
  body[data-lang="sc"] #header .menu-right .menu-btn-about
  {
    background-image: url("../img/menu/about-btn-sc.png");
  }

  #overlay-about
  {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.8); /* Black background with opacity */
    z-index: 999; /* Specify a stack order in case you're using a different order for other elements */
  }
  #overlay-about .general-info
  {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 660px;
    height: 270px;
    border: 1px solid white;
    border-radius: 10px;
    background-color: #000000;
    color: #FFFFFF;
    font-size: 10px;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    padding: 40px;
  }
  #overlay-about .general-info .overlay-header
  {
    max-height: 30px;
    margin-bottom: 20px;
  }
  #overlay-about .general-info .overlay-header p
  {
    margin: 0;
    color: #EEBB5E;
    font-size: 20px;
    font-weight: bold;
  }
  #overlay-about .general-info .overlay-description
  {
    height: calc(100% - 50px);
    padding-right: 2em;
    overflow: auto;
  }
  #overlay-about .general-info .overlay-description p
  {
    font-size: 15px;
  }
  #overlay-about .general-info .btn-close
  {
    position: absolute;
    bottom: -19px;
    right: -19px;
    margin: 0;
    cursor:pointer;
  }

/*****************************\
 *          Global           *
\*****************************/
  .light
  {
    font-weight: 300;
  }
  .normal
  {
    font-weight: 400;
  }
  .bold
  {
    font-weight: 700;
  }
  a,a:hover{
    color: white;
  }
  a.btn:hover
  {
    color: #FFFFFF;
  }
  /* Chrome, Safari and Opera syntax */
  :-webkit-full-screen
  {
    background-color: black;
  }
  /* Firefox syntax */
  :-moz-full-screen
  {
    background-color: black;
  }
  /* IE/Edge syntax */
  :-ms-fullscreen
  {
    background-color: black;
  }
  /* Standard syntax */
  :fullscreen
  {
    background-color: black;
  }
  .text-on-photo
  {
    position: absolute;
    right: 0;
    margin: 0 auto;
    text-align: center;
    color: black;
  }

/*****************************\
 *   General Widget - Radio  *
\*****************************/
  .radio
  {
    position: absolute;
    top: 85px;
    left: 0;
    right: 0;
    margin: auto;
    width: 744px;
    height: 480px;
    z-index: 1;
  }
  .radio .radio-wrapper
  {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .radio .radio-bg
  {
    width: 100%;
    height: 100%;
    background-image: url("../img/radio-bg.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
  }
  .radio .radio-slider
  {
    position: absolute;
    top: 54px;
    left: 160px;
    width: 300px;
    height: 100px;
    /*border: 1px dotted #ffff00;*/
  }
  .radio .radio-slider .radio-slider-wrapper
  {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .radio .radio-indicator
  {
    position: absolute;
    height: 100%;
    border-left: 2px solid rgba(198, 86, 78, 0.95);
  }
  .radio .radio-tuner
  {
    position: absolute;
    top: 54px;
    left: 560px;
    width: 100px;
    height: 100px;
  }
  .radio .radio-tuner .radio-tuner-wrapper
  {
    position: absolute;
    top: 0;
    left: 0;
  }
  .radio .radio-tuner .rotate-right
  {
    position: absolute;
    display: none;
    top: 21px;
    left: 25px;
    background-image: url("../img/radio/rotate-right.png");
    background-repeat: no-repeat;
    background-size: contain;
  }
  .radio .radio-tuner .rotate-right img
  {
    max-width: 100%;
  }
  .radio .radio-bubble-right{
    /*display: none;*/
    position: absolute;
    display: none;
    top: 64px;
    right: 167px;
    width: 225px;
    height: 60px;
    /*border: 1px solid red;*/
  }
  .radio .radio-bubble-right img{
    width: 100%;
    height: 100%;
  }
  .radio .radio-bubble-right .text-on-photo{
    left: -13px;
    top: 17px;
    width: 160px;
    font-size: 1.6em;
  }
  .radio .radio-knob
  {
  }
  .radio .radio-knob a
  {
    position: relative;
    display: inline-block;
    width: 57px;
    height: 57px;
  }
  .radio .radio-knob a .radio-knob-img
  {
    transform: rotate(160deg);
  }
  .radio .radio-knob a .btn-tooltip
  {
    position: absolute;
    top: -20px;
    right: 120%;
    display: none;
  }
  .radio .radio-knob:hover a .radio-knob-img
  {
    transform: rotate(120deg);
  }
  .radio .radio-knob:hover a .btn-tooltip
  {
    display: block;
  }
  .radio .radio-knob.btn-gallery
  {
    position: absolute;
    top: 240px;
    left: 600px;
  }
  .radio .radio-knob.btn-gallery .text-on-photo,
  body[data-lang="en"] .radio .radio-knob.btn-gallery .text-on-photo
  {
    left: 50px;
    top: 39px;
    width: 148px;
  }
  body[data-lang="tc"] .radio .radio-knob.btn-gallery .text-on-photo,
  body[data-lang="sc"] .radio .radio-knob.btn-gallery .text-on-photo
  {
    left: 50px;
    top: 34px;
    width: 148px;
    font-size: 1.5em;
    letter-spacing: 3px;
    -webkit-transform: scaleX(0.8);
    -ms-transform: scaleX(0.8);
    transform: scaleX(0.8);
  }
  .radio .radio-knob.btn-writes
  {
    position: absolute;
    top: 317px;
    left: 600px;
  }
  .radio .radio-knob.btn-writes .text-on-photo,
  body[data-lang="en"] .radio .radio-knob.btn-writes .text-on-photo
  {
    left: 51px;
    top: 39px;
    width: 219px;
    line-height: 1.15em;
  }
  body[data-lang="tc"] .radio .radio-knob.btn-writes .text-on-photo,
  body[data-lang="sc"] .radio .radio-knob.btn-writes .text-on-photo
  {
    left: 50px;
    top: 49px;
    width: 148px;
    font-size: 1.5em;
    letter-spacing: 3px;
    -webkit-transform: scaleX(0.8);
    -ms-transform: scaleX(0.8);
    transform: scaleX(0.8);
  }
  .radio .radio-toggle
  {
  }
  .radio .radio-toggle a
  {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 14px;
  }
  .radio .radio-toggle a .btn-tooltip
  {
    position: absolute;
    top: -42px;
    left: 14px;
    display: none;
  }
  .radio .radio-toggle:hover a .btn-tooltip
  {
    display: block;
  }
  .radio .radio-toggle.btn-acknowledge
  {
    position: absolute;
    top: 395px;
    left: 608px;
  }
  .radio .radio-toggle.btn-acknowledge a .btn-tooltip,
  body[data-lang="en"] .radio .radio-toggle.btn-acknowledge a .btn-tooltip
  {
    top: -42px;
    left: 14px;
  }
  body[data-lang="tc"] .radio .radio-toggle.btn-acknowledge a .btn-tooltip,
  body[data-lang="sc"] .radio .radio-toggle.btn-acknowledge a .btn-tooltip
  {
    top: -32px;
    left: 34px;
  }

  .radio .radio-toggle.btn-acknowledge a .btn-tooltip img,
  body[data-lang="en"] .radio .radio-toggle.btn-acknowledge a .btn-tooltip img
  {
    width: 205px;
    height: 40px;
  }
  body[data-lang="tc"] .radio .radio-toggle.btn-acknowledge a .btn-tooltip img,
  body[data-lang="sc"] .radio .radio-toggle.btn-acknowledge a .btn-tooltip img
  {
    width: 92px;
    height: 35px;
  }
  .radio .radio-toggle.btn-acknowledge .text-on-photo,
  body[data-lang="en"] .radio .radio-toggle.btn-acknowledge .text-on-photo
  {
    top: 9px;
    left: 9px;
    width: 176px;
  }
  body[data-lang="tc"] .radio .radio-toggle.btn-acknowledge .text-on-photo,
  body[data-lang="sc"] .radio .radio-toggle.btn-acknowledge .text-on-photo
  {
    top: 4px;
    left: 18px;
    width: 66px;
    font-size: 1.4em;
    letter-spacing: 3px;
  }
  .radio .radio-brand
  {
    position: absolute;
    top: 387px;
    left: 62px;
  }

/*****************************\
 *General Widget - SmallRadio*
\*****************************/
  .small-radio
  {
    position: absolute;
    bottom: 5px;
    left: 5px;
    height: 250px;
    width: 216px;
    z-index: 50;
  }
  .small-radio img
  {
    width: 100%;
    height: 100%;
  }
  .leftBubble-for-radio,
  body[data-lang="en"] .leftBubble-for-radio
  {
    position: absolute;
    bottom: 45px;
    left: 191px;
    width: 141px;
    height: 32px;
    z-index: 51;
  }
  body[data-lang="tc"] .leftBubble-for-radio,
  body[data-lang="sc"] .leftBubble-for-radio
  {
    width: 141px;
    height: 32px;
    bottom: 45px;
  }
  .leftBubble-for-radio img
  {
    width: 100%;
    height: 100%
  }

/*****************************\
 *      Radio Navigation     *
\*****************************/
  .radio-overlay-bg
  {
    position: fixed;
    width: 910px;
    height: 605px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(128, 117, 0, 0.7);
    margin: auto;
    display: none;
    z-index: 49;
  }
  .radio.radio-sm
  {
    top: auto;
    right: auto;
    bottom: -155px;
    left: 0;
    width: 450px;
    height: 300px;
    -webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
    z-index: 50;
  }
  #main[role="acknowledge"] .radio-sm,
  #main[role="writes"] .radio-sm,
  #main[role="gallery"] .radio-sm,
  #main[role="album"] .radio-sm
  {
    display: none;
  }
  .radio.radio-sm.active
  {
    bottom: -8px;
  }
  .radio.radio-sm .radio-antenna
  {
    position: absolute;
    top: 3px;
    left: 9px;
  }
  .radio.radio-sm .radio-slider
  {
    position: absolute;
    top: 10px;
    left: 37px;
    width: 275px;
    height: 87px;
    /*border: 1px dotted #ffff00;*/
  }
  .radio.radio-sm .radio-slider .radio-slider-wrapper
  {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .radio.radio-sm .radio-indicator
  {
    position: absolute;
    /*height: 100%;*/
    border-left: 0;
    cursor: pointer;
  }
  .radio.radio-sm .radio-indicator img
  {
    height: 100%;
    width: 32px;
  }
  .radio.radio-sm .radio-tuner
  {
    position: absolute;
    top: 35px;
    left: 350px;
    width: 50px;
    height: 50px;
  }
  .radio.radio-sm .radio-tuner .radio-tuner-wrapper
  {
    position: absolute;
    top: 0;
    left: 0;
  }
  .radio.radio-sm .radio-tuner .rotate-right
  {
    position: absolute;
    display: none;
    top: 17px;
    left: 19px;
  }
  .radio.radio-sm .radio-bubble-down{
    display: none;
    position: absolute;
    top: 47px;
    right: 144px;
    width: 225px;
    height: 60px;
    /*border: 1px solid red;*/
  }
  .radio.radio-sm .radio-bubble-down img{
    width: 100%;
    height: 100%;
  }
  .radio.radio-sm .radio-bubble-down .text-on-photo{
    left: -13px;
    top: 9px;
    width: 160px;
    font-size: 1.6em;
  }
  .radio.radio-sm .radio-knob
  {
  }
  .radio.radio-sm .radio-knob a {
    position: relative;
    display: inline-block;
    width: 35px;
    height: 35px;
  }
  .radio.radio-sm .radio-knob a img {
    width: 100%;
    height: 100%;
  }
  .radio.radio-sm .radio-knob a .radio-knob-img {
    transform: rotate(160deg);
  }
  .radio.radio-sm .radio-knob a .btn-tooltip {
    position: absolute;
    top: 0px;
    right: 40px;
    display: none;
  }
  .radio.radio-sm .radio-knob:hover a .radio-knob-img {
    transform: rotate(120deg);
  }
  .radio.radio-sm .radio-knob:hover a .btn-tooltip {
    display: block;
  }
  .radio.radio-sm .radio-knob.btn-gallery
  {
    position: absolute;
    top: 150px;
    left: 363px;
  }
  .radio.radio-sm .radio-knob.btn-gallery .btn-tooltip
  {
    width: 141px;
    height: 32px;
  }
  .radio.radio-sm .radio-knob.btn-gallery .text-on-photo,
  body[data-lang="en"] .radio.radio-sm .radio-knob.btn-gallery .text-on-photo
  {
    left: -7px;
    top: 9px;
    width: 112px;
  }
  body[data-lang="tc"] .radio.radio-sm .radio-knob.btn-gallery .text-on-photo,
  body[data-lang="sc"] .radio.radio-sm .radio-knob.btn-gallery .text-on-photo
  {
    left: -9px;
    top: 8px;
    width: 118px;
    font-size: 1.1em;
  }
  .radio.radio-sm .radio-knob.btn-writes
  {
    position: absolute;
    top: 195px;
    left: 363;
  }
  .radio.radio-sm .radio-knob.btn-writes .btn-tooltip,
  body[data-lang="en"] .radio.radio-sm .radio-knob.btn-writes .btn-tooltip
  {
    width: 210px;
    height: 32px;
  }
  body[data-lang="tc"] .radio.radio-sm .radio-knob.btn-writes .btn-tooltip,
  body[data-lang="sc"] .radio.radio-sm .radio-knob.btn-writes .btn-tooltip
  {
    width: 141px;
    height: 32px;
  }
  .radio.radio-sm .radio-knob.btn-writes .text-on-photo,
  body[data-lang="en"] .radio.radio-sm .radio-knob.btn-writes .text-on-photo
  {
    left: -15px;
    top: 8px;
    width: 178px;
    line-height: 1.08em;
    font-size: 0.8em;
  }
  body[data-lang="tc"] .radio.radio-sm .radio-knob.btn-writes .text-on-photo,
  body[data-lang="sc"] .radio.radio-sm .radio-knob.btn-writes .text-on-photo
  {
    left: -9px;
    top: 11px;
    width: 120px;
    font-size: 1.1em;
  }
  .radio.radio-sm .radio-toggle
  {
  }
  .radio.radio-sm .radio-toggle a
  {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 14px;
  }
  .radio.radio-sm .radio-toggle a .btn-tooltip
  {
    position: absolute;
    top: -40px;
    left: 120%;
    display: none;
  }
  .radio.radio-sm .radio-toggle:hover a .btn-tooltip
  {
    display: block;
  }
  .radio.radio-sm .radio-toggle.btn-acknowledge
  {
    position: absolute;
    top: 240px;
    left: 363;
  }
  .radio.radio-sm .radio-toggle.btn-acknowledge a .btn-tooltip img,
  body[data-lang="en"] .radio.radio-sm .radio-toggle.btn-acknowledge a .btn-tooltip img
  {
    width: 224px;
    height: 40px;
  }
  body[data-lang="tc"] .radio.radio-sm .radio-toggle.btn-acknowledge a .btn-tooltip img,
  body[data-lang="sc"] .radio.radio-sm .radio-toggle.btn-acknowledge a .btn-tooltip img
  {
    width: 92px;
    height: 35px;
  }
  .radio.radio-sm .radio-toggle.btn-acknowledge .text-on-photo,
  body[data-lang="en"] .radio.radio-sm .radio-toggle.btn-acknowledge .text-on-photo
  {
    top: 9px;
    left: 9px;
    width: 176px;
  }
  body[data-lang="tc"] .radio.radio-sm .radio-toggle.btn-acknowledge .text-on-photo,
  body[data-lang="sc"] .radio.radio-sm .radio-toggle.btn-acknowledge .text-on-photo
  {
    top: 4px;
    left: 13px;
    width: 66px;
    font-size: 1.2em;
  }
  .radio.radio-sm .radio-brand {
    position: absolute;
    top: 237px;
    left: 38px;
  }
  .radio.radio-sm .radio-brand img{
    width: 60%;
  }
  .radio.radio-sm .radio-nav {
    position: absolute;
    top: -36px;
    left: 60px;
    width: 385px;
    height: 45px;
  }
  .radio.radio-sm .radio-nav .radio-nav-wrapper,
  body[data-lang="en"] .radio.radio-sm .radio-nav .radio-nav-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    font-size: 1.1em;
    font-style: italic;
  }
  body[data-lang="tc"] .radio.radio-sm .radio-nav .radio-nav-wrapper,
  body[data-lang="sc"] .radio.radio-sm .radio-nav .radio-nav-wrapper {
    font-size: 1.3em;
    font-style: initial;
  }
  .radio.radio-sm .radio-nav .radio-nav-wrapper .life-event-bubble {
    position: absolute;
    display: none;
    top: 0;
    width: 300px;
    color: #CAFFFF;
    letter-spacing: 1px;
    text-shadow: 3px 3px 4px #000000;
  }
  body[data-lang="tc"] .radio.radio-sm .radio-nav .radio-nav-wrapper .life-event-bubble,
  body[data-lang="sc"] .radio.radio-sm .radio-nav .radio-nav-wrapper .life-event-bubble{
    letter-spacing: 3px;
  }
  .radio.radio-sm .radio-nav .radio-nav-wrapper .life-event-bubble.active {
    display: block;
  }
  .radio.radio-sm .radio-nav .radio-nav-wrapper #life-event1 {
    left: 0;
  }
  .radio.radio-sm .radio-nav .radio-nav-wrapper #life-event2 {
    left: 50px;
  }
  .radio.radio-sm .radio-nav .radio-nav-wrapper #life-event3 {
    left: 100px;
  }
  .radio.radio-sm .radio-nav .radio-nav-wrapper #life-event4 {
    left: 160px;
  }
  .radio.radio-sm .radio-nav .radio-nav-wrapper #life-event5 {
    left: 215px;
  }
  .radio.radio-sm .radio-nav .radio-nav-wrapper #life-event6 {
    left: 260px;
  }

  .nav-cwm-logo
  {
    position: absolute;
    bottom: 50px;
    right: 20px;
    border: 3px solid #FFFFFF;
    z-index: 48;
  }
  .nav-copyright
  {
    position: absolute;
    bottom: 20px;
    right: 20px;
    padding: 1px 5px;
    background-color: #CECECE;
    color: #000000;
    font-size: 10px;
    letter-spacing: 1.2px;
    z-index: 48;
  }
  .nav-copyright:hover
  {
    color: inherit;
    text-decoration: none;
  }

/*****************************\
 *  Overlay -  Full version  *
\*****************************/

  #full-version-overlay {
    display: none; /* Hidden by default */
    z-index: 999;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #000000;
    min-width: 910px;
    min-height: 605px;
    max-width: 880px;
    position: absolute;
    top: 0;
    /*left: 230px;*/
    background-image: url(../img/yellow-bg.png);
    background-size: cover;
  }

  #full-version-overlay .general-info{
    position: absolute;
    top: 43%;
    left: 50%;
    width: 577px;
    height: 329px;
    border: 1px solid white;
    border-radius: 10px;
    font-size: 10px;
    color: white;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    background-color: black;
    padding: 40px 30px;
  }
  #full-version-overlay .general-info .img-wrapper{
    position: absolute;
    top: -32px;
    left: -12px;
  }
  #full-version-overlay .general-info .img-wrapper img{}

   #full-version-overlay .general-info .img-wrapper .text-on-photo {
    left: 15px;
    top: 28%;
    color: white;
    -ms-transform: rotate(-6deg); /* IE 9 */
    -webkit-transform: rotate(-6deg); /* Safari prior 9.0 */
    transform: rotate(-6deg); /* Standard syntax */
    font-size: 17px;
  }

  #full-version-overlay .general-info .overlay-header{
    margin-bottom: 10px;
  }
  #full-version-overlay .general-info .overlay-header p{
    font-size: 1.6em;
    font-weight: bold;
    color: #EEBB5E;
    margin: 0;
  }
  #full-version-overlay .general-info .overlay-description{
    height: 170px;
    margin-top: 20px;
    padding-right: 2em;
    overflow:auto;
  }
  #full-version-overlay .general-info .overlay-description p{
    font-size: 1.3em;
    text-align: justify;
    font-weight: 300;
  }
  #full-version-overlay .general-info #closebutton-full{
    position: absolute;
    bottom: -19px;
    right: -19px;
    margin: 0;
    cursor:pointer;
  }

/*****************************\
 *      Overlay -  clip       *
\*****************************/

  #clip-overlay {
    display: none; /* Hidden by default */
    z-index: 999;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #000000;
    min-width: 910px;
    min-height: 605px;
    max-width: 880px;
    position: absolute;
    top: 0;
    /*left: 230px;*/
    background-image: url(../img/yellow-bg.png);
    background-size: cover;
  }

  #clip-overlay .general-info{
    position: absolute;
    top: 38%;
    left: 50%;
    width: 348px;
    height: 325px;
    border: 1px solid white;
    border-radius: 10px;
    font-size: 10px;
    color: white;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    background-color: black;
    padding: 40px 20px 40px 20px;
  }
  #clip-overlay .general-info .overlay-clip-number{
    position: absolute;
    top: 15px;
    right: 20px;
  }
  #clip-overlay .general-info .overlay-clip-number p{
    margin: 0;
    color: white;
    font-size: 1.4em;
    font-weight: bold;
    line-height: 1.3em;
    text-align: right;
  }
  #clip-overlay .general-info .overlay-header {
    max-height: 55px;
    margin-bottom: 10px;
  }
  #clip-overlay .general-info .overlay-header p{
    margin: 0;
    color: white;
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1.3em;
  }
  #clip-overlay .general-info .overlay-event-name {
    max-height: 55px;
    margin-bottom: 10px;
  }
  #clip-overlay .general-info .overlay-event-name p{
    font-size: 1.4em;
    font-weight: 300;
    color: #FECB32;
    margin: 0;
  }
  #clip-overlay .general-info .overlay-description {
    height: 90px;
    margin-top: 15px;
    padding-right: 2em;
    overflow: auto;
  }
  #clip-overlay .general-info .media-player{}
  #clip-overlay .general-info .media-player img{
    width: 90%;
  }

  #clip-overlay .general-info .overlay-description p{
    font-size: 1.3em;
    text-align: justify;
    font-weight: 300;
  }
  #clip-overlay .general-info #close-clip {
    position: absolute;
    bottom: -19px;
    right: -19px;
    margin: 0;
    cursor: pointer;
  }

/*****************************\
 * Overlay -  Album Preview  *
\*****************************/
  #overlay-preview
  {
    position: absolute;
    display: none; /* Hidden by default */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: auto;
    background-color: rgba(0,0,0,0.8);
    z-index: 49;
    cursor: pointer;
  }
  #overlay-preview .general-info
  {
    position: absolute;
    top: 60px;
    bottom: 190px;
    left: 100px;
    right: 100px;
    margin: auto;
    color: white;
    /*border: 1px solid white;*/
  }
  #overlay-preview .general-info .image-wrapper
  {
    position: relative;
    width: 100%;
    height: 100%;
  }
  #overlay-preview .general-info .image-wrapper img
  {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
  }
  #overlay-preview .image-description
  {
    position: absolute;
    bottom: 0;
    margin: auto 0 0 0;
    right: 0px;
    width: 270px;
    min-height: 249px;
    font-size: 17px;
    color: black;
  }
  #overlay-preview .image-description .image-content
  {
  }
  #overlay-preview .image-description .image-content p
  {
    line-height: 30px;
    background-image: url(../img/caption-line-bg.png);
    background-size: 230px;
    padding: 0 4px;
  }
  #overlay-preview .image-description .image-year
  {
  }
  #overlay-preview .image-description .image-year p
  {
    background: #908F74;
    line-height: 30px;
    padding: 0 4px;
  }

/*****************************\
 *         Index Page        *
\*****************************/
  .life-event-bubbles
  {
    position: absolute;
    top: 27px;
    left: 194px;
    width: 622px;
    height: 84px;
  }
  .life-event-bubbles .life-events-wrapper
  {
    position: relative;
  }
  .life-event-bubbles .life-event-bubble
  {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    top: 0;
    height: 84px;
    width: 276px;
    padding: 10px 5px 23px 80px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0 0;
    -webkit-transition: opacity 0.8s ease-in;
    -o-transition: opacity 0.8s ease-in;
    transition: opacity 0.8s ease-in;
    cursor: pointer;
    opacity: 0;
    z-index: 0;
  }
  .life-event-bubbles .life-event-bubble.active
  {
    opacity: 1;
    z-index: 51;
  }
  .life-event-bubbles .life-event-bubble .life-event-title
  {
    display: inline-block;
  }
  .life-event-bubbles .life-event-bubble .life-event-title p
  {
    margin: 0;
    font-size: 14px;
    color: #000000;
  }
  .life-event-bubbles .life-event-bubble#life-event1
  {
    background-image: url("../img/event-bubble-1.png");
    left: 0px;
  }
  .life-event-bubbles .life-event-bubble#life-event2
  {
    background-image: url("../img/event-bubble-2.png");
    left: 53px;
  }
  .life-event-bubbles .life-event-bubble#life-event3
  {
    background-image: url("../img/event-bubble-3.png");
    left: 110px;
  }
  .life-event-bubbles .life-event-bubble#life-event4
  {
    background-image: url("../img/event-bubble-4.png");
    left: 170px;
  }
  .life-event-bubbles .life-event-bubble#life-event5
  {
    background-image: url("../img/event-bubble-5.png");
    left: 220px;
  }
  .life-event-bubbles .life-event-bubble#life-event6
  {
    background-image: url("../img/event-bubble-6.png");
    left: 280px;
  }
  .footer
  {
  }
  .footer .web-accessbility
  {
    position: absolute;
    bottom: 6px;
    left: 96px;
    width: 87px;
    height: 29px;
  }
  .footer .copyright
  {
    position: absolute;
    bottom: 6px;
    right: 96px;
    width: 320px;
    height: 28px;
  }
  body[data-lang="tc"] .footer .copyright,
  body[data-lang="sc"] .footer .copyright
  {
    width: 191px;
  }

/*****************************\
 *        Acknowledge        *
\*****************************/
  .acknowledge
  {
    position: absolute;
    top: 70px;
    width: 370px;
    left: 263px;
    color: #023564;
    font-size: 1.2em;
  }
  .acknowledge .title
  {
    text-align: center;
    font-weight: 700;
    font-size: 1.1em;
  }
  .acknowledge .description,
  body[data-lang="en"] .acknowledge .description
  {
    margin-top: 10px;
    height: 250px;
    overflow: auto;
    padding-right: 1.3em;
    letter-spacing: -0.6px;
  }
  body[data-lang="tc"] .acknowledge .description,
  body[data-lang="sc"] .acknowledge .description
  {
    font-weight: 700;
    font-size: 1.1em;
    letter-spacing: 1.5px;
  }
  #main[role="acknowledge"] .leftBubble-for-radio,
  body[data-lang="en"] #main[role="acknowledge"] .leftBubble-for-radio
  {
    width: 155px;
    height: 32px;
    bottom: 8px;
  }
  body[data-lang="tc"] #main[role="acknowledge"] .leftBubble-for-radio,
  body[data-lang="sc"] #main[role="acknowledge"] .leftBubble-for-radio
  {
    width: 78px;
    height: 32px;
    bottom: 8px;
  }

/*****************************\
 *      Chung's Summary      *
\*****************************/
  .chung-write
  {
    position: absolute;
    top: 60px;
    width: 370px;
    left: 130px;
    color: #023564;
    font-size: 1.2em;
  }
  .chung-write .title
  {
    text-align: center;
    font-weight: 700;
    font-size: 1.1em;
  }
  .chung-write .sub-title
  {
    text-align: center;
    font-weight: 500;
    font-size: 0.9em;
  }
  .chung-write .description,
  body[data-lang="en"] .chung-write .description
  {
    margin-top: 10px;
    height: 250px;
    overflow: auto;
    padding-right: 1.3em;
    letter-spacing: -0.6px;
  }
  body[data-lang="tc"] .chung-write .description,
  body[data-lang="sc"] .chung-write .description
  {
    font-weight: 700;
    font-size: 1.1em;
    letter-spacing: 1.5px;
  }
  #main[role="writes"] .leftBubble-for-radio,
  body[data-lang="en"] #main[role="writes"] .leftBubble-for-radio
  {
    width: 141px;
    height: 32px;
    bottom: 22px;
  }
  body[data-lang="tc"] #main[role="writes"] .leftBubble-for-radio,
  body[data-lang="sc"] #main[role="writes"] .leftBubble-for-radio
  {
    width: 154px;
    height: 32px;
    bottom: 22px;
  }

/*****************************\
 *       Photo Gallery       *
\*****************************/
  .album-wrapper
  {
    position: absolute;
    width: 238px;
    height: 200px;
  }
  .album
  {
    position: relative;
    width: 238px;
    height: 166px;
    background-repeat: no-repeat;
    background-position: 0 0;
    -webkit-transition: all 100ms ease-in-out;
    -o-transition: all 100ms ease-in-out;
    transition: all 100ms ease-in-out;
  }
  .album-title {
    margin-top: 7px;
    text-align: right;
    font-size: 1.2em;
  }
  .album-title p {
    margin: 0;
  }

  .album1-wrapper {
    top: 90px;
    left: 92px;
  }
  .album1,
  body[data-lang="en"] .album1
  {
    background-image:url("../img/gallery/album-en-1.png");
  }
  .album1:hover,
  body[data-lang="en"] .album1:hover
  {
    background-image:url("../img/gallery/album-en-1-hover.png");
  }
  body[data-lang="tc"] .album1,
  body[data-lang="sc"] .album1
  {
    background-image:url("../img/gallery/album-tc-1.png");
  }
  body[data-lang="tc"] .album1:hover,
  body[data-lang="sc"] .album1:hover
  {
    background-image:url("../img/gallery/album-tc-1-hover.png");
  }

  .album2-wrapper {
    top: 90px;
    left: 338px;
  }
  .album2,
  body[data-lang="en"] .album2
  {
    background-image:url("../img/gallery/album-en-2.png");
  }
  .album2:hover,
  body[data-lang="en"] .album2:hover
  {
    background-image:url("../img/gallery/album-en-2-hover.png");
  }
  body[data-lang="tc"] .album2,
  body[data-lang="sc"] .album2
  {
    background-image:url("../img/gallery/album-tc-2.png");
  }
  body[data-lang="tc"] .album2:hover,
  body[data-lang="sc"] .album2:hover
  {
    background-image:url("../img/gallery/album-tc-2-hover.png");
  }

  .album3-wrapper {
    top: 90px;
    left: 584px;
  }
  .album3,
  body[data-lang="en"] .album3
  {
    background-image:url("../img/gallery/album-en-3.png");
  }
  .album3:hover,
  body[data-lang="en"] .album3:hover
  {
    background-image:url("../img/gallery/album-en-3-hover.png");
  }
  body[data-lang="tc"] .album3,
  body[data-lang="sc"] .album3
  {
    background-image:url("../img/gallery/album-tc-3.png");
  }
  body[data-lang="tc"] .album3:hover,
  body[data-lang="sc"] .album3:hover
  {
    background-image:url("../img/gallery/album-tc-3-hover.png");
  }

  .album4-wrapper {
    top: 290px;
    left: 338px;
  }
  .album4,
  body[data-lang="en"] .album4
  {
    background-image:url("../img/gallery/album-en-4.png");
  }
  .album4:hover,
  body[data-lang="en"] .album4:hover
  {
    background-image:url("../img/gallery/album-en-4-hover.png");
  }
  body[data-lang="tc"] .album4,
  body[data-lang="sc"] .album4
  {
    background-image:url("../img/gallery/album-tc-4.png");
  }
  body[data-lang="tc"] .album4:hover,
  body[data-lang="sc"] .album4:hover
  {
    background-image:url("../img/gallery/album-tc-4-hover.png");
  }

  .album5-wrapper {
    top: 290px;
    left: 584px;
  }
  .album5,
  body[data-lang="en"] .album5
  {
    background-image:url("../img/gallery/album-en-5.png");
  }
  .album5:hover,
  body[data-lang="en"] .album5:hover
  {
    background-image:url("../img/gallery/album-en-5-hover.png");
  }
  body[data-lang="tc"] .album5,
  body[data-lang="sc"] .album5
  {
    background-image:url("../img/gallery/album-tc-5.png");
  }
  body[data-lang="tc"] .album5:hover,
  body[data-lang="sc"] .album5:hover
  {
    background-image:url("../img/gallery/album-tc-5-hover.png");
  }

/*****************************\
 *           Album          *
\*****************************/
  .booklet_wrapper{
    position: absolute;
    top: 65px;
    left: 121px;
    width: 620px;
    height: 350px;
    /*half - 310 px*/
    /*half height - 175 px*/
    border: 2px solid red;
  }
  .booklet_wrapper .booklet{
    position: relative;
  }
  .back-button-wrapper {
    position: absolute;
    bottom: 120px;
    right: 130px;
    /*border: 2px red solid;*/
  }
  .btnBack,
  body[data-lang="en"] .btnBack {
    /*border-radius: 6px;*/
    cursor:pointer;
    width: 56px;
    height: 22px;
    padding: 0;
    border: none;
    background-image: url("../img/buttons/back-btn-en.png");
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: contain;
    margin: 0 auto;
    border-radius: 5px;
  }
  body[data-lang="tc"] .btnBack {
    background-image: url("../img/buttons/back-btn-tc.png");
  }
  body[data-lang="sc"] .btnBack {
    background-image: url("../img/buttons/back-btn-sc.png");
  }
  .btnBack:hover,
  body[data-lang="en"] .btnBack:hover{
    background-image: url("../img/buttons/back-btn-en-hover.png");
  }
  body[data-lang="tc"] .btnBack:hover{
    background-image: url("../img/buttons/back-btn-tc-hover.png");
  }
  body[data-lang="sc"] .btnBack:hover{
    background-image: url("../img/buttons/back-btn-sc-hover.png");
  }

/*****************************\
 *     Life Event General    *
\*****************************/
  .life-event-scenes
  {
    position: absolute;
    top: 0;
    left: 0;
    margin: auto;
    width: 100%;
    height: 100%;
  }
  .life-event-scenes .life-event-scene
  {
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    margin: auto;
    width: 100%;
    height: 100%;
  }
  .life-event-scenes .life-event-scene.active
  {
    display: block;
  }

/*****************************\
 *      Life Event Scene     *
\*****************************/
  .life-event-scenes .life-event
  {
    position: absolute;
    top: 100px;
    width: 100%;
    height: 80%;
    color: white;
  }
  .life-event-scenes .life-event-details
  {
    position: absolute;
    top: 75px;
    width: 100%;
    height: 80%;
    color: white;
    font-size: 16px;
  }
  .life-event-scene .life-event .life-event-container
  {
    width: 78%;
    margin: 0 auto;
  }
  .life-event-scene .life-event .life-event-container .title,
  body[data-lang="en"] .life-event-scene .life-event .life-event-container .title
  {
    font-weight: bold;
    font-size: 1.3em;
    color: #FFFCE4;
  }
  body[data-lang="tc"] .life-event-scene .life-event .life-event-container .title,
  body[data-lang="sc"] .life-event-scene .life-event .life-event-container .title
  {
    font-size: 1.5em;
  }
  .life-event-scene .life-event .life-event-container .content
  {
  }
  .life-event-scene .life-event .photo-wrapper
  {
    display: inline-block;
    vertical-align:top
  }
  .life-event-scene .life-event .photo-wrapper img {
    width: 100%;
  }
  .life-event-scene .life-event .description-wrapper
  {
    display: inline-block;
    width: 445px;
    padding: 0;
    font-size: 14px;
    line-height: 1.3em;
    text-align: justify;
  }
  body[data-lang="tc"] .life-event-scene .life-event .description-wrapper,
  body[data-lang="sc"] .life-event-scene .life-event .description-wrapper {
    font-size: 1.4em;
    line-height: 1.4em;
  }

  .life-event-scene .btn-listen-now,
  body[data-lang="en"] .life-event-scene .btn-listen-now
  {
    display: inline-block;
    width: 130px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background-image: url("../img/buttons/listen-btn-en.png");
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: contain;
  }
  body[data-lang="tc"] .life-event-scene .btn-listen-now
  {
    background-image: url("../img/buttons/listen-btn-tc.png");
  }
  body[data-lang="sc"] .life-event-scene .btn-listen-now
  {
    background-image: url("../img/buttons/listen-btn-sc.png");
  }
  .life-event-scene .btn-listen-now:hover,
  body[data-lang="en"] .life-event-scene .btn-listen-now:hover
  {
    background-image: url("../img/buttons/listen-btn-en-hover.png");
  }
  body[data-lang="tc"] .life-event-scene .btn-listen-now:hover
  {
    background-image: url("../img/buttons/listen-btn-tc-hover.png");
  }
  body[data-lang="sc"] .life-event-scene .btn-listen-now:hover
  {
    background-image: url("../img/buttons/listen-btn-sc-hover.png");
  }

  .life-event-scene .btn-play,
  body[data-lang="en"] .life-event-scene .btn-play
  {
    display: inline-block;
    width: 55px;
    height: 24px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background-image: url("../img/buttons/play-btn-en.png");
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: contain;
  }
  body[data-lang="tc"] .life-event-scene .btn-play
  {
    width: 69px;
    height: 30px;
    background-image: url("../img/buttons/play-btn-tc.png");
  }
  body[data-lang="sc"] .life-event-scene .btn-play
  {
    background-image: url("../img/buttons/play-btn-sc.png");
  }
  .life-event-scene .btn-play:hover,
  body[data-lang="en"] .life-event-scene .btn-play:hover
  {
    background-image: url("../img/buttons/play-btn-en-hover.png");
  }
  body[data-lang="tc"] .life-event-scene .btn-play:hover
  {
    background-image: url("../img/buttons/play-btn-tc-hover.png");
  }
  body[data-lang="sc"] .life-event-scene .btn-play:hover
  {
    background-image: url("../img/buttons/play-btn-sc-hover.png");
  }

  .life-event-scene .btn-play-full
  {
    position: absolute;
    bottom: 92px;
    right: 35px;
    z-index: 10;
  }
  .life-event-scene .btn-play-full img{}
  .life-event-scene .btn-play-full .text-on-photo {
    left: 15px;
    top: 28%;
    color: white;
    -ms-transform: rotate(-6deg); /* IE 9 */
    -webkit-transform: rotate(-6deg); /* Safari prior 9.0 */
    transform: rotate(-6deg); /* Standard syntax */
    font-size: 17px;
    cursor:pointer;
  }

/*****************************\
 *      Life Event 1 - 6     *
\*****************************/
  .life-event-scene .life-event.life-event-1 .photo-wrapper
  {
    width: 150px;
    margin-right: 50px;
  }
  .life-event-scene .life-event.life-event-1 .description-wrapper
  {
    width: 445px;
  }

  .life-event-scene .life-event.life-event-2 .photo-wrapper
  {
    width: 246px;
    margin-right: 24px;
  }
  .life-event-scene .life-event.life-event-2 .description-wrapper
  {
    width: 430px;
  }

  .life-event-scene .life-event.life-event-3 .description-wrapper
  {
    width: 420px;
    margin-right: 40px;
  }
  .life-event-scene .life-event.life-event-3 .photo-wrapper
  {
    width: 245px;
  }

  .life-event-scene .life-event.life-event-4 .description-wrapper
  {
    width: 100%;
    font-size: 1.3em;
    line-height: 1.1em;
  }
  .life-event-scene .life-event.life-event-4 .photo-wrapper
  {
    position: absolute;
    bottom: 40px;
    right: 20px;
    width: 230px;
    height: 183px;
  }

  .life-event-scene .life-event.life-event-5 .description-wrapper
  {
    width: 560px;
    font-size: 1.3em;
    line-height: 1.1em;
  }
  .life-event-scene .life-event.life-event-5 .photo-wrapper
  {
    position: absolute;
    bottom: 40px;
    right: 20px;
    width: 196px;
    height: 328px;
  }

  .life-event-scene .life-event.life-event-6 .life-event-container
  {
    padding-top: 30px;
    white-space: nowrap;
  }
  .life-event-scene .life-event.life-event-6 .content
  {
    display: inline-block;
    vertical-align: top;
    white-space: normal;
  }
  .life-event-scene .life-event.life-event-6 .content.content-left
  {
    width: 190px;
    margin-left: 20px;
  }
  .life-event-scene .life-event.life-event-6 .content.content-right
  {
    width: 430px;
  }
  .life-event-scene .life-event.life-event-6 .person-wrapper
  {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
  }
  .life-event-scene .life-event.life-event-6 .person-wrapper .person-img
  {
    width: 109px;
  }
  .life-event-scene .life-event.life-event-6 .person-wrapper .person-img img
  {
    width: 100%;
  }
  .life-event-scene .life-event.life-event-6 .person-wrapper .person-name
  {
    font-weight: 500;
    margin-left: 10px;
    font-size: 1.2em;
  }
  .life-event-scene .life-event.life-event-6 .person-intro
  {
    margin-top: 20px;
    text-align: justify;
    line-height: 1.3em;
  }
  body[data-lang='tc'] .life-event-scene .life-event.life-event-6 .person-intro,
  body[data-lang='sc'] .life-event-scene .life-event.life-event-6 .person-intro{
    font-size: 1.2em;
  }
  .life-event-scene .life-event.life-event-6 .description-wrapper
  {
    width: 100%;
    border-left: 1px solid #FFFFFF;
    margin-left: 25px;
    padding-left: 25px;
    font-size: 1.1em;
    line-height: 1.4em;
  }
  .life-event-scene .life-event.life-event-6 .button-wrapper
  {
    margin-left: 51px;
  }

/*****************************\
 * Life Event Details General *
\*****************************/
  .life-event-clips{
    position: absolute;
    color: white;
    width: 100%;
  }
  .life-event-clips .clip-container{
    margin: 0 auto;
  }
  .life-event-clips .clip-container .clip{
    display: inline-block;
    vertical-align: top;
    text-align: center;
  }
  .life-event-clips .clip-container p{
    margin-bottom: 0.5rem;
  }
  .life-event-clips .clip-container .clip .clip-title{
    font-weight: bold;
  }
  .life-event-clips .clip-container .clip .clip-photo{
    display: block;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 10px;
  }
  .life-event-clips .clip-container .clip .clip-description{
    font-weight: bold;
  }
  .life-event-clips .clip-container .clip .life-event-name{
    font-size: 0.8em;
    color: #FFFCE4;
    font-weight: 300;
  }
  .life-event-clips .clip-container .clip-bottom{
    padding-top:60px;
  }

/*****************************\
 *    Life Event 1 Detail    *
\*****************************/
  .life-event-clips .clip1-wrapper{
    width: 75%;
  }
  .life-event-clips .clip1-wrapper .clip{
    width: 32%;
  }


/*****************************\
 *    Life Event 2 Detail    *
\*****************************/

  .life-event-clips .clip2-wrapper{
    width: 85%;
  }
  .life-event-clips .clip2-wrapper .clip{
    width: 24%;
  }

/*****************************\
 *    Life Event 3 Detail    *
\*****************************/
  .life-event3-clips{
    position: absolute;
    top: -32px;
    color: white;
    width: 460px;
    height: 400px;
   /* border: 1px solid red;*/
    right: 190px;
  }
  .life-event3-clips .bg-wrapper{
    position: relative;
    /*padding-top: 10px;*/
  }
  .life-event3-clips .bg-wrapper img{
/*    width: 407px ;
    height: 353px ;*/
    width: 447px;
    height: 388;
  }
  .life-event3-clips .content{
    position: absolute;
    top: 0 ;
    width: 100%;
    height: 100%;
    padding-top: 17px;
  }
  .life-event3-clips .content .clip{
    height: 18%;
  }
  .life-event3-clips .content .add-margin{
    margin-top: 10px;
  }
  .life-event3-clips .content .clip .clip-title{
    width: 15%;
    height: 100%;
   /* border: 1px solid red;*/
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
  }
  .life-event3-clips .content .clip .clip-title p {
    margin: 9px 0 0 0;
  }
  .life-event3-clips .content .clip .description-wrapper{
    display: inline-block;
    width: 325px;
    height: 100%;
    padding-left: 10px;
    font-size: 15px;
  }
  .life-event3-clips .content .clip .clip-description {
    margin-top: 9px;
    color: #ffffff;
    font-weight: 500;
    font-size: 0.95em;
    line-height: 1.1em;
  }
  .life-event3-clips .content .clip .life-event-name {
    margin-top: 3px;
    color: #FBCB4F;
    font-size: 0.8em;
    font-weight: 300;
  }
  body[data-lang='tc'] .life-event3-clips .content .clip .life-event-name ,
  body[data-lang='sc'] .life-event3-clips .content .clip .life-event-name {
    margin-top: 10px;
  }
  .listen-button-wrapper{
    width: 5%;
    height: 100%;
    display: inline-block;
    vertical-align: top;
    padding-top: 20px;
  }

  #wolf{
    position: absolute;
    top: 4px;
    left: 41px;
    width: 199px;
    height: 177px;
    z-index: 0;
    opacity: 0.8;
  }
  #wolf img{
    width: 100%;
  }
  #baby{
    position: absolute;
    right: 44px;
    bottom: 205px;
    width: 170px;
    height: 169px;
    z-index: 0;
  }
  #baby img{
    width: 100%;
  }

/*****************************\
 *    Life Event 4 Detail    *
\*****************************/
  .life-event4-clips
  {
    position: absolute;
    top: -10px;
    width: 100%;
    color: white;
  }
  .life-event4-clips .clip-container /* static area */
  {
    position: relative;
    width: 850px;
    height: 390px;
    margin: 0 auto;
    overflow: hidden;
    /*border: 1px solid red;*/
  }
  .life-event4-clips .canvas /* moving area */
  {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1270px;
    height: 500px;
  }
  .life-event4-clips .canvas .life-line-wrapper
  {
    position: relative;
    width: 100%;
    height: 100%;
    /*background-image: linear-gradient(#007eff, #6e00ff);*/
  }
  .life-event4-clips .canvas .life-line-wrapper .life-line
  {
    position: absolute;
    bottom: 68px;
    left: 5%;
    width: 90%;
  }
  .life-event4-clips .canvas .life-line-wrapper .life-line img
  {
    width: 100%;
    height: 220px;
  }
  .life-event4-clips .canvas .life-line-wrapper .recall
  {
      position: absolute;
      width: 250px;
      /*border: 1px solid red;*/
  }
  .life-event4-clips .canvas .life-line-wrapper .recall .recall-img
  {
  }
  .life-event4-clips .canvas .life-line-wrapper .recall .recall-title
  {
    margin-top: 10px;
    font-size: 0.86em;
    line-height: 1.1em;
  }
  body[data-lang="tc"] .life-event4-clips .canvas .life-line-wrapper .recall .recall-title,
  body[data-lang="sc"] .life-event4-clips .canvas .life-line-wrapper .recall .recall-title{
    font-size: 1em;
  }
  .life-event4-clips .canvas .life-line-wrapper .recall .recall-subtitle
  {
    margin-top: 10px;
    font-size: 0.7em;
    font-weight: 300;
    line-height: 1em;
  }
  body[data-lang="tc"] .life-event4-clips .canvas .life-line-wrapper .recall .recall-subtitle,
  body[data-lang="sc"] .life-event4-clips .canvas .life-line-wrapper .recall .recall-subtitle{
    font-size: 0.9em;
  }

  .life-event4-clips .canvas .life-line-wrapper .recall .btnPlay-wrapper
  {
    margin: 10px 0 30px 0;
  }
  .life-event4-clips .canvas .life-line-wrapper .recall .recall-year
  {
    font-weight: 0.2em;
  }
  .life-event4-clips .canvas .life-line-wrapper .recall.recall-1
  {
    bottom: 36px;
    left: 104px;
  }
  .life-event4-clips .canvas .life-line-wrapper .recall.recall-2
  {
    bottom: 108px;
    left: 305px;
  }
  .life-event4-clips .canvas .life-line-wrapper .recall.recall-3
  {
    bottom: 171px;
    left: 530px;
  }
  .life-event4-clips .canvas .life-line-wrapper .recall.recall-4
  {
    bottom: 208px;
    left: 755px;
  }
  .life-event4-clips .canvas .life-line-wrapper .recall.recall-5
  {
    bottom: 250px;
    left: 995px;
  }

/*****************************\
 *    Life Event 5 Detail    *
\*****************************/
  .life-event5-clips{
    position: absolute;
    top: -30px;
    color: white;
    width: 460px;
    height: 400px;
   /* border: 1px solid red;*/
    left: 116px;
  }
  .life-event5-clips .bg-wrapper{
    position: relative;
    /*padding-top: 10px;*/
  }
  .life-event5-clips .bg-wrapper img{
/*    width: 407px ;
    height: 353px ;*/
    width: 407px;
    height: 353;
  }
  .life-event5-clips .content{
    position: absolute;
    top: 60px ;
    width: 100%;
    height: 100%;
    /*padding-top: 60px;*/
  }
  .life-event5-clips .content .clip{
    height: 16%;
  }
  .life-event5-clips .content .add-margin{
    margin-top: 10px;
  }
  .life-event5-clips .content .clip .clip-title{
    width: 15%;
    height: 100%;
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
  }
  .life-event5-clips .content .clip .clip-title p {
    margin: 9px 0 0 0;
  }
  .life-event5-clips .content .clip .description-wrapper{
    width: 65%;
    height: 100%;
    display: inline-block;
    padding-left: 10px;
  }
  .life-event5-clips .content .clip .clip-description{
    margin-top: 9px;
    color: #ffffff;
    font-weight: 500;
    font-size: 0.85em;
    line-height: 1.1em;
  }
  .life-event5-clips .content .clip .life-event-name{
    margin-top: 3px;
    color: #FBCB4F;
    font-size: 0.8em;
    font-weight: 300;
  }
  body[data-lang='tc']  .life-event5-clips .content .clip .life-event-name,
  body[data-lang='sc']  .life-event5-clips .content .clip .life-event-name{
    margin-top: 10px;
  }

  .life-event5-clips .content .clip .listen-button-wrapper{
    width: 8%;
    height: 100%;
   /* border: 1px solid red;*/
    display: inline-block;
    vertical-align: top;
    padding-top: 10px;
  }

  #listen-illustration{
    position: absolute;
    right: -30px;
    bottom: -8px;
    width: 281px;
    height: 469px;
    z-index: 0;
  }
  #listen-illustration img{
    width: 90%;
    height: 90%;
  }
/*****************************\
 *    Life Event 6 Detail    *
\*****************************/
  .life-event6-clips{
    position: absolute;
    top: -56px;
    color: white;
    width: 460px;
    height: 400px;
    left: 270px;
  }
  .life-event6-clips .bg-wrapper{
    position: relative;
    /*padding-top: 10px;*/
  }
  .life-event6-clips .bg-wrapper img{
    width: 407px;
    height: 375px;
  }
  .life-event6-clips .content{
    position: absolute;
    top: 70px;
    width: 100%;
    height: 100%;
    /*padding-top: 60px;*/
  }
  .life-event6-clips .content .clip{
    height: 16%;
  }
  .life-event6-clips .content .add-margin{
    margin-top: 10px;
  }
  .life-event6-clips .content .clip .clip-title{
    width: 15%;
    height: 100%;
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
  }
  .life-event6-clips .content .clip .clip-title p {
    margin: 3px 0 0 0;
  }
  .life-event6-clips .content .clip .description-wrapper{
    width: 73%;
    height: 100%;
    display: inline-block;
    padding-left: 10px;
  }
  body[data-lang='tc'] .life-event6-clips .content .clip .description-wrapper,
  body[data-lang='sc'] .life-event6-clips .content .clip .description-wrapper{
    width: 55%;
  }
  .life-event6-clips .content .clip .clip-description{
    margin-top: 6px;
    color: #ffffff;
    font-weight: 500;
    font-size: 0.85em;
    line-height: 1.1em;
  }
  .life-event6-clips .content .clip .life-event-name{
    margin-top: 3px;
    color: #FBCB4F;
    font-size: 0.7em;
    font-weight: 300;
    line-height: 1.1em;
  }
  body[data-lang='tc'] .life-event6-clips .content .clip .life-event-name,
  body[data-lang='sc'] .life-event6-clips .content .clip .life-event-name{
    font-size: 0.8em;
    margin-top: 10px;
  }
  .life-event6-clips .content .clip .listen-button-wrapper{
    width: 8%;
    height: 100%;
    display: inline-block;
    vertical-align: top;
    padding-top: 10px;
  }
  #xiaoxi-illustration{
    position: absolute;
    left: 54px;
    top: -2px;
    z-index: 0;
    width: 160px;
  }
  #xiaoxi-illustration img{
    width: 100%;
  }
  #speech-bubble{
    position: absolute;
    top: -75px;
    left: 195px;
    width: 550px;
    height: 440px;
  }
  #speech-bubble img{
    width: 100%;
    height: 100%;
  }
  .btn-play-full.upper-position{
    bottom: 145px;
    right: 25px;
    z-index: 1;
  }