@charset "utf-8";
/* CSS Document version$ 2.1 Ever Ascencio - Designer (info@everascencio.com)*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

@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:18px; font-family: 'Open Sans', Arial, Helvetica, Verdana, sans-serif; color: #444; margin: 0px; background: #fff; line-height:24px; font-weight: 400}

body, tr, td, p, input, select, textarea, button{font-family:'Open Sans', Arial, Helvetica, Verdana, sans-serif;font-size: 18px}
h1, h2, h3,h4,h5 {font-family: 'Montserrat', Arial, Helvetica, Verdana, sans-serif;}
h1 {font-size: 200%; letter-spacing: -2px; font-weight: lighter; line-height: 45px}
h2 {font-size:200%; color:#1b5f68; line-height: 35px}
h3 {font-size:120%; color: #00bcd4; font-weight:bold; text-transform:uppercase;}
h4 {font-size:120%; color: #1cb3c6;}
a  {color: #3674bd; text-decoration:none; transition: 0.4s ease-in-out;}
a:hover, a:focus { color:#111;text-decoration: none;outline: none; }
.lnk {color:#444 }
.lnk:hover {color:#00bcd4}
.lnk1 { color: #2a61fb; font-weight: bold}
.lnk2 { font-size:8px; padding:0px 5px; display:inline-block; margin: 0px 2px; color: #fff; text-transform: uppercase; background: #ccc}
.f32 {font-size:200%; letter-spacing: -1px; line-height: 34px;}
.big, big {font-size:150%; line-height: 30px }
.small, small { font-size: 0.786em !important; margin:2px;color: #767676 !important; }

* { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; outline-color: #4185f2}
::-moz-selection { color: #fff; background: #4185f2;}
::selection { color: #fff; background: #4185f2 }

header {background: #3674bd; animation-timing-function: cubic-bezier(.71,.55,.62,1.57); backdrop-filter: saturate(180%) blur(20px); position: fixed; z-index: 99999; top:0; left:0; width:100%}
header >  div { overflow: visible !important}
nav {overflow: hidden; clear: both; background:#fff;}

section:first-of-type {margin-top:150px}
article {background: #fff; overflow: hidden;}
footer {overflow: hidden; width: 100%; background:url(/images/hp.png) no-repeat 0px 100% #0e3791;}
label, .mini {font-size: 11px !important; text-transform: uppercase; color: #999; }

input[type=number] { width: 70px}
label {float:none; width: 100%; padding: 12px 0 12px 0;}
select, input[type=date] {-webkit-appearance: none; -moz-appearance: none; appearance: none; background: url(images/arrow_down_512.png) 100% 0px no-repeat; 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{background: #4185f2; color: #fff; padding: 12px 20px; cursor: pointer; margin: 0 0 1px 0; transition: 300ms ease-in-out; border:none; font-family: Arial, Helvetica, Verdana, sans-serif;}
button:hover {background: #00bcd4;}


#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}
#slider div {background-size:cover !important; transition: transform 6s ease-in !important;height: 300px}
#slider > div > div { margin:auto; width:100%; padding-top:400px;}
    #slider video {height: 100% !important}

#send {min-height:400px}

    #smenu {width:10%; padding:6px;display:block;float:left; position:relative; font-size:180%; font-weight:lighter; color:#0e3791}
    
    .icons {float: left; width:32px; height: 32px; margin:10px 10px 20px 0; content: ''; line-height: 32px}
    .i_calendar {background-image: url(/images/i_calendar.png); background-size: cover }
    .i_letter {background-image: url(/images/i_letter.png); background-size: cover }
    .i_placeholder {background-image: url(/images/i_placeholder.png); background-size: cover }
    .i_mobile {background-image: url(/images/i_mobile.png); background-size: cover }

    
.pictures img {width:75px; height:auto}
.pictures { display:block; clear:both; }
/*----- Menu Outline -----*/
.menu, nav {display: none}
.menu { width:100%; margin:auto; padding:35px 0px; list-style:none outside; text-align: right;}
.menu li { transition:all linear 0.15s; position:relative;  display:block; margin: 0px 3px; vertical-align: middle; text-align: left; }
.menu li a { padding:10px 20px;  color: #fff; font-family: Arial, Helvetica, Verdana, sans-serif;}
.sub-menu li a { padding:10px;  color:#fff; }
.sub-menu li { border-bottom:solid 1px #3e4c6b; margin: 6px; text-align: left; clear: both}
.menu li a,
.sub-menu li a {  text-transform: uppercase; font-size:65%; text-decoration:none; display:block; }
/*----- Top Level -----*/
.menu > li:hover > a  {background: #fff; color: #3674bd;}
.menu > .current-item > a, .sub-menu .current-item a {background: #fff; color: #3674bd;}
.sub-menu li:hover a {color: #3674bd}
/*----- Bottom Level -----*/
.sub-menu { margin:0px; padding:20px 10px; transition:opacity linear 0.15s; background:#3674bd; list-style:none outside; display:none; }

.whites {background:#fff}
.greens {background:#00e2ff}
.blue {background:#4185f2 !important}
.testimonials {background:url(/images/testimonials.jpeg) no-repeat 50% 50% #4185f2; background-size: cover}

.spaced, .pictures {padding:10px}
.floatright {float:right; width: auto}
.pad20, #send, .alert {padding:20px; overflow: hidden;}
.twhite, .twhite p, .twhite h3 a {color: #fff !important;}

.shade {box-shadow: 0 0 15px rgb(0 0 0 / 10%); }
.scroll, .left, .right { border-style: solid;
    border-color:  #000;
    border-width: 0.25em 0.25em 0 0;
    content: '';
    display: block;
    height: 20px;
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
    width: 20px;
    margin: auto;
}
.left {-webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg);display: inline-block;opacity: 0.3}
.right {-webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);display: inline-block;opacity: 0.3}
.blinks {animation: blink 1s infinite;}
a.blinks {display: inline-block;}
a.blinks .left, a.blinks .right { opacity: 1;}
.alert {background:#fdcc0c; color:#666;}
.notify {z-index:99999999;position:fixed;top:0;left:0; width:90%;padding:30px;margin:5%;}
.imgfn, .circle, .imgfl {background-size: cover !important; background-repeat:no-repeat; background-position: 50% 50% !important;  background-color:#fff;  transition: all 1s ease}
.imgfx {background-size: cover; background-repeat:no-repeat; background-attachment: scroll; background-position: 50% 50%;}
.imgfn { width:100%; display: block; height:200px;;}
.imgfn:hover { background-blend-mode: luminosity; }
.imgfl { width:100%; display: block; height:350px }
.square, section,
.imgfn, .imgfl {background: #f8f8f8}
.h600 { height:600px !important}

.boxesx {-moz-column-gap: 1.5%; -webkit-column-gap: 1.5%; column-gap: 1.5%; }
    .boxesx > div {float:none; width: 100%; height: auto; background: #fff; margin-bottom:20px; }

.borders, .alert, .menu, .sub-menu, .menu > li:hover > a, 
.sub-menu li:hover a, .menu > .current-item > a, .sub-menu .current-item a, button, .lnk2 {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}

.gallery {align-content: center; text-align: center; padding:20px;}
.gallery, .lists{list-style: outside none; width:100%; float:none; margin:0; clear:both}
.gallery > div {width:auto; min-width: 150px; display: inline-block; vertical-align:top;}
.lists > li {width:100%; float:none; min-height:250px; height:auto}

.datainfo{list-style: outside none; width:100%; display: block ;margin:0;padding:0}
.datainfo div {width:100%;min-height:100px; display: inline-block; vertical-align: top; padding:15px}

.circle {border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; margin: 5px; display: inline-block; content: ''; width: 100%;height: 0;padding-top: 100%;}

.asection {padding:50px 0 50px 0}
.section, .section_small, .hddn, nav > div, header > div {margin:auto;max-width: 1170px;}
    .section {clear:both; min-height:600px; height:auto; } /*overflow:hidden*/
    .section_small {clear:both; min-height:300px; overflow:hidden;} 
.col-15, .col-20, .col-25, .col-30, .col-35, .col-50, .col-65, .col-70, .col-75, .col-80, .col-85, .col-40, .col-60, .col-100 { float: none; width: 100%; }

.badge{position:relative;}
.badge[data-badge]:after {content:attr(data-badge);position:absolute;top:-10px;right:0px;font-size:12px !important;background:red;color:#fff;width:20px;height:20px;text-align:center;line-height:20px;border-radius:50%; 
    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 3px #9d9da1 !important; color:#9d9da1 !important; background:#f7f7f7 !important; }
input, select, textarea { width: 100%; padding: 12px 20px; resize: vertical; float:none; border-radius: 2px; border:1px solid #e5e5e5; color: #595959; margin-bottom: 30px}
input:focus, select:focus, textarea:focus {border: solid 1px #00bcd4; color:#333}


.fb:before, .tw:before, .ins:before, .web:before, .mai:before, .utb:before, .in:before, .wa:before {display: inline-block; font-family: "social_shapesregular"; font-weight: normal; font-style: normal; text-align: center; -webkit-font-smoothing: antialiased;font-size: 130%}
.fb:before  {content: 'F';}
.tw:before  {content: 'Õ';}
.ins:before {content: 'd';}
.in:before  {content: 'j';}
.web:before {content: 'ó';}
.mai:before {content: 'Ã';}
.utb:before {content: 'ù';} 
.wa:before  {content: "í";} 
.fb:hover::before, .tw:hover::before, .ins:hover::before,  .in:hover::before, .web:hover::before, .mai:hover::before, .utb:hover::before, .in:hover::before, .wa:hover::before {color:#00bcd4}

table {width:100%}
th {color: #72a603; text-transform: uppercase;border-bottom:solid 1px #444}
td {padding:10px;border-bottom:dotted 1px #ccc}
table > tbody > tr:nth-child(even) > td, table > tr:nth-child(even) > td { background-color: #fafafa}
table > tbody > tr:nth-child(odd) > td, table > tr:nth-child(odd) > td { background-color: #fff}
.ewTableAltRow {background-color: #F5F5F5;}
.ewTableEditRow {background-color: #FFFF99; }
.ewTableHighlightRow, #dataGrid tr:hover > td, .dgrid:hover {background-color: #dbfefe; background: -moz-linear-gradient(bottom, #dbfefe 0%, #eeffff 100%); background: -webkit-gradient(bottom top, top top, color-stop(0%, #dbfefe), color-stop(100%, #eeffff)); background: -webkit-linear-gradient(bottom, #dbfefe 0%, #eeffff 100%); background: -o-linear-gradient(bottom, #dbfefe 0%, #eeffff 100%); background: -ms-linear-gradient(bottom, #dbfefe 0%, #eeffff 100%); background: linear-gradient(to bottom, #dbfefe 0%, #eeffff 100%); }
.ewTableSelectRow {box-shadow: 0px 0px 10px #fdf986}
.ewTableSelectRow, .ewTableSelectRow > td{background-color: #fdf986 !important; background: -moz-linear-gradient(bottom, #fdf986 0%, #ffe35b 100%) !important; background: -webkit-gradient(bottom top, top top, color-stop(0%, #fdf986), color-stop(100%, #ffe35b)) !important; background: -webkit-linear-gradient(bottom, #fdf986 0%, #ffe35b 100%) !important; background: -o-linear-gradient(bottom, #fdf986 0%, #ffe35b 100%) !important; background: -ms-linear-gradient(bottom, #fdf986 0%, #ffe35b 100%) !important; background: linear-gradient(to bottom, #fdf986 0%, #ffe35b 100%) !important; }


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

@keyframes blinking {
    0%   {opacity: 0; }
    25%  {opacity: 1; }
    50%  {opacity: 0; }
    100% {opacity: 1; }
}

@keyframes blinked { 
   50% { border-right: 2px solid #000; } 
}


@media (min-width: 750px) and (max-width: 1100px)  {
    .circle {width:230px !important; height:230px !important}
    .img {width:100% !important; height:auto; transform: translateY(10px) !important}
    .imgfx {background-attachment:scroll !important;}
    #slider > div > div, #slider > div {width:100%;}
    #slider > div {height: 550px}
}

/* 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) {
    .col-15 { float: left; width: 15%; }
    .col-20 { float: left; width: 20%; }
    .col-25 { float: left; width: 25%; }
    .col-30 { float: left; width: 30%; }
    .col-35 { float: left; width: 35%; }
    .col-65 { float: left; width: 65%; }
    .col-70 { float: left; width: 70%; }
    .col-75 { float: left; width: 75%; }
    .col-80 { float: left; width: 80%; }
    .col-85 { float: left; width: 85%; }
    .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; overflow: hidden}

    nav {clear: both; overflow: hidden}
    .imgfx {background-attachment:fixed;}
    .imgfn { height:200px}
    .imgfl { height:500px !important}
    .pictures img {width:100px; height:auto}

    button {width:auto;}
    .fieldForm50 label {width: 30%; float:left}
    .fieldForm50 {width:49%;display:block; min-height:90px; min-width: 300px; height:auto; display: inline-block;padding:1%}
    .fieldForm50 input, .fieldForm50 select, .fieldForm50 textarea { width: 65%;float:left}
    .fieldForm100 label {width: 15%; float:left}
    .fieldForm100 {width:100%;display:block; min-height:90px; height:auto;display: inline-block;padding:0px}
    .fieldForm100 input, .fieldForm100 select, .fieldForm100 textarea { width: 80%; }

    #smenu {display: none}
    
    .menu li { transition:all linear 0.15s; display:inline-block; position:relative; }
    .menu, nav {display:block;}
    /*----- Bottom Level -----*/
    .menu li:hover .sub-menu { z-index:1; opacity:1; display:block}
    .sub-menu { width:auto; min-width: 200px; padding: 0px; position:absolute; top:100%; left:0px; z-index:999999; opacity:0; transition:opacity linear 0.15s;  list-style:none outside; display:none; box-shadow: 0 0 15px rgb(0 0 0 / 10%);}
    .sub-menu li {display: block}
    
    #slider > div > div, #slider > div {width:1200px;}
    #slider > div {height: 800px}
    #slider video {width: 100% !important}
    
    h1 {font-size:300%; }
    h2 {font-size:200%; }
    h3 {font-size:100%; }
    h4 {font-size:110%; }
    
        .boxesx > div {display: inline-block; width: 100%; height: auto; min-height: 500px;}
        .boxesx {
            -moz-column-count: 3;
            -webkit-column-count: 3;
            column-count: 3;
        }
        .lists > li {width:50%; float:left;}
       
        .datainfo div {width:50%;}
}

@media print {
    table, td, th {border-color:#ccc;}
        table > tbody > tr:nth-child(even) > td, table > tr:nth-child(even) > td{ background-color: #fafafa}
        table > tbody > tr:nth-child(odd) > td, table > tr:nth-child(odd) > td{ background-color: #fff}
    .siguiente, .nform {page-break-after: always}
    header, .noShow, footer {visibility:hidden; display:none}

}
/*Fb Comments Width Fix*/
.fb_iframe_widget_fluid_desktop, .fb_iframe_widget_fluid_desktop span, .fb_iframe_widget_fluid_desktop iframe {
            max-width: 100% !important;
            width: 100% !important;
 }