/* normalize css x1 */
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}


html, body, #container {
	height: 100%;
	font-family: din-2014, sans-serif; 
	font-size: 16px;
	font-weight: 300;
}

body {
	background: #FE347E url('../img/background-stuttgart-muenchen-2021.png') no-repeat bottom center;
	background-size: 100% auto;
	overflow: hidden;
}



#wrapper {
	height: 100%;
	max-height: 100%;
	overflow: hidden;
	position: relative;
	-webkit-transition: all 0.3s ease-in-out;
}

	
@media only screen and (orientation: portrait) {
body {
	background-size: 200% auto;
}
}
	
@media only screen and (orientation: landscape) {
body.webApp:not(.webApp-Chrome) {
	background-image: url('../img/please-rotate-portrait-mode.png');
	background-size: 50vh auto;
	background-position: center center;
}
body.webApp:not(.webApp-Chrome) #wrapper {
display: none;
}
}



.magaziniker-wrapper svg path,
.magaziniker-wrapper svg polygon,
.magaziniker-wrapper svg circle {
	fill: none;
}

.magaziniker-wrapper {
	position: absolute;
	top: 2vh;
	bottom: 2vh;
	left: 0;
	right: 0;
}	

.device-ios .magaziniker-wrapper {
	bottom: -2vh;
	top: 2vh;
}	


#more-snow {
	position: absolute;
	pointer-events: none;
	top: calc(100vh - 194px);
	height: 200px;
	width: 100%;
	z-index: 100;
	background: transparent url('../img/foreground-snow.png') repeat-x bottom center;
	background-size: contain;
	overflow: hidden;
}


.device-ipad .magaziniker-wrapper {
	bottom: -1vh;
}	

.device-ipad #more-snow {
	bottom: -1vh;
	background-position-y: 150px;
}	


/* Robot ------------------------------------------------- */


		

.robot-all {
	width: 100%;
	height: 90vh;
	top: 5.2vh;
	position: absolute;
	left: 50%;
	margin-left: -50%;
	z-index: 10;
}

		
.step-3 .robot-all,
.step-4 .robot-all, 
.step-5 .robot-all,
.step-6 .robot-all {
	top: 65vh;
}
				
.robot-all > div {
	position: absolute;
}


.robot-all .robot-head-top {
	width: 100%;
	background: transparent;
	left: 0;
	margin-left:0;
	height: 17.2vh;
	z-index: ;
	bottom: 69.9vh;
	top: auto;
}

.step-5 .robot-all .robot-head-top > div {
	cursor: pointer;
	background-image: url('../img/robot-head-upper-glowing.gif');
}

.robot-all .robot-head-top > div {
	background: url('../img/robot-head-upper-static.gif') no-repeat top center;
	width: 21.4vh;
	background-size: auto 100%;
	height: inherit;
	margin: 0 auto;
}

.step-5 .robot-all .robot-head-top > div > div {
	opacity: 1;
}

.robot-all .robot-head-top > div > div {
    opacity: 0;
    margin-left: 65%;
    padding-top: 5vh;
    width: 17vh;
    transition: opacity 1.25s linear;
    -webkit-transition: opacity 0.25s linear;
    text-align: right;
}


.robot-all .robot-head-top > div > div p {	
	font-size: 1.1em;
	margin: 0;
	color: #222;
	line-height: 1.2em;
}

.robot-all .robot-head-top > div > div p svg {	
	margin-left: 9px;
	float: left;
	margin-top: -6px;
	width: 40px;
}

.robot-all .robot-head-main {
	background: url('../img/robot-head-lower-static.png') no-repeat bottom center;
	width: 100%;
	background-size: auto 100%;
	left: 0;
	margin-left:0;
	background-color: transparent;
	height: 13vh;
	top: auto;
	bottom: 59.9vh;
	z-index: 3;
}

.robot-all .robot-body {
	background: url('../img/robot-body-2023.png') no-repeat bottom center;
	background-size: auto 100%;
	left: 0;
	background-color: transparent;
	bottom: 1.8vh;
	z-index: 2;
	height: 73vh;
	width: 100%;
}
		
.robot-all > div::before, .robot-all .robot-head-main::after {
	height: 0;
}
		

		
textarea {
	height: 10px;
	overflow: 0;
}



.robot-all .robot-key {
    background: url('../img/robot-key-static.gif') no-repeat bottom center;
        background-size: auto auto;
    background-size: 100% auto;
    left: 0;
    bottom: 28vh;
    z-index: 4;
    height: 12vh;
    width: 10vh;
    margin-left: calc(50% + 18.2vh);
    cursor: pointer;
}


.robot-all .robot-key > div {
	margin-left: 11.5vh;
	width: 20vh;	
}

.robot-all .robot-key > div p {	
	font-size: 1.1em;
	line-height: 1.2em;
	margin: 0;
	color: #222;
	margin-top: -10px;
}

.robot-all .robot-key > div p svg {	
	width: 40px;
	margin-left: -10px;
}

.step-1	.robot-all .robot-key, 
.step-2	.robot-all .robot-key {
		background-image: url('../img/robot-key-rotating.gif');
}




#preload-01 { background: url('../img/robot-key-rotating.gif') no-repeat -9999px -9999px; }
#preload-02 { background: url('../img/robot-head-upper-glowing.gif') no-repeat -9999px -9999px; }


/* -------------------------- */
#waitin {
position: absolute;
width: 100%;
min-height: 90vh;
display: flex;
top: 0;
align-items: center;
flex-flow: column;
justify-content: center;
opacity: 0;
z-index: -100;
transition: opacity 0.6s ease-in;
}

#container.step-3 #waitin {
opacity: 1;
z-index: 100;
}
#waitin .loader-text {
color: #fff;
font-size: 0.9em;
animation: loadertextwobble 4s linear infinite alternate;
}
#waitin .loader {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: block;
  margin:15px auto;
  position: relative;
  background: url("../img/chatgpt-white.png");
  background-size: contain;
  box-sizing: border-box;
  opacity: 0.8;
  animation: shadowExpandX 2s linear infinite alternate;
}

@keyframes shadowExpandX {
  0% {
    box-shadow: 0 0, 0 0;
    color: rgba(255, 255, 255, 0.0);
  }
  100% {
    box-shadow: -44px 0, 44px 0;
    color: rgba(255, 255, 255, 0.4);
  }
}

@keyframes loadertextwobble {
  0% {
    transform: scale(1);
  }
  50% {
     transform: scale(1.1);
  }
}
/* Grid ------------------------------------------------- */
.icons {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1;
	position: absolute;
}

.icons .row {
	width: 100%;
	height: calc(100% / 7);
}

.icons span {
	display: block;
	float: left;
	width: calc((100% / 11) - 1px);
	height: 100%;
	font-family: din-2014, sans-serif; 
	font-weight: 300;
	font-size: 74px;
	text-align: center;
	opacity: 0;
	-webkit-transition: -webkit-transform 0.6s ease-in, opacity 0.2s;
	transition: transform 0.6s ease-in, opacity 0.2s;
	/* text-shadow: 1px 4px 2px #8b5012; */
}

.icons span.letter {
	color: #fff;
	font-size: 80px;
}



/* Grid elements transforms */
/* Step 3: All items in one point at the bottom */

.step-2, .step-3 {

/* First row */
.icons .row:first-child span:first-child {
	-webkit-transform: translateY(700%) translateX(500%);
	transform: translateY(700%) translateX(500%);
}

.icons .row:first-child span:nth-child(2) {
	-webkit-transform: translateY(700%) translateX(400%);
	transform: translateY(700%) translateX(400%);
}

.icons .row:first-child span:nth-child(3) {
	-webkit-transform: translateY(700%) translateX(300%);
	transform: translateY(700%) translateX(300%);
}

.icons .row:first-child span:nth-child(4) {
	-webkit-transform: translateY(700%) translateX(200%);
	transform: translateY(700%) translateX(200%);
}

.icons .row:first-child span:nth-child(5) {
	-webkit-transform: translateY(700%) translateX(100%);
	transform: translateY(700%) translateX(100%);
}

.icons .row:first-child span:nth-child(6) {
	-webkit-transform: translateY(700%) translateX(0);
	transform: translateY(700%) translateX(0);
}

.icons .row:first-child span:nth-child(7) {
	-webkit-transform: translateY(700%) translateX(-100%);
	transform: translateY(700%) translateX(-100%);
}

.icons .row:first-child span:nth-child(8) {
	-webkit-transform: translateY(700%) translateX(-200%);
	transform: translateY(700%) translateX(-200%);
}

.icons .row:first-child span:nth-child(9) {
	-webkit-transform: translateY(700%) translateX(-300%);
	transform: translateY(700%) translateX(-300%);
}

.icons .row:first-child span:nth-child(10) {
	-webkit-transform: translateY(700%) translateX(-400%);
	transform: translateY(700%) translateX(-400%);
}

.icons .row:first-child span:nth-child(11) {
	-webkit-transform: translateY(700%) translateX(-500%);
	transform: translateY(700%) translateX(-500%);
}

/* Second row */
.icons .row:nth-child(2) span:first-child {
	-webkit-transform: translateY(600%) translateX(500%);
	transform: translateY(600%) translateX(500%);
}

.icons .row:nth-child(2) span:nth-child(2) {
	-webkit-transform: translateY(600%) translateX(400%);
	transform: translateY(600%) translateX(400%);
}

.icons .row:nth-child(2) span:nth-child(3) {
	-webkit-transform: translateY(600%) translateX(300%);
	transform: translateY(600%) translateX(300%);
}

.icons .row:nth-child(2) span:nth-child(4) {
	-webkit-transform: translateY(600%) translateX(200%);
	transform: translateY(600%) translateX(200%);
}

.icons .row:nth-child(2) span:nth-child(5) {
	-webkit-transform: translateY(600%) translateX(100%);
	transform: translateY(600%) translateX(100%);
}

.icons .row:nth-child(2) span:nth-child(6) {
	-webkit-transform: translateY(600%) translateX(0);
	transform: translateY(600%) translateX(0);
}

.icons .row:nth-child(2) span:nth-child(7) {
	-webkit-transform: translateY(600%) translateX(-100%);
	transform: translateY(600%) translateX(-100%);
}

.icons .row:nth-child(2) span:nth-child(8) {
	-webkit-transform: translateY(600%) translateX(-200%);
	transform: translateY(600%) translateX(-200%);
}

.icons .row:nth-child(2) span:nth-child(9) {
	-webkit-transform: translateY(600%) translateX(-300%);
	transform: translateY(600%) translateX(-300%);
}

.icons .row:nth-child(2) span:nth-child(10) {
	-webkit-transform: translateY(600%) translateX(-400%);
	transform: translateY(600%) translateX(-400%);
}

.icons .row:nth-child(2) span:nth-child(11) {
	-webkit-transform: translateY(600%) translateX(-500%);
	transform: translateY(600%) translateX(-500%);
}

/* Third row */
.icons .row:nth-child(3) span:first-child {
	-webkit-transform: translateY(500%) translateX(500%);
	transform: translateY(500%) translateX(500%);
}

.icons .row:nth-child(3) span:nth-child(2) {
	-webkit-transform: translateY(500%) translateX(400%);
	transform: translateY(500%) translateX(400%);
}

.icons .row:nth-child(3) span:nth-child(3) {
	-webkit-transform: translateY(500%) translateX(300%);
	transform: translateY(500%) translateX(300%);
}

.icons .row:nth-child(3) span:nth-child(4) {
	-webkit-transform: translateY(500%) translateX(200%);
	transform: translateY(500%) translateX(200%);
}

.icons .row:nth-child(3) span:nth-child(5) {
	-webkit-transform: translateY(500%) translateX(100%);
	transform: translateY(500%) translateX(100%);
}

.icons .row:nth-child(3) span:nth-child(6) {
	-webkit-transform: translateY(500%) translateX(0);
	transform: translateY(500%) translateX(0);
}

.icons .row:nth-child(3) span:nth-child(7) {
	-webkit-transform: translateY(500%) translateX(-100%);
	transform: translateY(500%) translateX(-100%);
}

.icons .row:nth-child(3) span:nth-child(8) {
	-webkit-transform: translateY(500%) translateX(-200%);
	transform: translateY(500%) translateX(-200%);
}

.icons .row:nth-child(3) span:nth-child(9) {
	-webkit-transform: translateY(500%) translateX(-300%);
	transform: translateY(500%) translateX(-300%);
}

.icons .row:nth-child(3) span:nth-child(10) {
	-webkit-transform: translateY(500%) translateX(-400%);
	transform: translateY(500%) translateX(-400%);
}

.icons .row:nth-child(3) span:nth-child(11) {
	-webkit-transform: translateY(500%) translateX(-500%);
	transform: translateY(500%) translateX(-500%);
}

/* Fourth row */
.icons .row:nth-child(4) span:first-child {
	-webkit-transform: translateY(400%) translateX(500%);
	transform: translateY(400%) translateX(500%);
}

.icons .row:nth-child(4) span:nth-child(2) {
	-webkit-transform: translateY(400%) translateX(400%);
	transform: translateY(400%) translateX(400%);
}

.icons .row:nth-child(4) span:nth-child(3) {
	-webkit-transform: translateY(400%) translateX(300%);
	transform: translateY(400%) translateX(300%);
}

.icons .row:nth-child(4) span:nth-child(4) {
	-webkit-transform: translateY(400%) translateX(200%);
	transform: translateY(400%) translateX(200%);
}

.icons .row:nth-child(4) span:nth-child(5) {
	-webkit-transform: translateY(400%) translateX(100%);
	transform: translateY(400%) translateX(100%);
}

.icons .row:nth-child(4) span:nth-child(6) {
	-webkit-transform: translateY(400%) translateX(0);
	transform: translateY(400%) translateX(0);
}

.icons .row:nth-child(4) span:nth-child(7) {
	-webkit-transform: translateY(400%) translateX(-100%);
	transform: translateY(400%) translateX(-100%);
}

.icons .row:nth-child(4) span:nth-child(8) {
	-webkit-transform: translateY(400%) translateX(-200%);
	transform: translateY(400%) translateX(-200%);
}

.icons .row:nth-child(4) span:nth-child(9) {
	-webkit-transform: translateY(400%) translateX(-300%);
	transform: translateY(400%) translateX(-300%);
}

.icons .row:nth-child(4) span:nth-child(10) {
	-webkit-transform: translateY(400%) translateX(-400%);
	transform: translateY(400%) translateX(-400%);
}

.icons .row:nth-child(4) span:nth-child(11) {
	-webkit-transform: translateY(400%) translateX(-500%);
	transform: translateY(400%) translateX(-500%);
}

/* Fifth row */
.icons .row:nth-child(5) span:first-child {
	-webkit-transform: translateY(300%) translateX(500%);
	transform: translateY(300%) translateX(500%);
}

.icons .row:nth-child(5) span:nth-child(2) {
	-webkit-transform: translateY(300%) translateX(400%);
	transform: translateY(300%) translateX(400%);
}

.icons .row:nth-child(5) span:nth-child(3) {
	-webkit-transform: translateY(300%) translateX(300%);
	transform: translateY(300%) translateX(300%);
}

.icons .row:nth-child(5) span:nth-child(4) {
	-webkit-transform: translateY(300%) translateX(200%);
	transform: translateY(300%) translateX(200%);
}

.icons .row:nth-child(5) span:nth-child(5) {
	-webkit-transform: translateY(300%) translateX(100%);
	transform: translateY(300%) translateX(100%);
}

.icons .row:nth-child(5) span:nth-child(6) {
	-webkit-transform: translateY(300%) translateX(0);
	transform: translateY(300%) translateX(0);
}

.icons .row:nth-child(5) span:nth-child(7) {
	-webkit-transform: translateY(300%) translateX(-100%);
	transform: translateY(300%) translateX(-100%);
}

.icons .row:nth-child(5) span:nth-child(8) {
	-webkit-transform: translateY(300%) translateX(-200%);
	transform: translateY(300%) translateX(-200%);
}

.icons .row:nth-child(5) span:nth-child(9) {
	-webkit-transform: translateY(300%) translateX(-300%);
	transform: translateY(300%) translateX(-300%);
}

.icons .row:nth-child(5) span:nth-child(10) {
	-webkit-transform: translateY(300%) translateX(-400%);
	transform: translateY(300%) translateX(-400%);
}

.icons .row:nth-child(5) span:nth-child(11) {
	-webkit-transform: translateY(300%) translateX(-500%);
	transform: translateY(300%) translateX(-500%);
}

/* Sixth row */
.icons .row:nth-child(6) span:first-child {
	-webkit-transform: translateY(200%) translateX(500%);
	transform: translateY(200%) translateX(500%);
}

.icons .row:nth-child(6) span:nth-child(2) {
	-webkit-transform: translateY(200%) translateX(400%);
	transform: translateY(200%) translateX(400%);
}

.icons .row:nth-child(6) span:nth-child(3) {
	-webkit-transform: translateY(200%) translateX(300%);
	transform: translateY(200%) translateX(300%);
}

.icons .row:nth-child(6) span:nth-child(4) {
	-webkit-transform: translateY(200%) translateX(200%);
	transform: translateY(200%) translateX(200%);
}

.icons .row:nth-child(6) span:nth-child(5) {
	-webkit-transform: translateY(200%) translateX(100%);
	transform: translateY(200%) translateX(100%);
}

.icons .row:nth-child(6) span:nth-child(6) {
	-webkit-transform: translateY(200%) translateX(0);
	transform: translateY(200%) translateX(0);
}

.icons .row:nth-child(6) span:nth-child(7) {
	-webkit-transform: translateY(200%) translateX(-100%);
	transform: translateY(200%) translateX(-100%);
}

.icons .row:nth-child(6) span:nth-child(8) {
	-webkit-transform: translateY(200%) translateX(-200%);
	transform: translateY(200%) translateX(-200%);
}

.icons .row:nth-child(6) span:nth-child(9) {
	-webkit-transform: translateY(200%) translateX(-300%);
	transform: translateY(200%) translateX(-300%);
}

.icons .row:nth-child(6) span:nth-child(10) {
	-webkit-transform: translateY(200%) translateX(-400%);
	transform: translateY(200%) translateX(-400%);
}

.icons .row:nth-child(6) span:nth-child(11) {
	-webkit-transform: translateY(200%) translateX(-500%);
	transform: translateY(200%) translateX(-500%);
}

/* Seventh row */
.icons .row:nth-child(7) span:first-child {
	-webkit-transform: translateY(100%) translateX(500%);
	transform: translateY(100%) translateX(500%);
}

.icons .row:nth-child(7) span:nth-child(2) {
	-webkit-transform: translateY(100%) translateX(400%);
	transform: translateY(100%) translateX(400%);
}

.icons .row:nth-child(7) span:nth-child(3) {
	-webkit-transform: translateY(100%) translateX(300%);
	transform: translateY(100%) translateX(300%);
}

.icons .row:nth-child(7) span:nth-child(4) {
	-webkit-transform: translateY(100%) translateX(200%);
	transform: translateY(100%) translateX(200%);
}

.icons .row:nth-child(7) span:nth-child(5) {
	-webkit-transform: translateY(100%) translateX(100%);
	transform: translateY(100%) translateX(100%);
}

.icons .row:nth-child(7) span:nth-child(6) {
	-webkit-transform: translateY(100%) translateX(0);
	transform: translateY(100%) translateX(0);
}

.icons .row:nth-child(7) span:nth-child(7) {
	-webkit-transform: translateY(100%) translateX(-100%);
	transform: translateY(100%) translateX(-100%);
}

.icons .row:nth-child(7) span:nth-child(8) {
	-webkit-transform: translateY(100%) translateX(-200%);
	transform: translateY(100%) translateX(-200%);
}

.icons .row:nth-child(7) span:nth-child(9) {
	-webkit-transform: translateY(100%) translateX(-300%);
	transform: translateY(100%) translateX(-300%);
}

.icons .row:nth-child(7) span:nth-child(10) {
	-webkit-transform: translateY(100%) translateX(-400%);
	transform: translateY(100%) translateX(-400%);
}

.icons .row:nth-child(7) span:nth-child(11) {
	-webkit-transform: translateY(100%) translateX(-500%);
	transform: translateY(100%) translateX(-500%);
}
}


/* Step 2 */

.step-4 .icons span {
	opacity: 1;
	-webkit-transition-timing-function: cubic-bezier(0.000, 0.000, 0.200, 0.910);
	transition-timing-function: cubic-bezier(0.000, 0.000, 0.200, 0.910);
}

.step-4 .icons .row:nth-child(2) span {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

.step-4 .icons .row:nth-child(3) span {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}

.step-4 .icons .row:nth-child(4) span {
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
}

.step-4 .icons .row:nth-child(5) span {
	-webkit-transition-delay: 0.25s;
	transition-delay: 0.25s;
}

.step-4 .icons .row:nth-child(6) span {
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s;
}

.step-4 .icons .row:nth-child(7) span {
	-webkit-transition-delay: 0.35s;
	transition-delay: 0.35s;
}

/* First row */
.step-4 .icons .row:first-child span:first-child {
	-webkit-transform: translateY(-300%);
	transform: translateY(-300%);
}

.step-4 .icons .row:first-child span:nth-child(2) {
	-webkit-transform: translateY(-300%);
	transform: translateY(-300%);
}

.step-4 .icons .row:first-child span:nth-child(3) {
	-webkit-transform: translateY(-300%);
	transform: translateY(-300%);
}

.step-4 .icons .row:first-child span:nth-child(4) {
	-webkit-transform: translateY(-300%);
	transform: translateY(-300%);
}

.step-4 .icons .row:first-child span:nth-child(5) {
	-webkit-transform: translateY(-300%);
	transform: translateY(-300%);
}

.step-4 .icons .row:first-child span:nth-child(6) {
	-webkit-transform: translateY(-300%) ;
	transform: translateY(-300%) ;
}

.step-4 .icons .row:first-child span:nth-child(7) {
	-webkit-transform: translateY(-300%);
	transform: translateY(-300%);
}

.step-4 .icons .row:first-child span:nth-child(8) {
	-webkit-transform: translateY(-300%);
	transform: translateY(-300%);
}

.step-4 .icons .row:first-child span:nth-child(9) {
	-webkit-transform: translateY(-300%);
	transform: translateY(-300%);
}

.step-4 .icons .row:first-child span:nth-child(10) {
	-webkit-transform: translateY(-300%);
	transform: translateY(-300%);
}

.step-4 .icons .row:first-child span:nth-child(11) {
	-webkit-transform: translateY(-300%);
	transform: translateY(-300%);
}


/* Second row */
.step-4 .icons .row:nth-child(2) span:first-child {
	-webkit-transform: translateY(-400%);
	transform: translateY(-400%);
}

.step-4 .icons .row:nth-child(2) span:nth-child(2) {
	-webkit-transform: translateY(-400%);
	transform: translateY(-400%);
}

.step-4 .icons .row:nth-child(2) span:nth-child(3) {
	-webkit-transform: translateY(-400%);
	transform: translateY(-400%);
}

.step-4 .icons .row:nth-child(2) span:nth-child(4) {
	-webkit-transform: translateY(-400%);
	transform: translateY(-400%);
}

.step-4 .icons .row:nth-child(2) span:nth-child(5) {
	-webkit-transform: translateY(-400%);
	transform: translateY(-400%);
}

.step-4 .icons .row:nth-child(2) span:nth-child(6) {
	-webkit-transform: translateY(-400%) ;
	transform: translateY(-400%) ;
}

.step-4 .icons .row:nth-child(2) span:nth-child(7) {
	-webkit-transform: translateY(-400%);
	transform: translateY(-400%);
}

.step-4 .icons .row:nth-child(2) span:nth-child(8) {
	-webkit-transform: translateY(-400%);
	transform: translateY(-400%);
}

.step-4 .icons .row:nth-child(2) span:nth-child(9) {
	-webkit-transform: translateY(-400%);
	transform: translateY(-400%);
}

.step-4 .icons .row:nth-child(2) span:nth-child(10) {
	-webkit-transform: translateY(-400%);
	transform: translateY(-400%);
}

.step-4 .icons .row:nth-child(2) span:nth-child(11) {
	-webkit-transform: translateY(-400%);
	transform: translateY(-400%);
}

/* Third row */
.step-4 .icons .row:nth-child(3) span:first-child {
	-webkit-transform: translateY(-500%);
	transform: translateY(-500%);
}

.step-4 .icons .row:nth-child(3) span:nth-child(2) {
	-webkit-transform: translateY(-500%);
	transform: translateY(-500%);
}

.step-4 .icons .row:nth-child(3) span:nth-child(3) {
	-webkit-transform: translateY(-500%);
	transform: translateY(-500%);
}

.step-4 .icons .row:nth-child(3) span:nth-child(4) {
	-webkit-transform: translateY(-500%);
	transform: translateY(-500%);
}

.step-4 .icons .row:nth-child(3) span:nth-child(5) {
	-webkit-transform: translateY(-500%);
	transform: translateY(-500%);
}

.step-4 .icons .row:nth-child(3) span:nth-child(6) {
	-webkit-transform: translateY(-500%) ;
	transform: translateY(-500%) ;
}

.step-4 .icons .row:nth-child(3) span:nth-child(7) {
	-webkit-transform: translateY(-500%);
	transform: translateY(-500%);
}

.step-4 .icons .row:nth-child(3) span:nth-child(8) {
	-webkit-transform: translateY(-500%);
	transform: translateY(-500%);
}

.step-4 .icons .row:nth-child(3) span:nth-child(9) {
	-webkit-transform: translateY(-500%);
	transform: translateY(-500%);
}

.step-4 .icons .row:nth-child(3) span:nth-child(10) {
	-webkit-transform: translateY(-500%);
	transform: translateY(-500%);
}

.step-4 .icons .row:nth-child(3) span:nth-child(11) {
	-webkit-transform: translateY(-500%);
	transform: translateY(-500%);
}

/* Fourth row */
.step-4 .icons .row:nth-child(4) span:first-child {
	-webkit-transform: translateY(-600%);
	transform: translateY(-600%);
}

.step-4 .icons .row:nth-child(4) span:nth-child(2) {
	-webkit-transform: translateY(-600%);
	transform: translateY(-600%);
}

.step-4 .icons .row:nth-child(4) span:nth-child(3) {
	-webkit-transform: translateY(-600%);
	transform: translateY(-600%);
}

.step-4 .icons .row:nth-child(4) span:nth-child(4) {
	-webkit-transform: translateY(-600%);
	transform: translateY(-600%);
}

.step-4 .icons .row:nth-child(4) span:nth-child(5) {
	-webkit-transform: translateY(-600%);
	transform: translateY(-600%);
}

.step-4 .icons .row:nth-child(4) span:nth-child(6) {
	-webkit-transform: translateY(-600%) ;
	transform: translateY(-600%) ;
}

.step-4 .icons .row:nth-child(4) span:nth-child(7) {
	-webkit-transform: translateY(-600%);
	transform: translateY(-600%);
}

.step-4 .icons .row:nth-child(4) span:nth-child(8) {
	-webkit-transform: translateY(-600%);
	transform: translateY(-600%);
}

.step-4 .icons .row:nth-child(4) span:nth-child(9) {
	-webkit-transform: translateY(-600%);
	transform: translateY(-600%);
}

.step-4 .icons .row:nth-child(4) span:nth-child(10) {
	-webkit-transform: translateY(-600%);
	transform: translateY(-600%);
}

.step-4 .icons .row:nth-child(4) span:nth-child(11) {
	-webkit-transform: translateY(-600%);
	transform: translateY(-600%);
}

/* Fifth row */
.step-4 .icons .row:nth-child(5) span:first-child {
	-webkit-transform: translateY(-700%);
	transform: translateY(-700%);
}

.step-4 .icons .row:nth-child(5) span:nth-child(2) {
	-webkit-transform: translateY(-700%);
	transform: translateY(-700%);
}

.step-4 .icons .row:nth-child(5) span:nth-child(3) {
	-webkit-transform: translateY(-700%);
	transform: translateY(-700%);
}

.step-4 .icons .row:nth-child(5) span:nth-child(4) {
	-webkit-transform: translateY(-700%);
	transform: translateY(-700%);
}

.step-4 .icons .row:nth-child(5) span:nth-child(5) {
	-webkit-transform: translateY(-700%);
	transform: translateY(-700%);
}

.step-4 .icons .row:nth-child(5) span:nth-child(6) {
	-webkit-transform: translateY(-700%) ;
	transform: translateY(-700%) ;
}

.step-4 .icons .row:nth-child(5) span:nth-child(7) {
	-webkit-transform: translateY(-700%);
	transform: translateY(-700%);
}

.step-4 .icons .row:nth-child(5) span:nth-child(8) {
	-webkit-transform: translateY(-700%);
	transform: translateY(-700%);
}

.step-4 .icons .row:nth-child(5) span:nth-child(9) {
	-webkit-transform: translateY(-700%);
	transform: translateY(-700%);
}

.step-4 .icons .row:nth-child(5) span:nth-child(10) {
	-webkit-transform: translateY(-700%);
	transform: translateY(-700%);
}

.step-4 .icons .row:nth-child(5) span:nth-child(11) {
	-webkit-transform: translateY(-700%);
	transform: translateY(-700%);
}

/* Sixth row */
.step-4 .icons .row:nth-child(6) span:first-child {
	-webkit-transform: translateY(-800%);
	transform: translateY(-800%);
}

.step-4 .icons .row:nth-child(6) span:nth-child(2) {
	-webkit-transform: translateY(-800%);
	transform: translateY(-800%);
}

.step-4 .icons .row:nth-child(6) span:nth-child(3) {
	-webkit-transform: translateY(-800%);
	transform: translateY(-800%);
}

.step-4 .icons .row:nth-child(6) span:nth-child(4) {
	-webkit-transform: translateY(-800%);
	transform: translateY(-800%);
}

.step-4 .icons .row:nth-child(6) span:nth-child(5) {
	-webkit-transform: translateY(-800%);
	transform: translateY(-800%);
}

.step-4 .icons .row:nth-child(6) span:nth-child(6) {
	-webkit-transform: translateY(-800%) ;
	transform: translateY(-800%) ;
}

.step-4 .icons .row:nth-child(6) span:nth-child(7) {
	-webkit-transform: translateY(-800%);
	transform: translateY(-800%);
}

.step-4 .icons .row:nth-child(6) span:nth-child(8) {
	-webkit-transform: translateY(-800%);
	transform: translateY(-800%);
}

.step-4 .icons .row:nth-child(6) span:nth-child(9) {
	-webkit-transform: translateY(-800%);
	transform: translateY(-800%);
}

.step-4 .icons .row:nth-child(6) span:nth-child(10) {
	-webkit-transform: translateY(-800%);
	transform: translateY(-800%);
}

.step-4 .icons .row:nth-child(6) span:nth-child(11) {
	-webkit-transform: translateY(-800%);
	transform: translateY(-800%);
}

/* Seventh row */
.step-4 .icons .row:nth-child(7) span:first-child {
	-webkit-transform: translateY(-900%);
	transform: translateY(-900%);
}

.step-4 .icons .row:nth-child(7) span:nth-child(2) {
	-webkit-transform: translateY(-900%);
	transform: translateY(-900%);
}

.step-4 .icons .row:nth-child(7) span:nth-child(3) {
	-webkit-transform: translateY(-900%);
	transform: translateY(-900%);
}

.step-4 .icons .row:nth-child(7) span:nth-child(4) {
	-webkit-transform: translateY(-900%);
	transform: translateY(-900%);
}

.step-4 .icons .row:nth-child(7) span:nth-child(5) {
	-webkit-transform: translateY(-900%);
	transform: translateY(-900%);
}

.step-4 .icons .row:nth-child(7) span:nth-child(6) {
	-webkit-transform: translateY(-900%) ;
	transform: translateY(-900%) ;
}

.step-4 .icons .row:nth-child(7) span:nth-child(7) {
	-webkit-transform: translateY(-900%);
	transform: translateY(-900%);
}

.step-4 .icons .row:nth-child(7) span:nth-child(8) {
	-webkit-transform: translateY(-900%);
	transform: translateY(-900%);
}

.step-4 .icons .row:nth-child(7) span:nth-child(9) {
	-webkit-transform: translateY(-900%);
	transform: translateY(-900%);
}

.step-4 .icons .row:nth-child(7) span:nth-child(10) {
	-webkit-transform: translateY(-900%);
	transform: translateY(-900%);
}

.step-4 .icons .row:nth-child(7) span:nth-child(11) {
	-webkit-transform: translateY(-900%);
	transform: translateY(-900%);
}







/* Steps (animations) for robot -------------------  */


.step-1 .robot-all .robot-head-main,
.step-2 .robot-all .robot-head-main,
.step-3 .robot-all .robot-head-main {
	background-image: url('../img/robot-head-lower-animated.gif');
}

.step-3 .robot-all .robot-head-top,
.step-3 .robot-all .robot-head-main {
	-webkit-animation: shake-hard 2.4s 1.4s linear infinite forwards;
	animation: shake-hard 2.4s 1.4s linear infinite forwards;
}

.step-4 .robot-all .robot-head-top > div {
	-webkit-animation: hingeOpen 0.4s ease-out forwards;
	animation: hingeOpen 0.4s ease-out forwards;
}

.step-5 .robot-all .robot-head-top > div {
	-webkit-animation: hingeClose 0.4s ease-out forwards;
	animation: hingeClose 0.4s ease-out forwards;
}

.step-2 .robot-all {
	-webkit-animation: fallDown 2.4s 0.1s ease-out forwards;
	animation: fallDown 2.4s 0.1s ease-out forwards;
}

.step-2 .robot-all .robot-head-top,
.step-2 .robot-all .robot-head-main {
	-webkit-animation: shake 0.5s 0.1s linear infinite forwards;
	animation: shake 0.5s 0.1s linear infinite forwards;
}

.step-1 .robot-all .robot-head-top,
.step-1 .robot-all .robot-head-main {
	-webkit-animation: shake-little 0.5s 0.1s linear infinite forwards;
	animation: shake-little 0.5s 0.1s linear infinite forwards;
}

.step-6 .robot-all {
	-webkit-animation: backUp 0.4s 0.1s ease-out forwards;
	animation: backUp 0.4s 0.1s ease-out forwards;
}











@-webkit-keyframes fallDown {
	86% { -webkit-transform: translate3d(0, 0px, 0); }
	89% { -webkit-transform: translate3d(0, -6px, 0); }
	96% { -webkit-transform: translate3d(0, 65vh, 0); }
	100% { -webkit-transform: translate3d(0, 60vh, 0); }
}

@keyframes fallDown {
	86% {transform: translate3d(0, 0px, 0);}
	89% {transform: translate3d(0, -6px, 0);}
	96% {transform: translate3d(0, 65vh, 0);}
	to {transform: translate3d(0, 60vh, 0);}
}


@-webkit-keyframes backUp {
	10% { -webkit-transform: translate3d(0, 0px, 0); }
	94% { -webkit-transform: translate3d(0, -61vh, 0); }
	100% { -webkit-transform: translate3d(0, -56vh, 0); }
}

@keyframes backUp {
	10% { transform: translate3d(0, 0px, 0); }
	94% { transform: translate3d(0, -61vh, 0); }
	to { transform: translate3d(0, -56vh, 0); }
}



@keyframes hingeOpen {
  0% {
    transform-origin: bottom left;
    animation-timing-function: ease-in-out;
  }

  20%, 60% {
    transform: rotate3d(0, 0, 1, -110deg);
    transform-origin: bottom left;
    animation-timing-function: ease-in-out;
  }

  40%, 80% {
    transform: rotate3d(0, 0, 1, -140deg);
    transform-origin: bottom left;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    transform: rotate3d(0, 0, 1, -120deg);
   transform-origin: bottom left;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
}

@keyframes hingeClose {
  0% {
    transform-origin: bottom left;
    animation-timing-function: ease-in-out;
  }

  20%, 60% {
    transform: rotate3d(0, 0, 1, 10deg);
    transform-origin: bottom left;
    animation-timing-function: ease-in-out;
  }

  40%, 80% {
    transform: rotate3d(0, 0, 1, -3deg);
    transform-origin: bottom left;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    transform: rotate3d(0, 0, 1, 0deg);
   transform-origin: bottom left;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }
}




@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: rotate(2deg)translate3d(0, -3000px, 0);
  }

  75% {
    opacity: 1;
    transform: rotate(2deg) translate3d(0, 25px, 0);
  }

  82% {
    transform: rotate(2.5deg) translate3d(0px, -10px, 0);
  }

  96% {
    transform: rotate(2.8deg) translate3d(0, 5px, 0);
  }
  
  to {
    transform: rotate(3deg);

  }
}


@keyframes bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, 0, 0);
  }

  to {
    opacity: 0;
    transform: translate3d(2000px, 0, 0);
  }
}









/* Final Card ------------------------------------------------- */

  


#final-card {
	/* font-family: mrs-eaves, serif; 
	font-weight: 400;*/
	font-size: 2.4vh;
	line-height: 1.25;
	background: #26855f;
	width: 46vh;
	height: 70vh;
	left: 50%;
	margin-left: -27vh;
	position: absolute;
	padding: 1em 1.8em;
	bottom: 13vh;
	z-index: 2;
	/*box-shadow: 3px 4px 0 #C85F2E;*/
	opacity: 0;
	color: #fff;
	text-align: center;
	letter-spacing: 0;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#final-card > div {
  display: table;
  height: inherit;
  width: inherit;
}

#final-card > div > div {
    display: table-cell;
    vertical-align: middle;
    padding-bottom: 30%;
}

#final-card.card-copied p {
	animation-duration: 0.5s;
	animation-fill-mode: both;
	animation-name: flashcard;
}

@-webkit-keyframes flashcard {
	20% { opacity: 0.1}
	100% { opacity: 1 }
}

@keyframes flashcard {
	20% { opacity: 0.1}
	100% { opacity: 1 }
}

#final-card p {
	margin-bottom: 0;
	margin-top: 0.4em;
	font-size: 1.06em;
}



#final-card p.first-line {
	margin-bottom: 0.3em; 
	font-family: din-2014, sans-serif; 
	font-size: 1.4em; 
	letter-spacing: 0.04em; 
	line-height: 1.2; 
	text-transform:uppercase;
}

#final-card p.first-line:last-of-type {
	margin-bottom: 0!important;
	font-size: 1.06em!important;
	text-transform: none!important;
}

#final-card p.last-line {
	margin-top: 0.3em; 
	font-family: din-2014, sans-serif; 
	font-size: 1.2em; 
	letter-spacing: 0.04em; 
	line-height: 1.2; 
	text-transform:uppercase;
}





.done-that .step-3 #final-card {
	animation-duration: 0.5s;
	animation-fill-mode: both;
	animation-name: bounceOutRight;
	opacity: 1;
}


.step-5 #final-card  {
	animation-duration: 0.5s;
	animation-fill-mode: both;
	animation-name: bounceInDown;
      opacity: 1;
}







/* Formular auf Robot ------------------------------------------------- */


.robot-all .robot-body form {
	margin: 22.2vh calc(50% - 17.1vh);
	color: #fff;
	width: 34.4vh;
	font-size: 1.8vh;
	text-align: right;
}
		
.form-border {
	border: 0.2em solid #fff;
	margin: 1.5vh 0 0;
	border-radius: 0;
	padding: 1vh 1vh 0;
	background: #403A35;
}

input[type=text] {
	width: 36%;
	background: transparent;
	color: #fff;
	padding: 0.05em 0.3em;
	border-radius: 0;
	height: 1.5em;
	margin: 0 0 0 0.4em;
	border: 0.16em solid #aaa;
}

input[type=text]:nth-child(even) {
	margin: 0;
}

.name-fields {
	margin: 0 0 0.6em;
}	

.name-fields label {
	float: left;
	padding: 0.2em 0 0 0.3em;
	font-size: 1.1em;
}
	
form ul {
	display: block;
	clear: both;
	margin: 0 0 0.6em;
	padding: 0.3em;
	height: 1.4em;
	border: 0.16em solid #aaa;
	border-radius: 0;
}	

form .fa {
	font-size: 1.3em;
	padding: 0 0.2em;
}

ul li {
color: #AAAAAA;
display: inline-block;
position: relative;
float: left;
margin: 0 0 0 0;
width: 28%;
font-size: 1.1em;
}

ul li:nth-child(3) {
text-align: right;
}

ul li.text {
 width: 44%;
 text-align: center;
 text-transform: uppercase;
 color: #eee;
}

ul li input[type=radio]{
  position: absolute;
  visibility: hidden;
}

ul li label {
  display: block;
  position: relative;
  padding: 0 0 0 1.3em;
  margin: 0;
  height: auto;
  z-index: 9;
  cursor: pointer;
  -webkit-transition: all 0.25s linear;
  transition: all 0.25s linear;
   text-align: left;
}

ul li:nth-child(3) label {
 padding: 0 1.3em 0 0;
    text-align: right;
}


ul li:hover label{
	color: #FFFFFF;
}

ul li .check{
  display: block;
  position: absolute;
  border: 0.17em solid #AAAAAA;
  border-radius: 100%;
  top: 0.1em;
  height: 0.8em;
  width: 0.8em;
	z-index: 5;
	transition: border .25s linear;
	-webkit-transition: border .25s linear;
}

ul li:nth-child(3) .check{
 right: 0;
}

ul li:hover .check {
  border-color: #FFFFFF;
}

ul li .check::before {
  display: block;
  position: absolute;
	content: '';
  border-radius: 100%;
  height: 0.5em;
  width: 0.5em;
  top: 0.145em;
  left: 0.145em;
  margin: auto;
	transition: background 0.25s linear;
	-webkit-transition: background 0.25s linear;
}

input[type=radio]:checked ~ .check {
  border-color: #D72116;
}

input[type=radio]:checked ~ .check::before{
  background: #D72116;
}

input[type=radio]:checked ~ label{
  color: #D72116;
}


	









/* Buttons ------------------------------------------------- */



.step-5 #button-copy-text,
.step-5 #button-robot-up {
opacity: 1;
}

.device-ios .step-5 #button-copy-text {
	display: none;
}

button {
opacity: 0;
color: #fff;
border: 1px solid #fff;
/*border-radius: 6px;*/
border-radius: 0;
padding: 6px 12px;
background-color: rgba(255,255,255,0.1);
font-family: din-2014, sans-serif; 
position: absolute;
top: 10px;
right: 10px;
margin-left: 20px;
transition: all 0.3s ease-in;
text-transform: uppercase;
cursor: pointer;
z-index: 1000;
letter-spacing: 0.7px;
}

button:hover {
background-color: rgba(255,255,255,0.6);
color: #222;
cursor: pointer!important;
}

button:active {
background-color: rgba(255,255,255,1);
color: #d72016;
margin-top: 1px;
transition: all 0.01s ease-in;
}


#button-copy-text {
right: 186px;
}




a#magaziniker-site  {
display: block;
position: absolute;
top: 2vw;
left: 2vw;
border-radius: 50%;
z-index: 1;
width: 15vh;
height: 15vh;
text-decoration: none;
z-index: 101;

}

a#magaziniker-site:hover {
opacity: 1;
background: #FF6E2E;
transform: scale(1.03);
}

a#magaziniker-site:focus,
a#magaziniker-site:active {
opacity: 1;
/* margin: 1px 0 0 1px; */
outline: none;
background: #FF6E2E;
}

a#magaziniker-site .magalines {fill:#FFF; stroke: #FF6E2E;}

/* a#magaziniker-site .magalines-shadow .magalines {fill:#8b5012; stroke: #FF6E2E;} */


a#magaziniker-site svg {

}

/* a#magaziniker-site svg.magalines-shadow {
z-index: -1;
top: 2px;
left: 3px;
opacity: 0.3;
width: 100%;
position: absolute;
}

a#magaziniker-site:hover svg.magalines-shadow {
top: 1px;
left: 1px;
}

a#magaziniker-site:focus svg.magalines-shadow {
margin-top: 1px;
margin-left: 1px;
}
*/

#welcome-note {
	font-family: din-2014, sans-serif; 
	text-align: center;
	color: #fff;
	margin: 1.4vh 0;
	line-height: 1.2;
	padding: 0;
	letter-spacing: 0.03em;
	/* text-shadow: 3px 3px 0 #C85F2E; */
}
#welcome-note h1 {
	font-size: 2.6vh;
	margin: 0 1vh 0;
	font-weight: 300;
}
#welcome-note h3 {
	font-size: 6vh;
	margin: 0;
	font-weight: 300;
}


	



	




/* Responsive Quatsch ------------------------------------------------- */



@media screen and (min-height: 50em) {
	.icons span.letter {
		font-size: 110px;
	}
}

@media screen and (max-width: 52em) {
	.icons span.letter {
		font-size: 44px;
	}
	
}
@media screen and (max-width: 1480px) {
a#magaziniker-site {
top: 13vh;
left: 3vw;
width: 15vh;
height: 15vh;
	}
}	
@media screen and (max-width: 1239px) {
a#magaziniker-site {
top: 2.6vh;
left: 4vw;
width: 10vh;
height: 10vh;
}
#welcome-note {
	text-align: left;
	margin-left: calc(4vw + 10vh + 4vw);
	}
#welcome-note h1 {
	margin-left: 0;
	}
	
}	
@media screen and (max-width: 800px) {
	
	.robot-all .robot-key > div {
		transform: rotate(90deg);
		margin-left: 0;
		width: 24vh;
		margin-top: 22vh;
	}
	#welcome-note h1 {
	font-size: 2.2vh;
	}
	#welcome-note h3 {
	font-size: 4vh;
	}
	
}
@media screen and (max-width: 600px) {
a#magaziniker-site {
top: 2.6vh;
left: 15px;
width: 55px;
height: 55px;
}
#welcome-note {
	margin-left: calc(15px + 55px + 15px);
	}
	
}
@media screen and (max-width: 600px) {
a#magaziniker-site {
top: 13px;
left: 10px;
width: 50px;
height: 50px;
}
#welcome-note {
	margin-left: calc(10px + 50px + 15px);
	}

#final-card p {
	font-size: 1.09em;
}

	
}

@media screen and (max-width: 44em) {
	.icons span.letter {
		font-size: 36px;
		line-height: 80px;
	}
	button {
		font-size: 0.7em;
	}
	#button-copy-text {
		right: 150px;
	}
	#final-card {
		margin-left: -25.4vh;
		padding: 1em 1em;
	}
	.robot-all .robot-key > div {
		margin-left: -6vh;
		font-size: 0.8em;
	}
	.robot-all .robot-head-top > div > div p {	
	font-size: 0.8em;
	}
	.robot-all .robot-head-top > div > div p svg {
	width: 32px;
	}
	.magaziniker-wrapper {
	bottom: 0;
	}
	
}


/* Maximum aspect ratio */
@media (max-aspect-ratio: 375/540) {
  	#magaziniker-wrap {
  	transform: scale(0.83333333);
	width: 120%;
	left: -10%;
	transform-origin: bottom;
	z-index: 10;
	}
	.robot-all .robot-key > div p,
	.robot-all .robot-head-top > div > div {
	font-size: 1.3em;
	}
	.robot-all {
	top: unset!important;
	bottom: 3.2vh;
	}
	.step-3 .robot-all, .step-4 .robot-all, .step-5 .robot-all, .step-6 .robot-all {
    bottom: -50vh;
	}
	
	
}



/*
@media only screen and (orientation: portrait) and (max-width: 44em)  {
.robot-all {
	width: 120%;
	height: 100vh;
	left: 40%;
	transform: scale(0.85) translateY(-2vh);
}
.step-3 .robot-all, .step-4 .robot-all, .step-5 .robot-all, .step-6 .robot-all {
    top: 56vh;
}

@-webkit-keyframes fallDown {
	86% { -webkit-transform: translate3d(0, 0px, 0) scale(0.85); }
	89% { -webkit-transform: translate3d(0, -6px, 0) scale(0.85); }
	96% { -webkit-transform: translate3d(0, 65vh, 0) scale(0.85); }
	100% { -webkit-transform: translate3d(0, 60vh, 0) scale(0.85); }
}

@keyframes fallDown {
	86% {transform: translate3d(0, 0px, 0) scale(0.85);}
	89% {transform: translate3d(0, -6px, 0) scale(0.85);}
	96% {transform: translate3d(0, 65vh, 0) scale(0.85);}
	to {transform: translate3d(0, 60vh, 0) scale(0.85);}
}
@-webkit-keyframes backUp {
	10% { -webkit-transform: translate3d(0, 0px, 0) scale(0.85); }
	94% { -webkit-transform: translate3d(0, -61vh, 0) scale(0.85); }
	100% { -webkit-transform: translate3d(0, -56vh, 0) scale(0.85); }
}

@keyframes backUp {
	10% { transform: translate3d(0, 0px, 0) scale(0.85); }
	94% { transform: translate3d(0, -61vh, 0) scale(0.85); }
	to { transform: translate3d(0, -56vh, 0) scale(0.85); }
}



}
*/