@font-face {
	font-family: MyriadPro;
	src: url(https://s0.2mdn.net/creatives/assets/4265612/MyriadPro-Regular.otf);
  }

body {margin: 0px;}

#container {
	background-color: white;
	border: 1px solid gray;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	cursor: pointer;
	display: none;
	overflow: hidden;
	position: absolute;
	width: 300px;
	height: 250px;
	pointer-events: none;
}
#container *{position: absolute;}

#clickthru{
	width: 100%;
	height: 100%;
	pointer-events: auto;
}
/*-------------- SPRITE -------------*/
.sprite { background: url('sprite.png') no-repeat top left; width: 238px; height: 438px; background-size: 238px 438px;  } 
.sprite.cta-text1 { background-position: 0 0; width: 108px; height: 13px; } 
.sprite.cta-text2 { background-position: 0 -18px; width: 108px; height: 13px; } 
.sprite.logo { background-position: 0 -36px; width: 140px; height: 56px; } 
.sprite.qMark { background-position: 0 -97px; width: 13px; height: 17px; } 
.sprite.logo-circle { background-position: 0 -119px; width: 40px; height: 40px; } 
.sprite.t1-1 { background-position: 0 -164px; width: 161px; height: 19px; } 
.sprite.t1-3 { background-position: 0 -188px; width: 115px; height: 19px; } 
.sprite.t1-2 { background-position: 0 -212px; width: 112px; height: 19px; } 
.sprite.t2-1 { background-position: 0 -236px; width: 118px; height: 54px; } 
.sprite.t2-2 { background-position: 0 -295px; width: 75px; height: 15px; } 
.sprite.t2-3 { background-position: 0 -315px; width: 144px; height: 15px; } 
.sprite.t2-4 { background-position: 0 -335px; width: 82px; height: 15px; } 
.sprite.t3-1 { background-position: 0 -355px; width: 201px; height: 17px; } 
.sprite.t3-3 { background-position: 0 -377px; width: 238px; height: 17px; } 
.sprite.t3-2 { background-position: 0 -399px; width: 175px; height: 17px; } 
.sprite.t3-4 { background-position: 0 -421px; width: 131px; height: 17px; } 

/*--------- SPRITE POSITION ---------*/   
.t1-1{top: 90px;left: 66px;}
.t1-2{top: 113px;left: 93px;}
.t1-3{top: 135px;left: 91px;}
.t2-1{top: 19px;left: 21px;}
.t2-2{top: 20px;left: 144px;}
.t2-3{top: 38px;left: 143px;}
.t2-4{top: 55px;left: 144px;}
.t3-1{top: 103px;left: 21px;}
.t3-2{top: 125px;left: 20px;}
.t3-3{top: 146px;left: 21px;}
.t3-4{top: 169px;left: 21px;}
.qMark{top: 169px;left: 151px;}
.logo{top: 29px;left: 20px;}
.logo-circle{top: 12px;left: 120px;}

/*-------- IMAGES | POSITION --------*/
img {
	width: 100%;
	height: auto;
	display: block;
}
.bg{
	width: 300px;
	height: 250px;
    background-color: white;
}

.thermostat {
	width: 200px;
	height: 112px;
	top: 140px;
	left: 49px;
}

#number {
    font-family: MyriadPro;
    color: #4ed9d1;
    font-size: 35px;
    top: 80px;
    right: 75px;
    letter-spacing: .1px;
}

.bar {
	width: 6px;
	height: 17px;
	background-color: #ffffff;
}

.bird-container {
    top: -2px;
    left: 221px;
}
.head, .body{
    width:281px;
    height:251px;
}

.eyes {
	width: 12px;
	height: 15px;
	top: 48px;
	left: 38px;
}

.f3-bird{
    width:426px;
    height:321px;
    top: 82px;
    left: -65px;
    opacity:0;
}

/*-------- CTA --------*/
#cta{width: 130px;height: 29px;top: 201px;left: 151px;}

.cta-text1, .cta-text2{top: 8px;left: 11px;}

.cta-in{
    width: 100%;
    height: 100%;
    background-color: #002c3a;
    border: 1px solid #28aae0;
}
.cta-out{
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    border: 1px solid #28aae0; 
}