@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 {font-size:16px; font-family: Arial, Helvetica, Verdana, sans-serif; color: #444; background: #fff;margin:auto;overflow-y: scroll; scroll-behavior: smooth;}
body, tr, td, p, input, select, textarea, button{font-family: 'colaborate-regularregular', Arial, Helvetica, Verdana, sans-serif;font-size: 16px}
h1, h2, h3, h4, h5 {font-family: 'colaborate-regularregular', Arial, Helvetica, Verdana, sans-serif;}
h1 {font-size:300%; color:#003c64; letter-spacing: -1px !important}
h2 {font-size: 200%; color:#111; }
h3 {font-size:150%; margin:10px 0px 0px 0px !important}
h4 {font-size:100%; color:#444;}
a  {color: #444; text-decoration:none; transition: 300ms ease-in-out;}
a:hover, a:focus { color: #0071BC;text-decoration: none;outline: none; }

.lnk {color:#55af6c; font-size:145%}
.lnk:hover {color:#40d867}

.lnk2 {background:#444;padding: 5px 10px;text-decoration:none;border-radius: 5px;line-height:2em;color:#fff;text-transform:uppercase;text-shadow:none;font-size:65%; margin:0 1px}
.lnk2:hover {color:#ccc;text-shadow:#999 0 1px 0;}
.small, small { font-size: 0.786em; margin-bottom: 1.727em; color:#999; }
* { box-sizing: border-box; outline-color: #d2e3fc}
::-moz-selection { color: #0071BC; background: #d2e3fc;}
::selection { color: #0071BC; background: #d2e3fc; }

#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;background: #fff}
header {position:fixed;top:0px;z-index:100;width:100%; margin:10px 0 0 0;}
nav {border-radius: 6px;-moz-border-radius: 6px;-webkit-border-radius: 6px; background: none;transition: 300ms ease-in-out;}
nav, .section, .hddn {margin:auto;max-width: 1200px;}

        #smenu {width:10%; padding:12px;display:block;float:left; font-size:250%; font-weight:lighter;color:#fff}
        
        .clearfix {list-style: none outside; width:100%;margin:auto;padding:0;clear:both;overflow:hidden;transition: 300ms ease-in-out;display: none;background: none}
        .clearfix li {background: #fff; margin:1px 1px 1px 0;border-radius: 6px;-moz-border-radius: 6px;-webkit-border-radius: 6px;}
        .clearfix li.selected a{color: navy;}
        .clearfix li a{padding:10px 15px;display:block; font-size:90%;color: #333;text-transform: uppercase;font-family:'colaborate-regularregular', Arial, Helvetica, Verdana, sans-serif; letter-spacing: -1px}
#theicon {display: none}
#theicon {padding:0; text-align: center; width:150px; }  
#myDescrip {position:relative;background: rgba(0, 0, 0, 0.5);color: #f1f1f1; width: 100%; padding: 20px;}
#slider div {background-size:cover !important; transition: transform 6s ease-in !important;}
#slider div div.spaced { padding:5%;color: #fff !important;font-size:150%; font-weight:lighter}
#slider > div > big {font-size:275%; font-family:"Times New Roman", Times, Garamond; color:#fff; letter-spacing: -2px; line-height:41px}

.artitle, .twhite {text-shadow:5px 5px 10px #003c64;}
.artitle {padding:250px 0 0 10px;color: #fff !important; font-weight:bold; font-size:275%; letter-spacing: -1px !important}
.spaced {padding:10px}
.blue {background: #103e6f;}
.white {background: #fff;}
#slider {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: #efa6a6}
.shade, .popup {box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.25);  }
.floatright {float:none; width: auto}

.imgfx {background-size: cover; background-repeat:no-repeat; background-attachment: scroll; background-position: 50% 50%; background-color:#9ae6d1}
.imgfn {background-size: cover !important; background-repeat:no-repeat; background-position: 50% 50%; background-color:#f2f2f2; width:100%; display: block}
.borders {-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-in{background: #c5e5f1;}
article {padding-top:20px}
.section, article {clear:both; min-height:400px; overflow:hidden}

.square     {background-color:#232323; height:100%;}
.popup      {position:fixed;top:0;right:0;z-index:99;margin:60px 20px 20px 20px;padding:20px;border-radius: 10px; width:350px}
.popup, .grad {background: #f2f2f2; background:-webkit-linear-gradient(0deg,#f2f2f2,#fff) !important;background:linear-gradient(0deg,#f2f2f2,#fff) !important;}
.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}

.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-35, .col-50, .col-65, .col-75, .col-40, .col-60, .col-100, .vacunas > div { float: none; width: 100%; }
.col-40 big {color: #666}
.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: #edc95f url(images/alert.png) 95% center no-repeat; background-size: auto 50%;color: #fff9cf !important; border-radius:10px }

.badge{position:relative;}
.badge[data-badge]:after {content:attr(data-badge);position:absolute;top:-10px;font-family:Arial, Helvetica, Verdana, sans-serif !important; font-size: 65%; background:#ff0000;color:white;width:18px;height:18px;text-align:center; vertical-align: middle;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: 10px; border:0;  border-bottom: 2px solid #ccc; resize: vertical; float:none;background:none}
input:focus, select:focus, textarea:focus {border-bottom: 2px solid #1fc8db; outline-color: #fff; color: #1fc8db} 
label, .tabs a {font-size:65%; text-transform: uppercase}
label {float:none; width: 100%; padding: 10px 0 }
select, input[type=date] {-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}

input[type=button], input[type=reset], button[type=button], button[type=reset], button[type=submit], 
button, .btn{font-family:Arial, Helvetica, Verdana, sans-serif; font-size:75%; text-transform: uppercase; min-width:80px; min-height:80px;
    background-color: rgb(114,187,238); background:linear-gradient(90deg, rgba(90,177,238,1) 0%, rgba(65,169,241,1) 50%, rgba(32,150,233,1) 100%); 
    color: #fff; padding:15px; border: none; border-radius: 50%; cursor: pointer; margin: 0 0 1px 0;}
input[type=submit]:hover, button:hover, button:hover, button[type=submit]:hover {background-color:rgb(114,187,238); background: linear-gradient(90deg, rgba(114,187,238,1) 0%, rgba(76,182,255,1) 50%, rgba(32,150,233,1) 100%)}
.submit {background-color: #0071BC !important; background:-webkit-linear-gradient(90deg, #9fb8ad 0%, #1fc8db 50%, #2cb5e8 75%) !important;background:linear-gradient(141deg, #0071BC 0%, #1B1464 51%, #2cb5e8 75%) !important;color: #fff; border:0; padding: 10px 15px; border: none; border-radius: 5px; cursor: pointer; margin: 0 0 1px 0}
.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; overflow:hidden}
.gallery div {width:40%;display: inline-block; vertical-align: top}
.gallery div a{width:auto;}

.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;
-webkit-border-bottom-right-radius: 25px;
-moz-border-radius: 6px;
-moz-border-radius-bottomright: 25px;
border-radius: 6px;
border-bottom-right-radius: 25px;}
.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:rgba(32,150,233,1)}
.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; text-transform: uppercase}
.boxes li.lcontact {min-height:360px;background:none !important;text-align: center;transition: 300ms ease-in-out;}
.boxes li.lcontact div.imgfn {margin:auto; border-radius: 50% 50% !important;width:220px; height:220px; min-height: 220px}

.pages {clear:both; display:block}

.tabs {padding: 0 0 8px 0; border-bottom: solid 1px #1fc8db}
.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;margin-right:1px;}
.clk {background:#1fc8db; color:#fff !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; }
.fb, .tw, .ins {color:#fff}
.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;font-size: 350%;}
.fb:before {content: '!'; }
.tw:before {content: '"'; }
.ins:before {content: '$'; }
.fb:hover::before, .tw:hover::before, .ins:hover::before {color:#ccc}

@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}
    .clearfix li{white-space: nowrap; text-overflow: ellipsis;max-width: 9%; width:auto; overflow: hidden;border-bottom: 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%; }
    .col-25 { float: left; width: 25%; }
    .col-35 { float: left; width: 35%; }
    .col-65 { float: left; width: 65%; }
    .col-75 { float: left; width: 75%; }
    .col-50 { float: left; width: 50%; }
    .col-40 { float: left; width: 40%; }
    .col-60 { float: left; width: 60%; }
    .col-100 { float: none; width: 100%; clear:both}

    .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}

    .gallery div {width: 200px}
    input, select, textarea { width: 70%;float:left}
    label {width: 30%; float:left; font-size:65%; text-transform: uppercase}
    .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 { width: 85%; }
    .fieldForm100 label { width: 15%; }
    button {width:auto;}    

    #theicon {display: block;}
    #theicon, #theicon:hover, #theicon > a {padding:3px 0 0 0 !important; background: none !important;}
    #myDescrip {position:fixed;bottom: 0;background: rgba(0, 0, 0, 0.5);color: #f1f1f1; width: 100%; padding: 20px;}
    nav {background: #fff;}
    .clearfix {display: block; width:1200px; margin:auto}
    .clearfix li{float:left; background: none; border-bottom: none; margin:0; border-radius: 0px}
    .clearfix li a {color:#333; display: block; padding:35px 10px;}
    .clearfix li:hover a {color:white}
    .clearfix li:hover {background:navy; background: -moz-linear-gradient(bottom, #0071BC 0%, #1B1464 100%);
    background: -webkit-gradient(bottom top, top top, color-stop(0%, #0071BC), color-stop(100%, #1B1464));
    background: -webkit-linear-gradient(bottom, #0071BC 0%, #1B1464 100%);
    background: -o-linear-gradient(bottom, #0071BC 0%, #1B1464 100%);
    background: -ms-linear-gradient(bottom, #0071BC 0%, #1B1464 100%);
    background: linear-gradient(to bottom, #0071BC 0%, #1B1464 100%);}
        #smenu {display: none}

    .lists {list-style: outside none; width:20%; float:left;}
    .boxes {text-align:center; overflow: hidden}
    .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;}
     
    #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}
}