/* RESET */

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, font, 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 {
    margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;
}

/* FONTS */
@font-face {
    font-family: 'BBVAOfficeBookRegular';
    src: url('../fonts/BBVAOfficeBookRegular.eot') format('embedded-opentype'),
         url('../fonts/BBVAOfficeBookRegular.woff2') format('woff2'),
         url('../fonts/BBVAOfficeBookRegular.woff') format('woff'),
         url('../fonts/BBVAOfficeBookRegular.ttf') format('truetype'),
         url('../fonts/BBVAOfficeBookRegular.svg#BBVAOfficeBookRegular') format('svg');
}
@font-face {
    font-family: 'BBVAOfficeLightBold';
    src: url('../fonts/BBVAOfficeLightBold.eot') format('embedded-opentype'),
         url('../fonts/BBVAOfficeLightBold.woff2') format('woff2'),
         url('../fonts/BBVAOfficeLightBold.woff') format('woff'),
         url('../fonts/BBVAOfficeLightBold.ttf') format('truetype'),
         url('../fonts/BBVAOfficeLightBold.svg#BBVAOfficeLightBold') format('svg');
}

@font-face {
    font-family: 'BBVAOfficeLightRegular';
    src: url('../fonts/BBVAOfficeLightRegular.eot') format('embedded-opentype'),
         url('../fonts/BBVAOfficeLightRegular.woff2') format('woff2'),
         url('../fonts/BBVAOfficeLightRegular.woff') format('woff'),
         url('../fonts/BBVAOfficeLightRegular.ttf') format('truetype'),
         url('../fonts/BBVAOfficeLightRegular.svg#BBVAOfficeLightRegular') format('svg');
}

/* GENERALS */
body{
	font-family: 'BBVAOfficeLightRegular';
	font-size:12px;
	min-height:680px;
	overflow-y:auto;
}

h1, h2, h3{
	text-align: center;
	display:block;
	font-weight: normal;
	color:#51BBEB;
	clear:both;
}

h1{
	font-size:3.4em;
}
h2{
	font-size:2.6em;
}
h3{
	width:100%;
	color:#97C9EB;
	font-size:2em;
}

strong{
	font-family: 'BBVAOfficeLightBold';
}

button{
	outline:none;
	cursor:pointer;
}

input, select{
	outline:none;
	border:2px solid #E3E4E8;
	background-color: white;
}

input{
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	color:#B7D8EB;
	font-family: 'BBVAOfficeLightRegular';
}

select{
	border-radius: 5px;
	color:#919395;
	font-size:0.8em;
	text-align: right;
	font-family: 'BBVAOfficeLightRegular';
}

option{
	text-align: right;
}

ins{
	text-decoration:none;
	display: block;
}

.main-wrapper{
	width:100%;
	max-width:1140px;
	margin:auto;
	height:100% !important;
}

.clear{
	clear:both;
}

.btn{
	display:block;
	width:180px;
	clear:both;
	height:40px;
	line-height:40px;
	color:white;
	text-align: center;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	background-color:#005797;
	text-decoration: none;
	margin:10px auto;
	font-size:1.2em;
	font-family: 'BBVAOfficeLightBold';
	-webkit-box-shadow: inset 0px -4px 0px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: inset 0px -4px 0px 0px rgba(0,0,0,0.3);
	box-shadow: inset 0px -4px 0px 0px rgba(0,0,0,0.3);
}
.btn:hover{
	-webkit-box-shadow: inset 0px 4px 0px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: inset 0px 4px 0px 0px rgba(0,0,0,0.3);
	box-shadow: inset 0px 4px 0px 0px rgba(0,0,0,0.3);
}

.description{
	font-size:1.54em;
	padding:18px 10px;
	text-align: center;
}

.mob{
	display:none;
}

header{
	position:fixed;
	width:100%;
	height:90px;
	background-color:transparent;
	z-index:2;
}
	header a{
		display:block;
		width:45%;
		float:left;
		height:90px;
	}
	header a#logo{
		max-width:316px;
	}
	header a#logo-meta{
		max-width:215px;
		float:right;
	}


footer{
	position:fixed;
	bottom:0;
	width:100%;
	background-color:#005797;
	height:70px;
	text-align: center;
	color:white;
	z-index:2;
}
	footer nav{
		padding:15px 0;
	}
	footer nav a{
		display: inline-block;
		color:white;
		padding:0 10px;
		border-left:1px solid white;
		text-align: center;
		text-decoration: none;
	}
	footer nav a:first-child{
		border:none;
	}

section{
	width:100%;
	position:relative;
	padding-top:90px;
}

/* HOME */
#home{
	width:100%;
	margin:auto;
}
	#home .main-wrapper{
		max-width:655px;
		background-image: url('../images/ico-home.png');
		background-repeat: no-repeat;
		background-position:top center;
		text-align: center;
	}

	#home h1{
		padding:80px 0 0 0;
		position:relative;
	}
		#home h1:before{
			content:'';
			position:absolute;
			top:92px;
			width:100%;
			height:2px;
			border-top:2px solid #CBD1D9;
			left:0;
		}
		#home h1 span{
			font-size:0.6em;
			display: block;
			position:relative;
			background-color:white;
			width:420px;
			margin:auto;
		}

	#home span.call-to-action{
		display:block;
		font-size:1.4em;
		margin:10px 0;
		font-family: 'BBVAOfficeLightBold';
		color:white;
	}

	#home:after{
		content:'';
		position: absolute;
		top:595px;
		height:330px;
		width:100%;
		background-image:url('../images/bg-grass-home.jpg');
		background-repeat: repeat-x;
		background-color:#85C72B;
		z-index: -1;
	}

 
/* STEPS NAVIGATION */
#steps{
	width:740px;
	height:30px;
	text-align: center;
	position: relative;
	margin:0 auto 20px auto;
	padding-top:20px;
}
 	#steps:before{
 		content:'';
		position:absolute;
		top:33px;
		width:100%;
		height:2px;
		border-top:2px solid #CBD1D9;
		left:0;	
 	}

 	#steps a, #steps span.ico{
 		display:inline-block;
 		vertical-align: top;
 		position:relative;
 		width:23px;
 		height:23px;
 		margin:0 55px;
 		-webkit-border-radius: 70px;
		-moz-border-radius: 70px;
		border-radius: 70px;
		background-color:#B8D9EC;
		border:2px solid white;
 	}

 		#steps a:hover, #steps a.current{
 			background-color:#00AEEF;
 			border:2px solid #00AEEF;
 		}
 		#steps a:hover span, #steps a.current span{
 			display:block;
 		}
 		#steps a.complete{
 			background-color:#85C72C;
 			background-image:url('../images/step-complete.png');
 			background-repeat:no-repeat;
 			background-position: center center;
 		}
 			#steps a.complete:hover{
	 			border:2px solid white;
	 			cursor:default;
	 		}
		 		#steps a.complete:hover span{
		 			display:none;
		 		}

	 	#steps a span{
	 		display:block;
	 		position:absolute;
	 		top:-40px;
	 		width:120px;
	 		height:25px;
	 		line-height: 25px;
	 		text-align: center;
	 		padding:0 5px;
	 		color:white;
	 		font-size:0.85em;
	 		-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			background-color:#434953;
			left:50%;
			margin-left:-65px;
			display:none;
	 	}
		 	#steps a span:after{
		 		content:'';
		 		position:absolute;
		 		top:25px;
		 		left:58px;
		 		width:0;
		 		height:0;
		 		border-left: 7px solid transparent;
				border-right: 7px solid transparent;
				border-top: 7px solid #434953;
		 	}

		#steps span.ico img{
	 		position:absolute;
	 		top:-32px;
	 		left:-20px;
	 	}


/* CHOOSE YOUR GOAL PAGE */
.categories-menu, .priority-menu{
	width:100%;
	height:340px;
}

	.item{
		display:block;
		float:left;
		width:25%;
		height:340px;
		text-align: center;
		background-position:center 65px;
		background-repeat:no-repeat;
		background-size: 80% auto;
		position:relative;
	}
	.item.compressed{
		width:16.6%;
		background-size:100% auto;
	}
	.item.selected{
		margin-right:25%;
	}
		.item h3{
			height:60px;
			padding-top:280px;
			cursor:pointer;
		}

		.item:hover h3, .item.highlighted h3{
			color:white;
		}

		.item.selected:before{
			content:url(../images/ico-selected.png);
			position:absolute;
			top:15px;
			right:15px;
		}

		/* celebration */
		.item#celebration{
			background-image:url('../images/cat-celebration.png');
		}
			.item#celebration:hover, .item#celebration.highlighted{
				background-image:url('../images/cat-celebration-hover.png');
				background-color:#05A7E1;
			}

			.item#celebration .submenu{
				background-color:#B7D9EB;
			}

			.item#celebration .submenu li.dark{
				background-color:#87D1F3;
			}

			.item#celebration .submenu li.darker{
				background-color:#51BBEB;
			}

		/* travel */
		.item#travel{
			background-image:url('../images/cat-travel.png');
		}
			.item#travel:hover, .item#travel.highlighted{
				background-image:url('../images/cat-travel-hover.png');
				background-color:#85C72B;
			}

			.item#travel .submenu{
				background-color:#CFE9AB;
			}

			.item#travel .submenu li.dark{
				background-color:#BBDF8B;
			}

			.item#travel .submenu li.darker{
				background-color:#AFDB75;
			}

		/* education */
		.item#education{
			background-image:url('../images/cat-education.png');
		}
			.item#education:hover, .item#education.highlighted{
				background-image:url('../images/cat-education-hover.png');
				background-color:#F5871D;
			}

			.item#education .submenu{
				background-color:#FBD3A3;
			}

			.item#education .submenu li.dark{
				background-color:#F9C383;
			}

			.item#education .submenu li.darker{
				background-color:#F9B76B;
			}

		/* others */
		.item#others{
			background-image:url('../images/cat-others.png');
		}
			.item#others:hover, .item#others.highlighted{
				background-image:url('../images/cat-others-hover.png');
				background-color:#FBBB2B;
			}

			.item#others .submenu{
				background-color:#FDDB89;
			}

			.item#others .submenu li.dark{
				background-color:#FDD371;
			}

			.item#others .submenu li.darker{
				background-color:#FFCD5F;
			}

	/* categorie's submenus */
	.item .submenu{
		display:none;
	}
		.item.selected .submenu{			
			position:absolute;
			top:0;
			left:100%;
			width:100%;
			height:auto;
			z-index:1;
		}

			.submenu li{
				list-style-type: none;
				height:80px;
				line-height: 80px;
				width:70%;
				padding:0 15%;
				color:white;
				text-align: left;
				font-family: 'BBVAOfficeBookRegular';
				font-size:1.5em;
				cursor:pointer;
			}

			li.custom{
				height:180px;
				cursor: inherit;
			}
				li.custom p{
					line-height: 18px;
    				font-size: 0.7em;
    				margin-top: -24px;
				}
				li.custom input{
					height: 35px;
					line-height: 35px;
					border:none;
					border-bottom:1px solid white;
					width:98%;
					padding:0 1%;
					color:white;
					font-size:1em;
					background-color:transparent;
					outline:none;
					font-family: 'BBVAOfficeLightRegular';
				}

/* CHOOSE PRIORITY PAGE */
.priority-menu{
	text-align: center;
}

	.priority-menu button{
		margin-top:40px;
		display: inline-block;
		width:25%;
		height:auto;
		background-repeat: no-repeat;
		background-position:center 50px;
		border:none;
		background-color:transparent;
	}

	.priority-menu button p{
		font-size:2em;
		text-align: center;
		padding-top:180px;
	}

		button#time{
			background-image: url('../images/ico-time.jpg');
		}
		button#time:hover{
			background-image: url('../images/ico-time-hover.jpg');
		}
		button#money{
			background-image: url('../images/ico-money.jpg');
		}
		button#money:hover{
			background-image: url('../images/ico-money-hover.jpg');
		}

/* GOAL DETAILS PAGE */
.choosen-priority{
	display:block;
	height:65px;
	width:65px;
	margin:15px auto;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: auto 100%;
	text-indent: -9999px;
}

	.choosen-priority#time{
		background-image: url('../images/ico-time-hover.jpg');
	}
	.choosen-priority#money{
		background-image: url('../images/ico-money-hover.jpg');
	}

	#details{
		width:740px;
		margin:auto;
	}
		#details div{
			width:100%;
			height:90px;
			margin:0 0 20px 0;
			position:relative;
		}
			#details div label{
				display:block;
				padding-left:40px;
				color:#007DC5;
				font-size:2em;
				font-family: 'BBVAOfficeLightBold';
				background-repeat: no-repeat;
				background-image:url('../images/ico-labels.jpg');
				height:25px;
			}
				#details div label span{
					font-size:0.6em;
					color:#B6B6B6;
				}

				#goal label{
					background-position:top left;
				}
				#saving label{
					background-position:center left;
				}
				#contributions label{
					background-position:bottom left;
				}

			#details input[type="text"]{
				width:210px;
				height:40px;
				line-height: 40px;
				margin-top:10px;
				padding:0 15px 0 55px;
				outline:none;
				background-image:url('../images/bg-input.jpg');
				background-repeat: no-repeat;
				background-position: 25px center;
				font-size: 1.6em;
			}

			.error{
				position:absolute;
				color:#FF0000;
				font-size:0.9em;
				font-family: 'BBVAOfficeLightBold';
				width:215px;
				background-color:white;
				top:45px;
				margin-left:15px;
			}

			#details .btn{
				margin:10px 0;
			}


/* YOUR META SAVING PLAN */

#tu-plan-meta-ahorro p.description{
	width:740px;
	margin: auto;
}

	aside, .results, .results div{
		display: inline-block;
	} 

	/* aside */
	aside{
		width:33%;
		background-color:#F9F9F9;
		padding:10px 1%;
		height:390px;
		position:relative;
		float:left;
	}

		aside .btn{
			position: absolute;
			bottom:5px;
			right:4%;
		}

	.line{
		width:100%;
		color:#007DC5;
		font-family: 'BBVAOfficeLightBold';
		font-size:1.3em;
	}
		.line label, .line input, .line select{
			width:48%;
			display: inline-block;
			height:28px;
			margin:0 0 5px 0;
			vertical-align: baseline;
		}

		.line select{
			height:32px;
			width:49%;
			font-size:1em;
		}
			
		.line input{
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			width:40%;
			padding:0 7% 0 1%;
			color:#919395;
			font-size:1em;
			text-align: right;
		}

		.line#final-amount label{
			color:#85C72C;
		}
		.line#final-amount input{
			border:2px solid #85C72C;
			font-family: 'BBVAOfficeLightBold';
		}

	/* results */
	.results{
		width:64.5%;
		float:right;
		margin-bottom:15px;
	}

		.results div{
			vertical-align: bottom;
			width:31%;
			margin:0 0 0 1%;
			background-color:#F9F9F9;
			text-align: center;
			position: relative;
			font-size:1.5em;
			color:#555B65;
		}
			.results div.selected:before{
				content:url(../images/ico-selected-plan.png);
				position:absolute;
				top:-45px;
			}

		.results div span{
			display:block;
		}

			.amount{
				padding:10px 1%;
				color:white;
				background-color:#CCC;
			}

				.amount ins{
					font-size:1.4em;
					font-family: 'BBVAOfficeLightBold';
					padding-top:3px;
				}

			.saving{
				margin:20px 0;
				padding-top:50px;
				background-image: url('../images/ico-saving.png');
				background-repeat: no-repeat;
				background-position: top center;
			}

		.results div strong{
			position: absolute;
    		width: 90%;
    		left: 5%;
    		bottom: 70px;
		}

		.results .btn{
			font-size:0.8em;
			position: absolute;
			bottom:5px;
			width:90%;
			margin-left:5%;
		}

		/* custom */
		#opt-one{
			height:325px;
		}
			#opt-one .amount, #opt-one .btn{
				background-color:#85C72B;
			}

		#opt-two{
			height:370px;
		}
			#opt-two .amount, #opt-two .btn{
				background-color:#FBBB2B;
			}

		#opt-three{
			height:410px;
		}
			#opt-three .amount, #opt-three .btn{
				background-color:#C7155D;
			}

	.copy{
		color:white;
		background-color:#BABCBF;
		padding:10px;
		display:block;
		clear:both;
		margin-top:15px;
		float:none;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
	}

/* CLOSER OFFICE */
#localizador, #info{
	display:inline-block;	
	height:345px;
	vertical-align: top;
}
	#localizador{
		width:68%;
	}
		#map-nav{
			width:100%;
			height:40px;
		}
			#map-nav a, #map-nav select, #map-nav .searchcp{
				width:23.5%;
				margin:0 0.5%;
				display: inline-block;
				height:100%;
				vertical-align: top;
			}

			#map-nav a.btn{
				margin:0;
				width:18.5%;
				text-align: left;
				background-image: url('../images/ico-localizador.jpg');
				background-repeat: no-repeat;
				background-position: 5px center;
				background-color:#00A9E8;
				padding:0 0 0 5.5%;
			}

			.searchcp{
				width:24%;
				position:relative;
			}
				.searchcp button{
					position:absolute;
					top:2px;
					right:-4px;
					width:30px;
					height:37px;
					background-image:url('../images/ico-search.png');
					background-repeat: no-repeat;
					text-indent:-9999px;
					border:none;
					background-color: transparent;
					background-position: center center;
				}
				.searchcp input{
					width: 93%;
	    			margin: 0 0 0 1%;
	    			padding:0 2% 0 5%;
	    			height:37px;
	    			-webkit-border-radius: 5px;
					-moz-border-radius: 5px;
					border-radius: 5px;
					font-size:1.3em;
				}

			#map-nav select{
				font-size:1.3em;
				color:#B7D8EB;
			}

		#map{
			width:98.5%;
			height:330px;
			margin:20px 0 0 0;
			overflow:hidden;
		}
			#map img, #map iframe{
				width:100%;
				height:100%;
			}

	#info{
		width:30%;
		margin:60px 0 0 0;
		float:right;
	}
		#info h3{
			font-size:1.9em;
			text-align: left;
			color:#51BBEB;
			margin-bottom:20px;
		}

		#info ul li{
			list-style-type: none;
			margin:0 0 20px 20px;
			font-size:1.3em;
			position:relative;
			list-style-position: inside;
		}

		#info ul li:before{
			content:'';
			position:absolute;
			width:10px;
			height:10px;
			-webkit-border-radius: 50px;
			-moz-border-radius: 50px;
			border-radius: 50px;
			background-color:#009DE3;
			top:5px;
			left:-20px;
		}

		#info .btn{
			float:left;
			margin-top:20px;
		}