/* jost-regular - latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/jost-v14-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
    url('../fonts/jost-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/jost-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/jost-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('../fonts/jost-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/jost-v14-latin-regular.svg#Jost') format('svg'); /* Legacy iOS */
}
/* jost-500 - latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/jost-v14-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
    url('../fonts/jost-v14-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/jost-v14-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/jost-v14-latin-500.woff') format('woff'), /* Modern Browsers */
    url('../fonts/jost-v14-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/jost-v14-latin-500.svg#Jost') format('svg'); /* Legacy iOS */
}
/* jost-500 - latin */
@font-face {
  font-family: 'Jost';
  font-style: bold;
  font-weight: 600;
  src: url('../fonts/jost-v14-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
    url('../fonts/jost-v14-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/jost-v14-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/jost-v14-latin-600.woff') format('woff'), /* Modern Browsers */
    url('../fonts/jost-v14-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/jost-v14-latin-600.svg#Jost') format('svg'); /* Legacy iOS */
}
/* jost-700 - latin */
@font-face {
  font-family: 'Jost';
  font-style: bold;
  font-weight: 700;
  src: url('../fonts/jost-v14-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
    url('../fonts/jost-v14-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/jost-v14-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
    url('../fonts/jost-v14-latin-700.woff') format('woff'), /* Modern Browsers */
    url('../fonts/jost-v14-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
    url('../fonts/jost-v14-latin-700.svg#Jost') format('svg'); /* Legacy iOS */
}

/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css ---- DM: Modified*/
html { -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ }
body { margin: 0; padding: 0; font-family: 'Jost', sans-serif; }
article, aside, footer, header, nav, section { display: block; }
h1, h2 { line-height: 1.25}
hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ }
a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ }
b, strong { font-weight: inherit; }
b, strong { font-weight: bolder; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
audio, video { display: inline-block; }
audio:not([controls]) { display: none; height: 0; }
img { border-style: none; }
svg:not(:root) { overflow: hidden; }
button {-webkit-appearance: none; -moz-appearance: none;border: 0px; font-weight: 500;}
button, input, optgroup, select, textarea { font-family: 'Jost', sans-serif; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ }
button, input { /* 1 */ overflow: visible; }
button, select { /* 1 */ text-transform: none; }
button, html [type="button"], /* 1 */ [type="reset"], [type="submit"] { -webkit-appearance: button; /* 2 */ }
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }
progress { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ }
textarea { overflow: auto; }
[type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ }
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }
[type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ }
[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ }
[hidden] { display: none; }

* { box-sizing: border-box; }
body { background-color: #001826; font-size: 18px; color: #fff; }
h1 {font-size: 100px; font-weight: 500; padding: 0; margin-bottom: 20px; line-height: 105px;}
h2 {font-size: 50px; font-weight: 600; margin-bottom: 20px}
p {line-height: 26px}
a, a:link, a:visited {color: #3795CB; text-decoration: none}
a:hover {}
.btn, a.btn {line-height: 40px; height: 40px; border-radius: 20px; font-weight: 500; opacity: 0.9; color: #fff; background-color: #3795CB; padding: 0 20px; display: inline-block; transition-duration: 200ms; cursor: pointer}
.btn:hover, a.btn:hover {opacity: 1 }

.page-wrapper {}
.section {width: 100%; position: relative; z-index: 1; text-align: center}
.section-inner {width: 100%; max-width: 980px; margin: auto; text-align: left; padding: 0 40px}

.section-header {position: fixed; z-index: 99; top: 0; width: 100%; background: url(../images/bg-gradient-top.png) repeat-x center top; height: 200px; pointer-events: none}
.section-header .logo {position: absolute; left: 20px; top: 20px; height: 70px; width: 70px; display: inline-block; opacity: 0.4; pointer-events: auto }
.section-header .logo img { position: absolute; left: 0; top: 0; height: 70px;}
.section-header .rotate { animation: rotation 60s infinite linear;}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-359deg);
  }
}
.section-header .btn {position: absolute; right: 20px; top: 35px; pointer-events: auto}

.section-intro {height: calc(100vh + 50px);  overflow: hidden; max-height: 1000px}
.section-intro .section-bg { position: absolute; top: 0; bottom: 0; background: url(../images/bg-intro.jpg) no-repeat center top;  margin: auto; min-width: 100vw; padding-top: 65vw; background-size: cover;}
.section-intro .section-bg-gradient {position: absolute; bottom: 0; width: 100%; height: 150px; background: url(../images/bg-intro-gradient.png) repeat-x center bottom; z-index: 2; background-size: 1px 150px;}
.section-intro .section-inner {height: 100vh; max-width: 100%; position: absolute; top: 0; z-index: 3}
.section-intro .section-content {position: absolute; left: 50%; top: 50%; margin: -250px 0 0 -220px; width: 665px}
.section-intro h1 span {font-size: 18px; letter-spacing: 6px; display: block; line-height: 50px}
.section-intro .wrapper-button {position: relative}
.section-intro button {background: rgba(0,0,0,0.3); width: 80px; height: 80px; border-radius: 40px; color: #fff; cursor: pointer; transition-duration: 200ms; position: relative; z-index: 1; border: 1px solid #3795CB}
.section-intro button:hover {border-color: #fff}
.section-intro .circle {left: -10px; top: -10px; width: 100px; height: 100px; -webkit-border-radius: 50%; border-radius: 50%; position: absolute; animation: circle 1.5s 0s infinite ease-out; background: rgba(55,149,203,0.8); box-shadow: inset 0 0 200px 0 #3795CB; }

.section-profil .profil {position: absolute; top: 100px}
.section-profil .section-bg {overflow-x: hidden}
.section-profil video {width: 100%; position: relative; z-index: 1; min-width: 1024px}
.section-profil .section-bg-gradient {position: absolute; width: 100%; height: 120px; z-index: 2; }
.section-profil .section-bg-gradient-top {background: url(../images/bg-gradient-top.png) repeat-x center top; top: 0}
.section-profil .section-bg-gradient-bottom {background: url(../images/bg-gradient-bottom.png) repeat-x center bottom; bottom: 0}
.section-profil .section-content {position: absolute; width: 50%; top: calc(14vw); z-index: 3; max-width: 440px }
.section-profil .wrapper-slider {width: 100%; overflow: hidden; position: relative; height: 380px;}
.section-profil .slide {position: absolute; top: 0; width: 100%; }
.section-profil .slide-1 {left: 0}
.section-profil .slide-2 {left: 120%; padding-top: 25px}
.section-profil .slide-2 h2 {font-size: 30px; padding-bottom: 0; margin-bottom: 0}
.section-profil .slide-2 p {padding-top: 0; margin-top: 5px;}
.section-profil .btn {background: rgba(0,0,0,0.2); position: relative; opacity: 0.8; height: 60px; width: 60px; border-radius: 30px; border: 1px solid #3795CB }
.section-profil .btn:hover {opacity: 1; border-color: #fff}
.section-profil .btn:after {content:""; position: absolute; width: 16px; height: 16px; border-top: 2px solid; border-right: 2px solid; border-color: #fff; transform: rotate(45deg); top: 19px; left: 16px; }
.section-profil .btn.btn-back:after {transform: rotate(225deg); left: 22px}

.section-projekte .section-inner {text-align: center; padding: 80px 40px 160px 40px}
.section-projekte h2 {margin-bottom: 60px}
.section-projekte img {max-width: 100%}
.section-projekte .projekte-left {margin-right: 39px}
.section-projekte .btn {margin-top: 50px}
.section-projekte .btn, .section-leistungen .btn {background: rgba(0,0,0,0.2); border: 1px solid #3795CB; color: #fff; opacity: 0.8; height: 42px}
.section-projekte .btn:hover, .section-leistungen .btn:hover {opacity: 1; border-color: #fff}

.section-leistungen {overflow: hidden}
.section-leistungen .section-bg { position: relative; background: url(../images/bg-leistungen.jpg) no-repeat center top;  background-size: cover; margin: auto; width: 100%; padding-top: 56.5vw; z-index: 1}
.section-leistungen .section-bg-gradient {position: absolute; width: 100%; height: 120px; z-index: 2; }
.section-leistungen .section-bg-gradient-top {background: url(../images/bg-gradient-top.png) repeat-x center top; top: 0; z-index: 2}
.section-leistungen .section-inner {position: absolute; top: 0; left: 50%; margin-left: -490px; z-index: 3}
.section-leistungen .section-content {width: 50%; margin-top: calc(15vw); z-index: 3; max-width: 440px; text-align: right; float: right; }
.section-leistungen .sphere-main-wrapper { overflow: hidden; perspective: 200px;  left: calc(-40vw); top: -10%; bottom: 0; right: 0; z-index: 1}  

.section-tidal {position: absolute; bottom: -30px; width: 100%;text-align: center;}

.arrows {display: none; width: 60px; height: 72px; position: fixed; left: 50%; margin-left: -30px; z-index: 10;bottom: 0px; transform: scale(0.3);}
.arrows path { stroke: #fff; fill: transparent; stroke-width: 1px;   animation: arrow 2s infinite; -webkit-animation: arrow 2s infinite; }
@keyframes arrow {
0% {opacity:0}
40% {opacity:0.6}
80% {opacity:0}
100% {opacity:0}
}
@-webkit-keyframes arrow /*Safari and Chrome*/
{
0% {opacity:0}
40% {opacity:0.6}
80% {opacity:0}
100% {opacity:0}
}
.arrows path.a1 { animation-delay:-1s; -webkit-animation-delay:-1s; /* Safari 和 Chrome */}
.arrows path.a2 { animation-delay:-0.5s; -webkit-animation-delay:-0.5s; /* Safari 和 Chrome */}
.arrows path.a3 { animation-delay:0s; -webkit-animation-delay:0s; /* Safari 和 Chrome */}

.section-footer {background: #00060A; margin-top: -5px; color: #3C667E; font-size: 14px}
.section-footer .section-inner {padding: 20px 20px 0 20px; max-width: 100%;}
.section-footer .section-inner:after {content: ''; display: table; width: 100%}
.section-footer .section-footer-left, .section-footer .section-footer-right {float: left; display: inline-block; padding-bottom: 20px}
.section-footer .section-footer-left {width: 140px}
.section-footer .section-footer-right {text-align: right; width: calc(100% - 140px)}
.section-footer .footer-logo {font-weight: 500; color: #3795CB; width: 20px; margin-bottom: 20px}



.address-decode span:before { content: attr(data-right2) attr(data-right1) "\0040" attr(data-left); unicode-bidi: bidi-override; direction: rtl;}


@media only screen and (min-width :1366px) {
  .section-header .logo, .section-header .logo img { width: 120px; height: 120px} 
  .section-header .btn { top: 40px; padding: 0 50px; height: 50px; line-height: 50px; border-radius: 25px; }
  .section-footer {font-size: 16px}
}

@media only screen and (max-width :1366px) {
  .section-profil .profil {top: 50px}
  .section-profil .section-content {top: calc(12vw);}
  .section-leistungen .sphere-main-wrapper { perspective: 400px;}  
}
@media only screen and (max-width :1200px) {
  .section-leistungen .section-content {margin-top: calc(10vw);}
}
@media only screen and (max-width : 1024px) {
  h1 {font-size: 80px; line-height: 90px}
  .section-intro .section-content {width: 531px; margin-top: -210px}
  .section-profil .profil {top: 0px}
  .section-profil .section-content {width: calc(100% - 80px); max-width: 580px; top: calc(8vw);}
}
@media only screen and (max-width : 1024px) and (orientation: portrait) {
  .section-intro .section-bg {background-size: unset; background-position: top left -420px}
  .section-intro .section-content {left: 50%; top: 100px; margin: 0 0 0 -220px;}
}
@media only screen and (max-width : 980px) {
  .section-profil .profil {top: -50px}
  .section-profil video {left: 50%; margin-left: -980px;}  
  .section-projekte img, .section-projekte .projekte-left {margin: 0 20px 40px 20px; }
  .section-leistungen .section-bg { padding-top: 550px; min-width: 980px; left: 50%; margin-left: -490px;}
  .section-leistungen .section-inner {left: 0; margin-left: 0}
  .sphere-main-wrapper {transform: scale(0.9)}
}
@media only screen and (max-width : 780px) {
  h1 {font-size: 60px; line-height: 75px} 
  .section-intro h1 span {font-size: 14px; letter-spacing: 4px; line-height: 40px}
  .section-intro .section-content {width: 399px; margin: -180px 0 0 -80px;}
  .section-leistungen .section-bg {margin-left: -550px}
  .section-leistungen .section-content br {display: none} 
  .section-profil video {margin-left: -550px;}  
}
@media only screen and (max-width : 780px) and (orientation: portrait) {
  .section-intro .section-content {margin: 0px 0 0 -215px; top: 175px}
}

@media only screen and (max-width : 650px) {
  .section-leistungen .section-bg {padding-top: 680px; margin-left: -450px}
  .section-leistungen .section-content {width: 100%; margin-top: calc(8vw)}
  .section-leistungen .sphere-main-wrapper {left: 50%; top: 10%; margin-left: -850px;}
}
@media only screen and (max-width : 580px)  {
  h1 { font-size: 40px; line-height: 50px;}
  h2 {font-size: 30px; line-height: 40px;}
  .section-inner, .section-projekte .section-inner {padding: 0 20px}
  .section-intro h1 span {font-size: 14px; letter-spacing: 4px; line-height: 30px}
  .section-intro .section-content {width: 266px; margin-left: -60px;}
  .section-intro button {width: 60px; height: 60px; border-radius: 30px}
  .section-intro .circle {margin: -10px}
  .section-profil video {margin-left: -400px;} 
  .section-profil .section-content {width: calc(100% - 40px);}
  .section-profil .slide-2 {padding-top: 0px}
  .section-projekte .section-inner {padding-bottom: 80px}
  .section-projekte img, .section-projekte .projekte-left {margin: 0 0 20px 0; }
}
@media only screen and (max-width : 580px) and (orientation: portrait) {
  .section-intro .section-bg {background-size: 150vh; background-position: top left -200px;}  
  .section-intro .section-content {margin: 0px 0 0 -85px; top: 100px} 
}
@media only screen and (max-width : 580px) and (min-height: 600px) {
  .section-intro .section-bg {background-position: top left -200px;}
}
@media only screen and (max-width : 580px) and (min-height: 650px) {
  .section-intro .section-bg {background-position: top left -250px;}  
  .section-intro .section-content {top: 75px}
}
@media only screen and (max-width : 580px) and (min-height: 700px) {
  .section-intro .section-bg {background-position: top left -370px;}  
  .section-intro .section-content {top: 200px}
}

@media only screen and (max-width : 480px)  {
  h1 { font-size: 35px; line-height: 40px;}
  .section-footer .section-footer-left, .section-footer .section-footer-right {width: 100%; text-align: left}
}

/* Animations */

/* Rheinturm */

@keyframes circle {
  from {
    transform: scale(0);
    opacity: 0.3;
  }
  to {
    transform: scale(60);
    opacity: 0;
  }
}

@media only screen and (max-height :2000px) {
  @keyframes circle {
    from {
      transform: scale(0.01);
      opacity: 0.3;
    }
    to {
      transform: scale(5);
      opacity: 0;
    }
  }
}
@media only screen and (max-width :480px) {
  @keyframes circle {
    from {
      transform: scale(0.01);
      opacity: 0.3;
    }
    to {
      transform: scale(4);
      opacity: 0;
    }
  }
}
@media only screen and (max-height :480px) {
  @keyframes circle {
    from {
      transform: scale(0.01);
      opacity: 0.3;
    }
    to {
      transform: scale(3);
      opacity: 0;
    }
  }
}


/* Sphere animation */

.sphere-main-wrapper {
  display: flex;
  position: absolute;
  transform-style: preserve-3d;
  align-items: center;
  justify-content: center;
}
.sphere-wrapper {
transform-style: preserve-3d;
    width: 500px;
    height: 500px;
    position: relative;
    -webkit-animation: rotate3d 60s linear infinite;
    animation: rotate3d 60s linear infinite;
    top: 0;
    left: 0;
}
.plane {
  position: absolute;
  transform-style: preserve-3d;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.spoke {
  transform-origin: 0 0;
  transform-style: preserve-3d;
  position: absolute;
  left: 50%;
  top: 50%;
  height: 150px;
  width: 0px;
}
.dot {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #71CBFF;
  left: -1.5px;
  top: 100%;
  transform: rotateX(90deg);
}
.spoke.spoke-1 {
  transform: rotateZ(10deg);
}
.spoke.spoke-2 {
  transform: rotateZ(20deg);
}
.spoke.spoke-3 {
  transform: rotateZ(30deg);
}
.spoke.spoke-4 {
  transform: rotateZ(40deg);
}
.spoke.spoke-5 {
  transform: rotateZ(50deg);
}
.spoke.spoke-6 {
  transform: rotateZ(60deg);
}
.spoke.spoke-7 {
  transform: rotateZ(70deg);
}
.spoke.spoke-8 {
  transform: rotateZ(80deg);
}
.spoke.spoke-9 {
  transform: rotateZ(90deg);
}
.spoke.spoke-10 {
  transform: rotateZ(100deg);
}
.spoke.spoke-11 {
  transform: rotateZ(110deg);
}
.spoke.spoke-12 {
  transform: rotateZ(120deg);
}
.spoke.spoke-13 {
  transform: rotateZ(130deg);
}
.spoke.spoke-14 {
  transform: rotateZ(140deg);
}
.spoke.spoke-15 {
  transform: rotateZ(150deg);
}
.spoke.spoke-16 {
  transform: rotateZ(160deg);
}
.spoke.spoke-17 {
  transform: rotateZ(170deg);
}
.spoke.spoke-18 {
  transform: rotateZ(180deg);
}
.spoke.spoke-19 {
  transform: rotateZ(190deg);
}
.spoke.spoke-20 {
  transform: rotateZ(200deg);
}
.spoke.spoke-21 {
  transform: rotateZ(210deg);
}
.spoke.spoke-22 {
  transform: rotateZ(220deg);
}
.spoke.spoke-23 {
  transform: rotateZ(230deg);
}
.spoke.spoke-24 {
  transform: rotateZ(240deg);
}
.spoke.spoke-25 {
  transform: rotateZ(250deg);
}
.spoke.spoke-26 {
  transform: rotateZ(260deg);
}
.spoke.spoke-27 {
  transform: rotateZ(270deg);
}
.spoke.spoke-28 {
  transform: rotateZ(280deg);
}
.spoke.spoke-29 {
  transform: rotateZ(290deg);
}
.spoke.spoke-30 {
  transform: rotateZ(300deg);
}
.spoke.spoke-31 {
  transform: rotateZ(310deg);
}
.spoke.spoke-32 {
  transform: rotateZ(320deg);
}
.spoke.spoke-33 {
  transform: rotateZ(330deg);
}
.spoke.spoke-34 {
  transform: rotateZ(340deg);
}
.spoke.spoke-35 {
  transform: rotateZ(350deg);
}
.plane.plane-1 {
  transform: rotateY(15deg);
}
.plane.plane-2 {
  transform: rotateY(30deg);
}
.plane.plane-3 {
  transform: rotateY(45deg);
}
.plane.plane-4 {
  transform: rotateY(60deg);
}
.plane.plane-5 {
  transform: rotateY(75deg);
}
.plane.plane-6 {
  transform: rotateY(90deg);
}
.plane.plane-7 {
  transform: rotateY(105deg);
}
.plane.plane-8 {
  transform: rotateY(120deg);
}
.plane.plane-9 {
  transform: rotateY(135deg);
}
.plane.plane-10 {
  transform: rotateY(150deg);
}
.plane.plane-11 {
  transform: rotateY(165deg);
}
.spoke-0 .dot,
.spoke-36 .dot {
  -webkit-animation: pulsate 2s infinite 0s alternate both;
          animation: pulsate 2s infinite 0s alternate both;
  background-color: #71CBFF;
}
.spoke-1 .dot,
.spoke-35 .dot {
  -webkit-animation: pulsate 2s infinite 0.05555556s alternate both;
          animation: pulsate 2s infinite 0.05555556s alternate both;
  background-color: #71CBFF;
}
.spoke-2 .dot,
.spoke-34 .dot {
  -webkit-animation: pulsate 2s infinite 0.11111111s alternate both;
          animation: pulsate 2s infinite 0.11111111s alternate both;
  background-color: #71CBFF;
}
.spoke-3 .dot,
.spoke-33 .dot {
  -webkit-animation: pulsate 2s infinite 0.16666667s alternate both;
          animation: pulsate 2s infinite 0.16666667s alternate both;
  background-color: #71CBFF;
}
.spoke-4 .dot,
.spoke-32 .dot {
  -webkit-animation: pulsate 2s infinite 0.22222222s alternate both;
          animation: pulsate 2s infinite 0.22222222s alternate both;
  background-color: #71CBFF;
}
.spoke-5 .dot,
.spoke-31 .dot {
  -webkit-animation: pulsate 2s infinite 0.27777778s alternate both;
          animation: pulsate 2s infinite 0.27777778s alternate both;
  background-color: #71CBFF;
}
.spoke-6 .dot,
.spoke-30 .dot {
  -webkit-animation: pulsate 2s infinite 0.33333333s alternate both;
          animation: pulsate 2s infinite 0.33333333s alternate both;
  background-color: #71CBFF;
}
.spoke-7 .dot,
.spoke-29 .dot {
  -webkit-animation: pulsate 2s infinite 0.38888889s alternate both;
          animation: pulsate 2s infinite 0.38888889s alternate both;
  background-color: #71CBFF;
}
.spoke-8 .dot,
.spoke-28 .dot {
  -webkit-animation: pulsate 2s infinite 0.44444444s alternate both;
          animation: pulsate 2s infinite 0.44444444s alternate both;
  background-color: #71CBFF;
}
.spoke-9 .dot,
.spoke-27 .dot {
  -webkit-animation: pulsate 2s infinite 0.5s alternate both;
          animation: pulsate 2s infinite 0.5s alternate both;
  background-color: #71CBFF;
}
.spoke-10 .dot,
.spoke-26 .dot {
  -webkit-animation: pulsate 2s infinite 0.55555556s alternate both;
          animation: pulsate 2s infinite 0.55555556s alternate both;
  background-color: #71CBFF;
}
.spoke-11 .dot,
.spoke-25 .dot {
  -webkit-animation: pulsate 2s infinite 0.61111111s alternate both;
          animation: pulsate 2s infinite 0.61111111s alternate both;
  background-color: #71CBFF;
}
.spoke-12 .dot,
.spoke-24 .dot {
  -webkit-animation: pulsate 2s infinite 0.66666667s alternate both;
          animation: pulsate 2s infinite 0.66666667s alternate both;
  background-color: #71CBFF;
}
.spoke-13 .dot,
.spoke-23 .dot {
  -webkit-animation: pulsate 2s infinite 0.72222222s alternate both;
          animation: pulsate 2s infinite 0.72222222s alternate both;
  background-color: #71CBFF;
}
.spoke-14 .dot,
.spoke-22 .dot {
  -webkit-animation: pulsate 2s infinite 0.77777778s alternate both;
          animation: pulsate 2s infinite 0.77777778s alternate both;
  background-color: #71CBFF;
}
.spoke-15 .dot,
.spoke-21 .dot {
  -webkit-animation: pulsate 2s infinite 0.83333333s alternate both;
          animation: pulsate 2s infinite 0.83333333s alternate both;
  background-color: #71CBFF;
}
.spoke-16 .dot,
.spoke-20 .dot {
  -webkit-animation: pulsate 2s infinite 0.88888889s alternate both;
          animation: pulsate 2s infinite 0.88888889s alternate both;
  background-color: #71CBFF;
}
.spoke-17 .dot,
.spoke-19 .dot {
  -webkit-animation: pulsate 2s infinite 0.94444444s alternate both;
          animation: pulsate 2s infinite 0.94444444s alternate both;
  background-color: #71CBFF;
}
.spoke-18 .dot,
.spoke-18 .dot {
  -webkit-animation: pulsate 2s infinite 1s alternate both;
          animation: pulsate 2s infinite 1s alternate both;
  background-color: #71CBFF;
}
@-webkit-keyframes rotate3d {
  0% {
    transform: rotate3d(1, 1, 1, 0deg);
  }
  25% {
    transform: rotate3d(1, 1, 1, 90deg);
  }
  50% {
    transform: rotate3d(1, 1, 1, 180deg);
  }
  75% {
    transform: rotate3d(1, 1, 1, 270deg);
  }
  100% {
    transform: rotate3d(1, 1, 1, 360deg);
  }
}
@keyframes rotate3d {
  0% {
    transform: rotate3d(1, 1, 1, 0deg);
  }
  25% {
    transform: rotate3d(1, 1, 1, 90deg);
  }
  50% {
    transform: rotate3d(1, 1, 1, 180deg);
  }
  75% {
    transform: rotate3d(1, 1, 1, 270deg);
  }
  100% {
    transform: rotate3d(1, 1, 1, 360deg);
  }
}
@-webkit-keyframes pulsate {
  0% {
    transform: rotateX(90deg) scale(0.3) translateZ(20px);
  }
  100% {
    transform: rotateX(90deg) scale(1) translateZ(0px);
  }
}
@keyframes pulsate {
  0% {
    transform: rotateX(90deg) scale(0.3) translateZ(20px);
  }
  100% {
    transform: rotateX(90deg) scale(1) translateZ(0px);
  }
}