@charset "UTF-8";
/* CSS Document */

/* Default style, feel free to remove if not needed. */
body, body * {
	vertical-align: baseline;
	border: 0 none;
	outline: 0;
	padding: 0;
	margin: 0;
}

div{ -webkit-backface-visibility: hidden;  -webkit-transform:translateX(0); -webkit-transform-style: preserve-3d; }


/* Div layer for the entire banner. */
#container_dc {
	position: absolute;
	top: 0px;
	left: 0px;
	margin: auto;
	width:700px;
	height:350px;
}

/***** COLLAPSED ******/

#content_dc {
	position: absolute;
	width: 298px;
	height: 248px;
	top: 50px;
	left: 200px;
	background:url(bg.jpg) no-repeat;
	border: 1px solid #85c271;
	overflow:hidden;
	z-index:0;
}


#rolloverCTA{ opacity:0; position:absolute; left:0px; top:0px; -webkit-transition:linear 0.2s; transition:linear 0.2s; }
#rolloverCTA.in{ opacity:1; }
#rolloverCTA.out{ opacity:0; -webkit-transition:linear 0.3s; transition:linear 0.3s;}

#copy1{ opacity:0; left:81px; top:56px; position:absolute; -webkit-transition:linear 0.7s; transition:linear 0.5s; }
#copy1.in{ opacity:1; }
#copy1.out{ opacity:0; -webkit-transition:linear 0.5s; transition:linear 0.5s; }

#clock{ overflow:hidden; left:83px; top:99px; width:200px; height:149px; position:absolute; background:url(clockAndShadow.png); opacity:0; -webkit-transition:opacity linear 0.6s, -webkit-transform cubic-bezier(0.6, 0, 0.4, 1) 1.2s; transition:opacity linear 0.6s, transform cubic-bezier(0.6, 0, 0.4, 1) 1.2s; -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0); -webkit-backface-visibility: hidden; }
#clock.in{ opacity:1; }
#clock.scaleOut{ -webkit-transform:scale(0.7,0.7) translateY(32px); -ms-transform:scale(0.7,0.7) translateY(32px); transform:scale(0.7,0.7) translateY(32px); }
#clock.stage2{ opacity:1; -webkit-transform: scale(0.85) translateY(13px); -ms-transform: scale(0.85) translateY(13px); transform: scale(0.85) translateY(13px); -webkit-transition: ease-in-out 0.8s; transition: ease-in-out 0.8s;}
#clock.out{ opacity:0; }


#hours{ left: 65px; top: 48px; position:absolute; -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition:linear 5s; transition:linear 5s; }
#hours.rotate{ -webkit-transform:rotateZ(30deg); transform:rotateZ(30deg); }

#minutes{     left: 65px; top: 36px; position:absolute; -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition:linear 5s; transition:linear 5s; -webkit-transform:rotateZ(0deg); transform:rotateZ(0deg);}
#minutes.rotate{ -webkit-transform:rotateZ(360deg); transform:rotateZ(360deg); }

#purplePlain{ top:3px; left:3px; position:absolute; opacity:0; }
#purplePlain.in{ opacity:1; -webkit-transition: linear 0.6s; transition: linear 0.6s;}

#arrow{ left:25px; top:23px; position:absolute; opacity:0; -webkit-transform:translateY(-10px); -ms-transform:translateY(-10px); transform:translateY(-10px);  }
#arrow.in{ opacity:1; -webkit-animation: arrow 1s cubic-bezier(0, 0, 0.21, 1); animation: arrow 1s cubic-bezier(0, 0, 0.21, 1);  -webkit-animation-fill-mode: forwards;  animation-fill-mode: forwards; }

@-webkit-keyframes arrow{
	0%{ opacity:0; -webkit-transform:translateY(-10px); transform:translateY(-10px); }
	40%{ opacity:1; -webkit-transform:translateY(0px); transform:translateY(0px); }
	59%{ opacity:0; -webkit-transform:translateY(0px); transform:translateY(0px); }
	60%{ opacity:0; -webkit-transform:translateY(-10px); transform:translateY(-10px); }
	100%{ opacity:1; -webkit-transform:translateY(0px); transform:translateY(0px); }
}

@keyframes arrow{
	0%{ opacity:0; -webkit-transform:translateY(-10px); transform:translateY(-10px); }
	40%{ opacity:1; -webkit-transform:translateY(0px); transform:translateY(0px); }
	59%{ opacity:0; -webkit-transform:translateY(0px); transform:translateY(0px); }
	60%{ opacity:0; -webkit-transform:translateY(-10px); transform:translateY(-10px); }
	100%{ opacity:1; -webkit-transform:translateY(0px); transform:translateY(0px); }
}


#copy2{ opacity:0; left:48px; top:92px; position:absolute; -webkit-transition:linear 0.5s; transition:linear 0.5s; }
#copy2.in{ opacity:1; }
#copy2.out{ opacity:0; -webkit-transition:linear 0.3s; transition:linear 0.3s;} 

#copy3{ opacity:0; left:51px; top:91px; position:absolute; -webkit-transition:linear 0.5s; transition:linear 0.5s; }
#copy3.in{ opacity:1; }
#copy3.out{ opacity:0; -webkit-transition:linear 0.3s; transition:linear 0.3s;} 

#tougeoLogo{ left:15px; top:29px; position:absolute; opacity:0; -webkit-transition:linear 0.3s; transition:linear 0.3s;}
#tougeoLogo.in{ opacity:1; }

#pen{ top:90px; left:8px; opacity:0; position:absolute; -webkit-transition:linear 0.3s; transition:linear 0.3s; }
#pen.in{ opacity:1; }

#penLegal1, #penLegal2{ top:123px; left:175px; opacity:0; position:absolute; -webkit-transition:linear 0.3s; transition:linear 0.3s; }
#penLegal1.in, #penLegal2.in{ opacity:1; }
#penLegal1.out, #penLegal2.out{ opacity:0; }


#copy4{ opacity:0; left:143px; top:26px; position:absolute; -webkit-transition:linear 0.5s; transition:linear 0.5s; }
#copy4.in{ opacity:1; }
#copy4.out{ opacity:0; -webkit-transition:linear 0.3s; transition:linear 0.3s;}

#copy5{ opacity:0; left:145px; top:27px; position:absolute; -webkit-transition:linear 0.5s; transition:linear 0.5s; }
#copy5.in{ opacity:1; }
#copy5.out{ opacity:0; -webkit-transition:linear 0.3s; transition:linear 0.3s; }

#copy6{ opacity:0; left:145px; top:26px; position:absolute; -webkit-transition:linear 0.5s; transition:linear 0.5s; }
#copy6.in{ opacity:1; }









#legal{
	font-family:Arial, Helvetica, sans-serif;
	font-size:9px;
	top:120px;
	left:380px;
	position:absolute;
	opacity:0;
	line-height:0px;
	margin:0px;
	padding:0px;
	}
	
#legal2{
	font-family:Arial, Helvetica, sans-serif;
	font-size:9px;
	top:120px;
	left:380px;
	position:absolute;
	opacity:0;
	line-height:0px;
	margin:0px;
	padding:0px;
}


/***** EXPANDED ******/

.direction-tl { left: 0px; top: 0px; }
.direction-tr { left: 200px; top: 0px; }
.direction-bl { left: 0px; top: 50px; }
.direction-br { left: 200px; top: 50px; }

#expand_btn{
	width:300px;
	height:250px;
	position:absolute;
	background:rgba(0,0,0,0.00);
}


#close_btn_dc {
	position:absolute;
	top:38px;
	left:473px;
	cursor: pointer;
	width:17px;
	height:18px;
	background-image: url('close.png');
}


#expand_content_dc{
	position: absolute;
	width: 498px;
	height: 298px;
	border:1px solid #85c271;
	background-color: #FFF;
	display:none;
	background-repeat:no-repeat;
	overflow:hidden;
	z-index:10000;
}

/* Invisible button for background clickthrough. */
#expanded_background_exit_dc {
	position: absolute;
	width: 500px;
	height: 174px;
	top: 0px;
	left: 0px;
	cursor: pointer;
	opacity: 0;
}


:focus {outline:none;}
::-moz-focus-inner {border:0;}


#reg{
	font-size:6px;
	line-height:6px;
	vertical-align: 3px;
	/*margin-top:-5px;*/
	}

sup { position: relative; }


#footer{
	width:300px;
	height:36px;
	top:213px;
	background-color:#3d2472;
	position:absolute;
	display:inline-block;
	opacity:0;
	line-height:11px;
	display:none;
	-webkit-transition: .6s ease-in-out;
	        transition: .6s ease-in-out;
}
	
#footer p{
	padding:0px 0 0 3px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:9px;
	color:#FFF;
	float:left;
	margin:0px;
	margin-top:-1px;
	line-height:9px;
}

#footer #code{
	margin-top:5px;
	position:absolute;}
		
#piCollapsedLink{
	text-decoration:none;
	color:#FFF;
	font-family:Arial, Helvetica, sans-serif;
	font-size:9px;
	text-decoration:underline;
	right:10px;
	text-align:right;
	position:absolute;
	line-height:11px;
	margin-top:6px;
	cursor:pointer;
	}


/* FRAME 1*/

#footer.fadein {opacity:1; }
#ISI.fadein {top:135px; -webkit-transition: .6s ease-in-out; transition: .6s ease-in-out;}


/* EXPANDED PARAMETERS. */
#tab1{
	position:absolute;
}
	
	
	
/* ISI */
#openISI.display {
	display: block
}

#tittle{
	font-size:14px;
	color:#461e6c;
}



#ISI {
	position:absolute;
	top: 300px;
	left: 0px;
	width: 300px;
	height: 78px;
	/*background-color:#e0e0e0;*/ 

	
}


#scrollContainer {
	width: 300px;
	height: 90px;
	position: absolute;
	top: -6px;
	left: 7px;
	overflow-y: scroll;
	overflow-x: hidden;
	-webkit-transition: .6s ease-out;
	        transition: .6s ease-out;
	}
#textWrapper {
	position: absolute;
	top: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 400;
	color:#000;
	font-size: 10px;
	line-height: 12px;
	width:276px;	
}
p b{
	color:#000;
	font-family: Arial, Helvetica, sans-serif;
	}
#scrollContainer p {
	width: 260px
	
}
#scrollMask {
	width: 282px;
	height: 78px;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden
	
}
#scrollwrapper {
	border-left: 1px solid transparent;
	position: absolute;
	top: 0px;
	left: 284px;
	height: 87px;
	width: 12px;
}
#scrollBar {
	position: absolute;
	top: 1px;
	left: 2px;
	 height: 48px;
	width: 8px;
	/*background-color:#e1e1e1;*/
	margin-top: 7px;
	margin-bottom: 7px;
}
	#scrollBar #up, #scrollBar #down {
		position: absolute;
		top: 52px;
		left: 0;
		margin-bottom: 2px;

		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 4px 6px 4px;
		border-color: transparent transparent #909090 transparent;
	}
	#scrollBar #down {
		/* top: auto; */
		bottom: -12px;
		margin-bottom: 0;
		margin-top: 9px;

		width: 0;
		height: 0;
		border-style: solid;
		border-width: 6px 4px 0 4px;
		border-color: #a1a1a1 transparent transparent transparent;

	}
#scrollBar #knob {
	background-color:#85a67a;
	position: absolute;
	top: 0px;
	left: 1px;
	height: 20px;
	width: 6px;
	cursor: pointer;
	border-radius:5px;
	opacity:0.7;
	
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
	#scrollBar #up {
		border-width: 0 4px 6px 4px;
	}
	#scrollBar #down {
		border-width: 6px 4px 0 4px
	}
}



	/* EXPANDED CSS */

#reg2{
	font-size:7px;
	line-height:7px;
	vertical-align: 4px;
	/*margin-top:-5px;*/
	}	
#footer2{
	top:273px;
	width:500px;
	height:27px;
	position:absolute;
	background-color:#3d2472;
	display:inline-block;

}

#footer2 p{
	padding:3px 0 0 7px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:8px;
	color:#FFF;
	float:left;
}

#pi_link {
	text-decoration:none;
	color:#FFF;
	font-family:Arial, Helvetica, sans-serif;
	font-size:8px;
	text-decoration:underline;
	right:10px;
	position:absolute;
	margin-top:4px;
	cursor:pointer;
	top:4px;
}
	
#tab1_btn{
	width: 127px;
	height: 29px;
	left: 10px;
	top: 0;
	position:absolute;
	cursor:pointer;
	z-index:10001;
	background:rgba(0,0,0,0.00);
	}

#tab2_btn{
	width: 144px;
	height: 29px;
	left: 140px;
	top: 0;    	
	position:absolute;
	cursor:pointer;
	z-index:10002;
	background:rgba(0,0,0,0.00);
	}

#start_saving_now{
	left: 12px;
	top: 132px;
	position:absolute;
	cursor:pointer;
	z-index:10007;
	opacity:0;
	transition:0.2s ease-out;
}

#learn_more{
	left:54px;
	top:132px;
	position:absolute;
	cursor:pointer;
	display:none;
	z-index:10006;
	opacity:0;
	transition:0.2s ease-out;
}

#visit_site{
	width:46px;
	height:13px;
	left:222px;
	top:150px;
	position:absolute;
	cursor:pointer;
	z-index:10005;
	background:rgba(0,0,0,0.00);
}
	
ul{
	margin-left:7px;
	margin-top:0px;
	padding-left:0px;
	list-style:none;
	}

#bullet {
	position:absolute;
	margin-left:-7px;
	margin-right:0px;
	margin-top:4px;
	width:4px;
	height:3px;
	}
/* ISI */
	#openISI2.display {
	display: block
}



#ISI2 {
	position:absolute;
	top: 173px;
	left: 0;
	width: 500px;
	height: 100px;
	background-color:#ffffff; 

	
}


#scrollContainer2 {
	width: 500px;
	height: 105px;
	position: absolute;
	top: -6px;
	left: 7px;
	overflow-y: scroll;
	overflow-x: hidden;
	-webkit-transition: .6s ease-out;
	        transition: .6s ease-out;
	}
#textWrapper2 {
	position: absolute;
	top: 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 400;
	color: #000;
	font-size: 12px;
	line-height: 14px;
	width:476px;
	
}

#scrollTextBlocker{
	position:absolute;
	top:0; left:0px;
	width:100%;
	height:100%;
}
#scrollContainer2 p {
	width: 470px
	
}
#scrollMask2 {
	width: 482px;
	height: 100px;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden
	
}
#scrollwrapper2 {
	border-left: 1px solid transparent;
	position: absolute;
	top: 0px;
	left: 486px;
	height: 100px;
	width: 12px;
}
#scrollBar2 {
	position: absolute;
	top: 1px;
	left: 2px;
	height: 68px;
	width: 8px;
	/*background-color:#e1e1e1;*/
	margin-top: 7px;
	margin-bottom: 7px;
}
	#scrollBar2 #up2, #scrollBar2 #down2 {
		position: absolute;
		top: 72px;
		left: 0;
		margin-bottom: 2px;

		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 4px 6px 4px;
		border-color: transparent transparent #a1a1a1 transparent;
	}
	#scrollBar2 #down2 {
		/* top: auto; */
		bottom: -12px;
		margin-bottom: 0;
		margin-top: 9px;

		width: 0;
		height: 0;
		border-style: solid;
		border-width: 6px 4px 0 4px;
		border-color: #a1a1a1 transparent transparent transparent;

	}
#scrollBar2 #knob2 {
	background-color:#acacac;
	position: absolute;
	top: 0px;
	left: 1px;
	height: 20px;
	width: 6px;
	cursor: pointer;
	border-radius:5px;
	opacity:0.5;
}


@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
	#scrollBar2 #up2 {
		border-width: 0 4px 6px 4px;
	}
	#scrollBar2 #down2 {
		border-width: 6px 4px 0 4px
	}
}