/*  
Cliente: TOI Expertos Hipotecarios
Cliente URL: http://toi.com.mx
Descripción: TOI expertos en crédito hipotecario, crédito para casa, franquicias en México, ¡haz que tu crédito te guste tanto como tu hogar!.
Versión: 3.0
Autor: Ministerio
Autor URL: http://ministerio.mx
*/


/* GENERALES		  ///////////////////////////////////////////////////*/
body {
    font-family: "AkzidenzGrotesk-Light", Arial, Helvetica, sans-serif;
    font-size: 1em; /* 16px */
    line-height: 1.25;
    color: #67686B;
    background: #fff;
}

* {
    -webkit-box-sizing: border-box;
            box-sizing: border-box; 
}

a {
    color: #67686B;
    text-decoration: none;
    -webkit-transition: all ease-out .3s;
            transition: all ease-out .3s;
    cursor: pointer;
}

a:hover,
header nav a.activo,
header.fijo nav a:hover,
article a,
header.fijo nav a.activo,
.inicio .pasos h2,
.nosotros .socios h4,
.contacto .info h1,
.contacto .info h3,
.contacto .oficinas h3,
.medios h1,
.medios h3,
.privacidad h1,
.error404 h1,
.formulario h1,
footer li:first-child,
.rojo {
    color: #E66230;
}

img {
    vertical-align: bottom;
}

hr {
    border: 0;
    border-bottom: 1px solid #ccc;
}

.centrar {
    width: 960px;
    overflow: hidden;
    margin: 0 auto;
    padding: 0 10px;
}

.registrado {
    font-size: 50%;
}

.clear {
    clear: both;
}

article a:hover {
    color: #67686B;
}



/* WIDGET   		  ///////////////////////////////////////////////////*/
.app {
    position: fixed;
    right: 0;
    top: 46%;
    font-family: "AkzidenzGrotesk-Regular", Arial, Helvetica, sans-serif;
    font-size: 14px;
    text-align: center;
    border-radius: 5px 0 0 5px;
    background: rgba(255,255,255,.75);
    z-index: 5;
}

.nG-FTke3 {
    position: relative !important;
    right: 0 !important;
    bottom: 0 !important;
    padding: 0 10px 5px 10px;
}

._3xwcBf9x {
    top: 275px !important;
    right: 110px !important;
    left: 0 !important;
    height: 500px !important;
    border-radius: 5px !important;
}

.cotiza {
    padding: 5px 10px 0 10px;
}



/* TEXTOS   		  ///////////////////////////////////////////////////*/
h1, h2, h3, h4, h5, h6 {
    font-family: "AkzidenzGrotesk-BoldCond", Arial, Helvetica, sans-serif;
}

h1 {
    font-size: 2.25em;
    text-transform: uppercase;
}

h2 {
    font-size: 2em;
}

h3 {
    font-size: 1.75em;
}

h4 {
    font-size: 1.5em;
}

h5 {
    font-size: 1.25em;
}

h6 {
    font-size: 1.1em;
}

p {
    margin-bottom: 15px;
}

.simargenbottom {
    margin-bottom: 20px;
}

.nomargenbottom {
    margin-bottom: 0;
}

strong {
    font-family:"AkzidenzGrotesk-Bold", Arial, Helvetica, sans-serif;
}

.txt-light {
    font-family: "AkzidenzGrotesk-Light", Arial, Helvetica, sans-serif;
}

.txt-lightcond {
    font-family: "AkzidenzGrotesk-LightCond", Arial, Helvetica, sans-serif;
}

.txt-regular {
    font-family: "AkzidenzGrotesk-Regular", Arial, Helvetica, sans-serif;
}

.txt-regularcond {
    font-family: "AkzidenzGrotesk-Cond", Arial, Helvetica, sans-serif;
}

.txt-medium {
    font-family: "AkzidenzGrotesk-Medium", Arial, Helvetica, sans-serif;
}

.txt-mediumcond {
    font-family: "AkzidenzGrotesk-MediumCond", Arial, Helvetica, sans-serif;
}

.txt-bold {
    font-family: "AkzidenzGrotesk-Bold", Arial, Helvetica, sans-serif;
}

.txt-boldcond {
    font-family: "AkzidenzGrotesk-BoldCond", Arial, Helvetica, sans-serif;
}



/* BOTONES   		  ///////////////////////////////////////////////////*/
a.boton,
a.boton-chico {
    display: inline-block;
    padding: 15px 35px 13px 35px;
    font-family: "AkzidenzGrotesk-BoldCond", Arial, Helvetica, sans-serif;
    font-size: 2.25em;
    text-transform: uppercase;
    color: #fff;
    -webkit-border-radius: 8px;
            border-radius: 8px;
    box-shadow: 0 0 5px rgba(0, 0, 0, .25);
    background: #E66230;
}

a:hover.boton,
a:hover.boton-chico {
    color: #fff;
    background: #67686B;
}

a.boton-chico {
    padding: 8px 15px;
    font-family: "AkzidenzGrotesk-Light", Arial, Helvetica, sans-serif;
    font-size: 1em;
    text-align: center;
    text-transform: none;
}



/* FORMULARIOS   	  ///////////////////////////////////////////////////*/
input[type="text"],
input[type="email"],
input[type="password"],
input[type="submit"],
input[type="reset"],
textarea,
select {
    width: 100%;
    height: 30px;
    margin: 3px 0 20px 0;
    padding: 4px 8px;
    font-family: "AkzidenzGrotesk-Light", Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: #67686B;
    border: 1px solid #ccc;
    border-radius: 5px;
    outline: none;
    resize: none;
    background: #fff;
}

input[type="submit"],
input[type="reset"] {
    height: 35px;
    font-family: "AkzidenzGrotesk-Medium", Arial, Helvetica, sans-serif;
    font-size: 1.1em;
    letter-spacing: 1px;
    color: #fff;
    border: 0;
    cursor: pointer;
    -webkit-transition: all ease-out .3s;
            transition: all ease-out .3s;
    -webkit-appearance: none;
            appearance: none;
    background: #E66230;
}

input[type="reset"] {
    color: #67686B;
    border: 1px solid #67686B;
    background: #fff;
}

input[type="submit"]:hover,
input[type="reset"]:hover {
    color: #fff;
    background: #67686B;
}

input[type="radio"] {
    margin-bottom: 20px;
}

textarea {
    height: 80px;
}

label {
    clear: both;
    display: block;
}

select.dia,
select.mes,
select.ano {
    width: 25%;
    float: left;
}

select.mes {
    width: 48%;
    margin-right: 1%;
    margin-left: 1%;
}

label.error {
    display: none !important;
}

input[type="text"].error,
input[type="email"].error,
input[type="password"].error,
input[type="submit"].error,
input[type="reset"].error,
textarea.error,
select.error {
    color: #fff;
    background: #E66230;
}

.formulario h1 {
    margin-bottom: 10px;
}

.formulario input[type="submit"],
.formulario input[type="reset"] {
    width: 50%;
    float: left;
    margin: 15px 0 15px 2%;
}

.formulario input[type="reset"] {
    width: 48%;
    margin-left: 0;
}

.formulario .col {
    width: 49%;
    float: left;
    margin-top: 25px;
}

.formulario .col + .col {
    float: right;
}



/* HEADER   		  ///////////////////////////////////////////////////*/
header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 0 15px 0;
    overflow: hidden;
    background: -webkit-linear-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, .0));
    background:         linear-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, .0));
    z-index: 6;
}

header figure {
    width: 130px;
    float: left;
}

header figure img,
.testimonios figure img,
.poster img {
    width: 100%;
}

header nav {
    float: right;
    margin: 22px 0 0 30px;
}

header nav li {
    display: inline-block;
    margin: 0 10px;
    font-family: "AkzidenzGrotesk-Cond", Arial, Helvetica, sans-serif;
    font-size: 1.25em;
    text-transform: uppercase;
}

header nav a {
    color: #fff;
}

header nav p,
header.fijo,
.poster {
    display: none;
}



/* HEADER FIJO   	  ///////////////////////////////////////////////////*/
header.fijo {
    padding: 10px 0 5px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .25);
    background: #fff;
    z-index: 7;
}

header.fijo figure {
    width: 100px;
    float: left;
    margin-left: 30px;
}

header.fijo nav {
    margin-top: 12px;
}

header.fijo nav a {
    color: #67686B;
}

.nav-clone {
    position: fixed;
    top: 0;
    left: 0;
    display: block !important;
    -webkit-transform: translateY(-150%);
            transform: translateY(-150%);
    -webkit-transition: all 300ms ease-in-out;
            transition: all 300ms ease-in-out;
    z-index: 5;
}

.nav-stick {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
}

.nav-unstick {
}



/* BANNERS         	  ///////////////////////////////////////////////////*/
html,
body,
.banner-mejora,
.banner-construye,
.banner-liquidez {
    height: 100%;
}

.banner {
    height: 300px;
    overflow: hidden;
}

.banner img {
    width: 100%;
    margin-top: -50px;
}

.banner-mejora {
    background: url(../images/banners/mejora-credito.jpg) center top no-repeat;
    background-size: cover;
}

.banner-construye {
    background: url(../images/banners/construye-tu-casa.jpg) center top no-repeat;
    background-size: cover;
}

.banner-liquidez {
    background: url(../images/banners/liquidez.jpg) center top no-repeat;
    background-size: cover;
}

.banner-mejora figure,
.banner-construye figure,
.banner-liquidez figure {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 20px;
    width: 50px;
    margin: 0 auto;
}

.slide-movil {
    display: none;
}



/* INICIO   		  ///////////////////////////////////////////////////*/
.inicio {
    text-align: center;
}

.inicio h1 {
    line-height: 1.1;
}

.inicio .intro,
.inicio .pasos,
.inicio .credito,
.beneficios section,
.beneficios .tipos .tabbody,
.patrocinador section,
.contacto section,
.contacto .oficina,
.privacidad section,
.formulario section,
.error404 section {
    padding: 50px 0;
}

.inicio .intro h5 {
    margin-top: 10px;
    font-family: "AkzidenzGrotesk-Light", Arial, Helvetica, sans-serif;
}

.inicio .pasos {
    background: #f5f5f5;
}

.inicio .pasos h2 {
    margin: 25px 0 35px 0;
}

.inicio .pasos .circulos h3 {
    font-family: "AkzidenzGrotesk-Bold", Arial, Helvetica, sans-serif;
    font-size: 6.25em;
    line-height: 1;
}

.inicio .pasos .circulos h4 {
    margin: 0 0 10px 0;
    font-size: 1.5em;
    text-transform: uppercase;
    line-height: 1;
}

.inicio .pasos .circulos h5 {
    font-family: "AkzidenzGrotesk-LightCond", Arial, Helvetica, sans-serif;
    font-size: 1.25em;
}

.inicio .pasos .circulos div {
    width: 215px;
    height: 215px;
    display: inline-block;
    margin: 0 30px 10px 30px;
    padding-top: 10px;
    color: #fff;
    vertical-align: top;
    -webkit-border-radius: 50%;
            border-radius: 50%;
    box-shadow: 0 0 5px rgba(0, 0, 0, .25);
    background: #E66230;
}

.inicio .simulador p {
    margin: 20px 0;
}

.inicio .simulador div {
    margin: 45px 0;
}

.inicio .simulador div,
.simuladoriframe {
    width: 100%;
    overflow: hidden;
}

.inicio .simulador iframe,
.simuladoriframe iframe {
    width: 100%;
    height: 600px;
    margin-top: -65px;
    border: none;
}

.inicio .credito {
    color: #fff;
    background: #67686B;
}

.inicio .credito a:hover.boton {
    color: #67686B;
    background: #fff;
}

.inicio .credito h2 {
    margin-bottom: 25px;
    text-transform: uppercase;
}

.inicio .credito .video,
.beneficios .tipos .video {
    margin-bottom: 25px;
}

.inicio .credito .video iframe,
.beneficios .tipos .video iframe {
    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
}



/* BENEFICIOS   	  ///////////////////////////////////////////////////*/
.beneficios {
    text-align: center;
}

.beneficios h1 {
    margin-bottom: 50px;
}

.beneficios h3 {
    font-family: "AkzidenzGrotesk-LightCond";
}

.beneficios .uso {
    color: #fff;
    background: #67686B;
}

.beneficios .uso .col {
    width: 290px;
    display: inline-block;
    margin: 0 10px;
    vertical-align: top;
}

.beneficios .uso figure {
    margin-bottom: 25px;
}

.beneficios .uso img {
    height: 100px;
}

.beneficios .tipos {
    padding: 0;
}

.beneficios .tipos h2 {
    margin-bottom: 25px;
    text-transform: uppercase;
}

.beneficios .tipos li {
    width: 140px;
    height: 140px;
    overflow: hidden;
    display: inline-block;
    margin: 0 20px;
    -webkit-border-radius: 50%;
            border-radius: 50%;
    box-shadow: 0 0 5px rgba(0, 0, 0, .25);
    background: #E66230;
}

.beneficios .tipos li a {
    height: 100%;
    display: block;
    padding-top: 20px;
    font-family: "AkzidenzGrotesk-BoldCond";
    font-size: 1.125em;
    text-transform: uppercase;
    color: #fff;
}

.beneficios .tipos li a:hover,
.beneficios .tipos li.current {
    background: #67686B;
}

.beneficios .tipos li img {
    height: 55px;
    margin-bottom: 12px;
}

.beneficios .tipos li:nth-child(3) img {
    margin-bottom: 3px;
}

.beneficios .tipos .tabbody {
    margin-top: 50px;
    background: url(../images/plantas2.jpg) center center no-repeat;
    background-size: cover;
}

.current-info,
.accessibletabsanchor,
.tabhead {
	position: absolute;
	left: -999em;
}

.content,
.clear {
	clear: both;
}



/* MEDIOS   		  ///////////////////////////////////////////////////*/
.medios h1,
.medios h3,
.privacidad h1,
.formulario h1,
.formulario h4,
.patrocinador h3,
.error404 h1 {
    text-align: center;
}

.medios h1 {
    margin-bottom: 40px;
}

.medios h3 {
    margin-bottom: 10px;
}

.medios section {
    padding-top: 50px;
}

.medios .col,
.patrocinador .col {
    width: 30%;
    display: inline-block;
    margin: 0 1.5% 35px 1.5%;
    vertical-align: top;
}

.medios .col img,
.patrocinador img {
    width: 100%;
    -webkit-transition: all ease-out .3s;
            transition: all ease-out .3s;
}

.medios .col img:hover,
.patrocinador img:hover {
    opacity: .75;
}

.medios .video,
.formulario .video,
.banner-video .video {
    position: relative;
    height: 0;
    margin-bottom: 35px;
    padding-bottom: 56.25%;
}

.banner-video .video {
    margin-bottom: 0;
}

.medios .video iframe,
.medios .video object,
.medios .video embed,
.formulario .video iframe,
.formulario .video object,
.formulario .video embed,
.banner-video .video iframe,
.banner-video .video object,
.banner-video .video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.medios section figure {
    margin-bottom: 15px;
    text-align: center;
}

.medios section figure img {
    width: 100%;
}

.medios ul {
    margin-bottom: 40px;
}

.medios li {
    width: 23%;
    display: inline-block;
    margin: 10px 1% 10px 0;
}

.medios li img {
    width: 100%;
}



/* PATROCINADOR 	  ///////////////////////////////////////////////////*/
.patrocinador h3,
.patrocinador li {
    margin-bottom: 5px;
}

.patrocinador .col {
    width: 48%;
    margin: 0 0 35px 0;
}

.patrocinador .col + .col {
    margin-left: 2%;
}

.patrocinador li {
    width: 16%;
    display: inline-block;
}


/* NOSOTROS 		  ///////////////////////////////////////////////////*/
.nosotros .info {
    display: table;
}

.nosotros h1,
.nosotros .info h3 {
    margin-bottom: 20px;
    text-align: center;
}

.nosotros .historia,
.nosotros .mapa {
    display: table-caption;
    padding: 35px 0;
    text-align: center;
}

.nosotros .info h3 {
    margin-bottom: 15px;
}

.nosotros .info .renglon,
.nosotros .exito .renglon,
.nosotros .asociacion .renglon {
    display: table-row;
}

.nosotros .info .col,
.nosotros .exito .col,
.nosotros .exito .col2,
.nosotros .asociacion .col,
.nosotros .asociacion .col2 {
    width: 33.33%;
    display: table-cell;
    padding: 50px;
    text-align: center;
    color: #fff;
    background: #67686B;
}

.nosotros .info .col:nth-child(even) {
    background: #E66230;
}

.nosotros .mapa {
    display: block;
}

.nosotros .socios {
    text-align: center;
}

.nosotros .socios li {
    display: inline-block;
    margin: 15px;
    vertical-align: top;
}

.nosotros .socios .ciudad {
    margin: 25px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
}

.nosotros .socios .ciudad:last-child {
    border-bottom: 0;
}

.nosotros .exito h3,
.nosotros .exito figure {
    margin: 35px 0;
    text-align: center;
}

.nosotros .exito .col,
.nosotros .exito .col2 {
    color: #67686B;
    background: #f5f5f5;
}

.nosotros .exito .col:nth-child(even),
.nosotros .exito .col2:nth-child(odd) {
    color: #67686B;
    background: #fff;
}

.nosotros .asociacion {
    overflow: hidden;
    margin-top: 25px;
    text-align: center;
}

.nosotros .asociacion h3 {
    margin: 25px;
}

.nosotros .asociacion h5 {
    margin: 25px 0;
}

.nosotros .asociacion hr {
    margin-bottom: 25px;
}

.nosotros .asociacion .col,
.nosotros .asociacion .col2 {
    width: 20%;
    padding: 30px;
    background: #67686B;
}

.nosotros .asociacion .col:nth-child(even),
.nosotros .asociacion .col2:nth-child(odd) {
    color: #67686B;
    background: #f5f5f5;
}



/* CONTACTO   		  ///////////////////////////////////////////////////*/
.contacto .info {
    padding: 0;
    overflow: hidden;
}

.contacto .info h1,
.contacto .info h2,
.contacto .info h3 {
    line-height: 1;
}

.contacto .info h1,
.contacto .info h3 {
    margin-bottom: 35px;
}

.contacto .info .col {
    width: 50%;
    float: left;
    padding: 50px 20px 0 20px;
    text-align: center;
}

.contacto .info .col + .col {
    padding: 0;
}

.contacto .info .boton {
    margin: 25px 0 5px 0;
}

.contacto .mapa {
    margin-top: -5px;
    text-align: center;
    color: #fff;
    background: #67686B;
}

.contacto .mapa h6 {
    margin-bottom: 15px;
}

.contacto .mapa svg,
.nosotros .mapa svg {
    width: 750px;
}

.contacto .oficinas {
    padding: 0;
    text-align: center;
}

.contacto .oficinas h3 {
    margin-bottom: 5px;
    font-family: "AkzidenzGrotesk-LightCond", Arial, Helvetica, sans-serif;
}

.contacto .oficina {
    display: none;
    overflow: hidden;
}

.contacto .oficina .col {
    width: 50%;
    float: left;
    margin: 10px 0;
    padding: 10px;
}

.contacto span {
    display: none;
}


/* HIPOTECA           ///////////////////////////////////////////////////*/
.hipoteca .centrar {
    width: 600px;
    text-transform: uppercase;
}

.hipoteca .info {
    position: relative;
    padding: 100px 0 185px 0;
    font-size: 3.5em;
    color: #E66230;
    text-align: center;
    background: #F9EEE9;
}

.hipoteca .info h1 {
    font-size: 2.65em;
    line-height: 0.8;
}

.hipoteca .centrar h3 {
    float: right;
    margin: 65px 75px 0 0;
    font-family: "AkzidenzGrotesk-Cond", Arial, Helvetica, sans-serif;
    font-size: .8em;
}

.hipoteca i {
    margin-top: 9px;
    font-size: .7em;
    vertical-align: top;
}

.hipoteca .cotizahipo {
    position: absolute;
    top: 375px;
    right: 0;
    left: 0;
    width: 150px;
    height: 150px;
    margin: 0 auto;
    text-align: center;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.25);
    border-radius: 25px;
    background: #fff;
}

.hipoteca .widget-icon {
    position: relative;
    bottom: 0;
    right: 0;
    left: 30px;
    top: 30px;
}

.hipoteca + footer {
    background: #F9EEE9;
}



/* ARTICULOS          ///////////////////////////////////////////////////*/
.simuladoriframe {
    margin: 25px 0 15px 0;
}



/* ENCUESTA           ///////////////////////////////////////////////////*/
.encuesta #otromedio,
#otromunicipio,
#siidentificado {
    display: none;
}

.check {
    display: inline-block;
    margin: 10px 10px 20px 0;
}
.check input[type="radio"] {
	/*display: none;*/
    opacity: 0;
    filter: opacity(0);
}

.check input[type="radio"] {
    cursor: pointer;
}

.check input[type="radio"]:checked + label,
.check input[type="radio"]:checked + label + label {
    background: #ccc;
}

.check input[type="radio"].error + label,
.check input[type="radio"].error + label + label {
    background: #E66230;
}

.check label {
    width: 32px;
	height: 32px;
    display: block;
    margin-top: -28px;
    -webkit-border-radius: 50%;
            border-radius: 50%;
    -webkit-transition: all ease-out .3s;
            transition: all ease-out .3s;
    cursor: pointer;
}

.check label.memorable {
    background: #00C000;
}

.check label.bueno {
    background: #0f0;
}

.check label.neutral {
    background: #ff0;
}

.check label.malo {
    background: #FFA000;
}

.check label.pesimo {
    background: #f00;
}

.check label.error {
    display: none;
}



/* PRIVACIDAD         ///////////////////////////////////////////////////*/
.privacidad h1,
.privacidad ul,
.error404 h1 {
    margin-bottom: 20px;
}

.privacidad ul {
    margin-left: 30px;
}


/* ERROR 404          ///////////////////////////////////////////////////*/
.error404 a {
    margin: 0 20px;
}

.error404 section {
    text-align: center;
}

.error404 section figure {
    width: 550px;
    margin: 0 auto 35px auto;
}

.error404 section figure img {
    width: 100%;
}



/* FOOTER         	  ///////////////////////////////////////////////////*/
footer {
    padding: 20px 0 10px 0;
    font-size: .875em;
    line-height: 1.5;
    background: #F0F0F0;
}

footer section + section {
    overflow: hidden;
    margin-top: 15px;
}

footer ul {
    width: 220px;
    display: inline-block;
    margin: 0 15px 15px 0;
    vertical-align: top;
}

footer ul:last-child {
    margin-right: 0;
}

footer li:first-child {
    margin-bottom: 5px;
    font-family: "AkzidenzGrotesk-MediumCond";
    font-size: 1.857em;
    text-transform: uppercase;
}

footer .social {
    width: auto;
    float: right;
    margin: 0;
}

footer .social li {
    display: inline-block;
    margin-right: 10px;
    font-size: 2em;
}

footer p {
    float: left;
    margin-top: 15px;
}

footer span {
    text-transform: uppercase;
}