.contForm{
	margin-top:7em;
	background: linear-gradient(90deg, white, rgb(197,200, 235));
}

body{
	background: linear-gradient(90deg, white, rgb(197,200, 235));
}

html, body{
	overflow-x:hidden;
}

.cont{
	position:relative;
}

.leftCont1{
	animation-name:leftCont1;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
}

@keyframes leftCont1 {
	25%{transform:scale(0.8) translateX(-8%); left:0;}
	75%{left:-100%; transform:scale(0.8);}
	to{left:-100%; transform:scale(1);}
}


.leftCont2{
	animation-name:leftCont2;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
}

@keyframes leftCont2 {
	from{ left:-100%;}
	25%{transform:scale(0.8); left:-100%;}
	75%{left:-200%; transform:scale(0.8) translateX(8%);}
	to{left:-200%; transform:scale(1);}
}

.rightCont1{
	animation-name:rightCont1;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
}

@keyframes rightCont1 {
	from{left:-100%;}
	25%{transform:scale(0.8); left:-100%;}
	75%{left:0; transform:scale(0.8) translateX(-8%);}
	to{left:0; transform:scale(1);}
}


.rightCont2{
	animation-name:rightCont2;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
}

@keyframes rightCont2 {
	from{left:-200%;}
	25%{transform:scale(0.8) translateX(8%); left:-200%;}
	75%{left:-100%%; transform:scale(0.8);}
	to{left:-100%; transform:scale(1);}
}
[class*="layout"]{
	float:left;
}

.layoutLeft{
	margin-left:10%;
	width:25%;
	height:100%;
	position:relative;
	padding-bottom:4em;
}

@media (max-width:768px){
	.layoutLeft{
		margin-left:5%;
		width:90%;
		height:auto;
		padding-top:1em;
		font-size:0.9em;
		float:none;
		padding-bottom:0;
	}

	.tituloPaso{
		margin-bottom:0.5em !important;
	}

	.layoutCenter{
		display:none;
	}

	.layoutRight{
		margin-left:5%!important;
		width:90%!important;
		height:auto!important;
		transform:scale(1) !important;
		margin-top: 0.5em !important;
		z-index:3;
		padding-bottom:1em !important;
	}

	.btn-paso{
		width:80% !important;
		margin-left:10% !important;
		position:relative !important;
		bottom:0 !important;
		top:0 !important;
		left:0 !important;
		right:0 !important;
		margin-top:0.2em !important;;
	}

	.btn-paso-anterior{
		margin-top:1em !important;
	}
}

.flechaMovil{
	height:6em;
	width:100%;
	position:relative;
	z-index:2;
	text-align:center;
}

.flechaMovil .linea{
	width:2em;
	height:4em;
	display:inline-block;
	background-color:darkblue;
}

.flechaMovil .punta{
	border:solid 2em transparent;
	border-top:solid 2em darkblue;
	display:inline-block;
	position:relative;
	top:-1em;
}

.tituloPaso{
	width:100%;
	text-align:center;
	margin-bottom:1.2em;
	font-size:1.5em;
}

.contForm
.info{
	width:100%;
	padding:2em;
	background-color:darkblue;
	color:darkblue;
	border-radius:0.5em;
	box-shadow: 5px 5px 5px gray;
	z-index:1;
	position:relative;
}

.progressbar{
	width:100%;
	text-align: center;
	margin-bottom:2em;
}

.progressbar [class *="item"]{
	height: 2.5em;
    width: 2.5em;
    border-radius: 1.25em;
    border: solid 0.4em white;
    color: gray;
    font-size: 1em;
    padding: 0.15em;
    font-weight: bold;
    margin: 0;
    display: inline-block;
    color: lightgray;
}

.progressbar .linea{
	height:0.4em;
	margin-bottom:0.25em;
	display:inline-block;
	background-color:white;
	width:2em;
}

.progressbar .active{
	border-color:darkblue;
	color:darkblue;
}

.background-darkblue{
	background-color: darkblue !important;
}

.layoutCenter{
	width:20%;
	height:100%;
	margin-top:2em;
	transform:translateX(-13em);
	z-index:0;
	position:relative;
}

.redimensionar{
	animation-name: redimensionar;
	animation-duration:0.2s;
	animation-fill-mode:forwards;
}

@keyframes redimensionar{
	to{transform:translateX(0em);}
}

.lineaFlecha{
	height: 1.5em;
    background-color: darkblue;
    width: 65%;
    /* margin-left: 25%; */
    margin-top: 2em;
    z-index: 1;
}
/*
.puntaFlecha{
	border: solid 1em darkblue;
    border-bottom: none;
    border-left: none;
    transform: rotate(45deg) translateX(-3.5em);
    height: 3em;
    margin-top: 3.65em;
    width: 3em;
    border-radius: 0.3em;
}
*/
.puntaFlecha{
	    height: 4em;
    width: 5em;
    border: solid 2em transparent;
    border-left: solid 2.5em darkblue;
    margin-top: 0.72em;
}
.layoutRight{
	width: 30%;
    margin-top: 4em;
    padding-top: 0;
    font-size: 0.9em;
    padding-bottom: 4.5em;
    position: relative;
    margin-left: 0;
    background-color: white;
    border-radius: 4px;
    box-shadow: 0 0 14px grey;
    transform:scale(0);
}

.escalar{
	animation-name:escalar;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
}

@keyframes escalar{
	to{transform:scale(1);}
}

label{
	font-size:0.75em;
    width: 80%;
    margin-left:10%;
	color:gray;
	margin-bottom:0.2em;
	margin-top:2em;
}

input, textarea, select{
	padding: 0.5em 0.5em;
    border: none;
    border-bottom: solid 0.3em darkblue;
    border-radius: 0.2em;
    width: 80%;
    margin-left:10%;
    box-shadow: 0px 0px 5px lightgray;
}

.btn.btn-paso{
	margin-top:1em;
	color:yellow;
	background:linear-gradient(to bottom, darkblue, blue, darkblue);
	position:absolute;
	bottom:1em;
	right:10%;
	font-weight:bold;
	width:10em;
}

.btn-paso.btn-paso-anterior{
	left:10%;
	right:auto;
}

.contForm2 label{
	margin-top:0.3em;
}

.contForm2 p{
	margin-top:2em;
	margin-bottom:0em;
	margin-left:10%;
	width:80%;
}

.contForm2 .layoutRight{
	margin-top: 5em;
	padding-bottom: 5.5em;
}

.info img{
	height:2.5em;
	margin-right:0.75em;
	margin-bottom:0.25em;
	filter:invert(1);
	opacity:0;
}

.contForm3 .layoutRight{
	margin-top: 6em;
	padding-bottom: 5.5em;
}

.info-animation{
	animation-name:colorear;
	animation-fill-mode:forwards;
	animation-duration:0.75s;
}

@keyframes colorear{
	to{color:white;}
}

img.aparecer{
	animation-name:aparecerInfo;
	animation-fill-mode:forwards;
	animation-duration:0.75s;
	opacity:0;
}

@keyframes aparecerInfo{
	to{opacity:1;}
}

input[type="checkbox"]{
	display:inline-block;
	box-shadow:none;
	width:auto;
	margin-left:0;
}

.condiciones{
	margin-top:1.5em;
	margin-left:10%;
	width:80%;
	text-align:left;
}

form{
	width:100%;
}

form#msform-3 p{
	margin-top:1.5em;
	margin-left:10%;
	width:80%;
	margin-bottom:0;
}

.contForm3 .layoutRight2{
	display:none;
	padding:2em;
	margin-top:10em;
	position:relative;
	z-index:3;
}

.color-blue{
	color:blue;
}

.cursor-pointer{
	cursor:pointer;
}

form#msform-4 p{
	margin-left:10%;
	width:80%;
	margin-bottom:0;
	font-size:1.2em;
}

.layoutRight .titSesion,
.layoutRight .emailSesion{
	margin-left: 10%;
    margin-top: 3em;
    width: 80%;
    margin-bottom:0;
}


.layoutRight .emailSesion{
	margin-top:0.2em;
	text-align:center;
}
.btn.btn-centrado{
	float:none;
	margin:auto;
	position: relative;
    top: 0;
    left: 0;
}

.contBtn{
	width:100%;
	text-align:center;
}

.cerrar_setDato{
	position: absolute;
    top: 1em;
    right: 1em;
    width: 1em;
    height: auto;
    transform: rotate(45deg);
    cursor: pointer;
    filter: invert(0);
    opacity: 0.3;
}

.contForm2,
.contForm3{
	display:none;
}


input[type="checkbox"]{
	display: inline-block;
    box-shadow: none;
    width: auto;
    margin-left: 0;
    margin-right: 0.2em;
    position: relative;
    vertical-align: middle;
    top: -0.15em;
}

.colaborador{
	margin-top:1.5em !important;
	margin-left:10% !important;
	width:80% !important;
	text-align:left !important;
	line-height:1.1em;
	font-size:0.8em !important;
}

.sugerenciasPrecio{
	color:blue;
	text-decoration:underline;
	margin-left:1em;
	display:inline-block;
	cursor:pointer;
}

.precioSugerido{
	display:inline-block;
}

.text-darkblue{
	background-color:darkblue;
	padding:0.1em 0.2em;
	color:white !important;
}