@charset "UTF-8";

@font-face {font-family: Benton;src: local(Benton Thin), url(../../fonts/Benton/BentonSans-Thin.woff2) format("woff2"), url(../../fonts/Benton/BentonSans-Thin.woff) format("woff");font-weight: 100}

@font-face {font-family: Benton;src: local(Benton Light), url(../../fonts/Benton/BentonSans-Light.woff2) format("woff2"), url(../../fonts/Benton/BentonSans-Light.woff) format("woff");font-weight: 300}

@font-face {font-family: Benton;src: local(Benton Regular), url(../../fonts/Benton/BentonSans-Regular.woff2) format("woff2"), url(../../fonts/Benton/BentonSans-Regular.woff) format("woff");font-weight: 400}

@font-face {font-family: Benton;src: local(Benton Bold), url(../../fonts/Benton/BentonSans-Bold.woff2) format("woff2"), url(../../fonts/Benton/BentonSans-Bold.woff) format("woff");font-weight: 700}

a:not(btn1),
a:not(btn2) {font-size: 1.2rem;text-decoration: none;color: #3b79d2}
a:not(btn1):hover,
a:not(btn2):hover {text-decoration: underline;color: #79a4e0}
b,strong {font-weight: 800}
*,:before,:after{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;margin:0;padding:0;outline:none}
body,
html {font-family: Benton, sans-serif;background: #fff;font-size: 16px;margin: 0;position: relative;z-index: 1}
body * {box-sizing: border-box}
body :active,
body :focus,
body :hover,
body :visited {outline: 0 !important}
img {display: block;max-width: 100%;width: 100%;}
ul {padding: 0;margin: 0;list-style: none}
h3 {font-weight: 400;font-size: 2rem;float: left;width: 100%;margin-bottom: 25px;color: #3b79d2;text-align: left;line-height: 1}
h3 span {display: block;color: #2ea3ff}
h4 {color: #3b79d2;font-size: 2rem;font-weight: 400;float: left;width: 100%}
p {margin: 0;margin: 5px 0;font-weight: 400;font-size: 16px}
figure, article {padding: 0;margin: 0;}
::-webkit-input-placeholder {color: #7b7878 }
:-ms-input-placeholder {color: #7b7878;}
::placeholder {color: #7b7878}

.content-bussiness {
	font-family: Benton, sans-serif;
	font-size: 16px;
	position: relative;
}
.content-bussiness:before {
	content: '';
	position: absolute;
	display: block;
	width: 100%;
	height: 80vh;
	background-image: url('../../images/business/background_header.png');
	background-position: top;
	background-size: cover;
	background-position: bottom right;
	z-index: 0;
}
/*Footer*/
footer {
	background-color: #00175A;
	color: #FFF;
}
.footer-content{
	display: flex;
	padding: 80px 50px;
	position: relative;
}
.footer-content h2  {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 25px;
}

.footer-content p,
.footer-content a {
	font-size: 16px;
	font-weight: 400;
	line-height: 22px;
}
.footer-content a {
	color: #75C5FF;
}
.footer-gold-business {
	width: 51%;
	position: relative;
}
.footer-corporative {
	position: relative;
	width: 28%;
	padding-left: 25px;
	padding-right: 25px;
}
.footer-end {
	width: 21%;
	padding-left: 25px;
	position: relative;
}
.footer-gold-business:before {
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: 1px;
	background-color: #1F3A82;
}
.footer-end:after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 1px;
	background-color: #1F3A82;
}
.footer-gold-business .d-flex > div {
	width: 50%;
}
.footer-gold-business .d-flex > div:first-child {
	padding-right: 25px;
}
.footer-gold-business .d-flex > div:last-child {
	padding: 0 25px 0 15px;
}
.footer-end figure {
	text-align: right;
}
.footer-end figure img{
	width: 180px;
	display: inline-block;
}
.main-contain {
	margin-top: 35px;
	position: relative;
	z-index: 1;
}
.main-contain h1 {
	text-align: center;
	font-size: 30px;
	color: #FFF;
	font-weight: 400;
	margin-bottom: 20px;
}
.c-business {
	justify-content: center;
	max-width: 1366px;
	margin: 0 auto 40px auto;
}
.hover-card {
	position: absolute;
	width: 100%;
	height: 100%;
	left: -100%;
	opacity: 0;
	background-color: #03123E;
	padding: 35px 15px 15px 15px;
	border-radius: 15px;
	z-index: 2;
}
.d-hide {
	transition: 0.7s;
	top: -100%;
	left: 0;
	opacity: 0;
}
.card-business:hover .d-hide {
	transition: 0.7s;
	top: 0;
	left: 0;
	opacity: 1;
}
.active-info-c .d-hide {
	display: none;
	opacity: 0;
	cursor: default;
}
.hover-card figure {
	max-width: 95px;
	display: block;
	margin: 0 auto;
}
.card-business .hover-card article h2 {
	color: #FFF;
	font-weight: 400;
	margin: 25px 0;
	text-align: center;
}
.card-business .hover-card article h2 strong {
	font-weight: 800;
}
.card-business .hover-card span.btn-moreinfo {
	color: #FFF;
}
.card-business {
	position: relative;
	overflow: hidden;
	width: 42%;
	border-radius: 15px;
	padding: 10px 20px;
	margin: 0 20px;
	height: fit-content;
	min-height: 485px;
}
.card-business:before {
	content:'';
	display: block;
	z-index: 0;
	background-color: #FAFBFD;
	width: 100%;
	height: 82%;
	position: absolute;
	bottom: 0;
	left: 0;
	border-radius: 15px;
}
div.active-info-c:before {
	height: 92%;
}
.card-business .img_card {
	width: 50%;
	position: relative;
	z-index: 1;
	margin:0 auto 15px auto;
}
.card-business .img_card .img-tgold-movil {
	display: none;
}
.card-business article {
	position: relative;
	z-index: 1;
}
.card-business h2 {
	position: relative;
	color: #0F276F;
	font-size: 25px;
	font-weight: 700;
	text-align: center;
	margin-bottom: 15px;
}
.card-business article h3 {
	margin-bottom: 15px;
	background-color:#03123E;
	font-size: 16px;
	font-weight: 500;
	text-align: center;
	padding: 10px 0;
	color: #FFF;
	border-radius: 10px;
}
.active-info-c .card-business {
	height: fit-content;	
}
.card-business article .info-blue p {
	color: #002878;
}
.card-business article .info-blue p b {
	font-weight: 800;
}
.info-blue {
	border-radius: 15px;
	justify-items: center;
	background-color: #EDF1F7;
	padding: 15px 25px;
	align-items: center;
	margin-bottom: 25px;
}
.info-blue figure {
	width: 60px;
	margin-bottom: 0;
	margin-right: 10px;
}
.info-blue div {
	width: 90%;
}

.info-blue div p {
	font-size: 18px;
	margin-bottom: 0;
}
.card-business article p {
	font-size: 16px;
	margin-bottom: 0;
	color: #3C3D44;
	text-align: left;
}

.info-text-h h4 {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 15px;
	color: #53565A;
}
.info-text-h ul {
	padding-left: 0;
}
.info-text-h ul li {
	align-items: center;
	margin-bottom: 15px;
	width: 100%;
	display: flex;
}
.info-text-h ul li img {
	width: 35px;
	margin-right: 10px;
}
.info-text-h .text-gray small {
	font-size: 16px;
	font-weight: 400;
	color: #838692;
}
.card-business article .info-text-h p.text-gray {
	margin-bottom: 10px;
} 
.info-text-h p.text-gray strong {
	font-weight: 600;
}
.card-business span.btn-moreinfo {
	display: block;
	text-align: center;
	font-size: 18px;
	color: #006FCF;
	vertical-align: middle;
}
.card-business span.btn-moreinfo span {
	vertical-align: middle;
}
.card-business .btn-action {
	display: block;
	width: 100%;
	border-radius: 5px;
	background-color: #006FCF;
	font-size: 18px;
	color: #FFF;
	text-align: center;
	padding: 10px 0;
	margin: 10px 0;
	text-decoration: none;
}
.card-business .btn-action:hover {
	background: #285FB0;
}
.hide-info {
	display: none;
}
.content-perfil {
	background-color: #FAFBFD;	
	width: 100%;
	margin:15px 0;
	padding: 35px 0;
} 
.content-perfil > div {
	max-width: 1366px;
	position: relative;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}
.content-perfil  div > figure {
	max-width: 350px;
	margin-right: 30px;
}
.p-style-1,
.p-style-2 {
	max-width:700px;
	width: 100%;
}
.p-style-1 {
	overflow: hidden;
	position: relative;
}
.p-style-1 h2 {
	font-size: 30px;
	font-weight: 600;
	color: #0056B8;
	margin-bottom: 5px;
}
.p-style-1 p {
	font-size: 20px;
	color:#5F616B;
	margin-bottom: 25px;
}
.p-style-1 .d-flex {
	align-items: center;
	margin-bottom: 10px;
}
.p-style-1 .d-flex p {
	font-size: 16px;
	color: #A7ABB8;
	margin-right: 10px;
	margin-bottom: 0;
}
.p-style-1 .d-flex .progress {
	width: 150px;
	border-radius: 5px;
}
.p-style-1 h4 {
	font-weight: 600;
	font-size: 18px;
	color: #333;
	margin-bottom: 25px;
}
.p-style-1 label {
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding: 10px;
	background-color: #FFF;
	border-radius: 5px;
	font-size: 15px;
	color: #3C3D44;
	margin-bottom: 15px;
	border:.5px solid #FFF;
}
.p-style-1 label:hover {
	border:.5px solid #006FCF;
}
.p-style-1 label small {
	display: inline-block;	
	padding: 5px 10px;
	color: #003E9B;
	border-radius: 4px;
	background-color: #EDF1F7;
 ;
}
.img-perfil {
	position: relative;
}
.img-perfil-gold {
	width: 200px;
	top: 0;
	left: 0;
	opacity: 0;
	position: absolute;
	animation-name: cardGold;
	animation-duration: 1s;
	animation-delay: 1s;
  animation-fill-mode: forwards;
}
.img-perfil-platinum {
	width: 200px;
	top: 115px;
	left: 0;
	opacity: 0;
	position: absolute;
	animation-name: cardPlatinum;
	animation-duration: 1s;
	animation-delay: 2s;
  animation-fill-mode: forwards;
}
.img-perfil-quizz {
	width: 200px;
	top: 155px;
	left: 0;
	opacity: 0;
	position: absolute;
	animation-name: cardQuizz;
	animation-duration: 1s;
	animation-delay: 3s;
  animation-fill-mode: forwards;
}
@keyframes cardGold {
  0% { top: 0;left: 0px;opacity: 0; }
  100% { top: 80px;left: 50px;opacity: 1; }
}
@keyframes cardPlatinum {
  0% { left: 0;opacity: 0; }
  100% { left: 75px;opacity: 1; }
}
@keyframes cardQuizz {
  0% { left: 0;opacity: 0; }
  100% { left: 100px;opacity: 1; }
}

.img-perfil a {
	display: block;
	text-align: center;
	padding: 15px 0;
	font-size: 18px;
}
.img-perfil a:hover {
	text-decoration: none;
}
.img-perfil a span {
	vertical-align: middle;
}

.p-style-3 h2  {
	font-size: 25px;
	color: #5F616B;
	font-weight: 300;
	margin-bottom: 25px;
	text-align: center;
}
.head-card-result {
	opacity: 0;
	position: relative;
	left: -50px;
	align-items: center;
	justify-content: center;
	margin-bottom: 25px;
}
.head-card-result img {
	max-width: 80px;
	margin-right: 15px;
	display: inline-block;
}
.head-card-result h3 {
	font-size: 20px;
	font-weight: 600;
	color: #3C3D44;
	display: inline-block;
	width: auto;
}

.p-style-3 .btn-moreinfo {
    display: block;
    text-align: center;
    font-size: 18px;
    color: #006FCF;
    vertical-align: middle;
}
.p-style-3  span.btn-moreinfo span {
    vertical-align: middle;
}
.p-style-3 a.btn-action {
	display: block;
  width: 100%;
  border-radius: 5px;
  background-color: #006FCF;
  font-size: 18px;
  color: #FFF;
  text-align: center;
  padding: 10px 0;
  margin: 10px 0;
  text-decoration: none;
}
.p-style-3 a.btn-action:hover {
	background-color: #006FCF;
}
.info-blue-2 {
	justify-items: center;
	background-color: #EDF1F7;
	padding: 15px 25px;
	align-items: center;
	margin-top: 15px;
	margin-bottom: 25px;
	border-radius: 15px;
	max-width: 500px;
}
.info-blue-2 figure {
	width: 130px;
	margin-bottom: 0;
	margin-right: 10px;
}
.info-blue-2 div p {
	font-size: 16px;
	color: #002878;
	margin-bottom: 0;
	text-align: left;
}
.flex-style-3 > div {
	padding: 0 20px;
	text-align: left;
	position: relative;
	display: none;
	max-width: 500px;
}
.flex-style-3 > div.second-card:before {
	position: absolute;
	content: '';
	left: 0;
	display: block;
	top: 50%;
	transform: translate(0,-50%);
	height: 50%;
	background-color: #CCD1DE;
	width: 2px;
}
.p-result {
	display: none;
}
.quest-perfil {
	position: absolute;
	opacity: 0;
	right: -100%;
	bottom: 0;
}
.quest-perfil-2 {
	display: none;
}
.principal-tit {
	display: flex;
	align-items: center;
	text-align: center;
	justify-content:center;
	height: 50vh;
	animation-name: hideTit;
	animation-duration: 3s;
	animation-delay: 1s;
  	animation-fill-mode: forwards;
  	position: absolute;
  	width: 100%;
}
.principal-tit h2 {
	font-size:80px;
	color: #FFF;
	text-align: center;
	font-weight: 800;
	width: 100%;
}

.images-perfil {
	position: relative;
}
.img-result {
	transform:rotate(-45deg);
	width: 10%;
	opacity: 0;
	display: none;
}
.img-result.active {
	display: block;
	z-index: 1;
	animation-name: showImgResult;
	animation-duration: 2s;
  	animation-fill-mode: forwards;
}
.perfil-cards {
	position: relative;
	overflow: hidden;
}
.cards-active .head-card-result {
	animation-name: cardsResult;
	animation-duration: 1s;
	animation-delay: 1.5s;
  animation-fill-mode: forwards;
}

/**Animaciones**/
@keyframes cardsResult {
  0% { left:-50px; opacity:0; }
  100% { left:0; opacity:1; }
}
@keyframes showImgResult {
  0% { width:10%; opacity:0;transform:rotate(-45deg); }
  100% { width:100%; opacity:1;transform:rotate(0); }
}
@keyframes showTit {
  0% { opacity:0; }
  100% { opacity:1; }
}
/* @keyframes hideTit {
  0% { opacity:1; }
  100% { opacity:0; }
} */ 
@keyframes showPerfil {
  0% { right: -100%; opacity:0; }
  100% { right: 0; opacity:1; }
}
@keyframes hidePerfil {
  0% { left: 0; opacity:1; }
  100% { left: -100%; opacity:0; }
}
.p-show {
	display: block;
	position: relative;
	animation-name: showPerfil;
  	animation-duration: 1.6s;
  	animation-fill-mode: forwards;
  	right: 0;
}
.p-hide {
	animation-name: hidePerfil;
  	animation-duration: 0.8s;
  	animation-fill-mode: forwards;
}
@keyframes out-perfil {
  0% { left: 0; opacity:1; }
  100% { left: -100%; opacity:0; }
}
.out-perfil {
	position: absolute;
	animation-name: out-perfil;
  	animation-duration: 1s;
  	animation-fill-mode: forwards;
}
@keyframes in-result {
  0% { right: -100%; opacity:0; }
  100% { right: 0; opacity:1; }
}
#perfil-result-2.in-result {
	display: block;
	position: relative;
	animation-name: in-result;
  	animation-duration: 2s;
  	animation-fill-mode: forwards;
}

	#perfil-result-2.in-result .title-review strong{
		display: block;
		margin-bottom: 14px;
	}

	#perfil-result-2.in-result .info-extra{
		margin-top: 25px;
	}

#perfil-result-2 {
	right: -100%;
	position: absolute;
	display: none;
}


/**Responsive**/
@media screen and (max-width:1366px) {
	.c-business,
	.content-perfil > div {
		max-width: 1280px;
	}
}

@media screen and (max-width:1280px) {
	.c-business,
	.content-perfil > div {
		max-width: 98%;
	}
	.footer-corporative {
		padding-left: 20px;
	}
	.footer-gold-business {
		width: 100%;
		margin-bottom: 25px;
		padding-bottom: 25px;
	}
	.footer-corporative {
		width: 50%;
	}
	.footer-end {
		width: 50%;
	}
	.footer-content {
		flex-wrap: wrap;
	}
	.footer-gold-business:before {
		top: inherit;
		bottom: 0;
		width: 100%;
		height: 1px;
	}

}
@media screen and (max-width:1024px) {
	.head-card-result h3 {
		font-size: 19px;
	}
	.card-business h2 {
		font-size: 25px;
	}
}
@media screen and (max-width:960px) {
	.c-business {
		flex-wrap: wrap;
	}
	.card-business {
		width: 100%;
		margin-bottom: 40px;
	}
	.content-flex {
		flex-wrap: wrap;
	}
	.images-perfil,
	.perfil-cards {
		width: 98%;
	}
	.content-perfil div > figure {
		margin: 25px auto 25px auto;
	}
	.images-perfil {
		order: 2;
	}
	.p-style-2,
	.info-blue-2 {
		max-width: 100%;
		width: 100%;
	}
	.flex-style-3 {
		flex-wrap: wrap;
	}
	.flex-style-3 > div {
		width: 100%;
		margin-bottom: 40px;
		display: none;
	}
	.flex-style-3 > div.second-card:last-child:before 
	{
		transform: translate(-50%,0);
		left: 50%;
		top: -25px;
		height: 2px;
		width: 80%;
	}
	.content-bussiness:before {
		height: 100vh;
	}
}
@media screen and (max-width:740px) {
	.card-business .img_card .img-tgold-movil {
		display: block;
	}
	.card-business .img_card .img-tgold-desck {
		display: none;
	}
	.card-business {
	  bottom: 0;
	  opacity: 1;
	  right: 0;
	}
	.img-perfil-gold,
	.img-perfil-platinum,
	.img-perfil-quizz
	{
		width: 110px;
	}
	.img-perfil-platinum {
		top: 65px;
	}
	.img-perfil-quizz {
		top: 85px;
	}
	/**Animaciones**/
	@keyframes cardGold {
	  0% { top: 0;left: 0px;opacity: 0; }
	  100% { top: 45px;left: 25px;opacity: 1; }
	}
	@keyframes cardPlatinum {
	  0% { left: 0;opacity: 0; }
	  100% { left: 35px;opacity: 1; }
	}
	@keyframes cardQuizz {
	  0% { left: 0;opacity: 0; }
	  100% { left: 50px;opacity: 1; }
	}
	@keyframes showCardsP {
	  0% { right: -50px; opacity:0; }
	  100% { right: 0; opacity:1; }
	}

	.card-business:before {
		height: 92%
	}
	.card-business {
		width: 48%;
	    margin: 0 auto 20px auto;
	    min-height: auto;
	}
	.c-business {
		flex-wrap: nowrap;
	}
	.main-contain h1 {
		font-size: 25px;
	}
	.card-business h2 {
	    font-size: 20px;
	}
	.card-business article h3,
	.card-business article p {
		font-size: 16px;
	}
	.info-text-h h4 {
		font-size: 18px;
	}
	.images-perfil {
		width: 25%;
		order: 1;
	}
	.perfil-cards {
		width: 73%;
		margin-left: 2%;
		order: 2;
	}
	.p-style-1 h2 {
		font-size: 25px;
	}
	.content-perfil > div {
		align-items: top;
	}
	.p-style-1 p {
		font-size: 18px;
	}
	.principal-tit h2 {
    	font-size: 40px;
	}
	.hover-card {
		display: none;
		cursor: not-allowed;
	}

	.footer-content {
		    padding: 50px 10px;
	}
}
@media screen and (max-width:590px) {
	.content-bussiness:before {
		background-image: url('../../images/business/background_movil.png');
		    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
	}
	.principal-tit h2 {
	    font-size: 50px;
	}
	.c-business, .content-perfil > div {
		width: 95%;
	}
	.main-contain h1 {
		font-size: 20px;
		margin-bottom: 15px;
	}
	.card-business {
		width: 98%;
	}
	.c-business {
		flex-wrap: wrap;
	}
	.images-perfil {
		width: 100%;
		order: 2;
	}
	.perfil-cards {
		order: 1;
		width: 100%;
	}
	.p-style-1 h4 {
		margin-bottom: 15px;
	}
	.content-perfil div > figure {
    	max-width: 300px;
	}
	.flex-style-3 > div {
		padding: 0 10px;
	}
	.info-blue-2 {
		padding: 10px 5px;
	}
	.principal-tit {
		height: 95vh;
	}
	.card-business {
		padding: 15px;
	}
	.card-business:before {
	    height: 100%;
	}
	div.active-info-c:before {
	    height: 100%;
	}
	.c-business-tit figure {
		width: 70px;
	}
	.c-business-tit {
		display: flex;
		align-items: center;
	}
	.card-business h2 {
		font-size: 19px;
		text-align: left;
		padding-left: 12px;
	}
	.card-business article h3 {
		padding: 10px 5px;
	}
	.card-business h2 br {
		display: none;
	}
	.footer-gold-business .d-flex {
		flex-wrap: wrap;
	}
	.footer-gold-business .d-flex > div:last-child {
		padding: 0;
	}
	.footer-gold-business .d-flex > div {
		width: 100%;
	}
	.footer-end,
	.footer-corporative {
    width: 100%;
	}
	.footer-content h2 br {
		display: none;
	}
	.footer-end:after {
		width: 100%;
		height: 1px;
	}
	.footer-corporative {
		padding-left: 0;
	}
	.footer-end {
		margin-top: 20px;
		padding-top: 20px;
		padding-left: 0;
	}
	.footer-end figure {
		text-align: left;
	}
	.footer-end figure img {
    width: 190px;
  }
  .img-perfil-gold,
	.img-perfil-platinum,
	.img-perfil-quizz
	{
		width: 185px;
	}
	.img-perfil-platinum {
		top: 76px;
	}
	.img-perfil-quizz {
		top: 110px;
	}
	/**Animaciones**/
	@keyframes cardGold {
	  0% { top: 0;left: 0px;opacity: 0; }
	  100% { top: 45px;left: 25px;opacity: 1; }
	}
	@keyframes cardPlatinum {
	  0% { left: 0;opacity: 0; }
	  100% { left: 40px;opacity: 1; }
	}
	@keyframes cardQuizz {
	  0% { left: 0;opacity: 0; }
	  100% { left: 55px;opacity: 1; }
	}

}