* {

	padding: 0;
	margin: 0;
	border: 0;

}

body {

	font-size: 62.5%;
	font-family: museo-sans, helvetica, arial, verdana, sans-serif;
	background: url('/prx/000/https/bearcss.com/images/bg_soil.jpg');

}

#container {

	position: relative;
	height: 600px;
	width: 940px;
	z-index: 10;
	margin: 0 auto;
	padding-top: 30px;
	background-image: url('/prx/000/https/bearcss.com/images/bear.png');
	background-repeat: no-repeat;
	background-position: bottom left;
	background-size: contain;


}

#background {

	width: 100%;
	height: 593px;
	background-size: contain;
	background-image: url('/prx/000/https/bearcss.com/images/bg_main.jpg');

}


/********************************************************************
 HOT AIR BALLOON
********************************************************************/

#balloon {

	position: absolute;
	top: 380px;
	right: 0px;

	width: 35px;
	height: 42px;
	background: url('/prx/000/https/bearcss.com/images/balloon.png');

	-webkit-animation: balloon 100s infinite;
	-webkit-animation-timing-function: linear;
	-moz-animation: balloon 100s infinite;
	-ms-animation: balloon 100s infinite;

}

@-webkit-keyframes balloon {

	100%	{ right: 100%; top: 300px; }

}

@-moz-keyframes balloon {

	100%	{ right: 100%; top: 300px; }

}

@-ms-keyframes balloon {

	100%	{ right: 100%; top: 300px; }

}

/********************************************************************
 INSTRUCTIONS
********************************************************************/

#instructions {

	width: 300px;
	height: 360px;
	position: absolute;
	top: 0; right: 0;
	z-index: 100;

	padding: 37px 20px 25px 20px;
	background: url('/prx/000/https/bearcss.com/images/bg-box.png');

	-webkit-border-bottom-right-radius: 15px;
	-webkit-border-bottom-left-radius: 15px;
	-moz-border-radius-bottomright: 15px;
	-moz-border-radius-bottomleft: 15px;
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;

}

ol  {

	counter-reset: counter;
	margin-top: 20px;

	-moz-text-shadow: 1px 1px 1px #87a0af;
	-o-text-shadow: 1px 1px 1px #87a0af;
	text-shadow: 1px 1px 1px #87a0af;

}

ol li {

	color: #fff;
	list-style:none;
	position: relative;
  font-size: 1.6em;
  line-height: 1.4em;
  margin-top: 10px;
  padding: 3px 0 10px 40px;

}

ol li.middle:before {

	padding-top: 12px;
	background-position: 0 10px;
	background-repeat: no-repeat;

}

ol li:before {

	width: 17px;
	height: 25px;
	content: counter(counter);
  counter-increment: counter;
  position: absolute;
  left: 0;
  top: 0;
  padding: 3px 0 0 8px;
 	background: url('/prx/000/https/bearcss.com/images/circle.png') 0 1px no-repeat;

}


#upload-btn, #download-btn {

	display: block;
	float: left;
	width: 295px;
	height: 70px !important;
	cursor: pointer;

	position: absolute;
	margin-top: 20px;

	color: #fff;
	font-family: museo-slab;
	font-size: 2.6em;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	line-height: 70px !important;

	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;

	background: #fb9268;
	background: -moz-linear-gradient(top, #fb9268 0%, #e75b23 100%);
	background: -o-linear-gradient(top, #fb9268 0%, #e75b23 100%);
	background: -ms-linear-gradient(top, #fb9268 0%, #e75b23 100%);
	background: linear-gradient(top, #fb9268 0%, #e75b23 100%);
	background: -webkit-linear-gradient(top, #fb9268 0%, #e75b23 100%);

	border-top: 2px solid #fad1c4;
	border-right: 2px solid #d45e2f;
	border-bottom: 2px solid #8c4f3b;
	border-left: 2px solid #d45e2f;

	-moz-box-shadow: 0px 0px 7px #676767;
	-o-box-shadow: 0px 0px 7px #676767;
	-webkit-box-shadow: 0px 0px 7px #676767;
	box-shadow: 0px 0px 7px #676767;

}

#download-btn {

	border-top: 2px solid #c9e1f0;
	border-right: 2px solid #5889ac;
	border-bottom: 2px solid #5c7485;
	border-left: 2px solid #5889ac;

	background: #fb9268;
	background: -moz-linear-gradient(top, #91c8e8 0%, #4895cb 100%);
	background: -o-linear-gradient(top, #91c8e8 0%, #4895cb 100%);
	background: -ms-linear-gradient(top, #91c8e8 0%, #4895cb 100%);
	background: linear-gradient(top, #91c8e8 0%, #4895cb 100%);
	background: -webkit-linear-gradient(top, #91c8e8 0%, #4895cb 100%);

}

/********************************************************************
	FOOTER
********************************************************************/

footer {

	float: left;
	clear: both;
	margin-top: 500px;
	padding-bottom: 50px;

}

footer p, ul {

	float: left;
	clear: both;

}

footer p, ul, a {

	color: #8c776d;
	font-size: 1.4em;
	line-height: 1.4em;
	margin-bottom: 1.4em;

	-moz-text-shadow: 1px 1px 1px #39241a;
	-o-text-shadow: 1px 1px 1px #39241a;
	text-shadow: 1px 1px 1px #39241a;

}

footer img {

	float: left;
	clear: both;
	margin-top: -20px;
	margin-bottom: 40px;
	border: 3px solid #8c776d;

	-moz-box-shadow: 1px 1px 2px #39241a;
	-o-box-shadow: 1px 1px 2px #39241a;
	-webkit-box-shadow: 1px 1px 2px #39241a;
	box-shadow: 1px 1px 2px #39241a;

}

footer a {

	float: left;

	margin: 1px 0 0px 20px;
	text-decoration: none;

	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
 	transition: all 0.3s ease-in-out;

}

footer a.no-margin {

	margin-left: 0;
	clear: both;

}

footer a:hover {

	color: #d3c5be;
	text-decoration: underline;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
 	transition: all 0.3s ease-in-out;

}

footer ul {

	margin-left: 17px;

}

footer .affiliates {

	width: 100%;
	margin-bottom: 40px;
	border-bottom: 1px solid #432A20;

}

.affiliates a {

	width: 275px;
	margin: 0 50px 0 0;

}

.affiliates a:last-child {

	margin-right: 0;

}

.affiliates a img {

	max-width: 100%;
	max-height: 200px;

}

footer section {

	float: left;
	width: 280px;
	margin-right: 50px;

}

footer #contact {

	margin-right: 0;

}

footer #contact h5 {

	font-size: 1.5em;
	margin-left: 86px;

}

/********************************************************************
	TYPOGRAPHY
********************************************************************/

h1 {

	height: 30px;
	text-indent: -9000px;
	background-image: url('/prx/000/https/bearcss.com/images/logo.png');
	background-size: contain;
	background-repeat: no-repeat;

}

h2 {

	float: left;
	width: 550px;
	color: #1d7ccc;
	font-size: 3em;
	font-weight: 500;
	line-height: 1.2em;
	margin-top: 20px;
	-moz-text-shadow: 1px 1px 1px #a6c6d8;
	-o-text-shadow: 1px 1px 1px #a6c6d8;
	text-shadow: 1px 1px 1px #a6c6d8;

}

h3 {

	color: #fff;
	font-family: museo-slab;
	font-size: 3.7em;
	font-weight: 700;
	text-transform: uppercase;

	-moz-text-shadow: 2px 2px 1px #87a0af;
	-o-text-shadow: 2px 2px 1px #87a0af;
	text-shadow: 2px 2px 1px #87a0af;

}

h4 {

	color: #9b7b6c;
	font-family: museo-slab;
	font-size: 2.6em;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 0.8em;

	-moz-text-shadow: -1px -1px 2px #39241a;
	-o-text-shadow: -1px -1px 2px #39241a;
	text-shadow: -1px -1px 2px #39241a;

}

h5 {

	float: left;
	clear: both;
	color: #9b7b6c;
	font-family: museo-sans;
	font-size: 1.7em;
	font-weight: 700;
	margin-bottom: 0.2em;

	-moz-text-shadow: -1px -1px 1px #39241a;
	-o-text-shadow: -1px -1px 1px #39241a;
	text-shadow: -1px -1px 1px #39241a;

}