* {margin: 0;padding: 0;}
html, body {width: 100vw;height: 100vh;font-family: 'Montserrat', sans-serif;}

.column-left {float: left; width: 60%; height: 100vh;background-image: url("../images/bg-1-min.jpg"); height: 100%; background-position: center;background-repeat: no-repeat;background-size: cover;}
.column-left-hombre {float: left; width: 60%; height: 100vh;background-image: url("../images/bg-mujer-min.jpg"); height: 100%; background-position: center;background-repeat: no-repeat;background-size: cover;}
.column-left-mujer {float: left; width: 60%; height: 100vh;background-image: url("../images/bg-hombre-min.jpg"); height: 100%; background-position: center;background-repeat: no-repeat;background-size: cover;}
.column-left img {float: right;margin-top:40px;}

#column-right {float: left;width: 40%; height: 100vh;text-align: center;display: flex;align-items: center;justify-content: center;background: rgba(255,52,68,1);background: -moz-linear-gradient(top, rgba(255,52,68,1) 0%, rgba(240,17,35,1) 100%);background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,52,68,1)), color-stop(100%, rgba(240,17,35,1)));background: -webkit-linear-gradient(top, rgba(255,52,68,1) 0%, rgba(240,17,35,1) 100%);background: -o-linear-gradient(top, rgba(255,52,68,1) 0%, rgba(240,17,35,1) 100%);background: -ms-linear-gradient(top, rgba(255,52,68,1) 0%, rgba(240,17,35,1) 100%);background: linear-gradient(to bottom, rgba(255,52,68,1) 0%, rgba(240,17,35,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3444', endColorstr='#f01123', GradientType=0 );-webkit-box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.5);-moz-box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.5);box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.5);}
#content-top {width:75%;}

h1 {font-size:41px;color: #ffffff;font-weight: 700;margin: 0 0 24px;}
h1 b {font-weight: 900;}
.subtitle {font-size:24px;color: #ffffff;font-weight: 500;margin: 0 70px 40px;}

hr {height:1px;width:300px;border-width:0;color:#FFFF00;background-color:#FFFF00;margin: 0 auto 40px;}

.title {font-size:21px;color: #ffffff;font-weight: 700;margin: 0 70px 40px;}
.number3.title, .number4.title, .number5.title {font-weight: 500;}
.number3.title {margin: 0 70px 10px;}
.number3.title::before, .number4.title::before {content: url('../images/check-white.svg');width:24px;height: auto;margin-right: 10px;}

.step2,.step3,.step4,.step5,.step6,.number1,a.btnBig,.number2,.number3,.number4,.number5,.number6{display:none}
.step2::after {content: url('../images/step1-white.png');height: 6px;width: 248px;}
.step3::after {content: url('../images/step2-white.png');height: 6px;width: 248px;}
.step4::after {content: url('../images/step3-white.png');height: 6px;width: 248px;}
.step5::after {content: url('../images/step4-white.png');height: 6px;width: 248px;}
.step6 ul {list-style:none;padding-bottom: 30px;}
.highlight {font-weight: 700;}

ul.buttons {list-style:none;margin:0 30px 48px}
ul.buttons li {display: inline-block;margin:0 8px 48px;}
a.btn {border: 2px solid #ffffff;border-radius: 100px;color: #ffffff;padding: 12px 50px;text-align:center;text-decoration: none;display: inline-bloxck;font-size: 18px;font-weight: 700;}
a.btn:hover {background-color: #ffffff !important;color:#ff4453;}
a.btnBig {border: 2px solid #FFFF00;color: rgba(255,52,68,1);background: #FFFF00;border-radius: 100px;padding: 12px 50px;text-align:center;text-decoration: none;display: inline-bloxck;font-size: 18px;font-weight: 700;}
a.btnBig:hover {border: 2px solid #FFFFFF;background-color: #ffffff !important;}
.loading {float: left;width: 100%;text-align: center;margin: 10px 0px;}
.loading::before {content: url('../images/loading-yellow.svg');height: 8px; width: 152px;}

#terms {position: absolute;bottom:32px;margin: 0 auto;}
#terms ul {list-style:none;}
#terms ul li {display: inline-block;color:#ffffff;font-size:14px;}
#terms ul li:first-child {margin-right: 32px;}
#terms ul li a {text-decoration: none;color:#ffffff;}
#terms ul li a:hover {text-decoration: underline;}

@media (max-width: 1920px) {
    .column-left, .column-left-hombre, .column-left-mujer {width: 57%;}
    #column-right {width: 43%;}
    h1 {font-size:36px;margin: 0 0 24px;}
    .subtitle {font-size:21px;}
    .title {font-size:18px;}
    .number3.title, .number4.title, .number5.title, .number6.title {margin: 0 0 24px;}
}
@media (max-width: 1440px) {
    .column-left, .column-left-hombre, .column-left-mujer {width: 55%;}
    .column-left img {width: 65px; height: auto;}
    #column-right {width: 45%;}
    h1 {font-size:24px;margin: 0 0 24px;}
    .subtitle {font-size:18px;margin: 0 0 30px;}
    .title {font-size:16px;margin: 0 0 30px;}
    a.btn,a.btnBig {padding: 8px 36px;font-size: 16px;}
    .check {width: 18px;}
    .number3.title {margin: 0 0 10px;}
    .number4.title, .number5.title, .number6.title {margin: 0 0 24px;}
    .step6 ul {padding-bottom: 10px;}
}
@media (max-width: 1024px) and (orientation: landscape) {
    .column-left, .column-left-hombre, .column-left-mujer {width: 55%;}
    .column-left img {width: 65px; height: auto;}
    #column-right {width: 45%;}
    h1 {font-size:24px;margin: 0 0 24px;}
    .subtitle {font-size:18px;margin: 0 0 30px;}
    .title {font-size:16px;margin: 0 0 30px;}
    a.btn,a.btnBig {padding: 8px 36px;font-size: 16px;}
    .check {width: 18px;}
    .number3.title {margin: 0 0 10px;}
    .number4.title, .number5.title, .number6.title {margin: 0 0 24px;}
    .step6 ul {padding-bottom: 10px;}
}
@media (max-width: 1024px) and (orientation: portrait) {
    .column-left, .column-left-hombre, .column-left-mujer {float: none; width: 100%; height: 40%;}
    .column-left {background-image: url("../images/bg-1-mobile-min.jpg");}
    .column-left-hombre {background-image: url("../images/bg-mujer-mobile-min.jpg");}
    .column-left-mujer {background-image: url("../images/bg-hombre-mobile-min.jpg");}
    .column-left img {width: 55px; height: auto;}
    #column-right {float: none;width: 100%; height: 70%;display: flex;align-items: center;justify-content: center;border-top-left-radius: 50px;border-top-right-radius: 50px;position: absolute;bottom: 0;}
   h1 {font-size:24px;margin: 0 0 24px;}
    .subtitle {font-size:18px;margin: 0 0 30px;}
    .title {font-size:16px;margin: 0 0 30px;}
    a.btn,a.btnBig {padding: 8px 36px;font-size: 16px;}
    .check {width: 18px;}
    .number3.title {margin: 0 0 10px;}
    .number4.title, .number5.title, .number6.title {margin: 0 0 24px;}
    .step6 ul {padding-bottom: 10px;}
    .loading::before {content: url('../images/loading-red.svg');}
}
@media (max-width: 764px) and (orientation: landscape) {
    .column-left, .column-left-hombre, .column-left-mujer {height: 50%;float: none; width: 100%;}
    .column-left img {width: 45px; height: auto;}
    #column-right {background: #ffffff;height: 70%;float: none;width: 100%;display: block;border-top-left-radius: 50px;border-top-right-radius: 50px;position: relative;bottom: 0;-webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;}
    #content-top {width:85%;text-align: center;margin: 0 auto;padding: 20px;}
    h1 {font-size:21px;margin: 0 0 16px;color:#FF4453;}
    .subtitle {font-size:14px;margin: 0 0 16px;color:#414141;}
    hr {width:150px;color:#FF4453;background-color:#FF4453;margin: 0 auto 16px;}
    .title {font-size:14px;margin: 0 0 24px;color:#414141;}
    ul.buttons {margin:0 0 30px}
    ul.buttons li {margin:0 8px 30px;}
    a.btn,a.btnBig {border: 2px solid #ff4453;color: #ff4453;padding: 8px 36px;font-size: 16px;}
    a.btn:hover {background-color: #ff4453 !important;color:#ffffff;}
    a.btnBig {border: 2px solid #FF4453;color: #ffffff;background: #FF4453;}
    a.btnBig:hover {border: 2px solid #FF4453;color:#ff4453 !important;background:#ffffff !important;}
    .number3.title::before, .number4.title::before {content: url('../images/check-red.svg');}
    .number3.title {margin: 0 0 10px;}
    .number4.title, .number5.title, .number6.title {margin: 0 0 20px;}
    .step6 ul {padding-bottom: 10px;}
    .step2::after {content: url('../images/step1-red.png');}
    .step3::after {content: url('../images/step2-red.png');}
    .step4::after {content: url('../images/step3-red.png');}
    .step5::after {content: url('../images/step4-red.png');}
    #terms {bottom:16px;}
    #terms {display:none}
}
@media (max-width: 764px) and (orientation: portrait) {
    .column-left, .column-left-hombre, .column-left-mujer {height: 35%;float: none; width: 100%;}
    .column-left img {width: 45px; height: auto;}
    #column-right {background: #ffffff;height: 75%;float: none;width: 100%;display: flex;align-items: center;justify-content: center;border-top-left-radius: 50px;border-top-right-radius: 50px;position: absolute;}
    #content-top {width:95%;}
    h1 {font-size:21px;margin: 0 0 16px;color:#FF4453;}
    .subtitle {font-size:14px;margin: 0 0 16px;color:#414141;}
    hr {width:150px;color:#FF4453;background-color:#FF4453;margin: 0 auto 16px;}
    .title {font-size:14px;margin: 0 0 24px;color:#414141;}
    ul.buttons {margin:0 0 30px}
    ul.buttons li {margin:0 8px 30px;}
    a.btn,a.btnBig {border: 2px solid #ff4453;color: #ff4453;padding: 8px 36px;font-size: 16px;}
    a.btn:hover {background-color: #ff4453 !important;color:#ffffff;}
    a.btnBig {border: 2px solid #FF4453;color: #ffffff;background: #FF4453;}
    a.btnBig:hover {border: 2px solid #FF4453;color:#ff4453 !important;background:#ffffff !important;}
    .number3.title::before, .number4.title::before {content: url('../images/check-red.svg');}
    .number3.title {margin: 0 0 10px;}
    .number4.title, .number5.title, .number6.title {margin: 0 0 20px;}
    .step6 ul {padding-bottom: 10px;}
    .step2::after {content: url('../images/step1-red.png');}
    .step3::after {content: url('../images/step2-red.png');}
    .step4::after {content: url('../images/step3-red.png');}
    .step5::after {content: url('../images/step4-red.png');}
    #terms {bottom:16px;}
    #terms {display:none}
}
@media (max-width: 325px) and (orientation: portrait) {
    #content-top {width:90%;}
    h1 {font-size:18px;margin: 0 0 12px;}
    .subtitle {font-size:12px;margin: 0 0 12px;}
    hr {margin: 0 auto 12px;}
    .title {font-size:12px;margin: 0 0 24px;}
    ul.buttons {margin:0 0 18px}
    ul.buttons li {margin:0 8px 18px;}
    a.btn,a.btnBig {padding: 6px 24px;font-size: 14px;}
    .number3.title {font-size:11px;margin: 0 0 10px;}
    .number4.title, .number5.title, .number6.title {font-size:11px;margin: 0 0 16px;}
    .step6 ul {padding-bottom: 10px;}
}