/* reveal.css */



#reveal {

  width: 80px;

  height: 80px;

  background-color: #728e90;

  border-radius: 50%;

  margin-left: 0;

  text-align: center;

  cursor: pointer;

  transition: height .3s ease-in-out,

              width .3s ease-in-out,

              border-radius .3s ease-in-out,

              margin .3s ease-in-out;

}



#reveal > img {

  width: 50px;

  display: block;

  margin: 15px auto;

}



.reveal-content {

  width: 300px;

  height: 200px;

  padding: 0px;

  background-color: rgba(58,68,84, 0.8);

  opacity: 0;

  text-align: center;

  pointer-events: none;

  transition: opacity .01s ease-in-out;

}



.reveal-content img {

  width: 260px;

  opacity: 0;

  transition: width .01s ease-in-out,

              opacity .01s ease-in-out;

}



.reveal-content p {

  margin: 10px 0;

  color: white;

  margin-top: -20px;

  opacity: 0;

  transition: margin .01s ease-in-out,

              opacity .01s ease-in-out;

}



#reveal:hover {

  width: 300px;

  height: 240px;

  border-radius: 5px;

  margin-left: -50px;

}

#reveal:hover .reveal-content {

  opacity: 1;

  pointer-events: all;

  border-bottom-left-radius: 5px;

  border-bottom-right-radius: 5px;

  transition: opacity .3s ease-in-out .3s;

}

#reveal:hover .reveal-content img {

  width: 300px;

  opacity: 1;

  transition: width .3s ease-in-out .4s,

              opacity .3s ease-in-out .4s;

}

#reveal:hover .reveal-content p {

  margin-top: 5px;

  opacity: 1;

  transition: margin .3s ease-in-out .6s,

              opacity .3s ease-in-out .6s;

}