/* INFORMACIÓN DEL DOCUMENTO
	- Documento:	HSBC Mass
	- Versión:		30-08-2016 13:00
	- Cliente:		HSBC México
	- Autor:		Israel Dorantes @000HEX
*/

/* ------------------------------------------------------------------------------------------------
ESTRUCUTRA GENERAL
------------------------------------------------------------------------------------------------ */
/* == Contenedor Principal == */
#mainCont {
	width: 100%;
	display: inline-block;
	overflow: hidden;
	position: relative;
}
#mainCont p {
	font-size: 14px;
}
#mainCont li {
	font-size: 14px;
}
#header {
	width: 100%;
	height: 300px;
}
.contContainer {
	display: none;
}
.contContainer.active {
	display: block;
}
.titulo {
	display: block;
	padding: 20px;
	font-weight: normal;
}
.titulo p {
	font-size: 12px !important;
	line-height: normal;
}
.title1 p {
	font-size: 18px !important;
    margin: 20px 10px 0px 20px;
    line-height: normal;
}
.title1 p > span.bold {
    font-weight: bold;;
}
.title2 {
    color: #4c4c4c;
    padding: 10px 10px 10px 20px;
    line-height: normal;
    width: 930px;
    cursor: pointer;    
    clear: both;
    border-top: 1px dotted #ccc;
}
.down {
	background: #eee url(../img/arrow-d.png) no-repeat 920px;
}
.up {
	background: #eee url(../img/arrow-u.png) no-repeat 920px;
}
#tabsContent {
	width: 100%;
	padding: 0;
	margin: 0 0 20px 0;
	float: left;
	border-top: 1px dotted #ccc;
	border-bottom: 1px dotted #ccc;
}
.tab {
	width: 140px;
	height: 60px;
	padding: 0px 10px 0px 10px;
	position: relative;
	float: left;
	cursor: pointer;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.tab:hover {
	background-color: #F9F9F9;
}
.tab.active {
	background-color: #eee;
	color: #000;
}
.wrapper {
	position: absolute;
	width: 140px;
	height: 60px;
	display: table;
}
.wrapper p {
	padding: 0;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	font-weight: bold;
}
#mainCont sup {
	font-size: 12px;
}
.acord {
	display: none;
}
.full {
	width: 100%;
	float: left;
	clear: both;
}
.fullInner {
	padding: 20px;
	width: 920px;
	float: left;
}
.half {
	width: 480px;
	float: left;
}
.fullInner p {
	font-size: 14px;
}
.half p {
	padding: 20px 20px;
	font-size: 14px;
}
.full p a {
	text-decoration: none;
}
.arrow {
	margin-left: 10px;
	margin-top: 4px;
	position: absolute;
}
.half ul {
	margin-left: 30px;
}
.acord {
	padding: 20px;
}
.bold {
	font-weight: bold;
}
.big {
	font-size: 18px !important;
}
.red {
	color: #db0011;
}
.link {
	color:#db0011;
	text-decoration: none;
	font-weight: bold;
}
.link:hover {
	text-decoration: underline;
}
.fRight {
	float: right;
}
.centerImg {
	margin: 0 auto;
	display: block;
}

.mtb40 {
	margin-top: 20px;
	margin-bottom: 40px;
}



.mod {
	margin: 0px 10px 0px 10px !important;
	float: left !important;
	width: 940px !important;
}
.nav {
	float: left;
	font-weight: bold;
	font-size: 16px;
	padding: 0 35px;
	border-right: 1px solid #c9d2d3;
}
.nav a {
	text-decoration: none;
	color: #000000;
}
.nav a:hover {
	text-decoration: underline;
}
#nav1 {
	padding: 0 35px 0 0;
}
#nav2 {

}
#nav3 {
	border-right: none;
}
#nav4 {
	float: right;
	padding: 0 0 0 35px;
	border-right: none;
	font-weight: normal;
	font-size: 14px !important;
	color: #333333 !important;
}
#navMod {
	margin-top: 20px !important;
}
#mod1 .half {
	float: left;
}
#mod2 {
	z-index: 2;
	position: relative;
}
#mod3 {
	z-index: 1;
	position: relative;
}
ol {
	margin: 0;
}





.thrCont {
	float: left;
	width: 150px;
	margin-left: 10px;
}
.thrCont p {
	color: #343433;
	font-size: 12px;
	text-align: center !important;
	padding: 0;
}
.formHeader {
	width: 100%;
	display: block;
	font-size: 11px !important;
	margin-bottom: 10px;
}
.fullCont {
	float: left;
	width: 278px;
	text-align: center;
	max-width: 480px;
	border: 1px solid #db0011;
	border-radius: 10px;
	margin: 20px 100px;

}
.header1 {
	font-weight: bold;
	font-size: 18px !important;
}
.header2 {
	font-weight: bold;
	font-size: 14px !important;
}
.contenedores {
	height: 20px;
	padding: 0px;
	font-size: 24px;
	text-align: center !important;
}
.horizontalCont {
	float: left;
}
#fade {
	width: 100%;
	height: 100%;
	display: none;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0,0,0,0.6);
	cursor: pointer;
}
#close {
	width: 52px;
	height: 52px;
	position: absolute;
	background: url(../img/close.png) no-repeat;
	right: -26px;
	top: -26px;
	cursor: pointer;
}
#simulador {	
	float: left;
	margin-bottom: 40px;
}
#calcBtn {
	margin: 0px 20px 20px 20px;
	width: 100%;
}
.slider{  
	border-radius: 25px;
	width: 100px;
	margin: 20px 25px;
	float: left;
	height: 10px;
	background-color: #00ff00;
	background: url(../img/barra.png) bottom repeat-x;
}
.ui-slider-handle {  
	position: absolute !important;
	z-index: 2 !important;
	width: 29px !important;
	height: 36px !important;
	cursor: pointer !important;
	background: url(../img/handler.png) no-repeat 50% 50% !important;
	font-weight: bold !important;
	color: #1C94C4 !important;
	outline: none !important;
	top: -6px !important;
	margin-left: -12px !important;
	margin-top: -2px !important;
	border: none !important;
}
.ui-slider-range {  
	background: url(../img/barra.png) top repeat-x;
	position: absolute;
	border: 0;
	top: 0;
	height: 100%;
	border-radius: 25px;
}
.ui-widget.ui-widget-content {
	border: 1px solid #fff;
}
.boton {
	background-color: #DB0011;
	color: #FFF;
	border-radius: 10px;
	text-align: center;
	padding: 10px 20px;
	margin-top: 10px;
	width: 60%;
	margin: 0 16px;
	font-size: 14px;
	cursor: pointer;
}
.boton:hover {
	background-color: #FD0012;
}
#cantidad {
	color: #DB0011;
}


#frase1 {
	width: 450px;
	height: 136px;
	float: left;
	background-color: #db0011;
	position: relative;
	text-align: center;
	font-weight: bold;
	color: #fff;
	font-size: 32px;
	line-height: 136px;
}
#frase2 {
	width: 180px;
	height: 136px;
	background-color: #db0011;
	color: #fff;
	text-align: center;
	font-size: 20px;
	position: absolute;
	right: -180px;
	z-index: 3;
	cursor: pointer;
}
#frase2:hover {
	background-color: #ff0000;
}

#frase2 p {
	margin-top: 46px;
}
.svgCont {
	background-color: #db0011;
	position: relative;
	float: left;
	width: 169px;
	height: 136px;
	transition: background-color .5s ease;
	border-left: 1px solid #fff;
}
.svgCont.active {
	background-color: #e5efef !important;
}
.svgCont.active > .svg {
	fill: #db0011 !important;
	margin-top: -40px !important;
}
.svgCont.active > .text {
	margin-top: 93px !important;
	color: #db0011 !important;
}
/*.svgCont:hover {
	background-color: #f1f7f8;
}*/
.hover {
	width: 100%;
	height: 100%;
	background-color: transparent;
	z-index: 9;
	position: absolute;
	cursor: pointer;
}
.svg {
	width: 46px;
	height: 46px;
	fill: #ffffff;
	float: left;
	transition: fill .5s ease;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -23px;
	margin-top: -40px;
}
/*.svg:hover {
	fill: #db0011;
}*/
.text {
	text-align: center;
	font-weight: bold;
	width: 100%;
	position: absolute;
	font-size: 14px;
	color: #fff;	
	margin-top: 93px;	
}
.contSub {
	float: left;
	width: 29.7%;
	border-radius: 20px;
	padding: 20px 1% 10px 1%;
	margin: 20px 0;
	background-color: #f9f9f9;
	border: 1px dotted #333;
	-webkit-transition : border 250ms ease;
	-moz-transition : border 250ms ease;
	-o-transition : border 250ms ease;
	transition : border 250ms ease;
}
.contSub:hover {
	cursor: pointer;
	border: 1px dotted #db0011;
}
.contSub.active {	
	border: 1px solid #db0011;
}
.contSub.active > p.big {
	color: #db0011;
}
.contSub > p {
	text-align: center;
}
.contSubDesc {
	display: none;
	padding: 20px 80px 20px 80px;
	clear: both;
	overflow: hidden;
}