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: 217px; height: 493px; background-size: 217px 493px;  } 
.sprite.cta-text1 { background-position: 0 0; width: 92px; height: 14px; } 
.sprite.cta-text2 { background-position: 0 -19px; width: 92px; height: 14px; } 
.sprite.limited { background-position: 0 -38px; width: 87px; height: 23px; } 
.sprite.logo-circle { background-position: 0 -66px; width: 40px; height: 40px; } 
.sprite.logo { background-position: 0 -111px; width: 140px; height: 56px; } 
.sprite.t1-1 { background-position: 0 -172px; width: 161px; height: 19px; } 
.sprite.t1-2 { background-position: 0 -196px; width: 112px; height: 19px; } 
.sprite.t1-3 { background-position: 0 -220px; width: 118px; height: 19px; } 
.sprite.t2-1 { background-position: 0 -244px; width: 204px; height: 19px; } 
.sprite.t2-2 { background-position: 0 -268px; width: 132px; height: 19px; } 
.sprite.t2-3 { background-position: 0 -292px; width: 217px; height: 19px; } 
.sprite.t2-4 { background-position: 0 -316px; width: 149px; height: 19px; } 
.sprite.t3-1 { background-position: 0 -340px; width: 165px; height: 33px; } 
.sprite.t3-dot { background-position: 0 -378px; width: 10px; height: 9px; } 
.sprite.t3-ex { background-position: 0 -392px; width: 11px; height: 23px; } 
.sprite.t4-1 { background-position: 0 -420px; width: 162px; height: 21px; } 
.sprite.t4-2 { background-position: 0 -446px; width: 148px; height: 21px; } 
.sprite.t4-3 { background-position: 0 -472px; width: 109px; height: 21px; } 

/*--------- SPRITE POSITION ---------*/   
.t1-1{top: 90px;left: 66px;}
.t1-2{top: 113px;left: 93px;}
.t1-3{top: 136px;left: 90px;}
.t2-1{top: 25px;left: 47px;}
.t2-2{top: 48px;left: 84px;}
.t2-3{top: 71px;left: 38px;}
.t2-4{top: 94px;left: 75px;}
.t3-1{top: 46px;left: 62px;}
.t3-ex{top: 46px;left: 227px;}
.t3-dot{top: 70px;left: 227px;}
.t4-1{top: 107px;left: 20px;}
.t4-2{top: 134px;left: 22px;}
.t4-3{top: 161px;left: 22px;}

.limited{top: 209px;left: 25px;}
.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;
}

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

#f3-bird{
    width:60px;
    height:83px;
    top: 6px;
}
.f3-birdMask{
    width:60px;
    height:83px;
    top: 73px;
    left: 113px;
    overflow: hidden;
}
.cabinet, .cabinet-cover{
    width:300px;
    height:300px;
    top:-1px;
    left:-1px;
}
/*-------- 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; 
}