@charset "utf-8";
/* CSS Document */

* {
	margin: 0;
	padding: 0;
	color:#black;
	list-style:none;
	text-decoration:none;0 0 60px 0 rgb(178, 218, 218)
}
body {
    background-color: #FFF;
}
.indexer {
	display:none;
	background-color: #000;
	width:275px;
	position:fixed;
	top: 300px;
	left:20px;
}
b{
	font-size: 1.1em;
    font-weight: 900;
}
hr{margin: 50px 100px 50px 100px;}
h2{
	margin: 20px;
    text-align: center;
	font-size:2em;
}
img:hover{
	
}
p{
	margin:10px 100px;
	font-size:1em;
}
.lifeList{
	margin:10px 75px;
	font-size:1em;
}
	.lifeList li{
		list-style: decimal;
		margin:25px 80px;
		padding:10px;
		min-width: 200px;
	}
	.listList li b{
		
	}
.boxDecor{
	box-shadow: 0 0 60px 0 rgb(178, 218, 218);
}
.quotation{
	border-left-style: outset;
	display:block;
	margin:20px 100px 20px 150px;
}
.citation{
	display:block;
	margin:50px 0px 20px 50px;
	word-break: break-all;
}
div.zen_sphere_holder{
	position:relative;
	width:100px;
    height:100px;
	margin:5% auto 0;
}
	.zen_sphere_bg{
		position:absolute;
		top:0;
		left:0;
		right:0;
		bottom:0;
		width:100%;
		height:100%;
		z-index:3;
		background-color:#000;
		border-radius:50%;
	}
		.zen_sphere_bg > h1{
			position:absolute;
			z-index:7;
			top:35%;
			left:-100%;
			width:300%;;
			text-align:center;
			font-size:2em;
			color:#fff;
		}
	div.zen_sphere_white{
		position:absolute;
		top:-125%;
		left:-130%;
		width: 350%;
		height: 350%;
		overflow:visible;
		border-radius:50%;
		background-color:#fff;
		z-index:2;
		animation:growAndShrink 7s infinite;
		-webkit-animation:growAndShrink 7s infinite; /* Safari and Chrome */
	}
	div.zen_sphere_main_spinner{
		position:absolute;
		top:-25%;
		left:-25%;
		width: 150%;
		height: 150%;
		overflow:visible;
		animation:spin 12s infinite linear;
		-webkit-animation:spin 12s infinite linear; /* Safari and Chrome */
		border-radius:50%;
		z-index:2;
	}
		div.small_sphere_spinners{
			position:relative;
			float:left;
			width:50%;
			margin:auto;
			height:50%;
			animation:spin 6s infinite linear;
			-webkit-animation:spin 6s infinite linear; /* Safari and Chrome */
			border-radius:50%;
		}
			.small_spheres{
				position:static;
				margin:auto;
				width:49%;
				height:49%;
				background-color:#000;
				border-radius:50%;
				animation:spin 6s infinite linear;
				-webkit-animation:spin 6s infinite linear; 
			}
			div.small_spheres:hover{
				background-color:#fff;
				animation-play-state:paused;
				-webkit-animation-play-state:paused; /* Safari and Chrome */
			}
			div.small_spheres_clicked{
				background-color:#fff;
				transition-duration:1s;
				transition-property:background;
			}
ul.tabs{
	background-color:black;
	width:100%;
	height:18em;
}	
	.tab{
		width:20%;
		height:100%;
		float:left;
		overflow:visible;
		transition-property: background-color;
		transition-duration:2s;
	}
	.tab:hover{
		background-color:white;
	}
	.tab:hover a{
		color:black;
	}
	.tab > a{
		margin: auto;
		height:100%;
		width:100%;
		line-height: 18em;
		text-align: center;
		color:white;
	}
	
.content{
	border-radius:20px;
	max-width:800px;
	margin: 25px auto;
	padding:25px 0 25px 0;
	background-color:white;
}
.fb-comments span{margin:50px 0 0 0;}

@keyframes spin
{
0% {transform:rotate(0deg); color:#000;}
25% {background-color:#000;}
45% {transform:rotate(360deg);}
60% {transform:rotate(540deg);}
75% {background-color:#fff;}
100% {transform:rotate(900deg);}
}
@-webkit-keyframes spin /* Safari and Chrome */
{
0% {-webkit-transform:rotate(0deg); color:#000;}
25% {background-color:#000;}
45% {-webkit-transform:rotate(360deg);}
60% {-webkit-transform:rotate(540deg);}
75% {background-color:#fff;}
100% {-webkit-transform:rotate(900deg);}
}
@keyframes growAndShrink
{
0% {height: 250%;left: -75%;top: -80%;width: 250%; box-shadow:0 0 10px 0 rgb(178, 218, 218);}
50% {height: 350%;left: -125%;top: -130%;width: 350% ; box-shadow:0 0 80px 0 rgb(178, 218, 218);}
100% {height: 250%;left: -75%;top: -80%;width: 250%; box-shadow:0 0 10px 0 rgb(178, 218, 218);}
}
@-webkit-keyframes growAndShrink /* Safari and Chrome */
{
0% {height: 250%;left: -75%;top: -80%;width: 250%; box-shadow:0 0 10px 0 rgb(178, 218, 218);}
50% {height: 350%;left: -125%;top: -130%;width: 350% ; box-shadow:0 0 80px 0 rgb(178, 218, 218);}
100% {height: 250%;left: -75%;top: -80%;width: 250%; box-shadow:0 0 10px 0 rgb(178, 218, 218);}
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 769px) {
	div.zen_sphere_holder{width:60px; height:60px;}
	.content{
		padding:50px 25px;
	}
	body > div.content.boxDecor > ol > li{margin:25px -20px;}
	p{margin:10px 0;}
	.quotation{margin:20px 0px 20px 25px;}
	.citation{margin:50px 0px 20px 0px;}
	.zen_sphere_bg > h1 {
		font-size:.8em;
	}
	ul.tabs{
		margin: 20px 0;
		height:10em;
	}
	.tab > a{
		line-height: 1em;
		margin: 4em 0em 0em 0em;
	}
}