/* CSS Document */



/*------------------------------------------------------*/

*{
	margin:0;
	padding:0;	
}

html{
	height:100%;
	font-size:14px;
	line-height:160%;
}

body{
	min-width:320px;
	background:#FFF; 
	font-family:Arial, Helvetica, sans-serif;
	color:#FFF;
	text-align:center;	
	position:relative;
	min-height:100%;
	
	line-height:130%;

	
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	text-size-adjust: none;
	overflow-x:hidden;
	overflow-y:auto;
	
	
	height:100%;
	/*overflow:hidden;*/
}

/*--- REAL SIZE CHECKER ----*/
#current_size_checker_tl{
	position:fixed;
	z-index:0;
	top:0;
	left:0;
	width:0;
	height:0;
	background:transparent none;
}
#current_size_checker_tr{
	position:fixed;
	z-index:0;
	top:0;
	right:0;
	width:0;
	height:0;
	background:transparent none;
}

#current_size_checker_bl{
	position:fixed;
	z-index:0;
	bottom:0;
	left:0;
	width:0;
	height:0;
	background:transparent none;
}
#current_size_checker_br{
	position:fixed;
	z-index:0;
	bottom:0;
	right:0;
	width:0;
	height:0;
	background:transparent none;
}



.clear{
	float:none; 
	clear:both;
	height:0;
	line-height:0;
	font-size:0.0001em;
	overflow:hidden;
	display:block;
}

#cache{
	width:0;
	height:0;
	overflow:hidden;	
}

a img{
	border:none;	
}

li{
	list-style:none none outside;	
}



/*--------------------------------------------------------*/


#root{
	position:relative;	
	height:100%;
}

.wBloc{
	margin:auto;	
	/*width:1000px;*/
	max-width:1300px;
	/*min-width:580px;*/
	text-align:left;
	position:relative;
	padding:0 30px 0 30px;
	
	
}

/*-----------------------------------------------------------*/

#cache{
	height:0;
	width:0;
	overflow:hidden;
	line-height:0.000001em;
	font-size:0.000001em;	
}

#appContainer{
	position:relative;	
	width:100%;
	height:100%;
	overflow:hidden;
	
	margin:auto;
	width:640px;
	/*max-width:640px;*/
	/*min-height:900px;*/
	
	font-family:'hellobank',Arial, Helvetica, sans-serif;
}

#contents{
	position:relative;
	width:100%;
	height:100%;
	visibility:hidden;
}

#globalLoader{
	position:absolute;	
	color:#000;
	width:100%;
	padding-top:150px;
	text-align:center;
	
	font-family:'hellobank_bold',Arial, Helvetica, sans-serif;
	font-size:25px;
	line-height:35px;
}

#smartLoader{
	position:absolute;	
	color:#000;
	display:none;
}

#tests{
	position:absolute;
	top:0;
	left:0;
	text-align:left;
	z-index:9999;
	font-size:12px;	
	color:#000;
	
	display:none;
}


.screen{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;	
}

.home{
	background:url(../_img/bg_1.jpg) no-repeat center center;
	background-size:cover;
	
}

.home .logo{
	display:inline-block;
	width:207px;
	height:226px;
	margin-bottom:55px;
}

.smallHeight .home .logo{
	height:150px;
	width:auto;
	margin-bottom:15px;
}

.home .ctn{
	font-family:'hellobank_light',Arial, Helvetica, sans-serif;
	font-size:28px;
	line-height:32px;
	color:#FFF;
	padding:0 65px;
	margin-bottom:65px;
}

.smallHeight .home .ctn{
	margin-bottom:35px;
}



.home .ctn h2{
	font-family:'hellobank_bold',Arial, Helvetica, sans-serif;
	font-weight:normal;
	font-size:28px;
	line-height:32px;
	margin-bottom:40px;
}

.smallHeight .home .ctn h2{
	margin-bottom:25px;
}

.home .ctn p{
	margin-bottom:33px;
}

.smallHeight .home .ctn p{
	margin-bottom:20px;
}

.home a.launchBtn{
	display:inline-block;
	color:#FFFFFF;
	background:#07adc5;	
	text-decoration:none;
	font-size:32px;
	line-height:33px;
	font-family:'hellobank_bold',Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	padding:49px 125px;
	
	-moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 6px rgba(0,0,0,0.5);
}

.home a.launchBtn:active{
	background-color:#0082a8;
}


.slides{
	background:#FFF;
	display:none;
}	

.slides .top{
	border-bottom:2px solid #cecece;
	padding:10px 0;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	background:#FFF;
	z-index:992;
}

.slides .logo{
	height:105px;	
}
.smallHeight .slides .top{
	padding:5px 0;
}
.smallHeight .slides .logo{
	height:60px;	
}

#cardsContainer{
	position:relative;	
	height:735px;

	overflow:visible;
}

#cards{
	position:relative;	
}

#swipeDetector{
	position:absolute;
	z-index:800;
	top:0;
	left:0;
	width:100%;
	height:100%;
	cursor:pointer;
}

.card{
	width:600px;
	height:705px;
	overflow:hidden;
	/*border:2px solid #d0d0d0;*/
	margin:auto;
	
	/*
	border-radius: 10px;	
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px; 
	*/
	
	border-radius: 10px;	
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px; 
	
	position:absolute;
	z-index:10;
	top:0;
	left:20px;
	
	/*background:#FFF;*/
	
	background:url(../_img/card_bg.png) no-repeat 0 0;
	
	cursor:pointer;
	
	
	
	-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);
	-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);
	box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);
}

.card .illustration{
	background:#FFF no-repeat center center;
	/*background-size:cover;*/
	height:597px;
	
	border-bottom:2px solid #d0d0d0;
	
	border-top-radius: 10px;	
	-moz-border-top-radius: 10px;
	-webkit-border-top-radius: 10px; 
	
	position:relative;

	
}

.card .commentairePreview{
	position:absolute;
	left:15px;
	bottom:15px;
	width:534px;
	padding:10px 15px;
	background:#d8d8d8;
	border:1px solid #b1b1b1;
	color:#3a3a3a;
	text-align:left;
	font-size:18px;
	line-height:21px;
	
	border-radius: 5px;	
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px; 
	
	display:none;
	
	z-index:10;
	
	
}

.card .anim{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:1;
	background:#FFF;
	background-size:contain;
	display:none;
	overflow:hidden;
	
/*
	top:2px;
	left:2px;
	width:596px;
	height: 596px;
	border-radius: 5px;	
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;*/
}

.card .anim .videoPlayer{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	
	top:-1px;
	left:-1px;
	width:602px;
	height:602px;
	
	background:none !important;
}

.card .anim .videoPlayer .vjs-tech{
	width:100% !important;
	height:100% !important;
}

.card .anim .gifPlayer{
	/*text-align:center;
	
	position:absolute;
	top:50%;	
	left:0;
	width:100%;
	-moz-transform:    translateY(-50%);
    -o-transform:      translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform:         translateY(-50%);
	
	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')";
	filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=1,
            M12=0,
            M21=0,
            M22=1,
            SizingMethod='auto expand');*/
}

.card .anim .gifPlayer img{
	max-width:600px;
	max-height:597px;
}

.card .description{
	
	color:#3a3a3a;
	font-family:'hellobank_bold',Arial, Helvetica, sans-serif;
	
	text-align:left;
	
	height:100px;
	overflow:hidden;

}

.card .description .descInner{
	padding:15px 20px 15px 20px;

}

.card .description .descInnerTxt{
	font-size:26px;
	line-height:31px;
}

#actions{
	position:absolute;	
	z-index:980;
	left:0;
	bottom:0;
	width:640px;
	height:208px;
	
	background:url(../_img/actions_bg.png) no-repeat center 0;
}

.smallHeight #actions{
	height:105px;
	background-size:auto 120px;

}

#actions a{
	position:absolute;
	display:block;
	/*background:rgba(153,0,0,0.5);*/
	z-index:10;	
}

#actions a.btnBack{
	width:100px;
	height:110px;
	left:66px;
	top:20px;
}

.smallHeight #actions a.btnBack{
	width:63px;
	height:63px;
	top:10px;
	left:170px;
}

#actions a.btnComment{
	width:100px;
	height:110px;
	right:66px;
	top:20px;
}

.smallHeight #actions a.btnComment{
	width:63px;
	height:63px;
	top:10px;
	right:170px;
}

#actions a.btnLike{
	width:155px;
	height:166px;
	
	right:166px;
	top:20px;
}

.smallHeight #actions a.btnLike{
	width:90px;
	height:90px;
	top:10px;
	right:230px;
}

#actions a.btnUnlike{
	width:153px;
	height:166px;
	left:166px;
	top:20px;
}

.smallHeight #actions a.btnUnlike{
	width:90px;
	height:90px;
	top:10px;
	left:230px;
}


#comment{
	z-index:990;
	background:#fafafa;
	height:220px;
	position:fixed;
	bottom:0;
	left:0;
	width:100%;	
	border-top:2px solid #cecece;
}

#comment_form{
	padding:20px 40px 0 40px;	
}

#comment textarea{
	width:100%;
	height:120px;
	
	-webkit-box-sizing : border-box;‌​
    -moz-box-sizing : border-box;
    box-sizing : border-box;	
	
	display:block;
	margin-bottom:20px;
	
	resize:none;
	color:#3a3a3a;
	font-size:20px;
	font-family:'hellobank',Arial, Helvetica, sans-serif;
	line-height:22px;
	padding:20px 20px;
	
	border:1px solid #cecece;
	background:#FFF;
	
	border-radius: 10px;	
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px; 
}

#comment .submit{
	display:none;
}

#comment a.btnSubmit{
	background:url(../_img/bg_btn_comment.png)	 no-repeat center top;
	display:block;
	overflow:hidden;
	width:188px;
	height:50px;
	color:#FFF;
	text-decoration:none;
	text-align:center;
	float:right;
	font-size:20px;
	font-family:'hellobank',Arial, Helvetica, sans-serif;
	padding-top:15px;
}

#comment a.btnClose{
	display:block;
	background:url(../_img/closeBtn.png) no-repeat center center;
	position:absolute;
	top:0;
	right:0;
	width:35px;
	height:35px;
}


#noteApp{
	z-index:991;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(../_img/bg_2.jpg) no-repeat center center;
	
	background-size:cover;
	display:none;
}

#noteApp .txt{
	font-size:28px;
	color:#FFF;
	font-family:'hellobank_bold',Arial, Helvetica, sans-serif;
}

.stars{
	display:inline-block;
	background:url(../_img/star_void.png) repeat-x 0 0;	
	height:77px;
	width:435px;
	margin:50px 0;
	cursor:pointer;
	position:relative;
	overflow:hidden;
}

.stars .track{
	display:block;
	height:100%;
	width:0%;
	background:url(../_img/star_plain.png) repeat-x 0 0;
}

#noteApp a.btnValider{
	display:inline-block;
	color:#FFFFFF;
	background:#07adc5;	
	text-decoration:none;
	font-size:32px;
	line-height:33px;
	font-family:'hellobank_bold',Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	padding:49px 125px;
	
	-moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 6px rgba(0,0,0,0.5);

}

#noteApp a.btnValider:active{
	background-color:#0082a8;
}

#noteApp .lastStep{
	display:none;	
}
#noteApp .lastStep .txt{
	font-size:36px;
	line-height:40px;
}


body.results{
	background:url(../_img/results_bg.jpg) no-repeat center center;
	background-size:cover;
	
}

body.results9{
	background:url(../_img/results9_bg.jpg) no-repeat center center;
	background-size:cover;
	
}

#results{
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	text-align:center;
	overflow:hidden;
}
#results_likes{
	
	background:url(../_img/results_likes_bg.png) no-repeat 0 0;
	width:1112px;
	height:712px;
	overflow:hidden;
	margin:auto;
	position:relative;
}

body.results9 #results_likes{
	background-image:url(../_img/results9_likes_bg.png)	;
	width:1440px;
	height:900px;
}

#results_unlikes{
	
	background:url(../_img/results_unlikes_bg.png) no-repeat 0 0;
	width:1112px;
	height:712px;
	overflow:hidden;
	margin:auto;
	position:relative;
}

body.results9 #results_unlikes{
	background-image:url(../_img/results9_unlikes_bg.png)	;
	width:1440px;
	height:900px;
}

#results .rlabel{
	font-size:17px;
	line-height:22px;
	color:#FFF;
	text-align:center;
	font-family:'hellobank_bold',Arial, Helvetica, sans-serif;
	width:305px;
	position:absolute;
	top:392px;
	
}

body.results9 #results .rlabel{
	font-size:12px;
	line-height:12px;
	width:208px;
	height:52px;
	top:320px;
	letter-spacing:-0.5px;
}

body.results9 #results .rlabel span{
	display:block;	
	padding:0 2px;
}

#results .rlabel1{
	left:33px;
}
#results .rlabel2{
	left:404px;
}
#results .rlabel3{
	left:772px;
}

body.results9 #results .rlabel1{
	left:75px;
}
body.results9 #results .rlabel2{
	left:347px;
}
body.results9 #results .rlabel3{
	left:617px;
}
body.results9 #results .rlabel4{
	left:889px;
}
body.results9 #results .rlabel5{
	left:1161px;
}
body.results9 #results .rlabel6{
	top:610px;
	left:210px;
}
body.results9 #results .rlabel7{
	top:610px;
	left:480px;
}
body.results9 #results .rlabel8{
	top:610px;
	left:753px;
}
body.results9 #results .rlabel9{
	top:610px;
	left:1023px;
}

#results .rillustration{
	position:absolute;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:contain;
	background-color:#313831;
	
	border-radius: 3px;	
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px; 
	
	width:288px;
	height:228px;
	
	top:466px;
}

body.results9 #results .rillustration{
	width:185px;
	height:145px;
	top:381px;
}

#results .rillustration1{
	left:42px;
}
#results .rillustration2{
	left:412px;
}
#results .rillustration3{
	left:782px;
}

body.results9 #results .rillustration1{
	left:85px;
}
body.results9 #results .rillustration2{
	left:357px;
}
body.results9 #results .rillustration3{
	left:628px;
}
body.results9 #results .rillustration4{
	left:899px;
}
body.results9 #results .rillustration5{
	left:1170px;
}
body.results9 #results .rillustration6{
	top:670px;
	left:220px;
}
body.results9 #results .rillustration7{
	top:670px;
	left:491px;
}
body.results9 #results .rillustration8{
	top:670px;
	left:762px;
}
body.results9 #results .rillustration9{
	top:670px;
	left:1035px;
}

#results.notes{
	background:url(../_img/results_notes_bg1.png) no-repeat center center;
	
}

#results_notes{
	background:url(../_img/results_notes_bg2.png) no-repeat 0 0;
	width:540px;
	height:236px;
	margin:auto;
	text-align:center;
}

.rstars{
	display:inline-block;
	background:url(../_img/star_void.png) repeat-x 5px 0;	
	height:77px;
	width:430px;
	margin:85px 0;
	cursor:pointer;
	position:relative;
	overflow:hidden;
}

.rtrack{
	display:block;
	height:100%;
	width:0%;
	background:url(../_img/star_plain.png) repeat-x 5px 0;
}


.verticalAlign2{

	position:absolute;
	top:50%;	
	left:0;
	width:100%;
	-moz-transform:    translateY(-50%);
    -o-transform:      translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform:         translateY(-50%);
	
	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')";
	filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=1,
            M12=0,
            M21=0,
            M22=1,
            SizingMethod='auto expand');
}


#dynamicResults{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;	
	background:url(../_img/results_bg.jpg) no-repeat center center;
	background-size:cover;
	z-index:100;
}

#dynamicResultsCard{
	position:absolute;
	top:50%;	
	left:50%;
	
	margin-left:-172px;
	margin-top:-233px;
	
	background:url(../_img/dynamicResultsCard.png) no-repeat center center;
	width:344px;
	height:466px;
	overflow:visible;
}

#dynamicResultsCard .number{
	position:absolute;
	text-align:center;
	top:40px;
	left:0;
	width:100%;
	color:#ff5a64;
	font-size:80px;
	font-family:'hellobank_bold',Arial, Helvetica, sans-serif;
}

#dynamicResultsCard .labelCtn{
	position:absolute;
	text-align:center;
	font-family:'hellobank_bold',Arial, Helvetica, sans-serif;
	color:#FFF;
	width:294px;
	height: 125px;
    top: 85px;
    left: 23px;
	overflow:hidden;

}

#dynamicResultsCard .visuel{
	position:absolute;	
	
	background-repeat:no-repeat;
	background-position:center center;
	background-size:contain;
	background-color:#313831;
	
	border-radius: 3px;	
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px; 
	
	width:288px;
	height:228px;
	
	left: 27px;
    top: 220px;
}

#dynamicResultsCard .likes{
	position:absolute;
	z-index:100;
	background:url(../_img/like.png) no-repeat left center;
	padding:12px 0 12px 50px;
	background-size:40px auto;
	color:#FFF;
	font-size:40px;
	font-family:'hellobank_bold',Arial, Helvetica, sans-serif;
	text-align:left;
	left:320px;
	top:160px;
}

#dynamicResultsCard .unlikes{
	position:absolute;
	z-index:100;
	background:url(../_img/unlike.png) no-repeat right center;
	padding:12px 50px 12px 0;
	background-size:40px auto;
	color:#FFF;
	font-size:40px;
	font-family:'hellobank_bold',Arial, Helvetica, sans-serif;
	text-align:right;
	right:320px;
	top:160px;
}

#dynamicResults a.btnNav:link,
#dynamicResults a.btnNav:visited{
	color:#FFF;
	text-decoration:underline;
	display:inline-block;
	margin:5px;
}