.hide768b {
	display: none;
}

html,
body {
	height: 100%;
	margin: 0;
}
body {
	font-family: Verdana, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
	color: #646464;
	background-color: #000;
	position: relative;
	overflow: hidden;
}
.no-focus *:focus {
	outline: 0 !important;
}
a {
	color: #5c90d2;
	-webkit-transition: color 0.12s ease-out;
	transition: color 0.12s ease-out;
}
a.link-effect {
	position: relative;
}
a.link-effect:before {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	content: "";
	background-color: #3169b1;
	visibility: hidden;
	-webkit-transform: scaleX(0);
	-ms-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transition: -webkit-transform 0.12s ease-out;
	transition: transform 0.12s ease-out;
}
a:hover,
a:focus {
	color: #3169b1;
	text-decoration: none;
}
a:hover.link-effect:before,
a:focus.link-effect:before {
	visibility: visible;
	-webkit-transform: scaleX(1);
	-ms-transform: scaleX(1);
	transform: scaleX(1);
}
a:active {
	color: #5c90d2;
}
a.inactive {
	cursor: not-allowed;
}
a.inactive:focus {
	background-color: transparent !important;
}

.hideMe {
	display: none;
}
.nowrap {
	white-space: nowrap;
}

#page-container {
	position: relative;
	width: 100%;
	height: 1440px;
	top: 0;
}

.legal-policy-container {
	width: 100%;
	height: 100%;
	background-color: #fff;
	padding: 3rem;
	box-sizing: border-box;
}

/* LEGAL */
.legal {
	position: fixed;
    left: 0;
    bottom: 0;
    z-index: 10;
    background: rgba(255,255,255,0.8);
    padding: 0.2rem 0.5rem;
    font-size: 0.6em;
}
.legal a {
	color: #666;
	text-decoration: none;
}
.legal a:hover {
	text-decoration: underline;
}

/* SCREENS */
.container-full {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	overflow: hidden;
}
.main-screen {
	background-color: #000;
}
.main-screen-bg {
	background: transparent url("../images/Mangotree_start_front-min.png") no-repeat left top;
	background-size: 100%;
    width: 100%;
    height: 100%;
    position: absolute;
}
.projects-screen {
	background: #000 url("../images/Mangotree_Projekte.jpg") no-repeat left top;
	background-size: 100%;
}
.contact-screen {
	background: #000 url("../images/Mangotree_kontakt.jpg") no-repeat left top;
	background-size: 100%;
}
.impressum-screen {
	background: #000 url("../images/Mangotree_impressum.jpg") no-repeat left top;
	background-size: 100%;
}
.services-screen {
	background: #000 url("../images/Mangotree_services.jpg") no-repeat left top;
	background-size: 100%;
}
.video-screen video {
	width: 100%;
	height: auto;
}

/* CANVAS */
.canvasHolder {
	position: absolute;
	top: 0;
	left: 0;
}

/* BUTTONS */
.info-button {
	cursor: pointer;
	position: absolute;
    right: 2%;
    width: 4%;
    min-width: 55px;
    min-height: 40px;
    top: 43px;
	-webkit-transition: all 400ms ease-out;
    -moz-transition: all 400ms ease-out;
    -o-transition: all 400ms ease-out;
    transition: all 400ms ease-out;
}
.info-button.active {
	-ms-transform: rotate(-90deg); /* IE 9 */
	-webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
	transform: rotate(-90deg);
}
.infoBtn img {
	width: 100%;
}
.home-button {
	cursor: pointer;
	position: absolute;
    right: 3%;
    width: 2.5%;
    min-width: 40px;
    min-height: 60px;
    top: 28px;
}
.btn {
	cursor: pointer;
	position: absolute;
	background: transparent;
	-webkit-transition: background-color 400ms ease-out;
    -moz-transition: background-color 400ms ease-out;
    -o-transition: background-color 400ms ease-out;
    transition: background-color 400ms ease-out;
}

.projects-button {
    left: 37%;
    width: 33%;
    top: 450px;
    height: 490px;
	-ms-transform: rotate(7deg); /* IE 9 */
	-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
	transform: rotate(7deg);
	/*background: #300;*/
}
.projects-button:hover {
	/*background: #f00;*/
}
.projects-button-info {
	position: absolute;
    left: 47%;
    width: 14%;
    top: 490px;
}

.contact-button {
	left: 14%;
    width: 19%;
    top: 270px;
    height: 310px;
	/*background: #030;*/
}
.contact-button:hover {
	/*background: #0f0;*/
}
.contact-button-info {
	position: absolute;
    left: 22%;
    top: 460px;
    width: 10%;
}

.impressum-button {
    left: 13%;
    width: 23%;
    top: 735px;
    height: 160px;
	/*background: #030;*/
}
.impressum-button:hover {
	/*background: #0f0;*/
}
.impressum-button-info {
	position: absolute;
    left: 20%;
    top: 840px;
    width: 18%;
}

.services-button {
    left: 75%;
    width: 25%;
    top: 675px;
    height: 360px;
	/*background: #030;*/
}
.services-button:hover {
	/*background: #0f0;*/
}
.services-button-info {
	position: absolute;
    left: 75%;
    top: 740px;
    width: 18%;
}

.coffee-damp {
}

/* SPRITES */
.coffee-damp {
	position: absolute;
    left: 70%;
    top: 410px;
    width: 7.81249995%; /* 150px */
    height: 150px;
	background-image: url('../images/dampf_spritesheet.png');
	background-size: 2600% 100%; /* width: amount of images * 100%, height: 100% */
	background-position: left center;
	animation: play_coffee_damp 3.5s steps(25) infinite;
	-webkit-vidation: play_coffee_damp 3.5s steps(25) infinite;
	-moz-vidation: play_coffee_damp 3.5s steps(25) infinite;
	-o-vidation: play_coffee_damp 3.5s steps(25) infinite;
}
@keyframes play_coffee_damp {
  100% { background-position: -2500%; }
}
@-webkit-keyframes play_coffee_damp {
  100% { background-position: -2500%; } 
}
@-moz-keyframes play_coffee_damp {
  100% { background-position: -2500%; } 
}
@-o-keyframes play_coffee_damp {
  100% { background-position: -2500%; }
}

/* CONTACT & IMPERSSUM & SERVICES */
.contact-container {
    position: absolute;
    right: 11%;
    top: 144px;
    color: #333;
    min-width: 34%;
    background-color: rgba(255,255,255,0.5);
    padding: 4%;
}
.impressum-container {
    position: absolute;
    left: 6%;
    top: 74px;
    color: #333;
    min-width: 50%;
    background-color: rgba(255,255,255,0.5);
    padding: 3%;   
}
.services-container {
    position: absolute;
    left: 20%;
    top: 95px;
    color: #333;
    min-width: 40%;
    background-color: rgba(255,255,255,0.5);
    padding: 1% 2%;
}
.contact-container h1,
.impressum-container h2 {
	margin: 0 0 3% 0;
}
.contact-form {
	margin-top: 40px;
}

/* PROJECTS */
.project {
	cursor: pointer;
}
.project a:not(.hideMe) {
	display: inline-block;
	width: 100%;
}
.project img {
	width: 100%;
}
.P1, .P2, .P3, .P4, .P5, .P6, .P7, .P8, .P9, .P10, .P11, .P12, .P13, .P14, .P15, .P16, .P17 {
	position: absolute;
}
.P1 {
    left: 50%;
    width: 13%;
    top: 400px;
}
.P2 {
    left: 29%;
    width: 12%;
    top: 440px;
}
.P3 {
    left: 45%;
    width: 12%;
    top: 750px;
}
.P4 {
    left: 41%;
    width: 12%;
    top: 210px;
}
.P5 {
    left: 57%;
    width: 10.5%;
    top: 501px;
}
.P6 {
    left: 27%;
    width: 11%;
    top: 840px;
}
.P7 {
    left: 49%;
    width: 11%;
    top: 820px;
}
.P8 {
    left: 23%;
    width: 11%;
    top: 550px;
}
.P9 {
    left: 42%;
    width: 13%;
    top: 830px;
}
.P10 {
    left: 31%;
    width: 14%;
    top: 410px;
}
.P11 {
    left: 27%;
    width: 13%;
    top: 320px;
}
.P12 {
    left: 47%;
    width: 13%;
    top: 320px;
}
.P13 {
	left: 54%;
    width: 10%;
    top: 290px;
}
.P14 {
    left: 61%;
    width: 10%;
    top: 470px;
}
.P15 {
    left: 55%;
    width: 13%;
    top: 840px;
}
.P16 {
    left: 35%;
    width: 11%;
    top: 470px;
}
.P17 {
    left: 50%;
    width: 11%;
    top: 480px;
}

@media screen and (min-width: 768px) {
	.hide768b {
		display: block;
	}
	body {
	    font-size: 1.0em;
	}

	/* CONTACT & IMPRESSUM */
	.contact-container {
	    right: 11%;
	    min-width: 28%;
	}
	.impressum-container {
	    position: absolute;
	    left: 6%;
	    top: 129px;
	    min-width: 30%;
	}
	.services-container {
		min-width: 26%;
	}
}

@media screen and (min-width: 1200px) {
	body {
	    font-size: 1.0em;
	}
	.services-container {
	    top: 144px;
		min-width: 22%;
	}
}

@media screen and (min-width: 1900px) {
	body {
	    font-size: 1.5em;
	}
}