/* ------ BUTTONS ------ */

.btn { display: inline-block; text-transform: uppercase; font-weight: 700; color: #fff; background: #383057; line-height: 1.2em; padding: .6em 1em; border: 0; cursor: pointer; font-family: inherit;
  box-shadow: none;
  -moz-transition: .25s ease-out;
  -webkit-transition: .25s ease-out;
  -ms-transition: .25s ease-out;
  -o-transition: .25s ease-out;
  transition: .25s ease-out;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;  
}
.btn:hover {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}
.btn.large { font-size: 1.5em; }

/* ------ POINT OF INTEREST ELEMENTS ------ */

.poi { position: relative; display: inline-block; width: 6.25em; height: 6.25em; margin: -3.125em; width: 3.125em; height: 3.125em; margin: -1.5625em; z-index: 3; cursor: pointer; color: #773076; overflow: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
  filter: alpha(opacity=75);
  -moz-opacity: .75;
  -khtml-opacity: .75;
  opacity: .75;
  -moz-transition: .25s ease-out;
  -webkit-transition: .25s ease-out;
  -ms-transition: .25s ease-out;
  -o-transition: .25s ease-out;
  transition: .25s ease-out;
}
.poi:after { display: block; content: ''; position: absolute; top: 50%; left: 50%; width: 40%; height: 40%; margin: -20%; background: #773076;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
  -moz-transition: .25s ease-out;
  -webkit-transition: .25s ease-out;
  -ms-transition: .25s ease-out;
  -o-transition: .25s ease-out;
  transition: .25s ease-out;
}
@-webkit-keyframes poiOuterRingPulse {
  0% { opacity: 1; transform: scale(1); }
  20% { opacity: 1; transform: scale(1); }
  45% { opacity: 0; transform: scale(2); }
  45.01% { opacity: 0; transform: scale(.5); }
  45.02% { opacity: 1; transform: scale(.5); }
  57% { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}
@-moz-keyframes poiOuterRingPulse {
  0% { opacity: 1; transform: scale(1); }
  20% { opacity: 1; transform: scale(1); }
  45% { opacity: 0; transform: scale(2); }
  45.01% { opacity: 0; transform: scale(.5); }
  45.02% { opacity: 1; transform: scale(.5); }
  57% { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}
@-ms-keyframes poiOuterRingPulse {
  0% { opacity: 1; transform: scale(1); }
  20% { opacity: 1; transform: scale(1); }
  45% { opacity: 0; transform: scale(2); }
  45.01% { opacity: 0; transform: scale(.5); }
  45.02% { opacity: 1; transform: scale(.5); }
  57% { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}
@-o-keyframes poiOuterRingPulse {
  0% { opacity: 1; transform: scale(1); }
  20% { opacity: 1; transform: scale(1); }
  45% { opacity: 0; transform: scale(2); }
  45.01% { opacity: 0; transform: scale(.5); }
  45.02% { opacity: 1; transform: scale(.5); }
  57% { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes poiOuterRingPulse {
  0% { opacity: 1; transform: scale(1); }
  20% { opacity: 1; transform: scale(1); }
  45% { opacity: 0; transform: scale(2); }
  45.01% { opacity: 0; transform: scale(.5); }
  45.02% { opacity: 1; transform: scale(.5); }
  57% { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}
.poi:before { display: block; content: ''; position: absolute; top: 50%; left: 50%; width: 64%; height: 64%; margin: -32%; border: 2px solid #773076;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  -moz-animation: poiOuterRingPulse 4s infinite;
  -webkit-animation: poiOuterRingPulse 4s infinite;
  -ms-animation: poiOuterRingPulse 4s infinite;
  -o-animation: poiOuterRingPulse 4s infinite;
  animation: poiOuterRingPulse 4s infinite;
  -moz-transition: all .25s ease-out;
  -webkit-transition: all .25s ease-out;
  -ms-transition: all .25s ease-out;
  -o-transition: all .25s ease-out;
  transition: all .25s ease-out;
}
.hoverPoi:hover, .poi.active { z-index: 10; overflow: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  -khtml-opacity: 1;
  opacity: 1;
}
.hoverPoi:hover:before, .poi.active:before { transform: scale(1.5); animation: none; background: rgba(119,48,118,.15);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  -khtml-opacity: 1;
  opacity: 1;
}
.poi:nth-child(1):before, .poi:nth-child(8):before {
  animation-delay: .2s;
}
.poi:nth-child(2):before, .poi:nth-child(9):before {
  animation-delay: 1.2s;
}
.poi:nth-child(3):before, .poi:nth-child(10):before {
  animation-delay: .6s;
}
.poi:nth-child(4):before, .poi:nth-child(11):before {
  animation-delay: 1.8s;
}
.poi:nth-child(5):before, .poi:nth-child(12):before {
  animation-delay: .5s;
}
.poi:nth-child(6):before, .poi:nth-child(13):before {
  animation-delay: 1.5s;
}
.poi:nth-child(7):before, .poi:nth-child(14):before {
  animation-delay: .9s;
}
.poi .caption { position: absolute; top: 50%; left: 98%; line-height: 1.2em; margin: -.6em 0; width: 400px; text-transform: uppercase; font-weight: 700;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
  -moz-transition: all .25s ease-out;
  -webkit-transition: all .25s ease-out;
  -ms-transition: all .25s ease-out;
  -o-transition: all .25s ease-out;
  transition: all .25s ease-out;
  transform: scale(1);
  -moz-perspective: 500px;
  -webkit-perspective: 500px;
  -ms-perspective: 500px;
  -o-perspective: 500px;
  perspective: 500px;
  -moz-perspective-origin: 50% 50%;
  -webkit-perspective-origin: 50% 50%;
  -ms-perspective-origin: 50% 50%;
  -o-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
}
.hoverPoi:hover .caption, .poi.active .caption { margin-left: 1em;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  -khtml-opacity: 1;
  opacity: 1;
  text-shadow: 0 0 .5em rgba(255,255,255,.75);
  transform: scale(1);
}
.poi .caption .title { font-size: 1em; }
.poi .caption .body { font-size: .8em; font-weight: 400; text-transform: none; padding: 2em; margin-top: 1em; background: rgba(255,255,255,.8); color: #333; border-bottom: .25em solid #773076; text-align: left;
  text-shadow: none;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0; 
  -moz-transform: rotateX(-90deg);
  -webkit-transform: rotateX(-90deg);
  -ms-transform: rotateX(-90deg);
  -o-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -moz-transform-origin: center 0;
  -webkit-transform-origin: center 0;
  -ms-transform-origin: center 0;
  -o-transform-origin: center 0;
  transform-origin: center 0;
  -moz-transition: all .5s ease-out;
  -webkit-transition: all .5s ease-out;
  -ms-transition: all .5s ease-out;
  -o-transition: all .5s ease-out;
  transition: all .5s ease-out;
  -moz-transition: all .8s cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transition: all .8s cubic-bezier(0.23, 1, 0.32, 1);
  -ms-transition: all .8s cubic-bezier(0.23, 1, 0.32, 1);
  -o-transition: all .8s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all .8s cubic-bezier(0.23, 1, 0.32, 1);
  -moz-transition-delay: .3s;
  -webkit-transition-delay: .3s;
  -ms-transition-delay: .3s;
  -o-transition-delay: .3s;
  transition-delay: .3s; 
}
.hoverPoi:hover .caption .body, .poi.active .caption .body {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  -khtml-opacity: 1;
  opacity: 1; 
  -moz-transform: rotateX(0);
  -webkit-transform: rotateX(0);
  -ms-transform: rotateX(0);
  -o-transform: rotateX(0);
  transform: rotateX(0);
}
.poi.rightAlign .caption { left: auto; right: 98%; text-align: right; }
.hoverPoi.rightAlign:hover .caption, .poi.rightAlign.active .caption { margin-left: 0; margin-right: 1em; }
.poi { color: #383057; }
.poi:after { background: #383057; }
.poi:before { border-color: #383057; }
.poi .caption .body { border-color: #383057; }

.infoBox { max-width: 600px; padding: 2em; }
.infoBox .title { text-transform: uppercase; }