/*created by Clay Pot Creative all rights reserved*/

/* ================================================
BALLOON BOY PAGE 
   ================================================*/
body{
	background: #7b7777;
}
#wrapper {

    max-width: 1836px;
}
h1{
	position: absolute;
	top: -200px;
}
.redbar{
	width: 1836px;
}
.copyright{
	width: 1797px
}
.btn.claypot{
	color: #FFF;
	font-size: 1.3em;
	text-transform: uppercase;
	padding: 0px 0px 1px 40px;
	margin: 1px 0px 0px;
	display: block;
	cursor: pointer;
	float: left;
}
.btn.claypot.pdf{
	float: left;
}
.btn.claypot:hover{
	background: none;
}
#scroll_note{
	display: block;
	position: fixed;
	bottom: -16px;
	width: 100%;
	z-index: 10;
	background: #7b7777;
	font-size: 0.8em;
	text-transform: uppercase;
	font-weight: normal;
	padding: 10px;
	color: #ffffff;
}
#balloon-boy{
	width: 1836px;
	height: 1188px;
	overflow: hidden;
	position: relative;
	background: url(/graphics/images/balloon-boy-anniversary-bg.png) center center no-repeat;
}

#balloon-boy-fort-collins-logo,
#balloon-1, 
#balloon-2, 
#balloon-3, 
#balloon-4, 
#balloon-5, 
#balloon-6, 
#dots-1,
#dots-2,
#dots-3,
#dots-4,
#dots-5,
#content,
#altitude,
#wind, 
#helicopter-1, 
#helicopter-2,
#flying_birds,
#house,
#words,
#man{
	position: absolute;
	z-index: 2;
}
@-webkit-keyframes ballons {
    0%   {transform: rotate(0deg);}
    50% {transform: rotate(7deg);}
    100% {transform: rotate(0deg);}
}
@-moz-keyframes ballons {
    0%   {transform: rotate(0deg);}
    50% {transform: rotate(7deg);}
    100% {transform: rotate(0deg);}
}
@keyframes ballons {
    0%   {transform: rotate(0deg);}
    50% {transform: rotate(7deg);}
    100% {transform: rotate(0deg);}
}
@-webkit-keyframes ballons-hover {
    0%   {transform: rotate(0deg);}
    50% {transform: rotate(8deg);}
    100% {transform: rotate(0deg);}
}
@-moz-keyframes ballons-hover {
    0%   {transform: rotate(0deg);}
    50% {transform: rotate(8deg);}
    100% {transform: rotate(0deg);}
}
@keyframes ballons-hover {
    0%   {transform: rotate(0deg);}
    50% {transform: rotate(8deg);}
    100% {transform: rotate(0deg);}
}
@-webkit-keyframes helicopter-1 {
    0% {transform: rotate(0deg); }
   	50% {transform: rotate(5deg); }
    100% {transform: rotate(0deg);}
}
@-moz-keyframes helicopter-1 {
    0% {transform: rotate(0deg); }
   	50% {transform: rotate(5deg); }
    100% {transform: rotate(0deg);}
}
@keyframes helicopter-1 {
    0% {transform: rotate(0deg); }
   	50% {transform: rotate(5deg); }
    100% {transform: rotate(0deg);}
}
@-webkit-keyframes helicopter-2 {
    0% {transform: rotate(0deg); }
	30% {transform: rotate(2deg);}
    60% {transform: rotate(-1deg); left: 578px}
	90% {transform: rotate(2deg);}
    100% {transform: rotate(0deg);}
}
@-moz-keyframes helicopter-2 {
    0% {transform: rotate(0deg); }
	30% {transform: rotate(2deg);}
    60% {transform: rotate(-1deg); left: 578px}
	90% {transform: rotate(2deg);}
    100% {transform: rotate(0deg);}
}
@keyframes helicopter-2 {
    0% {transform: rotate(0deg); }
	30% {transform: rotate(2deg);}
    60% {transform: rotate(-1deg); left: 578px}
	90% {transform: rotate(2deg);}
    100% {transform: rotate(0deg);}
}
@-webkit-keyframes flying_birds {
    0% {right: -200px;}
    50% {top: 430px;}
    75% {top: 200px;}
    100% {right: 2500px; }
}
@-moz-keyframes flying_birds {
    0% {right: -200px;}
    50% {top: 430px;}
    75% {top: 200px;}
    100% {right: 2500px; }
}
@keyframes flying_birds {
    0% {right: -200px;}
    50% {top: 430px;}
    75% {top: 200px;}
    100% {right: 2500px; }
}
#balloon-boy-fort-collins-logo{
	width: 383px;
	height: 390px;
	left: 93px;
	top: 32px;
	z-index: 7;
}
#balloon-1,
#balloon-3,
#balloon-5{
	 -moz-animation: ballons 8s infinite;
	 -webkit-animation: ballons 8s infinite;
	animation: ballons 8s infinite;
}
#balloon-2,
#balloon-4{
	 -moz-animation: ballons 12s infinite;
	 -webkit-animation: ballons 12s infinite;
	animation: ballons 12s infinite;
}

#balloon-1{
	width: 131px;
	height: 74px;
	bottom: 272px;
	left: 51px;
	display: none;
	z-index: 0;
} 

#balloon-2{
	width: 221px;
	height: 174px;
	top: 489px;
	left: 36px;
	background: url(/graphics/images/balloon-2_an.png) no-repeat;
	display: none;
} 
#balloon-3{
	width: 161px;
	height: 117px;
	top: 349px;
	left: 400px;
	display: none;
} 

#balloon-4{
	width: 254px;
	height: 176px;
	top: 251px;
	left: 782px;
	display: none;
} 
#balloon-5{
	width: 142px;
	height: 107px;
	top: 359px;
	left: 1417px;
	display: none;
} 

#balloon-6{
	width: 113px;
	height: 63px;
	bottom: 112px;
	right: 62px;
	display: none;
} 
#balloon-1:hover,
#balloon-2:hover,
#balloon-3:hover,
#balloon-4:hover,
#balloon-5:hover{
	 -moz-animation: ballons-hover 2s;
	 -webkit-animation: ballons-hover 2s;
	animation: ballons-hover 2s;
}

#dots-1{
	width: 38px;
	height: 207px;
	bottom: 351px;
	left: 99px;
	display: none;
}
#dots-2{
	width: 62px;
	height: 35px;
	top: 415px;
	left: 350px;
	z-index: 0;
	display: none;
}
#dots-3{
	width: 231px;
	height: 51px;
	top: 323px;
	left: 543px;
	display: none;
	z-index: 0;
}
#dots-4{
	width: 381px;
	height: 89px;
	top: 316px;
	right: 414px;
	display: none;
	z-index: 0;
}
#dots-5{
	width: 123px;
	height: 507px;
	top: 508px;
	right: 102px;
	z-index: 10;
	display: none;
}
#content{
	width: 1460px;
	height: 585px;
	top: 431px;
	left: 188px;
	display: none;
	z-index: 5;
}
#altitude{
	width: 302px;
	height: 45px;
	right: 490px;
	top: 2260px;
	display: none;
}
#wind{
	width: 318px;
	height: 57px;
	top: 253px;
	left: -467px;
	display: none;
}
#helicopter-1{
	width: 149px;
	height: 80px;
	top: 848px;
	left: 2038px;
	display: none;
}
#helicopter-1.active{
	-moz-animation: helicopter-1 8s infinite;
	-webkit-animation: helicopter-1 8s infinite;
	animation: helicopter-1 8s infinite;
}
#helicopter-2{
	width: 170px;
	height: 59px;
	bottom: 286px;
	left: -268px;
	display: none;
	z-index: 2;
}
#helicopter-2.active{
	-moz-animation: helicopter-2 5s infinite;
	-webkit-animation: helicopter-2 5s infinite;
	animation: helicopter-2 5s infinite;
}
#flying_birds{
	width: 135px;
	height: 90px;
	right: -200px;
	top: 300px;
	-moz-animation: flying_birds 45s 40s infinite;
	-webkit-animation: flying_birds 45s 40s infinite;
	animation: flying_birds 45s 40s infinite;
	z-index: 0;
}
#house{
	width: 191px;
	height: 152px;
	bottom: 119px;
	left: 123px;
	background: url(/graphics/images/house.png) no-repeat;
}
#words{
	width: 51px;
	bottom: 87px;
	left: 79px;
	display: none;
}
#man{
	width:35px;
	bottom: 125px;
	right: 530px;
	display: none;
}
@media all and (max-width: 1836px) {

html, body {
    overflow-x: auto;
    margin: 0px;
    padding: 0px;
}
.copyright:before,  .copyright:after{
	width: 0px;  
}
.redbar:before,  .redbar:after{
	width: 0px;  
}
} 
/* ================================================
END BALLOON BOY PAGE 
================================================*/