/*

DART 450, Winter 2018
Droppable
Pippin Barr

Basic example of jQuery UI's droppable function

*/

body, html, p, img, h1, h2, h3{
  padding: 0;
  margin: 0;
}

body, html {
  height: 100%;
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}

#zoneCharacter{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #b6ced8;
  padding: 10px;
  color: #2b2b2b;
  text-align:center;
}

#you{
    animation-name: animMe;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}


.divDestination{
  width: 50%;
  height: 50%;
  background-repeat: no-repeat;
  background-position: center;
  position:absolute;
}

#divDestination1{
  background-image: url(../img/destination1.jpg);
  top:0;
  left:0;
}

#divDestination2{
  background-image: url(../img/destination2.jpg);
  top:0;
  right:0;
}

#divDestination3{
  background-image: url(../img/destination3.jpg);
  bottom:0;
  left:0;
}

#divDestination4{
  background-image: url(../img/destination4.jpg);
  bottom:0;
  right:0;
}

.h3Dest{
  color: white;
  background-color: #2b2b2b;
  padding: 10px;
  position: absolute;
}

#h3Dest1{
  top: 1%;
  left: 1%;
}

#h3Dest2{
  top: 1%;
  right: 1%;
}

#h3Dest3{
  bottom: 1%;
  left: 1%;
}

#h3Dest4{
  bottom: 1%;
  right: 1%;
}


#sectionEnd{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2em;
  display: none;
}




@keyframes animMe {
    from{
    margin-right: 0%; transition-timing-function: ease-in-out;
  }
  25%{
    margin-right: 4%;
  }
  50%{
    margin-right:0%;
  }
  75%{
    margin-right: -4%;
  }
    to{
    margin-right: 0%; transition-timing-function: ease-in-out;
  }
}