/* Start fadeInFadeOut */

.fadeInFadeOut {
   -webkit-animation: fadeInFadeOut 8s linear forwards;  
   -moz-animation: fadeInFadeOut 8s linear forwards;  
   -o-animation: fadeInFadeOut 8s linear forwards;  
   animation: fadeInFadeOut 8s linear forwards;  
}

@keyframes fadeInFadeOut {
  0%   { opacity: 0; }
  30%  { opacity:1; }
  70%  { opacity:1; }
  100% { opacity: 0; }
}
@-o-keyframes fadeInFadeOut {
  0%   { opacity: 0; }
  30%  { opacity:1; }
  70%  { opacity:1; }
  100% { opacity: 0; }
}
@-moz-keyframes fadeInFadeOut {
  0%   { opacity: 0; }
  30%  { opacity:1; }
  70%  { opacity:1; }
  100% { opacity: 0; }
}
@-webkit-keyframes fadeInFadeOut {
  0%   { opacity: 0; }
  30%  { opacity:1; }
  70%  { opacity:1; }
  100% { opacity: 0; }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  -webkit-animation-duration: 10s;
  
  -moz-animation-name: fadeIn;
  -moz-animation-duration: 10s;
  
  -o-animation-name: fadeIn;
  -o-animation-duration: 10s;

  animation-name: fadeIn;
  animation-duration: 10s; 
}

/* Go from zero to full opacity */
@keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}
@-o-keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}
@-moz-keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}
@-webkit-keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  -webkit-animation-duration: 10s;
  
  -moz-animation-name: fadeOut;
  -moz-animation-duration: 10s;
  
  -o-animation-name: fadeOut;
  -o-animation-duration: 10s;

  animation-name: fadeOut;
  animation-duration: 10s; 
}

/* Go from zero to full opacity */
@keyframes fadeOut {
  from {opacity: 1} 
  to {opacity: 0}
}
@-o-keyframes fadeOut {
  from {opacity: 1} 
  to {opacity: 0}
}
@-moz-keyframes fadeOut {
  from {opacity: 1} 
  to {opacity: 0}
}
@-webkit-keyframes fadeOut {
  from {opacity: 1} 
  to {opacity: 0}
}





/* Start gradientDiv */
.gradientDiv {
  background-color: red;

  /* SVG fallback for IE 9 (could be data URI, or could use filter) */
  /* Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0 */
    -webkit-gradient(linear, left top, right top, from(red), to(#f06d06));
  
  /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
    -webkit-linear-gradient(left, red, #f06d06);

  /* Firefox 3.6 - 15 */
    -moz-linear-gradient(left, red, #f06d06);

  /* Opera 11.1 - 12 */
    -o-linear-gradient(left, red, #f06d06);

  /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
    linear-gradient(to right, red, #f06d06);

}







.elementToFadeInAndOut {

    -webkit-animation: fadeinout 4s linear forwards;
    animation: fadeinout 4s linear forwards;
}

@-webkit-keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}

@keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}