body{
	background-image: url(../safety/img/background.png);
}

#wrapper{
	background-image: url(../safety/img/clockface.png);
	background-size: 100% 100%;
	margin: 0px auto;
	height: 768px;
	width: 1224px;
	position: relative;
	overflow: hidden;
}

img
{
	border: none;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(../fonts/Lato.woff) format('woff');
}

@font-face {
    font-family: 'brainflower';
    src: url('../fonts/brain_flower-webfont.eot');
    src: url('../fonts/brain_flower-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/brain_flower-webfont.woff') format('woff'),
         url('../fonts/brain_flower-webfont.ttf') format('truetype'),
         url('../fonts/brain_flower-webfont.svg#brain_flowerregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/*************
*************************
HEADER
*************************
*************/

header{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 500px;
	height: auto;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	background-color: black;
	color: white;
}

header h1{
	font-size: 65px;
	margin: auto;
	text-align: center;
	margin-top: 8px;
	text-transform: uppercase;
	font-family: brainflower, helvetica, arial, sans-serif;
	font-weight: 100;
}



/*************
*************************
DOGS
*************************
*************/
figure{
	z-index: 99;
	cursor: pointer;
}

#dog1{
	position: absolute;
	top: 170px;
	left: 660px;
	width: 120px;
}

#dog2{
	position: absolute;
	top: 250px;
	left: 740px;
	width: 110px;
}

#dog3{
	position: absolute;
	top: 360px;
	left: 775px;
	width: 100px;
}

#dog4{
	position: absolute;
	top: 460px;
	left: 740px;
	width: 110px;
}

#dog5{
	position: absolute;
	top: 520px;
	left: 650px;
	width: 100px;
}

#dog6{
	position: absolute;
	top: 540px;
	left: 562px;
	width: 100px;
}

#dog7{
	position: absolute;
	top: 510px;
	left: 460px;
	width: 100px;
}

#dog8{
	position: absolute;
	top: 435px;
	left: 380px;
	width: 100px;
}

#dog9{
	position: absolute;
	top: 340px;
	left: 355px;
	width: 100px;
}

#dog10{
	position: absolute;
	top: 250px;
	left: 380px;
	width: 90px;
}

#dog11{
	position: absolute;
	top: 190px;
	left: 460px;
	width: 90px;
}

#dog12{
	position: absolute;
	top: 160px;
	left: 562px;
	width: 100px;
}

/*************
*************************
BUBBLES
*************************
*************/

figcaption {
	display: none;
	z-index: 2;
}

#bubble1 {
	position: absolute;
	top: 0px;
	left: 700px;
	width: 250px;
}


#bubble2 {
	position: absolute;
	top: 135px;
	left: 830px;
	width: 250px;
}

#bubble3 {
	position: absolute;
	top: 220px;
	left: 860px;
	width: 230px;
}

#bubble4 {
	position: absolute;
	top: 500px;
	left: 820px;
	width: 270px;
}

#bubble5 {
	position: absolute;
	top: 605px;
	left: 678px;
	width: 270px;
}

#bubble6{
	position: absolute;
	top: 570px;
	left: 578px;
	width: 210px;
}

#bubble7{
	position: absolute;
	top: 580px;
	left: 258px;
	width: 240px;
}

#bubble8{
	position: absolute;
	top: 420px;
	left: 110px;
	width: 280px;
}

#bubble9{
	position: absolute;
	top: 252px;
	left: 79px;
	width: 299px;
}

#bubble10{
	position: absolute;
	top: 130px;
	left: 158px;
	width: 240px;
}

#bubble11{
	position: absolute;
	top: 43px;
	left: 255px;
	width: 262px;
}

#bubble12{
	position: absolute;
	top: 0;
	left: 365px;
	width: 286px;
}

/*************
*************************
INSTRUCTIONS
*************************
*************/
#instructions{
	position: absolute;
	top: 175px;
	left: 966px;
	width: 250px;
	height: 485px;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	background-color: black;
	color: white;
	z-index: 0;
}

#instructions h2{
	font-size: 50px;
	margin: auto;
	text-align: center;
	margin-top: 8px;
	text-transform: uppercase;
	font-family: brainflower, helvetica, arial, sans-serif;
	font-weight: 100;
}


/*************
*************************
OTHER
*************************
*************/


#arrow{
	position: absolute;
	top: 392px;
	left: 487px;
	width: 240px;
}

#submit{
	position: absolute;
	width: 100px;
	height: 30px;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	background-color: #32FC03;
	top: 425px;
	left: 555px;
	display: none;
	z-index: 99;
	cursor: pointer;
}

#submit h2{
	font-size: 20px;
	margin: auto;
	text-align: center;
	margin-top: 3px;
	text-transform: uppercase;
	font-family: Lato, helvetica, arial, sans-serif;
}