html {
    display: block;
}

body {
    background-color: #f0ebf8;
    font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
    margin: 0;
    height: 100%;
}

.height {
    height: 100%;
}

.back-color {
    background-color: rgb(236, 238, 240);
}

.main {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.header {
    max-height: 22.54247954688483vw;
    max-width: 90vw;
    height: 160.3020767778477px;
    width: 640px;
}

.back {
    background-image: url(img/banner%20degen%20musculacion.jpg);
    background-size: cover;
    background-position: center;
}

.borders {
    border: 1px solid rgb(218, 220, 224);
    border-radius: 8px;
    margin-top: 12px !important;
}

.margins {
    margin: auto;
    max-width: 90vw;
    width: 640px;
}

.form-box {
    background-color: transparent;
    box-shadow: none;
    margin-bottom: 0;
    padding-bottom: 0;
    word-wrap: break-word;
}

.font-color {
    color: rgb(32, 33, 36);
}

.sections {
    margin-top: 12px;
    background-color: #fff;
    border: 1px solid rgb(218, 220, 224);
    border-radius: 8px;
    margin-bottom: 12px;
    padding: 36px;
    padding-top: 28px;
    position: relative;
}

.textA {
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.textB {
    font-size: 24pt;
    font-family: 'docs-Roboto', Helvetica, Arial, sans-serif;
    letter-spacing: 0;
}

.titulo-intro {
    box-sizing: border-box;
    font-family: "Google Sans", Roboto, Arial, sans-serif;
    font-size: 32px;
    font-weight: 400;
    line-height: 40px;
    color: rgb(32, 33, 36);
    line-height: 135%;
    max-width: 100%;
    min-width: 0;
}

.textC {
    font-size: 11pt;
    line-height: 15pt;
    letter-spacing: 0;
}

.cuerpo-intro {
    font-family: Roboto, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: .2px;
    line-height: 20px;
    color: rgb(32, 33, 36);
    margin-top: 12px;
}

.sections .line {
    border-top: 1px solid rgb(218, 220, 224);
    left: 0;
    position: absolute;
    width: 100%;
}

.pb-16 {
    padding-bottom: 16px;
}

.button-section {
    padding: 1rem 2rem;
}

.button-text {
    font-size: 18px;
}

label.button-text {
    margin-bottom: 2rem;
    text-transform: uppercase;
}

input#run {
    margin: 0 auto;
    width: 50%;
    margin-bottom: 2rem;
}

button[type=submit] {
    width: 40%;
}

.data {
    min-height: 38px;
}

.sections .shadow, .header .shadow {
    -webkit-box-shadow: 4px 6px 6px 0px rgba(0,0,0,0.18);
    -moz-box-shadow: 4px 6px 6px 0px rgba(0,0,0,0.18);
    box-shadow: 4px 6px 6px 0px rgba(0,0,0,0.18);
}

.label-2 {
    font-weight: bold;
}

.espacio {
    margin-bottom: 1rem;
}

input.form-check-input {
    border: 2px solid #bdc1c6;
}

.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.floating\[0px_4px_12px_rgba\(42\,_52\,_61\,_0\.1\)\] {
    --tw-drop-shadow: drop-shadow(0px 4px 12px rgba(42, 52, 61, 0.1));
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.question {
    width: 100%;
    padding: 16px 16px;
    text-align: center;
    margin: 0 auto;
    border-radius: 1rem;
}

* {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / 0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
}


/* RESPONSIVE CSS */

@media (max-width: 480px) {
    input {
        width:80% !important;
    }

    input.form-check-input {
        width: 1em !important;
    }

    button {
        width: 100% !important;
    }

    .sections {
        padding: 16px;
    }
    
    .margins {
        max-width: 94vw;
    }
}