h1 {
    position:absolute;
    font-family: 'Lora', serif;
}

.wuming-overlap {
    position:absolute;
    text-align: center;
    width: 500px;
    height: 80px;
    color: black;
    z-index: 1;
    margin:40%;
    background-color: rgba(0,0,0,20%);
}

.vertical-center {
    min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
    min-height: 100vh; /* These two lines are counted as one :-)       */
  
    display: flex;
    align-items: center;
  }

.image-show-section {
    display: flex;
    flex-direction: row;
    height: 100vh;
    align-items: flex-end;

}

.image-show-1, .image-show-2, .image-show-3, .image-show-4 {
    position: relative;
    overflow: hidden;
    height: 100vh;
    width: 25vw;
}

a h2 {
    font-family: 'Lora', serif;
    font-size: 20px;
    color: black;
}

.image-left-before {
    position: absolute;
    width: auto;
    max-width: 25vw;
    height: auto;
    max-height: 100vh;
    transform: translateX(100%) translateY(10px) translateZ(0px);
    transform-style: preserve-3d; 
    transition: transform 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
}

.image-left-after {
    position: absolute;
    width: auto;
    max-width: 25vw;
    height: auto;
    max-height: 100vh;
    transform: translateX(0px) translateY(10px) translateZ(0px);
    transform-style: preserve-3d; 
    transition: transform 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
}

.image-right-before {
    position: absolute;
    width: auto;
    max-width: 25vw;
    height: auto;
    max-height: 100vh;
    transform: translateX(-100%) translateY(-10px) translateZ(0px);
    transform-style: preserve-3d; 
    transition: transform 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
}

.image-right-after {
    position: absolute;
    width: auto;
    max-width: 25vw;
    height: auto;
    max-height: 100vh;
    transform: translateX(0px) translateY(-10px) translateZ(0px);
    transform-style: preserve-3d; 
    transition: transform 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86) 0s;
}

.section-link {
    text-align: center;
    position: absolute;
    bottom: 10px;
    width: 25vw;
}

.introduction-section,
.current-show-section,
.archive-show-section
{
    display: flex;
    flex-direction: row;
}

.row1 {
    width: 45vw;
    /* border: 1px solid black; */
    padding: auto;
    margin: 5vw;
}

.row1 img {
    margin-top:20px;
}

.row2 {
    width: 45vw;
    /*border: 1px solid black;*/
    padding: auto;
    margin: 5vw;
}

.section-margin {
    margin: 20px;
}

img {
    max-width: 100%;
    max-height: 100%;
}

.loop-wrap {
    position: relative;
    width: 1000px;
    height: 600px;
    margin: 100px auto;
    overflow: hidden;
}

.loop-images-container{
    position: absolute;
    left: 0; top: 0;
    width: 500%;
    height: 100%;
    font-size: 0;
    transform: translate(0,0);
    animation: loop 10s linear infinite;
}

.loop-image{
    width: 1000px;
    height: 600px;
}

/*
animation: name duration timing-function delay iteration-count direction
*/

@keyframes loop {
    0% {transform: translate(0,0);}
    15% {transform: translate(0,0);}

    20% {transform: translate(-20%,0);}
    35% {transform: translate(-20%,0);}

    40% {transform: translate(-40%,0);}
    55% {transform: translate(-40%,0);}

    60% {transform: translate(-60%,0);}
    75% {transform: translate(-60%,0);}

    80% {transform: translate(-80%,0);}
    95% {transform: translate(-80%,0);}

    100% {transform: translate(0,0);}
}