/* Experimentelle Gestaltung JuerX Web Design */
/* Base on Bootstrap */
/* ___________________________________________ */
/* Cards by JuerX */
.cardX {
	opacity: 0.8;
	margin-left: 50px;
	margin-bottom: 50px;
}
.cardX_shadow {
	box-shadow: 1px 2px 1px rgba(0,0,0, .3);
	-webkit-box-shadow: 1px 2px 1px grey;
	-moz-box-shadow: 1px 2px 1px grey;
}
/* Cards Shadow */
.card_XII {
	box-shadow: 1px 2px 1px rgba(0,0,0, .3);
	-webkit-box-shadow: 1px 2px 1px grey;
	-moz-box-shadow: 1px 2px 1px grey;
}
/*~~~~~ Cards Fade */
@keyframes fadeInUp {
	0% {
	  transform: translateX(0px);
	  opacity: 0.8;
	}
	100% {
		transform: translateX(-50px);
    /* transform: scale(1.1); */
		opacity: .8;
	  }
  }
.fade-in-up {
	animation: 1.0s both fadeInUp;
  }
  /*~~~~~ Cards Fade */
@keyframes fadeInRight {
	0% {
	  transform: translateX(-50px);
	  opacity: 0.8;
	}
	100% {
		transform: translateX(0px);
		opacity: .8;
	  }
  }
.fade-in-right {
	animation: 2.0s both fadeInRight;
  }
/* ___________________________________________ */
/* Orbitmodell */
#orbit .analyse {
	top: -10px;
	left: 0;
	background: #00ffe5;
	transform-origin: 80px 80px;
	animation: orbit 20s linear infinite;
}
@keyframes orbit {
          100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
section1 {
	display: inline-block;
	margin-right: .5em;
	padding: .5em;
	position: relative;
}
section2 {
    display: inline-block;
	position: relative;
}
/* Grundeinstellungen der Elemente   */
section1:after,
.analyse,
.zentrum,
.zentrum:before {
	border-radius: 100%;
	content: " ";
	position: absolute;
}
/* Zentrum (Drehpunkt)   */
.zentrum:before {
	background: black;
	height: 6px;
	left: -5px;
	top: -5px;
	width: 6px;
}
.analyse {
	height:1px;
	width: 1px;
	opacity: 0.8;
}
.sectionOrbit {
	margin-bottom: 100px;
}
#orbit p {
	top: 50px;
	left: 50px;
}
/* ---------- Container for the orbiting circles animation ---------- */
#circle-orbit-container {
  position: relative;
  top: 25px;
  left: 25px;
  height: 300px;
  width: 300px;
}
/* ---------- Inner orbit - This is the circles closest to the central point ---------- */
#inner-orbit-analyse {
  position: absolute;
  top: 75px;
  left: 75px;
  width: 150px;
  height: 150px;
  border: 2px #4A437F dashed;
  border-radius: 100%;
  -webkit-animation: spin-right 12s linear infinite;
  animation: spin-right 12s linear  infinite;
}
/* ---------- Inner orbit - This is the circles closest to the central point ---------- */
#inner-orbit-beratung {
  position: absolute;
  top: 75px;
  left: 75px;
  width: 150px;
  height: 150px;
  border: 0px #4A437F dashed;
  border-radius: 100%;
  -webkit-animation: spin-right 9s linear infinite;
  animation: spin-right 9s linear infinite;
}
/* ---------- Inner orbit - This is the circles closest to the central point ---------- */
#inner-orbit {
  position: absolute;
  top: 75px;
  left: 75px;
  width: 150px;
  height: 150px;
  border: 0px #4A437F dashed;
  border-radius: 100%;
  -webkit-animation: spin-right 15s linear infinite;
  animation: spin-right 15s linear infinite;
}
/* ---------- Repeating styles for the inner orbiting circles ---------- */
.inner-orbit-analyse-cirlces {
  position: absolute;
  top: 62px;
  left: -6px;
  height: 30px;
  width: 30px;
  border-radius: 100%;
  background-color: blue;
}
/* ---------- Repeating styles for the inner orbiting circles ---------- */
.inner-orbit-beratung-cirlces {
  position: absolute;
  top: 62px;
  left: -6px;
  height: 30px;
  width: 30px;
  border-radius: 100%;
  background-color: red;
}
/* ---------- Repeating styles for the inner orbiting circles ---------- */
.inner-orbit-cirlces {
  position: absolute;
  top: 62px;
  left: -6px;
  height: 30px;
  width: 30px;
  border-radius: 100%;
  background-color: blue;
}
/* ---------- Middle orbit - This is the circles second closest to the central point ---------- */
#middle-orbit-planung {
  position: absolute;
  top: 35px;
  left: 35px;
  width: 225px;
  height: 225px;
  border: 2px #4A437F dashed;
  border-radius: 100%;
  -webkit-animation: spin-right 14s ease-in-out infinite;
  animation: spin-right 14s ease-in-out infinite;
}
/* ---------- Middle orbit - This is the circles second closest to the central point ---------- */
#middle-orbit {
  position: absolute;
  top: 35px;
  left: 35px;
  width: 225px;
  height: 225px;
  border: 2px #4A437F dashed;
  border-radius: 100%;
  -webkit-animation: spin-right 10s linear infinite;
  animation: spin-right 10s linear infinite;
}
/* ---------- Repeating styles for the inner orbiting circles ---------- */
.middle-orbit-planung-cirlces {
  position: absolute;
  top: 25px;
  left: 17px;
  height: 35px;
  width: 35px;
  border-radius: 100%;
  background-color: #00ff05;
}
/* ---------- Repeating styles for the inner orbiting circles ---------- */
.middle-orbit-cirlces {
  position: absolute;
  top: 25px;
  left: 17px;
  height: 30px;
  width: 30px;
  border-radius: 100%;
  background-color: red;
}
/* ---------- Outer orbit - This is the circles furthest away from the central point ---------- */
#outer-orbit-entwurf{
  position: absolute;
  top: 0;
  left: 0;
  width: 294px;
  height: 294px;
  border: 2px #4A437F dashed;
  border-radius: 100%;
  -webkit-animation: spin-right 20s ease-in-out infinite;
  animation: spin-right 20s ease-in-out infinite;
}
/* ---------- Outer orbit - This is the circles furthest away from the central point ---------- */
#outer-orbit-design{
  position: absolute;
  top: 0;
  left: 0;
  width: 294px;
  height: 294px;
  border: 0px #4A437F dashed;
  border-radius: 100%;
  -webkit-animation: spin-right 25s linear infinite;
  animation: spin-right 25s linear infinite;
}
/* ---------- Outer orbit - This is the circles furthest away from the central point ---------- */
#outer-orbit {
  position: absolute;
  top: 0;
  left: 0;
  width: 294px;
  height: 294px;
  border: 2px #4A437F dashed;
  border-radius: 100%;
  -webkit-animation: spin-right 20s linear infinite;
  animation: spin-right 20s linear infinite;
}
/* ---------- Repeating styles for the outer orbiting circles ---------- */
.outer-orbit-entwurf-cirlces {
  position: absolute;
  top: -10px;
  left: 120px;
  height: 20px;
  width: 20px;
  border-radius: 100%;
  background-color: #fcff00;
}
/* ---------- Repeating styles for the outer orbiting circles ---------- */
.outer-orbit-design-cirlces {
  position: absolute;
  top: -10px;
  left: 120px;
  height: 35px;
  width: 35px;
  border-radius: 100%;
  background-color: magenta;
}
/* ---------- Repeating styles for the outer orbiting circles ---------- */
.outer-orbit-cirlces {
  position: absolute;
  top: -17px;
  left: 125px;
  height: 30px;
  width: 30px;
  border-radius: 100%;
  background-color: green;
}
/* ---------- Animation ---------- */
@-webkit-keyframes spin-right {
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
/* ---------- Animation ---------- */
@keyframes spin-right {
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}