.spinner-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4);
  z-index: 10002;
}
.spinner, .spinnerlarge, .spinnermedium{
  position: absolute;
  top:0;
  bottom: 0;
  left: -300px;
  right: 0;
  margin: auto;
  background-color:#C00;
  border-radius:50%;
  overflow:hidden;
}
.spinnermedium{
  left: 0px;
  height:100px; /* Just change W&H */
  width:100px;

}
.spinner{
  height:50px; /* Just change W&H */
  width:50px;
}
.highlighttopl{
  position:absolute;
  bottom:0;
  right:0;
  display:block;
  background-color:#900;
  height:50%;
  border-radius:100% 0 0 0;
  width:50%;
  animation:highlighttl 3s linear infinite;
  -webkit-animation: highlighttl 1s linear infinite; /* Chrome, Safari, Opera */
}
.highlighttopr{
  position:absolute;
  bottom:0;
  left:0;
  display:block;
  background-color:#900;
  height:50%;
  border-radius:0 100% 0 0;
  width:50%;
  animation:highlighttr 3s linear infinite;
  -webkit-animation: highlighttr 1s linear infinite; /* Chrome, Safari, Opera */
}
.highlightbtml{
  position:absolute;
  top:0;
  right:0;
  display:block;
  background-color:#000;
  height:0%;
  border-radius:0 0 0 100%;
  width:50%;
  animation:highlightbl 3s linear infinite;
  -webkit-animation: highlightbl 1s linear infinite; /* Chrome, Safari, Opera */
}
.highlightbtmr{
  position:absolute;
  top:0;
  left:0;
  display:block;
  background-color:#000;
  height:0%;
  border-radius:0 0 100% 0;
  width:50%;
  animation:highlightbr 3s linear infinite;
  -webkit-animation: highlightbr 1s linear infinite; /* Chrome, Safari, Opera */
}
.bgtopl{
  position:relative;
  display:block;
  float:left;
  background-color:#C00;
  opacity:1;
  height:50%;
  width:50%;
  animation:bgtl 3s linear infinite;
  -webkit-animation: bgtl 1s linear infinite; /* Chrome, Safari, Opera */
}
.bgtopr{
  position:relative;
  display:block;
  float:left;
  background-color:#C00;
  opacity:1;
  height:50%;
  width:50%;
  animation:bgtr 3s linear infinite;
  -webkit-animation: bgtr 1s linear infinite; /* Chrome, Safari, Opera */
}
.bgbtml{
  display:block;
  position:relative;
  background-color:#3c7af4;
  opacity:1;
  float:left;
  height:50%;
  width:50%;
  animation:bgbl 3s linear infinite;
  -webkit-animation: bgbl 1s linear infinite; /* Chrome, Safari, Opera */
}
.bgbtmr{
  display:block;
  position:relative;
  background-color:#3c7af4;
  float:left;
  opacity:1;
  height:50%;
  width:50%;
  animation:bgbr 3s linear infinite;
  -webkit-animation: bgbr 1s linear infinite; /* Chrome, Safari, Opera */
}
.bottomrow{
  padding:0;
  width:100%;
  margin:0;
  height:100%;
  clear:both;
}

/* ANIMATIONS - HIGHLIGHTS TOP */

/* Chrome, Safari, Opera */
@-webkit-keyframes highlighttr {
  0%   {
    height:100%;
    width:100%;
    background-color:#3c7af4;
  }
  14%  {
    height:0%;
    width:100%;
    background-color:#00F;
  }
  15%  {
    height:0%;
    width:100%;
    background-color:#C00;
  }
  19%  {
    height:100%;
    width:100%;
    background-color:#C00;
  }
  25%  {
    height:100%;
    width:100%;
    background-color:#C00;
  }
  37%  {
    height:100%;
    width:0%;
    background-color:#900;
  }
  59%  {
    height:100%;
    width:0%;
    background-color:#900;
  }
  60%  {
    height:100%;
    width:0%;
    background-color:#fcd64c;
  }
  61%  {
    height:0%;
    width:100%;
    background-color:#fcd64c;
  }
  62%  {
    height:0%;
    width:100%;
    background-color:#1c9254;
  }
  75% {
    height:100%;
    width:100%;
    background-color:#24ae64;
  }
  86% {
    height:100%;
    width:0%;
    background-color:#24ae64;
  }
  87% {
    height:100%;
    width:0%;
    background-color:#00F;
  }
  100% {
    height:100%;
    width:100%;
    background-color:#3c7af4;
  }
}

/* Standard syntax */
@keyframes highlighttr {
  0%   {
    height:100%;
    width:100%;
    background-color:#3c7af4;
  }
  14%  {
    height:0%;
    width:100%;
    background-color:#00F;
  }
  15%  {
    height:0%;
    width:100%;
    background-color:#C00;
  }
  19%  {
    height:100%;
    width:100%;
    background-color:#C00;
  }
  25%  {
    height:100%;
    width:100%;
    background-color:#C00;
  }
  37%  {
    height:100%;
    width:0%;
    background-color:#900;
  }
  59%  {
    height:100%;
    width:0%;
    background-color:#900;
  }
  60%  {
    height:100%;
    width:0%;
    background-color:#fcd64c;
  }
  61%  {
    height:0%;
    width:100%;
    background-color:#fcd64c;
  }
  62%  {
    height:0%;
    width:100%;
    background-color:#1c9254;
  }
  75% {
    height:100%;
    width:100%;
    background-color:#24ae64;
  }
  86% {
    height:100%;
    width:0%;
    background-color:#24ae64;
  }
  87% {
    height:100%;
    width:0%;
    background-color:#00F;
  }
  100% {
    height:100%;
    width:100%;
    background-color:#3c7af4;
  }
}



/* Chrome, Safari, Opera */
@-webkit-keyframes highlighttl {
  0%   {
    height:100%;
    width:100%;
    background-color:#3c7af4;
  }
  14%  {
    height:0%;
    width:100%;
    background-color:#00F;
  }
  16%  {
    height:0%;
    width:100%;
    background-color:#C00;
  }
  36%  {
    height:100%;
    width:0%;
    background-color:#C00;
  }
  37%  {
    height:100%;
    width:0%;
    background-color:#fcde6c;
  }
  50%  {
    height:100%;
    width:100%;
    background-color:#fcd64c;
  }
  61%  {
    height:0%;
    width:100%;
    background-color:#fcd64c;
  }
  62%  {
    height:0%;
    width:100%;
    background-color:#1c9254;
  }
  75% {
    height:100%;
    width:100%;
    background-color:#24ae64;
  }
  87% {
    height:100%;
    width:0%;
    background-color:#1c9654;
  }
  100% {
    height:100%;
    width:0%;
    background-color:#1c9654;
  }
}

/* Standard syntax */
@keyframes highlighttl {
  0%   {
    height:100%;
    width:100%;
    background-color:#3c7af4;
  }
  14%  {
    height:0%;
    width:100%;
    background-color:#00F;
  }
  16%  {
    height:0%;
    width:100%;
    background-color:#C00;
  }
  36%  {
    height:100%;
    width:0%;
    background-color:#C00;
  }
  37%  {
    height:100%;
    width:0%;
    background-color:#fcde6c;
  }
  50%  {
    height:100%;
    width:100%;
    background-color:#fcd64c;
  }
  61%  {
    height:0%;
    width:100%;
    background-color:#fcd64c;
  }
  62%  {
    height:0%;
    width:100%;
    background-color:#1c9254;
  }
  75% {
    height:100%;
    width:100%;
    background-color:#24ae64;
  }
  87% {
    height:100%;
    width:0%;
    background-color:#1c9654;
  }
  100% {
    height:100%;
    width:0%;
    background-color:#1c9654;
  }
}


/* ANIMATIONS - HIGHLIGHTS BOTTOM */

/* Chrome, Safari, Opera */
@-webkit-keyframes highlightbr {
  13%   {
    height:0%;
    width:100%;
    background-color:#900;
  }
  24%  {
    height:100%;
    width:100%;
    background-color:#C00;
  }
  25%  {
    height:100%;
    width:100%;
    background-color:#C00;
  }
  37%  {
    height:100%;
    width:0%;
    background-color:#900;
  }
  49%  {
    height:100%;
    width:0%;
    background-color:#900;
  }
  50%  {
    height:100%;
    width:0%;
    background-color:#fcd64c;
  }
  51%  {
    height:100%;
    width:100%;
    background-color:#fcd64c;
  }
  62%  {
    height:0%;
    width:100%;
    background-color:#fcde6c;
  }
  63%  {
    height:0%;
    width:100%;
    background-color:#24ae64;
  }
  86% {
    height:100%;
    width:0%;
    background-color:#24ae64;
  }
  87% {
    height:100%;
    width:0%;
    background-color:#00F;
  }
  100% {
    height:100%;
    width:100%;
    background-color:#3c7af4;
  }
}

/* Standard syntax */
@keyframes highlightbr {
  13%   {
    height:0%;
    width:100%;
    background-color:#900;
  }
  24%  {
    height:100%;
    width:100%;
    background-color:#C00;
  }
  25%  {
    height:100%;
    width:100%;
    background-color:#C00;
  }
  37%  {
    height:100%;
    width:0%;
    background-color:#900;
  }
  49%  {
    height:100%;
    width:0%;
    background-color:#900;
  }
  50%  {
    height:100%;
    width:0%;
    background-color:#fcd64c;
  }
  51%  {
    height:100%;
    width:100%;
    background-color:#fcd64c;
  }
  62%  {
    height:0%;
    width:100%;
    background-color:#fcde6c;
  }
  63%  {
    height:0%;
    width:100%;
    background-color:#24ae64;
  }
  86% {
    height:100%;
    width:0%;
    background-color:#24ae64;
  }
  87% {
    height:100%;
    width:0%;
    background-color:#00F;
  }
  100% {
    height:100%;
    width:100%;
    background-color:#3c7af4;
  }
}



/* Chrome, Safari, Opera */
@-webkit-keyframes highlightbl {
  13%   {
    height:0%;
    width:100%;
    background-color:#900;
  }
  24%  {
    height:100%;
    width:100%;
    background-color:#C00;
  }
  25%  {
    height:100%;
    width:100%;
    background-color:#C00;
  }
  36%  {
    height:100%;
    width:0%;
    background-color:#C00;
  }
  37%  {
    height:100%;
    width:0%;
    background-color:#fcde6c;
  }
  50%  {
    height:100%;
    width:100%;
    background-color:#fcd64c;
  }
  51%  {
    height:100%;
    width:100%;
    background-color:#fcd64c;
  }
  62%  {
    height:0%;
    width:100%;
    background-color:#fcde6c;
  }
  63%  {
    height:0%;
    width:100%;
    background-color:#24ae64;
  }
  75%  {
    height:100%;
    width:100%;
    background-color:#24ae64;
  }
  87% {
    height:100%;
    width:0%;
    background-color:#1c9654;
  }
  100% {
    height:100%;
    width:0%;
    background-color:#1c9654;
  }
}

/* Standard syntax */
@keyframes highlightbl {
  13%   {
    height:0%;
    width:100%;
    background-color:#900;
  }
  24%  {
    height:100%;
    width:100%;
    background-color:#C00;
  }
  25%  {
    height:100%;
    width:100%;
    background-color:#C00;
  }
  36%  {
    height:100%;
    width:0%;
    background-color:#C00;
  }
  37%  {
    height:100%;
    width:0%;
    background-color:#fcde6c;
  }
  50%  {
    height:100%;
    width:100%;
    background-color:#fcd64c;
  }
  51%  {
    height:100%;
    width:100%;
    background-color:#fcd64c;
  }
  62%  {
    height:0%;
    width:100%;
    background-color:#fcde6c;
  }
  63%  {
    height:0%;
    width:100%;
    background-color:#24ae64;
  }
  75%  {
    height:100%;
    width:100%;
    background-color:#24ae64;
  }
  87% {
    height:100%;
    width:0%;
    background-color:#1c9654;
  }
  100% {
    height:100%;
    width:0%;
    background-color:#1c9654;
  }
}


/* ANIMATIONS - BGS TOP */

/* Chrome, Safari, Opera */
@-webkit-keyframes bgtl {
  0%   {
    background-color:#C00;
  }
  25%  {
    background-color:#C00;
  }
  50%  {
    background-color:#C00;
  }
  51%  {
    background-color:#fcd64c;
  }
  74%  {
    background-color:#fcd64c;
  }
  75% {
    background-color:#1c9654;
  }
  76%  {
    background-color:#3c7af4;
  }
  100% {
    background-color:#3c7af4;
  }
}

/* Standard syntax */
@keyframes bgtl {
  0%   {
    background-color:#C00;
  }
  25%  {
    background-color:#C00;
  }
  50%  {
    background-color:#C00;
  }
  51%  {
    background-color:#fcd64c;
  }
  74%  {
    background-color:#fcd64c;
  }
  75% {
    background-color:#1c9654;
  }
  76%  {
    background-color:#3c7af4;
  }
  100% {
    background-color:#3c7af4;
  }
}



/* Chrome, Safari, Opera */
@-webkit-keyframes bgtr {
  0%   {
    background-color:#C00;
  }
  25%  {
    background-color:#C00;
  }
  26%  {
    background-color:#fcd64c;
  }
  51%  {
    background-color:#fcd64c;
  }
  75% {
    background-color:#fcd64c;
  }
  76% {
    background-color:#24ae64;
  }
  100% {
    background-color:#24ae64;
  }
}

/* Standard syntax */
@keyframes bgtr {
  0%   {
    background-color:#C00;
  }
  25%  {
    background-color:#C00;
  }
  26%  {
    background-color:#fcd64c;
  }
  51%  {
    background-color:#fcd64c;
  }
  75% {
    background-color:#fcd64c;
  }
  76% {
    background-color:#24ae64;
  }
  100% {
    background-color:#24ae64;
  }
}


/* ANIMATIONS - BGS BOTTOM */

/* Chrome, Safari, Opera */
@-webkit-keyframes bgbl {
  0%   {
    background-color:#3c7af4;
  }
  25%  {
    background-color:#3c7af4;
  }
  26%  {
    background-color:#C00;
  }
  50%  {
    background-color:#C00;
  }
  51%  {
    background-color:#fcd64c;
  }
  52%  {
    background-color:#24ae64;
  }
  74%  {
    background-color:#24ae64;
  }
  75%  {
    background-color:#3c7af4;
  }
  100% {}
}

/* Standard syntax */
@keyframes bgbl {
  0%   {
    background-color:#3c7af4;
  }
  25%  {
    background-color:#3c7af4;
  }
  26%  {
    background-color:#C00;
  }
  50%  {
    background-color:#C00;
  }
  51%  {
    background-color:#fcd64c;
  }
  52%  {
    background-color:#24ae64;
  }
  74%  {
    background-color:#24ae64;
  }
  75%  {
    background-color:#3c7af4;
  }
  100% {}
}



/* Chrome, Safari, Opera */
@-webkit-keyframes bgbr {
  0%   {
    background-color:#3c7af4;
  }
  25%  {
    background-color:#3c7af4;
  }
  26%  {
    background-color:#fcd64c;
  }
  50%  {
    background-color:#fcd64c;
  }
  51%  {
    background-color:#fcd64c;
  }
  52%  {
    background-color:#24ae64;
  }
  75%  {
    background-color:#24ae64;
  }
  100% {
    background-color:#24ae64;
  }
}

/* Standard syntax */
@keyframes bgbr {
  0%   {
    background-color:#3c7af4;
  }
  25%  {
    background-color:#3c7af4;
  }
  26%  {
    background-color:#fcd64c;
  }
  50%  {
    background-color:#fcd64c;
  }
  51%  {
    background-color:#fcd64c;
  }
  52%  {
    background-color:#24ae64;
  }
  75%  {
    background-color:#24ae64;
  }
  100% {
    background-color:#24ae64;
  }
}
.rotation-anim {
  animation-name: spin;
  animation-duration: 1000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes spin {
  from {
    transform:rotate(0deg);
  }
  to {
    transform:rotate(360deg);
  }
}
.dissolve-enter-active,
.dissolve-leave-active {
  transition: all 0.3s;
}

.dissolve-enter {
  background-color: rgba(0,0,0,0);
  /*transform: translate(100%, 0);*/
  /*-webkit-transform: translate(100%, 0);*/

}
.dissolve-enter-to {
  background-color: rgba(0,0,0,0.7);
}
.dissolve-leave-to {
  background-color: rgba(0,0,0,0);
}

.dissolve-enter-active,
.dissolve-leave-active {
  transition: all 0.3s;
}
.progressView {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0,0.7);
  z-index:99999;
}
.center-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.content-center {
  text-align: center;
}
.loading-message {
  color:white;
  margin-top:20px;
}
.bounce-anim {
  animation-name: bounce-4;
  animation-duration: 1000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.bounce-4 {
  animation-name: bounce-4;
  animation-timing-function: ease;
}
@keyframes bounce-4 {
  0%   { transform: scale(1,1)    translateY(0); }
  10%  { transform: scale(1.1,.9) translateY(0); }
  30%  { transform: scale(.9,1.1) translateY(-100px); }
  50%  { transform: scale(1,1)    translateY(0); }
  100% { transform: scale(1,1)    translateY(0); }
}