/*ZOODOKU CLASSIC CSS*/
/*Coder: J.S.N. Email: mail@zoodoku.net */
/*Build: 1.0 Date: 27.6.2017*/
.z-overflow-h{
	overflow: hidden;
}

.square1{
	 background-image:linear-gradient(to bottom,rgba(255,159,63,0.2),rgba(255,159,63,0.8)),
                     url(../img/bonsai-desk-zoodoku.jpg);
    background-size:auto 100%;
    background-position:center top;
	}
.zoo-grid{
	background-repeat: no-repeat;
	opacity: 0.05;
	width: 70vw;
	height: 70vh;
	-webkit-filter: blur(15px);
-moz-filter: blur(15px);
-o-filter: blur(15px);
-ms-filter: blur(15px);
filter: blur(15px);


}
/*Body Einstellungen*/

.marginz1 {
	margin-top: 100px;
	max-width: 600px;
	margin: auto;
	text-align: center;
}


.blend {
  mix-blend-mode: screen;
}

.clip-me {
	-webkit-clip-path: url(#clip-z);
clip-path: url(#clip-z);
}
.clip-settings {
		  overflow: visible !important;
	position: inherit;
}
.carousel2 {
    position: relative;
}

.carousel-inner2 {
    position: relative;
    overflow: hidden;
}
.carousel-inner
  .carousel-item {
    opacity: 0;
    top: 0;
    left: 0;
    display: block;
    position: absolute;
    transition: opacity 1s ease-in-out;
	}

    first-of-type {
      position: relative;
    }
  .active {
    opacity: 1;
  }

.grid-gallery {
	display: grid;
}
body {
  padding: 0;
  margin: 0 auto;
  font-weight: 300;
	overflow-x: hidden;
	background: #fdfefe
}

  /*Header Einstellungen*/
header {
  list-style: none;
}

  /*Navigations-Elemente*/
a {
  text-decoration: none;
}

.z-link {
	color: black !important;
	text-decoration: none;
}

a:link, a:visited {
    color: darkgrey;
    text-decoration: none;
}

nav {
  font-family: "Segoe UI Light", "HelveticaNeue-Thin", "Helvetica", "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, "Trebuchet MS", sans-serif;
  color: darkgrey;
}

.header-zoo {
align-items: center;
margin: auto;
width: 100vw;
}

.header-bar {
  display: inline-flex;
  justify-content: space-between;
  width: 100%;
	position: fixed;
	opacity: 1;
	z-index: 1;

}

.top-nav {
  width: 6em;
  padding: 0;
}

nav,
  nav ul,
  nav li {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

nav li {
  display: inline-block;
}

nav .menu-link, nav span {
  display: inline-block;
  padding-top: 0.7em;
  text-decoration: none;
  font-weight: lighter;
  font-size: 1.4em;
  color: darkgrey;
  }

nav .menu-link:focus,
nav .menu-link:active {
  color: darkgrey;
	  text-decoration: none;

  }

nav .menu-link:hover {
    color: #99cc00;
	  text-decoration: none;

  }

nav .zoo:focus,
nav .zoo:active {
  opacity: 0.2;
	  text-decoration: none;

    }

nav .zoo:hover {
  opacity: 0.4;
	  text-decoration: none;

  }
	.drop-menu-button {
		transition: 1s ease;
		transition-delay: 2.4s;
	}


.drop-menu-button:hover {
	outline: #E1E1E1;
	outline-width: thin;
	outline-style: auto;
	width: inherit;
	background-color: #F0F0F0;
	transition: 1s ease;
	transition-delay: 0.4s;
	z-index: 1100;
}

@media screen and (max-width : 25.062em ){
    nav li {
    font-size: 1em;
    font-weight: normal;
    }
    nav ul {
      text-align: center;
      list-style: none;
      }

		  .header-bar {
  display: inline-flex;
  justify-content: space-between;
  width: 100%;
	position: relative;
	background-color: #FFFFFF;
}
    }

@media only screen and ( max-width : 22.625em ){
    nav li {
      display: block;
      font-size: 1em;
      font-weight: normal;
      margin: auto;
    }
    nav ul {
      text-align: center;
      list-style: none;
      }
  }

  /* Dropdown Gear */

.header-gear {
  align-self: flex-end;
	margin-right: 5vh;
	z-index: 999;

}

  .drop-icon {
		position: absolute;
	padding-top: 0.6em;
	padding-right: 0.5em;
	padding-left: 0.5em;
	padding-bottom: 0.4em;
	right: 12vw;
	margin-top: -1.8em;
	height: 2.4em;
	opacity: 0.2;
	text-decoration: none;
	color: lightgrey;
	transition: 0.5s ease;
	transition-delay: 0.4s;
	z-index: 1;
  }

  .drop-container {
      position: absolute;
      display: inline-block;
			transition: 0.5s ease;
			transition-delay: 0.4s;
  }

  .dropdown-box {
		overflow: hidden;
      background-color: #f9f9f9;
	  	position: relative;
      min-width: 12em;
	  	right: -20vw;
	  	top: 2.6em;
      border: 1px solid lightgrey;
      border-radius: 0.0em;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      font-size: 0.8em;
			transition: 1.5s ease;
			transition-delay: 0.8s;
			z-index: 12;
  }

  .dropdown-box a {
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      border-radius: 0em;
      color: gray;
  }

  /*   .dropdown-box  */

  .drop-container:hover .dropdown-box {
      display: block;
			transition: 0.5s ease;
			transition-delay: 0.4s;
			right: 8vw;
			z-index: 12;
  }

	.drop-container:hover + .dropdown-box {
			z-index: 11;
  }
  /* Icon hover
  .drop-container:hover .drop-icon {
      background-color: #3e8e41;
  }
  */

@media screen and (min-width: 50em) {
  .dropdown-box {
    position: relative;
	  max-width: 20vw;
    right: -10em;
	  top: 2.6em;
  }
		.text-center {
		padding-left: 15vw !important;
		padding-right: 15vw !important;
	}
}

@media screen and (min-width: 60em){
		.text-center {
		padding-left: 25vw !important;
		padding-right: 25vw !important;
	}
}

@media screen and (min-width: 22.625em) {
  .dropdown-box {
    position: relative;
	  max-width: 20vw;
    right: -10em;
	  top: 2.6em;

  }
}
  /*Seiten-Elemente+Formatierung*/

.overlay_z2 {
	background-image: linear-gradient(gray, lightgray, lightgray, grey);
	opacity: 0.6;
	background-attachment: scroll;
	width: 100vw;
	height: 100vh;
	z-index: 800;
	transition-delay: 0.4s;
	transition: 1s ease-in-out;
	position: absolute;
}

.overlay_z2:hover {
	background-image: linear-gradient(gray, lightgray, lightgray, grey);
	opacity: 0.1;
	background-blend-mode: screen;
	background-attachment: scroll;
	width: 100vw;
	height: 100vh;
	z-index: 1000;
	transition-delay: 0.4s;
	transition: 1s ease-in-out;
	position: absolute;
}

.carousel{
	overflow: hidden;
	z-index: 400;
	height: auto;
	width: auto;
}
.carousel2{
    width: 40em;
	height: 40em;
    overflow:hidden;
    z-index: 400;
}

.carousel-fade .carousel-item {
 opacity: 0;
 transition-duration: .6s;
 transition-property: opacity;
}

.carousel-fade  .carousel-item.active,
.carousel-fade  .carousel-item-next.carousel-item-left,
.carousel-fade  .carousel-item-prev.carousel-item-right {
  opacity: 1;
}

.carousel-fade .active.carousel-item-left,
.carousel-fade  .active.carousel-item-right {
 opacity: 0;
}

.carousel-fade  .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active,
.carousel-fade .active.carousel-item-left,
.carousel-fade  .active.carousel-item-prev {
 transform: translateX(0);
 transform: translate3d(0, 0, 0);
}

article {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

p {
  font-family: "Segoe UI Light", "HelveticaNeue-Thin", "Helvetica", "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, "Trebuchet MS", sans-serif;
  font-size: 1em;
}

h1 {
  font-family: "Segoe UI Light", "HelveticaNeue-Thin", "Helvetica", "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, "Trebuchet MS", sans-serif;
  font-size: 2.4em;
  font-weight: bold;
  color: black;
}

h2 {
  font-family: "Segoe UI Light", "HelveticaNeue-Thin", "Helvetica", "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, "Trebuchet MS", sans-serif;
  font-size: 3.4em;
}

h3 {
  font-family: "Segoe UI Light", "HelveticaNeue-Thin", "Helvetica", "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, "Trebuchet MS", sans-serif;
  font-size: 3.4em;
  font-weight: bold !important;
  color: black;
}

.justify-z {
	text-align: justify !important;
}

.z-shadow {
	box-shadow: 0px 2px 16px 0px rgba(0,0,0,0.05);
}
.z-shadow:hover {
	box-shadow: 0px 8px 24px 0px rgba(0,0,0,0.05);
	transition: 1s ease-in-out;
	transition-delay: 0.3s;
}

.tv {
	max-height: 600px;
	max-width: 60vw;

}

.tv-ant {
	transform: translate(0,-18vw);
	margin-bottom: -18vw;
}

.screen-z {
	z-index: 2;
	animation: screen-z-ani 6s infinite;
	animation-play-state: running;
	position: relative;
}

@keyframes screen-z-ani {
	0% { 	z-index: 3; opacity: 1}
	20% { z-index: 3; opacity: 1}
	21% { z-index: 1;}
	60% { z-index: 3;}
	61% { z-index: 1; opacity: 1}
	}

@media screen and (min-width:1000px) {
	.move-up {
		transform: translate(0,-8em);
		padding-bottom: 15em;
	}
}

.tv-frame {
	margin-top: 1em;
}

.tv-mask {
	z-index: 10;
	position:relative;
	margin-top: -39vw;
}

.white-shadow {
	box-shadow: 40px 40px 40px 20px white;
}

@media (min-width: 992px) {
	.tv-mask {
		z-index: 10;
		position:relative;
		margin-top: -29vw;
	}
}

@media  screen and (max-width: 45em)  {
.tv-ant {
	transform: translate(0,-32vw);
	margin-bottom: -32vw;
}
.tv-mask {
	z-index: 10;
	position:relative;
	margin-top: -26vw;
}
.ruler {
	position: relative;
	width: 70em;
	transition: 1.4s ease-in-out;
	transition-delay: 0.8s;
	transform: translate(-82vw);
}
}

@media  screen and (min-width: 90em)  {
.tv-ant {
	transform: translate(0,-18vw);
	margin-bottom: -18vw;
}
.tv-mask {
	z-index: 10;
	position:relative;
	margin-top: -28vw;
}
}

@media  screen and (min-width: 120em)  {
.tv-ant {
	transform: translate(0,-12vw);
	margin-bottom: -12vw;
}
.tv-mask {
	z-index: 10;
	position:relative;
	margin-top: -28vw;
}
}

@media  screen and (min-width: 180em)  {
.tv-ant {
	transform: translate(0,-2vw);
	margin-bottom: -2vw;
}
}

.zoom-z-square:hover {
	transform: scale(2,2);
}

.zoom-z1x {
	transition: 1s ease-in-out;
	transition-duration: 1s;
	transition-delay: 0.4s;

}
.zoom-z1x:hover{
	transition: 1s;
	transition-duration: 1s;
	transition: 1s ease-in-out;
	transition-duration: 1s;
	transition-delay: 0.4s;
	transform: scale(1.4,1.4);
	overflow:hidden;

}

.flex-item-p:hover{
	transition: 1s;
	transition-duration: 1s;
	transform: scale(1.2,1.2);
	transition: 1s ease-in-out;
	transition-duration: 1s;
	transition-delay: 0.4s;
	z-index: 9;
}

@keyframes flickerAnimation {
  0%   { opacity:1; }
  2%  { opacity:0.8; }
  4% { opacity:1; }
	25%  { opacity:1; }
	27%  { opacity:0.85; }
	30%  { opacity:1; }
	50%  { opacity:1; }
	53%  { opacity:0.9; }
	55%  { opacity:1; }
	58%  { opacity:1; }
	60%  { opacity:0.95; }
	70%  { opacity:1; }
}
@-o-keyframes flickerAnimation{
    0%   { opacity:1; }
  2%  { opacity:0.8; }
  4% { opacity:1; }
	25%  { opacity:1; }
	27%  { opacity:0.85; }
	30%  { opacity:1; }
	50%  { opacity:1; }
	53%  { opacity:0.9; }
	55%  { opacity:1; }
	58%  { opacity:1; }
	60%  { opacity:0.95; }
	70%  { opacity:1; }
}
@-moz-keyframes flickerAnimation{
    0%   { opacity:1; }
  2%  { opacity:0.8; }
  4% { opacity:1; }
	25%  { opacity:1; }
	27%  { opacity:0.85; }
	30%  { opacity:1; }
	50%  { opacity:1; }
	53%  { opacity:0.9; }
	55%  { opacity:1; }
	58%  { opacity:1; }
	60%  { opacity:0.95; }
	70%  { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
    0%   { opacity:1; }
  2%  { opacity:0.8; }
  4% { opacity:1; }
	25%  { opacity:1; }
	27%  { opacity:0.85; }
	30%  { opacity:1; }
	50%  { opacity:1; }
	53%  { opacity:0.9; }
	55%  { opacity:1; }
	58%  { opacity:1; }
	60%  { opacity:0.95; }
	70%  { opacity:1; }
}
.tv-mask:hover .animate-flicker{
   -webkit-animation: flickerAnimation 3.5s infinite;
   -moz-animation: flickerAnimation 3.5s infinite;
   -o-animation: flickerAnimation 3.5s infinite;
    animation: flickerAnimation 3.5s infinite;
}

@media(any-pointer: coarse) {
	.zoom-z1x:click .zoom-z1x:active{
	transition: 1s;
	transition-duration: 1s;
	transform: scale(2,2);
}
	.animate-flicker:active .animate-flicker:click {
   -webkit-animation: flickerAnimation 3.5s infinite;
   -moz-animation: flickerAnimation 3.5s infinite;
   -o-animation: flickerAnimation 3.5s infinite;
    animation: flickerAnimation 3.5s infinite;
}
	.vinyl:click .vinyl:active{
	-webkit-transform: rotate(1080deg);
          transform: rotate(1080deg);
}
}

.z-whiteframe {
	border: 4px solid white;
}
.z-whiteframe2 {
	border: 4px solid white;
}
.z-blackframe {
	border: 6px solid black;
}
.z-grayframe {
	border: 1px solid gray;
}

.stack {

}

.stackarea {
   position: absolute;
   z-index: 100;
}

.side-tab {
   position: absolute;
   z-index: 5;
}

.photostack-z {
	position: relative;
	transform-origin: center;
	transform: translate(fds px) rotate(3deg) ;
	z-index: 10;
	transition: 1s ease;
	transition-duration: 1s;;
	transition-delay: 6s;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	-webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

.photostack-z2 {
	position: absolute;
	right: 24vw;
	z-index: 9;
	transition: 1s;
	transition-duration: 1s;
	transition-delay: 2.4s;
	transform: rotate(-1deg);
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	-webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
		transform: scale(1,1) rotate(0deg) translate(0,0);
		transition: 1s;
}

.photostack-z3 {
	position: absolute;
	right: 29vw;
	z-index: 8;
	transition: 1s;
	transition-duration: 1s;
	transform: rotate(8deg);
	transition-delay: 1.8s;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	-webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

.photostack-z4 {
	position: absolute;
	right: 22vw;
	z-index: 7;
	transition: 1s;
	transition-duration: 1s;
	transition-delay: 1.2s;
	transform: rotate(2deg);
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	-webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

.photostack-z5 {
	position: absolute;
	right: 32vw;
	z-index: 6;
	transition: 1s;
	transition-duration: 1s;
	transition-delay: 0.8s;
	transform: translate(0px,0px) rotate(7deg);
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	-webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

	.photostack-z:hover {
		transition: 2s ease-in-out;
			transition-delay: 0.2s;
			transition-duration: 2s ease-in-out;
			transform: translate(40vw)scale(1.2,1.2) rotate(-4deg);

	}


	.photostack-z:hover + .photostack-z2 {
		right: 28vw;
		transition: 2s ease-in-out;
		transform: rotate(6deg);
			transition-delay: 0.2s;
			transition-duration: 2s ease-in-out;
	}

	.photostack-z:hover + .photostack-z3 {
		right: 18vw;
		transition: 2s ease-in-out;
		transform: rotate(6deg);
			transition-delay: 0.2s;
			transition-duration: 2s ease-in-out;
	}

	.photostack-z:hover + .photostack-z4 {
		transition: 1s ease-in-out;
		transform: rotate(-8deg);
			transition-delay: 0.2s;
			transition-duration: 2s ease-in-out;
			transform: translate(-300px, -200px);
	}

	.photostack-z3:hover {
		transition: 1s ease-in-out;
		transform: rotate(-4deg);
			transition-delay: 0.2s;
			transition-duration: 2s ease-in-out;
			transform: translate(-30vw) rotate(-3deg);
	}

	.photostack-z4:hover {
		transition: 1s ease-in-out;
		transform: rotate(-4deg);
			transition-delay: 0.2s;
			transition-duration: 2s ease-in-out;
			transform: translate(-20vw,-18vw) rotate(-18deg);
	}

	.photostack-z4:hover + .photostack-z2 {
		position: absolute;
		right: 28vw;
		z-index: 9;
		transition: 1s;
		transition-duration: 0.8s;
		transition-delay: 0.4s;
		transform: translate(100px,100px) rotate(-1deg);
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		-webkit-backface-visibility: hidden;
	    -moz-backface-visibility: hidden;
	    -ms-backface-visibility: hidden;
	    -o-backface-visibility: hidden;
	    backface-visibility: hidden;
	}


	.photostack-z3:hover + .photostack-z4 {
		transition: 1s ease-in-out;
		transform: rotate(-8deg);
			transition-delay: 0.2s;
			transition-duration: 2s ease-in-out;
			transform: translate(-100px, -60px) rotate(5deg);
	}

	.photostack-z3:hover  + .photostack-z2 {
		transition: 1s ease-in-out;
		transform: translate(-100px, -60px) rotate(-4deg);
			transition-delay: 0.5s;
			transition-duration: 1s ease-in-out;
	}

	.photostack-z5:hover {
		transition: 1s ease-in-out;
			transition-delay: 0.2s;
			transition-duration: 2s ease-in-out;
			transform: translate(-400px,-15px) rotate(-3deg);
	}

	.indexdelay:hover {
		animation: indexani 10s alternate;
	}

	@@keyframes indexani {
		0% {}
			10% {}
				20% {}
					30% {}
						40% {}
	}


	.photostack-z2:hover {
		transition: 1s ease-in-out;
		transform: rotate(-4deg);
			transition-delay: 0.2s;
			transition-duration: 2s ease-in-out;
			transform: translate(20vw,12vw) rotate(3deg);
	}

.a7w {
	position: relative;
	top: 300px;
}

	.a7ani {
		transition: 2s;
		transition-delay: 0.2s;
	}

	.a7ani-out {
		position: relative;
		opacity: 1;
		right: 2vw;
		transform: scale(1.6,1.6) translate(20px,-15px);
		transition: 1.2s ease-in-out;
		transition-delay: 1.2s;
		margin-top: -25em;
		clip-path: inset(0px 0px 0px 0px);
		box-shadow: 180px 180px 180px 180px rgba(255,255,255,0.9);
	}

	@media screen and (max-width:1400px){
.a7ani-out {
		margin-top: -15em;
		transform: scale(1.6,1.6) translate(20px,-45px);
	}
	}

	@media screen and (max-width:830px){
.a7ani-out {
		margin-top: -15em;
		transform: scale(1.6,1.6) translate(20px,-20px);
	}
	}

	@media screen and (max-width:670px){
.a7ani-out {
		margin-top: -15em;
		transition: 1.2s ease-in-out;
		transition-delay: 1.2s;
		transform: scale(1.6,1.6) translate(20px,5px);
	}
	}

.a7ani-out:hover {
clip-path: inset(250px 0px 0px 0px);
transition: 1.3s ease-in-out;
transition-delay: 0.2s;
opacity: 0.0;
transform: scale(1.6,1.6) translate(20px,150px);

}


.a7ani:hover {
	transition: 1s ease-in-out;
		transition-delay: 0.2s;
		opacity: 1;
		transform: scale(1,1) rotate(0deg) translate(0vw,-20px);
		transition: 0.3s ease-in-out;
		transition-delay: 0.3s;
}


.image-scatter-z:hover + .photostack-z2 {
	position: absolute;
	right: 40vw;
	top:10vw;
	z-index: 9;
	transition: 1s;
	transition-duration: 1s;
	transition-delay: 0.4s;
	transform: rotate(-1deg);
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		-o-backface-visibility: hidden;
		backface-visibility: hidden;
	transform: scale(0.3,0.3) rotate(-4deg) translate(30vw,20vh);
	transition: 1s;
}


.desk-0 {
		transition: .5s all ease;
		animation: entry 1s linear 1;
		z-index: 9;
		right: 18vw;
		transition: 1s;
		transition-duration: 1s;
		transition-delay: 1.2s;
}

.desk-0:hover {
	cursor: pointer;
	transition: .5s all ease;
	z-index: 400;
}


.z-width-30vw {
	width: 60vw;
	max-width: 60vw;
}
.z-width-15vw {
	width: 40vw;
	max-width: 40vw;
}


@media (min-width: 992px) {
	.z-width-30vw {
	width: 30vw;
	max-width: 30vw;
}
.z-width-15vw {
	width: 20vw;
	max-width: 20vw;
}
.tv {
	max-height: 600px;
	max-width: 60vw;
}


	.z-whiteframe {
	border: 15px solid white;
}
}
.zoo {
  padding: 0.2em;
  padding-top: 0.6em;
  height: 2.2em;
  opacity: 0.2;
  text-decoration: none;
  color: lightgrey;
}
.border-thin {
	border: thin;
	border: #D3D3D3;
	border: solid;
	border-width: thin;
}

/*Seiten-Elemente-Intro Message*/
.car-section {
	height: 100vh;
}

.start {
  padding-left: 4.4em;
  color: Gainsboro;
}

@media screen and (max-width: 50em) {
    .start {
      display: block;
      margin: auto;
      padding-top: 1em;
      padding-left: 0;
      padding-bottom: 3em;
      text-align: center;
      white-space: nowrap;
    }
	.carousel{
    -moz-border-radius: 0.0em; /* FF1+ */
    -webkit-border-radius: 0.0em; /* Saf3-4, iOS 1+, Android 1.5+ */
    border-radius: 0.0px; /* Opera 10.5, IE9, Saf5, Chrome, FF4 */
    overflow:hidden;
    z-index: 400;
	}

  }

.carousel {
	max-width: 559px;
	max-height: 559px;
	margin: auto;
}
.carousel-grid-z {
	maxwidth: 600px;
	max-height: 600px;
}

/*Seiten-Elemente-ContainerApps*/
.zoo-bar {
	background-color: rgba(197,197,197,1.00);
	width: 100%;
}
.zoo-bar-bot {
	background-color: rgba(95,95,95,0.90);
	width: 100%;
}
.zoo-display {
	background-image: url(../img/pics/trl-olympus-flex.jpg);
	background-image: cover;
	text-shadow: 1;
	height: 100vh;
	width: 100%;
}

.vinyl {
	border-radius: 50% ease-in-out;
	-webkit-transform: rotate(-1080deg)scale(1,1);
	          transform: rotate(-1080deg) scale(1,1);
  -webkit-transition: -webkit-transform 9.8s ease-in-out;
          transition:         transform 9.8s ease-in-out;
	transition-delay: 0.5s;
	margin-top: -3em;

}

.vinyl-rotation {

}

.vinyl:hover {
	-webkit-transform: rotate(1080deg)scale(1,4);
											transform: rotate(1080deg)scale(1.4,1.4);
}

@keyframes vinyl-rotation {
	0% {
					}
	100% {
										}
}

.pad1{
	padding: 10%;
}
.zoo-type1 {
	color: rgba(255,255,255,1.00);
	font-family: "Segoe UI Light", "HelveticaNeue-Thin", "Helvetica", "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, "Trebuchet MS", sans-serif;
	font-weight: 100;
	font-size: 2em;
	text-align: center;
	padding: 2em;
}
.space-type-z {
	letter-spacing: 0.05em;
}
.zoo-type-gray
{
    color: #252424;
    font-family: "Segoe UI Light", "HelveticaNeue-Thin", "Helvetica", "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, "Trebuchet MS", sans-serif;
    font-shadow: 1px black;
    text-shadow: 1px 1px 0px #D1D0D0;
    text-align: center;
    padding: 2em;

}

.z-space {
		letter-spacing: 0.15em;
}

.zoo-type3
{
    color: #3B3B3B;
    font-family: "Segoe UI Light", "HelveticaNeue-Thin", "Helvetica", "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, "Trebuchet MS", sans-serif;
    font-shadow: 1px black;
    text-shadow: 1px 1px 0px #E0E0E0;
    font-weight: 100;
    text-align: center;
    padding-left: 2em;
    padding-right: 2em;
	letter-spacing: 0.05em;
}

.zoo-type2 {
	color: rgba(255,255,255,1.00);
	font-family: "Segoe UI Light", "HelveticaNeue-Thin", "Helvetica", "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, "Trebuchet MS", sans-serif;
	font-shadow: 1px black;
	text-shadow: 1px 1px 4px #838383;
	font-weight: 100;
	text-align: center;
		padding-left: 2em;
	padding-right: 2em;
}

.pad-z {
    padding: 2em;
}
.pad-zt {
	padding-top: 2em;
	padding-left: 2em;
	padding-right: 2em;
}
.pad-xz {
	padding:0.8em;
		padding-left: 2em;
	padding-right: 2em;
}

.sud-grid {
	width: 16em;
	height: 16em;
	border:0 solid hidden;
	position: relative;
	top: 16.8em;
	left: 5em;
	margin-bottom: -15em;
	z-index: 900;
	transform-origin: top;
	transform: scale(1.15,1.2) rotate(-0.5deg) translate(1.78em);
	font-family: "Bradley Hand", bradley, cursive;
	border: none;
}

td {
	border: none;
}

table { table-layout: fixed;   overflow: hidden;
   white-space: nowrap;}

.sud-tab {
	border:0px solid;
}

#sudoku-table td {
	height:2em;
	width:2em;
	border:0 solid hidden;
}

.sudoku{
	transition: 1s;
	transition-duration: 3s;
	transition-delay: 4s;
	transform: scale(0.6,0.6) rotate(-1deg) translate(0,-4em);
	width: 50vw;
	z-index: 888;
	padding-top: 2em;
	margin-top: -11em !important;
	margin-bottom: -11em !important;
		mix-blend-mode: darken;

}
.sudoku:hover {
	transition-duration: 1s ease-in-out;
	transition-delay: 0.3s;
	transform: scale(1.1,1.1) rotate(3deg);
	mix-blend-mode: darken;
}
@media (min-width: 992px) {
.sudoku {
	margin: auto;
	width: 50vw;
	transition: 1s;
	transition-duration: 1s;
	transition-delay: 2s;
	}
	.sudoku:hover{
	transition-duration: 1s ease-in-out;
	transition-delay: 0.3s;
	transform: scale(1.0,1.0) rotate(3deg);
	}
}

.portfolio {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin: auto;
	padding-bottom: 4%;
	max-width: 60em;
	background-color: white;
	padding-top: 6em;
	padding-left: 5vw;
	padding-right: 5vw;
	transform: translate(-2.4em,0);
}


.portfolio-1 {
    background-image: url(../img/p1.jpg);
		  background-repeat: no-repeat;
  background-size: auto;
}
.portfolio-2 {
    background-image: url(../img/p2.jpg);
		  background-repeat: no-repeat;
  background-size: auto;
}
.portfolio-3 {
    background-image: url(../img/p3.jpg);
		  background-repeat: no-repeat;
  background-size: auto;
}
.portfolio-4 {
    background-image: url(../img/p4.jpg);
		  background-repeat: no-repeat;
  background-size: auto;
}
.portfolio-5 {
    background-image: url(../img/p5.jpg);
		  background-repeat: no-repeat;
  background-size: auto;
}
.portfolio-6 {
    background-image: url(../img/p6.jpg);
		  background-repeat: no-repeat;
  background-size: auto;
}
.portfolio-7 {
    background-image: url(../img/p7.jpg);
		  background-repeat: no-repeat;
  background-size: auto;
}
.portfolio-8 {
    background-image: url(../img/p8.jpg)
}
.portfolio-9 {
    background-image: url(../img/p9.jpg);
		  background-repeat: no-repeat;
  background-size: auto;
}

/** TERMINAL **/

.download-area pre {
	background-color: rgba(0,0,0,0) !important;
	border: 0px;
	outline-width: 0px !important;
	outline-color: rgba(10, 10, 12, 0.0);
	border-radius: 0px;
}

.download-area pre:focus {
	background-color: rgba(0,0,0,0) !important;
	border: 0px !important;
	outline-width: 0px !important;

}

.download-area{
	padding-top: 15vh;
	padding-bottom: 15vh;
}

.terminal {
	background-color: rgba(10, 10, 12, 0.8);
	width: 60vw;
	margin: auto;
	border-radius: 0.3em;
	border-top: 1.3em solid gray;
	border-top: 1.2em solid lightgray;
	box-shadow: 0px 20px 20px 20px rgba(0,0,0,0.06);
}

@media screen and (max-width:700px) {
	.terminal {
		width: 80vw;
		transition: 1s ease-in-out;
		transition-delay: 0.4s;
	}
}

h1 {
  font-size: 2.4em;
 
}

	.matrix {
	clip-path: inset(2px 2px 400px 5px);
	animation: matrix-code 16s infinite ease-out;
	animation-delay: 4s;
}

@keyframes matrix-code {
	0%		{	clip-path: inset(2px 2px 400px 5px);}
	17%		{	clip-path: inset(2px 2px 2px 5px);}
	18%		{	clip-path: inset(2px 2px 2px 5px);}
	100%		{	clip-path: inset(2px 2px 2px 5px);}


}

.cmd-screen {
	margin-top:-3.6em;
	transition: 1s ease-in-out;
	transition-delay: 0.4s;
}

@media screen and (min-width:900px) {
	.terminal{
	width: 30vw;
	transition: 0.5s ease;
	transition-delay: 0.4s;
}
.commandline-frame{

}
}

pre .fig {
	text-indent: 0.6em;
}
pre p {
	text-indent: 0.6em;
}
pre {
	text-indent: 0.6em;
}

.terminal-title {
	position: relative;
	text-align: center;
	margin: auto;
	top:-3em;
	font-size: 0.8em;
}
.terminal-button1 {
	position: relative;
	text-align: left;
	top:-1.1em;
	font-size: 1.2em;
	margin-bottom: -1.4em;
	padding-left: 0.2em;
	font-size: 1.2em;
	color: darkgrey;
	border: 1px solid rgba(10, 10, 12, 0.2);
	border-top-left-radius: 0.3em;
	border-top-right-radius: 0.3em;
}

.commandline-frame {
	padding-top: 0.5em;
	margin:auto;
	padding-bottom: 1em;
}

.cmd-text1 {
	color: lightgray;
	font-family: "Courier New", Courier, monospace;
	padding: 0 !important;
	line-height: 1.2;
	margin-bottom: -0.2em;
	text-indent: 0.6em;
}
.cmd-text2 {
	color: lightgray;
	font-family: "Courier New", Courier, monospace;
	font-weight: bold;
	padding: 0 !important;
	line-height: 1.2;
	margin-bottom: -0.2em;
	text-indent: 0.6em;
}

.cmd-jpg:hover{
	color: rgba(100,120,140,1);
}

.cmd-pdf:hover{
	color: rgba(200,160,110,1);
}

.cmd-zip:hover{
	color: rgba(100,140,130,1);
}

.cmd-bold {
	font-weight: bold;
}

/** LIGHTBOX MARKUP **/

.lightbox {
	/** Default lightbox to hidden */
	display: none;

	/** Position and style */
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.7);
	blur(8px);
	vertical-align: middle;
}

a:hover, p, p:hover{
	cursor: default;
	text-decoration: none;
}

.lightbox img {
	/** Pad the lightbox image */
	max-width: 90%;
	max-height: 80%;
	margin-top: 6%;
}

.lightbox:target {
	/** Remove default browser outline */
	outline: none;

	/** Unhide lightbox **/
	display: block;
}

.milk-css {
	z-index: 11;
	position: relative;
	left: 2em;
	transition: 0.6s ease-in-out;
	transition-delay: 1.2s;
}

.milk-css:hover {
	transition: 0.5s ease-in-out;
	transition-delay: 0.2s;
	transform-origin: top left;
	transform: translate(15vw,-4vw) scale(1.3,1.3);
}

.code-bg {
	width: 100vw;
	position: relative;
	z-index: 0;
	opacity: 0.1;
	margin-top: -10em;
	transition: 1s ease-in-out;
	transition-delay: 0.2s;
	margin-bottom: -10vw;
	margin-top: -10vw;
}


.code-bg:hover {
	transform: translate(0,-20vw);
	transition: 1s ease-in-out;
	transition-delay: 0.2s;
	opacity: 0.6;
}

.milk-box-margin {
position: relative;
top: -14em;
margin-bottom: -6em;
}

.milk-text-1 {
	margin: 0;
	width: 30vw;
	position: relative;
	left: 50vw;
	top: -35vh;
	font-size: 1em;
	z-index: 2;
}

.milk-text-2 {
	margin: 0;
	width: 30vw;
	position: relative;
	left: 50vw;
	top: -25vh;
	font-size: 1em;
	letter-spacing: 0.8;
	font-weight: bold;
	font-style: normal;
	z-index: 2;
}

.zoo-type-m {
	color: rgba(168, 195, 77, 1);
	font-family: Georgia, serif;
	text-align: left;
	font-size: 1.8em;
	font-weight: bold;
	position: relative;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	transition: 0.3s ease-in-out;
	transition-delay: 0.2s;
}

.zoo-type-m:hover {
		transform: translate(-1em);
		transition: 0.3s ease-in-out;
		transition-delay: 0.2s;
}

.zoo-type-m2 {
	text-align: left;
	font-size: 1.5em;
	font-style: ;
	position: relative;
	transition: 0.3s ease-in-out;
	transition-delay: 0.2s;
}

.zoo-type-m2:hover {
		transform: translate(-1em);
		transition: 0.3s ease-in-out;
		transition-delay: 0.2s;
}

.zoo-type-m3 {
	text-align: left;
	font-size: 0.6em;
	font-style: ;
	position: relative;
}

.milk-box-move {
		position: relative;
		top: 2em;
		width: 80vw;
		left: 10vw;
		transition: 1s ease-in-out;
		transition-delay: 1.8s;
		z-index: 3;
		opacity: 0.02;
		margin-bottom: -10vw;
		margin-top: -10vw;
}

.milk-box-move:hover {
		transform: translate(-40vw);
		transition: 1s ease-in-out;
		transition-delay: 0.2s;
		opacity: 0.98;

}

@media screen and (max-width:965px) {
	.milk-box-move:hover {
		transform: translate(-20vw);
	}
}

@media screen and (max-width:965px) {
	.milk-box-move:hover {
		transform: translate(-10vw);
	}
}

.mile-z {
	width: 70vw;
	margin-bottom: -2em;
}

.mac_icon_p {
	position: relative;
	top: -12em;
	max-width: 300px;
	width: 300px;
	margin: auto;
	margin-bottom: -12em;
	left: -5em;
	transition: 1s ease-in-out;
	transition-delay: 0.4s;
	z-index: 9;
}

.mac_icon_p:hover{
	position: relative;
	top: -12em;
	max-width: 300px;
	width: 300px;
	margin: auto;
	margin-bottom: -12em;
	left: -5em;
	transform: translate(5em) scale(1.5,1.5);
	transition: 1s ease-in-out;
	transition-delay: 0.4s;
}

.ruler {
	position: relative;
	width: 70em;
	transition: 1.4s ease-in-out;
	transition-delay: 0.8s;
	transform: translate(-40vw);
	z-index: 9;
}

.ruler-ani-slide {
	animation: rz-slide 12s infinite alternate;
}

.ruler:hover {
	transition: 2.8s ease-in-out;
	transform: translate(30vw);
}

@keyframes rz-slide {
	0% {}
	0% {}
	0% {}
	0% {}
	0% {}
}

.profile3d {
	perspective: 1000;
	transition: 1s ease-in-out;
	transition-delay: 0.4s;
	z-index: 0;
}

.profile3d:hover {
	perspective: 600;
	transition: 1s ease-in-out;
	transition-delay: 0.4s;
	transform: translate(-5vw);
}


.profile-photo1 {
	width: 40vw;
	margin-left: 40vw;
	transition: 1s ease-in-out;
	transition-delay: 0.4s;
}

@media screen and (max-width:1000px) {
	.profile-photo1 {
		width: 100vw;
		margin-left: 0vw;
	}
}

@media screen and (min-width:1000px) {
	.profile3d {
		margin-top: -50vw;
}

.profile-photo1{
	transform: rotateX(0deg) rotateY(6deg) rotateZ(2deg) translate(55vw,-4em) scale(0.8,0.8);
	border: 1em solid white;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	transition-delay: 1.8s;
}

.profile-photo1:hover {
	margin-left: 30vw;
	transform-style: preserve-3d;
	transform: rotateX(-12deg) rotateY(0deg) rotateZ(3deg) translate(0,-4em) scale(1.0,1.0);
	transition: 0.8s ease-in-out;
	transition-delay: 0.1s;
	box-shadow: 0px 16px 32px 0px rgba(0,0,0,0.08);
}
}

.flex-item-p {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 100%;
	min-width: 10em;
	min-height: 10em;
	margin-bottom: 8%;
	border: 1px solid #efefef;
	border-radius: 1em;
	transition: 0,6s ease-in-out;
	transition-duration: 0.6s;
	position: relative;
	left: -2.5em;
		transform: scale(0.5,0.5);
}
.flex-item-p:hover {
    box-shadow: 0 0 8px lightgrey;
    border: 1px solid #B0B0B0;
	transition: 0.6s;
	transition-duration: 0.6s ease-in-out;
}

.flex-item-text2 {
  text-align: center;
  max-width: calc(100% - 2em);
  color: white;
  font-size: 1.2em;
	font-shadow: 4px white;
    text-shadow: 1px 1px 0px #000000; blur-radius:3;

}
.flex-item-info2:hover {
	text-decoration: none;
	font-shadow: 0;
    text-shadow: 0;
	opacity: 1;
	transition: 0,6s;
	transition-duration: 0.6s;
}
.flex-item-info2 a{
text-decoration: none;
transition: 0,6s;
	transition-duration: 0.6s;

}

a:hover, a:visited, a:link, a:active
{
    text-decoration: none !important;
	transition: 0,6s;
}

.flex-item-info2 {
	text-align: center;
	color: white;
	font-shadow: 12px black;
    text-shadow: 0px 0px 8px #000000, 0px 0px 4px #000000,0px 0px 8px #000000, 0px 0px 32px black, 0px 0px 64px black; blur-radius:0.8;
	font-size: 2em;
	font-weight: normal;
	padding: 0.3em 1em;
	width: 100%;
	margin-bottom: 1.2em;
	opacity: 0;
	transition: 0,6s;
}

.apps {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin: auto;
	padding-bottom: 4%;
	max-width: 77em;
	background-color: white;
	padding-top: 6em;
}

.flex-container {
  -webkit-flex-flow: row wrap;
-webkit-justify-content: space-between;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: auto;
  padding: 1em;
  margin-left: auto;
  margin-right: auto;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;

  -ms-flex-preferred-size: 0;
      -webkit-flex-basis: 318px;
    flex-basis: 318px;
}

.flex-container_mini {
  -webkit-flex-flow: row wrap;
-webkit-justify-content: space-between;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: auto;
  padding: 1em;
  margin-left: auto;
  margin-right: auto;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;

  -ms-flex-preferred-size: 0;

}

.flex-container-width_mini {
    max-width: 0em;
}

.flex-item_mini {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	min-width: 15em;
	min-height: 15em;
	height: 15em;
	margin-bottom: 8%;
	border: 1px solid #efefef;
	border-radius: 1em;
}

.flex-object {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;

  border: 1px;
  border-color: #efefef;
  border-radius: 1em;
  overflow: hidden;
}

.flex-item {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	width: 100%;
	min-width: 15em;
	min-height: 15em;
	height: 19em;
	margin-bottom: 8%;
	border: 1px solid #efefef;
	border-radius: 1em;
}

.flex-item-icon {
	font-size: 2em;
	margin: auto;
	margin-top: 2em;
	width: 4em;
	height: 4em;
	opacity: 0.6;
  /*margin-top: 2em*/
}
.flex-item-icon2 {
	font-size: 2em;
	margin: auto;
	margin-top: 2em;
	width: 4em;
	height: 4em;
	opacity: 0.0;
  /*margin-top: 2em*/
}
.flex-item-text {
  text-align: center;
  max-width: calc(100% - 2em);
  color: black;
  font-size: 1.2em;
}

.flex-item-info {
	text-align: center;
	color: darkgrey;
	font-size: 0.8em;
	font-weight: normal;
	padding: 0.3em 1em;
	border-top: 1px solid white;
	width: 100%;
	margin-bottom: 1.2em;
}

.flex-container-width {
	max-width: 30em;
}

@media screen (max-width: 65em) {
	.flex-container {
		max-width: 22em;
	}
	.flex-container-width {
		max-width: 25em;
	}
	.flex-item-icon{
		width: 2.3em;
	height: 2.5em;
	}
	.flex-item {
		height: 15em;
	}
}

.app-button {
  text-decoration: none;
}

/*Article-Container*/
.video-bg {
	  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.video-screen video {
  /* Make video to at least 100% wide and tall */
  min-width: 100%;
  min-height: 100%;

  /* Setting width & height to auto prevents the browser from stretching or squishing the video */
  width: auto;
  height: auto;

  /* Center the video */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.scroll-down {
  opacity: 1;
  -webkit-transition: all .5s ease-in 3s;
  transition: all .5s ease-in 3s;
}

.scroll-down {
	position: absolute;
	bottom: 30px;
	left: 50%;
	margin-left: -16px;
	display: block;
	width: 32px;
	height: 32px;
	border: 2px solid #FFF;
	background-size: 14px auto;
	border-radius: 50%;
	z-index: 1190;
	-webkit-animation: bounce 2s infinite 2s;
	animation: bounce 2s infinite 2s;
	-webkit-transition: all .2s ease-in;
	transition: all .2s ease-in;
}

.scroll-down:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 12px;
    height: 12px;
    content: "";
    border: 2px solid white;
    border-width: 0px 0 2px 2px;
}

@keyframes bounce {
  0%,
  100%,
  20%,
  50%,
  80% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  60% {
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}
.scroll-down2:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 12px;
    height: 12px;
    content: "";
    border: 2px solid lightgray;
    border-width: 0px 0 2px 2px;
}

.scroll-down2 {
	position: relative;
	display: block;
	width: 32px;
	height: 32px;
	border: 2px solid lightgray;
	background-size: 14px auto;
	border-radius: 50%;
	z-index: 1190;
	-webkit-animation: bounce 2s infinite 2s;
	animation: bounce 2s infinite 2s;
	-webkit-transition: all .2s ease-in;
	transition: all .2s ease-in;
	margin: auto;
}

.black-bg {
	background-color: #070707;
	transition: 0.5s;
	transition-duration: 0.5s;
}

.intro {
  position: relative;
  height: 100vh;
  overflow: hidden;
}


}

.article-container {
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: auto;
	max-width: 72em;
	height: auto;
	background-color: white;
}

.article-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  min-height: 35em;
  margin: auto;
  border: 0.1em solid #efefef;
  border-radius: 1em;
  background-color: black;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

}

@media screen and (max-width: 55em) {
  .article-box {
  width: 94%;
  margin: auto;
  }
}

@media screen and (max-width: 50em) {
  .article-box {
  width: 90%;
  min-height: 18em;
  max-height: 32em;
  height: 28em;
  margin: auto;
  }
	.ruler {
		position: relative;
		width: 70em;
		transition: 1.4s ease-in-out;
		transition-delay: 0.8s;
		transform: translate(-85vw);
		z-index: 9;
	}
}

@media screen and ( max-width : 22.625em ){
  .article-box {
  width: 15.9em;
  max-height: 22em;
  margin: auto;
  }
}

.article-topic {
  justify-content: space-between;
  align-content: flex-start;
  display: inline-flex;
  flex: auto;

}

.article-item {
  font-size: 0.7em;
  color: lightgrey;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  max-width: 12em;
  margin: 0;
  border-radius: 0.4em;
  background-color: rgba(0,0,0,0.5);
  margin-left: 1em;
  margin-top: 1em;
  padding: 2em;

}


.article-image {
  position: relative;
  top: 10em;
  margin: auto;
  height: 10em;
  width: 10em;
  opacity: 0.6;
}

.article-text {
word-wrap: normal;
}

.article-info {
  text-align: center;
  color: darkgrey;
  font-size: 1.2em;
  border-top: 1px solid white;
  padding-top: 0.8em;
  width: 100%;
  height: 3em;
  background-color: rgba(255,255,255,1);
  border-bottom-right-radius: 0.8em;
  border-bottom-left-radius: 0.8em;
  margin-bottom: 0;
}

@media screen and (max-width: 50em){
  .article-item {
    min-height: 2em;
    padding: 0.4em;
    font-size: 0.6em;

  }
  .article-info {
      font-size: 0.9em;

  }
  .article-image {
    position: relative;
    top: 1.8em;
    margin: auto;
    height: 6em;
    width: 6em;
    opacity: 0.6;
  }
}


@media screen and ( max-width : 22.625em ){
  .article-item {
    padding: 0.6em;
    font-size: 0.7em;
    position: relative;
    top: -7em;
    left: 3.6em;
    background-color: rgba(222,222,222,0.2);
    color: grey;
  }
  .article-info {
      font-size: 0.7em;
  }
  .article-image {
    position: relative;
    top: 3em;
    margin: auto;
    height: 8em;
    width: 8em;
    opacity: 0.6;
  }
}

/*Intro-Container*/

.intro-container {
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: auto;
  padding-bottom: 12em;
  max-width: 52em;
}

.intro-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  min-height: 35em;
  height: auto;
  margin: auto;
  border: 0.1em solid #efefef;
  border-radius: 1em;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

@media screen and (max-width: 55em) {
  .intro-box {
  width: 94%;
  min-height: 18em;
  margin: auto;
  }
}

@media screen and (max-width: 50em) {
  .intro-box {
  width: 90%;
  min-height: 18em;
  margin: auto;
  }
}

@media screen and ( max-width : 22.625em ){
  .intro-box {
  width: 15.9em;
  max-height: 16em;
  margin: auto;
  }
}

.intro-topic {
  justify-content: center;
  align-content: flex-start;
  display: inline-flex;
  flex: auto;

}

.intro-item {
  color: grey;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  padding: 0em;
  font-size: 2.5em;
  font-weight: lighter;
  text-align: center;
  align-content: center;
  padding-top: 6em;

}
span a .intro-item{
  font-weight: lighter;
}

.intro-image {
  position: relative;
  top: 13.5em;
  margin: auto;
  width: 8em;
  opacity: 0.35;
}

.intro-text {
word-wrap: normal;
}

.intro-info {
  text-align: center;
  color: darkgrey;
  font-weight: lighter;
  font-size: 1.5em;
  padding-top: 0.3em;
  width: 100%;
  height: 2em;
  margin-bottom: 0;
}

@media screen and (max-width: 50em){
  .intro-item {
    min-height: 2em;
    padding: 0em;
    font-size: 2em;
    padding-top: 3em;
    }
  .intro-info {
      font-size: 0.9em;

  }
  .intro-image {
    position: relative;
    top: 3.6em;
    margin: auto;
    height: 12em;
    width: 12em;
    opacity: 0.4;
  }
}


@media screen and ( max-width : 22.625em ){
  .intro-item {
    padding: 0.4em;
    font-size: 1em;
    padding-top: 2em;
    font-weight: bold;

  }
  .intro-info {
      font-size: 0.6em;

  }
  .intro-image {
    position: relative;
    top: 3em;
    margin: auto;
    height: 8em;
    width: 8em;
    opacity: 0.6;
  }
}

.next-section {
	position: relative;
	align-self: center;
	opacity: 0.5;
	}

/*Footer*/

footer {
  width: 100%;
  background-image: linear-gradient(0deg, lightgrey, #efefef);
  border-top: 1px solid lightgrey;
  opacity: 0.95;
  margin: auto;
}

.footer-text {
  display: inline-flex;
  text-decoration: none;
  color: grey;
  font-size: 0.9em;
  font-weight: lighter;
  font-family: "Segoe UI Light", "HelveticaNeue-Thin", "Helvetica", "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, "Trebuchet MS", sans-serif;
  white-space: nowrap;
  text-align: left;
}

.footer-li {
    white-space: nowrap;
    padding-left: 1em;
    padding-right: 1em;
}
@media screen and (min-width: 40em){
	.footer-text {
		font-size: 1em;
	}
}

@media screen and (max-width: 50em) {
  footer {
    overflow-x: hidden;
    text-align: center;
    padding-bottom: 0.5em;
    }
  .footer-text {
    margin-left: 0em;
  }
}
@media screen and ( max-width : 22.625em ){
  .footer-text {
    overflow-x: hidden;
    text-align: center;
    margin: 0.6em;
	z-index: 777;
    }
	


}

.tooltip-z {
	height: 4em;
}

.social-bar {
  display: flex;
  justify-content: center;
  padding-top: 2em;
  height: 10em;
  }

.social-icons {
padding: 0.2em;
width: 32px;
height: 32px;
opacity: 0.5;
	text-decoration: none;
	outline: hidden;
		transition: 1s;
	transition-duration: 1s;
	transition-delay: 0.3s;
}
.social-icons:focus,
.social-icons:active {
  opacity: 0.2;
    }

.social-icons:hover {
  opacity: 0.4;
	transition: 1s;
	transition-duration: 1s;
	transition-delay: 0.1s;
	width: 64px;
	height: 64px;
  }
suare4 {
	-webkit-transition: all 3s ease 2s;
	-o-transition: all 3s ease 2s;
	transition: all 3s ease 2s;
}
suare4:active {
	-webkit-opacity: 0;
	opacity: 0;
}
suare5 {
	-webkit-transition: all 2s ease 0.2s;
	-o-transition: all 2s ease 0.2s;
	transition: all 2s ease 0.2s;
}
suare5:active {
	top: 20px;
}

.space3d {
	position: relative;
	margin: auto;
	max-width: 40vw;
	margin-top: -100px;
	margin-bottom: -50px;
	perspective: 2000;
	transition: 1s ease-in-out;
	transition-delay: 0.4s;
}

.space3d:hover {
	perspective: 400;
	transition: 1s ease-in-out;
	transition-delay: 0.4s;
}


[draggable=true] {
	cursor: move;
}

.resizable {
	overflow: scroll;
	resize: both;
	max-width: 800px;
	max-height: 660px;
}

.bon-z {
	transform-style: preserve-3d;
	transform: rotateX(25deg) rotateY(8deg) rotateZ(8deg) scale(0.8,0.8);
	transition-delay: 1.4s;
	border: none;

}

.bon-z:hover {
	transform-style: preserve-3d;
	transform: rotateX(0deg) rotateY(-3deg) rotateZ(3deg) scale(1.6,1.6);
	transition: 1s ease-in-out;
	transition-delay: 0.4s;
}

.e1 {
	animation: bounce-bar 2s infinite alternate;
	animation-play-state: running;
}

@keyframes bounce-bar {
	0%		{transform: translate(0,-1em);}
	25%		{transform: translate(0,1em);}
	50%		{transform: translate(0,-1em);}
	75%		{transform: translate(0,1em);}
	100%	{transform: translate(0,-1em);}
}


h5 {
	font-size: 0.8em !important;
}