* { outline: none !important; }
body { font-family: 'Open Sans', arial; color: black; background-color:#f3f3f3; font-size: 14px; }

[data-csstitle] {
    position: relative;
}

[data-csstitle]:hover:after {
  content: attr(data-csstitle);
  padding: 4px 8px;
  color: yellow;
  font-family: 'Open sans';
  font-size:16px;
  position: absolute;
  left: 20px;
  top: 100%;
  white-space: nowrap;
  /*z-index: 20px;*/
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 4px #222;
  -webkit-box-shadow: 0px 0px 4px #222;
  box-shadow: 0px 0px 4px #222;
  background-image: -moz-linear-gradient(top, #000, #444);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #000),color-stop(1, #444));
  background-image: -webkit-linear-gradient(top, #000, #444);
  background-image: -moz-linear-gradient(top, #000, #444);
  background-image: -ms-linear-gradient(top, #000, #444);
  background-image: -o-linear-gradient(top, #000, #444);
  z-index:10000;
}

/* COLORES */
.light-grey { color:#f3f3f3; }
.soft-grey { color:#e6e6e6; }
.hard-grey { color:#59585b; }
.yellow { color:#ffea00; }
.white { color:white !important; }
.black { color:black; }
.red { color:red; }
.dark-red { color:#B02943; }
.green { color:green; }

.bg-light-grey { background-color: #f3f3f3; }
.bg-soft-grey { background-color: #e6e6e6; }
.bg-hard-grey { background-color: #59585b; }
.bg-input-grey { background-color:#D8D8D8; }
.bg-button-grey { background-color:#B1B1B1; }
.bg-yellow { background-color: #ffea00; }
.bg-error { background-color: red; }
.bg-red { background-color: #CA1414;  }
.bg-white { background-color: white; }
.bg-black { background-color: black;  }

/* COMPORTAMIENTO */
.d-inline { display:inline; }
.d-inline-block { display:inline-block; }
.padding-reset { padding:0; }
.rl-padding-reset { padding-left:0; padding-right: 0; }
.r-padding-reset { padding-right: 0; }
.l-padding-reset { padding-left: 0; }
.tb-padding-reset { padding-top:0 !important; padding-bottom:0 !important; }
.mr-reset { margin-right: 0 !important; }
.ml-reset { margin-left: 0 !important; }
.float-left { float:left; }
.float-right {float:right; }
.ml8-negative { margin-left:-8px; }
.position-absolute { position: absolute; }
.position-relative { position: relative; }
.clearfix { float:none; clear:both; }
.no-hover:hover { background-color:transparent !important; cursor:default; }

/* POSICION */
.float-none { float:none; }
.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}
.vtop {
    vertical-align: top;
}


/* TAMANO */
.full-width { width:100%; }
.half-width { width:50%; }


/* APARIENCIA */
.border-reset {
    -webkit-border-radius: initial;
    -moz-border-radius: initial;
    -o-border-radius: initial;
    border-radius: initial;
    border: initial;
}

.box-shadow-reset {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.shadow {
    -webkit-box-shadow: 0px 6px 19px -5px rgba(0,0,0,0.7);
    -moz-box-shadow: 0px 6px 19px -5px rgba(0,0,0,0.7);
    box-shadow: 0px 6px 19px -5px rgba(0,0,0,0.7);
}

.zero-opacity { opacity: 0; }

/* CUSTOM FONTAWESOME SIZE */
.fa-clg {
  font-size: 1.33333333em;
  line-height: .75em;
  vertical-align: -15%;
}

/* TIPOGRAFIA */
.f24 { font-size: 24px; }
.f22 { font-size: 22px; }
.f18 { font-size: 18px; }
.f16 { font-size: 16px; }
.f14 { font-size: 14px; }
.f13 { font-size: 13px; }
.f12 { font-size: 12px; }
.font-reset { font-family: 'Open Sans', arial; }
.font-bold { font-weight: 800; font-style: bold; }
.font-normal { font-weight: 400; font-style: normal; }
.font-italic { font-style: italic; }
.lh-reset { line-height: 0; }
.uppercase { text-transform: uppercase; }
.hidden-text { text-indent: -99999px; }
.text-left { text-align: left;  }
/* "LOCALIZACIÓN" */
.english {
    font-style:italic;
}

/* ANIMACIONES */
button {
    transition: width .5s;
}