body {margin: 0px;}

#container {
	background-color: black;
	cursor: pointer;
	display: none;
	overflow: hidden;
	position: absolute;
	width: 300px;
	height: 250px;
	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: 173px; height: 167px; background-size: 173px 167px;  } 
.sprite.cta-text { background-position: 0 0; width: 60px; height: 11px; } 
.sprite.t1 { background-position: 0 -16px; width: 170px; height: 20px; } 
.sprite.t2 { background-position: 0 -41px; width: 173px; height: 20px; } 
.sprite.t3-1 { background-position: 0 -66px; width: 117px; height: 7px; } 
.sprite.t3-2 { background-position: 0 -78px; width: 136px; height: 60px; } 
.sprite.t4-1 { background-position: 0 -143px; width: 67px; height: 10px; } 
.sprite.t4-2 { background-position: 0 -158px; width: 19px; height: 9px; } 
/*--------- SPRITE POSITION ---------*/
.t1 {top: 34px;left: 8px;}
.t2 {top: 15px;left: 10px;}
.t3-1 {top: 17px;left: 13px;}
.t3-2 {top: 50px;left: 12px;}
.t3-3 {top: 56px;left: 11px;}
.t4-1 {top: 4px;left: 8px;}
.t4-2 {top: 5px;left: 79px;}

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


.bg1 {
	width: 500px;
	height: 300px;
	top: 0px;
	left: 1px;
}

.logo1{
    top: 9px;
    left: 10px;
    width: 154px;
    height: 48px;
}
.logo-text{
    top: 18px;
    left: 10px;
    width: 145px;
    height: 50px;
}
.logo-Anim {
    width: 300px;
    height: 160px;
    overflow: hidden;
}

.logo-Mask {
    width: 169px;
    height: 100px;
    overflow: hidden;
    top: 92px;
    left: 98px;
}
#redLine-logo {
    width: 2px;
    height: 42px;
    left: 96px;
    top: 94px;
    background-color: #A41034;
}


/*-------- CTA --------*/
#cta{width: 108px;height: 31px;top: 13px;left: 177px;}

.cta-text,.cta-hover{top: 10px;left: 24px;}

.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: 69px;
}

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

.text3Cont {
    background-color: white;
    top: 17px;
    right: 0;
    width: 179px;
    height: 160px;
}
.text3-1Cont {
    /* background-color: #a41034; */
    top: 0;
    right: 0;
    width: 179px;
    height: 18px;
}
#text1Mask {
    width: 300px;
    height: 125px;
    overflow: hidden;
    /* background-color: red; */
}

#text2Mask {
    top: 126px;
    width: 300px;
    height: 73px;
    overflow: hidden;
}
#text3-1Mask {
    top: 0px;
    right: 0px;
    width: 179px;
    height: 27px;
    overflow: hidden;
}
/*-------- IDs --------*/
#redLine {
    top: 145px;
    left: 135px;
    width: 1px;
    height: 17px;
    background-color: #a41034;
}
#t4-mask{
    top: 127px;
    left: 15px;
    width: 160px;
    height: 29px;
    overflow: hidden;
}

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