@-webkit-keyframes flap-r {
  0%,10%   {    border-top-width: 60px; }
  40%,60%  {    border-top-width: 10px; }
  100%     {    border-top-width: 60px; }
}

@-webkit-keyframes flap-l {
  0%       {    border-bottom-width: 0px; }
  40%,60%  {    border-bottom-width: 40px; }
  100%     {    border-bottom-width: 0px; }
}

@-webkit-keyframes fly {
  0%   {    left: 0%; top:100px;-webkit-transform:scale3d(0.5,0.5,1) }
  100% {    left: 100%; top:100px; -webkit-transform:scale3d(1,1,1) }
}

@-webkit-keyframes bob {
  0%   {    top: 25px; }
  50%   {   top: 0px; }
  100% {    top: 25px; }
}

#pictureframe {
      position: absolute;
    z-index: 9;
  width:100px;
  margin-top:100px;
  -webkit-animation: fly 3.5s infinite linear;
}

/*#shadow {
  position:absolute;
  width: 0px; height: 0px; 
  top: 140px; left: 00px;
  border-width: 10px;
  border-left-width:50px;
  border-top-width:0px;
  border-right-width: 40px;
  border-color: transparent;
  border-bottom-color: rgba(210,210,210,0.6);
  border-style:solid;
  -webkit-filter: blur(5px);
}

#shadow:after {
  content: " ";
  position:absolute;
  width: 00px; height: 0px; 
  top: 10px; left: -50px;
  border-width: 10px;
  border-left-width:50px;
  border-bottom-width:0px;
  border-right-width: 40px;
  border-color: transparent;
  border-top-color: rgba(210,210,210,0.6);
  border-style:solid;
}*/

#bird div {
  position:absolute;
}

#bird { 
  position:absolute;
  -webkit-animation: bob 0.7s infinite cubic-bezier(0.7, 0.7, 0.1, 0.4);
 }


#body1,#body2,#wing-l,#wing-r {
    width: 0px; height: 0px;
    border-color: transparent;
    border-style: solid;
}
#body1 {
    border-width: 15px; 
  border-left-width:25px;
  border-top-width:15px;
  border-right-width: 55px;
  border-top-color: #A845A1;
}

#body2 { 
  left: 50px; bottom: 0px;
    border-width: 10px; 
  border-left-width:5px;
  border-top-width:0px;
  border-right-width: 15px;
  border-bottom-color: #882C81;
}

#wing-l {
  left: 22px; bottom: 0px; 
    border-width: 60px; 
  border-left-width:20px;
  border-top-width:0px;
  border-right-width: 6px;
  border-bottom-color: #882C81;
  -webkit-animation: flap-l 0.7s infinite; 
}

#wing-r {
  left: 22px; top:0px;
    border-width: 60px; 
  border-left-width:20px;
  border-bottom-width:0px;
  border-right-width: 6px;
  border-top-color: #D26ACA;
  -webkit-animation: flap-r 0.7s infinite; 
}


#caption a {
  position:absolute;
  font-family: courier;
  left:10px; bottom:10px;
  color: #444;
}










.map {
    position: relative;
    max-width: 1100px;
    margin: auto;
}

.map img {
    display: block;
    width: 100%;
}

.map-popup {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 99;
    width: 60%;
    padding: 2rem;
    background-color: #fff;
    transition: all 300ms ease-in;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.22);
    opacity: 0;
    visibility: hidden;
}

.map-popup>*:first-child {
    margin-top: 0;
}

.map-popup>*:last-child {
    margin-bottom: 0;
}

.map-popup.open {
    opacity: 1;
    visibility: visible;
}

.marker {
    position: absolute;
    z-index: 1;
    display: inline-block;
    width: 47px;
    height: 47px;
    color: #fff;
    line-height: 36px;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
    transition: all 300ms;
}

.marker1 {
    top: 30%;
    left: 20%;
}

.marker2 {
    top: 50%;
    left: 64%;
}

    .map-item {
        position: absolute;
        width: 36px;
        height: 36px;
    }

    .map-item .marker {
        top: auto;
        left: auto;
    }

    .map-item1 {
        top: 3%;
        left: 33%;
    }

    .map-item2 {
        top: 29%;
        left: 39%;
    }
    .map-item3 {
        top: 21%;
        left: 58%;
    }
    .map-item4 {
        top: 68%;
        left: 32%;
    }
    .map-item5 {
    top: 38%;
    left: 41%;
}
    .map-popup {
        position: absolute;
        left: 58px;
        width: 280px;
        transform: translateY(-50%);
    }

    .map-popup:before {
        content: "";
        position: absolute;
        top: 50%;
        left: -16px;
        margin-top: -16px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 16px 16px 16px 0;
        border-color: transparent #fff transparent transparent;
    }

    .map-popup.edge {
        left: auto;
        right: calc(100% + 24px);
    }

    .map-popup.edge:before {
        left: auto;
        right: -16px;
        border-width: 16px 0 16px 16px;
        border-color: transparent transparent transparent #fff;
    }