@charset "utf-8";

/* bootstrap reset */


/* common */
body {font-family: 'Lato', sans-serif;color:#333;font-size:24px;text-align:center}
.fleft {float:left}
.fright {float:right}
.clear {clear:both}
.fullWidth {width:100%!important}
.center {text-align:center!important}
h2.main-title {font-size:60px;font-weight:300;margin-bottom:60px}
h2 {font-size:32px;font-weight:300;margin-bottom:60px}
h3 {font-size:28px;font-weight:300;margin-top:20px}
h4 {font-size:21px;font-weight:300;margin-top:20px}
.blueBg {background:#e4f3f5}
.grayBg {background:#ccc}
.softGrayBg {background:#f4f4f4}
.cyanBg, .cyanBg:hover {background:#00a1b5;color:#fff!important}
.magBg, .magBg:hover {background:#a30075;color:#fff}
form input, form textarea {font-family: 'Lato', sans-serif;border:1px solid #ccc;color:#1f6ead;margin-bottom:15px;padding:10px;width:100%}
form textarea {height:160px}
form input.error, form textarea.error {border:1px solid #DC0000}
form label.error {color:#DC0000;font-size:16px;margin-top:-10px;display:inherit;text-align:left}
.blueBtn, .blueBtn:hover {padding:10px 20px;padding: 12px 20px;font-weight: 700;font-size: 24px;margin: 40px 5px 0 5px;border:none;background:#1f6ead;color:#fff}
.top .container {position:relative}
h1.slogan {font-size:14px;font-weight:normal;color:#fff}

/* header */
.navbar-sm {position:absolute;top:10px;right:60px}
.navbar-default {position: fixed;right: 0;left: 0}
#div_main_menu .navbar-default {z-index:3}
.navbar-header {padding:0 15px}
.navbar-brand {height:auto;padding:5px 15px}
.navbar-nav > li > a {padding:10px 6px;font-size:12px;border-top:4px solid #fff;margin-top:-4px;color:#000068}
.navbar-nav a:hover, .navbar-nav .open > a, .navbar-nav .open > a:hover, .navbar-nav .open > a:focus {background-color:#000068!important;border-top:4px solid #000068;color:#fff!important}
.bottom-menu .dropdown-menu.dark {background-color:rgba(0, 0, 104, .90) !important}
.bottom-menu .dropdown-menu.dark a:hover {border:none!important;color:#fff!important}
.navbar-sm {font-size:11px}
.navbar-sm .account {background:#fce126;color:#333;display:inline-block;min-width:128px}
.navbar-sm .login {color:#333}
.navbar-sm a i {margin-right:4px}
.navbar-sm a {padding:6px 10px}
.bottom-menu .dropdown-menu.dark a, .bottom-menu .dropdown-menu.dark a:hover {border: none!important;color: #fff!important}
.navbar .dropdown-toggle .caret {display: none !important;}

/* content */
.top {background:url(../images/top.jpg) top center no-repeat;background-size:cover;font-size:18px;font-weight:700;padding:180px 0 150px;color:#333;margin-top:-47px}
.top h3 {font-size:28px}
.top p {font-weight:400}
.beneficios {background:url(../images/beneficios.jpg) top center no-repeat;background-size:cover;margin:0}
.grayBox {color:#fff;}
.grayBox h2.main-title {font-weight:700;margin-bottom:30px}
.grayBox ul, .grayBox ul li {list-style:none;margin:0;padding:0}
.grayBox ul li {padding:3px 0}
.grayBox small {font-weight:400;font-size:15px;margin-top:30px;display:inline-block}
.course {position:relative}
.course b {font-weight:400;font-size:30px}
.btn {padding:12px 20px;font-weight:700;font-size:24px;margin:40px 5px 0 5px}
.btn i {margin-left:10px}
.whiteBtn, .whiteBtn:hover {background:#fff;color:#1f6ead}
.borderBtn, .borderBtn:hover {border:1px solid #fff;color:#fff}
.info {font-size:18px}
.info p, .course p {max-width:80%;margin:10px auto}
.info h2, .info h4 {color:#00a1b5}
table.lebacs th {padding:10px 0;font-size:24px;text-align:center;border-right:1px solid #fff}
table.lebacs td {padding:6px 0;text-align:center;vertical-align:top}
table.lebacs td small {font-size:18px;display:block}
table.lebacs td span {font-weight:700;font-size:24px;display:block}
small.date {display:block;margin:-12px 0 10px}
table.lebacs tr:nth-child(even) {background: #f4f4f4}
.benefitItem span.icon {background: rgba(0, 161, 181, 0.7);color:#333;font-size:48px;float:left;padding:16px 24px;margin-right:16px}
.benefitItem p {background: rgba(0, 0, 0, 0.7);color:#fff;font-size:16px;float:left;width:100%}
.benefitItem.small p {font-size:13px}
.benefitItem p span.text {padding:12px;display:block;text-align:left}
.grayBox .benefitItem span.icon {background:rgba(255, 255, 255, 1)}
.grayBox h2.main-title span {font-weight:300;display:block}
.grayBox p {max-width:80%;margin:0 auto 40px;font-size:21px}

.grayBox a {
    padding: 10px 24px;
    border: 1px solid #fff;
    text-transform: uppercase;
    color: #fff;
    font-size: 18px;
    margin-top: 8px;
    display: inline-block;
    text-decoration: none;
    background-color: transparent;
}


/* cross sites */
.recItem, .recItem:hover {color:#0a78be;text-decoration:none}
.recItem:hover span {background-color:#f8f8f8}
.recItem span {display:table-cell;width:128px;height:128px;border-radius:50%;border:3px solid #0a78be;vertical-align:middle}
.recItem span img {width:64px}
.recItem p {margin:30px auto;max-width:80%;font-size:16px;height:120px}
.recItem h4 {font-size:30px;margin-bottom:30px;font-weight:400}
.contact {background:url(../images/contact.jpg) top center no-repeat;background-size:cover;}
section {padding:120px 0}
section.calendario {padding-top:120px}


@media only screen and (min-width : 480px) {
.benefitItem p {font-size:21px}
.benefitItem.small p {font-size:18px}	
}

@media only screen and (min-width : 768px) {
	.benefitItem p {font-size:16px}
	.benefitItem.small p {font-size:12px}
	body {overflow-x:hidden}	
}

@media only screen and (min-width : 992px) {
	.benefitItem p {font-size:18px}
	.benefitItem.small p {font-size:14px}		
}

@media only screen and (min-width : 1200px) {
	.benefitItem p {font-size:20px}
	.benefitItem.small p {font-size:16px}		
}

/* footer */
footer {font-size:11px;padding:30px 0;background:#f6f6f6;margin-top:40px;line-height:18px;text-align:left}
footer, footer h3 {color:#4d4d4d}
footer h3 {margin:0;padding:0 0 6px;font-size:21px}
.footerSocial {padding-right:0;line-height:22px}
.footerSocial a {color:#fff;background:#4d4d4d;text-align:center;width:18%;margin-right:2px;padding:4px;font-size:20px;float:left}
footer .brands {padding: 30px 0 10px}
footer hr {border:0;border-bottom:1px solid #ccc}
#jssor_1 {position: relative; margin: 0 auto; top: 0px; left: 0px; height: 52px; overflow: hidden; visibility: hidden;}
.footLogos {cursor: default; position: relative; top: 0px; left: 0px; height: 52px; overflow: hidden;}
.footLogos img {width:90%}

@media (max-width: 767px) {
	.btn {font-size:18px;margin:20px 0 0}
	.top {margin-top:40px}
	.navbar-nav {margin:0;text-align:left}
    .navbar-nav .open .dropdown-menu > li > a {color: #fff !important;}
    .navbar-nav > li {border-bottom:1px solid #eee}
    .navbar-nav > li > a {border:none!important;padding:10px 15px}
    .main-select-stock-account {width: 120px}
    .footerSocial {padding-bottom:20px}
	.navbar-toggle {position: relative;float: right;padding: 11px 10px;margin-top: 8px;margin-right: 15px;margin-bottom: 8px;background-color: transparent;background-image: none;border: 1px solid #ddd;border-radius:0;color:#333;font-size:13px}
	.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {background-color: #ddd}
	.navbar-default .navbar-toggle {border-color: #ddd;}	
	h1.slogan {margin-top:-54px}
	.row {margin:0}	
	h2.main-title {font-size:48px}
	section .container {padding:0 15px}
	section {overflow:hidden;padding:60px 0!important}
	table.lebacs th, table.lebacs td span {font-size:16px}
	table.lebacs td small {font-size:12px}
}

@media (min-width: 768px) {
	body {padding-top:125px}
	footer h3 {font-size:18px;margin:0 0 4px}
	.footerSocial a {font-size:14px}
	footer .bmb {border-left: solid 1px #848484}
    .div-media-logo {margin-top: -45px}
    .hidden-sm {display:none!important}
    .navbar-default {background:#eee;border:none;border-bottom:1px solid #fce126}
	.navbar-brand img {width:100%}
    .navbar-sm {position:relative;background:#fff;top:0;right:0;padding:5px 0}
	.footerSocial a {font-size:12px}
	.navbar-sm .account {display:inline-block}
    .navbar-header {position:relative}
    .navbar-brand {position:absolute;top:-18px;left:15px;width:120px;padding:0}
    .navbar-brand img {width:100%}
    .navbar-nav > li > a {padding: 10px 4px;font-size: 10px}
    .dropdown-menu > li > a {padding:4px 20px}
    .navbar-sm .phone:hover, .navbar-sm .login:hover {text-decoration:none;background:#f6f6f6}
    .navbar-sm .phone {color:#333;display:inline-block}
    footer .brands img {max-width:94px;margin:0 2px}	
}
@media (min-width: 960px) {
	.recItem span {
    width: 164px;
    height: 164px;
}
.recItem span img {
    width: 80px;
}
	body {padding-top:136px}
	footer h3 {font-size:21px}
	.footerSocial a {font-size:19px}
    .navbar-brand {width:166px;top:-40px}
    .navbar-nav > li > a {padding:10px;font-size:11px}
    .navbar-sm {font-size:12px;padding:10px 0}
    .main-select-stock-account {width: 240px}
    footer .brands img {max-width:115px;margin:0 5px}	
}
@media (min-width: 1200px) {
	footer h3 {font-size:24px}
	.footerSocial a {font-size:20px}
    .navbar-nav > li > a {padding:10px 14px;font-size:13px}
    .navbar-sm {font-size:13px}
    footer .brands img {max-width:none;margin:0 4px} 	
}
.google iframe {float:left;height:0!important}




/* nuevos estilos para alinearse con bmb */




.container {
    width: auto!important;
    padding-left: 1%;
    padding-right: 1%;
}

@media (min-width: 768px) {
.container {
    padding-left: 5%;
    padding-right: 5%;
}
	body.home {padding-top:0!important}
    .home .navbar-default.top-nav-expanded {background:transparent;border:none}
    .home .navbar-default.top-nav-expanded .navbar-sm {background:transparent}
    .home .navbar-default.top-nav-expanded .navbar-sm a.account, .home .navbar-default.top-nav-expanded .navbar-sm a.phone {color:#fff!important;background:transparent!important}
    .home .navbar-default.top-nav-expanded .navbar-sm .account {border-right:1px solid #fff}
    .home .navbar-default.top-nav-expanded .navbar-nav > li > a {color:#fff;border-top:0;margin-top:0}
    .home .navbar-default.top-nav-expanded .navbar-nav > li > a:hover {background:transparent!important}
	.navbar-sm .phone {padding-right:0}
}

@media (min-width: 1366px) {
.container {
    padding-left: 10%;
    padding-right: 10%;
}
}

@media (min-width: 1601px) {
.container {
    padding-left: 15%;
    padding-right: 15%;
}
}

.bg-animate {
    -webkit-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;
}