.styledTable{
 width:50%;
 border:0.5px solid rgba(100,100,100,1);
 border-collapse:collapse;
}
.styledTable th{
 padding:25px 10px;
 background:lightblue; 
 border:0.5px solid rgba(200,200,200,1);
}
.styledTable td{
 padding:25px 10px; 
 border:0.5px solid rgba(200,200,200,1);
}
.styledTable tr:nth-child(2n+1){
 background-color:rgba(220,220,220,0.7);	
}

	.external{
	 width:200px;
	 height:200px;
	 background-color:rgba(220,220,220,1);
	 border:1px solid red;
	 margin:50px;
	}
	.rotationalCon{
	perspective:300px;
	-webkit-perspective:300px;
	width:150px;
	height:150px;
	margin:2%;
	background-color:rgb(210,210,210);
	}
	.transformBoxX{
	transform:rotateX(45deg);
	-webkit-transform:rotateX(45deg);
	width:150px;
	height:150px;
	background-color:lightskyblue; color:white;
	}
	.transformBoxY{
	transform:rotateY(45deg);
	-webkit-transform:rotateY(45deg);
	width:150px;
	height:150px;
	background-color:lightskyblue; color:white;	
	}
	.transformBoxZ{
	transform:rotateZ(45deg);
	-webkit-transform:rotateZ(45deg);
	width:150px;
	height:150px;
	background-color:lightskyblue; color:white;	
	}	
	.links{
		color:white; 
		background-color:lightblue; 
		border:1px solid green;
	}
.transition {
    transition-property: opacity, left, color;
    transition-duration: 2s, 2s, 2s;
    -webkit-transition-property: opacity, left, color;
    -webkit-transition-duration: 2s, 2s, 2s;
	width:200px;
	height:200px;
	background-color:lightblue;
	margin:10px;
	color:white;
	opacity:1;
	position:relative;
	left:0px;
  }
.transition:hover{
  opacity:0.4;
  left:100px;
  color:white;
}
.trotationB{
	width:200px;
	height:200px;
	perspective:300px;
	-webkit-perspective:300px;
}
.trotation{
	width:200px;
	height:200px;
	background-color:lightblue;
	margin:10px;
	transform:rotateY(0deg);
	transition:transform 5s;
	-webkit-transform:rotateY(0deg);
	-webkit-transition:-webkit-transform 5s;
}
.trotation:hover{
	transform:rotateY(360deg);
	-webkit-transform:rotateY(360deg);
}

div.animationDemo{
 width:200px;
 height:200px;
 background-color:lightblue; 
 color:rgb(0,0,0);
 position:relative;
 color:white;
}
div.internalAnimationDemo{
	position:absolute;
	width:50px; 
	height:50px; 
	background-color:red;
	animation: moveBox 8s infinite; 
	animation-direction:alternate;
	-webkit-animation: moveBox 8s infinite; 
	-webkit-animation-direction:alternate;
}
@-webkit-keyframes moveBox{
	0%{
		left:0px;
	}
	25%{
		left:150px;
		top:0px;
	}
	50%{
		top:150px;
		left:150px;
	}
	75%{
		left:0px;
		top:150px;
	}
	100%{
		top:0px;
		left:0px;
	}

}

@keyframes moveBox{
	0%{
		left:0px;
	}
	25%{
		left:150px;
		top:0px;
	}
	50%{
		top:150px;
		left:150px;
	}
	75%{
		left:0px;
		top:150px;
	}
	100%{
		top:0px;
		left:0px;
	}

}