@font-face {
    font-family: 'BeonMedium';
    src: url('../fonts/beon-webfont.eot');
    src: local('☺'), url('../fonts/beon-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/beon-webfont.woff') format('woff'), url('../fonts/beon-webfont.ttf') format('truetype'), url('../fonts/beon-webfont.svg#BeonMedium') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'latobold';
    src: url('../fonts/Lato-Bold-webfont.eot');
    src: url('../fonts/Lato-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/Lato-Bold-webfont.woff2') format('woff2'), url('../fonts/Lato-Bold-webfont.woff') format('woff'), url('../fonts/Lato-Bold-webfont.ttf') format('truetype'), url('../fonts/Lato-Bold-webfont.svg#latobold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'latolight';
    src: url('../fonts/Lato-Light-webfont.eot');
    src: url('../fonts/Lato-Light-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/Lato-Light-webfont.woff2') format('woff2'), url('../fonts/Lato-Light-webfont.woff') format('woff'), url('../fonts/Lato-Light-webfont.ttf') format('truetype'), url('../fonts/Lato-Light-webfont.svg#latolight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'latoregular';
    src: url('../fonts/Lato-Regular-webfont.eot');
    src: url('../fonts/Lato-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/Lato-Regular-webfont.woff2') format('woff2'), url('../fonts/Lato-Regular-webfont.woff') format('woff'), url('../fonts/Lato-Regular-webfont.ttf') format('truetype'), url('../fonts/Lato-Regular-webfont.svg#latoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'open_sanslight';
    src: url('../fonts/OpenSans-Light-webfont.eot');
    src: url('../fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/OpenSans-Light-webfont.woff') format('woff'), url('../fonts/OpenSans-Light-webfont.ttf') format('truetype'), url('../fonts/OpenSans-Light-webfont.svg#open_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;
}

html, body { height: 100%; padding: 0; margin: 0; background:rgba(255,255,255,0.5); }
div { width: 33.333%; height: 40%; float: left; }
#A { background: #11A; }
#B { background: #22A;
}
#C { background: #33A; }
#D { background: #44A; }
#E { background: #55A; }
#F { background: #66A; }
#G { background: #77A; }
#H { background: #88A; }
#I { background: #99A; }

.intro-image {
    background-color: rgba(0,0,0,0.7);
    position: fixed;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform 0.6s, opacity 0.6s;
    transition: transform 0.6s, opacity 0.6s;
    -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
@-webkit-keyframes typing { from { width: 0; } }
@-webkit-keyframes blink-caret { 50% { border-color: transparent; } }

h2 { 
	top: 30%;
    left: 25%;
    margin-right: -50%;
	position: absolute;
	font: bold 8em monospace;
  	color: white;
	border-right: .1em solid white;
	width: calc(0.55em * 14); 
	width: 14ch;
	white-space: nowrap;
	overflow: hidden;
	-webkit-animation: typing 8s steps(14, end),
	           blink-caret .5s step-end infinite alternate;
}
h3 { 
	top: 50%;
    left: 25%;
    margin-right: -50%;
	position: absolute;
	font: bold 4em monospace;
  	color: white;
	border-right: .1em solid white;
	width: calc(0.55em * 19); 
	width: 19ch;
	white-space: nowrap;
	overflow: hidden;
	-webkit-animation: typing 8s steps(19, end),
	           blink-caret .5s step-end infinite alternate;
}