@keyframes section1Removed {
  0%   {background-image: linear-gradient(to right, #e6dbe8 , transparent);}
  25%  {background-color: transparent;}
  50%  {background-color: #bfcbd7;}
  100% {background-color: transparent;}
}

/* The element to apply the animation to */
.section1Removed {
  background-color: transparent;
  animation-name: section1Removed;
  animation-duration: 12s;
  animation-iteration-count: infinite 
}

/* The animation code */
@keyframes subsection1 {
  0%   {left:0px; top:0px;}
  25%  {left:6px; top:0px;}
  50%  {left:6px; top:6px;}
  75%  {left:0px; top:6px;}
  100% {left:0px; top:0px;}
}

/* The element to apply the animation to */
.subsection {
  position: relative;
  animation-name: subsection1;
  animation-duration: 10s;
  animation-iteration-count: infinite 
}

/* The animation code */
@keyframes section2 {
  0%   {border-radius:40px; box-shadow: inset 1px -1px 0px green, inset -1px 1px 0px green; border: dashed white; border-width:2px;}
  25%  {border-radius:80px; box-shadow: inset 1px -1px 0px green, inset -1px 1px 0px green; border: dashed white; border-width:2px;}
  50%  {border-radius:100px; box-shadow: inset 1px -1px 0px green, inset -1px 1px 0px green; border: dashed white; border-width:2px;}
  75%  {border-radius:40px; box-shadow: inset 1px -1px 0px green, inset -1px 1px 0px green; border: dashed white; border-width:2px;}
  100% {border-radius:40px; box-shadow: inset 1px -1px 0px green, inset -1px 1px 0px green; border: dashed white; border-width:2px;}
}

/* The element to apply the animation to */
.section2 {
  animation-name: section2;
  animation-duration: 4s;
  animation-iteration-count: infinite 
}
/* Start of background image manipulation */
.section1 {
  border: 1px solid black;
  background-image: url('../images/safari2.jpg');
  background-position: bottom right;
  animation: mymoveSection1 20s infinite;
  animation-timing-function: ease-in-out;
}

@keyframes mymoveSection1 {
  0% {background-position: bottom right;}
  50% {background-position: center;}
  100% {background-position: top bottom;}
}

.section3 {
  border: 1px solid black;
  background-image: url('../images/img3.png');
  background-position: bottom right;
  animation: mymove 20s infinite;
  animation-timing-function: ease-in-out;
}

@keyframes mymove {
  0% {background-position: bottom right;}
  50% {background-position: center;}
  100% {background-position: top bottom;}
}

.section4 {
  border: 1px solid black;
  background-image: url('../images/img10.png');
  background-position: top left;
  animation: mymove1 15s infinite;
  animation-timing-function: ease-in-out;
}

@keyframes mymove1 {
  0% {background-position: top left;}
  50% {background-position: center;}
  100% {background-position: bottom right;}
}


/* End of image manipulation */


/* The animation code */
@keyframes example1 {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* The element to apply the animation to */
.test1 {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example1;
  animation-duration: 4s;
  animation-iteration-count: infinite 
}


/* The animation code */
@keyframes example2 {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

/* The element to apply the animation to */
.test2 {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example2;
  animation-duration: 4s;
  animation-iteration-count: infinite 
}

/* The animation code */
@keyframes example3 {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

/* The element to apply the animation to */
.test3 {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example3;
  animation-duration: 4s;
  animation-iteration-count: infinite 
}

/* The animation code */
@keyframes example4 {
  0%   {background-image: url('../images/image1.jpeg');}
  25%  {background-image: url('images/image2.jpeg');}
  50%  {background-image: url('images/image3.jpeg');}
  100% {background-image: url('images/image4.jpeg');}
}

/* The element to apply the animation to */
.test4 {
  width: 100px;
  height: 100px;
 background-image: url('../images/image1.jpeg');
  animation-name: example4;
  animation-duration: 4s;
  animation-iteration-count: infinite 
}

.test5 {
	background-image: url('../images/image1.jpeg');
		}