/* USING CUSTOM FONTS */

@font-face { font-family: "brownstdlight"; src: url("../fonts/brown.std.light.otf"); }
@font-face { font-family: "brownstdreg"; src: url("../fonts/brown.std.regular.otf"); }
@font-face { font-family: "brownstdbold"; src: url("../fonts/brown.std.bold.otf"); }

h1 { font: normal 36px "brownstdbold"; }
h2 { font: normal 26px "brownstdreg"; }
h3 { font: normal 16px "brownstdlight"; }


/* defaults so we can see what we're doing */
/* #foreground { background: rgba(0,255,0,0.2); }*/
/* #background { background: rgba(0,0,255,0.2); }*/


/* elegantly fade in our content once everything has loaded */

.overlapper { display: none; }


/* ----------------------------------------
	Global Styles
---------------------------------------- */




/* ----------------------------------------
	Page 01
---------------------------------------- */

/*#page-01 #background {
	background: url('../assets/demo-poster.png');
	background-size: cover;
	background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}*/

.characters{
	width: 400px;
	position: absolute;
}

#bobby{
	top: 300px;
	left: 350px;
}

#deborah_hot{
	top: 350px;
	left: 600px;
}

#cyan_hot{
	 -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}


/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
    0%   {left:50px;}
    25%  {left: 100px;}
    50%  {left: 50px;}
    75%  {left: 100px;}
    100% {left: 50px;}
}

/* Standard syntax */
@keyframes example {
   	0%   {left:50px;}
    25%  {left: 100px;}
    50%  {left: 50px;}
    75%  {left: 100px;}
    100% {left: 50px;}

}