/* constant */
body { margin: 0; padding: 0; font-family: 'Allstate Sans'; width: 100%; }

a { text-decoration: none; color:#ffffff; }

#border { position: absolute; width: 726px; height: 88px; top:0; left:0; border:1px solid #000; z-index: 300} 

#atAd { position: absolute; width: 728px; height: 90px; overflow: hidden;  } 

#bgImg1 { position: absolute; top:0; left:0; z-index: 170;}

#bgImg2 { position: absolute; top:0; left:-300px; z-index: 170;}

#flash {
	position: absolute;
	width:1000px;
	height:1000px;
	z-index: 600;
	overflow: hidden;
}

/* colors */
.bgBlue { background-color: #001C71; }
.bgPink { background-color: #F55197; }
.bgOrange { background-color: #FF9E16; }
.bgYellow { background-color: #FFD100; }
.bgGreen { background-color: #95D600; }
.bgLtBlue { background-color: #57C1E8; }
.bgTeal { background-color: #49C3B1; }
.bgPurple { background-color: #8b86ca; }

.txtBlue { color: #001C71; }
.txtPink { color: #F55197; }
.txtOrange { color: #FF9E16; }
.txtYellow { color: #FFD100; }
.txtGreen { color: #95D600; }
.txtLtBlue { color: #57C1E8; }
.txtTeal { color: #49C3B1; }
.txtPurple { color: #8b86ca; }
.txtWhite { color: #FFFFFF; }

.logoBlue { fill:#001C71; }
.logoWhite{ fill:#FFFFFF; }
.logoPink{ fill:#F55197; }

.shadow {
	text-shadow: rgb(0, 0, 0) -2px 2px 9px;
}

/* logos */
#Allstate{
	position: absolute;
    width: 95px;
    height: 31px;
    top: 7px;
    right: 5px;
    background-image:url(AllstateDS_H.svg);
    background-repeat: no-repeat;
    z-index: 300;
}

#hands{
	position: absolute;
	width: 65px;
    top: 24px;
    left: 540px;
    z-index: 300;
    /*opacity: 0;*/
}

/* landing page styles */

#landing { 
	position: absolute;
	font-size:45px;
	line-height: 45px;
	width: 700px;
	left:30px;
	top:18px;
  	text-align: left;
	z-index: 210;
}

#onlyAllstate {
	position: absolute;
	top:56px;
	left:728px;
	z-index: 210;	
}
#onlyAllstate img{
		
}
#onlyfrom {
	font-size: 18px;
	line-height: 24px;
	color:white;
	font-weight: 500;
	text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
}

#frame1, #frame2, #frame3, #landing, #toBeIn, #ctaCopy{
	font-family: 'ITC Avant Garde Gothic';	
	font-weight: 900;
	-webkit-font-smoothing: antialiased; 
	text-transform: uppercase;
}

.colorIN{ 
	color: #F55197;
}

.whiteIN{ 
	color: white;
}

#bkgColor {
	position: absolute;
	top:0;
	left:0px;
	width: 728px;
	height:90px;
	z-index: 190;
}

#frame1{
	position: absolute;
	width:400px;
	font-size:34px;
	line-height: 30px;
	left:234px;
	top:18px;
  	text-align: left;
	z-index: 100;
}

#frame2 { 
	position: absolute;
	width:400px;
	font-size:34px;
	line-height: 30px;
	left:234px;
	top:18px;
  	text-align: left;
	z-index: 160;
}

#frame3{
	position: absolute;
	width:600px;
	font-size:32px;
	line-height: 28px;
	left:30px;
	top:15px;
  	text-align: left;
	z-index: 210;
}

#bkgReveal {
	position: absolute;
	width: 500px;
	height:500px;
	-ms-transform: rotate(-35deg); /* IE 9 */
    -webkit-transform: rotate(-35deg); /* Chrome, Safari, Opera */
    transform: rotate(-35deg);
    left: -100px;
    top:-200px;

}
.reg{
	font-family: 'Allstate Sans';
	font-size: 20px; 
	line-height: 15px;
	margin-left:-10px;
	left: 0px;
    bottom: 11px;
    position: absolute;

}

.reg2{
	font-family: 'Allstate Sans';
    font-size: 23px;
    line-height: 23px;
    margin-left: -16px;
    left: 0px;
    bottom: 15px;
    position: absolute;
}

#toBeIn { 
	position: absolute;
	color:#001C71;
	font-size:54px;
	width: 200px;
	left:30px;
	top:10px;
  	text-align: left;
	z-index: 210;
}
.in1, .in2, .in3, .in4, .in5 {
	opacity: 0;
	position: absolute;
}
.apostrophe {
	margin-left:-5px;
	margin-right:5px;
	font-style: italic;
}

/* CTA */
#btn_cta { font-weight: 700; position: absolute; width: 110px; height:25px; top: 42px; right:-110px; background: #001C71; text-transform: uppercase; padding: 3px 10px 4px 15px; font-size: 20px; font-weight:900; text-align: left; overflow: hidden; z-index: 350; cursor: pointer; opacity: 0 }
#ctaCopy { position: relative; z-index: 350; color:#fff; }
#arrow { position: absolute; top:0; left:72px; padding-top: 5px; padding-left: 18px; }

/* LEGAL */
#btnLegal { position: absolute; z-index: 300; width:100%; color: #ffffff; font-size: 10px; text-align: right; cursor: pointer; }
#legal { background:#333333; position: absolute; top:-80px; height:30px; color: #ffffff; font-size: 11px; padding: 15px; z-index: 300;  }
#legal #legalClose { text-align: right; font-size: 9px; cursor: pointer; }

/* CLICK TAG */
#clickArea { position: absolute; z-index: 350; width: 100%; height: 100%; }
#clickArea .clickAreaFull { width: 100%; height: 100%; background-color: #ff9900; }