body {
	background-image: url("../data/www.spaceisgreen.nl-background-stripes-left.jpg");
	background-repeat: repeat;
	background-position: center top;
	background-attachment: fixed;
	width: 100%;
	max-height: 100%;
	margin: 0px;
	padding:0px;
	font-size: large;
}

.div-backgroundcolor{
	background-color: rgb(255,255,255);
	width: 100%;
	margin: 0;
	padding-top:.8vw;
	padding-bottom:.8vw;	
}		

@media ( max-width:48.75em ) {
		.div-width{
			width:96%;
		}
}
@media ( min-width:48.75em ) {
		.div-width{
			width:80%;
			max-width:1920px;
		}
}
				

.alignleft {text-align: left;}

.face_landscape_container{
	width: 30%;			
}		
@media (orientation: portrait) {
	.face_landscape_container{display:none;}
}

.face_portrait_container{
	max-width: 100%;			
}		
@media (orientation: landscape) {
	.face_portrait_container{display:none;}
}

.contact-face{
	padding:0;
	border: 0px;
	max-width: 100%;	
	heigth: 100%;
	margin:0% 0%;
	-webkit-animation: spin 1s 1;
	animation: spin 1s 1;
}
		

@-webkit-keyframes spin {
  from {
    transform: rotateY( 90deg);
  }
  to {
    transform: rotateY( 0deg);
  }
}

@keyframes spin {
  from {
    transform: rotateY( 90deg);
  }
  to {
    transform: rotateY( 0deg);
  }
}

/* Button Style Start */
.button{
	position: relative;
	display:block;
	background: rgb(255,255,255);
	width:490px;
	height:60px;
	line-height:60px;
	text-align:center;
	font-size:xx-large;
	text-decoration:none;
	margin:20px auto;
	z-index: 1;
}

.button:before, .button:after {
	width:480px;
	left: 0px;
	height:27px;
	z-index: 2;
}
			
.button_color{ color: rgb(0,0,0);
}
			
/* Button Border Style */
.button_color:before,.button_color:after {
	border: 3px solid rgb(0,0,0);
}

.button:before{
  position: absolute;
  content: '';
  border-bottom: none;
  -webkit-transform: perspective(36px) rotateX(5deg);
	 -moz-transform: perspective(36px) rotateX(5deg);
		  transform: perspective(36px) rotateX(5deg);  
}
			
.button:after{
	position: absolute;
	top: 30px;
	content: '';
	border-top: none;
	-webkit-transform: perspective(36px) rotateX(-5deg);
	   -moz-transform: perspective(36px) rotateX(-5deg);
			transform: perspective(36px) rotateX(-5deg);
}

/* Button Hover Style */
.button_color:hover:before, .button_color:hover:after {
	background: rgb(0,0,0); z-index: -1;
}

.button:hover{
	color:rgb(255,255,255);
}			

@media (orientation: portrait) {
		
	.button{
		width:236px;
		font-size: medium;
		margin:8px auto;
	}

	.button:before, .button:after {
		width:230px;
		height:25px;
	}

	/* Button Border Style */

	.button:before{
		-webkit-transform: perspective(17px) rotateX(5deg);
		   -moz-transform: perspective(17px) rotateX(5deg);
				transform: perspective(17px) rotateX(5deg);  
	}
				
	.button:after{
		-webkit-transform: perspective(17px) rotateX(-5deg);
		   -moz-transform: perspective(17px) rotateX(-5deg);
				transform: perspective(17px) rotateX(-5deg);
	}

	/* Button Hover Style */
	.button_color:hover:before, .button_color:hover:after {
		background: rgb(0,0,0);
	}

	.button:hover{
		color:rgb(255,255,255);
	}
}	
	

td {padding: 0.7em;}

.link-image{ position: float: left; }

.link-image img{
	border: 0px;
 	max-width:100%;	
}

 .hover-pulse img  {	
    -webkit-animation-name: image-pulse;
            animation-name: image-pulse;
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
}


.hover-pulse img:hover  {
  -webkit-animation-name: image-pulse;
          animation-name: image-pulse;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

@-webkit-keyframes image-pulse {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}

.metaball-grandparent-container{
	position: relative;	
}

.metaball-parent-container {
  background:  rgba(255,255,255,1);
  -webkit-filter: contrast(80);
  filter: contrast(80);
  overflow: hidden; 
}

.metaball-child-container {
  background:  rgba(0,0,0,1);;
  background-image: url("../data/www.spaceisgreen.nl-meta-balls-white-back.svg");
  background-repeat: no-repeat;
}

.metaball {			
  content: "";
  position: relative;
  left:0%;
  top:30%;
  background: rgba(255,255,255,1);
  border-radius:50%;
  animation: move 48s infinite alternate ease-in-out;
}	

.metaball {
  animation-duration: 40s;
  animation-delay: -1s;
}
.metaball:nth-child(2) {
  animation-duration: 30s;
  animation-delay: -2s;
}
.metaball:nth-child(3) {
  animation-duration: 50s;
  animation-delay: -4s;
}
.metaball:nth-child(4) {
  animation-duration: 40s;
  animation-delay: -3s;
}
.metaball:nth-child(5) {
  animation-duration: 20s;
  animation-delay: 0s;
}
.metaball:nth-child(6) {
  animation-duration: 25s;
  animation-delay: -5s;
}			
		
@keyframes move {
  0% {
	transform: translate(0%, 0%);
  }
  15% {
	transform: translate(-100%, -100%);
  }
  30% {
	transform: translate(-340%, -200%);
  }
  40% {
	transform: translate(340%, 200%);
  }
  60% {
	transform: translate(160%, 80%);
  }
  80% {
	transform: translate(-330%, 200%);
  }
  100% {
	transform: translate(300%, -200%);
  }
}
		
.white-part-face{	
	position: absolute;
	left:50%;
	top:0vh;
}	
	
@media (orientation: landscape) {
	.metaball-child-container {
	  width:89.6vh;
	  height:89.6vh;
	  margin-top:5.2vh;
	  margin-bottom:5.2vh;			  
	  -webkit-filter: blur(3.5vh);
	          filter: blur(3.5vh);	
	  background-size: 89.6vh 89.6vh;
	}
	.metaball {			
	  width:10vh;
	  height:10vh;
	  margin: -5vh ;
	  -webkit-filter: blur(2vh);
	          filter: blur(2vh);
	}
	.metaball:nth-child(2) {
	  width:12vh;
	  height:12vh;
	}
	.metaball:nth-child(3) {
	  width:13.5vh;
	  height:13.5vh;
	}
	.metaball:nth-child(4) {
	  width:14vh;
	  height:14vh;
	}			
	.metaball:nth-child(5) {
	  width:9.5vh;
	  height:9.5vh;
	}			
	.metaball:nth-child(6) {
	  width:11vh;
	  height:11vh;
	}
	
	.white-part-face{	
		width:90vh;
		height:90vh;
		margin-left:-45vh;
	}
}

@media (orientation: portrait) {
	.metaball-child-container {
	  width:89.6vw;
	  height:89.6vw;
	  margin-top:5.2vw;
	  margin-bottom:5.2vw;
	  -webkit-filter: blur(2vw);
	          filter: blur(2vw);
	  background-size: 89.6vw 89.6vw;	
	}
	.metaball {			
	  width:10vw;
	  height:10vw;
	  margin: -5vw ;
	  -webkit-filter: blur(3.5vw);
	          filter: blur(3.5vw);
	}
	.metaball:nth-child(2) {
	  width:12vw;
	  height:12vw;
	}
	.metaball:nth-child(3) {
	  width:13.5vw;
	  height:13.5vw;
	}
	.metaball:nth-child(4) {
	  width:14vw;
	  height:14vw;
	}			
	.metaball:nth-child(5) {
	  width:9.5vw;
	  height:9.5vw;
	}			
	.metaball:nth-child(6) {
	  width:11vw;
	  height:11vw;
	}			
	.white-part-face{	
		width:90vw;
		height:90vw;
		margin-left:-45vw;
	}
}