.circles-container {
  display: block;
  position: relative;
  width: 850px;
  height: 500px;
  margin: 0 auto
}

.fader-main {
  width: 470px;
  height: 470px
}

.circle-main .fader-main {
  position: absolute;
  top: -2px;
  left: -2px;
  opacity: 0;
  height: 474px;
  width: 474px
}

.circles-container .left_arrow {
  width: 80px;
  height: 103px;
  position: absolute;
  top: 205px;
  left: -75px;
  background: url(../images/arrows.png) left;
  z-index: 201
}

.circles-container .left_arrow:hover {
  top: 206px;
  left: -74px
}

.circles-container .right_arrow {
  width: 80px;
  height: 103px;
  position: absolute;
  top: 205px;
  right: -75px;
  background: url(../images//arrows.png) right;
  z-index: 201
}

.circles-container .right_arrow:hover {
  top: 206px;
  right: -76px
}

.circle {
  height: 300px;
  width: 300px;
  border-radius: 300px;
  border: 0 solid #42a75d;
  overflow: hidden;
  position: absolute
}

.c-1 {
  top: 110px;
  left: 0
}

.c-3 {
  top: 110px;
  left: 550px
}

.circle img {
  height: 300px;
  width: 300px;
  border-radius: 300px;
  border: 0 solid #c2c506;
  overflow: hidden;
  position: absolute
}

.circle img.css3 {
  -webkit-transition: opacity 3s ease-out;
  -moz-transition: opacity 3s ease-out;
  -o-transition: opacity 3s ease-out;
  transition: opacity 3s ease-out
}

.circle-main img {
  height: 470px;
  width: 470px;
  border-radius: 470px;
  overflow: hidden;
  position: absolute
}

.circle-main img.css3 {
  -webkit-transition: opacity 3s ease-out;
  -moz-transition: opacity 3s ease-out;
  -o-transition: opacity 3s ease-out;
  transition: opacity 3s ease-out
}

.circles-container img.transparent {
  opacity: 0
}
.circle-content {
  position: absolute;
  top: 330px;
  left: 0;
  padding: 0 75px;
  width: 320px;
  height: 100px;
  overflow: hidden;
  background:url(../images/title-bkg.png) center -340px;
}

.circle-content .circle-title {
  color: white;
  font-size: 36px;
  padding: 5px 0;
  text-align: center;
  border-bottom: 1px solid white
}

.circle-content .circle-description {
  color: white;
  text-align: center;
  padding: 10px 30px;
  font-size: 14px
}

.main-image-load {
  height: 470px;
  width: 470px;
  border-radius: 470px;
  overflow: hidden;
  position: absolute;
  top: 15px;
  left: 15px
}

.circle-loading-bar {
  width: 0;
  overflow: hidden;
  position: absolute;
  left: 0;
  opacity: 1
}

.transition-active {
  transition: opacity linear,width linear;
  -moz-transition: opacity linear,width linear;
  -webkit-transition: opacity linear,width linear;
  -o-transition: opacity linear,width linear;
  transition-duration: 3s;
  -moz-transition-duration: 3s;
  -webkit-transition-duration: 3s;
  -o-transition-duration: 3s
}

.transition-inactive {
  transition: opacity linear,width linear;
  -moz-transition: opacity linear,width linear;
  -webkit-transition: opacity linear,width linear;
  -o-transition: opacity linear,width linear;
  transition-duration: 0s;
  -moz-transition-duration: 0s;
  -webkit-transition-duration: 0s;
  -o-transition-duration: 0s
}

.slider-container,.c-3-slider,.c-1-slider {
  width: 0;
  height: 0;
  position: absolute;
  display: block;
  overflow: hidden
}

.whiteFullHalf {
  height: 250px;
  top: 250px;
  background: url(progress-templates/progress-white-full.png) 0 -250px
}

.whiteDashedHalf {
  height: 250px;
  top: 250px;
  background: url(progress-templates/progress-white-dashed.png) 0 -250px
}

.whiteCheckHalf {
  height: 250px;
  top: 250px;
  background: url(progress-templates/progress-white-check.png) 0 -250px
}

.whiteCrossHatchHalf {
  height: 250px;
  top: 250px;
  background: url(progress-templates/progress-white-crosshatch.png) 0 -250px
}

.whiteDotsSmallHalf {
  height: 250px;
  top: 250px;
  background: url(progress-templates/progress-white-dotssmall.png) 0 -250px
}

.whiteDotsLargeHalf {
  height: 250px;
  top: 250px;
  background: url(progress-templates/progress-white-dotslarge.png) 0 -250px
}

.whiteOilSilkHalf {
  height: 250px;
  top: 250px;
  background: url(progress-templates/progress-white-oilsilk.png) 0 -250px
}

.whiteFullFull {
  height: 500px;
  top: 0;
  background: url(progress-templates/progress-white-full.png) 0 0
}

.whiteDashedFull {
  height: 500px;
  top: 0;
  background: url(progress-templates/progress-white-dashed.png) 0 0
}

.whiteCheckFull {
  height: 500px;
  top: 0;
  background: url(progress-templates/progress-white-check.png) 0 0
}

.whiteCrossHatchFull {
  height: 500px;
  top: 0;
  background: url(progress-templates/progress-white-crosshatch.png) 0 0
}

.whiteDotsSmallFull {
  height: 500px;
  top: 0;
  background: url(progress-templates/progress-white-dotssmall.png) 0 0
}

.whiteDotsLargeFull {
  height: 500px;
  top: 0;
  background: url(progress-templates/progress-white-dotslarge.png) 0 0
}

.whiteOilSilkFull {
  height: 500px;
  top: 0;
  background: url(progress-templates/progress-white-oilsilk.png) 0 0
}

.circle-main {
  height: 500px;
  width: 500px;
  border-radius: 500px;
  overflow: hidden;
  position: absolute;
  top: 10px;
  left: 190px;
  background: #c2c506
}

.circles-images {
  position: absolute;
  top: 430px;
  left: 650px
}

.circles-images a {
  width: 21px;
  height: 21px;
  display: block;
  float: right;
  background: url(../images/bubbles.png) no-repeat;
  margin-right: 4px;
  cursor: default
}

.circles-images a.current {
  background: url(../images/bubbles.png) no-repeat -24px
}

.circles-images a img {
  display: none
}