.clearsky.color-circle{
    animation: colorchange-clearsky 5s infinite;
    -webkit-animation: colorchange-clearsky 5s infinite;
  }

  .lock.color-circle{
     animation: colorchange-lock 5s infinite;
    -webkit-animation: colorchange-lock 5s infinite;
  }

  .portals.color-circle{
    animation: colorchange-portals 5s infinite;
    -webkit-animation: colorchange-portals 5s infinite;

  }

  .train.color-circle{
    animation: colorchange-train 5s infinite;
    -webkit-animation: colorchange-train 5s infinite;

  }
  .computerworld.color-circle{
    animation: colorchange-computerworld 5s infinite forwards;
    -webkit-animation: colorchange-computerworld 5s infinite forwards;
  }

  .schoolset.color-circle {
    animation: colorchange-schoolset 5s infinite;
    -webkit-animation: colorchange-schoolset 5s infinite;
  }

  .elements.color-circle{
    animation: colorchange-elements 4s infinite forwards;
    -webkit-animation: colorchange-elements 4s infinite forwards;
  }

  .vanguard-dateless-planner.color-circle{
    animation: colorchange-vanguard-dateless-planner 5s infinite;
    -webkit-animation: colorchange-vanguard-dateless-planner 5s infinite;
  }

  .nyc-vanguard.color-circle{
    animation: colorchange-nyc-vanguard 5s infinite;
    -webkit-animation: colorchange-nyc-vanguard 5s infinite;
  }




@keyframes colorchange-nyc-vanguard
{
0%   {background: #f6db71;}
20%  {background: #f6db71;}
30%  {background: #e6a693;}
60%  {background: #e6a693;}
70%  {background: #bedbd7;}
90%  {background: #bedbd7;}
95%  {background: #f6db71;}
100%  {background: #f6db71;}
}

@-webkit-keyframes colorchange-nyc-vanguard
{
  0%   {background: #f6db71;}
  20%  {background: #f6db71;}
  30%  {background: #e6a693;}
  60%  {background: #e6a693;}
  70%  {background: #bedbd7;}
  90%  {background: #bedbd7;}
  95%  {background: #f6db71;}
  100%  {background: #f6db71;}
}



@keyframes colorchange-vanguard-dateless-planner
{
0%   {background: #00a796;}
20%  {background: #00a796;}
25%  {background: #ffc600;}
45%  {background: #ffc600;}
50%  {background: #fb5058;}
70%  {background: #fb5058;}
75%  {background: #006db6;}
95%  {background: #006db6;}
100%  {background: #00a796;}
}

@-webkit-keyframes colorchange-vanguard-dateless-planner
{
0%   {background: #00a796;}
20%  {background: #00a796;}
25%  {background: #ffc600;}
45%  {background: #ffc600;}
50%  {background: #fb5058;}
70%  {background: #fb5058;}
75%  {background: #006db6;}
95%  {background: #006db6;}
100%  {background: #00a796;}
}




@keyframes colorchange-clearsky
	{
0%   {background:  #71507F;}
15%  {background: #8cbeb8;}
30%  {background: #F05B7C;}
45%  {background: #71507F;}
60%  {background: #8cbeb8;}
75% {background: #F05B7C;}
100%   {background: #71507F;}
}

  @-webkit-keyframes colorchange-clearsky
{
0%   {background:  #71507F;}
15%  {background: #8cbeb8;}
30%  {background: #F05B7C;}
45%  {background: #71507F;}
60%  {background: #8cbeb8;}
75% {background: #F05B7C;}
100%   {background: #71507F;}
}




  @keyframes colorchange-schoolset
{
0%   {background: #000;}
15%  {background: rgb(41, 131, 92);}
30%  {background: rgb(255, 207, 24);}
45%   {background: #000;}
60%  {background: rgb(41, 131, 92);}
75% {background: rgb(255, 207, 24);}
100%   {background: #000;}
}

@-webkit-keyframes colorchange-schoolset
{
0%   {background: #000;}
15%  {background: rgb(41, 131, 92);}
30%  {background: rgb(255, 207, 24);}
45%   {background: #000;}
60%  {background: rgb(41, 131, 92);}
75% {background: rgb(255, 207, 24);}
100%   {background: #000;}
}





@keyframes colorchange-computerworld
{
0%   {background: #fed329;}
20%   {background: #fed329;}
30% {background: #7bd1cd;}
50% {background: #7bd1cd;}
60%   {background: #ff84aa;}
80%   {background: #ff84aa;}
90%   {background: #fed329;}
100%   {background: #fed329;}
}

@-webkit-keyframes colorchange-computerworld
{
0%   {background: #fed329;}
20%   {background: #fed329;}
30% {background: #7bd1cd;}
50% {background: #7bd1cd;}
60%   {background: #ff84aa;}
80%   {background: #ff84aa;}
90%   {background: #fed329;}
100%   {background: #fed329;}
}






  @keyframes colorchange-train
{
0%   {background:  #7a5ca6;}
15%  {background: #44b363;}
30%  {background: #ff4035;}
45%   {background: #7a5ca6;}
60%  {background: #44b363;}
75% {background: #ff4035;}
100%   {background: #7a5ca6;}
}

@-webkit-keyframes colorchange-train
{
0%   {background:  #7a5ca6;}
15%  {background: #44b363;}
30%  {background: #ff4035;}
45%   {background: #7a5ca6;}
60%  {background: #44b363;}
75% {background: #ff4035;}
100%   {background: #7a5ca6;}
}





@keyframes colorchange-lock
{
0%   {background:  #163d34;}
15%  {background: #bb955a;}
30%  {background: #163d34;}
45%   {background: #bb955a;}
60%  {background: #163d34;}
75% {background: #bb955a;}
100%   {background: #163d34;}
}

@-webkit-keyframes colorchange-lock
{
0%   {background:  #163d34;}
15%  {background: #bb955a;}
30%  {background: #163d34;}
45%   {background: #bb955a;}
60%  {background: #163d34;}
75% {background: #bb955a;}
100%   {background: #163d34;}
}




@keyframes colorchange-portals
{
0%   {background:  #57adac;}
15%  {background: #f4cc21;}
30%  {background: #f59192;}
45%   {background: #57adac;}
60%  {background: #f4cc21;}
75% {background: #f59192;}
100%   {background: #57adac;}
}

@-webkit-keyframes colorchange-portals
{
0%   {background:  #57adac;}
15%  {background: #f4cc21;}
30%  {background: #f59192;}
45%   {background: #57adac;}
60%  {background: #f4cc21;}
75% {background: #f59192;}
100%   {background: #57adac;}
}




@keyframes colorchange-elements
{
0%   {background: #EFDBD2;}
45%   {background: #EFDBD2;}
55%   {background: #736364;}
90%   {background: #736364;}
100%   {background: #EFDBD2;}
}

@-webkit-keyframes colorchange-elements
{
0%   {background: #EFDBD2;}
45%   {background: #EFDBD2;}
55%   {background: #736364;}
90%   {background: #736364;}
100%   {background: #EFDBD2;}
}