body {margin: 0px;}

#container {
	background-color: black;
	border: 1px solid gray;
	box-sizing: border-box;
	cursor: pointer;
	display: none;
	overflow: hidden;
	position: absolute;
	width: 970px;
	height: 250px;
}
.cover {
	background-color: white;
	width: 322px;
	height: 250px;
	right: 0px;
}
#container * {
	position: absolute;
}

.sprite { background: url('sprite.png') no-repeat top left; width: 526px; height: 471px; background-size: 526px 471px;  } 
.sprite.cta-text { background-position: 0 0; width: 104px; height: 17px; } 
.sprite.cta-hover { background-position: 0 -22px; width: 104px; height: 17px; } 
.sprite.header-text { background-position: 0 -44px; width: 202px; height: 12px; } 
.sprite.logo { background-position: 0 -61px; width: 268px; height: 84px; } 
.sprite.t1-1 { background-position: 0 -150px; width: 526px; height: 43px; } 
.sprite.t1-2 { background-position: 0 -198px; width: 382px; height: 43px; } 
.sprite.t2 { background-position: 0 -246px; width: 289px; height: 103px; } 
.sprite.t3-1 { background-position: 0 -354px; width: 389px; height: 43px; } 
.sprite.t3-2 { background-position: 0 -402px; width: 276px; height: 43px; } 
.sprite.t4 { background-position: 0 -450px; width: 352px; height: 21px; } 

/*SPRITE POSITION*/
.t1-1   {top: 36px;left: 51px;}
.t1-2   {top: 96px;left: 51px;}
.t2     {top: 36px;left: 48px;}
.t3-1   {top: 44px;left: 51px;}
.t3-2   {top: 105px;left: 51px;}
.t4     {top: 8px;left: 0;}
.header-text {top: 8px;left: 35px;}
.logo{top: -17px;left: 677px;}

/*IMG*/
.bg {
	width: 970px;
	height: 250px;
    background-color: #e3e4e5;
}

img    {
    width:100%;
    height:100%;
}

#redLine{
    top: 169px;
    left: 35px;
    width: 2px;
    height: 51px;
    background-color: #f4f5f6;
}

#goMask{
    top: 178px;
    left: 48px;
    width: 375px;
    height: 29px;
    overflow: hidden;
}

header {
    width: 646px;
    height: 28px;
    background-color: #a41034;
}

/*CTA*/
#cta{width: 260px;height: 51px;top: 170px;left: 676px;}

.cta-text,.cta-hover{top: 18px;left: 79px;}

.cta-in{
    width: 100%;
    height: 100%;
    background-color: #a41034;
    border: 1px solid #a41034;
}
.cta-out{
    width: 100%;
    height: 100%;
    background-color: #000000;
    border: 1px solid #000000;
}

/*SPRITE POSITION*/
.t1-1   {top: 36px;left: 34px;}
.t1-2   {top: 96px;left: 34px;}
.t2     {top: 37px;left: 32px;}
.t3-1   {top: 45px;left: 34px;}
.t3-2   {top: 105px;left: 34px;}
.t4     {top: 8px;left: 0;}
.go     {top: 94px;left: 271px;}

.logo{
    top: 21px;
    left: 673px;
    width: 261px;
    height: 159px;
}

.fish-head{
    top: 24px;
    left: -13px;
    width:152px;
    height:112px;
}
.fish-tail{
    top: -10px;
    left: 17px;
    width:92px;
    height:123px;
}
.bowl{
    top: 20px;
    left:0px;
    width:194px;
    height:131px;
}
.shadow{
    width:73px;
    height:27px;
    top: 131px;
    left: 46px;
}
.water{
    width:259px;
    height:30px;
    top: 187px;
    left: 365px;
}
.bowl-cont{
    top: 49px;
    left: 494px;
    width: 161px;
    height: 161px;
}
#bubble-cont {
    width: 44px;
    height: 55px;
    top: 42px;
    left: 106px;
    overflow: hidden;
}
.bubbles {
    top: 54px;
    left: 28px;
}
.b1 { width: 4px; height: 4px; }
.b2 { width: 5px; height: 5px; }
.b3 { width: 6px; height: 6px; }
.b4 { width: 9px; height: 9px; }
.b5 { width: 8px; height: 8px; }
.b6 { width: 5px; height: 5px; }
.b7 { width: 3px; height: 3px; }