body {margin: 0px;}

#container {
	background-color: black;
	cursor: pointer;
	display: none;
	overflow: hidden;
	position: absolute;
	width: 300px;
	height: 600px;
	pointer-events: none;
}

#border{
    border: 1px solid gray;  
	width: 100%;
	height: 100%;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


#container * {
	position: absolute;
}

#clickthru{
	width: 100%;
	height: 100%;
	pointer-events: auto;
}

/*-------------- SPRITE -------------*/
.sprite { background: url('sprite.png') no-repeat top left; width: 234px; height: 341px; background-size: 234px 341px;  } 
.sprite.cta-hover { background-position: 0 0; width: 120px; height: 13px; } 
.sprite.cta-text { background-position: 0 -18px; width: 120px; height: 13px; } 
.sprite.t1 { background-position: 0 -36px; width: 179px; height: 72px; } 
.sprite.t2 { background-position: 0 -113px; width: 234px; height: 68px; } 
.sprite.t3-1 { background-position: 0 -186px; width: 168px; height: 10px; } 
.sprite.t3-2 { background-position: 0 -201px; width: 156px; height: 65px; } 
.sprite.t4-1 { background-position: 0 -271px; width: 165px; height: 42px; } 
.sprite.t4-2 { background-position: 0 -318px; width: 46px; height: 23px; } 
/*--------- SPRITE POSITION ---------*/
.t1 {top: 44px;left: 21px;}
.t2 {top: 31px;left: 20px;}
.t3-1 {top: 9px;left: 15px;}
.t3-2 {top: 98px;left: 17px;}
.t4-1 {top: 7px;left: 9px;}
.t4-2 {top: 37px;left: 227px;}

/*-------- IMAGES | POSITION --------*/
img {
    width:100%;
    height:100%;
}


.bg1 {
	width: 540px;
	height: 600px;
	top: 1px;
	left: -239px;
}

.logo1{
    top: 21px;
    left: 19px;
    width: 179px;
    height: 58px;
}
.logo-text{
    top: 18px;
    left: 11px;
    width: 173px;
    height: 60px;
}
.logo-Anim {
    width: 300px;
    height: 339px;
    overflow: hidden;
    /* background-color: red; */
}

.logo-Mask {
    width: 300px;
    height: 100px;
    overflow: hidden;
    top: 262px;
    left: 90px;
/*    background-color: yellow;*/
}
#redLine-logo {
    width: 2px;
    height: 50px;
    left: 88px;
    top: 263px;
    background-color: #A41034;
}


/*-------- CTA --------*/
#cta{width: 263px;height: 40px;top: -33px;left: 19px;}

.cta-text,.cta-hover{top: 14px;left: 75px;}

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


/*-------- TEXT-CONTAINERS --------*/
.text1Cont {
    background-color: white;
    top: 0px;
    left: 0px;
    width: 300px;
    height: 138px;
}

.text2Cont {
    background-color: white;
    top: 0px;
    left: 0px;
    width: 300px;
    height: 110px;
}

.text3Cont {
    background-color: white;
    top: 94px;
    right: 0;
    width: 227px;
    height: 271px;
}
.text3-1Cont {
    background-color: #a41034;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
#text1Mask {
    width: 300px;
    height: 138px;
    overflow: hidden;
}

#text2Mask {
    top: 389px;
    width: 300px;
    height: 110px;
    overflow: hidden;
}
#text3-1Mask {
    top: 0px;
    right: 0px;
    width: 100%;
    height: 28px;
    overflow: hidden;
}
/*-------- IDs --------*/
#redLine {
    top: 302px;
    left: 89px;
    width: 1px;
    height: 44px;
    background-color: #a41034;
}
#t4-mask{
    top: 201px;
    left: 17px;
    width: 205px;
    height: 59px;
    overflow: hidden;
}

#boxEndframe {
    top: 21px;
    left: 117px;
    width: 183px;
    height: 157px;
    background-color: white;
}
#footer {
    width: 300px;
    height: 101px;
    background-color: white;
    bottom: 0px;
}