@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&family=Poppins:wght@400;700&display=swap');

/*Reset*/
* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}
body {
    margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block;
}
audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline
}
audio:not([controls]) {
    display: none;
    height: 0
}
[hidden],
template {
    display: none
}
a {
    background-color: transparent
}
a:active,
a:hover {
    outline: 0
}
abbr[title] {
    border-bottom: 1px dotted
}
b,
strong {
    font-weight: 700
}
dfn {
    font-style: italic
}
h1 {
    font-size: 2em;
    margin: 0;
}
mark {
    background: #ff0;
    color: #000
}
small {
    font-size: 80%
}
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}
sup {
    top: -.5em
}
sub {
    bottom: -.25em
}
img {
    border: 0
}
svg:not(:root) {
    overflow: hidden
}
figure {
    margin: 1em 40px
}
hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0
}
pre {
    overflow: auto
}
code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}
button,
input,
optgroup,
select,
textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}
button {
    overflow: visible
}
button,
select {
    text-transform: none
}
button,
html input[type=button],
input[type=reset],
input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer
}
button[disabled],
html input[disabled] {
    cursor: default
}
button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0
}
input {
    line-height: normal
}
input[type=checkbox],
input[type=radio] {
    box-sizing: border-box;
    padding: 0
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    height: auto
}
input[type=search] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box
}
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}
fieldset {
    border: 1px solid silver;
    margin: 0 2px;
    padding: .35em .625em .75em
}
legend {
    border: 0;
    padding: 0
}
textarea {
    overflow: auto
}
optgroup {
    font-weight: 700
}
table {
    border-collapse: collapse;
    border-spacing: 0
}
td,
th {
    padding: 0
}
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #fbfbfb inset;
    -webkit-text-fill-color: #000000!important;
}
/*Layout*/
html {
}
body {
    font-family: 'Poppins', sans-serif;
    color: #222222;
}
h1, h2, .button {
}
.label {
}
.container {
    margin: 0 auto;
    width: 480px;
    position: relative;
    padding: 0;
    text-align: center;
}
#form {
    position: relative;
    margin: auto;
    min-height: 340px;
    padding: 20px 0 0 0;
    z-index: 1;
    text-align: center;
    width: 360px;
}
.footer,
.header {
    margin: 0 auto;
    padding: 0;
}
.header {
    margin: 0 auto;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    padding: 0;
    max-width: 520px;
}
.footer {
    margin: 0;
    font-size: 11px;
}
.footer p,
.header p {
    margin: 0 auto;
    padding: 10px 0;
    color: #333333;
    font-weight: normal;
}
.footer {
    padding: 10px;
}
.footer p {
    text-align: left;
    padding: 0;
}
.footer ul {
    padding: 0;
    margin: 0;
    line-height: 1.4;
}
.footer li {
    padding: 0;
    margin: 0 15px;
}
.header p {color: #fff;}
p {
    margin: 0;
    font-size: 12px;
    line-height: 16px;
    color: #000000;
}
a {
    transition: 0.3s ease all;
    -webkit-transition: 0.3s ease all;
    -moz-transition: 0.3s ease all;
    -ms-transition: 0.3s ease all;
}
:focus {
    outline: 0;
}
.step {
}
.step.hidden {
    display: none;
}
.step.visible {
    display: block;
}
.d-none {
    display: none;
}
/*Custom*/

.c-red {
    color: #ff1a21;
}
.input-container {
    display: inline-block;
    text-align: center;
    position: relative;
    padding: 2px;
    background-color: #ffffff;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    transition: 0.3s ease all;
    -webkit-transition: 0.3s ease all;
}
.footer,
.header {
    z-index: 3;
    color: #666666;
    font-family: sans-serif;
} 
html {
    background-color: #ffffff;
}
::-webkit-input-placeholder {
    color: #999999;
}
:-moz-placeholder {
    color: #999999;
}
::-moz-placeholder {
    color: #999999;
}
:-ms-input-placeholder {
    color: #999999;
}
.input_group {
    display: inline-block;
    float: none;
    position: relative;
    width: 340px;
    margin: 0 auto 15px auto;
    border: 0;
    color: #000000;
    text-align: center;
}
.input_group .input_text {
    position: relative;
}
.input_group .label, 
.input_group .label, 
.input_group .label {
    font-size: 16px;
    line-height: 25px;
    position: static;
    pointer-events: none;
    padding: 0;
    margin: 0 0 5px 0;
    text-align: left;
    font-weight: normal;
    color: #000000;
    display: inline-block;
}
.input_group .label {
    color: #fe5554;
    -webkit-background-size: auto 36px;
    background-size: auto 36px;
    height: 36px;
    padding: 0;
    line-height: 36px;
    position: relative;
    margin: 8px 0;
    width: 340px;
    text-align: center;
    font-weight: bold;
}
.label:before {
}
.label .icon {
    width: 24px;
    height: 24px;
    display: inline-block;
    position: relative;
    background-size: 24px;
    overflow: hidden;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    top: 5px;
    left: -1px;
}
.label .icon-arrow {
    width: 40px;
    height: 30px;
    display: block;
    position: absolute;
    top: 60px;
    background-size: auto 30px;
    background-repeat: no-repeat;
}
.label .icon-arrow i {
    width: 20px;
    height: 30px;
    display: inline-block;
    background-size: 15px auto;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 -3px;
    animation: animFade linear infinite 1.5s;
    -webkit-animation: animFade linear infinite 1.5s;
}
.label .icon-arrow i:nth-child(2) {
    animation-delay: .3s;
    -webkit-animation-delay: .3s;
}
.label .icon-arrow.left {
    left: -20px;
}
.label .icon-arrow.right {
    right: -20px;
}
.label .icon-arrow.left i {
    background-image: url(../img/icon-left.png);
}
.label .icon-arrow.right i {
    background-image: url(../img/icon-right.png);
}
.input_group .label .icon-phone {
    background-image: url(../img/icon-phone.png);
}
.input_group .label .icon-operator {
    background-image: url(../img/icon-operator.png);
}
.input_group .label .icon-pin {
    background-image: url(../img/icon-pin.png);
}
.input_group .label .icon-step-01 {
    background-image: url(../img/icon-step-01.png);
}
.input_group .label .icon-step-02 {
    background-image: url(../img/icon-step-02.png);
}
.input_group .label .icon-step-03 {
    background-image: url(../img/icon-step-03.png);
}
.input_group .label .icon-step-04 {
    background-image: url(../img/icon-step-04.png);
}
.input_group .label .icon-step-05 {
    background-image: url(../img/icon-step-05.png);
}
.input_group .label .icon-resultado {
    background-image: url(../img/icon-resultado.png);
}
.input_group input, 
.input_group select {
    padding: 0 20px;
    line-height: 50px;
    height: 70px;
    border: 0;
    background-color: #ffffff;
    display: inline-block;
    margin: auto;
    float: none;
    border-radius: 35px;
    -webkit-border-radius: 35px;
    border: 0;
    box-shadow: 0 0 0 3px #fe5554;
    -webkit-box-shadow: 0 0 0 3px #fe5554;
    font-size: 22px;
    text-align: center;
}
.input_group input {
    font-weight: bold;
    width: 300px;
    height: 70px;
}
.input_group select {
    -moz-appearance: none;
    -ms-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    font-weight: bold;
    width: 300px;
    background-size: auto 50px;
    -webkit-background-size: auto 50px;
    background-position: 250px center;
    background-image: url(../img/img00.png);
    background-repeat: no-repeat;
    text-align-last: center;
}
.input_group input#mobile {
    background-position: 0 0;
}
.input_group select#operador {
}
.input_group input#pin {
    background-position: 0 -160px;
}
select::-ms-expand {
    display: none;
}
a.button {
    height: 70px;
    width: 300px;
    color: #ffffff;
    text-decoration: none;
    font-size: 26px;
    text-align: center;
    margin: 0 auto 0 auto;
    border: 0;
    font-weight: bold;
    line-height: 66px;
    cursor: pointer;
    position: relative;
    display: block;
    z-index: 1;
    background-color: #ff483b;
    letter-spacing: 1px;
    background: #ff483b;
    background: linear-gradient(0deg, #ff3b3b 0%, #ff7936 80%);
    border-radius: 35px;
    -webkit-border-radius: 35px;
    box-shadow: 0 8px rgb(0 0 0 / 10%);
    -webkit-box-shadow: 0 8px rgb(0 0 0 / 10%);
}
a.button .text {
    position: relative;
    z-index: 2;
    font-size: 26px;
}
a.button:hover {
    cursor: pointer;
    letter-spacing: 2px;
}
a.button .shine {
    background-color: rgba(255,255,255,0.3);
    content:"";
    display: block;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    width: 40px;
    transform: skewX(-20deg);
    -webkit-transform: skewX(-20deg);
    filter: blur(5px);
    -webkit-filter: blur(5px);
    z-index: 0;
}

.button-container {
    height: 70px;
    width: 300px;
    position: relative;
    margin: 0 auto 30px;
    float: none;
}
.shine-container {
    height: 70px;
    position: absolute;
    display: block;
    width: 300px;
    top: 0;
    z-index: 0;
    overflow: hidden;
}
#resultado .box {
    margin-top: -30px;
}
#resultado p {
}
#resultado #bmi {
    display: block;
    font-size: 44px;
    padding: 8px 0 0 0;
    line-height: 1;
    color: #ff5554;
}
#resultado h4 {
    font-weight: bold;
    font-size: 20px;
    margin: 0 0 10px 0;
    color: #000000;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.button-container  .light {
    position: absolute;
    height: 80px;
    width: 310px;
    background-color: rgb(95 193 49 / 30%);
    top: -5px;
    left: -5px;
    margin: auto;
    border-radius: 14px;
    -webkit-border-radius: 14px;
}
#bottom {
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 20px 0;
}
#bottom span {
    height: 10px;
    width: 10px;
    display: inline-block;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    box-shadow: 0 0 0 2px #ff5554;
    margin: 0 6px;
}
#bottom .ok {
    background-color: #ff5554;
}

/*Images*/

.bg-header {
    background-image: url(../img/bg-header.jpg);
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    height: 172px;
    background-size: cover;
    background-position: center;
}
.bg-header span {
    background-image: url(../img/bg-bottom.png);
    height: 10px;
    background-size: auto 10px;
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    background-position: center;
    background-repeat: repeat-x;
}
h1 .icon {
    background-image: url(../img/icon-header.png);
    height: 44px;
    width: 44px;
    display: inline-block;
    background-position: center;
    background-size: contain;
    margin-bottom: 5px;
    background-repeat: no-repeat;
}
.logo {
    display: inline-block;
    background-image: url(../img/logo.png);
    background-color: #69af9a;
    height: 36px;
    width: 90px;
    background-size: auto 36px;
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
    padding: 0;
    position: absolute;
    left: 0;
    border-radius: 0 0 8px 8px;
    -webkit-border-radius: 0 0 8px 8px;
}

/*Typefonts*/

h1 {
    margin: 0 0 4px 0;
    padding-top: 44px;
    font-size: 28px;
    position: relative;
    line-height: 1;
    color: #ffffff;
}
h2 {
    margin: 0 0 10px 0;
    padding: 0;
    color: #fff;
    font-size: 16px;
    position: relative;
    line-height: 1.2;
    font-weight: normal;
}

#resultado p {
    font-size: 14px;
    line-height: 1.5;
    display: inline-block;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    max-width: 300px;
    position: relative;
    margin: 0;
    font-weight: normal;
    padding: 15px 10px;
    background-color: #ffffff;
    color: #000000;
    box-shadow: 0 0 0 3px #ff5554;
}

/* Input type number */

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0; }
input[type=number] {
  -moz-appearance: textfield;
}
.input_group.number input {
    background-image: none;
}
.input_group.number .nav {
  float: left;
  position: relative;
  height: 42px;
}
.input_group.number .num {
  bottom: 15px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #666;
  background-color: #f4f4f4;
  font-size: 24px;
  position: absolute;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  border-radius: 50%;
}
.input_group.number .num.up {right: 35px;}
.input_group.number .num.down {left: 35px;}


/* Translation button */
#lng_select {
    color: #fff;
    line-height: 20px;
    height: auto;
    text-decoration: none;
    position: absolute;
    display: block;
    right: 0;
    z-index: 9;
    font-size: 12px;
    padding: 8px 5px 8px 32px;
    font-weight: normal;
    top: 0;
    background-image: url(../img/img01.png);
    background-size: auto 34px;
    -webkit-background-size: auto 34px;
    background-position: 4px center;
    background-repeat: no-repeat;
    background-color: rgb(24 53 98 / 20%);
    border-radius: 0 0 8px 8px;
    -webkit-border-radius: 0 0 8px 8px;
    border: 0;
}
#lng_select:hover {
    cursor:pointer;
}
#lng_select span {
    padding: 0 10px 0 0;
    font-family: sans-serif;
}
/* Translations */
[lng-b], #lng_select [lng-a] {
    direction: rtl;
    unicode-bidi: bidi-override;
    font-family: 'Cairo', sans-serif;
}
[lng-a],
[lng-b] {
    display: none;
}

[lng-a].visible,
[lng-b].visible {
    display: inline-block;
}
.ltr {
    direction: ltr;
    unicode-bidi: bidi-override;
}
.button [lng-b] {
    letter-spacing: 0;
    font-weight: bold;
}
/* Operator */
[op-a],
[op-b],
[op-c] {
    display: none;
}
[op-a].visible,
[op-b].visible,
[op-c].visible {
    display: inline-block;
}
/*Animation*/
* {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
/**/
.header,
.footer {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}
.fadeIn,
.header,
.footer, 
#lng_select,
.exit,
#bottom {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}
@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}
/**/
.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}
@-webkit-keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -50px, 0);
        transform: translate3d(0, -50px, 0);
    }
    to {
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -50px, 0);
        transform: translate3d(0, -50px, 0);
    }
    to {
        -webkit-transform: none;
        transform: none;
    }
}
/**/
.fadeInUp,
.input_group,
.button-container {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}
@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 40px, 0);
        transform: translate3d(0, 40px, 0);
    }
    to {
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 40px, 0);
        transform: translate3d(0, 40px, 0);
    }
    to {
        -webkit-transform: none;
        transform: none;
    }
}
/**/
.zoomIn,
h1  {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
}
@-webkit-keyframes zoomIn {
    from {-webkit-transform: scale(1.5);transform: scale(1.5);opacity: 0;}
    to {-webkit-transform: none;transform: none;opacity: 1;}
}
@keyframes zoomIn {
    from {-webkit-transform: scale(1.5);transform: scale(1.5);opacity: 0;}
    to {-webkit-transform: none;transform: none;opacity: 1;}
}
/**/
.zoomOut,
h2,
#resultado .box {
    -webkit-animation-name: zoomOut;
    animation-name: zoomOut;
}
@-webkit-keyframes zoomOut {
    from {-webkit-transform: scale(.5);transform: scale(.5);opacity: 0;}
    to {-webkit-transform: none;transform: none;opacity: 1;}
}
@keyframes zoomOut {
    from {-webkit-transform: scale(.5);transform: scale(.5);opacity: 0;}
    to {-webkit-transform: none;transform: none;opacity: 1;}
}
/**/
a.button .shine {
    animation-name: animShine;
    -webkit-animation-name: animShine;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
}
@-webkit-keyframes animShine {
    0% {opacity: 0;left: 40px;}
    50% {opacity: 1;}
    100% {opacity: 0;left: 240px;}
}
@keyframes animShine {
    0% {opacity: 0;left: 40px;}
    50% {opacity: 1;}
    100% {opacity: 0;left: 240px;}
}
/**/

@-webkit-keyframes animFade {
    0% {opacity: 0.3;} 
    50% {opacity: 1;} 
    100% {opacity: 0.3;} 
}
/**/
h2, 
.button-container,
#resultado .box {
    animation-delay: 0.3s;
    -webkit-animation-delay: 0.3s;
}
#mobile_box .input_group {
    animation-delay: 0.6s;
    -webkit-animation-delay: 0.6s;
}
#mobile_box .button-container {
    animation-delay: 0.9s;
    -webkit-animation-delay: 0.9s;
}
#resultado {

}