
#jpreOverlay {
	background-color: transparent;
	z-index:2;
	position:absolute;
}


#jpreSlide{
	font-size:22px;
	font-weight:bold;
	color:#ccc;
	text-align:center;
	width:50%;
	height:30%;
}
#jpreLoader {
    background-color: #fff;
    height: 50px;
    margin-top: -25px;
    top: 50% !important;
    width: 80%;
    left: 10%!important;
}
#jpreLoader:after {
	color:#fff;
	font-size:24px;
	line-height:50px;
	width:100%;
	position:absolute;
	text-align:center;
	z-index: 10;
	-webkit-transition: all 0.5s ease-in-out 0.15s;
	-moz-transition: all 0.5s ease-in-out 0.15s;
	-o-transition: all 0.5s ease-in-out 0.15s;
	-ms-transition: all 0.5s ease-in-out 0.15s;
	transition: all 0.5s ease-in-out 0.15s;
}

.visible #jpreLoader:after {
	color:#000;
}

#jpreLoader.scale-up {
	opacity:0;
	webkit-transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990)!important;
		-moz-transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990)!important;
		-o-transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990)!important;
		transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990)!important;
		/* custom */
		-webkit-transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990)!important;
		-moz-transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990)!important;
		-o-transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990)!important;
		transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990)!important;
}
#jpreBar {
	background-color:rgba(255, 255, 255, 0.8);
	bottom:0;
	right:0;
	position:absolute;
	box-sizing:border-box;
	z-index:100;
}
#jprePercentage {
	display:none;
}

#jpreButton{
	padding:3px 10px;
	cursor:pointer;
	font-weight:bold;
	line-height:1.5;
	text-align:center;
	width:100px;
	margin:0 auto;
	color:#fff;
	text-shadow:-1px -1px 0 #01293F;
	border:1px solid #2EACEA;
	
	border-radius:30px;
	-moz-border-radius:30px;
	-webkit-border-radius:30px;
	
	background-color: #23a6ed;
	background-image: -moz-linear-gradient(top, #23a6ed 0%, #1275aa 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#23a6ed), color-stop(100%,#1275aa));
	background-image: -webkit-linear-gradient(top, #23a6ed 0%,#1275aa 100%);
	background-image: -o-linear-gradient(top, #23a6ed 0%,#1275aa 100%);
	background-image: -ms-linear-gradient(top, #23a6ed 0%,#1275aa 100%);
	background-image: linear-gradient(to bottom, #23a6ed 0%,#1275aa 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#23a6ed', endColorstr='#1275aa',GradientType=0 );
}

@-webkit-keyframes progress {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -60px -60px;
  }
}
@-moz-keyframes progress {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -60px -60px;
  }
}
@-ms-keyframes progress {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -60px -60px;
  }
}
@-o-keyframes progress {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -60px -60px;
  }
}
@keyframes progress {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -60px -60px;
  }
}

.animsition,
.animsition-overlay {
  position: relative;
  opacity: 0;
  animation-fill-mode: both;
}

/**
 * overlay option
 */
.animsition-overlay-slide {
  position: fixed;
  z-index: 1000;
  width: 100%;
  height: 100%;
  background-color: #fff;
}


 /* loading option */
.animsition-loading,
.animsition-loading:after {
  width: 32px;
  height: 32px;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -16px;
  margin-left: -16px;
  border-radius: 50%;
  z-index: 100000;
}

.animsition-loading {
  background-color: transparent;
  border-top: 5px solid rgba(0, 0, 0, 0.2);
  border-right: 5px solid rgba(0, 0, 0, 0.2);
  border-bottom: 5px solid rgba(0, 0, 0, 0.2);
  border-left: 5px solid #eee;
  transform: translateZ(0);
  animation-iteration-count:infinite;
  animation-timing-function: linear;
  animation-duration: .8s;
  animation-name: animsition-loading;
}

@keyframes animsition-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


.fade-in {
  animation-name: fade-in;
}


@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


.fade-out {
  animation-name: fade-out;
}
