/* Will be compiled down to a single stylesheet with your sass files */
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block
}
body {
    line-height: 1
}
ol, ul {
    list-style: none
}
blockquote, q {
    quotes: none
}
blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none
}
table {
    border-collapse: collapse;
    border-spacing: 0
}

/*	CSS by GHPD TEAM */

@font-face {
	font-family: bbvaDefaultFont;
	font-style: normal;
	font-weight: normal;
	src: url("https://storage.googleapis.com/bbva-front.appspot.com/fonts/bbvaweb/bbvaweb-book.woff") format("woff"),
	     url("https://storage.googleapis.com/bbva-front.appspot.com/fonts/bbvaweb/bbvaweb-book.ttf") format("opentype"),
	     url("https://storage.googleapis.com/bbva-front.appspot.com/fonts/bbvaweb/bbvaweb-book.svg") format("SVG"),
	     url("https://storage.googleapis.com/bbva-front.appspot.com/fonts/bbvaweb/bbvaweb-book.eot") format("embedded-opentype");
}

@font-face {
	font-family: bbvaLightFont;
	src: url("https://storage.googleapis.com/bbva-front.appspot.com/fonts/bbvaweb/bbvaweb-light.woff") format("woff"),
	     url("https://storage.googleapis.com/bbva-front.appspot.com/fonts/bbvaweb/bbvaweb-light.ttf") format("opentype"),
	     url("https://storage.googleapis.com/bbva-front.appspot.com/fonts/bbvaweb/bbvaweb-light.svg") format("SVG"),
	     url("https://storage.googleapis.com/bbva-front.appspot.com/fonts/bbvaweb/bbvaweb-light.eot") format("embedded-opentype");
}


.clearfix:after {
    content: ".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

.border{
	box-shadow: 0px 0px 10px 1px rgba(204, 204, 204, 0.75);
	-moz-box-shadow: 0px 0px 10px 1px rgba(204, 204, 204, 0.75);
	-webkit-box-shadow: 0px 0px 10px 1px rgba(204, 204, 204, 0.75);
}


html.logout,
html.logout body{
	height: 100%;
}

body {
	font-family: bbvaDefaultFont, Arial,"Helvetica Neue",Helvetica,sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: #000;
}

#app{
	width: 100%;
	margin: 0 auto;
	background: #fff url(bg_header.png) no-repeat 0 0;
	font-family: bbvaLightFont, Arial,"Helvetica Neue",Helvetica,sans-serif;
}

html.logout #app{
	background: none;
}

html.logout body #app{
	background: #fff url(bg_body.png) no-repeat 0 0;
	height: 100%;
}

header#top #logo{
	float: left;
	background: url('sprite-icons.png') no-repeat -102px -123px;
	width: 146px;
	height: 99px;
	margin-left: 30px;
}

header#top #logo span{
	display: none;
}

header#top #userOptions{
	float: right;
	width: calc(100% - 240px);
	margin-top: 23px;
	margin-right: 35px;
	text-align: right;
}

header#top #languageSelector{
	float: right;
	margin-right: 10px;
}

#languageSelector button.language{
	border: 0;
	background: 0;
	font-size: 13px;
	color:#0072c9;
}
#languageSelector button.language:focus{
	outline:0;
 	box-shadow: none !important;
  	border-color: rgba(0,0,0,0) !important;
  	outline: none !important;
}

.helpButton{
	width: 27px;
	height: 26px;
	float: right;
	padding-top: 3px;
}

.helpButton a{
	width: 27px;
	height: 26px;
	background: url(sprite-icons.png) no-repeat -74px -1px;
	display: block;
	border:0;
}

.helpButton span{
	display: none;
}

h1{
	color: #52bcec;
	font-size: 36px;
	font-family: bbvaLightFont, Arial,"Helvetica Neue",Helvetica,sans-serif;
	text-align: center;
	margin-top: 35px;
    margin-bottom: 41px;	
}

#content,
#unblock{
	width: 795px;
	overflow: hidden;
	margin: 0 auto;
	padding-bottom: 10px;
}

#unblock{
	text-align: center;
	margin-top: 20px;
}

section{
	width: 360px;
	background: #fff;
	height: auto;
	min-height: 435px;
}	

section.fotologin{
	height: 435px;
}	


div.head{
    font-size: 15px;
    color: #043f8d;
    font-family: bbvaDefaultFont;
    min-height: 59px;
    border-bottom: solid 1px #f0f1f2;
    padding-left: 23px;
    margin-top: 0px;
    padding-top: 20px;    
}

section.fotologin .helpButton{
    margin-right: 19px;
    margin-top: -5px;
}

section.credentials{
	float: left;
    margin-left: 5px;
    margin-top: 11px;	
}

section.credentials.unique{
	float: none;
    margin-left: auto;
    margin-right: auto;
    margin-top: 11px;	
}


section.fotologin{
	float: right;
    margin-right: 5px;	
    margin-top: 11px;    
}

section .photo{
	width: 65px;
	min-height: 65px;
	margin: 0 auto;
	background: url('sprite-icons.png') no-repeat -4px -3px;
	margin-top: 15px;
}

#userPhotoWrapper {
    background: #fff;
    filter: alpha(opacity=1);
    filter: alpha(opacity=1);
    opacity: 1;
    -moz-opacity: 1;
    height: 60px;
    cursor: pointer;
    margin: 20px 8px 1px 8px;    
}

.circlePhoto {
    width: 66px;
    height: 66px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    overflow: hidden;
}

.circlePhoto.userCirclePhoto {
    border-style: solid;
    border-width: 4px;
    border-color: #fff;
    width: 66px;
    height: 66px;
    margin-right: auto;
    margin-left: auto;    
}

#userPhoto {
    display: inline-block;
    width: 66px;
    height: 66px;
}
.userCirclePhoto.nolan #userPhoto {
    background: url('sprite-icons.png') no-repeat -4px -3px;
}

#userPhotoWrapper img{
    max-width: 100%;
    width: auto\9;
    height: auto;
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;	
}

.flip-container {
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
	-ms-perspective: 1000;
	perspective: 1000;
	-ms-transform: perspective(1000px);
	-moz-transform: perspective(1000px);
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	height: 100%;
}

.flipper {
	webkit-transition: 0.6s;
	-webkit-transform-style: preserve-3d;
	-ms-transition: 0.6s;
	-moz-transition: 0.6s;
	-moz-transform: perspective(1000px);
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transition: 0.6s;
	transform-style: preserve-3d;
	position: relative;
	height: 100%;
}
	
.front-side{
	webkit-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	transform: rotateY(0deg);
	z-index: 2;
}

.back-side{
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-o-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}

.front-side, .back-side {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: 0.6s;
	-webkit-transform-style: preserve-3d;
	-moz-transition: 0.6s;
	-moz-transform-style: preserve-3d;
	-o-transition: 0.6s;
	-o-transform-style: preserve-3d;
	-ms-transition: 0.6s;
	-ms-transform-style: preserve-3d;
	transition: 0.6s;
	transform-style: preserve-3d;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 1;
}

.flip-container.flipped .front-side {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg);
	opacity: 0;
}

.flip-container.flipped .back-side {
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-o-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	transform: rotateY(0deg);
	border: solid 10px #0e77c7;
}

.flip-container.flipped .back-side .content{
	margin: 24px;
	font-weight: bold;	
}

.flip-container.flipped .back-side p{
	text-align: left;
}

.flip-container.flipped .back-side ol{
	list-style: inside decimal;
}

.flip-container.flipped .back-side ol li{
	margin-top: 22px;
}

.flip-container.flipped .back-side .header{
	overflow: hidden;
	padding-top: 2px;
	height: 27px;
	margin-bottom: 20px;
}

.flip-container.flipped .back-side .help{
	float: left;
}

.flip-container.flipped .back-side .helpButton{
    margin-right: 15px;
}

.flip-container.flipped .back-side .title{
	float: left;
	color: #043f8d;
	font-weight: bold;
}

.flip-container.flipped .back-side .flip{
	float: right;
	background: url('sprite-icons.png') no-repeat -115px -1px;
	width: 16px;
	height: 18px;	
	cursor: pointer;
}

.flip-container.flipped .back-side .flip:hover{
	background: url('sprite-icons.png') no-repeat -136px -1px;
}

form{
	position: relative;
	min-height: 300px;
}

form.short{
	height: 225px;
}

form label{
	color: #333333;
	font-size: 14px;
	margin-left: 22px;
	margin-bottom: 4px;
}

label[for=password]{
	margin-top: 20px;
}

li label[for=password]{
	margin-top: 0;
}

form input{
	display: block;
    height: 35px;
    width: 310px;
    
    padding: 5px 10px!important;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    outline: none;
    color: #4c9cd9;
    font-size: 100%;
    line-height: 20px;	
	margin-left: 20px;
    margin-right: 10px;   
	border: 1px solid #ebebeb;
    border-radius: 3px;
}

form input.error{
	border: solid 1px #da216e;
}

section p.help{
	margin-left: 22px;	
	margin-top: 5px;
}

section p.help.right{
	text-align: right;
	margin-right: 22px;
}

p.dear{
	text-align: center;
	font-weight: bold;
	margin-top: 10px;
	margin-bottom: 10px;
}

section.credentials .actions{
	text-align: right;
	margin-right: 28px;
	margin-top: 28px;
    padding-bottom: 20px;	
}

.actions .btn{
    background-color: #0072c9;
    padding: 10px 40px!important;
    border-radius: 2px!important;
    font-size: 15px;
    width: 315px;
    font-weight: bold;
}

.actions .btn.enter{
	width: 170px;
	height: 45px;
}

a.util{
	color: #0072c9;
	font-size: 13px;
	padding-bottom: 4px;
	border-bottom: solid 1px #dddfe2;
	font-weight: bold;
}

a.util:hover{ 
	border-bottom: solid 1px #0072c9;
	text-decoration: none;
}

div.error{
	color: #da216e;
	font-size: 15px;
	border: solid 1px #da216e;
}

div.error_container,
div.error{
	display:none;
	color: #da216e;
	font-size: 15px;
	border: solid 1px #da216e;
	margin: 10px 30px 0 20px;
	border-radius: 3px;
	padding: 0;
}

div.error{
	font-weight: bold;
	font-size: 13px;
	margin-top: 5px;
}

div.error_container label{
	color: #da216e;
	font-weight: bold;
	font-size: 13px;
	margin-bottom: 0;
}

p.block{
	text-align: center;
	margin-top: 15px;
	clear: both;
}

.fotologin p{text-align: center;}
.fotologin .qrcode{
	margin: 75px auto 0 auto;
}

/*	unblock users screen	*/
section.unblock,
section.selection,
section.newpassword,
section.completedProcess{
	width: 785px;
	height: 430px;
	background: #fff;
	margin: 5px;
	margin-top: 11px;
}	

section header{
	font-size: 20px;  
    border-bottom: solid 1px #f0f1f2;  
    padding: 14px 0;
}
section header h2{
	color: #0072c9;
	font-size: 20px;  
	background: url('sprite-icons.png') no-repeat -83px -54px;
    padding-left: 45px;	
    font-weight: bold;
    margin-left: 5px;    
}

section.unblock form{
	margin: 0 auto;
	margin-top: 55px;
	width: 760px;
	height: 100px;
	padding: 20px;
    position: relative;
    height: 300px;	
}

section.unblock form p{
    font-weight: bold;
    margin-right: auto;
    margin-left: auto;
    width: 340px;
    padding-left: 5px;    
}

section.unblock form fieldset{
    background-color: #f9f9f9;
    margin-top: 20px;
    padding: 20px;
    width: 340px;
    margin-right: auto;
    margin-left: auto;
    border-radius: 5px;    
}
section.unblock form label{
	margin-left: 0;
}

section.unblock form input{
	width: 300px;
	margin: 5px 0 0;
}
section.unblock .actions{
	margin-right: 50px;
    text-align: right;
    margin-top: 60px;	
}

section.selection{
	overflow: hidden;
}

section.selection #methods{
	float: right;
	margin-right: 20px;
	margin-top: 20px;
    width: calc(100% - 330px);	
}
section.selection #selector{
	width: 285px;
	float: left;
	margin-left: 20px;
	margin-top: 20px;	
}

section.selection #selector ul{
}

section.selection #selector ul li{
	margin-bottom: 10px;
	overflow: hidden;
	color: #0072c9;
	font-weight: bold;
	cursor: pointer;
}

section.selection #selector ul li div.type{
	border: solid 1px #e5e5e5;
	border-radius: 5px;
	width: 235px;
	padding: 10px 20px;
	float: left;   
	font-size: 15px;
}

section.selection #selector ul li div.type span{
	background: url('sprite-icons.png') no-repeat -84px -89px;
	width: 9px;
	height: 14px;	
    display: inline-block;
    float: right;	
    margin-top: 4px;
}

section.selection #selector ul li div.info{
	background: url('sprite-icons.png') no-repeat -170px -2px;
	width: 18px;
	height: 17px;	
	float: left;
	margin-top: 15px;
	margin-left: 10px;
	cursor: pointer;
}

section.selection #methods{
	float: right;
}

section.selection div.iconAlert{
	background: url('sprite-icons.png') no-repeat -1px -226px;
	width: 81px;
	height: 76px;
	margin: 30px auto 20px auto;
}

section.selection p.key{
	text-align: center;
}

section.selection p.key span{
	font-size: 30px;
	border-bottom: solid 1px #f4f4f4;
	padding-bottom: 15px;
	color: #52b8eb;
}

section.selection p.message{
	text-align: center;
	color: #333333;
	font-weight: bold;
	font-size: 15px;
	width: 380px;
	margin: 30px auto 20px auto;
}

section.selection .actions{
	margin-top: 25px;
	margin-bottom: 20px;
	margin-right: 30px;
	text-align: right;
}

/*	modal	*/
.headerActions{
	margin-bottom: 10px;
}
.closeWindow{
	background: url('sprite-icons.png') no-repeat -200px -3px;
	width: 11px;
	height: 12px;
	cursor: pointer;
	float: right;
	margin: 10px;	
}

section.selection dl{
	margin-left: 15px;
}

section.selection dl dt{
	font-weight: bold;
}

section.selection dd{
	margin-bottom: 30px;
}

section.selection form{
	background-color: #f9f9f9;
    padding: 30px 0px;	
    height: 290px;
    border-radius: 5px;
}

section.selection form fieldsed{
	margin: 20px 10px;
}

section.selection form label{
	font-size: 14px;
	margin-bottom: 5px;
	font-weight: bold;
}

section.newpassword{
}

section.newpassword #requirements{
	color: #043f8c;
	font-size: 15px;
	padding: 20px;
	width: 280px;
	float: left;
	border: solid 1px #e5e5e5;
	border-radius: 5px;
	margin: 20px;
	font-weight: bold;
	height: 330px;
}

section.newpassword #requirements p{
	margin-bottom: 15px;
}

section.newpassword #requirements ul{
	margin-bottom: 20px;
}

section.newpassword #requirements ul li{
	padding-left: 10px;
	position: relative;
	margin-top: 5px;
}


section.newpassword #requirements ul li:before{
    display: block;
    position: absolute;
    content: " ";
    background: url('sprite-icons.png') no-repeat 0 0;
    width: 4px;
    height: 4px;
    top: 10px;
    left: -3px;
}

section.newpassword #formpassword{
	float: left;
	margin: 20px 20px 20px 0;
	width: calc(100% - 340px);
	background-color: #f9f9f9;
	height: 330px;
	padding-top: 20px;
	border-radius: 5px;
}

section.newpassword #formpassword form label{
	font-size: 14px;
	margin-bottom: 5px;
	font-weight: bold;
}

section.newpassword .actions{
	margin-top: 25px;
	margin-bottom: 20px;
	margin-right: 30px;
	text-align: right;
}

section.newpassword .actions .btn {
    width: initial;
}

section.completedProcess .iconOK{
	background: url('sprite-icons.png') no-repeat -3px -144px;
	width: 77px;
	height: 77px;
	margin: 30px auto 20px auto;
}
section.completedProcess .messageOK{	
	text-align: center;
	width: 370px;
	margin: 0 auto;
	border-bottom: solid 1px #f4f4f4;
	padding-bottom: 10px;	
}
section.completedProcess .messageOK span{
	font-weight: bold;
	color: #85c52c;	
	font-size: 24px;
}

section.completedProcess .message{
	font-size: 13px;
	margin: 30px auto 0 auto;
	text-align: center;
	font-weight: bold;
	color: #000;
	margin-bottom: 30px;
}

section.completedProcess .iconError {
    background: url('sprite-icons.png') no-repeat -3px -70px;
    width: 68px;
    height: 72px;
    margin: 30px auto 20px auto;
}


section.completedProcess .messageError {
    text-align: center;
    width: 370px;
    margin: 0 auto;
    border-bottom: solid 1px #f4f4f4;
    padding-bottom: 10px;
    white-space: nowrap;
}


section.completedProcess .messageError span {
    font-weight: bold;
    color: #da216e;
    font-size: 24px;
}

section.completedProcess .actions{
	margin-top: 25px;
	margin-bottom: 20px;
	margin-right: 30px;
	text-align: right;
}

section.completedProcess .actions .btn {
    width: initial;
}

section.bye{
	width: 750px;
	height: 430px;
	margin: 0 auto;
	background: none;
	margin-top: 120px;
}

section.bye .messageOK{
	text-align: center;
	width: 370px;
	margin: 0 auto;
	border-bottom: solid 1px #f4f4f4;
	padding-bottom: 10px;	
}
section.bye .messageOK span{
	font-weight: bold;
	color: #85c52c;	
	font-size: 24px;
}

section.bye .message{
	font-size: 20px;
	text-align: center;
	color: #000;		
	text-align: center;
	width: 370px;
	margin: 0 auto;
	font-weight: bold;	
    width: 90%;
    margin-bottom: 100px;
    margin-top: 15px;    
}

section.bye .help{
	text-align: center;
}



@media only screen and (max-width: 768px) {
  /* For general iPad layouts */

	#content, #unblock {
	    width: 740px;
	}

	section.unblock, section.selection, section.newpassword, section.completedProcess {
	    width: 725px;
	    height: 430px;
	    background: #fff;
	    margin: 5px;
	    margin-top: 11px;
	}	


	html body #app.logout{
		background: #fff url(bg_body_tablet.png) no-repeat 0 0;
	}


}