body {
}

.center {
    width: 600px;
    height: 100px;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;

    margin: auto;
}

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.colorCycle 
{ 
    background-color: #C30; 
    /*border: medium solid #FF0; 
    padding-top: 5px; padding-right: 7px; padding-bottom: 7px; padding-left: 7px; 
    color: #FFF;
    text-align: center; */
    animation-name: homeCycle; 
    animation-duration:6s; 
    animation-direction:alternate; 
    animation-iteration-count:infinite; 

    -webkit-animation-name: homeCycle; 
    -webkit-animation-duration:6s; 
    -webkit-animation-direction:alternate; 
    -webkit-animation-iteration-count:infinite;
}	

@keyframes homeCycle 
{
0% {background-color:#006;} 
25% {background-color:#060;} 
50% {background-color:#CC3200;} 
75% {background-color:#603;} 
} 

@-webkit-keyframes homeCycle 
{ 
0% {background-color:#006;} 
25% {background-color:#060;} 
50% {background-color:#CC3200;} 
75% {background-color:#603;} 
}

.text1ColorCycle 
{   
    color: #00ff90; 
    /*border: medium solid #FF0; 
    padding-top: 5px; padding-right: 7px; padding-bottom: 7px; padding-left: 7px; 
    color: #FFF; */
    text-align: center;
    animation-name: homeText1Cycle; 
    animation-duration:4s; 
    animation-direction:alternate; 
    animation-iteration-count:infinite; 

    -webkit-animation-name: homeText1Cycle; 
    -webkit-animation-duration:4s; 
    -webkit-animation-direction:alternate; 
    -webkit-animation-iteration-count:infinite; 
}

@keyframes homeText1Cycle 
{
0% {color:#006;} 
25% {color:#060;} 
50% {color:#CC3200;} 
75% {color:#603;} 
} 

@-webkit-keyframes homeText1Cycle 
{ 
0% {color:#006;} 
25% {color:#060;} 
50% {color:#CC3200;} 
75% {color:#603;} 
}

.text2ColorCycle 
{   
    color: #00ff90; 
    /*border: medium solid #FF0; 
    padding-top: 5px; padding-right: 7px; padding-bottom: 7px; padding-left: 7px; 
    color: #FFF; */
    text-align: center;
    animation-name: homeText2Cycle; 
    animation-duration:5s; 
    animation-direction:alternate; 
    animation-iteration-count:infinite; 

    -webkit-animation-name: homeText2Cycle; 
    -webkit-animation-duration:5s; 
    -webkit-animation-direction:alternate; 
    -webkit-animation-iteration-count:infinite; 
}

@keyframes homeText2Cycle 
{
0% {color:#006;} 
25% {color:#060;} 
50% {color:#CC3200;} 
75% {color:#603;} 
} 

@-webkit-keyframes homeText2Cycle 
{ 
0% {color:#006;} 
25% {color:#060;} 
50% {color:#CC3200;} 
75% {color:#603;} 
}