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

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

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

#atAd { position: absolute; width: 300px; height: 250px; overflow: hidden;  } 

#bgImg1 { position: absolute; top:0; }

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

#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 2px;
}

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

#hands{
	position: absolute;
	width: 80px;
    top: 182px;
    left: 90px;
    z-index: 300;
    opacity: 1;
}

/* landing page styles */

#landing { 
	position: absolute;
	width:300px;
	font-size:41px;
	line-height: 36px;
	left:15px;
	top:70px;
  	text-align: left;
	z-index: 210;
}

#onlyAllstate {
	position: absolute;
	top:148px;
	left:300px;
	z-index: 210;
}
/*#onlyAllstate img{
    vertical-align: bottom;
    padding-bottom: 1px;
}

#onlyfrom {
	display: inline;
	vertical-align: bottom;
	font-size: 18px;
	color:white;
	font-weight: 500;
	text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
}*/

#homeInsurance {
	display: inline;
	vertical-align: bottom;
	font-size: 18px;
	left: 123px;
	width: 200px;
	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:#8b86ca;
}

#frame1{
	position: absolute;
	font-size:30px;
	line-height: 26px; 
	top:160px;
	left:16px;
  	text-align: left;
	z-index: 100;
}

#frame2 { 
	position: absolute;
	font-size:30px;
	line-height: 26px; 
	top:160px;
	left:16px;
  	text-align: left;
	z-index: 100;
}

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

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

#toBeIn { 
	position: absolute;
	color:#001C71;
	font-size:64px;
	line-height: 53px;
	width: 200px;
	left:15px;
	top:20px;
  	font-weight: 900;
  	text-align: left;
	-webkit-font-smoothing: antialiased; 
	text-transform: uppercase;
	z-index: 210;
}

.in1, .in2, .in3, .in4, .in5 {
	opacity: 0;
}
.apostrophe {
	margin-left:-5px;
	margin-right:5px;
	font-style: italic;
}

#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;
}


/* CTA */
#btn_cta { font-weight: 700; position: absolute; width: 110px; height:25px; top: 195px; 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; }