@font-face {
	font-weight: normal;
	font-style: normal;

}

*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { content: ''; display: table; }
.clearfix:after { clear: both; }
a.zeta:link {color: #fff;} a.zeta:visited {color: #fff;}
a.zeta:link {text-decoration: none;} a.zeta:hover {color: #2d7300; /*background:none!important;*/}
a.feta:link {color: #000000;} a.feta:visited {color: #000000;}
a.feta:link {text-decoration: none;} a.feta:hover {color: #2d7300; background: #f0f0f0;}
 a.banjo:hover {color: #2d7300; background: #f0f0f0;}

body {
	background: #000;
	color: #fff!important;
	font-weight: 400;
	font-size: 1em;
	line-height: 1.25;
	font-family: 'Raleway', Calibri, Arial, sans-serif;
}

a, button {outline: none;}
a {color: #000;text-decoration: none;}
a:hover, a:focus {color: #34495e;}

section {padding: 0.6em;text-align: center;}

p.ref {text-align: center;padding: 1.5em 1em;}
p {color: #fff!important;}

.yoshitext {
	margin: 0 auto;
	padding: 0.3em;
	max-width: 800px;
	font-size: 1.3em;
}

/* Header */
.aardvarkportfolio {
	margin: 0 auto;
	padding: 1em;
	text-align: center;
	align: center;
	max-width: 1200px;
}

.aardvark-header {margin: 0 auto; /* padding: 0.2em;*/
	text-align: center; max-width: 1080px;}

.aardvark-header h1 {margin: 0; font-size: 2.8em;
	line-height: 0.7; font-weight: 200; margin-top: 0.1em;}

.aardvark-header h1 span {display: block; padding: 0.7em 2.8em 0.3em;
	font-size: 40.5%; color: #a5a5a5; line-height: 1.3; margin-top: 0.7em;}
p.ender {display: block; padding: 0.2em 2.8em 0.2em;
	font-size: 1.35em; color: #787878; line-height: 1.3;}
.aardvark-headerhub {margin: 0 auto; padding: 0.2em;
	text-align: center; max-width: 1080px;}

.aardvark-headerhub h1 {margin: 0; font-size: 2.8em;
	line-height: 0.7; font-weight: 200; margin-top: 0.1em;}

.aardvark-headerhub h1 span {display: block; padding: 0.8em 2.8em 0.3em;
	font-size: 40%; color: #a5a5a5; line-height: 1.3;}
.aardvark-headerhubmini {display: none;}
.aardvark-headerhubmini {margin: 0 auto; padding: 0.2em;
	text-align: center; max-width: 1080px;}

.aardvark-headerhubmini h1 {margin: 0; font-size: 2.8em;
	line-height: 0.7; font-weight: 200; margin-top: 0.1em;}

.aardvark-headerhubmini h1 span {display: block; padding: 1em 0 0.5em;
	font-size: 40%; color: #a5a5a5; line-height: 1.4;}
. {align: center;
	background-color: #ababab;
	width:100%;
	position: absolute;}

/* To Navigation Style */
.codrops-top {
	width: 100%;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 0.69em;
	text-align: center;}

.codrops-top a {
	display: inline-block;
	padding: 1.5em;
	text-decoration: none;
	letter-spacing: 1px;}

.codrops-icon:before {
	margin: 0 4px;
	text-transform: none;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-family: 'codropsicons';
	line-height: 1;
	speak: none;
	-webkit-font-smoothing: antialiased;}
.video {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;}
.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;}

.codrops-demos a {
	display: inline-block;
	margin: 0.35em 0.1em;
	padding: 0.5em 1.2em;
	outline: none;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 700;
	border-radius: 2px;
	font-size: 110%;
	border: 2px solid transparent;}
.codrops-demos h3 {
	margin: 0;
	padding: 1em 0 0.5em 0;
	font-size: 0.9em;
	float: left;
	min-width: 90px;
	clear: left;}
.codrops-demos div:not(:first-child) h3 {
	padding-top: 2em;}

.codrops-demos a:hover,
.codrops-demos a.current-demo {
	color: inherit;
	border-color: initial;}

#header {width: 100%;
		height: 50%;}
#square {width: 23.6%;
		height: 25%;
		float: left;
		align: center;}
#square a:hover {background:#f0f0f0;}
		
#mw {margin-left: 23.5%;
	width: 28%;
	 float: left;}
#blops {width: 28%;
		margin-left: 1%;
		float: left;}
#square {float: left; margin-left: 1%; margin-top: 1%;}
#square img {width: 94%;}
#hamlet {width: 100%; padding-left: 23.5%;}
#hamletsquare {width: 6%; float: left; margin-top: 1.5em; margin-left: 0.3em;}
#hamletsquare img {width: 100%;}
#macbeth {padding-left: 23.5%; text-align: left; color: #000!important;}
.yoshitext h1 {font-size: 1.1em; margin-top: 0.2em;}
.yoshitext h2 {font-size: 1.1em; margin-top: 0.2em;}
#abouthide {display: none;}
@media only screen and (min-width : 1281px) {
div#square:nth-of-type(4n+1) {clear:both; }}
@media only screen and (max-width : 1281px) { 
#header {width: 100%;
		height: 50%;}
#square {
		height: 25%;
		float: left;
		align: center;
		font-size: 0.9em;}
#square:nth-of-type(4n+1) { }}
		
@media only screen and (max-width : 1080px) { 
#mw {margin-left: 7%; width: 43%; float: left;} #blops {width: 43%; margin-left: 1%; float: left;}
#square {width: 24%;} #hamlet {padding-left: 4%} #hamletsquare {width: 11.5%;}
#macbeth {padding-left: 4%;}}

@media screen and (max-width: 40em) {
.aardvark-header h1 {
		font-size: 2.3em;
		width: 100%;
	}
.aardvark-header h1 span {
	display: block;
	padding: 0.8em 0 0.8em;
	font-size: 40%;
	color: #a5a5a5;
	line-height: 1.4;}

.aardvarkportfolio {width: 100%;}
#logo {width: 100%;}}
@media only screen and (max-width : 769px) { 
#header {width: 100%;
		  height: 25%;
		  line-height: 0.9em;}
.aardvark-header h1 {line-height: 0.7;  font-size: 1.6em; margin-top: 0.1em;}
.aardvark-headerhub {display: none;}
.aardvark-headerhubmini {display: block;}
.aardvark-headerhubmini h1 {
		font-size: 1.7em;
		width: 100%;
		line-height: 0.7em;
	}
.aardvark-headerhub h1 {
	line-height: 0.9;  font-size: 1.6em; margin-top: 0.1em;}
.aardvark-headerhubmini h1 span {
	display: block;
	padding: 0.8em 0 0.8em;
	font-size: 48%;
	color: #a5a5a5;
	line-height: 1.4;}
#codrops-top clearfix span {font-size: 0.4em;}
.yoshitext {
	margin-left: 0.5em;
	font-size: 1em;}
p.ender {display: block; padding: 0.2em 0.4em 0.2em;
	font-size: 0.9em; color: #787878; line-height: 1.3;}
.aardvarkportfolio {
	width: 100%; padding: 0.7em;}
#square:nth-of-type(3n+1) {  }
#square {width: 32%!important;
		height: 50%;
		float: left;
		font-size: 0.8em;}
#mw {width: 100%;
	 margin-left: 0.2%;
	 float: left;}
#blops {width: 100%;
		margin-left: 0.2%;
		padding-left: 0.2%;
		padding-top: 1em;
		float: left;}
#square {width: 24%;}
#hamlet {display: none;}
#macbeth {text-align: center; padding-left: 0%;}
#about {display: none;}
#abouthide {display: block;}}