@charset "utf-8";

body {
  margin: 0;
  font-family: 'Asap', sans-serif;
  background:url(bg.png) repeat;
}

.tool-box {
  background-color: #fff;
  -moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
  -moz-border-radius: 3px;
  -webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
  -webkit-border-radius: 3px;
  border-color: #E5E5E5 #DBDBDB #D2D2D2;
  border-style: solid;
  border-width: 1px;
  height: 400px;
  width: 300px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 110;
  margin: auto;
  padding: 10px;
  display: none;
}

.tool-box-text {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: #474747;
  text-align: center;
}
.show-help-style{
color:#FFFFFF;
background-color:#0768C6;
border:1px solid #77B9FF;
font-size:13px;
padding:3px;
	border-radius:3px;
}
.show-help-style:hover{
	background-color:#004089;
	cursor:pointer;
}
.action-description-wrapper {
  margin: 25px 0 0 0;
  color: #101010;
}

.action-title {
  font-size: 18px;
  color: #008ae3;
}

#iframe-wrapper {
  margin: 0 auto;
  margin-top: 20px;
  overflow: hidden;
  width: 176px;
  height: 139px;
  position: relative;
}

#iframe-content {  
  border: 0pt none;
  left: -632px;
  top: -117px;
  position: absolute;
  width: 1440px;
  height: 763px;
}

#completion-check-wrapper {
  width: 200px;
  height: 40px;
  border: 1px solid #999;
  margin: 0 auto;
  margin-top: 20px;
}

#completion-check-gif {
  background-image: url(loading_spin.gif);
  background-size: contain;
  width: 40px;
  height: 40px;
  float: left;
}

#completion-tooltip {
  font-size: 14px;
  margin: 5px;
}

#footer-wrapper {
  width: 840px;
  margin: auto;
  text-align: center;
  position: absolute;
  top:845px;
  left:0;
  right:0;
}

.footer-item {
  color: #2d2d2d;
  font-size: 14px;
  font-weight: bold;
}
.footer-item:hover{
	color:#777777;
	cursor:pointer;
}
.count-footer{
  font-size: 14px;
  font-weight: bold;
}
a {
  text-decoration: none;
}

#countup {
  color: #002B8A;
}

#background-dimmer {
  background-color: #000;
  opacity: .3;
  filter: alpha(opacity=30);
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  display: none;
  cursor: pointer;
}

#wrapper {
  width: 840px;
  height: 845px;
  margin: 0 auto;
  position: relative;
  top: 30px;
}

#image-of-card {
  width: 300px;
  height: 433px;
  background-size: 300px 433px;
  position: absolute;
  background-image: url(card.png);
  top: -1px;
}

#right-wrapper {
  color: #036 font-family: 'Asap', sans-serif;
  font-size: 46px;
  text-align: center;
  width: 480px;
  height: 433px;
  font-weight: 400;
  position: absolute;
  right: 0;
  top: -1px;
}

.delimiter-line {
  margin: 6px 0 0 0;
  border-top: 2px solid #CFCFCF;
}

#logo {
  width: 301px;
  height: 127px;
  background-size: 301px 127px;
  background-image: url(banner.png);
  margin: 5px 0 0 91px;
}

#intro-title {
  font-size: 28px;
  color: #171717;
  margin: 25px 0 0 0;
  font-weight: 200;
}

#how-to-wrapper {
  font-size: 20px;
  color: #000;
  margin: 10px 0 0 0;
  font-weight: 300;
  display: block;
}

#steps-wrapper {
  width: 480px;
  height: 132px;
  margin: 10px 0 0 0;
}

#step-1-image {
  width: 94px;
  height: 132px;
  background-image: url(1.png);
  background-size: 94px 132px;
  float: left;
}

#step-2-image {
  width: 134px;
  height: 132px;
  background-image: url(2.png);
  background-size: 134px 132px;
  float: left;
}

#step-3-image {
  width: 127px;
  height: 132px;
  background-image: url(3.png);
  background-size: 127px 132px;
  float: left;
}

#step-4-image {
  width: 125px;
  height: 132px;
  background-image: url(4.png);
  background-size: 125px 132px;
  float: left;
}

#code-wrapper {
  width: 480px;
  text-align: center;
  font-size: 24px;
  margin-top: 45px;
  display: none;
}

#code-text {
  font-size: 30px;
  color: #001245;
}

#action-wrapper {
  text-align: center;
  width: 840px;
  height: 340px;
  position: absolute;
  top: 475px;
  border-top: 2px solid #E1E1E1;
  color: #222;
  font-family: 'Asap', sans-serif;
  font-size: 20px;
  font-weight: 400;
}

#progress-bar-text {
  margin: 0 auto;
  margin-top: 50px;
  font-size: 18px;
  color: #424242;
  text-align: center;
  font-family: 'Asap', sans-serif;
}
/* unused */


.meter { 
			height: 20px;  /* Can be anything */
			position: relative;
			margin: 0 auto;
			margin-top:50px;
			background: #E6E6E6;
			-moz-border-radius: 25px;
			-webkit-border-radius: 25px;
			border-radius: 5px;
			padding: 6px;
			-webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.2);
			-moz-box-shadow   : inset 0 -1px 1px rgba(255,255,255,0.2);
			box-shadow        : inset 0 -1px 1px rgba(255,255,255,0.2);
		}
		.meter > span {
			display: block;
			height: 100%;
			   -webkit-border-top-right-radius: 5px;
			-webkit-border-bottom-right-radius: 5px;
			       -moz-border-radius-topright: 5px;
			    -moz-border-radius-bottomright: 5px;
			           border-top-right-radius: 5px;
			        border-bottom-right-radius: 5px;
			    -webkit-border-top-left-radius: 5px;
			 -webkit-border-bottom-left-radius: 5px;
			        -moz-border-radius-topleft: 5px;
			     -moz-border-radius-bottomleft: 5px;
			            border-top-left-radius: 5px;
			         border-bottom-left-radius: 5px;
			background-color: #1aa01a;
			background-image: -webkit-gradient(
			  linear,
			  left bottom,
			  left top,
			  color-stop(0, rgb(26,160,26)),
			  color-stop(1, rgb(84,240,84))
			 );
			background-image: -moz-linear-gradient(
			  center bottom,
			  rgb(26,160,26) 37%,
			  rgb(84,240,84) 69%
			 );
			-webkit-box-shadow: 
			  inset 0 2px 9px  rgba(255,255,255,0.1),
			  inset 0 -2px 6px rgba(0,0,0,0.2);
			-moz-box-shadow: 
			  inset 0 2px 9px  rgba(255,255,255,0.1),
			  inset 0 -2px 6px rgba(0,0,0,0.2);
			box-shadow: 
			  inset 0 2px 9px  rgba(255,255,255,0.1),
			  inset 0 -2px 6px rgba(0,0,0,0.2);
			position: relative;
			overflow: hidden;
		}
		.meter > span:after, .animate > span > span {
			content: "";
			position: absolute;
			top: 0; left: 0; bottom: 0; right: 0;
			background-image: 
			   -webkit-gradient(linear, 0 0, 100% 100%, 
			      color-stop(.25, rgba(255, 255, 255, .2)), 
			      color-stop(.25, transparent), color-stop(.5, transparent), 
			      color-stop(.5, rgba(255, 255, 255, .2)), 
			      color-stop(.75, rgba(255, 255, 255, .2)), 
			      color-stop(.75, transparent), to(transparent)
			   );
			background-image: 
				-moz-linear-gradient(
				  -45deg, 
			      rgba(255, 255, 255, .2) 25%, 
			      transparent 25%, 
			      transparent 50%, 
			      rgba(255, 255, 255, .2) 50%, 
			      rgba(255, 255, 255, .2) 75%, 
			      transparent 75%, 
			      transparent
			   );
			z-index: 1;
			-webkit-background-size: 50px 50px;
			-moz-background-size: 50px 50px;
			-webkit-animation: move 2s linear infinite;
			   -webkit-border-top-right-radius: 5px;
			-webkit-border-bottom-right-radius: 5px;
			       -moz-border-radius-topright: 5px;
			    -moz-border-radius-bottomright: 5px;
			           border-top-right-radius: 5px;
			        border-bottom-right-radius: 5px;
			    -webkit-border-top-left-radius: 5px;
			 -webkit-border-bottom-left-radius: 5px;
			        -moz-border-radius-topleft: 5px;
			     -moz-border-radius-bottomleft: 5px;
			            border-top-left-radius: 5px;
			         border-bottom-left-radius: 5px;
			overflow: hidden;
		}
		
		.animate > span:after {
			display: none;
		}
	@-webkit-keyframes move {
		    0% {
		       background-position: 0 0;
		    }
		    100% {
		       background-position: 50px 50px;
		    }
		}
.ref-field {
	border: 2px solid #005497;
	background: #fff;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	color: #008ae3;
	-webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 1 1px 1px;
	-moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 1 1px 1px;
	box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 1 1px 1px;
	padding: 5px;
	margin-top: 25px;
	margin-bottom: 20px;
	width: 350px;
	text-align: center;
	font-family: 'Asap', sans-serif;
	font-weight: 300;
	font-size: 20px
}
		
.form-container{
	text-align:left;
	margin-top:20px;
}
.form-field {
   border: 2px solid #0088e3;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
   height:25px;
   text-align:left;
   color: #000;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(000,000,000,0.7) 0 0px 0px;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(000,000,000,0.7) 0 0px 0px;
   box-shadow: rgba(255,255,255,0.4) 0 0px 0, inset rgba(000,000,000,0.7) 0 0px 0px;
   padding:2px;
   margin-bottom:15px;
   width:280px;
   }

.form-title {
   margin-bottom:5px;
   color: #0088e3;
   text-shadow: #ffffff 0 1px 0;
   }
   
   
.action-button {
  position: relative;
  overflow: hidden;  
  color: #fff;
  text-align: center;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  user-select: none;
  border:none;
  font-family: 'Asap', sans-serif;
  -webkit-appearance: none;
}
.action-button:hover {
	
	cursor: pointer;
}

.layer2 {
   display: inline-block;
   vertical-align: middle;
   position: relative;
   border: 1px solid;
   border-radius: 4px;
   box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.19); 
   border-color: #0F80AE #0F80AE #11698D #0F80AE;
   background: linear-gradient(#1683d0, #0d64ae);
 }
 .layer2:hover {
  border-color: #0F79A3 #0F79A3 #0F6383 #0F79A3;
  text-decoration: none;
  background: linear-gradient(#1d76db, #0f70ba);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.24), 0 1px 2px 0 rgba(0, 0, 0, 0.11);
	}
  .layer2:active {
    box-shadow: inset 0 2px 3px 0 rgba(0, 0, 0, 0.12), inset 0 -1px 2px 0 rgba(0, 0, 0, 0.06), 0 1px 2px 0 rgba(0, 0, 0, 0.11);
    background: linear-gradient(#2583da, #206ece);
  }
  
    .layer3 {
      display: inline-block;
      vertical-align: middle;
	  font-weight:normal;
      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
      color: #fff;
    }
		.layer3:active { 
      color: #fff; 
      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); 
    }
	
.message-status{
	width: 500px;
    height: 40px;
	line-height:40px;
	text-align:center;
    position: absolute;
    top:0;
	bottom:0;
	left:0;
	right:0;
	z-index:200;
    margin: auto;
	font-family:'Asap', sans-serif;
	font-size:16px;
	display:none;
	color:#FFF;
	background-color:#1EDA71;
	border-radius:5px;
}
.scroll-faq{
	overflow:scroll;
	width:290px; 
	margin:20px 0 0 5px; 
	height:400px;
}
.scroll-faq::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
.scroll-faq::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}