* {
	font-family: 'Open Sans', sans-serif;
}

body {
	position: relative;
}

.mockup-notebook {
	position: absolute;
    width: 41vw;
    right: 8vw;
    top: 0;
}

h1 {
	font-size: 4.5em;
	font-weight: bold
}

.p-small {
	font-size: 1.3em
}

.p-big {
	font-size: 2.2em
}

.p-bottom {
	margin-bottom: 0
}

.azul {
	color: #131C4E;
}

.white {
	color: white
}

.celeste {
	color: #33BCEE;
}

.btn-azul {
	border-radius: 15px;
    font-size: 35px;
    padding: 5px 60px 5px 60px;
    border: none;
    background: #131C4E;
    color: white;
    font-weight: bold;
}

.circle {
	height: 1150px;
    width: 1150px;
    background: #33BCEE;
    border-radius: 50%;
    position: absolute;
    top: -370px;
    right: -192px;
    opacity: .5
}

.curve {
	margin-top: -230px;
}

.back-celeste-claro {
	background-color: #DCF5F9;
	padding-top: 200px;
	padding-bottom: 50px
}

.img-full {
	width: 100%
}

.vector-uno {
	margin-top: -70px
}

.bm {
	display: flex;
	justify-content: center;
}

.back-celeste-oscuro {
	background-color: #33BCEE;
	padding-top: 50px;
	padding-bottom: 100px
}

h2 {
	font-size: 2.7rem
}

.icono {
	width: 12vw
}

.center {
	text-align: center;
}

.back-azul {
	background-color: #131C4E;
	padding-top: 50px;
	padding-bottom: 100px
}

.lineas {
	background-image: url(../images/lineas-pluspagos.svg);
	background-size: 100%;
	background-repeat: no-repeat;
	height: 1200px;
	background-position-y: 120px;
}

.number {
	font-size: 3em;
    color: #33BCEE;
    font-weight: bold;
}

.step-hr {
	border-top: 5px solid #33BCEE;
	width: 3vw
}

.step-p {
	font-size: 25px
}

.steps-two {
	transform: translateY(148px);
}

.steps-three {
	transform: translateY(225px);
}

.arrow {
	width: 5vw;
	transform: translateY(-20px);
}

.relative {
	position: relative;
}

.mockup-celular {
	position: absolute;
    width: 46vw;
    top: 0;
    right: 10vw;
}

.android {
	width: 220px;
}

.btn-app {
	width: 220px;
    margin-top: 4px;
    height: 73px;
    border: none;
    border-radius: 11px;
    background: #131C4E;
    color: white;
    font-weight: bold
}

.card-lightblue {
	background: #33BCEE;
    padding: 2vw;
    border-radius: 10px;
    height: 235px
}

.back-image {
	background-image: url(../images/img.svg);
	background-size: 100%;
	background-repeat: no-repeat;
	height: 36vw;
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
}

.back-image h1 {
	font-size: 3.5em
}

.shadow-text {
	text-shadow: 2px 2px 2px rgba(150, 150, 150, 1);
}

.btn-app-celeste {
	width: 220px;
    margin-top: 4px;
    height: 73px;
    border: none;
    border-radius: 11px;
    background: #33BCEE;
    color: white;
    font-weight: bold
}

.prov img {
	width: 15vw
}

.prov > div > div {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 20vw
}

footer h2 {
	font-size: 2.4em
}

.android:hover, .prov img:hover {
	cursor: pointer;
}

.a a {
 	text-decoration: none;
 	color: white
}

.a span:hover {
	cursor: pointer
}

.circulo {

	position: absolute;
    right: 0;
    top: -50px;
    width: 47vw;
    opacity: .5
}

/*---- responsive ------*/

@media ( min-width: 1682px ) {
	.container {
		max-width: 1440px!important
	}

	.img-full {
		width: 33vw
	}

	.mockup-celular {
		width: 42vw
	}
}

@media ( max-width: 1681px ) {
	.circle {
		height: 1000px;
    	width: 1000px;
	}

	.steps-two {
		transform: translateY(68px);
	}

	.steps-three {
    	transform: translateY(60px);
	}

	.lineas {
		height: 1000px
	}
}

@media ( max-width: 1441px ) {
	.circle {
		height: 900px;
    	width: 900px;
	}
}

@media ( max-width: 1367px ) {
	.circle {
		height: 850px;
    	width: 850px;
    	top: -280px
	}

	.curve {
    	margin-top: -175px;
	}

	.back-celeste-claro {
		padding-top: 50px
	}
}

/*@media ( max-width: 1025px ) and ( min-width: 961px ) {
	.p-big {
		font-size: 1.6em
	}

	.step-p {
    	font-size: 18px;
	}

	.steps-two {
    	transform: translateY(50px);
	}

	.steps-three {
    	transform: translateY(48px);
	}

	.lineas {
    	height: 890px;
	}
}*/

@media ( max-width: 1100px ) and ( min-width: 1000px ) {
	.steps-two .offset-lg-2{
		margin-left: 8.333333%!important;
	}

	.steps-two .offset-lg-1 {
		margin-left: 16.666667%!important;
	}
}

@media ( max-width: 1100px ) and ( min-width: 761px ) {
	.p-big {
		font-size: 1.2em
	}

	.curve {
    	margin-top: -135px;
	}

	.circulo {
		width: 52vw
	}

	.mockup-notebook {
    	position: absolute;
    	width: 49vw;
    	right: 3vw;
    	top: 0;
	}

	.step-p {
    	font-size: 13px;
	}

	.steps-two {
    	transform: translateY(0);
	}

	.steps-three {
    	transform: translateY(0);
	}

	.lineas {
		background-image: none
	}

	.lineas {
    	height: auto;
	}

	.card-lightblue .azul {
		font-size: .8em
	}

	.back-image h1 {
    	font-size: 2.3em;
	}

	.vector-uno {
		margin-top: 0
	}

	.arrow {
    	margin-top: 50px;
    	margin-bottom: 20px;
    	width: 7vw;
    	transform: translateY(0)
	}

	.steps-two > div:nth-child(1) {
		order: 1
	}

	.order > div:nth-child(2) {
		order: 0
	}
}

@media ( max-width: 760px ) {

	.circle {
		right: -692px
	}

	.order > div:nth-child(1) {
		order: 1
	}

	.order > div:nth-child(2) {
		order: 0
	}

	.curve {
    	margin-top: -130px;
	}

	.p-big {
		font-size: 2em
	}

	.p-big.azul {
		text-align: center;
	}

	.vector-uno {
		margin-top: 0
	}

	.lineas {
		background-image: none;
		height: auto;
	}

	.steps-two {
    	transform: translateY(0);
	}

	.steps-three {
    	transform: translateY(0);
	}

	.arrow {
    	margin-top: 50px;
    	margin-bottom: 20px;
    	width: 10vw;
    	transform: translateY(0)
	}

	.mockup-celular {
    	position: absolute;
    	width: 64vw;
    	top: 0;
    	right: 3vw;
	}

	.card-lightblue {
		width: 60vw;
		display: block;
		margin: auto;
		margin-bottom: 20px
	}

	.back-image .justify-content-center {
		display: none
	}

	.back-image h1 {
    	font-size: 2.5em;
	}

	.steps-two > div:nth-child(1) {
		order: 1
	}

	.steps-two > div:nth-child(2) {
		order: 0
	}


}

@media ( max-width: 620px ) {

	h1 {
		font-size: 2.5em
	}

	.p-small {
		font-size: 1em
	}

	.circle {
    	right: -553px;
    	height: 650px;
    	width: 650px;
	}

	.btn-azul {
		font-size: 20px
	}

	.p-big {
    	font-size: 1em;
	}

	.curve {
    	margin-top: -57px;
	}

	.step-p {
    	font-size: 15px;
	}

	.mockup-celular {
    	width: 51vw;
    	top: 255px;
    	z-index: 0;
    	right: 11px;
	}

	.back-image h1 {
    	font-size: 1em;
	}

	.card-lightblue {
		height: 223px
	}

	footer .p-small {
    	font-size: .5em;
	}

	footer h2 {
    	font-size: .7em;
	}

	footer .back-azul {
		padding-bottom: 50px
	}

	.android {
    	width: 130px;
	}

	.btn-app {
    	width: 130px;
    	margin-top: 0px;
    	height: 43px;
    	font-size: 11px;
    	border-radius: 5px;
	}

	.icono {
    	width: 18vw;
	}

	.mockup-notebook {
    	position: absolute;
    	width: 80vw;
    	right: 8vw;
    	top: 0;
	}

	.circulo {
		width: 89vw
	}

	.mobile-top {
		padding-top: 69vw
	}

	.mobile-top h1, .mobile-top p {
		text-align: center;
	}

	.mobile-center {
		display: block;
		margin: auto;
	}

	.mobile-padding {
		padding-bottom: 0!important
	}

}

@media ( max-width: 400px ) {

	.mockup-celular {
    	width: 51vw;
    	top: 255px;
    	z-index: 0;
    	right: 11px;
	}

}

@media ( max-width: 350px ) {
	.mobile-center {
		transform: translateY(-28px);
	}

	.curve {
    	margin-top: -40px;
	}
}