@charset "utf-8";
/* CSS Document version$ 2.1 Ever Ascencio - Designer (info@everascencio.com)*/

@font-face {
    font-family: 'colaborate-regularregular';
    src: url('ColabReg-webfont.eot');
    src: url('ColabReg-webfont.eot?#iefix') format('embedded-opentype'),
         url('ColabReg-webfont.woff') format('woff'),
         url('ColabReg-webfont.ttf') format('truetype'),
         url('ColabReg-webfont.svg#colaborate-regularregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'social_shapesregular';
    src: url('social_shapes-webfont.woff2') format('woff2'),
         url('social_shapes-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
body, a {color: #444;}
body {font-size:16px; font-family: Arial, Helvetica, Verdana, sans-serif; background: #fff; margin:0px; margin:auto;overflow-y: scroll; scroll-behavior: smooth;}
body, tr, td, p, input, select, textarea, button{font-family: Arial, Helvetica, Verdana, sans-serif;font-size: 16px}
h1, h2, h3, h4, h5 {font-family:'colaborate-regularregular', Arial, Helvetica, Verdana, sans-serif; letter-spacing: -2px}
h1 {font-size:300%; color:#000; margin-bottom:0px; letter-spacing: -3px !important}
h2 {font-size: 200%; font-weight:normal}
h3 {font-size:150%; margin:10px 0px 0px 0px !important}
a, a:hover, a:focus  {text-decoration:none;}
a, .boxes li.lcontact  {transition: 300ms ease-in-out;}
a:hover, a:focus { color: #0f7334; outline: none; }
.lnk {color:#064516; font-size:145%}
.lnk:hover {color:#006d1c}
ol, ul {}
.lnk2 {background:#f3f4f3;padding: 5px 10px;text-decoration:none;border-radius: 5px;line-height:2em;color:#666;text-transform:uppercase;text-shadow:none;font-size:75%; margin:0 1px}
.lnk2:hover {background-color:#cacaca;padding: 5px 10px; text-decoration:none;color:#fff;text-shadow:#999 0 1px 0;}
.small, small { font-size: 0.786em; margin-bottom: 1.727em; color:#999; }
* { box-sizing: border-box; outline-color: #b1efa6}
::-moz-selection { color: #2d8727; background: #b1efa6;}
::selection { color: #2d8727; background: #b1efa6; }

#preload {position: fixed; left: 0; top: 0; bottom: 0; right: 0; float: left; display: flex; justify-content: center; align-items: center; padding: 20px; z-index: 9999999; transition: .3s all ease;}
#floatMenu {position:fixed;top:0px;z-index:100;width:100%} 
.section, .hdd, nav, #menu, footer > div {margin:auto;max-width: 1200px;}
section:first-of-type {margin-top:131px !important}

    nav {overflow:hidden; display:block}
        #smenu {width:10%; padding:12px;display:block;float:left}
        #smenu > a{font-size:250%; font-weight:lighter;}
        .logo {height: inherit; margin:auto;text-align:center;width:50%; padding:20px 0px}
        address {width:70%; float:right}
        address ul {display: none; list-style: none outside;margin:auto;padding:0;}
        address ul li{width:30%; padding:40px 10px;float:left; font-family:'colaborate-regularregular', Arial, Helvetica, Verdana, sans-serif; letter-spacing: -1px; font-style: normal}
        #htels {font-size: 100%}
        
        .clearfix {background: #0f7334b0;  backdrop-filter: saturate(200%) blur(10px); display: none; overflow:scroll;clear:both; }
        #menu {list-style: none outside;padding:0;}
        #menu li{padding:14px 16px;display:block;background: #0f7334b0; border-bottom: solid 1px #ccc}
        #menu li.selected a{text-decoration: underline}
        #menu li a{font-size:100%;color: #fff;text-transform: uppercase;font-family:'colaborate-regularregular', Arial, Helvetica, Verdana, sans-serif; letter-spacing: -1px}
    
#slider div {background-size:cover !important; transition: transform 6s ease-in !important;transform: scale(1.06);}
    #slider div:hover, #slider div:focus {transform: scale(1);}
#slider div div.spaced {margin:350px 10px 0 50px; padding:5%;color: #fff !important;font-size:150%; font-weight:lighter}
#slider div div.spaced big {font-size:230%; font-family:"colaborate-regularregular"; color:#fff; letter-spacing: -3px; line-height:41px}

.artitle {padding:250px 0 0 10px;color: #fff !important;font-size:275%; font-weight:lighter; font-family:"colaborate-regularregular"; letter-spacing: -3px !important}
.spaced {padding:10px}
.red {background: #492c20;}
.white, #preload {background: #fff;}
.pets {background: url(images/pets.png);}
.black {background: #111;
    background: -moz-linear-gradient(bottom, #111 0%, #333 100%);
    background: -webkit-gradient(bottom top, top top, color-stop(0%, #111), color-stop(100%, #333));
    background: -webkit-linear-gradient(bottom, #111 0%, #333 100%);
    background: -o-linear-gradient(bottom, #111 0%, #333 100%);
    background: -ms-linear-gradient(bottom, #111 0%, #333 100%);
    background: linear-gradient(to bottom, #111 0%, #333 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#111', endColorstr='#333', GradientType=1 );}
.pad20 {padding:20px; overflow: hidden;}
.twhite, .twhite p, .twhite h3 a {color: #fff;}
.twhite p b {color: #997373}
.shade {box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.25);  }
.noshade {box-shadow:none}
.floatright {float:none; width: auto}
.bar {background:url(images/bar.png) repeat-x; height:31px; width:100%; display:block;}
.imgfx {background-size: cover; background-repeat:no-repeat; background-attachment: scroll; background-position: 50% 50%; background-color:#232323}
.imgfn {background-size: cover !important; background-repeat:no-repeat; background-position: 50% 50%; background-color:#f2f2f2; width:100%; display: block}
.borders, .popup, .vacunas div, .alert {-webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;}
.paraphs p {float:none; font-size: 130%; font-family:"colaborate-regularregular";}
.paraphs p span{background-size:contain;width:100%; height: 100px; display: inline-block; float:none; text-align:center}
.shadow-inner {-moz-box-shadow:inset 0 0 15px #000;-webkit-box-shadow: inset 0 0 15px #000;box-shadow:inset 0 0 15px #000;}
.shadow-in{box-shadow: inset -10px 50px 150px #00000033;}
.section, article {clear:both; min-height:425px; overflow:hidden}

.asection   {overflow:hidden;float:none;clear:both}
.square     {background-color:#232323; height:100%;}
.popup      {position:absolute;top:auto;left:auto;z-index:99;margin:60px 20px 20px 20px;padding:20px; width:350px}
.popup, .grad {background: #fff;}
.icons      {background-size:100% !important;width:36px; height: 36px; float:left}
.shaps      {background-size:100% !important;width:32px; height: 32px; display: inline-block; float:left;margin: 0 10px 2px 0}

.icon01     {background: url(images/register.png) no-repeat 50% 0%;}
.icon02     {background: url(images/login.png) no-repeat 50% 0%;}
.icon03     {background: url(images/experiencia.png) no-repeat 50% 0%;}
.icon04     {background: url(images/clientes.svg) no-repeat 50% 0%;}
.icon05     {background: url(images/logistica.svg) no-repeat 50% 0%;}
.icon06     {background: url(images/catalogo.svg) no-repeat 50% 0%;}

.phone      {background: url(images/phone.png) no-repeat 50% 0%;}
.position   {background: url(images/position.png) no-repeat 50% 0%; }
.clock      {background: url(images/clock.png) no-repeat 50% 0%; }
.account    {background: url(images/account.png) no-repeat 50% 0%; }
.dates      {background: url(images/dates.svg) no-repeat 50% 0%;}
.hours      {background: url(images/hours.svg) no-repeat 50% 0%;}
.loc        {background: url(images/shaps_address.png) no-repeat 50% 0%; height:50px}
.pho        {background: url(images/shaps_tel.png) no-repeat 50% 0%;}
.movil      {background: url(images/shaps_movil.svg) no-repeat 50% 0%;}
.fax        {background: url(images/shaps_fax.svg) no-repeat 50% 0%;}
.mai        {background: url(images/shaps_email.png) no-repeat 50% 0%;}
.blue_tel   {background: url(images/telephone.png) no-repeat 50% 0%;}
.blue_mail  {background: url(images/email.png) no-repeat 50% 0%;}
.blue_loc   {background: url(images/location.png) no-repeat 50% 0%;}

.vacs    {background: url(/images/vacs.png) no-repeat 50% 0%;}
.groo    {background: url(/images/scissor.png) no-repeat 50% 0%;}
.recs    {background: url(/images/recs.png) no-repeat 50% 0%;}
.close   {background: url(/images/close.svg) no-repeat 50% 0%;}
.refre   {background: url(/images/refresh.svg) no-repeat 50% 0%;}
.print   {background: url(/images/print.svg) no-repeat 50% 0%;}
.circle {width: 150px; height: 150px; border-radius: 50%;display: inline-block}
.img {width:100%; height:auto; transform: translateY(0px); }

.col-15, .col-25, .col-30, .col-35, .col-50, .col-65, .col-75, .col-40, .col-60, .col-100, .vacunas > div { float: none; width: 100%; margin-top: 6px}
.col-40 big {color: #666}
.vacunas div {height: 250px; background: #ffffff4c}
.vacunas div p{font-size:100%}
.spanner{font-size:90%; color:#fff; background: #ccc; padding: 3px; border-radius: 3px; text-transform: uppercase}
.alert {width: 100%; padding: 16px 30px 16px 16px;margin: auto; background: #ffc url(images/alert.png) 95% center no-repeat; background-size: auto 50%;color: orange !important; }

.badge{position:relative;}
.badge[data-badge]:after {content:attr(data-badge);position:absolute;top:-10px;font-family:Arial, Helvetica, Verdana, sans-serif !important;background:#ff0000;color:white;width:18px;height:18px;text-align:center;border-radius:50%; }
.badge[data-badge]:after {
    animation: blink 1s; animation-iteration-count: 2;
    -webkit-animation: blink 1s; -webkit-animation-iteration-count: 2;
    -moz-animation: blink 1s; -moz-animation-iteration-count: 2;
    -o-animation: blink 1s; -o-animation-iteration-count: 2;
}
.fieldForm50, .fieldForm100 {width:100%;display:block; min-height:90px;height:auto; float:none}
[disabled] { border:solid 1px #a5acb2; color:#9d9da1 !important; background:#f7f7f7 !important; }
input, select, textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; resize: vertical; float:none;}
label, .tabs a {font-size:65%; text-transform: uppercase}
label {float:none; width: 100%; padding: 12px 0 12px 0}
select {-webkit-appearance: none; -moz-appearance: none; appearance: none; background: url(images/arrow_down_512.png) 100% 0px no-repeat #fff; background-size: contain  }
select[multiple=multiple] {background-image:none}

button, .submit {font-family:'colaborate-regularregular', Arial, Helvetica, Verdana, sans-serif; letter-spacing: -1px; font-size: 90%; }
input[type=button], input[type=reset], button[type=button], button[type=reset], button[type=submit], button, .btn{background-color: #117435; color: #fff; padding: 12px 20px; border: none; border-radius: 5px; cursor: pointer; margin: 0 0 1px 0;}
input[type=submit]:hover, button:hover, button:hover {background:#d0d0d0;color: #117435; } /*box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.25);*/
.btn {padding:3px !important;font-size:70% !important}


.big, big{font-size:150%;color:#999}

.cats {list-style-position:outside }
.cats li {line-height: 30px}
.cats li:hover a, .cats li.cselect a {font-weight:bold;}

.lists, .boxes{list-style: outside none; width:100%; float:none;margin:0px;padding:0px 5px}
.spaces {list-style: outside none; height:125px; margin:10px; padding:0; overflow: hidden; width:auto; text-align: center}
.spaces li {display:inline-block;}
.spaces li a, .spaces li a img {display: block; width:200px; height:100px;}

.gallery{list-style: outside none; width:100%; float:none;margin:0;padding:4px 0 0 0}
.gallery div {width:auto;height:175px; display: inline-block; vertical-align: top}
.gallery div a{width:auto;height:100px; overflow:hidden;}

.boxes {margin: 20px 0px 0px 0px}
.boxes li, .boxes div.item{float:none;min-height:550px; margin:0 0 20px 0; width:100%;background:#fff;-webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;}
.boxes li p, .boxes div.item p{float:none;clear:both;}
.boxes li .imgfn, .boxes div.item div.imgfn, .temp div.imgfn {width:100%; height:220px; min-height:220px;-webkit-border-top-left-radius: 6px;-webkit-border-top-right-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px;}
.boxes li.lsmall {background:#064516} /*min-height:300px;*/
.boxes li.lsmall {width:160px !important; min-width: 160px; float:left;margin:10px 10px 0 0;height:210px !important;min-height:210px !important;}
.boxes li.lsmall div.imgfn {height:150px; min-height: 150px} 
.boxes li.lsmall a{color:#FFFFCC; font-size:80%;font-family:'colaborate-regularregular', Arial, Helvetica, Verdana, sans-serif; letter-spacing: -1px; text-transform: uppercase}
.boxes li.lsmall:hover, .buttns:hover {animation: bounce 1s;}
.boxes li.lcontact {min-height:360px;background:none !important;text-align: center;}
.boxes li.lcontact div.imgfn {margin:auto; border-radius: 50% 50% !important;width:220px; height:220px; min-height: 220px}

.books {list-style: outside none; width:100%; float:none;margin:auto;padding:0 25px 0 25px}
.books li{float:none;min-height:375px; margin:0 0 50px 0; width:100%; transform: none; box-shadow: none;}
.pages {clear:both; display:block}

.tabs {border-bottom:solid 1px #9c1419; padding: 0 0 9px 0}
.tabs a {padding:10px; -webkit-border-top-left-radius: 6px;-webkit-border-top-right-radius: 6px; -moz-border-radius-topleft: 6px;-moz-border-radius-topright: 6px; border-top-left-radius: 6px;
border-top-right-radius: 6px;border-top: solid 1px #ddd;border-left: solid 1px #ccc; border-right: solid 1px #999; margin-right:1px;}
.clk {background:#fff; color:#d02127 !important}

table {width:100%}
table tr th {font-size:85%; text-transform: uppercase;border-bottom:solid 1px #444; background-color: transparent !important}
table tr,  table tr td {font-size:85%; padding:2px;border-bottom:dotted 1px #ccc}

table tr:nth-child(even) td { background-color: #fafafa !important}
table tr:nth-child(odd) td { background-color: #fff  !important}

.tdStyle{ display:none;padding: 10px;
    background: -moz-linear-gradient(bottom, #eee 0%, #fff 100%); background: -webkit-gradient(bottom top, top top, color-stop(0%, #eee), color-stop(100%, #fff));
    background: -webkit-linear-gradient(bottom, #eee 0%, #fff 100%); background: -o-linear-gradient(bottom, #eee 0%, #fff 100%);
    background: -ms-linear-gradient(bottom, #eee 0%, #fff 100%); background: linear-gradient(to bottom, #eee 0%, #fff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eee', endColorstr='#fff', GradientType=1 ); min-height: initial !important; }

#register h1, #login h1, #forgot h1, #send h1, .textcenter {text-align:center !important;}
#register h1 img, #login h1 img, #forgot h1 img, #send h1 img {display: block; width:200px; height:auto;margin:auto}
#cimagen { cursor: pointer; }
footer {background-image: none; background-repeat: no-repeat; background-attachment: scroll; background-color: #492c20; background-position:bottom left; background-size:cover;border-bottom:10px solid #0f7334;}

.fb:before, .tw:before, .ins:before {content: '"'; display: inline-block; font-family: "social_shapesregular"; font-weight: normal; font-style: normal; text-align: center; -webkit-font-smoothing: antialiased;}
.fb:before {content: '!'; }
.tw:before {content: '"'; }
.ins:before {content: '$'; }
.fb:hover::before, .tw:hover::before, .ins:hover::before {color:#0f7334}

@keyframes blink {
    0%   {opacity: 1; transform: scale(1); }
    70%  {opacity: 0.5; transform: scale(0.9); }
    100% {opacity: 1; transform: scale(1); }
}

@keyframes bounce {
    0%, 20%, 60%, 100% {-webkit-transform: translateY(0);transform: translateY(0);}
    40% {-webkit-transform: translateY(-20px);transform: translateY(-20px); }
    80% {-webkit-transform: translateY(-10px); transform: translateY(-10px);}
}
#preload img, .boxes li.lcontact:hover div.imgfn {
    animation: blink 1s; animation-iteration-count: infinite;
    -webkit-animation: blink 1s; -webkit-animation-iteration-count: infinite;
    -moz-animation: blink 1s; -moz-animation-iteration-count: infinite;
    -o-animation: blink 1s; -o-animation-iteration-count: infinite;
}

.usl-loading {
	opacity: 0.75;
}

@media (min-width: 750px) and (max-width: 1100px) {
    footer {background-attachment: scroll !important}
    .logo {height: inherit; width:230px !important;float:left;}
    #menu li{white-space: nowrap; text-overflow: ellipsis;max-width: 9%; width:auto; overflow: hidden;border-bottom: none}
    address {display: block;}
    address ul li{width:50% !important;}
    address ul li:last-child {visibility: hidden;display:none}
    .img {width:100% !important; height:auto; transform: translateY(10px) !important}
    .imgfx {background-attachment:scroll !important;}
}
/* Diseño receptivo: cuando la pantalla tiene menos de 600 píxeles de ancho, haga que las dos columnas se apilen una encima de la otra en lugar de una al lado de la otra */
@media all and (min-width: 740px) {
    .floatright {float:right; width: auto}
    footer {background-attachment: fixed}
    .col-15 { float: left; width: 15%; margin-top: 6px; }
    .col-25 { float: left; width: 25%; margin-top: 6px; }
    .col-30 { float: left; width: 30%; margin-top: 6px; }
    .col-35 { float: left; width: 35%; margin-top: 6px; }
    .col-65 { float: left; width: 65%; margin-top: 6px; }
    .col-75 { float: left; width: 75%; margin-top: 6px; }
    .col-50 { float: left; width: 50%; margin-top: 6px; }
    .col-40 { float: left; width: 40%; margin-top: 6px; }
    .col-60 { float: left; width: 60%; margin-top: 6px; }
    .col-100 { float: none; width: 100%; margin-top: 6px; clear:both}
    .vacunas > div { float: left; width: 48%; margin: 0 1% 2% 1%; }
    .img {width:70%; height:auto; /*transform: translateY(-50px) !important*/}
    .imgfx {background-attachment:fixed;}

    .paraphs p {float:left; width:33%}
    .paraphs p span{background-size:contain;width:25%; height: 100px; display: inline-block; float:left}
    .paraphs p span.large{background-size:contain;width:100%; height: 100px; display: block; float:none}

    .fieldForm50 {width:50%; min-height:90px; min-width: 300px; height:auto; float: left;padding:5px}
    .fieldForm100 {width:100%;display:block; min-height:90px; height:auto;float:none;padding:5px; overflow: hidden}
    .fieldForm100 input, .fieldForm100 select, .fieldForm100 textarea, .fieldForm100 label { width: 100%; }
    button {width:auto;}    
    input, select, textarea { width: 70%;float:left}
    label {width: 30%; float:left; font-size:65%; text-transform: uppercase}
    nav {height:130px;}
    .clearfix {display: block;overflow: auto;}
    #menu li{float:left; background: none; padding:30px 12px;border-bottom: none }
    #menu li a{font-size:80%; text-transform: uppercase}
    
        .logo {height: inherit; width:300px;float:left;}
        #smenu {display: none}
        address ul {display: block;}
        address ul li:first-child{width:30%;}
        address ul li:last-child{width:35%;}

    .lists {list-style: outside none; width:20%; float:left;}
    .boxes {text-align:center;}
    .boxes li {width:32%; float:left;margin-left:1%;min-width:340px; text-align:left}
    .boxes div.item {width:45%; float:left;margin:0 4% 4% 0;min-width:200px; height: 600px; text-align: justify}
    /*.boxes li.lsmall {width:19%; float:left;margin-left:1%;min-width:200px;}*/
    .boxes li.lcontact {width:22%; float:none; display:inline-block; margin:1%; min-width:200px;}

    .books {overflow: hidden; background: url(images/repisa.png)}
    .books li {float:left;min-height:375px; margin:0 23px 50px 0; width:250px; border-left: solid 7px; border-color: #ccc; transform: perspective(320px) rotateY(12deg)  translateZ(-60px); box-shadow: -11px 10px 32px 0px rgba(0,0,0,0.33);}
    .books li:hover { transform: perspective(320px) rotateY(5deg)  translateZ(-40px); box-shadow: -5px 30px 32px 0px rgba(0,0,0,0.66); transition: transform 300ms ease-in;}
     
    #register h1, #login h1, #forgot h1, #send h1 {text-align:left !important;}
    #register h1 img, #login h1 img, #forgot h1 img, #send h1 img {vertical-align: middle; display: inline-block; width:100px; height:auto}
}

@media print {
    body {-webkit-print-color-adjust: exact;}
    *,
    *:before,
    *:after {
        text-shadow: none !important;
        background: transparent !important;
        -webkit-box-shadow: none !important;
                box-shadow: none !important;
    }
    body {width:100%;height:auto;}
    table, td, th {border-color:#ccc;}
    th {font-weight:bold;}
    body, tr, td, p, input, select, textarea, button, a, a:hover{color:#000 !important}
    /*h1, h2, h3, h4, p, a {color:#000 !important; font-size:100% !important; letter-spacing:0px }*/
    big {color:#000 !important; font-size:100% !important; letter-spacing:0px }
    .noShow, header, footer {visibility:hidden; display:none}
    @page {margin: 20px 20px 20px 10px;-webkit-print-color-adjust: exact;}
    .siguiente {PAGE-BREAK-AFTER: always}
}