/*Preloader*/


.site-preloader-wrap {
 background: #fff none repeat scroll 0 0;
 height: 100%;
 position: fixed;
 width: 100%;
 z-index: 99999;
}
.site-preloader-wrap .cssload-loader {
 left: 50%;
 margin: -75px 0 0 -75px;
 position: absolute;
 top: 50%;
 width: 146px;
 height: 146px;
 line-height: 146px;
 box-sizing: border-box;
 text-align: center;
 z-index: 0;
 text-transform: uppercase;
 -o-text-transform: uppercase;
 -ms-text-transform: uppercase;
 -webkit-text-transform: uppercase;
 -moz-text-transform: uppercase;
}
.cssload-loader:before,
.cssload-loader:after {
 opacity: 0;
 box-sizing: border-box;
 -o-box-sizing: border-box;
 -ms-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 content: "\0020";
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border-radius: 97px;
 border: 5px solid rgb(0,41,155);
 box-shadow: 0 0 49px rgb(0,41,155), inset 0 0 49px rgb(0,41,155);
 -o-box-shadow: 0 0 49px rgb(0,41,155), inset 0 0 49px rgb(0,41,155);
 -ms-box-shadow: 0 0 49px rgb(0,41,155), inset 0 0 49px rgb(0,41,155);
 -webkit-box-shadow: 0 0 49px rgb(0,41,155), inset 0 0 49px rgb(0,41,155);
 -moz-box-shadow: 0 0 49px rgb(0,41,155), inset 0 0 49px rgb(0,41,155);
}
.cssload-loader:after {
 z-index: 1;
 animation: cssload-gogoloader 2.3s infinite 1.15s;
 -o-animation: cssload-gogoloader 2.3s infinite 1.15s;
 -ms-animation: cssload-gogoloader 2.3s infinite 1.15s;
 -webkit-animation: cssload-gogoloader 2.3s infinite 1.15s;
 -moz-animation: cssload-gogoloader 2.3s infinite 1.15s;
}
.cssload-loader:before {
 z-index: 2;
 animation: cssload-gogoloader 2.3s infinite;
 -o-animation: cssload-gogoloader 2.3s infinite;
 -ms-animation: cssload-gogoloader 2.3s infinite;
 -webkit-animation: cssload-gogoloader 2.3s infinite;
 -moz-animation: cssload-gogoloader 2.3s infinite;
}
@keyframes cssload-gogoloader {
 0% {
 transform: scale(0);
 opacity: 0;
 }
 50% {
 opacity: 1;
 }
 100% {
 transform: scale(1);
 opacity: 0;
 }
}
@-o-keyframes cssload-gogoloader {
 0% {
 -o-transform: scale(0);
 opacity: 0;
 }
 50% {
 opacity: 1;
 }
 100% {
 -o-transform: scale(1);
 opacity: 0;
 }
}
@-ms-keyframes cssload-gogoloader {
 0% {
 -ms-transform: scale(0);
 opacity: 0;
 }
 50% {
 opacity: 1;
 }
 100% {
 -ms-transform: scale(1);
 opacity: 0;
 }
}
@-webkit-keyframes cssload-gogoloader {
 0% {
 -webkit-transform: scale(0);
 opacity: 0;
 }
 50% {
 opacity: 1;
 }
 100% {
 -webkit-transform: scale(1);
 opacity: 0;
 }
}
@-moz-keyframes cssload-gogoloader {
 0% {
 -moz-transform: scale(0);
 opacity: 0;
 }
 50% {
 opacity: 1;
 }
 100% {
 -moz-transform: scale(1);
 opacity: 0;
 }
}

/*Preloader ring*/
.toplayerbutt .get-pred{
	transform:scale(1);
  opacity: 1;
}
.toplayerbutt.toplayerbutt-clicked .get-pred{
	transform:scale(0);
  opacity: 0;
  height:0;
}

.toplayerbutt .loading-button{
	transform:scale(0);
  opacity: 0;
  height:0;
}

.toplayerbutt.toplayerbutt-clicked .loading-button{
	display: flex;
  justify-content: center;
  align-items: center;
  transform:scale(1);
  opacity: 1 !important;
}

.toplayerbutt.toplayerbutt-clicked .spinner-loading {
  width: 5px;
  height: 5px;
  background: #fff;
  border-radius: 5px;
  margin-left: 3px;
  margin-bottom: 15px;
  /*transition: all 0.3s ease 0s;*/
}
.prediction__section .toplayer .toplayerbutt:hover .spinner-loading {
  background: #1585f8;
  /*transition: all 0.3s ease 0s;*/
}
.spinner-loading:nth-last-child(1) {
  animation: bounce 1s 0.1s linear infinite;
}
.spinner-loading:nth-last-child(2) {
  animation: bounce 1s 0.3s linear infinite;
}
.spinner-loading:nth-last-child(3) {
  animation: bounce 1s 0.5s linear infinite;
}
@keyframes bounce {
  0 {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 15px);
  }
  100% {
    transform: translate(0, 0);
  }
}

.prediction__section__table{
	min-height: 262px;
}
.prediction__section__table__full{
	min-height: auto !important;
}

.table-result{
	height: 0px;
  overflow: hidden;
}

.table-show-delay {
  width: calc(100% - 10rem);
  height: 262px;
  position: absolute;
  background: #fff;
  display: flex;
  justify-content: center;
  z-index: 1;
  font-size: 20px;
  /*margin-top: 3rem;*/
  font-weight: 500;
  opacity:0;
  visibility: hidden;
  transition: opacity 1s ease, height 0s ease 1s, visibility 0s ease 1s;
}

.table-show-delay.preloader-visible{
	opacity: 1;
	visibility: visible;
	transition: opacity 3s ease;
}

.ring
{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:150px;
  height:150px;
  background:transparent;
  border:3px solid #fff;
  border-radius:50%;
  color:#1585f8;
  text-shadow:0 0 10px #d4d4d9;
  box-shadow:0 0 20px #1585f8;
}

.ring p 
{
 	margin-top: 34px;
  text-align: center;
  letter-spacing: 4px;
  text-transform: uppercase;
  line-height: 30px;
  font-family: sans-serif;
  font-size: 12px;
  width: auto !important;
  margin-bottom: 0 !important; 
}
.ring:before
{
  content:'';
  position:absolute;
  /*top:-3px;*/
  left:0px;
  width:100%;
  height:100%;
  border:3px solid transparent;
  border-top:3px solid #1585f8;
  border-right:3px solid #1585f8;
  border-radius:50%;
  animation:animateC 5s linear infinite;
}
.prediction_spin
{
  /*display:block;*/
  position:absolute;
  top:calc(50% - 2px);
  left:50%;
  width:50%;
  height:4px;
  background:transparent;
  transform-origin:left;
  animation:animate 5s linear infinite;
}
.prediction_spin:before
{
  content:'';
  position:absolute;
  width:35px;
  height:35px;
  border-radius:50%;
  background-image: url(../img/gero_circle.png);
  top:-6px;
  right:-18px;
  background-size: 35px;
  animation:animateR 5s linear infinite;
}

@keyframes animateC
{
  0%
  {
    transform:rotate(0deg);
  }
  100%
  {
    transform:rotate(360deg);
  }
}
@keyframes animateR
{
  0%
  {
    transform:rotate(-45deg);
  }
  100%
  {
    transform:rotate(-405deg);
  }
}
@keyframes animate
{
  0%
  {
    transform:rotate(45deg);
  }
  100%
  {
    transform:rotate(405deg);
  }
}