#line1{
        background-image:url("../../images/2018/IMG_0112.JPG");
        background-size:cover;
        background-repeat: no-repeat;
}

#title1{
        color:white;
        font-style: oblique 15deg;
        font-family: fantasy;
        color:white;
        text-shadow: 2px 2px 3px green, -2px 2px 3px green, 2px -2px 3px green, -2px -2px 3px green;
}

#title2{
      color:white;
}

.chengdu{
        width:80%;
        height:170px;   /* must be px not be em */
        margin:20px;
        margin-bottom: 30px;
        box-shadow: 8px 8px 10px 0 #888899;
}

.imgpanda{ 
        width:100%; 
        height:500px;  /* must be px not be em */
        margin-bottom: 30px;
        box-shadow: 8px 8px 10px 0 #888899;
}

@keyframes example1 {
  0%   {background-image:url("../../images/2018/IMG_0112.JPG");background-size:100% 100%;}
  25%   {background-image:url("../../images/2018/IMG_0116.JPG");background-size:100% 100%;}
 50%   {background-image:url("../../images/2018/IMG_0118.JPG");background-size:100% 100%;}
  75%   {background-image:url("../../images/2018/IMG_0119.JPG");background-size:100% 100%;}
   100%   {background-image:url("../../images/2018/IMG_0130.JPG");background-size:100% 100%;}
  }

@keyframes example2 {
  0%   {background-image:url("../../images/2018/IMG_0205.JPG");background-size:100% 100%;}
  25%   {background-image:url("../../images/2018/IMG_0219.JPG");background-size:100% 100%;}
}

#panda{
   animation-name: example1;
   animation-duration: 20s;
   animation-timing-function:ease-in-out;
  animation-iteration-count: infinite;
}

#mapodian{
       background-image: url("../../images/2018/IMG_0205.JPG");
       background-size:cover;
       background-repeat: no-repeat;
       width: 100%;
       height:450px;   /* must be px not be em */
       margin-bottom: 30px;
       box-shadow: 8px 8px 10px 0 #888899;
}

#mapodian:hover{
       background-image: url("../../images/2018/IMG_0219.JPG");
       width: 100%;
       background-size:cover;
       background-repeat: no-repeat;
}