@charset "utf-8";
/* CSS Document version$ 2.1 Ever Ascencio - Designer (info@everascencio.com)*/
@font-face {
    font-family: 'esphimerelight';
    src: url('esphimere_light-webfont.woff2') format('woff2'),
         url('esphimere_light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'sui_generisregular';
    src: url('sui_generis_rg-webfont.woff2') format('woff2'),
         url('sui_generis_rg-webfont.woff') format('woff');
    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; margin:0px}
.bodybg {background-image: url(images/bgd.jpg); background-size: cover; background-repeat:no-repeat; background-position: 50% 0px; background-color:#f2f3f2; width:100%; }

body, tr, td, p, input, select, textarea, button{font-family:"esphimerelight", Arial, Helvetica, Verdana, sans-serif;font-size: 16px}
h1, h2, h3 {font-family: "sui_generisregular", Arial, Helvetica, Verdana, sans-serif; text-transform: uppercase; text-shadow: 2px 2px 10px #ffffff}
h1 {font-size: 170%; font-weight: normal; letter-spacing: -1px}
h2 {font-size:150%; color:#ccc;}
h3 {font-size: 110%; color:#F65D20}
h4 {color:#0ca6cc; letter-spacing: -1px; }
h3, h4 { font-size:160%; font-family: "esphimerelight", Arial, Helvetica, Verdana, sans-serif; margin:0}
a  {color: #7b7e80; text-decoration:none; transition: 300ms ease-in-out;}
a:hover, a:focus { color:#fff;text-decoration: none;outline: none; }
.lnk {color:#ccc; font-size:145%}
.lnk:hover {color:#0d56c2}
.big, big {font-size:150%; }
.small, small { font-size: 0.786em; margin:2px; color:#999; }

* { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; outline-color: #ccc}
::-moz-selection { color: #666; background: #ddd;}
::selection { color: #666; background: #ddd; }

#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 {margin:auto;width:100%; position:fixed;top:0px;z-index:100;} /*NAV*/
#send, #myList {background-color: #ffffff99;min-height:600px; background-blend-mode: overlay;}
.logo {animation: blinking 0.5s; animation-iteration-count: 2;
    -webkit-animation: blinking 0.5s; -webkit-animation-iteration-count: 2;
    -moz-animation: blinking 0.5s; -moz-animation-iteration-count: 2;
    -o-animation: blinking 0.5s; -o-animation-iteration-count: 2;}
footer {position: fixed; z-index: 99999; left:0; bottom:0px; width: 100%; text-align: center; padding: 0px 10px}
    footer .floatright {display: block; float: none; clear: both;}
    footer .floatright p {text-align: center !important}
.langs {position: fixed; z-index: 99998; top:0; right:0;}
#preload {background: #f2f3f2;}

    .basemenu {overflow:hidden; margin: 10px}
        #smenu {width:50px; padding:12px;display:block;float:left}
        #smenu a {font-size:150%; color:#7b7e80;}
        #smenu .badge[data-badge]:after  {background:#ff00c6 !important;color:#fff !important;}
        
    #menu {list-style: none outside; padding:20px; clear:both; display: none; overflow:hidden;transition: 300ms ease-in-out;}
    #menu li { padding:20px; display:block; background: #38bce7bf; background: linear-gradient(129deg, #38bce7bf 0%, #d4eff800 100%); margin: 0px 0px 2px 0px; background-blend-mode: overlay;}
    #menu li a { font-size:100%;color: #fff;text-transform: uppercase;display:block;}
    #menu li:hover, #menu li.selected {background: #d4eff8bf; color:#7b7e80;}
    #menu li:hover a, #menu li.selected a {color:#7b7e80;}
    
.home {text-align: center; color: #0ca6cc; width: 85%; font-size:110%; margin:100px auto 50px auto;}

label, th, .mini {font-size: 12px !important; text-transform: uppercase; color: #7b7e80}
.spaced, .langs {padding:10px}
.floatright {float:right; width: auto}
.pad20, #send, #myList, .alert {padding:20px; overflow: hidden;}
.twhite, .twhite p, .twhite h3 a {color: #7b7e80;}
.twhite p {color: #7b7e80}
.shade {box-shadow: 0 5px 10px 1px rgba(0,0,0,.25);  }
.scroll { border-style: solid;
          border-color:  #7b7e80;
    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;
}
.blinks {animation: blink 1s infinite;}
.alert {background:#fdcc0c; color:#666; animation: blinked 0.3s infinite;}
.imgfn, .circle {background-size: cover !important; background-repeat:no-repeat; background-position: 50% 50%;}
.imgfx {background-size: cover; background-repeat:no-repeat; background-attachment: scroll; background-position: 50% 50%; background-color:#232323}
.imgfn { background-color:#f2f2f2; width:100%; display: block; height:200px}

.boxes {width:100%; overflow: hidden; margin: 50px 0 50px 0; text-align: center;}
.borders {-webkit-border-radius: 6px;-moz-border-radius: 6px;border-radius: 6px;}
.circle {border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; width:200px; height: 200px; display:inline-block; margin: 10px 10px 30px 0}
    .circle:hover {animation: blink 0.5s infinite;}
    
.section, .section_small, .hddn {margin:auto;max-width: 1000px;}
    .section {clear:both; min-height:1000px;} /*overflow:hidden*/
    .section_small {clear:both; min-height:400px;} /*overflow:hidden*/
.col-15, .col-20, .col-25, .col-35, .col-50, .col-65, .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:-10px;font-size:11px !important;background:#f2f3f2;color:#444;width:18px;height:18px;text-align:center;line-height:18px;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 1px #a5acb2; color:#9d9da1 !important; background:#f7f7f7 !important; }
input, select, textarea { width: 100%; padding: 12px; border:none; border-bottom: 2px solid #7b7e80; resize: vertical; float:none;outline-color:#fff; border-radius: 0px; background: none; color: #7b7e80}
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 none; 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-color: #ccc; background:-webkit-linear-gradient(0deg,#ccc,#fff);background:linear-gradient(0deg,#ccc,#fff);color: #666; padding: 12px 20px; border: none; border-radius: 6px; cursor: pointer; margin: 0 0 1px 0; text-transform: uppercase;  transition: 300ms ease-in-out;}
button:hover {background-color: #ccc; background:-webkit-linear-gradient(0deg,#ccc,#ddd);background:linear-gradient(0deg,#ccc,#ddd); color: #000}

.fb:before, .tw:before, .ins:before, .web:before, .mai:before, .utb:before, .in:before {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: '$'; }
.web:before {content: 'É'; }
.mai:before {content: 'È'; }
.utb:before {content: '*'; } 
.in:before {content: "'"; } 
.fb:hover::before, .tw:hover::before, .ins:hover::before, .web:hover::before, .mai:hover::before, .utb:hover::before, .in:hover::before {color:#0f6bff}

.usl-loading {
	opacity: 0.75;
}

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


.lds-roller { display: inline-block; position: relative; width: 64px; height: 64px; }
.lds-roller div { animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; transform-origin: 32px 32px; }
.lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7b7e80;
  margin: -3px 0 0 -3px;
}
.lds-roller div:nth-child(1) { animation-delay: -0.036s; }
.lds-roller div:nth-child(1):after { top: 50px; left: 50px; }
.lds-roller div:nth-child(2) { animation-delay: -0.072s; }
.lds-roller div:nth-child(2):after { top: 54px; left: 45px; }
.lds-roller div:nth-child(3) { animation-delay: -0.108s; }
.lds-roller div:nth-child(3):after { top: 57px; left: 39px; }
.lds-roller div:nth-child(4) { animation-delay: -0.144s; }
.lds-roller div:nth-child(4):after { top: 58px; left: 32px; }
.lds-roller div:nth-child(5) { animation-delay: -0.18s; }
.lds-roller div:nth-child(5):after { top: 57px; left: 25px; }
.lds-roller div:nth-child(6) { animation-delay: -0.216s; }
.lds-roller div:nth-child(6):after { top: 54px; left: 19px; }
.lds-roller div:nth-child(7) { animation-delay: -0.252s; }
.lds-roller div:nth-child(7):after { top: 50px; left: 14px; }
.lds-roller div:nth-child(8) { animation-delay: -0.288s; }
.lds-roller div:nth-child(8):after { top: 45px; left: 10px; }
@keyframes lds-roller {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media (min-width: 750px) and (max-width: 1100px)  {
    article h1, .col-35 h1 {font-size:200%; }
    .col-65 h4 {font-size:200%; }
    .basemenu {width:100%}
            .section {min-height:700px;} 
            .circle {width:150px; height:150px}
    .boxes .col-25 { float: left; width: 50%; height:300px}
    .col-25 h3 {font-size:160%}

    .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) {
    .col-15 { float: left; width: 15%; }
    .col-20 { float: left; width: 20%; }
    .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-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}
    .imgfx {background-attachment:fixed;}

    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%; }
    
    footer {text-align: left}
    footer .floatright {float:right}
    footer .floatright p {text-align: right !important}

    #menu {width:50%}

    h1 {font-size:170%; }
    h2, .home {font-size:120%; }
    h3 {font-size:130%; }
    h4 {font-size:200%; }
}