@charset "utf-8";
/* CSS Document version$ 3.0 Ever Ascencio - Designer (info@everascencio.com)*/
@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; }
::-moz-selection, ::selection { color: green; background: #ccc;}
body {background:#fff; margin:auto; overflow-y: scroll; scroll-behavior: smooth;}
body, tr, td, p, input, select, textarea, button{font-family: 'ralewaylight', Arial, Helvetica, Verdana, sans-serif;font-size: 16px; color: #444;}
h1, h2, h3, h4, h5 {font-family: Helvetica, Verdana, sans-serif;}
h1 {font-size: 300%; color:#444; letter-spacing: -3px;}
h2 {font-size: 250%; color:#111; }
h3 {font-size: 150%;}
h4 {font-size: 190%;}
a  {color: #444; text-decoration:none; transition: 300ms ease-in-out;}
    a:hover, a:focus { color: green; text-decoration: none; outline: none; }
b, strong {font-family: Arial, Helvetica, Verdana, sans-serif; font-weight: bold} 
i, em {font-family: Arial, Helvetica, Verdana, sans-serif; font-style: italic} 
.big, big {font-size:150%;}
.small, small { font-size: 80%; margin-bottom: 1.727em; }

.lnk {color:green; font-size:145%}
.lnk:hover {color:rgba(112,3,0,1)}
.lnk2 {background:rgba(240,25,0,1);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:#fff 0 1px 0;}
* { box-sizing: border-box; outline-color: #d2e3fc}

#preload, .search {position: fixed; left: 0; top: 0; bottom: 0; right: 0; float: left; display: flex; justify-content: center; align-items: center; padding: 20px; z-index: 99999; transition: .3s all ease;}
#smenu {width:10%; padding:12px;display:block;font-size:250%; font-weight:lighter;}

header {position:fixed;top:0px;z-index:100;width:100%; margin:0;background:none;}
nav, section, header, footer, .clearfix {transition: .3s all ease;}
nav, .section, .hddn {margin:auto;max-width: 1200px;overflow: hidden}
hr {width:10%; text-align: center; border: solid 3px green;}

.clearfix {list-style: none outside; width:100%;margin:auto;padding:40px;clear:both;overflow:hidden;display:none;transition: .3s all ease;}
.clearfix li {background: none; margin:2px 0px; border-radius: 6px}
.clearfix li:hover {background: #ccc;}
.clearfix li:hover a {color: #fff;}
.clearfix li.selected a{color: green;}
.clearfix li a{padding:10px 25px;display:block; color: #333; font-size: 180%}
#theicon {display: none}
#theicon {padding:0; text-align: center;}  
#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;height: 300px}
#slider > div > div.spaced { margin:auto; width:100%; padding-top:400px;color: #fff !important;font-size:150%; font-weight:lighter}
#slider > div > div.spaced > big {font-size:200%; color:#fff; line-height:51px}

.artitle, .tshade {text-shadow:2px 5px 0px #f3931d78;}
.artitle {padding:250px 0 0 10px;color: #fff !important; font-weight:bold; font-size:275%; letter-spacing: -1px !important}
.spaced {padding:10px}
.spaced-top {padding:100px 10px 10px 10px}
.white, #preload {background: #fff;}

.pad20 {padding:20px; overflow: hidden;}
.twhite, .twhite p, .twhite h3 a {color: #fff;}
.twhite p b {color: #efa6a6}
.popup      {position:fixed;top:20px;right:0;z-index:999; margin:6%; padding:0px;border-radius: 10px; width:88%; max-width: 350px}
.popup {background: #f2f2f2; background:-webkit-linear-gradient(0deg,#f2f2f2,#fff) !important;background:linear-gradient(0deg,#f2f2f2,#fff) !important;}

.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%;}
.imgfn {background-size: cover !important; background-repeat:no-repeat; background-position: 50% 50%; width:100%; min-height: 200px; display: block}
.borders {-webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;}
.paraphs p {float:none; font-size: 130%;}
.paraphs p span{background-size:contain;width:100%; height: 100px; display: inline-block; float:none; text-align:center}
.shadow-in{background:rgb(112,3,0); background: linear-gradient(51deg, rgba(112,3,0,1) 0%, rgba(240,25,0,1) 100%);}

.section, article {clear:both; min-height:400px; overflow:hidden}

.square     {background-color:#232323; height:100%;}
.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-30, .col-35, .col-50, .col-65, .col-75, .col-40, .col-60, .col-100 { float: none; width: 100%; clear: both}

.alert {width: 100%; padding: 16px 30px 16px 16px;margin: auto; background: #ffdd5c url(images/alert.png) 95% center no-repeat; background-size: auto 50%;color: green !important; border-radius:10px; clear:both}

.badge{position:relative;}
.badge[data-badge]:after {content:attr(data-badge);position:absolute;top:0px; font-size: 10px; background:red;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:150px;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: 1px solid #ccc; border-bottom: 2px solid #ccc; resize: vertical; float:none; border-radius: 6px; margin:2px 0px}
input:focus, select:focus, textarea:focus {animation: blinked 500ms step-end infinite alternate; outline-color: #fef1e5; color: green; } 
label, .tabs a {font-size:75%; color:#666 }
label {float:none; width: 100%; padding: 10px 0 }
select, input[type=date] {-webkit-appearance: none; -moz-appearance: none; appearance: none; background: url(//everascencio.com/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:95%; background-color: #5cb85c; color: #fff; padding:10px 20px; border: none; border-radius: 6px; cursor: pointer; margin: 0 0 1px 0;transition: .3s all ease;}
input[type=submit]:hover, button:hover, button[type=submit]:hover { }
button:hover, .lsmall li:hover {transform: scale(1.1); }

.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;}
.btn {padding:3px !important;font-size:70% !important}

.boxes, .box, .lsmall{list-style: outside none; width:100%; margin:0px;padding:5%}

.boxes li, .boxes div.item{min-height:100px; margin:0 0 20px 0; width:100%;background:#fff;border-radius: 6px;}
.boxes li .imgfn, .boxes div.item div.imgfn, .temp div.imgfn {width:100%; height:220px; min-height:220px;}
.lsmall li {float:none;height:70px !important;min-height:70px !important; background:rgba(240,25,0,1); border-radius: 6px;transition: .3s all ease;margin:10px 10px 0 0;}
.lsmall li a{color:#fff; display: block}

.box {margin: 0px; -moz-column-gap: 0px; -webkit-column-gap: 0px; column-gap: 0px; padding:0 10px 0 0; }
.box li { min-height:40px; margin:20px 0; width:100%;-webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px; display:inline-block}

.pages {clear:both; display:block}

.tabs {padding: 0 0 10px 0; border-bottom: solid 1px #5cb85c}
.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;font-size:125%}
.clk {background:#5cb85c; color:#fff !important}

table {width:100%}
table tr th {font-size:65%; font-weight: bold; text-transform: uppercase;border-bottom:solid 1px #ccc; background-color: transparent !important}
table tr td {padding:5px;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; }

#cimagen { cursor: pointer; }
.fb, .tw, .ins {}
.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: 450%;}
.fb:before {content: '!'; }
.tw:before {content: '"'; }
.ins:before {content: '$'; }
.fb:hover::before, .tw:hover::before, .ins:hover::before {color:#444;}

#preload img, .bbb {
    animation: blink 2s; animation-iteration-count: infinite;
    -webkit-animation: blink 2s; -webkit-animation-iteration-count: infinite;
    -moz-animation: blink 2s; -moz-animation-iteration-count: infinite;
    -o-animation: blink 2s; -o-animation-iteration-count: infinite;
}

.usl-loading {
	opacity: 0.75;
}
.noTagShow {visibility:hidden; display:none !important}
.owl-carousel .item {
    height: 200px;
    width: auto;
    background: #1fc8db;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    font-weight: bold; border-radius: 10px;
}
.owl-carousel .item h4 {
    color: #FFF;
    font-weight: 400;
    margin-top: 0rem;
}
.btn-jump::after {
    content: '';
    position: absolute;
    left: 44%;
    top: -30%;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #2b3843;
    clear: both;
}
.btn-jump {
    z-index: 999;
    margin-top: 5px;
    width: 300px;
    position: relative;
    background-color: #2b3843;
    color: white;
    padding: 20px;
}
.wrap-jump {
    text-align: center;
}

@keyframes blink {
    0%   {opacity: 1;  }
    70%  {opacity: 0.5;  }
    100% {opacity: 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);}
}

@keyframes blinked { 
   50% { border-bottom: 2px solid green; } 
}
@media screen and (min-width: 768px)  and (-webkit-min-device-pixel-ratio: 1) { /*tablet*/
                                                                                
    .col-15, .col-25, .col-30, .col-35, .col-50, .col-65, .col-75, .col-40, .col-60, .col-100 { clear: none }

    .col-15 { float: left; width: 15%; }
    .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-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}
    
    .imgfx {background-attachment:scroll;}
    
    .popup {width:350px}
    header {background:#fff;}
    
    input, select, textarea { width: 70%;float:left}
    label {width: 30%; float:left;}
    .fieldForm50 {width:50%; min-width: 300px; height:auto; float: left;padding:5px}
    .fieldForm100 {width:100%;display:block; 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: none;}
    #theicon, #theicon:hover, #theicon > a {padding:10px 10px 11px 0 !important;border:none}
    
    #slider {margin-top:30px}
    #slider > div > div, #slider > div {width:100%;}
    #slider > div {height: 550px}
    .section, article {min-height:550px;}
    
    .clearfix {display: block; width:1200px; margin:auto; padding:0px}
    .clearfix li, .clearfix li:hover {float:left; background: none; border-bottom: none; margin:0;border-radius: 0px}
    .clearfix li a, .clearfix li:hover a {color:rgb(112,3,0); display: block; padding:20px 30px;font-size: 110%}    
    .clearfix li:hover a, .clearfix li.selected a {color:green}
    .clearfix li:hover, .clearfix li.selected {border-bottom:solid 3px green}
        #smenu {display: none}
    
    .boxes {overflow:hidden;padding:3%; -moz-column-count: 2;-webkit-column-count: 2;column-count: 2;}
    .boxes li {width:100%; margin:7% 3% 0 0; min-width:270px; display: inline-block}
    
    .box {-moz-column-count: 2;-webkit-column-count: 2;column-count: 2;}
    .noTagShow {visibility:visible; display:block !important}

}


@media screen and (min-width: 1050px) and (-webkit-min-device-pixel-ratio: 1) {
    .floatright {float:right; width: auto}
    .col-15, .col-25, .col-30, .col-35, .col-50, .col-65, .col-75, .col-40, .col-60, .col-100 { clear: none }

    .col-15 { float: left; width: 15%; }
    .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-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}

    .imgfx {background-attachment:fixed;}

    .popup {width:350px}
    header {background:none;}

    input, select, textarea { width: 70%;float:left}
    label {width: 30%; float:left;}
    .fieldForm50 {width:50%; min-width: 300px; height:auto; float: left;padding:5px}
    .fieldForm100 {width:100%;display:block; 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:10px 10px 11px 0 !important;border:none}

    #slider {margin-top:30px}
    #slider > div > div, #slider > div {width:1200px;}
    #slider > div {height: 800px}
    .section, article {min-height:400px;}

    .clearfix {display: block; width:1200px; margin:auto; padding:0px}
    .clearfix li, .clearfix li:hover {float:left; background: #fff; border-bottom: none; margin:0;border-radius: 0px}
    .clearfix li a, .clearfix li:hover a {color:#000; display: block; padding:36px 30px;font-size: 120%}
    .clearfix li:hover a, .clearfix li.selected a {color:#444}
    .clearfix li:hover, .clearfix li.selected {}
        #smenu {display: none}

    .boxes {overflow:hidden;padding:5%; -moz-column-count: 3;-webkit-column-count: 3;column-count: 3;}
    .boxes li {width:100%; margin:7% 3% 0 0; min-width:235px; display: inline-block}

    .box {-moz-column-count: 2;-webkit-column-count: 2;column-count: 2;}
    .noTagShow {visibility:visible; display:block !important}
    .badge[data-badge]:after {font-size: 10px !important}
}

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