@charset "ISO-8859-1";
body {
	margin: 0;
	min-height: 100%;	
	overflow-x: hidden;
	background-color: #000000;
	-webkit-text-size-adjust: 100%
}

p {
  margin-top: 10px;
}

@font-face {
	font-family: caslon;
	src: url(//jaanshen.com/_fonts/ACaslonPro-Regular.ttf);
}

@font-face {
	font-family: caslon-italic;
	src: url(//jaanshen.com/_fonts/ACaslonPro-Italic.ttf);
}


/* MAIN CONTAINER */


#info-wrap {
    margin-right: auto;
	margin-left: auto;
	padding-top: 0px;
	padding-left: 4px;
	padding-right: 4px;
	horizontal-align: middle;
	max-width: 800px;
}


/* SUB CONTAINERS */


#header {
	width: 100%;
	margin-top: 64px;
	text-align: center;
	margin-bottom: 40px;
}
	@media only screen and (max-width: 640px) {
	#header {
	margin-top: 46px;
	margin-bottom: 30px;
	}
}
	@media only screen and (max-width: 560px) {
	#header {
	margin-top: 40px;
	margin-bottom: 16px;
	}
}
	@media only screen and (max-width: 430px) {
	#header {
	margin-top: 20px;
	margin-bottom: 16px;
	}
}


#subheader {
	width: 100%;
	text-align: center;
}
	@media only screen and (max-width: 560px) {
	#nav-box {
	}
}
	@media only screen and (max-width: 430px) {
	#nav-box {
	}
}
	@media only screen and (max-width: 350px) {
	#nav-box {
	}
}


/* BUTTONS: ONE BIG VIDEO, PNG WITH TEXT, INVIS. CIRCLE DIVS CLICKABLE */


.all-buttons {
  width: 100%;
  position: relative;
}

.text-buttons {
  z-index: 200000;
  position: absolute;
  text-align: center;
}

.circles-container {
  z-index: 300000;
  position: relative;
}

.circle-compo {
  background: #FFFFFF;
  border-radius: 50%;
  margin-left: 0%;
  width: 43%;
  padding-top: 43%; /* 1:1 Aspect Ratio */
  position: absolute;
  opacity: 0;
}

.circle-writ {
  background: #FFFFFF;
  border-radius: 50%;
  margin-left: 56.8%;
  width: 43%;
  padding-top: 43%; /* 1:1 Aspect Ratio */
  position: absolute;
  opacity: 0;
}

.circle-anim {
  background: #FFFFFF;
  border-radius: 50%;
  margin-left: 0%;
  margin-top: 49.8%;
  width: 43%;
  padding-top: 43%; /* 1:1 Aspect Ratio */
  position: absolute;
  opacity: 0;
}

.circle-dp {
  background: #FFFFFF;
  border-radius: 50%;
  margin-left: 56.8%;
  margin-top: 49.8%;
  width: 43%;
  padding-top: 43%; /* 1:1 Aspect Ratio */
  position: absolute;
  opacity: 0;
}

.circle-compo:hover {
    opacity: 0.2; /* css standard */
    filter: alpha(opacity=20); /* internet explorer */
}
.circle-writ:hover {
    opacity: 0.2; /* css standard */
    filter: alpha(opacity=20); /* internet explorer */
}
.circle-anim:hover {
    opacity: 0.2; /* css standard */
    filter: alpha(opacity=20); /* internet explorer */
}
.circle-dp:hover {
    opacity: 0.2; /* css standard */
    filter: alpha(opacity=20); /* internet explorer */
}



/*   |__   __\ \   / /  __ \|  ____|
    	| |   \ \_/ /| |__) | |__   
    	| |    \   / |  ___/|  __|  
    	| |     | |  | |    | |____ 
    	|_|     |_|  |_|    |______|  */

/* 200 = thin */
/* 400 = regular */
/* 600 = semibold */
/* 700 = bold */


/* TEXT BEHAVIORS */


a {
text-decoration: none; 
color: none; }

a:link {
	color: #FFFFFF;
	text-decoration: none; }
a:visited { 
	color: #FFFFFF; 
	text-decoration: none; }
a:hover {
	text-decoration: underline;
	color: #FFFFFF; }
	

/*  | |  | |  ____|   /\   |  __ \|  ____|  __ \ 
 	| |__| | |__     /  \  | |  | | |__  | |__) |
 	|  __  |  __|   / /\ \ | |  | |  __| |  _  / 
 	| |  | | |____ / ____ \| |__| | |____| | \ \ 
 	|_|  |_|______/_/    \_\_____/|______|_|  \_\  */


.headline {
	font-family: 'caslon', serif;
	font-size: 40px;
	color: #FFFFFF;
	line-height: 105%;
	font-weight: 400;
}
		
	@media only screen and (max-width: 760px) {
	.headline {
		font-size: 32px;
	}
}
	@media only screen and (max-width: 640px) {
	.headline {
		font-size: 28px;
	}
}
	@media only screen and (max-width: 560px) {
	.headline {
		font-size: 22px;
	}
}
	@media only screen and (max-width: 430px) {
	.headline {
		font-size: 26px;
	}
}


.headline-italic {
	font-family: 'caslon-italic', serif;
	font-size: 22px;
	color: #FFFFFF;
	line-height: 30px;
}
	@media only screen and (max-width: 760px) {
	.headline-italic {
		font-size: 18px;
		line-height: 22px;
	}
}
	@media only screen and (max-width: 560px) {
	.headline-italic {
		font-size: 13px;
		line-height: 16px;
	}
}
	@media only screen and (max-width: 430px) {
	.headline-italic {
		font-size: 16px;
		line-height: 20px;
	}
}


.forthe-italic {
	font-family: 'caslon-italic', serif;
	font-size: 32px;
	color: #403d3f;
	line-height: 30px;
}


.linebreak-header {  
	display: inline;
}

	@media screen and (max-width: 640px) {
    .linebreak-header { 
		display: inline; 
	}
	@media screen and (max-width: 430px) {
    .linebreak-header { 
		display: block; 
	}
}

		
.linebreak-info {  
	display: inline;
}
	@media screen and (max-width: 800px) {
    .linebreak-info { 
		display: block; 
	}

	@media screen and (max-width: 560px) {
    .linebreak-info { 
		display: inline; 
	}
	@media screen and (max-width: 430px) {
    .linebreak-info { 
		display: block; 
	}
}

		
/*   ____   ____  _______     __
 	|  _ \ / __ \|  __ \ \   / /
 	| |_) | |  | | |  | \ \_/ / 
 	|  _ <| |  | | |  | |\   /  
 	| |_) | |__| | |__| | | |   
 	|____/ \____/|_____/  |_|   */

		
p {
  margin-top: 3px;
}