@import url('https://fonts.googleapis.com/css?family=Signika+Negative:300,400&display=swap');

body { 
  font-family: "Signika Negative", sans-serif; 
  font-weight: 300;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

h2 {
  font-size: 2rem;
  background: -webkit-linear-gradient(#035ea8, #00b4dc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

h3 {
  text-align: center;
  font-size: 3rem;
}

h4 {
  text-align: center;
  font-size: 1rem;
}

.box {
  background-color: green;
  width: 100px;
  height: 100px;
}

a.button {
  padding: 10px 20px;
  border: solid 1px #cdcdd2;
  font-weight: 700;
}


.cj {

  /*transform: translateX(-13%) translateY(-43%);*/
  margin-left: 5%;
  width: 50%;
}


/* EINZELNE ELEMENTE */

.cj-sisag {
  position: absolute;
  z-index: 3;
  /*width: 30%;
  left: 31%;
  top: 55%;*/
  width: 80%;
  left: 5%;
  top: 0;
  overflow: hidden;
}

.cj-strassenverkehr {
  position: absolute;
  z-index: 3;
  width: 24%;
  left: 34%;
  top: 24%;
  overflow: hidden;
}

.cj-seilbahnen {
  position: absolute;
  z-index: 2;
  width: 41%;
  left: 1%;
  top: 2%;
  overflow: hidden;
}

.cj-applications {
  position: absolute;
  z-index: 3;
  width: 20%;
  left: 54%;
  top: 6%;
  overflow: hidden;
}

.cj-urban {
  position: absolute;
  z-index: 3;
  width: 29%;
  left: 66%;
  top: 23%;
  overflow: hidden;
}

.cj-cloud {
  position: absolute;
  z-index: 3;
  width: 18%;
  left: 43%;
  top: -11%;
  overflow: hidden;
}

.cj-streets {
  position: absolute;
  z-index: 2;
  width: 76%;
  left: 20%;
  top: 7%;
}

.cj-floor {
  z-index: 1;
}


#cj-core {
  opacity: 0;
  transform: translateY(30);
}

#cj-part-start {
  opacity: 1;
}

#cj-part {
  opacity: 0;
}


/*
.overlay-1 {
  position: absolute;
  left: -25%;
  top: -100%;
  width: 100%;
  height: 200%;
  background: rgb(255,255,255);
  background: linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 20%, rgba(255,255,255,1) 100%);
  transform: rotate( 45deg);
  z-index: 2;
}

.overlay-2 {
  position: absolute;
  right: -25%;
  top: -85%;
  width: 100%;
  height: 200%;
  background: rgb(255,255,255);
  background: linear-gradient(360deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 20%, rgba(255,255,255,1) 100%);
  transform: rotate( 45deg);
  z-index: 2;
}
*/

.scrollsection {
  position: relative;
}

.intro {
  position: relative;
  padding: 10% 20%;
  z-index: 2;
}

.thema {
  position: relative;
  width: 30%;
  margin-left: 60%;
  margin-bottom: 20%;
  margin-top: 5%;
  z-index: 2;
}

#step-1 {
  position: absolute;
  margin-left: 60%;
  z-index: 2;
  top: 0;
}

#move-1 {
  position: relative;
  height: 400vh;
}

#move-2, #move-3, #move-4, #move-5, #move-6, #move-7, #move-8, #move-9, #move-10 {
  height: 200vh;
}