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

body		{
	width:100%;
	font-family: 'Libre Baskerville', Baskerville, "Palatino Linotype", Palatino, serif;
}

.container		{
	width:100%;
	position:relative;	
}

h1	{
	letter-spacing:.1em;
	line-height:2em;
	font-weight:100;
	display:inline;
}

p	{
	font-size:.8em;
	letter-spacing:.1em;
	line-height:2em;	
}

a {
	color:#4EDFE5;
	text-decoration:none;
}

/*h1~a {
	letter-spacing:.1em;
}*/

a:hover	{
	color:#FFC70E;
}

.noWrap	{
	white-space:nowrap;	
}

header	{
	position:relative;
}

header	img	{
	width:100%;
}

header .headerBackgroundSmall	{
	display:none;
	width:100%;
}

.logoVertical		{
	width:3.5%;
	min-width:20px;
	position:absolute;
	top:11%;
	left:3.5%;
}

.typewriter	{
	width:30%;
	max-width:600px;
	min-width:200px;
	position:absolute;
	top:50%;
	left:50%;
	-ms-transform:translate(-50%, -20%);
	-webkit-transform:translate(-50%, -20%);
	-o-transform:translate(-50%, -20%);
	transform:translate(-50%, -20%);
}

.type	{  
	position:absolute;
	top:28%;
	bottom:63%;
	left:26.5%;
	width:45%;
	background-image:url(../images/typeSprite2.png);
	background-repeat:no-repeat;
	background-size:cover;	
	background-position:top;
	    
    -webkit-animation: play 6s steps(32) 1;
    -moz-animation: play 6s steps(32) 1;
    -ms-animation: play 6s steps(32) 1;
    -o-animation: play 6s steps(32) 1;
    animation: play 6s steps(32) 1;
}

@-webkit-keyframes play {
   from { background-position:    0% 0%; }
     to { background-position: 0% 103.125%; }
}

@-moz-keyframes play {
   from { background-position:    0% 0%; }
     to { background-position: 0% 103.125%; }
}

@-ms-keyframes play {
   from { background-position:    0% 0%; }
     to { background-position: 0% 103.125%; }
}

@-o-keyframes play {
   from { background-position:    0% 0%; }
     to { background-position: 0% 103.125%; }
}

@keyframes play {
   from { background-position:    0% 0%; }
     to { background-position: 0% 103.125%; }
}



article	{    
	width:80%;
	max-width:1000px;
	margin:17% auto 0;
}

.divider {
	width:100%;
	margin:1.5% auto 1.5%;
}

.circle {
	margin:10% auto;
	position: relative;
	border-radius: 50%;
	width: 40%;
	height: auto;
	padding-top: 40%;
	background-image:url(../images/archibaldCircle.jpg);
	background-size:cover;
}

/*-----------bee-----------*/

.bee {
    -webkit-animation:hover 10s infinite ease;
	-moz-animation:hover 10s infinite ease;
    -o-animation:hover 10s infinite ease;
    animation:hover 10s infinite ease;

    position: absolute;
    top: 10%;
	left: 65%;
}

.bee > img {
    width: 40%;
}

.beeface, .beeone {
    position: absolute;
}

.beeone {
    -webkit-animation:beeone 0.15s infinite linear;
    -moz-animation:beeone 0.15s infinite linear;
    -o-animation:beeone 0.15s infinite linear;
    animation:beeone 0.15s infinite linear;
    opacity: 0.1;
}
.beetwo {
    -webkit-animation:beetwo 0.15s infinite linear;
    -moz-animation:beetwo 0.15s infinite linear;
    -o-animation:beetwo 0.15s infinite linear;
    animation:beetwo 0.15s infinite linear;
    opacity: 1;
}

@-webkit-keyframes hover {
0% {top: 10%;}
50% {top: 35%;}
100% {top: 10%;}
}

@-webkit-keyframes beeone {
0% {opacity: 0.1;}
50% {opacity: 1;}
100% {opacity: 0.1;}
}

@-webkit-keyframes beetwo {
0% {opacity: 1;}
50% {opacity: 0.1;}
100% {opacity: 1;}
}

@-moz-keyframes hover {
0% {top: 10%;}
50% {top: 35%;}
100% {top: 10%;}
}

@-moz-keyframes beeone {
0% {opacity: 0.1;}
50% {opacity: 1;}
100% {opacity: 0.1;}
}

@-moz-keyframes beetwo {
0% {opacity: 1;}
50% {opacity: 0.1;}
100% {opacity: 1;}
}

@keyframes hover {
0% {top: 10%;}
50% {top: 35%;}
100% {top: 10%;}
}

@keyframes beeone {
0% {opacity: 0.1;}
50% {opacity: 1;}
100% {opacity: 0.1;}
}

@keyframes beetwo {
0% {opacity: 1;}
50% {opacity: 0.1;}
100% {opacity: 1;}
}


.birdMan	{
	display:block;
	margin:10% auto;
	width:20%;	
}

footer	{
	position:relative;
	margin:0 auto 30px;
	width:90%;
	text-align:center;	
	background-image:url(../images/footerLine.jpg);
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
	height:80px;
}

footer p	{
	position:relative;
	max-width:60%;
	margin:0 auto;
	line-height:1.5em;
}


@media only screen and (max-width: 830px){
	
h1	{
	font-size:95%;
}

p	{
	font-size:.7em;	
}

footer	{
	height:110px;
}

footer p	{
	font-size:.7em;
	max-width:80%;
}

.typewriter	{
	width:40%;
}

article	{    
	margin-top:25%;
}

.circle {
	width: 50%;
	padding-top: 50%;
}
	
}

@media only screen and (max-width: 475px){

header	.headerBackgroundLarge	{
	display:none;
}

header .headerBackgroundSmall	{
	display:block;
}

.logoVertical		{
	width:7%;
}

.typewriter	{
	width:70%;
}

article	{    
	margin-top:40%;
}

.circle {
	width: 70%;
	padding-top: 70%;
}

/*h1~a {
font-size:.7em;
}
*/
footer p	{
	font-size:.65em;
	max-width:80%;
}
	
}