@import url('https://fonts.googleapis.com/css?family=Cantarell:400, 700|Fjalla+One');

.logo-txt,
.subtitulo,
.tel,
h1,
h2,
h3,
h4,
h5,
h6,
nav ul li a {
    text-transform: uppercase
}

#contacto header,
.basico,
.beneficiarios h3,
.beneficiarios>.container>p,
.call-center,
.clientes,
.contacto-tel,
.contenido,
.membresia header,
.premium,
footer {
    text-align: center
}

body,
h4 {
    margin: 0
}

html,
input {
    box-sizing: border-box
}

#escribenos .btn,
.btn-contacto,
.btn-menu,
.membresia article button {
    box-shadow: 0 0 1px transparent;
    vertical-align: middle
}

*,
:after,
:before {
    box-sizing: inherit
}

.clearfix::after {
    display: block;
    content: "";
    clear: both
}

body {
    font-family: Cantarell, sans-serif;
    font-size: 100%;
    font-weight: 100;
    padding: 0;
    color: #fff
}

.tel,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Fjalla One', sans-serif;
    font-weight: 100;
    margin: 0;
    letter-spacing: 2px
}

h1 {
    font-size: 1em;
    margin: 0 0 .2em .5em
}

h2 {
    font-size: 2em;
    line-height: 1em
}

h3 {
    font-size: 1em
}

p {
    margin: 0 0 .5em .5em
}

a {
    color: #fff;
    text-decoration: none;
    border-bottom: 0
}

a:visited {
    color: #fff
}

.btn,
.btn-contacto,
.btn-menu,
a.btn {
    color: #fff;
    text-decoration: none;
    background: #d50000;
    display: inline-block;
    border-radius: 5px;
    font-size: .7em;
    text-transform: uppercase;
    font-weight: 700;
    cursor: pointer;
    transition: background .3s;
    border: 2px solid #d50000;
    padding: 7px 10px
}

.btn:active,
.btn:hover,
a.btn:active,
a.btn:hover {
    text-decoration: none;
    background: 0 0;
    border: 2px solid #d50000;
    border-radius: 5px
}

.link-activo a {
    border-bottom: 1px solid #fff;
    margin-bottom: 1px
}

.btn-contacto,
.btn-menu {
    display: inline-block;
    background: 0 0;
    border: 2px solid #fff;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    position: relative;
    -webkit-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    margin-right: 10px
}

.btn-contacto:before,
.btn-menu:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #d50000;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.btn-contacto:active,
.btn-contacto:focus,
.btn-contacto:hover,
.btn-menu:active,
.btn-menu:focus,
.btn-menu:hover {
    color: #fff;
    border-color: #d50000;
    transition-duration: .5s
}

.btn-contacto:visited {
    color: #fff
}

.btn-contacto:active:before,
.btn-contacto:focus:before,
.btn-contacto:hover:before,
.btn-menu:active:before,
.btn-menu:focus:before,
.btn-menu:hover:before {
    -webkit-transform: scaleY(1);
    transform: scaleY(1)
}

.tel {
    display: inline-block;
    font-size: 1.2em;
    font-weight: 600;
    letter-spacing: 3px
}

.subtitulo,
nav ul li a {
    font-weight: 700
}

.columna {
    display: flex;
    flex-flow: column;
    align-items: center
}

.main-header,
header .logo {
    align-items: center;
    display: flex
}

.logo {
    top: -.25rem;
    position: relative;
}

.subtitulo {
    display: inline-block;
    letter-spacing: 4px
}

fieldset,
input,
label,
select {
    font-size: .9em
}

input {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

footer {
    background: #7E7F9A;
    padding: 35px 20px;
    border-top: 5px solid #fff;
    font-size: .8em
}

.logo-txt {
    letter-spacing: 0
}

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    width: 100%;
    height: 100%;
    transition: 1s all ease-out;
}

.preloader:after,
.preloader:before {
    content: "";
    position: absolute;
    width: 50%;
    height: 100%;
    background: #ddd;
    transition: 1s
}

.preloader:before {
    bottom: 0;
    left: 0
}

.preloader.complete:before {
    bottom: -100%
}

.preloader:after {
    top: 0;
    right: 0
}

.preloader.complete:after {
    top: -100%
}

.preloader.complete {
    opacity: 0;
    visibility: hidden;
    pointer-events: none
}

.preloader .center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 250px;
    height: 250px;
    z-index: 1;
}

.preloader .square1 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border-style: solid;
    border-width: 7px;
    border-color: rgb(81, 74, 157) transparent rgb(0, 133, 180) transparent;
    animation: square1 2s linear infinite;
}

.preloader .square2 {
    position: absolute;
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    top: 20px;
    left: 20px;
    background: url('../images/logo-full.png') center center no-repeat;
    background-size: 100%
}

@keyframes square1 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

#page>header {
    margin: 0;
    position: relative
}

.header-bg {
    background-color: transparent;
    width: 100%;
    position: absolute;
    z-index: 5
}

.main-header {
    padding: 2px
}

header .logo {
    margin: 0
}

.logo h1 {
    color: #fff;
    font-size: 1.2em
}

.logo a img {
    width: 9em;
    margin: -10px 0 0 0;
}

header[role=banner] div.social {
    color: #fff;
    display: flex;
    margin-right: .5em;
    margin-left: auto;
    align-items: center
}

header[role=banner] div.social>p>span {
    position: relative;
    top: 4px;
    right: 20px
}

.social a {
    color: #fff
}

.menu-toggle {
    display: none
}

nav {
    width: 100%;
    display: flex;
    z-index: 5
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative
}

@media only screen and (min-width:580px) {
    nav ul {
        display: flex;
        align-items: center
    }
}

nav ul li a {
    font-size: .8em;
    margin: 0 15px;
    display: inline-block;
    text-decoration: none;
    position: relative;
    max-width: 220px
}

nav>ul>li {
    float: left;
    padding: 0 8px 5px
}

nav li a span.afiliados {
    display: none
}

nav>ul>li.inicio {
    display: block;
    margin-top: 2px
}

nav>ul>li>a,
nav>ul>li>a:active,
nav>ul>li>a:hover,
nav>ul>li>a:visited {
    width: auto;
    position: relative;
    color: #fff
}

nav>ul>li>a:before {
    content: " ";
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: -1px;
    left: 0;
    background-color: #fff;
    visibility: hidden;
    transform: scaleX(0);
    transition: all .3s ease-in-out 0s
}

nav>ul>li>a:hover::before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
}

nav div.afiliado {
    margin-left: auto;
    margin-right: 30px
}

.afiliado button.fixed {
    color: #fff;
    background: 0 0;
    border: 2px solid #fff
}

.afiliado button.fixed:hover {
    background: #fff;
    color: #0085bc
}

div.afiliado .btn-ingreso {
    margin-left: 10px;
    background: 0 0;
    border-color: #fff
}

div.afiliado .btn-ingreso:hover {
    background-color: #d50000;
    border-color: #d50000
}

.fixed-nav {
    position: fixed;
    top: 0;
    z-index: 6;
    transition: all .3s;
    background-color: #0085bc;
    padding: 7px 0
}

.bx-wrapper {
    border: none;
    border-bottom: 5px solid #fff;
    margin-bottom: 0;
    z-index: 0
}

.slider {
    position: relative;
    height: 100vh
}

.slide {
    height: 100vh;
    width: 100%
}

div.slide:nth-of-type(2) {
    background: url(../images/slider/1.png) left top no-repeat;
    background-size: cover
}

div.slide:nth-of-type(3) {
    background: url(../images/slider/2.jpg) left center no-repeat;
    background-size: cover
}

div.slide:nth-of-type(4) {
    background: url(../images/slider/3.jpg) left center no-repeat;
    background-size: cover
}

div.slide:nth-of-type(5) {
    background: url(../images/slider/4.jpg) left center no-repeat;
    background-size: cover
}

.txt-left,
.txt-right {
    position: absolute;
    width: 35%;
    top: 13em
}

.txt-right {
    right: 3em
}

.txt-left {
    left: 7em
}

.caption h1 {
    font-size: 3em;
    margin-left: 0;
    line-height: 50px;
    text-transform: none;
    font-weight: 100
}

#contacto header,
.clientes p,
.form-error p,
.info-beneficiarios>div,
.membresia footer a,
.nosotros-info h2,
.nosotros-info span,
.registro-tda header p,
footer a.contacto-link {
    text-transform: uppercase
}

.caption p {
    padding: 0;
    margin: 0 0 15px;
    font-size: 1.4em;
    line-height: 25px
}

#nosotros footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    font-size: 1.1em
}

.quienes-somos {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    color: #fff;
    padding: 50px 50px 0;
    background: linear-gradient(rgba(0, 133, 180, .3), rgba(81, 74, 157, .7)), url(../images/nosotros-bg.jpg) center top no-repeat;
    background-size: cover;
    background-attachment: fixed;
    height: 100%
}

.nosotros-info {
    width: 60%;
    background-color: rgba(0, 133, 188, .8);
    padding: 30px
}

.nosotros-info h2 {
    font-size: 2.5em;
    margin-bottom: .2em;
    margin-left: 0;
    padding-right: .2em;
    border-right: 7px solid #fff;
    display: inline-block
}

.nosotros-info span {
    display: block;
    font-size: .8em;
    line-height: 18px;
    font-weight: 700;
    font-style: oblique
}

.nosotros-info blockquote {
    margin-top: 15px;
    margin-left: 18px;
    font-style: italic;
    font-weight: 700;
    line-height: 1.2em;
    position: relative
}

.nosotros-info blockquote:before {
    content: "\201C";
    font-size: 2em;
    position: absolute;
    left: -23px
}

.nosotros-info blockquote cite {
    font-size: 14px;
    display: block;
    margin-top: 7px;
    font-weight: 700
}

.nosotros-info blockquote cite:before {
    content: "\2014 \2009"
}

.nosotros-img {
    width: 40%
}

#call-center,
.planes {
    width: 100%
}

.nosotros-img img {
    max-width: 300px;
    display: block;
    margin: 0 auto;
    -webkit-filter: drop-shadow(3px 3px 15px gray);
    filter: drop-shadow(3px 3px 15px gray)
}

.planes,
.servicios {
    display: flex
}

.adicionales,
.funerario,
.vial {
    background: rgba(0, 133, 188, 1);
    transition: background .5s
}

.adicionales:hover,
.funerario:hover,
.vial:hover {
    background: rgba(0, 133, 188, .75)
}

.adicionales,
.vial {
    border-left: 6px solid #fff
}

.contenido {
    padding: 50px 40px
}

.contenido h3 {
    font-size: 1.4em;
    margin-bottom: 15px
}

.contenido p {
    font-size: .9em;
    margin-bottom: 20px
}

.membresia header {
    background: linear-gradient(rgba(36, 130, 180, .2), rgba(36, 130, 180, .6)), url(../images/membresia-bg.jpg) right center;
    background-size: cover;
    padding: 75px 0;
    font-size: 1.7em
}

.membresia header h2 {
    margin-bottom: 10px
}

.membresia article {
    background: linear-gradient(#0085b4, #514a9d);
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 50px 0
}

.membresia article>h3 {
    font-size: 2.2em;
    margin-bottom: 25px
}

.planes {
    align-items: center
}

.membresia article ul {
    list-style-type: none;
    padding: 0;
    margin-top: 0
}

.membresia article button {
    margin: 25px 0;
    background: 0 0;
    border: 2px solid #fff;
    padding: 10px 15px;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    position: relative;
    -webkit-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

.membresia article button:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #d50000;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

.membresia article button:active,
.membresia article button:focus,
.membresia article button:hover {
    color: #fff;
    border-color: #d50000;
    transition-duration: .5s
}

.membresia article button:active:before,
.membresia article button:focus:before,
.membresia article button:hover:before {
    -webkit-transform: scaleY(1);
    transform: scaleY(1)
}

.basico,
.premium {
    width: 50%;
    height: 350px;
    line-height: 30px;
    margin: 25px 0
}

.basico img.tda,
.premium img.tda {
    width: 200px;
    display: inline-block;
    margin-bottom: 20px;
    -webkit-filter: drop-shadow(1px 1px 3px #363636);
    filter: drop-shadow(1px 1px 3px #363636)
}

.basico {
    border-right: 2px solid #fff
}

.basico h3,
.premium h3 {
    font-size: 2em;
    margin-bottom: 5px
}

.basico h4,
.premium h4 {
    font-size: 1.4em
}

.membresia footer a {
    position: relative;
    color: #C3DFE0
}

.membresia footer a:before {
    content: " ";
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: #fff;
    visibility: hidden;
    transform: scaleX(0);
    transition: all .3s ease-in-out 0s
}

.membresia footer a:hover::before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
}

#call-center article {
    height: 90vh;
    background: linear-gradient(rgba(0, 133, 188, .55), rgba(81, 74, 157, 1)), url(../images/callcenter-bg.jpg) right top no-repeat;
    background-size: cover;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center
}

.call-center {
    width: 50%
}

.call-center span.subtitulo {
    letter-spacing: 6px;
    font-size: .8em
}

.call-center h2 {
    font-size: 3.2em;
    margin-top: 15px
}

.call-center p {
    font-size: 1.2em;
    margin: 35px 0;
    line-height: 30px
}

.clientes {
    padding: 30px 0 15px;
    color: #363636
}

.clientes h3 {
    font-size: 1.7em
}

.logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center
}

.logo-cl img {
    width: 150px
}

.clientes p {
    font-size: 1.2em;
    margin-top: 15px
}

#contacto header {
    padding: 100px 20% 30px;
    background: #0085bc;
    border-bottom: 5px solid #fff;
    line-height: 1.5em
}

#contacto header h2 {
    font-size: 2.3em;
    margin-bottom: .2em
}

.contacto-container h3,
.contacto-map h3 {
    font-size: 3em;
    margin-left: 0
}

.contacto-container {
    color: #363636;
    display: flex;
    flex-flow: wrap;
    align-items: baseline;
    justify-content: space-around;
    margin: 50px 0 50px 50px
}

.contacto-container section>p {
    margin-left: 0
}

.contacto-container section {
    width: 50%
}

.contacto-container aside {
    width: 40%
}

.contacto-tel {
    font-size: 1.2em;
    font-weight: bolder;
    line-height: 30px;
    margin-bottom: 1em
}

.contacto-tel address {
    font-size: .7em;
    line-height: 17px
}

#map {
    margin: 0 auto;
    width: 100%;
    height: 350px
}

#escribenos input,
#escribenos select,
#escribenos textarea {
    font-family: inherit;
    font-size: 100%;
    display: block;
    width: 100%
}

#escribenos label {
    display: block;
    margin: 7px 0 0
}

#escribenos {
    margin: 15px 0
}

#escribenos img {
    display: inline-block;
    margin-left: 17em;
    position: relative;
    top: 12px
}

.afiliarse-btn,
.domiciliacion-info,
.form-error2,
.monto-inicial,
.opciones-pago,
.section-success {
    display: none
}

#escribenos p {
    margin: 7px 0 -10px;
    font-size: .75em
}

#escribenos .btn {
    margin-top: 20px;
    border: 2px solid #363636;
    color: #363636;
    background: 0 0;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

#escribenos .btn:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

#escribenos .btn:active,
#escribenos .btn:focus,
#escribenos .btn:hover {
    color: #0085bc
}

#enviar.btn:hover,
.form-error p,
.form-error ul {
    color: #d50000
}

#escribenos .btn:active:before,
#escribenos .btn:focus:before,
#escribenos .btn:hover:before {
    -webkit-transform: scaleY(1);
    transform: scaleY(1)
}

#escribenos input {
    border: none;
    width: 80%;
    border-bottom: 2px solid #ddd;
    background: 0 0;
    font: 16px Arial, Helvetica, sans-serif;
    outline: 0;
    padding: 3px 0;
    font-size: .9em
}

#escribenos input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    box-shadow: 0 0 0 1000px #fff inset;
}

#escribenos textarea {
    resize: none;
    overflow: hidden;
    border: 2px solid #ddd;
    border-radius: .25em;
    box-shadow: 0;
    background: 0 0;
    margin-top: 10px;
    padding: 10px;
    width: 80%;
    font-size: .9em
}

#escribenos input:focus {
    border-bottom: 2px solid #363636
}

#escribenos textarea:focus {
    border: 2px solid #363636;
    outline: 0
}

#escribenos input.error,
#escribenos input.error:-webkit-autofill {
    background: url(../images/invalid.svg) top right no-repeat;
    background-size: 14px
}

#escribenos input.error:-webkit-autofill,
#escribenos input.valid {
    background: url(../images/valid.svg) top right no-repeat;
    background-size: 14px
}

#escribenos div.form-error {
    width: 100%;
    margin: 0;
    padding: 0
}

.form-error ul {
    line-height: 1.2em
}

.modal-body,
.terminos p {
    line-height: 1.2
}

.form-error ul li {
    padding: 4px 0;
    color: #d50000
}

#escribenos .email-msg {
    color: #0085bc;
    font-size: 1.1em;
    font-weight: 700;
    margin-top: 30px
}

.registro-tda {
    background-color: #f2f2f2
}

.registro-tda header {
    background: url(../images/tda-bg.jpg) center center no-repeat;
    background-size: cover;
    height: 250px;
    padding-top: 20vh
}

.seccion-tda h2 {
    font-size: 2rem;
    margin: 30px 0
}

.seccion-tda h3 {
    font-size: 1.5rem
}

.seccion-tda small {
    font-size: .85rem
}

.registro-tda header+button {
    border-radius: 0;
    font-size: .9rem;
    background-color: #7E7F9A;
    border: none;
    padding: 10px 0
}

.registro-tda header+button:active,
.registro-tda header+button:focus,
.registro-tda header+button:hover {
    background-color: rgba(126, 127, 154, .7);
    border: none;
    border-radius: 0
}

#boton_planes {
    background-color: #55567c;
}

.info-planes {
    width: 100%;
    background-color: #7E7F9A;
    padding: 20px
}

.info-planes h3 {
    font-size: 1.5rem
}

.planes {
    margin-bottom: 30px
}

#plan_basico,
#plan_basico img,
#plan_premium,
#plan_premium img {
    transition: all .5s ease
}

#plan_basico:hover,
#plan_premium:hover {
    transform: scale(1.03)
}

#plan_basico:hover img,
#plan_premium:hover img {
    box-shadow: 5px 5px 8px #a9a9a9
}

.formulario-tda {
    color: #343a40;
    padding: 15px 0
}

.formulario-tda input {
    font-size: .9rem
}

.formulario-tda>.container>div {
    background-color: #fff;
    margin: 0 0 30px;
    padding: 20px;
    display: none
}

.formulario-tda>.container>div:last-of-type {
    margin-bottom: 15px
}

.btn-submit,
.btn-submit:disabled {
    background-color: #7e7f9a;
    border: none;
    opacity: 1;
    font-size: .7rem
}

.warning {
    color: #d50000;
    font-size: .85rem
}

.btn-submit:hover {
    border: none;
    background-color: rgba(126, 127, 154, .7)
}

.phone-number .col-4 {
    padding: 0 10px
}

.phone-number input {
    padding: 4px
}

#timer_div {
    position: fixed;
    top: 7rem;
    right: 0;
    z-index: 5;
    font-size: .8rem;
    background-color: #d50000
}

@media only screen and (min-width:768px) {
    #timer_div p {
        font-size: 1rem
    }

    #recibo_pasarela {
        width: 50%
    }
}

.section-success {
    padding: 4rem 2rem
}

.section-success a {
    background-color: #0085bc;
    font-size: .9rem;
    border-color: transparent
}

.section-success a:focus,
.section-success a:hover {
    color: #0085bc;
    background-color: transparent;
    border-color: #0085bc
}

.opciones-pago>div {
    padding: 0
}

.opcion-pago {
    height: 120px;
    width: 60%;
    background-color: rgba(126, 127, 154, .4);
    transition: .5s all ease-out;
    border: 2px solid transparent;
    position: relative
}

.pasarela-pago a {
    background-image: url(../images/tarjeta-credito.svg)
}

.transferencia a {
    background-image: url(../images/transferencia.svg)
}

.pasarela-pago a,
.transferencia a {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 40px
}

.pasarela-pago a:after {
    content: "Tarjeta de crédito"
}

.transferencia a:after {
    content: "Transferencia bancaria"
}

.pasarela-pago a:after,
.transferencia a:after {
    font-size: .8rem;
    position: absolute;
    top: 70%;
    left: 50%;
    margin-left: -20%
}

@media only screen and (min-width:998px) {
    .pasarela-pago a:after {
        margin-left: -15%
    }
}

.opcion-activa,
.opcion-pago:hover {
    border-color: #0085bc
}

.pagos-info {
    width: 80%;
    margin: 0 auto
}

label.error {
    color: #d9534f;
    font-size: .9rem;
    margin-left: 10px
}

.plan-beneficiarios .btn-bene:focus,
.plan-beneficiarios .btn-bene:hover,
.suma-plan p {
    color: #d50000
}

.plan-beneficiarios h3 {
    margin: 10px 0 20px
}

.plan-beneficiarios h4 {
    font-size: 1.2rem;
    margin-bottom: 5px
}

.suma-plan p {
    font-weight: 700;
    font-size: 1.2rem
}

#afiliarse_btn:disabled {
    opacity: .4;
    font-size: .8rem
}

.terminos p {
    margin-bottom: 25px
}

.formulario-tda .form-error {
    font-size: .8rem;
    color: #d50000
}

#login_modal .modal-body,
#login_modal .modal-header {
    background-color: #d9534f;
    color: #fff;
    border: none
}

#login_modal .modal-body i {
    font-size: 3rem
}

#login_modal .modal-body h4 {
    margin: 25px 0
}

.registro-exitoso .modal-body,
.registro-exitoso .modal-header {
    background-color: #3ABA6F;
    color: #fff;
    border: none
}

.registro-exitoso .modal-footer {
    justify-content: center
}

.modal-header .close {
    color: #fff;
    text-shadow: none
}

.registro-error .modal-body h4,
.registro-exitoso .modal-body h4 {
    font-size: 2.2rem;
    margin: 25px 0
}

.registro-error .modal-body p:first-of-type,
.registro-exitoso .modal-body p:first-of-type {
    margin: 0 0 40px
}

.registro-error .modal-body p:last-of-type,
.registro-exitoso .modal-body p:last-of-type {
    font-size: .9rem
}

.registro-error i,
.registro-exitoso i {
    font-size: 5vw
}



#volver_inicio {
    font-size: .9rem;
    background-color: #0085bc;
    border-color: #0085bc;
    display: block
}

#volver_inicio:active,
#volver_inicio:focus,
#volver_inicio:hover {
    border-color: #0085bc;
    background-color: transparent;
    color: #0085bc;
    margin: 0 auto
}

.registro-error .modal-body,
.registro-error .modal-header {
    background-color: #d9534f;
    color: #fff;
    border: none
}

.beneficiarios {
    padding: 4rem 0
}

.beneficiarios h3 {
    font-size: 1.6rem;
    margin-bottom: 10px
}

.beneficiarios input[type=radio]+label {
    font-size: 1rem
}

.info-beneficiarios>div {
    background-color: #28a745;
    color: #fff;
    font-weight: 700;
    font-size: .9rem;
    padding: 7px 80px;
    display: inline-block
}

@keyframes mostrar {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes ocultar {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.mostrar {
    animation: mostrar .5s ease-in 1 forwards
}

.ocultar {
    animation: ocultar .5s ease-in 1 forwards
}

.info-beneficiarios>div.error-cedula {
    background-color: #d50000
}

#page>footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%
}

footer a.contacto-link {
    color: #fff;
    font-weight: 700;
    font-size: .8em;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    position: relative;
    overflow: hidden
}

footer a.contacto-link:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    right: 50%;
    bottom: 0;
    background: #fff;
    height: 1px;
    -webkit-transition-property: left, right;
    transition-property: left, right;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
}

footer a.contacto-link:active:before,
footer a.contacto-link:focus:before,
footer a.contacto-link:hover:before,
footer a.contacto-link:visited:before {
    left: 0;
    right: 0;
    color: #fff
}

#page>footer>p {
    font-size: 1.2em;
    line-height: 1.5em;
    flex: 1
}

#page>footer .content {
    text-align: left;
    line-height: 1.5em;
    font-size: .9em;
    flex: 1
}

#page>footer .social {
    font-size: 1.2em;
    display: flex;
    justify-content: flex-end;
    flex: 1
}

@media screen and (max-width:1160px) {
    .beneficiarios {
        left: 1em
    }

    .beneficiario-wrap {
        width: 45%;
        margin: 20px 15px
    }

    .beneficiario-wrap div>input {
        width: 50%
    }
}

@media screen and (max-width:1080px) {
    header h1 {
        font-size: .8em
    }

    .slide {
        height: 90vh
    }

    .txt-right {
        right: 1em
    }

    .txt-left {
        left: 4em
    }

    .caption h1 {
        font-size: 2em;
        line-height: 35px
    }

    #page>footer>p,
    .caption p,
    .tel {
        font-size: 1.1em
    }

    .caption p {
        line-height: 20px
    }

    .contenido {
        padding: 30px 40px
    }

    .call-center {
        width: 70%
    }

    #page>footer .content>span:last-of-type {
        display: none
    }

    #contacto header h2 {
        font-size: 2em;
        margin-bottom: .2em
    }

    .contacto-container {
        margin: 25px 10px 25px 25px
    }

    .afiliacion-content {
        margin: 19% auto;
        height: 50%
    }

    .popup-footer p:first-of-type {
        font-size: 1.8em
    }

    .popup-footer p:last-of-type,
    .popup-header h3 {
        font-size: 1.2em
    }

    .popup-header p {
        font-size: .85em
    }

    #section-tda header {
        padding: 4.6em 0 .4em
    }

    #section-tda header h2 {
        font-size: 1.7em;
        line-height: 40px
    }

    #section-tda header h2 span {
        font-size: 1.2em
    }

    #section-tda article {
        margin: 40px auto
    }

    #planilla_tda {
        background: #E7E8E8;
        padding: 40px 0
    }

    .beneficiario-wrap {
        margin: 20px 8px
    }
}

@media screen and (max-width:920px) {
    header h1 {
        display: none
    }

    .fixed-nav {
        padding: 7px 0
    }

    nav>ul>li {
        padding: 0
    }

    nav div.afiliado {
        margin-right: 15px
    }

    .slide {
        height: 70vh
    }

    .nosotros-info h2 {
        font-size: 2em
    }

    .nosotros-info span {
        font-size: .6em;
        line-height: 14px
    }

    .nosotros-info blockquote {
        font-size: .85em
    }

    .nosotros-info blockquote:before {
        font-size: 1.5em;
        left: -16px
    }

    .nosotros-info blockquote cite {
        font-size: 12px
    }

    .nosotros-info p {
        font-size: .8em;
        line-height: 17px
    }

    .contenido {
        padding: 22px
    }

    .contenido h3 {
        font-size: 1.1em;
        margin-bottom: 10px
    }

    .contenido p {
        font-size: .77em;
        margin-bottom: 12px
    }

    .contenido svg {
        font-size: 1.2em
    }

    #nosotros footer {
        font-size: .85em
    }

    .membresia header {
        font-size: 1.4em
    }

    .call-center h2 {
        font-size: 2.8em
    }

    .call-center p {
        font-size: 1em;
        margin: 25px 0;
        line-height: 25px
    }

    #contacto header {
        padding: 85px 10% 20px
    }

    #contacto header h2 {
        font-size: 1.6em;
        margin-bottom: 0
    }

    .contacto-container h3 {
        font-size: 2em
    }

    .contacto-container section>p {
        font-size: .8em
    }

    #escribenos {
        font-size: .9em
    }

    .contacto-tel {
        font-size: 1em;
        line-height: 23px
    }

    .contacto-container aside {
        width: 50%
    }

    .afiliacion-content,
    .cedula-date .row2 input {
        width: 80%
    }

    .edad-civil .row1 div:last-of-type {
        margin-left: 30px
    }

    .edad-civil .row1 div input {
        width: 110%
    }

    .direccion-tel .row1 div:first-of-type input {
        width: 80%
    }

    .autocomplete-country input {
        width: 127%
    }

    .tel-cel,
    .tel-hab {
        width: 90%
    }

    .email1 {
        width: 85%
    }

    .beneficiario-wrap input[type=number] {
        width: 17%
    }

    .servicio-tda {
        width: 47%
    }
}

@media screen and (max-width:780px) {

    #escribenos input,
    #escribenos textarea,
    .contacto-container aside,
    .contacto-container section {
        width: 100%
    }

    .slide {
        height: 60vh
    }

    .txt-left,
    .txt-right {
        top: 10em
    }

    .txt-left {
        left: 2em
    }

    .caption h1 {
        font-size: 1.5em;
        line-height: 30px
    }

    .caption p {
        font-size: .9em;
        line-height: 20px
    }

    .btn-contacto {
        font-size: .65em
    }

    .quienes-somos {
        padding: 30px 30px 0
    }

    .nosotros-img img {
        display: none
    }

    .nosotros-info {
        width: 100%;
        padding: 30px;
        margin-bottom: 20px
    }

    #nosotros footer {
        font-size: .7em
    }

    .membresia article>h3 {
        font-size: 1.8em
    }

    .basico h3,
    .premium h3 {
        font-size: 1.6em
    }

    .basico h4,
    .premium h4 {
        font-size: 1.2em
    }

    .clientes h3 {
        font-size: 1.3em
    }

    .clientes p {
        font-size: .9em
    }

    .contacto-container {
        margin: 25px 10px 10px
    }

    .contacto-container section h3,
    .contacto-container section p {
        text-align: center
    }

    .contacto-container section {
        display: flex;
        flex-flow: column;
        align-items: center
    }

    #escribenos {
        width: 80%
    }

    .popup-header {
        padding: 0 10px
    }

    .popup-footer p:last-of-type {
        display: none
    }

    .popup-footer .tel {
        font-size: 1.2em
    }

    #section-tda article {
        margin: 20px auto
    }

    #planilla_tda button[type=submit] {
        top: 2em
    }
}

@media screen and (max-width:680px) {
    nav ul li a {
        font-size: .7em;
        margin: 0 5px
    }

    .slide {
        height: 60vh
    }

    .txt-left,
    .txt-right {
        top: 8em
    }

    .servicios {
        flex-wrap: wrap
    }

    .adicionales,
    .vial {
        border-left: none
    }

    .funerario,
    .vial {
        border-bottom: 4px solid #fff
    }

    .contenido {
        padding: 30px
    }

    #nosotros footer {
        display: block;
        line-height: 20px
    }

    .membresia h2,
    .membresia h3,
    .membresia h4 {
        line-height: 25px
    }

    .membresia h2 {
        font-size: 1.5em
    }

    .membresia h3 {
        font-size: 1.3em
    }

    .membresia h4 {
        font-size: 1em
    }

    .call-center {
        width: 85%
    }

    .call-center h2 {
        font-size: 2.3em
    }

    .call-center span {
        letter-spacing: 4px;
        font-size: .6em
    }

    #contacto header {
        padding-bottom: 10px
    }

    #contacto header h2 {
        font-size: 1.3em
    }

    #section-tda article h3 {
        font-size: 1.2em
    }

    #section-tda article p {
        font-size: .9em
    }

    .row2-info,
    .row3-info {
        margin: 0;
        position: relative;
        left: 10px
    }

    .row2-info.basic-name input {
        width: 92%
    }

    .cedula-date .row1 input {
        width: 70%
    }

    .cedula-date .row2 input {
        width: 92%
    }

    .row2-info.edad-civil {
        margin-top: 20px
    }

    .radiofset label:not(input) {
        font-size: .85em
    }

    .direccion-tel .row2 label {
        margin-bottom: 5px;
        margin-top: 20px
    }

    .direccion-tel .row1 div:first-of-type input,
    .direccion-tel textarea {
        width: 100%
    }

    .autocomplete-country input {
        width: 115%
    }

    .tel-cel,
    .tel-hab {
        width: 100%
    }

    .tel-cel input,
    .tel-hab input {
        width: 30%
    }

    .beneficiario-wrap input {
        width: 90%
    }

    .beneficiario-wrap div>input {
        width: 70%
    }

    .beneficiario-wrap input[type=number] {
        width: 26%
    }

    .servicio-tda {
        width: 100%
    }

    .servicio-tda label {
        font-size: .7em
    }
}

@media screen and (max-width:610px) {

    #page>footer div.content div,
    #page>footer p a,
    .caption p {
        display: none
    }

    nav .afiliado button.btn {
        background: 0 0;
        color: #fff;
        border: none;
        padding-top: 8px
    }

    .fixed-nav {
        padding: 2px
    }

    .slide {
        height: 55vh
    }

    .txt-left,
    .txt-right {
        top: 8em;
        width: 40%
    }

    .caption {
        margin-left: 10px
    }

    .caption h1 {
        font-size: 1.2em;
        line-height: 22px;
        margin-bottom: 15px
    }

    .btn-contacto {
        font-size: .55em
    }

    .basico img.tda,
    .premium img.tda {
        width: 150px
    }

    .logo-cl img {
        width: 100px
    }

    .clientes h3 {
        font-size: 1em
    }

    .clientes p {
        font-size: .7em
    }

    #page>footer .tel {
        font-size: 1em
    }

    #section-tda article {
        width: 90%
    }

    .basic-name,
    .bene-select,
    .beneficiarios,
    .cedula-date,
    .direccion-tel,
    .edad-civil {
        display: block;
        position: relative
    }

    .bene-select,
    .beneficiarios {
        top: -150px
    }

    .row2-info,
    .row3-info {
        left: 30px
    }

    .row1,
    .row2,
    .row3 {
        width: 45%
    }

    .row2-info.cedula-date {
        top: -115px;
        left: 275px
    }

    .cedula-date .row2 input {
        width: 80%
    }

    .row2-info.edad-civil {
        top: -100px
    }

    .edad-civil .row1 {
        position: relative;
        left: 120px
    }

    .edad-civil .row2 {
        left: 40px;
        position: relative;
        margin-top: 20px;
        text-align: center
    }

    .radiofset {
        flex-flow: row
    }

    .row2-info.direccion-tel {
        top: -60px
    }

    .row2-info.direccion-tel .row1 {
        width: 70%
    }

    .autocomplete-country input {
        width: 134%
    }

    .direccion-tel .row1 div:first-of-type input {
        width: 60%
    }

    .direccion-tel .row2 {
        position: relative;
        left: 230px;
        top: -140px
    }

    .tel-cel input,
    .tel-hab input {
        width: 25%
    }

    .email-plan {
        width: 73%;
        top: -156px;
        left: 30px;
        display: flex;
        float: none
    }

    #planilla_tda button[type=submit] {
        top: -10em
    }

    .beneficiario-wrap {
        width: 70%
    }

    .beneficiario-wrap input {
        width: 80%
    }

    .beneficiario-wrap input[type=number] {
        width: 15%
    }

    .beneficiario-wrap div>input {
        width: 45%
    }
}

@media screen and (max-width:580px) {

    .header-bg,
    nav ul li:active,
    nav ul li:focus,
    nav ul li:hover {
        background-color: #0085bc
    }

    .basico,
    .quienes-somos {
        border-bottom: 4px solid #fff
    }

    header[role=banner] div.social {
        margin-left: 0
    }

    header[role=banner] div.social>a {
        display: none
    }

    .menu-toggle,
    nav {
        display: block
    }

    header[role=banner] div.social>p>span {
        top: 5px;
        right: 0
    }

    .header-bg {
        width: 100%;
        position: fixed
    }

    .main-header {
        justify-content: space-around;
        align-items: center;
        padding: 7px 0
    }

    .hamburguer button {
        cursor: pointer;
        margin: 0
    }

    nav {
        position: absolute;
        right: 0;
        top: 95%;
        height: 0;
        overflow: hidden
    }

    .main-nav-open {
        height: 100vh
    }

    nav ul {
        background-color: #7E7F9A;
        width: 100%;
        text-align: center;
        padding: 0
    }

    nav ul li {
        float: none;
        padding: 0 0 15px
    }

    nav ul li a {
        padding: 15px 0 0;
        transition: background ease-in-out .5s;
        font-size: .85em
    }

    nav li a span.afiliados {
        display: inline-block
    }

    #page>footer>p,
    .bx-next,
    .bx-prev,
    nav div.afiliado {
        display: none
    }

    .fixed-nav {
        padding: 0;
        position: static
    }

    .slide {
        height: 45vh
    }

    .quienes-somos {
        padding: 0
    }

    .nosotros-info {
        margin: 0;
        padding-bottom: 20px
    }

    .membresia article {
        padding: 35px 0 0
    }

    .planes {
        flex-flow: column
    }

    .basico,
    .premium {
        width: 100%;
        height: auto;
        margin: 25px 0 0
    }

    .basico {
        border-right: none
    }

    #contacto header {
        padding-top: 55px
    }

    .afiliacion-content {
        width: 95%
    }

    .popup-header h3 {
        font-size: 1em
    }

    .popup-header p {
        font-size: .75em
    }

    #section-tda header {
        padding: 3.2em 0 .4em
    }

    #section-tda header h2 {
        font-size: 1.4em;
        line-height: 30px
    }

    #section-tda header h2 span {
        font-size: 1em
    }
}

@media screen and (max-width:530px) {
    .afiliacion-content {
        display: block
    }

    .popup-footer,
    .popup-header {
        width: 100%;
        height: 50%
    }

    .popup-header h3 {
        font-size: 1.3em
    }

    .popup-header p {
        font-size: 1em
    }

    .closepopup {
        color: #fff;
        top: -150px
    }

    .row2-info.cedula-date {
        left: 245px
    }

    .direccion-tel textarea {
        width: 80%
    }

    .direccion-tel .row1 div:first-of-type input {
        width: 50%
    }

    .autocomplete-country input {
        width: 100%
    }

    .direccion-tel .row2 {
        left: 190px
    }

    .email-plan {
        width: 80%
    }
}

@media screen and (max-width:490px) {

    .caption h1,
    .membresia h2,
    .membresia h3,
    .membresia h4 {
        line-height: 18px
    }

    #contacto header h2,
    #nosotros footer span.subtitulo,
    .caption a[title=nosotros] {
        display: none
    }

    .tel {
        font-size: .8em
    }

    .logo a img {
        width: 6em;
        margin: 0
    }

    header[role=banner] div.social {
        padding-bottom: 5px
    }

    .slide {
        height: 40vh
    }

    .txt-left,
    .txt-right {
        top: 6em
    }

    .caption h1 {
        font-size: 1em
    }

    #nosotros footer p {
        font-size: 2em
    }

    .membresia header {
        padding: 40px 0
    }

    .membresia h2 {
        font-size: 1.2em
    }

    .membresia h3 {
        font-size: .8em
    }

    .membresia article>h3 {
        font-size: 1.3em;
        margin-bottom: 0
    }

    .membresia article ul {
        margin-bottom: 0;
        margin-top: 5px;
        font-size: .8em;
        line-height: 23px
    }

    .membresia article ul button {
        margin-top: 15px
    }

    .basico h3,
    .premium h3 {
        font-size: 1.2em;
        line-height: 27px
    }

    .basico h4,
    .premium h4 {
        font-size: .9em
    }

    .call-center h2 {
        font-size: 1.8em
    }

    #contacto header {
        padding: 19px 0
    }

    .contacto-container h3 {
        font-size: 1.9em
    }

    .row2-info.cedula-date {
        left: 225px
    }

    .cedula-date .row2 input {
        width: 90%
    }

    .edad-civil .row1 {
        left: 80px
    }

    .edad-civil .row2 {
        left: 10px
    }

    .direccion-tel .row1 div:first-of-type input {
        width: 55%
    }

    .direccion-tel .row2 {
        left: 175px
    }
}

@media screen and (max-width:470px) {

    .basic-name,
    .bene-select,
    .beneficiarios,
    .cedula-date,
    .direccion-tel,
    .direccion-tel .row2,
    .edad-civil,
    .email-plan {
        position: static
    }

    .row1,
    .row2,
    .row3 {
        width: 80%;
        margin: 10px 10px 10px 40px
    }

    .cedula-date .row1 input {
        width: 50%
    }

    .cedula-date .row2 input {
        width: 60%
    }

    .edad-civil .row1,
    .edad-civil .row2 {
        left: 60px;
        text-align: left
    }

    .radiofset {
        flex-flow: column
    }

    .direccion-tel {
        margin-top: 25px
    }

    .direccion-tel textarea {
        width: 100%
    }

    .direccion-tel .row1 div input,
    .direccion-tel .row1 div:first-of-type input {
        width: 70%
    }

    .autocomplete-country {
        display: block
    }

    .email-plan {
        width: 80%;
        margin: 30px 10px 10px 40px
    }

    .bene-select {
        margin-left: 10px;
        padding: 0 12px
    }

    .beneficiario-wrap {
        width: 85%;
        margin-left: 30px
    }

    #planilla_tda button[type=submit] {
        position: static;
        float: right;
        margin: 0 20px 20px 0
    }
}

@media screen and (max-width:420px) {
    .slide {
        height: 35vh
    }

    div.slide:nth-of-type(2) {
        background: url(../images/slider/1-mobile.png) center center no-repeat;
        background-size: cover
    }

    .caption h1 {
        font-size: .8em;
        line-height: 15px;
        margin-bottom: 7px
    }

    .caption a {
        font-size: .5em
    }

    .txt-left,
    .txt-right {
        top: 5em
    }

    .txt-right {
        right: 0
    }

    .txt-left {
        left: 0
    }

    #call-center article {
        height: 60vh
    }

    .call-center h2 {
        font-size: 1.2em
    }

    .call-center p {
        font-size: .8em;
        margin: 15px 0;
        line-height: 16px
    }

    .membresia header {
        padding: 22px 0
    }

    .membresia header h2 {
        font-size: 1em
    }

    .membresia header h3 {
        font-size: .65em
    }

    .clientes {
        display: none
    }

    footer {
        padding: 20px
    }

    #page>footer span.tel {
        font-size: .8em
    }

    #page>footer div.content p {
        font-size: .85em;
        line-height: 12px
    }

    #escribenos {
        width: 90%
    }
}

@media screen and (max-width:360px) {

    .call-center span,
    .nosotros-info,
    header[role=banner] div.social>p>span {
        display: none
    }

    .hamburguer button.btn-menu {
        font-size: .65em;
        padding: 5px
    }

    .slide {
        height: 35vh
    }

    .quienes-somos {
        border: none
    }

    .popup-header h3 {
        font-size: 1.1em
    }

    .popup-header p {
        font-size: .85em
    }

    .closepopup {
        font-size: 1.5em
    }

    .cedula-date .row1 input {
        width: 70%
    }

    .cedula-date .row2 input {
        width: 75%
    }

    .beneficiario-wrap,
    .direccion-tel .row1 div input,
    .direccion-tel .row1 div:first-of-type input,
    .email-plan input {
        width: 100%
    }

    .edad-civil .row1,
    .edad-civil .row2 {
        left: 10px
    }

    .direccion-tel .row2 {
        margin-left: 8px
    }

    .email-plan {
        display: block;
        margin: 30px 10px 10px 15px
    }

    #infotda-open {
        display: none
    }
}

.error-msg {
    color: rgb(211, 65, 65);
    display: block;
}