
.ihs-container {
	background-image: url(../img/progress.gif);
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
	margin: 0 auto;
	overflow: hidden;
}

.ihs-slide {
	float: left;
  overflow: hidden;
  opacity: 0;
}

.ihs-container > img {

}

.ihs-container svg {
	width: 100%;
	height: 100%;
}

.ihs-slideContainer {
	overflow: hidden;
  -webkit-transition: height .5s;
  transition: height .5s;
  z-index: 1;
}

.ihs-slideContainer > ul {
	padding: 0;
	margin: 0;
  list-style-type: none;
}



.ihs-slideContainer ul li {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate3D(0,0,0);
    transform: translate3D(0,0,0);
}

.ihs-slideContainer > ul:before,
.ihs-slideContainer > ul:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.ihs-slideContainer > ul:after {
    clear: both;
}

.ihs-content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 4;
    overflow-x: hidden; 
    overflow-y: hidden;
    opacity: 0;
    -webkit-transition: opacity .5s;
    transition: opacity .5s;
     -webkit-transform: translate3D(0,0,0);
    transform: translate3D(0,0,0);
    pointer-events: none;
    z-index: 5;
}

.ihs-content.active {
    opacity: 1;
}

.ihs-noTransition
{
    -webkit-transition: -webkit-transform 0s!important; 
    -moz-transition: all 0s!important; 
    -ms-transition: all 0s!important; 
    transition: -webkit-transform 0s!important; 

    -webkit-transition-delay: 0!important;
    transition-delay: 0!important;
}

.zoomImg {
    pointer-events: none;
}

.filterImg
{
  opacity: 0;
  -webkit-transition: opacity .5s;
  transition: opacity .5s;
   -webkit-transform: translate3d(0px, 0px, 0px);
   transform: translate3d(0px, 0px, 0px);
   pointer-events: none; 
}

.ihs-maskedComplete .filterImg {
   pointer-events: auto;
}

.ihs-canvas {
  position: relative;
  transform: translate3d(0px, 0px, 0px);
  z-index: 1!important;
  -webkit-transition: opacity .5s;
  transition: opacity .5s;
}

.ihs-hotspots {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 2;
   pointer-events: none;
}

.ihs-hotspots > div {
   opacity: 0;
   position: absolute;
   -webkit-transition: opacity .5s;
   transition: opacity .5s; 
 }

.ihs-hotspots > div.active {
   opacity: 1;
   pointer-events: auto;
}

.ihs-markers > div {
   position: absolute;
   opacity: 0;
   width: 30px;
   height: 30px;
   margin-left: -15px;
   margin-top: -15px;
   border-radius: 50%;
   cursor: pointer;
   -webkit-transition: opacity .5s;
   transition: opacity .5s; 
}

.ihs-markers > div a {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: rgba(246, 61, 0, 0.6);;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  -webkit-transition: background-color 0.2s;
  -moz-transition: background-color 0.2s;
  transition: background-color 0.2s;
  pointer-events: none;
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

.ihs-markers > div a::after, .ihs-markers > div a:before {
  /* rotating plus icon */
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  background-color: white;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  transition-duration: 0.2s;
}
.ihs-markers > div a::after {
  height: 2px;
  width: 12px;
}
.ihs-markers > div a::before {
  height: 12px;
  width: 2px;
}

.ihs-markers > div::after {
  /* this is used to create the pulse animation */
  content: '';
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: inherit;
  background-color: transparent;
  -webkit-animation: cd-pulse 2s infinite;
  -moz-animation: cd-pulse 2s infinite;
  animation: cd-pulse 2s infinite;
}


.ihs-container:hover .ihs-markers > div {
   opacity: 1;
}

.ihs-masked:hover .ihs-markers > div {
   opacity: 0!important;
}

@-webkit-keyframes cd-pulse {
  0% {
    -webkit-transform: scale(1);
    box-shadow: inset 0 0 1px 1px rgba(246, 61, 0, 0.8);
  }

  50% {
    box-shadow: inset 0 0 1px 1px rgba(246, 61, 0, 0.8);
  }

  100% {
    -webkit-transform: scale(1.6);
    box-shadow: inset 0 0 1px 1px rgba(246, 61, 0, 0);
  }
}
@-moz-keyframes cd-pulse {
  0% {
    -moz-transform: scale(1);
    box-shadow: inset 0 0 1px 1px rgba(246, 61, 0, 0.8);
  }

  50% {
    box-shadow: inset 0 0 1px 1px rgba(246, 61, 0, 0.8);
  }

  100% {
    -moz-transform: scale(1.6);
    box-shadow: inset 0 0 1px 1px rgba(246, 61, 0, 0);
  }
}
@keyframes cd-pulse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    box-shadow: inset 0 0 1px 1px rgba(246, 61, 0, 0.8);
  }

  50% {
    box-shadow: inset 0 0 1px 1px rgba(246, 61, 0, 0.8);
  }

  100% {
    -webkit-transform: scale(1.6);
    -moz-transform: scale(1.6);
    -ms-transform: scale(1.6);
    -o-transform: scale(1.6);
    transform: scale(1.6);
    box-shadow: inset 0 0 1px 1px rgba(246, 61, 0, 0);
  }
}

/* blue marker styles */

@-webkit-keyframes cd-pulse-blue {
  0% {
    -webkit-transform: scale(1);
    box-shadow: inset 0 0 1px 1px rgba(23,79,198, 0.8);
  }

  50% {
    box-shadow: inset 0 0 1px 1px rgba(23,79,198, 0.8);
  }

  100% {
    -webkit-transform: scale(1.6);
    box-shadow: inset 0 0 1px 1px rgba(23,79,198, 0);
  }
}
@-moz-keyframes cd-pulse-blue {
  0% {
    -moz-transform: scale(1);
    box-shadow: inset 0 0 1px 1px rgba(23,79,198, 0.8);
  }

  50% {
    box-shadow: inset 0 0 1px 1px rgba(23,79,198, 0.8);
  }

  100% {
    -moz-transform: scale(1.6);
    box-shadow: inset 0 0 1px 1px rgba(23,79,198, 0);
  }
}
@keyframes cd-pulse-blue {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    box-shadow: inset 0 0 1px 1px rgba(23,79,198, 0.8);
  }

  50% {
    box-shadow: inset 0 0 1px 1px rgba(23,79,198, 0.8);
  }

  100% {
    -webkit-transform: scale(1.6);
    -moz-transform: scale(1.6);
    -ms-transform: scale(1.6);
    -o-transform: scale(1.6);
    transform: scale(1.6);
    box-shadow: inset 0 0 1px 1px rgba(23,79,198, 0);
  }
}

/* white marker styles */

@-webkit-keyframes cd-pulse-white {
  0% {
    -webkit-transform: scale(1);
    box-shadow: inset 0 0 1px 1px rgba(255,255,255,0.5);
  }

  50% {
    box-shadow: inset 0 0 1px 1px rgba(255,255,255,0.5);
  }

  100% {
    -webkit-transform: scale(1.6);
    box-shadow: inset 0 0 1px 1px rgba(23,79,198, 0);
  }
}
@-moz-keyframes cd-pulse-white {
  0% {
    -moz-transform: scale(1);
    box-shadow: inset 0 0 1px 1px rgba(255,255,255,0.5);
  }

  50% {
    box-shadow: inset 0 0 1px 1px rgba(255,255,255,0.5);
  }

  100% {
    -moz-transform: scale(1.6);
    box-shadow: inset 0 0 1px 1px rgba(23,79,198, 0);
  }
}
@keyframes cd-pulse-white {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    box-shadow: inset 0 0 1px 1px rgba(255,255,255,0.5);
  }

  50% {
    box-shadow: inset 0 0 1px 1px rgba(255,255,255,0.5);
  }

  100% {
    -webkit-transform: scale(1.6);
    -moz-transform: scale(1.6);
    -ms-transform: scale(1.6);
    -o-transform: scale(1.6);
    transform: scale(1.6);
    box-shadow: inset 0 0 1px 1px rgba(23,79,198, 0);
  }
}

/* ================ Navigation styles ================ */

.ihs-prev, .ihs-next {
    position: absolute;
    top: 50%;
    width: 30px;
    height: 30px;
    margin-top: -25px;
    cursor: pointer;
    background-size: 100%;
    background-position: center;
    border-radius: 50%;
    padding: 5px;
    z-index: 999;
    opacity: 0;
    -webkit-transition: all .5s;
    transition: all .5s;
    z-index: 6;
}

.ihs-prev:hover, .ihs-next:hover {
    background-color: rgba(0,0,0,.4);
}

.ihs-next {
    background-image: url(../img/arrow-right.svg);
    right: -50px;
}

.active > .ihs-next {
    right: 20px;
    opacity: 1;
}

.ihs-prev {
    background-image: url(../img/arrow-left.svg);
    left: -50px;
}

.active > .ihs-prev {
    left: 20px;
    opacity: 1;
}

.ihs-nav { 
  overflow: hidden; 
  position: absolute; 
  z-index: 5;
  bottom: -80px; 
  padding: 3px 10px;
  width: 100%;
  text-align: center; 
  opacity: 0;
  -webkit-transition: all .5s;
  transition: all .5s;
  background: rgba(255,255,255, 0); 
  border-radius: 25px; 
  z-index: 6;
}

.ihs-navThumbs {
   background: 0;
}

.ihs-container:hover .ihs-nav.active {
   bottom: 10px;
   opacity: 1;
}

.ihs-container:hover .ihs-navThumbs.active {
   bottom: 0px;
   opacity: 1;
}

.ihs-container:hover .ihs-nav {
   opacity: .6;
}

.ihs-nav:hover { 
    opacity: 1; 
}

.ihs-nav > span { 
  display: inline-block; 
  vertical-align: middle; 
  cursor: pointer; 
}

.ihs-dots { 
    display: inline-block; 
    vertical-align: middle; 
}

.ihs-dots:before { 
    content: ""; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
}

.ihs-nav span { 
    cursor: pointer;  
    vertical-align: middle; 
    display: inline-block; 
    background: rgba(0,0,0,.6);
    opacity: 1; 
    width: 10px; 
    height: 10px; 
    margin: 5px; 
    border: 2px solid rgba(255,255,255,.8); 
    border-radius: 50%; 
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s;
}

.ihs-nav > div {
   width: 80px;
   display: inline-block;
   cursor: pointer;
   margin: 0 10px;
   vertical-align: middle;
}

.ihs-nav img {
  max-width: 100%;
}


.ihs-container:hover .ihs-nav {
   opacity: 1;
}

.ihs-nav:hover { 
    opacity: 1; 
    box-shadow: 0 0 4px rgba(0,0,0,.4); 
    background: rgba(0,0,0, .7); 
}

.ihs-navThumbs:hover { 
    opacity: 1; 
    box-shadow: none; 
    background: 0; 
}


.ihs-nav > span:hover { 
    background: rgba(0,0,0,0.5); 
    opacity: 1;
}

.ihs-nav span { 
    
}

.ihs-content.active .caption {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

.ihs-nav span:hover, .ihs-nav span.ihs-current { 
    opacity: 1; 
    -webkit-transform: scale(1.3,1.3);
    transform: scale(1.3,1.3); 
}

.ihs-markers {
    -webkit-transition: opacity .5s;
    transition: opacity .5s;
}

.ihs-masked.ihs-container:hover .ihs-nav.active, 
.ihs-masked .ihs-content.active,
.ihs-masked .ihs-markers,
.ihs-masked .ihs-prev,
.ihs-masked .ihs-next 
{
    -webkit-transition: opacity .5s;
    transition: opacity .5s;
    opacity: 0;
    pointer-events: none;
}

.ihs-masked .ihs-markers > div {
   pointer-events: none;
}

.ihs-content .caption {
    position: absolute;
    bottom: 20px;
    right: 5%;
    padding: 12px 20px;
    color: #fff;
    font-weight: 700;
    -webkit-transform: scale(2);
    transform: scale(2);
    opacity: 0;
    -webkit-transition: all .5s;
    transition: all .5s;
    font-size: 1.4em;
    pointer-events: auto;
    background: rgba(0,0,0,.4);
}


