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: 240px; height: 663px; background-size: 240px 663px;  } 
.sprite.cta-text1 { background-position: 0 0; width: 92px; height: 14px; } 
.sprite.cta-text2 { background-position: 0 -19px; width: 92px; height: 14px; } 
.sprite.laptop-cover { background-position: 0 -38px; width: 240px; height: 130px; } 
.sprite.laptop { background-position: 0 -173px; width: 240px; height: 130px; } 
.sprite.logo-circle { background-position: 0 -308px; width: 40px; height: 40px; } 
.sprite.qMark { background-position: 0 -353px; width: 13px; height: 17px; } 
.sprite.logo { background-position: 0 -375px; width: 140px; height: 56px; } 
.sprite.t1-1 { background-position: 0 -436px; width: 161px; height: 19px; } 
.sprite.t1-2 { background-position: 0 -460px; width: 112px; height: 19px; } 
.sprite.t1-3 { background-position: 0 -484px; width: 95px; height: 19px; } 
.sprite.t2-1 { background-position: 0 -508px; width: 179px; height: 19px; } 
.sprite.t2-2 { background-position: 0 -532px; width: 177px; height: 19px; } 
.sprite.t2-3 { background-position: 0 -556px; width: 189px; height: 19px; } 
.sprite.t3-2 { background-position: 0 -580px; width: 175px; height: 17px; } 
.sprite.t3-3 { background-position: 0 -602px; width: 238px; height: 17px; } 
.sprite.t3-1 { background-position: 0 -624px; width: 201px; height: 17px; } 
.sprite.t3-4 { background-position: 0 -646px; width: 131px; height: 17px; } 

/*--------- SPRITE POSITION ---------*/   
.t1-1{top: 90px;left: 66px;}
.t1-2{top: 113px;left: 93px;}
.t1-3{top: 135px;left: 102px;}
.t2-1{top: 26px;left: 60px;}
.t2-2{top: 49px;left: 61px;}
.t2-3{top: 72px;left: 55px;}
.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;}
.laptop-cont{top: 110px;left: 19px;}

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

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

.f3-bird{
    width:93px;
    height:92px;
    top: 129px;
    left: 82px;
    opacity:0;
}

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

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

.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; 
}