/*! Fonts Bold*/
@font-face {
	font-family: FS Joey;
	src: url('../fonts/FSJoey-Bold.woff2') format("woff2"), 
         url('../fonts/FSJoey-Bold.woff') format("woff"), 
         url('../fonts/FSJoey-Bold.eot') format("eot"), 
         url('../fonts/FSJoey-Bold.svg') format("svg"), 
         url('../fonts/FS Joey Bold.otf') format("otf"), 
         url('../fonts/FSJoey-Bold.svg') format("truetype");
	font-display: swap;
	font-weight: 700;
	font-style: normal;
}

/*! Fonts Medium */
@font-face {
	font-family: FS Joey;
	src: url('../fonts/FSJoey-Medium.woff2') format("woff2"), 
         url('../fonts/FSJoey-Medium.woff') format("woff"), 
         url('../fonts/FSJoey-Medium.eot') format("eot"), 
         url('../fonts/FSJoey-Medium.svg') format("svg"), 
         url('../fonts/FS Joey Medium.otf') format("otf"), 
         url('../fonts/FSJoey-Medium.svg') format("truetype");
	font-display: swap;
	font-weight: 500;
	font-style: normal;
}

body {
	color: #333333;
}

.container-fluid {
	width: 100%;
}

@media (min-width: 992px) {
	.container-fluid {
		width: 940px;
		margin: 0 auto;
	}
}

.progress-bar {

	border-radius: 0 4px 4px 0;
	height: 5px;
	display: block;
	clear: both;

	background: #00aec7;
	background: -moz-linear-gradient(left, #00aec7 0%, #0033a0 100%);
	background: -webkit-linear-gradient(left, #00aec7 0%, #0033a0 100%);
	background: linear-gradient(to right, #00aec7 0%, #0033a0 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00aec7', endColorstr='#0033a0', GradientType=1);
}

/*FONTS*/
h1,
h2,
h3,
h4,
h5,
h6 {
	color: #0033A0;
	margin: 0;
	padding: 0;
	/*font-family: 'FS Joey', serif !important;*/
}

h1 {
	font-size: 22px;
	font-weight: normal;
}

h2 {
	font-size: 18px;
}

.title-flujo {
	margin-top: 30px;
	margin-bottom: 10px;
}

@media (min-width: 768px) {
	.title-flujo {
		margin-top: 20px;
		margin-bottom: 40px;
	}
}

.title-section {
	margin-bottom: 10px;
}

.sidebar h2.sidebar-title {
	font-size: 24px;
	margin-bottom: 23px;
	font-weight: normal;
	display: block;
}

.bold {
	font-weight: bold;
}

.sura-logo-container {
	text-align: center;
}

.sura-logo {
	width: 200px;
	margin-top: 37px;
	margin-bottom: 25px;
}

.sura-logo-white {
	margin-top: 20px;
	margin-bottom: 20px;
}

header {
	box-shadow: 0 2px 5px 0 rgba(112, 115, 114, 0.20);
}

/*HEADER LOGO*/
@media (min-width: 768px) {
	.sura-logo-container {
		text-align: left;
		padding: 18px 0;
	}

	.sura-logo {
		width: 281px;
	}
}

/*LABEL*/
label {
	width: 100%;
	font-weight: 400;
}

/*ROUND INPUT CON AJUSTES PARA MOBILE*/
.form-control {
	border-radius: 30px;
	margin-bottom: 15px;
	padding-right: 15%;
	position: relative;
	z-index: 1;
}

/*SELECT*/
select.form-control {
	border-radius: 30px;
	-webkit-appearance: none;
	background: #F1F2F3 url(../img/ico-arrows.png) no-repeat right;
	background-position-x: calc(100% - 20px);
	border: none;
}

select.form-control.select-white {
	border: 1px solid #ccc;
	background-color: #fff;
}

/*BUTTONS*/

.btn-primary {
	min-width: 150px;
	border-radius: 50px;
	text-transform: uppercase;
	font-weight: 300;
	letter-spacing: 1px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 30px;
	padding-right: 30px;
	border: none;
	font-size: 12px;
}

.btn-gradient {
	background: #01d6e4;
	background: -moz-linear-gradient(top, #01d6e4 0%, #00afca 100%);
	background: -webkit-linear-gradient(top, #01d6e4 0%, #00afca 100%);
	background: linear-gradient(to bottom, #01d6e4 0%, #00afca 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#01d6e4', endColorstr='#00afca', GradientType=0);
}

.btn-gradient:hover {
	background: #8cdee2;
	background: -moz-linear-gradient(top, #8cdee2 0%, #00afca 100%);
	background: -webkit-linear-gradient(top, #8cdee2 0%, #00afca 100%);
	background: linear-gradient(to bottom, #8cdee2 0%, #00afca 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8cdee2', endColorstr='#00afca', GradientType=0);
}

.btn-gradient:active {
	background: #00badb;
	background: -moz-linear-gradient(top, #00badb 0%, #00afca 100%);
	background: -webkit-linear-gradient(top, #00badb 0%, #00afca 100%);
	background: linear-gradient(to bottom, #00badb 0%, #00afca 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00badb', endColorstr='#00afca', GradientType=0);
}

.btn-secondary {
	min-width: 150px;
	border-radius: 50px;
	text-transform: uppercase;
	font-weight: normal;
	letter-spacing: 1px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 30px;
	padding-right: 30px;
	border: 2px solid #00AFC8;
	font-size: 12px;
	color: #00AFC8;
}

.btn-payment {
	background: #f3f553;
	background: -moz-linear-gradient(top, #f3f553 0%, #e3e829 100%);
	background: -webkit-linear-gradient(top, #f3f553 0%, #e3e829 100%);
	background: linear-gradient(to bottom, #f3f553 0%, #e3e829 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3f553', endColorstr='#e3e829', GradientType=0);
	color: #0033A0;
	font-weight: 400;
	border-radius: 25px;
	min-width: 190px;
	padding: 10px 0px;
}

.btn-payment:hover,
.btn-payment:focus {
	background: #f3f553;
	background: -moz-linear-gradient(top, #f3f553 0%, #dbc927 100%);
	background: -webkit-linear-gradient(top, #f3f553 0%, #dbc927 100%);
	background: linear-gradient(to bottom, #f3f553 0%, #dbc927 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3f553', endColorstr='#dbc927', GradientType=0);
	color: #0033A0;
}

.btn-secondary:hover,
.btn-secondary:focus {
	border-color: #00D7E5;
	color: #00D7E5;
}

.space-around {
	margin-top: 40px;
	margin-bottom: 40px;
}

/*ELEMENT: SIDEBAR*/
.sidebar {
	width: 260px;
	margin-top: 40px;
	margin-right: 40px;
	display: inline-block;
	background: #f7f7f7;
	box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, .1);
	padding: 20px 20px 100px;
	border-radius: 10px 10px 100px 100px;
	text-align: left;
	-webkit-animation: float 5s infinite;
	-o-animation: float 5s infinite;
	animation: float 8s infinite;
}

.sidebar p {
	font-size: 18px;
	margin: 0;
	padding: 0;
	word-break: break-all;
}

.valor-soap {
	position: relative;
	font-size: 48px;
	color: #0033A0;
	font-weight: bold;
	margin: 0;
	padding: 10px 35px;
	line-height: 48px;
	background: #fff;
	border: solid #00AEC7;
	border-top-width: 2px;
	border-bottom-width: 2px;
	border-left-width: 3px;
	border-right-width: 3px;
	display: block;
	box-shadow: inset 0 0 0 1px #0033A0;
	border-radius: 10px;
	z-index: 2;
}

.patente-soap {
	width: 220px;
	position: relative;
	font-size: 36px;
	color: #0033A0;
	font-weight: bold;
	margin: 0 auto;
	padding: 23px 40px 21px;
	line-height: 36px;
	background: #fff;
	border: solid #00AEC7;
	border-top-width: 2px;
	border-bottom-width: 2px;
	border-left-width: 3px;
	border-right-width: 3px;
	display: block;
	box-shadow: inset 0 0 0 1px #0033A0;
	border-radius: 10px;
	z-index: 2;
}

.patente-soap:after {
	content: "";
	position: absolute;
	width: 25px;
	height: 25px;
	display: block;
	top: -10px;
	right: -10px;
	background: url(../img/ico-check.png) no-repeat center center;
	animation: jackInTheBox .5s ease;
}

.shadow-bottom {
	position: relative;
}

.shadow-bottom:after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -32px;
	z-index: 0;
	width: 233px;
	height: 50px;
	margin-left: -116px;
	background: url(../img/shadow-valor-soap.png) no-repeat center center;
}

.sidebar .valor-final {
	font-size: 24px;
	color: #0033A0;
	padding: 0;
	margin: 0;
	line-height: 24px;
}

.sidebar h2 {
	margin-bottom: 5px;
}

.border-top-bottom {
	border-top: 1px solid #D8D8D8;
	border-bottom: 1px solid #D8D8D8;
	padding: 12px 0 12px 0;
	margin: 25px 0;
}

.border-top {
	border-top: 1px solid #C3CAD6;
	margin-top: 20px;
	padding-top: 20px;
}

.sidebar .header {
	position: relative;
}

.sidebar .header:after {
	content: "";
	background: url(../img/bg-sidebar-header.png);
	width: 277px;
	height: 132px;
	position: absolute;
	top: -34px;
	left: -37px;
	z-index: 1;
}

.sidebar .header img {
	position: relative;
	float: right;
	z-index: 5;
	margin-right: 20px;
}

.sidebar .header h1 {
	color: #fff;
	font-size: 24px;
	line-height: 30px;
	font-weight: normal;
	position: relative;
	z-index: 5;
	margin-bottom: 55px;
}

/*ELEMENT: TOOLTIP ICO*/

.ico-tooltip {
	color: #00AEC7;
	font-weight: bold;
	padding: 0;
	margin: 0;
	width: 11px;
	height: 11px;
	border: 1px solid #00AEC7;
	border-radius: 50%;
	display: block;
	font-size: 8px;
	text-align: center;
	float: right;
	position: relative;
	z-index: 10;
}

/*ELEMENT: INFOBOX*/

.info-box {
	width: 100%;
	background: #E5EAF5;
	padding: 9px 28px 8px 15px;
	margin: 40px auto 80px;
}

.info-box img {
	display: block;
	margin: 20px auto;
}

.info-box p {
	text-align: center;
	font-size: 11px;
	color: #0033A0;
}

@media (min-width: 768px) {
	.info-box {
		width: 90%;

	}

	.info-box img {
		float: left;
		margin-right: 20px;
		margin-top: 13px;
	}

	.info-box p {
		text-align: left;
		margin-bottom: 0;
	}
}

@media (min-width: 1200px) {
	.info-box {
		width: 54%;
	}
}

/*LIST: STEPS*/
.steps-list {
	list-style: none;
	margin-top: 37px;
	margin-bottom: 0;
	padding: 0;
	display: flex;
	justify-content: space-between;
}

.steps-list li {
	margin: 0;
	padding: 0;
	float: left;
}

.steps-list li .circle-number {
	width: 30px;
	height: 30px;
	margin: 0 auto;
	display: block;
	border: 1px solid #00AEC7;
	border-radius: 50%;
	text-align: center;
	line-height: 30px;
	color: #00AEC7;
}

.steps-list li p {
	margin-top: 10px;
}

.steps-list li.active p {
	color: #00AEC7;
}

.steps-list li.active .circle-number {
	background: #00d7e5;
	background: -moz-linear-gradient(top, #00d7e5 0%, #00aec7 100%);
	background: -webkit-linear-gradient(top, #00d7e5 0%, #00aec7 100%);
	background: linear-gradient(to bottom, #00d7e5 0%, #00aec7 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00d7e5', endColorstr='#00aec7', GradientType=0);
	color: #fff;
}

.form-content {
	animation-delay: .5s;
}

/*RUT INPUT*/
.rut .form-group {
	width: 70%;
	float: left;
	margin-right: 10%;
}

.rut .form-group.digito-verificador {
	width: 20%;
	margin-right: 0;
	text-align: center;
	position: relative;
}

.rut .form-group.digito-verificador:after {
	content: "-";
	font-size: 22px;
	position: absolute;
	left: 0;
	top: 0;
	left: -35%;
	top: 25px;
}

.rut .form-group.digito-verificador label {
	opacity: 0;
}

.rut .form-group input {
	width: 100%;
}

/*RADIO*/

.form-check {
	float: left;
	margin-right: 20px;
}

.form-check {
	color: #c6c7c7;
}

.form-check span.label-text {
	color: #333;
}

.form-check input[type="radio"] {
	position: absolute;
	right: 9000px;
}

.form-check input[type="radio"]+.label-text:before {
	content: "\f10c";
	font-family: "FontAwesome";
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	width: 1em;
	display: inline-block;
	margin-right: 5px;
	color: #c6c7c7;
}

.form-check input[type="radio"]:checked+.label-text:before {
	content: "\f192";
	color: #00AEC7;
	animation: effect 250ms ease-in;
}

.form-check input[type="radio"]:disabled+.label-text {
	color: #aaa;
}

.form-check input[type="radio"]:disabled+.label-text:before {
	content: "\f111";
	color: #ccc;
}

@keyframes effect {
	0% {
		transform: scale(0);
	}

	25% {
		transform: scale(1.3);
	}

	75% {
		transform: scale(1.4);
	}

	100% {
		transform: scale(1);
	}
}

.spacer-20 {
	width: 100%;
	height: 20px;
	display: inline-block;
}

.spacer-60 {
	width: 100%;
	height: 60px;
	display: inline-block;
}

/*ELEMENTS: FOOTER*/

footer {
	width: 100%;
	height: 45px;
	display: block;
	background-image: linear-gradient(-180deg, #0062CE 0%, #0033A0 100%);
}

/*BACKGROUND*/
.bg-blue {
	width: 100%;
	height: 600px;
	display: block;

}

.bg-blue.success {
	background: url(../img/bg_success.png) no-repeat top center;
	background-position-x: center;
	background-position-y: -100px;

}

.bg-blue.error {
	background: url(../img/bg_error.png) no-repeat top center;
	background-position-x: center;
	background-position-y: -100px;

}

/*CARD*/

.card {
	width: 400px;
	min-height: 390px;
	display: inline-block;
	background: #F7F7F7;
	border-radius: 20px;
	box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.19);
	padding-bottom: 20px;
}

.card ul {
	width: 80%;
	display: block;
	margin: 20px auto;
}

.card-success .header {
	position: relative;
	display: block;
	width: 400px;
	height: 150px;
	border-radius: 20px 20px 0 0;
	background: url(../img/bg-success.png) no-repeat bottom center;
	background-size: cover;
	margin: 0;
}

.card-error .header {
	position: relative;
	display: block;
	width: 400px;
	height: 160px;
	border-radius: 20px 20px 0 0;
	background: url(../img/bg-error.png) no-repeat top center;
	margin: 0;
}

.card h1.title {
	font-size: 22px;
	font-weight: bold;
	color: #333;
	margin: 40px auto 0;
	width: 284px;
}

.card h2 {
	font-size: 16px;
	font-weight: normal;
	color: #333;
	margin-top: 10px;
}

.card p {
	width: 235px;
	display: inline-block;
	margin: 5px auto 20px;
	font-size: 14px;
}

@media (max-width: 767px) {

	.card,
	.card-success .header,
	.card-error .header {
		width: 320px;
	}

	.card .content h2 {
		padding: 0 10px;
	}
}

/*SUCCESS ELEMENTS*/
.circle {
	position: absolute;
	width: 149px;
	height: 149px;
	border-radius: 50%;
	display: block;
	background: #f6f6f6;
	background: -moz-linear-gradient(top, #f6f6f6 0%, #cecece 100%);
	background: -webkit-linear-gradient(top, #f6f6f6 0%, #cecece 100%);
	background: linear-gradient(to bottom, #f6f6f6 0%, #cecece 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#cecece', GradientType=0);
	margin-left: -75px;
	left: 50%;
	top: 17px;
}

.dot {
	position: absolute;
	display: block;
	border-radius: 50%;
	background: #fff;
}

.dot-1 {
	width: 9px;
	height: 9px;
	top: 22px;
	left: 133px;
	animation-delay: .1s;
}

.dot-2 {
	width: 8px;
	height: 8px;
	top: 22px;
	right: 106px;
	animation-delay: .2s;
}

.dot-3 {
	width: 6px;
	height: 6px;
	top: 115px;
	right: 92px;
	animation-delay: .3s;
}

.dot-4 {
	width: 5px;
	height: 5px;
	top: 45px;
	left: 105px;
	animation-delay: .4s;
}

.dot-5 {
	width: 5px;
	height: 5px;
	top: -5px;
	left: 117px;
	animation-delay: .5s;
}

.card-error .dot-1 {
	width: 9px;
	height: 9px;
	top: 28px;
	left: 109px;
	animation-delay: .1s;
}

.card-error .dot-2 {
	width: 8px;
	height: 8px;
	top: 28px;
	right: 114px;
	animation-delay: .2s;
}

.dot-border {
	position: absolute;
	display: block;
	border-radius: 50%;
	border: 3px solid #fff;
}

.dot-6 {
	width: 10px;
	height: 10px;
	top: -2px;
	right: 130px;
	animation-delay: .6s;
}

.dot-7 {
	width: 8px;
	height: 8px;
	top: 66px;
	right: 63px;
	animation-delay: .7s;
}

.dot-8 {
	width: 10px;
	height: 10px;
	top: 132px;
	left: 103px;
	animation-delay: .8s;
}

.card-error .dot-6 {
	width: 10px;
	height: 10px;
	top: 86px;
	right: 74px;
	animation-delay: .6s;
}

.envelope-letter {
	position: absolute;
	width: 91px;
	height: 107px;
	display: inline-block;
	overflow: hidden;
	top: 53px;
	left: 50%;
	margin-left: -45px;
	z-index: 3;
}

.envelope-letter img {
	animation-delay: .5s;
}

.envelope-back {
	position: absolute;
	width: 108px;
	height: 95px;
	display: inline-block;
	top: 66px;
	left: 50%;
	margin-left: -54px;
	z-index: 2;
}

.envelope-front {
	position: absolute;
	width: 108px;
	height: 59px;
	display: inline-block;
	top: 110px;
	left: 50%;
	margin-left: -54px;
	z-index: 4;
}

.bubble {
	position: absolute;
	top: 38px;
	right: 75px;
	width: 65px;
	height: 66px;
	display: block;
	background: url(../img/bubble.png) no-repeat center center;
	z-index: 6;
	animation-delay: 1s;
}

.bubble img {
	position: absolute;
	top: 21px;
	left: 50%;
	margin-left: -15px;
	animation-delay: 1.2s;
}

.plane {
	width: 103px;
	height: 97px;
	position: absolute;
	top: 17px;
	left: 7px;
	overflow: hidden;
}

.dot-x {
	position: absolute;
}

.dot-9 {
	top: -5px;
	left: 178px;
}

.dot-10 {
	top: 124px;
	right: 94px;
}

.dot-11 {
	top: 84px;
	left: 96px;
}

.card-error .dot-9 {
	top: 8px;
	left: 159px;
}

.card-error .dot-10 {
	top: 94px;
	right: 117px;
}

.card-error .dot-11 {
	top: 104px;
	left: 77px;
}

.dot-9 img {
	animation-delay: .4s;
}

.dot-10 img {
	width: 7px;
	height: 7px;
	animation-delay: 1s;
}

.dot-11 img {
	width: 8px;
	height: 8px;
	animation-delay: .8s;
}

.crack-left,
.crack-right {
	position: absolute;
}

.crack-left {
	left: 0;
	top: 60px;
	animation-delay: .8s;
}

.crack-right {
	right: 0;
	top: 0px;
	animation-delay: .4s;
}

.signal {
	width: 236px;
	height: 146px;
	position: absolute;
	top: 26px;
	left: 50%;
	margin-left: -118px;
}

.signal .bar-left {
	display: block;
	width: 17px;
	height: 140px;
	background: #fff;
	position: absolute;
	top: 0px;
	left: 29px;
	animation-delay: .2s;
	z-index: 2;
}

.signal .bar-right {
	display: block;
	width: 17px;
	height: 140px;
	background: #fff;
	position: absolute;
	top: 0px;
	right: 29px;
	animation-delay: .4s;
	z-index: 2;
}

.top-bar {
	position: absolute;
	top: 18px;
	left: 21px;
	animation-delay: .6s;
	z-index: 5;
}

.bottom-bar {
	position: absolute;
	top: 93px;
	left: 18px;
	animation-delay: .8s;
	z-index: 5;
}

.shadow {
	width: 100%;
	height: 11px;
	background: #C3CAD6;
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	border-radius: 10px;
	z-index: 1;
	animation-delay: .8s;
}

.red-circle {
	width: 60px;
	height: 60px;
	display: block;
	position: absolute;
	top: 60px;
	left: 50%;
	margin-left: -30px;
	z-index: 10;
	animation-delay: .7s;
}

/*INSERT*/

.inserts h3 {
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 10px;
	color: #333;
	margin-top: 20px;
}

@media (max-width: 767px) {

	.inserts h3,
	.inserts p {
		text-align: center;
		width: 60%;
		margin: 0 auto;
	}

	.inserts h3 {
		margin-top: 20px;
		margin-bottom: 10px;
	}

	.inserts p {
		margin-bottom: 40px;
	}
}

.inserts a {
	transition: all .8s ease;
}

.inserts a img {
	transform: scale(1) rotate(0deg);
	transition: all .8s ease;
}

.inserts a:hover img {
	transform: scale(1.1) rotate(3deg);
	transition: all .8s ease;
}

/* RADIOS */
*:focus {
	outline: none !important;
}

.radio-area {
	display: block;
	width: 100%;
	height: 100px;
}

.radio-area ul li {
	display: block;
	position: relative;
	float: left;
	width: 113px;
	height: 133px;
	margin: 0 10px 0 0;
}

.option-input {
	position: relative;

	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	appearance: none;

	height: 133px;
	width: 113px;

	transition: all 0.15s ease-out 0s;

	background: #fff;
	color: #fff;

	cursor: pointer;

	display: inline-block;
	outline: none;
	z-index: 1000;

	margin: 20px 0 !important;

	transition: all .2s ease;
}

.option-input:hover {
	transform: scale(1.1);
	transition: all .2s ease;
}

.option-input.redcompra {
	background: url(../img/wp-redcompra.png) left bottom no-repeat;
	background-size: contain;
}

.option-input.credito {
	background: url(../img/wp-credito.png) left bottom no-repeat;
	background-size: contain;
}

.option-input.webpay {
	background: url(../img/wp-onepay.png) left bottom no-repeat;
	background-size: contain;
}

.option-input.redcompra:checked:after,
.option-input.credito:checked:after,
.option-input.webpay:checked:after {
	content: "";
	position: absolute;
	width: 25px;
	height: 25px;
	display: block;
	top: -5px;
	right: -5px;
	background: url(../img/ico-check.png) no-repeat center center;
	animation: jackInTheBox .5s ease;
}




@-webkit-keyframes float {
	0% {
		box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.3);
		-webkit-transform: translatey(0px);
		transform: translatey(0px);
	}

	50% {
		box-shadow: 5px 25px 15px 0px rgba(0, 0, 0, 0.1);
		-webkit-transform: translatey(-20px);
		transform: translatey(-20px);
	}

	100% {
		box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.3);
		-webkit-transform: translatey(0px);
		transform: translatey(0px);
	}
}

@keyframes float {
	0% {
		box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.3);
		-webkit-transform: translatey(0px);
		transform: translatey(0px);
	}

	50% {
		box-shadow: 5px 25px 15px 0px rgba(0, 0, 0, 0.1);
		-webkit-transform: translatey(-20px);
		transform: translatey(-20px);
	}

	100% {
		box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.3);
		-webkit-transform: translatey(0px);
		transform: translatey(0px);
	}
}



/*STEP INCREASER*/

.progress-bar.step-1 {
	width: 10%;
	animation: increase1 1s;
}

@keyframes increase1 {
	0% {
		width: 0;
	}

	100% {
		width: 10%;
	}
}

.progress-bar.step-2 {
	width: 53%;
	animation: increase2 1s;
}

@keyframes increase2 {
	0% {
		width: 10%;
	}

	100% {
		width: 53%;
	}
}

.progress-bar.step-3 {
	width: 100%;
	animation: increase3 1s;
}

@keyframes increase3 {
	0% {
		width: 53%;
	}

	100% {
		width: 100%;
	}
}

@media (min-width: 768px) {
	.progress-bar.step-1 {
		width: 52%
	}

	@keyframes increase1 {
		0% {
			width: 0%;
		}

		100% {
			width: 52%;
		}
	}

	.progress-bar.step-2 {
		width: 72%
	}

	@keyframes increase2 {
		0% {
			width: 52%;
		}

		100% {
			width: 72%;
		}
	}

	@keyframes increase3 {
		0% {
			width: 72%;
		}

		100% {
			width: 100%;
		}
	}
}

@media (min-width: 992px) {
	.progress-bar.step-1 {
		width: 45%
	}

	@keyframes increase1 {
		0% {
			width: 0%;
		}

		100% {
			width: 45%;
		}
	}

	.progress-bar.step-2 {
		width: 62%
	}

	@keyframes increase2 {
		0% {
			width: 45%;
		}

		100% {
			width: 62%;
		}
	}

	@keyframes increase3 {
		0% {
			width: 62%;
		}

		100% {
			width: 100%;
		}
	}
}

@media (min-width: 1200px) {
	.progress-bar.step-1 {
		width: 45%
	}

	@keyframes increase1 {
		0% {
			width: 0%;
		}

		100% {
			width: 45%;
		}
	}

	.progress-bar.step-2 {
		width: 64%
	}

	@keyframes increase2 {
		0% {
			width: 45%;
		}

		100% {
			width: 64%;
		}
	}

	.progress-bar.step-3 {
		width: 80%
	}

	@keyframes increase3 {
		0% {
			width: 64%;
		}

		100% {
			width: 80%;
		}
	}
}

.modal h1 {
	font-size: 22px;
	font-weight: bold;
	margin-bottom: 20px;
}

.modal p {
	font-size: 16px;
	margin-bottom: 40px;
}

.modal .modal-body {
	padding: 45px;
}

.modal .close {
	position: absolute;
	top: 5px;
	right: 15px;
	font-size: 40px;
}

.has-error .form-control {
	border-color: #D0021B;
}

.error-label {
	display: none;
	font-size: 10px;
	color: #D0021B;
	position: absolute;
	bottom: 0;
}

.has-error .error-label {
	display: block;
}

.actions {
	float: right;
	display: inline-block;
}

.actions a img {
	transform: scale(1);
	transition: all .5s ease;
}

.actions a:hover img {
	transform: scale(1.3);
	transition: all .5s ease;
}

.car {
	width: 100%;
	float: left;
}

.costos-adicionales,
.total {
	width: 100%;
	float: left;
}

hr {
	float: left;
	width: 100%;
	border-color: #C3CAD6;
}

/* RADIOS */
*:focus {
	outline: none !important;
}

.radio-area-round {
	display: block;
	width: 100%;
	height: 100px;
}

.radio-area-round ul li {
	display: block;
	position: relative;
	float: left;
	width: 84px;
	height: 84px;
	margin: 0 10px;
}

.radio-area-round .option-input {
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	appearance: none;

	height: 84px;
	width: 84px;

	transition: all 0.15s ease-out 0s;

	background: #fff;
	border-radius: 50%;
	color: #fff;

	cursor: pointer;

	display: inline-block;
	outline: none;
	z-index: 1000;

	margin: 0 !important;

	transition: all .2s ease;
}

.radio-area-round .option-input:hover {
	transform: scale(1.1);
	transition: all .2s ease;
}

.radio-area-round label {
	width: 80px;
	height: 80px;
	display: block;
}

.radio-area-round label:after {
	content: "+";
	width: 30px;
	height: 30px;
	background-image: linear-gradient(-180deg, #DCDDDC 0%, #C4C5C5 100%);
	position: absolute;
	top: -2px;
	right: -8px;
	display: block;
	z-index: 1001;
	border-radius: 50%;
	text-align: center;
	color: #fff;
	font-size: 22px;
	line-height: 24px;
	transition: all .2s ease;
	border: 1px solid transparent;
}

.radio-area-round label:hover:after {
	top: -5px;
	right: -10px;
	transition: all .2s ease;
	border: 1px solid #00AEC7;
}

.radio-area-round .option-input.add-car {
	width: 80px;
	height: 80px;
	top: 3px;
	left: 3px;
	background: #fff;
	overflow: hidden;
}

.radio-area-round .option-input.add-car:before {
	content: url(../img/ico-car-gray.png);
	position: absolute;
	top: 35%;
	left: 10px;
	transition: all .5s ease-in-out;
}

.radio-area-round .option-input.add-car:after {
	content: url(../img/ico-car-gray.png);
	position: absolute;
	top: 35%;
	left: -60px;
	transition: all .5s ease-in-out;
}

.radio-area-round .option-input:checked.add-car:before {
	content: url(../img/car-2.png);
	top: 35%;
	left: 20px;
	transition: all .5s ease-in-out;
}

.radio-area-round .option-input:checked.add-car:after {
	content: url(../img/car-1.png);
	top: 35%;
	left: 1px;
	transition: all .5s ease-in-out;
}

.radio-area-round .option-input.add-car:checked {
	width: 85px;
	height: 85px;
	top: 0px;
	left: 0px;
	background: #fff;
	border: 2px solid #00AEC7;
}

.spin:before {
	content: "";
	width: 80px;
	height: 80px;
	display: block;
	border: 2px solid #00AEC7;
	position: absolute;
	border-radius: 50%;
	top: 3px;
	left: 8px;
	box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, .2);
}

.spin:hover:before {
	animation: growing .5s ease forwards;
}

@keyframes growing {
	0% {
		width: 80px;
		height: 80px;
		top: 3px;
		left: 8
	}

	30% {
		width: 85px;
		height: 85px;
		top: 0px;
		left: 8px;
	}

	50% {
		width: 88px;
		height: 88px;
		top: 1px;
		left: 4px;
	}

	70% {
		width: 91px;
		height: 91px;
		top: -2px;
		left: 2px;
	}

	100% {
		width: 92px;
		height: 92px;
		top: -3px;
		left: 2px;
	}
}

/**/

.btn-round {
	position: relative;
	width: 100px;
	height: 100px;
	display: block;
	border-radius: 50%;
	background: #FFFFFF;
	border: 1px solid #707372;
	box-shadow: 2px 2px 4px 0 rgba(112, 115, 114, 0.40);
	transition: all .5s ease;
}

.btn-round:hover {
	transform: scale(1.1);
	border-color: #00AEC7;
}

.btn-round.active {
	border-color: #00AEC7;
}

.one-car {
	opacity: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -12px;
	margin-left: -30px;
	transition: all .5s ease;
	height: 24px;
}

.two-cars {
	opacity: 0;
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -12px;
	margin-left: 0px;
	transition: all .5s ease;
	width: 100%;
	height: 24px;
	overflow: hidden;
}

.btn-round .one-car {
	opacity: 1;
}

.btn-round.active .one-car {
	opacity: 0;
}

.btn-round.active .two-cars {
	opacity: 1;
}

.two-cars .car-one,
.two-cars .car-two {
	position: absolute;
	bottom: 0;
	transition: all 1s ease-in-out;
}

.two-cars .car-one {
	left: -100px;
}

.two-cars .car-two {
	left: 20px
}

.two-cars.in .car-one {
	left: 5px;
	z-index: 5
}

.two-cars.in .car-two {
	left: 35px;
	z-index: 3;
}

.ico-less,
.ico-more {
	position: absolute;
	width: 26px;
	height: 26px;
	background-image: linear-gradient(-180deg, #DCDDDC 0%, #C4C5C5 100%);
	display: block;
	border-radius: 50%;
	top: 0px;
	right: 0px;
	text-align: center;
}

.btn-round:hover .ico-more,
.btn-round:hover .ico-less,
.btn-round.active .ico-less {
	background-image: linear-gradient(-180deg, #00D7E5 0%, #00AEC7 100%);
}


.ico-more:after {
	content: "+";
	color: #fff;
	font-size: 22px;
	line-height: 22px;
}

.ico-less:after {
	content: "-";
	color: #fff;
	font-size: 22px;
	line-height: 22px;
}


.btn-add {
	background-image: linear-gradient(-180deg, #00D7E5 0%, #00AEC7 100%);
	font-size: 13px;
	color: #FFFFFF;
	letter-spacing: 0.65px;
	text-align: center;
	float: left;
	top: 22px;
	left: 10px;
	position: relative;
}

.mediosdepago {
	opacity: 1;
	transition: all .5s ease;
}

.mediosdepago.disabled {
	opacity: .3;
	pointer-events: none;
}

.mediosdepago.disabled .btn,
.btn.disabled,
.btn:disabled {
	border: 0;
	background: #d4d4d4;
	color: #909090;
	font-weight: normal;
}


.card {
	position: relative;
}

.btn-bottom {
	width: 150px;
	position: absolute;
	bottom: -20px;
	left: 50%;
	margin-left: -75px;
	/*transition: all .5s ease;*/
	transform: translateX(-10%);
}

.btn-bottom[aria-expanded="true"] {
	width: 40px;
	min-width: 40px;
	font-size: 22px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 0px;
	padding-right: 0px;
	margin-left: -20px;
}

.btn-bottom[aria-expanded="true"] .abrir {
	display: none;
}

.btn-bottom[aria-expanded="true"] .cerrar {
	display: block;
}

.btn-bottom[aria-expanded="false"] .abrir {
	display: block;
}

.btn-bottom[aria-expanded="false"] .cerrar {
	display: none;
}

.lista-polizas li {
	margin-bottom: 5px;
}

.lista-polizas a {
	margin-left: 10px;
}

.tooltip-inner img {
	width: 180px;
	height: auto;
}

.browser-error {
	background: #F7F7F7;
	box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.19);
	width: 90%;
	max-width: 550px;
	margin: 0 auto;
	padding: 40px 40px 80px 40px;
}

.browser-error p {
	font-size: 16px;
}

.wrap-next {
	background-size: #ededed;
	text-align: right;
}

/* NEW CODE */

.payment-select {
	text-align: center;
	list-style: none;
	margin: 30px 0 0 0;
	padding: 0;
}

.payment-select li {
	width: 28%;
	display: inline-block;
	margin: 0;
	padding: 0;
}

.formadepago {
	width: 100%;
	height: 100px;
	display: inline-block;
	background: tomato;
	float: left;
	margin: 0 5px;
	position: relative;
	transition: all .5s ease;
}

.formadepago:hover {
	transform: scale(1.1);
	transition: all .5s ease;
}

@media (min-width: 992px) {
	.formadepago {
		height: 137px;
	}
}

.formadepago span {
	width: 100%;
	text-align: center;
	position: absolute;
	top: -20px;
	left: 0;
	color: #333333;
	font-size: 11px;
}

@media (min-width: 992px) {
	.formadepago span {
		top: -10px;
	}
}

.check-debito {
	background: url(../img/debito-off.png) no-repeat center bottom;
	background-size: contain;
}

.check-credito {
	background: url(../img/credito-off.png) no-repeat center bottom;
	background-size: contain;
}

.check-onepay {
	background: url(../img/onepay-off.png) no-repeat center bottom;
	background-size: contain;
}

.check-debito.selected {
	background: url(../img/debito-on.png) no-repeat center bottom;
	background-size: contain;
}

.check-credito.selected {
	background: url(../img/credito-on.png) no-repeat center bottom;
	background-size: contain;
}

.check-onepay.selected {
	background: url(../img/onepay-on.png) no-repeat center bottom;
	background-size: contain;
}

.formadepago.selected span {
	font-weight: bold;
}

@media (max-width: 369px) {
	#addCar .form-group {
		width: 110px;
		margin-bottom: 0;
	}
}

ul.inserts {
	list-style: none;
	padding: 0;
	margin: 0;
	text-align: center;
	position: relative;
	top: -130px;
}

ul.inserts li {
	display: inline-block;
}

.card-insert {
	width: 273px;
	height: 329px;
	margin: 0 auto;
	background: #fff;
	border-radius: 4px;
	display: inline-block;
	background-size: cover !important;
	position: relative;
	overflow: hidden;
}

.card-insert.insertsxkm {
	background: url(../img/card-xkmplus.png);
}

.card-insert.insertconductor {
	background: url(../img/card-conductorpro.png);
}

.card-insert.insertautoflexible {
	background: url(../img/card-autoflexible.png);
}

.hovertext {
	width: 100%;
	height: 172px;
	background: rgba(255, 255, 255, .9);
	padding: 35px 25px 30px 25px;
	position: absolute;
	bottom: -172px;
	left: 0;
	transition: all .5s ease;
}

.card-insert a {
	display: block;
	width: 60%;
	margin: 0 auto;
}

.card-insert:hover .hovertext {
	bottom: 0;
	transition: all .5s ease;
}

.footer-inserts {
	background: #D9FAFC;
	position: relative;
	margin-top: 100px;
}

.footer-inserts:before {
	position: absolute;
	content: '';
	top: -63px;
	width: 100%;
	height: 66px;
	background: url(../img/border-top.png) center center no-repeat;
}

.footer-bar {
	width: 100%;
	height: 45px;
	position: absolute;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(-180deg, #0062CE 0%, #0033A0 100%);
}

@media (max-width: 767px) {
	.hovertext {
		padding: 20px;
	}

	.hovertext p {
		width: 100%;
	}
}

/********************************/
/****** PÁGINA 1 BOMBEROS *******/
/********************************/
/* BOMBEROS CONTAINER */
.bomberos-container {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

@media screen and (max-width: 768px) {
	.bomberos-container .container {
		width: 96%;
	}
}

/* SURA LOGO BOMBEROS */
.sura-logo {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 2rem auto;
}

/* PATENTE */
.bomberos {
	position: relative;
	background: url(../img/bomberos-desktop.jpg) no-repeat center center;
	background-size: 103%;
	width: 100%;
	max-width: 991px;
	height: 330px;
	margin: 2rem auto;
	border-radius: 25px;
	box-shadow: 0px 4px 10px rgba(0, 0, 0, .3);
}

.bomberos .bomberos-patente {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	flex-direction: column;
	height: 330px;
	max-width: 480px;
}

.bomberos .bomberos-patente .bomberos-patente__head {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.bomberos .bomberos-patente h1 {
	margin-top: 1rem;
	text-align: center;
	font-size: 24px;
}

.bomberos .bomberos-patente h1 span {
	display: block;
}

.bomberos .bomberos-patente .img-casco {
	margin: 2rem auto 1rem;
}

.bomberos .bomberos-patente h3 {
	font-size: 16px;
}

.bomberos .bomberos-patente h2 {
	color: #00aec7;
	font-size: 22px;
}

.bomberos .bomberos-patente .message-error {
	width: 200px;
	color: red;
	background: #e3eaf5;
	padding: 2px 0;
	font-size: 12px;
	border-radius: 5px;
	display: none;
	margin: 1rem auto 0;
	text-align: center;
	-webkit-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}

.bomberos .bomberos-patente .input-patente {
	font-family: 'Ubuntu Mono', monospace !important;
	border-radius: 5px !important;
	width: 250px !important;
	height: 65px;
	font-size: 36px;
	padding: 0px;
	letter-spacing: 5px;
	font-weight: bold;
	position: relative;
	border: 2px solid transparent !important;
	color: #0033A0;
	background: url(https://www.segurossura.cl/docs/default-source/soap19/patente-bg.png) no-repeat center center;
	background-size: cover;
	text-align: left;
	padding-bottom: 14px;
	padding-left: 34px;
	margin: 1rem auto;
}

@media screen and (max-width: 991px) {
	.bomberos {
		background-size: 125%;
		height: 330px;
	}
}

@media screen and (max-width: 768px) {
	.bomberos {
		background: url(../img/bomberos-mobile.jpg) no-repeat center 115%;
		background-size: 100%;
		height: 720px;
		max-width: 520px;
	}

	.bomberos .bomberos-patente {
		max-width: 100%;
	}
}

@media screen and (max-width: 575px) {
	.bomberos {
		height: 680px;
	}

}

@media screen and (max-width: 520px) {
	.sura-logo {
		margin: 2rem auto 1rem;
	}

	.bomberos {
		background: url(../img/bomberos-mobile.jpg) no-repeat center 100%;
		background-size: 420px;
		margin: 0.5rem auto;
	}

	.bomberos .bomberos-patente h1 {
		margin-top: 0.5rem;
		font-size: 22px;
	}

	.bomberos .bomberos-patente h3 {
		font-size: 14px;
	}

	.bomberos .bomberos-patente h2 {
		font-size: 20px;
	}

	.bomberos .bomberos-patente .img-casco {
		margin: 1rem auto 1rem;
		max-width: 40px;
	}
}

@media screen and (max-width: 420px) {
	.sura-logo {
		width: 100px;
		margin-bottom: 2rem;
	}

	.bomberos {
		height: 620px;
	}

	.bomberos .bomberos-patente {
		height: 250px;
	}

	.bomberos .bomberos-patente .bomberos-patente__head {
		flex-direction: row-reverse;
		margin-bottom: 0.5rem;
	}

	.bomberos .bomberos-patente h1 {
		text-align: left;
		padding-left: 1rem;
		font-size: 18px;
	}
}

/********************************/
/******* PÁGINA SUCCESS  *********/
/********************************/

/* CARD BOMBEROS */
.bomberos-success .container {
	width: 100%;
	max-width: 1199px;
}

.bomberos-success .card {
	width: 360px;
}

.bomberos-success .card-success .header {
	width: 360px;
}

/* MONTO ACUMULADO */
.bomberos-success .monto {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 300px;
}

.bomberos-success .monto.oculto {
	visibility: hidden;
}

.bomberos-success .monto.visible {
	visibility: visible;
}

.bomberos-success .monto-acumulado {
	background-color: #FFFFFF;
	border-radius: 50px;
	padding: 2rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100px;
	box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.19);
}

.bomberos-success .monto-acumulado h2 {
	font-size: 20px;
}

.bomberos-success .monto-acumulado h2.aporte {
	font-size: 26px;
	color: #00aec7;
}

/* CUARTEL BOMBEROS */
.bomberos-success .cuartel-bomberos {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
}

.bomberos-success .cuartel-bomberos img {
	max-width: 300px;
}

@media screen and (max-width: 1199px) {
	.bomberos-success .logo {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 90px;
	}

	.bomberos-success .logo .sura-logo-white {
		margin: auto;
	}

	.bomberos-success .order {
		display: grid;
		grid-template-columns: 2fr 1.8fr;
		grid-template-rows: 1fr 1fr;
		height: 450px;

	}

	.bomberos-success .card-container {
		grid-column: 1 / span 1;
		grid-row: 1 / span 2;
		width: 100%;
		justify-content: center;
		align-items: center;
		display: flex;

	}

	.bomberos-success .cuartel-bomberos {
		grid-column: 2 / span 1;
		grid-row: 1 / span 1;
		justify-content: center;
		height: 300px;
		width: 100%;
	}

	.bomberos-success .monto {
		grid-column: 2 / span 1;
		grid-row: 2 / span 1;
		height: 150px;
		width: 100%;
	}
}

@media screen and (max-width: 820px) {
	.bomberos-success .order {
		grid-template-columns: 1fr;
		grid-template-rows: 2fr 1fr 0.4fr;
		height: 100%;
	}

	.bomberos-success .card-container {
		grid-column: 1 / span 1;
		grid-row: 1 / span 1;
		height: 100%;
	}

	.bomberos-success .cuartel-bomberos {
		grid-column: 1 / span 1;
		grid-row: 2 / span 1;
		height: 100%;
	}

	.bomberos-success .monto {
		grid-column: 1 / span 1;
		grid-row: 3 / span 1;
		height: 100%;
	}
}