/*@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);*/
/* CSS Document */
@font-face {font-family: 'Avenir-Black';src: url('../fonts/Avenir-Black.eot');src: url('../fonts/Avenir-Black.eot?#iefix') format('embedded-opentype'),url('../fonts/Avenir-Black.woff') format('woff'),url('../fonts/Avenir-Black.ttf') format('truetype'),url('../fonts/Avenir-Black.svg#Avenir-Black') format('svg');font-weight: normal;font-style: normal;}
@font-face {font-family: 'Avenir-Roman';src: url('../fonts/Avenir-Roman.eot');src: url('../fonts/Avenir-Roman.eot?#iefix') format('embedded-opentype'),url('../fonts/Avenir-Roman.woff') format('woff'),url('../fonts/Avenir-Roman.ttf') format('truetype'),url('../fonts/Avenir-Roman.svg#Avenir-Roman') format('svg');font-weight: normal;font-style: normal;}
@font-face { font-family: 'latobold'; src: url('../fonts/lato-bold.eot'); src: url('../fonts/lato-bold.eot?#iefix') format('embedded-opentype'), url('../fonts/lato-bold.woff') format('woff'), url('../fonts/lato-bold.ttf') format('truetype'), url('../fonts/lato-bold.svg#latobold') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'latoregular'; src: url('../fonts/lato-regular.eot'); src: url('../fonts/lato-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/lato-regular.woff') format('woff'), url('../fonts/lato-regular.ttf') format('truetype'), url('../fonts/lato-regular.svg#latoregular') format('svg'); font-weight: normal; font-style: normal; }

html{ overflow-y:auto; height:100%; background:#FFFFFF; }
body{ margin:0px; padding:0px; text-align:center; color:#504b40; font-size:100%; font-family: 'Open Sans', sans-serif; font-weight:400; line-height:1.456; height:100%; }
p{ margin: 0 auto 1em auto; }
form{ margin:0px; padding:0px; }
img{ border:0px; }
input{ font-size:100%; font-family: 'Open Sans', sans-serif; line-height:1.456;}
textarea{ font-size:100%; font-family: 'Open Sans', sans-serif; line-height:1.456;}
h1, h2, h3{ margin:0; padding:0; }
a{ color:#504b40; }

/* estandar */
.linea{ clear:both; height:1px; font-size:0px; line-height:0; }
.margen{ min-width:900px; margin:0 auto; padding:0px 10px;}
.centrado{ margin:0 auto; width:auto; display:inline-block; *vertical-align:middle; *display: inline; }
.contenido_iniciar{ height:100%; display:table; width:100%; }
.contenido_iniciar .enlace_iniciar{ height:100%; width:100%; text-align: center; display:table-cell; vertical-align:middle;  }
.horizontal{ padding:0px 10px; }

.login{ min-width:900px; height:100%; }
.login .logo{ float:left; display:inline; width:50%; height:100%; background:url(../img/login/textura.png) #4F4B40 left top; }
.login .logo .centrado .div{ max-width:300px; }
.login .forma{  float:left; display:inline; width:100%; height:100%; background: #faf8f1; position: relative;}
.login .forma .imagen{ -moz-border-radius: 15px; border-radius: 15px; margin-bottom:20px; max-height:150px; width:auto;}
.login .forma form{ text-align:center; }
.login .forma table{ }
.login .forma table tr{}
.login .forma table tr td{ text-align:center; }
.login .forma table tr td img{ float:left; margin-left:195px;}
.login .forma table tr td .entrada{ width:300px; margin: 5px 0; padding:0 10px; background: transparent; border-bottom: solid 2px #f23e45; }
.login .forma table tr td .entrada2{ width:300px; margin: 5px 0; padding:0 10px; background: transparent;}
.login .forma table tr td .entradaS{ width:150px; margin-left:-178px; margin-top:20px; padding:0 10px; background:#EAF3FA;  }
.login .forma table tr td input{ border:0; width:100%; background:transparent; padding:10px 0; font-family: Avenir-Roman, sans-serif; font-size: 21px; color: #878787;}
.login .forma table tr td input.boton{ background:#f77a3c; border:0; cursor:pointer; width:320px; height: 50px; color:#FFF; text-transform: capitalize; margin-top: 25px; font-family: Avenir-Black, sans-serif; font-size:21px; border-radius: 2.5px; box-shadow: 1.5px 1.5px 3px 0 rgba(0, 0, 0, 0.15);}
.login .forma table tr td .espacio{ /*margin-bottom:35px;*/ }

.lightbox{ display:none; position:fixed; top:0%; left:0%; width:100%; height:100%; background-color:rgba(0,0,0,0.5); background:url(../img/sitio/lightbox.png)\0/; *background:url(../img/sitio/lightbox.png); z-index:1000 !important; text-align:center; font-size:0.875em; }
.lightbox .lightbox_content{ width:280px; height:auto; position:absolute; top:50%; left:50%; margin-left:-140px; margin-top:0px; background:#FFFFFF; padding:0px 0px; text-align:left; color:#333; }
.lightbox .lightbox_content .alerta{ background-position:15px center; padding:25px; /*padding-left:100px;*/  }
.lightbox .lightbox_content .error{  background-position:15px center; border-radius: 2.5px; box-shadow: 1.5px 1.5px 3px 0 rgba(0, 0, 0, 0.15);}
.lightbox .lightbox_content .exito{  background-position:15px center; border-radius: 2.5px; box-shadow: 1.5px 1.5px 3px 0 rgba(0, 0, 0, 0.15);}
.lightbox .lightbox_content .alerta .bloque_titulo{ box-shadow:none; -moz-border-radius:0px; border-radius:0; padding:0; font-weight:700; font-size:16px; padding-bottom:5px; font-family: Avenir-Roman, sans-serif;}
.lightbox .lightbox_content .alerta .bloque_subtitulo{background:none; color:#000; padding:0px 0px; }
.lightbox .lightbox_content .alerta .bloque_content { padding:0px 0px 5px 0px; font-family: Avenir-Roman, sans-serif; font-size: 16px; }
.lightbox .lightbox_content .alerta .bloque_content ul{ margin-top:0; margin-bottom:0; }
.lightbox .lightbox_content .boton{ background:#f77a3c; border:0; cursor:pointer; width:auto; height:auto; color:#FFF; text-transform:uppercase; margin-top:14px; padding:10px; font-family: Avenir-Black, sans-serif; font-size: 16px; border-radius: 2.5px; box-shadow: 1.5px 1.5px 3px 0 rgba(0, 0, 0, 0.15);}

input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #EAF3FA inset; }
input:-moz-autofill { -moz-box-shadow: 0 0 0px 1000px #EAF3FA inset; }
input:-o-autofill { -o-box-shadow: 0 0 0px 1000px #EAF3FA inset; }
input:-khtml-autofill { -khtml-box-shadow: 0 0 0px 1000px #EAF3FA inset; }
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #878787; opacity: 1; /* Firefox */ }
:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #878787; }
::-ms-input-placeholder { /* Microsoft Edge */ color: #878787; }
input:focus, input.form-control:focus {outline:none !important; outline-width: 0 !important; box-shadow: none;-moz-box-shadow: none;-webkit-box-shadow: none;}

.ico_notificacion{ background:url(../img/sitio/notificaciones.png) no-repeat left center; width:36px; height:36px; position:relative; float:left; display:inline; margin-right:15px;  }
.ico_notificacion .numero{ -moz-border-radius:10px; border-radius:10px; background:#e83c43; color:#FFFFFF;  width:auto; height:auto; position:absolute; top:0; left:50%; padding:0 5px; font-size:11px; font-family: Avenir-Black, sans-serif;}
.ico_notificacion2{ background-position:right center;  }

.ico_mensaje{ background:url(../img/sitio/mensajes.png) no-repeat left center; width:36px; height:36px; position:relative; float:left; display:inline; margin-right:15px;   }
.ico_mensaje .numero{ -moz-border-radius:10px; border-radius:10px;  background:#FFF; color:#e83c43;  width:auto; height:auto; position:absolute; top:0; left:65%; padding:0 5px; font-size:11px; font-family: Avenir-Black, sans-serif;}
.ico_mensaje2{ background-position:right center;  }
.ico_mensaje2 .numero{ background:#e83c43; color:#FFFFFF;  }

.columnas{ position:relative; text-align:left; } 
.columnas .col2{ width:50%; float:left; display:inline; }

.imagen_marca{ max-width: 100%; margin: 0 0 30px 0;}
.imagen_marca img{ max-width: 275px; }
.recuperar{ text-align: left; color: #353535; font-family: Avenir-Black, sans-serif; font-size: 18px; margin-top: 20px;}
.recuperar a{ text-decoration: none; color: #504b40 !important;}
.mod_log, .mod_contrasena.mod_log, .mod_contrasena{ max-width: 320px; margin: 0 auto;}
.g-recaptcha{ margin-top: 25px;}
.mascota{ position: fixed; right: 0; bottom: 0; }
.mascota img{ max-height: 100%;}
.cajaArriba { width: 40%; position: absolute; height: calc(50vh + 6px); background: #fff; border-radius: 15px 0; -webkit-transform: skew(28deg); transform: skew(28deg); left: -7%; box-shadow: 19px 4px 16px -20px rgb(0 0 0 / 75%);}
.cajaAbajo{ width: 40%; position: absolute; height: calc(50vh + 6px); background: #fff; border-radius: 0 15px; -webkit-transform: skew( -28deg ); transform: skew( -28deg ); left: -7%; bottom: 0; box-shadow: 19px 4px 16px -20px rgb(0 0 0 / 75%);}
.marca_index{width: 39%; position: absolute; left: 0; top: 50%; transform: translate(0, -50%); text-align: center;}
.marca_index img{ max-width: 100%;}
.titulo_marca{ font-family: Avenir-Black, sans-serif; margin-bottom: 25px; color: #353535; }
.nombre_marcas{ font-family: Avenir-Black, sans-serif; color: #353535; text-align: left !important; text-transform: capitalize;}
.nombre_marcas a{ text-decoration: none; text-align: left;}
.logoMarca{text-align: center;}
.logoMarca img{ max-height:50px; margin: 5px auto !important; float: initial !important;}
.idioma{ width: 100%; display: block;}
.idioma ul{ padding: 0; margin: 0;}
.idioma ul li{ display: inline-block; color: #000000;}
.idioma ul li a{font-family: Avenir-Black, sans-serif; color: #f77a3c !important; text-decoration: none;}
.idioma ul li a.activo{ color: #000000 !important; text-decoration: underline; }

/*RESPONSIVO*/
@media all and (max-width: 1536px) {
    .cajaArriba {  left: -10%; }
    .cajaAbajo{  left: -10%; }
}

@media screen and (max-device-width: 767px) and (orientation: portrait) {
    .cajaArriba { display:none; }
    .cajaAbajo{ display:none; }
    .mascota{ width: 40%;}
    .mascota img{ width: 100%;}
}

@media all and (max-height: 680px) {
    .mascota{ width: 30%;}
    .mascota img{ width: 100%;}
}