/* CSS document */
* {margin:0 ; padding:0;}
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline; text-decoration: none; outline:none; list-style:none;}
a, img {border:0}
input,input:focus {outline:0}


@font-face {font-family: "interstate";font-style: normal;font-weight: normal;src: url("../fonts/interstate.eot?#iefix") format("embedded-opentype"), url("../fonts/interstate.woff") format("woff"), url("../fonts/interstate.ttf") format("truetype"), url("../fonts/interstate.svg#Citibank") format("svg");}

@font-face {font-family: "interstate-light";font-style: normal;font-weight: normal;src: url("../fonts/interstate-light.eot?#iefix") format("embedded-opentype"), url("../fonts/interstate-light.woff") format("woff"), url("../fonts/interstate-light.sitx") format("truetype"), url("../fonts/interstate-light.svg#Citibank") format("svg");}

@font-face {font-family: "interstate-extralight";font-style: normal;font-weight: normal;src: url("../fonts/interstate_extralight.eot?#iefix") format("embedded-opentype"), url("../fonts/interstate_extralight.woff") format("woff"), url("../fonts/interstate_extralight.sitx") format("truetype"), url("../fonts/interstate_extralight.svg#Citibank") format("svg");}

@font-face {font-family: "interstate-bold";font-style: normal;font-weight: normal;src: url("../fonts/interstate_bold.eot?#iefix") format("embedded-opentype"), url("../fonts/interstate_bold.woff") format("woff"), url("../fonts/interstate_bold.ttf") format("truetype"), url("../fonts/interstate_bold.svg#Citibank") format("svg");}

html, body { margin:0; padding:0; height:100%; font-family: "interstate-light",arial; color:#3d3d3d}
.bold {font-family:"interstate-bold",arial}
h2 {font-size:39px; padding-bottom:22px}
h3 {font-size:34px; padding-bottom:21px}
h4 {font-size:25px; padding-bottom:13px;}
h5 {font-size:19px; padding-bottom:10px; font-family:"interstate",arial}
.whiteTxt { color:#fff}
.clear {clear:both;}
.header { height:83px; background: url(../images/header.png) repeat-x; }
.header .container, .header .logo , .workarea .container ,.footer .container {height:100%;}
.container { width:1400px; max-width: 90%; margin:0 auto }
.logohyper { display:inline-block; background: url(../images/logo.png) no-repeat 0 0; float: left; height: 42px; width: 111px;}
.tblht-div { display:table; height:100%;}
.tbl-midcell { display:table-cell; vertical-align:middle;}


.workarea {height: calc(100% - 183px); background-image:url(../images/deskbg.jpg) ; background-repeat:no-repeat; background-size:cover; background-position:center; position:relative; overflow: hidden;}
.workarea:after { content:''; position:absolute; left:0; top:0; width:100%; height:100%; background:#032445; opacity:0; transition:all 0.5s}
.workarea.laststep:after{opacity:1;}
.workarea .tblht-div { width:100%;}
.workarea .container { position:relative;    z-index: 3; }
.surevey { padding:6% 0} 
.survey-left { float:left;  }
.survey-right { float:right;z-index: 0; transition: all 1s;width:38%;position:relative; position:absolute; right:0; top:50%; transform:translateY(-50%)}

.whiteHr { height:5px; position:relative ; margin-bottom:30px}
.whiteHr:after { position:absolute; content:''; height:100%; width:30px; left:0; top:0; background:#fff; }
.surLtSection { display:none ;  }
.botstart { font-size:19px; }
.botstart p {padding-bottom: 30px;}
#robot { width:68%; position:relative; transform:scale(1) translateX(10%); transition: all 1s; z-index:4}
#robot.step1pos {  transform:scale(0.6) translateX(20%);  }

#start { width:490px; padding-left:20% }
#startnow, .orangeBtn { width:224px; text-align:center; padding:15px 10px; display:inline-block; font-size:22px; color:#fff; background:#CD6001; margin-top:10px;}

.prevstep { position:absolute; top:50px; left:0; width:38px; height:28px; background:url(../images/prevarw.png) no-repeat; display:inline-block ;}
.nextstep { position:absolute; top:50px; right:0; width:38px; height:28px; background:url(../images/nextarw.png) no-repeat; display:inline-block;   }
.nextstep,.prevstep {z-index: -100; cursor:default;}
.nextstep.fadinwarw,.prevstep.fadinwarw {z-index: 100;cursor:pointer;}
.mbot30 { margin-bottom:30px;}
.ratingslider { margin-top:30px; padding-top:32px;}
.ratingslider li {float:left; width:70px; }
.rateLbl {text-align:center}
.rateLbl input[type="radio"]{ opacity:0; position:absolute; z-index:-11; }
.rateLbl span { font-size:17px;cursor:pointer; display:inline-block; height:58px; width:58px;  position:relative; text-align:center;line-height:58px; }
.rateLbl span:after { content:''; width:58px; height:58px; position:absolute; top:0; left:0;background:rgba(0,0,0,0.1);  border-radius:50%; transition:all 0.5s; }
.rateLbl span:before {content:''; width:62px; height:62px; position:absolute; top:-4px; left:-4px; border:solid 2px #fff; border-radius:50%; transform:scale(0); transition:all 0.5s;}
.rateLbl input[type="radio"]:checked + span:after { background:#fff; transform:scale(0.75)}
.rateLbl span i {   z-index:6; color:#222;display:inline-block; width:100%; height:100%; position:relative;}
.rateLbl span i:after {content:''; width:6px; height:6px; background:#CE5F02; border-radius:50%; position:absolute; top:-18px; left:0 ; right:0; margin:auto; transform: scale(0); transition:all 0.5s;}
.rateLbl input[type="radio"]:checked + span i { color:#CE5F02; }
.rateLbl input[type="radio"]:checked + span:before ,.rateLbl input[type="radio"]:checked + span i:after{ transform:scale(1)}
.yesorno { margin-top:70px}
.tbl-div {display:table}
.tbl-row { display:table-row;}
.yesorno { font-size:18px; font-family:"interstate",arial}
.st3cell { width:250px}
.yesorno .tbl-midcell { padding-bottom:30px; }
.ynEl { float:left; margin:0 8px; cursor:pointer; width:120px; text-align:center; position:relative; height:66px}
.ynEl span{display:inline-block; height:100%; width:100%; position:relative; line-height:66px; font-size:16px;}
.ynEl span:after {position:absolute; width:98px; height:48px; content:'';background:rgba(0,0,0,0.19);  border-radius:30px;}
.ynEl span:before {position:absolute; width:110px; height:56px; content:''; border:solid 3px #fff ; border-radius:30px; transform:scale(0) }
.ynEl span:after, .ynEl span:before { left:0; right:0 ; top:0; bottom:0; margin:auto; transition: all 0.5s}
.ynEl input[type="radio"] { opacity:0; z-index:-11; position:absolute}
.ynEl input[type="radio"]:checked + span:after { background:#fff;}
.ynEl input[type="radio"]:checked + span:before { transform:scale(1) }
.ynEl span i { position:relative ; z-index:4}
.yninputs { padding-left:50px}
.ynEl.ynSome { width:130px;}
.ynEl.ynSome span:after {position:absolute; width:112px; height:48px; content:'';background:rgba(0,0,0,0.19);  border-radius:30px;}
.ynEl.ynSome span:before {position:absolute; width:124px; height:56px; content:''; border:solid 3px #fff ; border-radius:30px; transform:scale(0) }
.txtArea {position:relative; width:502px; min-height:200px; background-image: -webkit-repeating-linear-gradient(top, transparent 0, transparent 62px, rgba(255,255, 255, 0.5) 62px, rgba(255,255, 255, 0.5) 63px); background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 62px, rgba(255,255, 255, 0.5) 62px, rgba(255,255, 255, 0.5) 63px); line-height:58px;}

.txtArea textarea {border:0; outline:0; width:100%; height:100%; line-height:62px; resize:none; position:relative; z-index:2 ;background:none; color:#2d2d2d; font-size:17px; font-family:"interstate-light",arial; overflow:auto}

.txtArea textarea::-webkit-input-placeholder {
	opacity: 1;
	color: #2c3e50;
}

.txtArea textarea:-moz-placeholder {
	/* FF 4-18 */
	opacity: 1;
}

.txtArea textarea::-moz-placeholder {
	/* FF 19+ */
	opacity: 1;
}

.txtArea textarea:-ms-input-placeholder {
	/* IE 10+ */
	opacity: 1;
}


.st4cell { width:320px}

.checboxList li { margin-bottom: 20px ; float:left; width:100%;}
.checboxList li > div { width:50%; float:left;}
.checkLbl { cursor:pointer; }
.checkLbl input[type="checkbox"] { opacity:0; position:absolute; z-index:-11;}
.checkLbl span { display:inline-block; padding-left:62px; position:relative; color:#fff; font-size:18px}
.checkLbl span:after { content:''; width:15px; height:15px; border:solid 3px #fff; position:absolute; left:0; top:0;}
.checkLbl input[type="checkbox"]:checked + span:before { content:'';position:absolute; width:9px; height:10px; background:#fff; left:6px; top:5px  }
.relativeEl { position:relative;}
.lbleg { position:absolute; top:calc(100% + 5px);  left:0; display:inline-block; font-style:normal; font-size: 13px; color:#fff; padding-left:62px; width:260px;}
#step7 { width:800px}
#otherff {background:none; border-bottom: solid 1px #fff;color:#fff; border-width:0 0 1px 0; font-size:18px; font-family:"interstate-light",arial; margin-left:10px ;width:50%}
.checboxList li > div.fullwid {width:100%;} 
#robotFinal {width:275px}
#step8 {width:100%}
.finalStep { width:920px; margin:0 auto; position:relative;}
.finalStep .tbl-midcell { padding-top:50px; padding-bottom:50px;display: inline-block;}
.finalStep .tbl-midcell {
	padding-left: 8%;
    padding-right: 5%;
    background: #fff;
    max-width: 400px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.finalStep .robo-img{
	position: absolute;
    left: -350px;
    top: 50%;
    transform: translateY(-50%);
}
#submit {width:96px; height:96px; bottom:58px; right:-48px;display:inline-block; position:absolute; background:url(../images/submit.png) center no-repeat #CD6001; border-radius:50%;}
.bluTxt {color:#006CAF;}
.finaldetails { margin-top: 25px; width:360px; max-width:90%;}
.finaldetails li { margin-bottom:26px;}
.finalTxt { width:100%; padding:16px; box-sizing:border-box; font-family:"interstate-light",arial; font-size:14px; border:solid 1px #888}
.mandydiscl { font-size: 12px; color:#888}
.prevstep,.nextstep { transform:translateY(-15px); transition: all 0.5s; opacity:0;}
.fadinwarw.nextstep  , .fadinwarw.prevstep{ transform:translateY(0);  opacity:1;}

.exitanime {transform:translateY(0); }
.stepnumb { font-size: 53vh; color: rgba(0,0,0,0.15); width: 100%; height: 100%; position: absolute; top: 0; left: 0; text-align: center; z-index: 1; line-height: 500px; font-family: "interstate-extralight",arial; opacity:0; transition:all 1s}
.showopac { opacity:1;}
.rt-align {text-align:right;}
.pager {position:absolute; bottom:50%; right:0;  transform:translateY(15px) ; opacity:0; transition: all 0.5s;}
.pager.uppager { transform:translateY(0) ; opacity:1;}
.pager li { display:block; width:14px; height:14px; border:solid 1px rgba(0,0,0,0.6); border-radius:50%; cursor:default; margin-bottom:10px}
.pager li.activepage {background:#fff; border-color:#fff;-webkit-box-shadow: 7px 7px 20px 0px rgba(50, 50, 50, 0.34);
-moz-box-shadow: 7px 7px 20px 0px rgba(50, 50, 50, 0.34);box-shadow: 7px 7px 20px 0px rgba(50, 50, 50, 0.34); } 
.mobilepager.pager li { display: inline-block; margin: 0 10px 0 0;}
.mobilepager{    bottom: 20px;}
.footer { height:100px; font-size:12px; color:#888; background:#fff;}
.footer .tblht-div {width:100%;}
.survey-left  { width:60%}
.inline-next {width:502px; text-align:right}
.inline-next a{display:inline-block; width:40px; height:40px; border-radius:50%; border:solid 1px #fff;
 background:url(../images/nextarw.png) no-repeat center; background-size: 20px auto;}
.downarw { width:24px; height:14px; display:inline-block; background:url(../images/down.png) no-repeat;  margin-left:10px; background-position: 0 1px;display:none; transition: all 0.5s}
.yesorno .tbl-midcell span {float:left;}
.slidecont {width:100%;}
.toprobot {display:none}
.mandy-notfilled {border-color:red;}
#betaform {height:100%;}
.slidecont{  padding-top: 24px; height:100px; z-index: 1;position: relative;}
.slidecont .ratingslider{margin-top:0; padding-top:32px}
.accord br {display:none}
.mobilepager {display:none}
.finalThanks { font-family: "interstate-bold",arial;}
.workarea .container:after {width: 100%; height: 100%; z-index:999;content: ''; top: 0; left: 0;position: absolute; display: none;  }
.workarea .container.blockwork:after {display:block }
.mCSB_container {
    padding-bottom: 10px;
}
p.note{font-size:12px;line-height:16px;}
.error{font-size:12px;line-height:16px;color:red;display:none;}
@media (min-width:1201px) and (max-width:1300px) {
	.accord  br{display:none}
	.accord  {width:200px;}
	.stepnumb { font-size: 24vmax}
}
@media (max-width:1200px) {
	.yesorno .tbl-midcell, .yesorno .tbl-div  ,.yesorno .tbl-row { display:block; width:100%; float:left; padding-left:0}
	.yesorno .tbl-midcell br{ display:none;}
	.downarw { display:inline-block}
	.yesorno .tbl-midcell.yninputs { display:none;}
	.yesorno .tbl-row  { margin-bottom:15px}
	.yesorno .tbl-midcell span {cursor:pointer;}
	.yesorno .curaccord + .yninputs {display:block}
	.yesorno .curaccord .downarw{transform: rotate(-180deg);}
	.firstlist {width:50%; height:200px;overflow:hidden; margin-bottom:20px} 
	.firstlist li > div {width:100%; margin-bottom:20px}
	.firstlist li {margin-bottom:0}
	.firstlist .checboxList {width:100%;}
	.checboxList {width:50%}
	#otherff {width:100%; margin-top:8px; margin-left:0}
	.lbleg {position:static; padding-top:5px; width:100%;}
	.firstlist .mCustomScrollBox:after { content: ''; position: absolute; top: 101%; left: -2%; width: 97%; height: 100%; -webkit-box-shadow: 0px -3px 12px 0px rgba(14, 26, 41, 0.56); 
	-moz-box-shadow: 0px -3px 12px 0px rgba(14, 26, 41, 0.56); box-shadow: 1px -3px 65px 0px rgba(14, 26, 41, 0.56)}
	#step7 {width:auto}
	.slidecont{overflow:hidden; padding-top: 0; height:100px}
	.ratingslider {max-width:780px;padding-left: 5px;}
	.slidecont .mCSB_draggerContainer {display:none;}
	.laststep .survey-right { display:none;}
}
 
@media (max-height:890px) and (min-width:960px) and (orientation: landscape){
	p {font-size:1.2vmax}
	h2 {font-size:2vmax; padding-bottom:22px}
	h3 {font-size:1.5vmax; padding-bottom:21px}
	h5 {font-size:1.25vmax; padding-bottom:10px; font-family:"interstate",arial}
	.ratingslider li { width: 60px; margin-right:4px }
	.rateLbl span { width:56px; height:56px; line-height:58px;}
	.rateLbl span:after { width:56px; height:56px;}
	.rateLbl span:before { width:58px; height:58px;}
	.rateLbl span { font-size: 14px;}
	.prevstep, .nextstep { top:20px; width:28px ; background-size:28px auto;}
	.stepnumb { line-height:100%;}
	.yesorno { margin-top: 10px;}
	.yesorno .tbl-midcell {  padding-bottom: 10px;}
	.yesorno { font-size:1.3vmax;} 
	.yninputs { padding-left: 10px;}
	.ynEl span { font-size:1.1vmax}
	.footer p {font-size:0.8vmax;}
	.header { height:63px;}
	.footer { height: 70px}
	.workarea { height:calc(100% - 133px)}
	.rateLbl span:before { top:-3px; left:-3px}
	.survey-right {width:35%}
	.survey-left  { width:64%}
	.finalStep .tbl-midcell { padding-top: 25px;  padding-bottom: 25px;}
	#start h2.bold {font-size:2.4vmax}
	#start h3 { font-size:1.8vmax}
}


@media (max-width:1050px) and (min-width:800px){
	.stepnumb {font-size:22vmax}
	.survey-left { width:90%}
	.slidecont{overflow:scroll; }
	.finalStep { width:600px;}
	#robotFinal{ width:150px }
	.finalStep .tbl-midcell:first-child { padding-right:8%}
	.finalStep .tbl-midcell:nth-child(2) { padding-left:5%}
	.finalThanks { font-size:20px}
	.finalStep .robo-img {left: -268px;}
}

@media (max-width:800px) {
	.survey-right {display:none;}
	.survey-left {width:100%;}
	.workarea .container > .tbl-midcell { display: block; margin-top: 110px;}
	.firstlist {width:70%}
	.finalStep  {width:90%; display:block; max-width:400px; margin-top: 46px;margin-bottom: 46px;}
	.finalStep .robo-img {display:none;  }
	.finalStep .tbl-midcell {display: block;    padding: 34px;    padding-bottom: 56px;
	    position: relative;
    top: 0;
    transform: none;} 
	#submit { bottom: -58px; left:0; right:0; margin:auto;}
	.toprobot {display:block; text-align:center; margin-bottom:20px}
	.toprobot img {width:200px}
	#start {  width: 70%;  padding-left: 15%;}
	.finaldetails {width:100%}
	.slidecont{overflow:scroll; margin-bottom:50px }
	.pager { text-align:center;}
	.slidecont .mCSB_container {height:100px}
	.mobilepager {display:block}
	.deskpager {display: none;}
	.pager { width:100%; text-align:center;}
	.futureFeatures {margin-bottom:45px}
	.finaldetails { max-width:100%}
	.surLtSection  h2 br {display:none;}	
	.ratingslider li {
		width: 60px;
	}
	.rateLbl span {
		height: 48px;
		width: 48px;
		line-height: 48px;
	}
	.rateLbl span:before {
		width: 48px;
		height: 48px;
		top: -2px;
		left: -2px;
	}
	.rateLbl span:after {
		width: 48px;
		height: 48px;
	}
	.finalStep .tbl-midcell.thank-you-page{
		background: #032445;
		text-align: center;
	}
	.finalStep .tbl-midcell.thank-you-page .finalThanks {
		font-size: 25px;
		color: #fff;
	}
} 
@media (max-width:767px) and (orientation:portrait){
	.workarea { background-position:left 60% !important }
}
@media (max-width:767px) and (orientation:landscape){
	.workarea { background-position:left 12% !important }
}
@media (max-width:767px) {
	.workarea .container > .tbl-midcell {}
	.workarea {overflow: auto;   background:url(../images/mobbg.jpg)}
	.logohyper { height: 27px; width: 81px; background-size: auto 27px; )}
	.header {height:45px}
	.toprobot img {width:150px}
	#start { width: 80%; padding-left: 10%; }
	h2 {font-size:24px; padding-bottom:17px}
	h3 {font-size:21px; padding-bottom:14px}
	h4 {font-size:19px; padding-bottom:10px;}
	h5 {font-size:17px; padding-bottom:10px; font-family:"interstate",arial}
	.workarea > .container > .tblht-div, .workarea  .container > .tblht-div > .tbl-midcell { display:block}
	.workarea {height:auto; padding:20px 0 50px 0;min-height:calc(100% - 115px);  }
	.nextstep, .prevstep { top:0}
	.survey-left {margin-top:50px}
	 
	.ratingslider {padding-top:12px; margin-top:0}
	.yesorno .tbl-midcell { box-sizing: border-box;}
	.accord {padding-right: 30px; box-sizing: border-box; position: relative;}
	.downarw { position:absolute; top:10px; right:0;}
	.txtArea,.inline-next {width:100%}
	.firstlist {width:100%}
	.checboxList {width:90%}
	.finalStep .tbl-midcell:nth-child(2) { display: block; padding: 22px 22px 50px 22px;}
	.mobhide {display:none;}
	.finalThanks { font-size:21px}
	.txtArea{height: auto}
	.txtArea textarea {
		height: 122px;
	}
	.ratingslider {width:664px;}
	.pager{bottom: 20px;}
	.pager li{display: inline-block;margin:0 10px 0 0;}
} 
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
	.surLtSection  h2 br {display:block;}
	.yesorno .tbl-midcell {
		padding-bottom: 10px;
	}
	.checboxList li {margin-bottom: 20px;}
}
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
	.surLtSection  h2 br {display:block;}
	.yesorno .tbl-midcell {
		padding-bottom: 10px;
	}
	.checboxList li {margin-bottom: 20px;}
}
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {
	.surLtSection  h2 br {display:block;}
	.yesorno .tbl-midcell {
		padding-bottom: 10px;
	}
	.checboxList li {margin-bottom: 20px;}
}
@media (min-width:1280px) and (max-height:768px) {
	.surLtSection  h2 br {display:none;}
	.yesorno .tbl-midcell {padding-bottom: 0;}
	.checboxList li {margin-bottom: 12px;}
	.lbleg {width: 100%;}
}
@media (max-width:480px) and (orientation:portrait){
	.finalStep {width:100%;}
	.finalStep .tbl-midcell:nth-child(2) { padding: 0 12px 50px 12px;}
	.finalTxt { font-size:11px}
	.ynEl ,.ynEl.ynSome {display: block; margin: 0 auto;float: none;width: 170px;}
	.ynEl span:before,.ynEl.ynSome span:before {   width: 160px;  }
	.ynEl span:after,.ynEl.ynSome span:after {  width: 151px; }
}