/* PRINCIPALES */
html, body {
	margin: 0px;
	text-align: center;
	padding: 5px;
	background-color: #FFF;
	background: url(./images/css_cuerpo.jpg); background-repeat:repeat;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px; color:#000;
}
.main-workspace { padding: 20px; }

.div_redondo { margin:0 auto; -moz-border-radius:5px; -webkit-border-radius:5px; -khtml-border-radius:5px; border-radius: 5px; }

.divimg_atras {
	position: relative;
	width: 100%; /* for IE 6 */
}
superpos {
	position: absolute;
	width: 100%;
}

.block-center {
    margin-top: auto;
    margin-bottom: auto;
    display: block;
}

/* ENLACES */
a {cursor:pointer !important; text-decoration: none !important;}
.links-black {font-size: 14px; color: #333; font-family: "Oswald";}
.links-black:hover {font-size: 14px; color: #000; font-family: "Oswald";}
.links-black:active {font-size: 14px; color: #000; font-family: "Oswald";}
.links-green {font-size: 14px; color: #9EC545; font-family: "Oswald";}
.links-green:hover {font-size: 14px; color: #9EC545; font-family: "Oswald";}
.links-green:active {font-size: 14px; color: #9EC545; font-family: "Oswald";}
.links-td {font-size: 14px; color: #FFF; font-family: "Oswald";}
.links-td:hover {font-size: 14px; color: #000; font-family: "Oswald";}
.links-td-menu {font-size: 14px; color: #999; font-family: "Oswald";}
.links-td-menu:hover {font-size: 14px; color: #000; font-family: "Oswald";}

/* BOTONES ENLACES */
.bt-status-ok {
	font-size: 14px; color: #FFF; font-family: "Oswald"; line-height:15px;
	padding: 10px;
	background-color: #9EC545;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	-khtml-border-radius:10px;
	border-radius: 10px;
}

/* ENCABEZADOS */
.recuadro_encabezado {
	font-size: 16px; font-style: normal; color: #fff; font-family: "Oswald"; padding: 10px;
	background-color:#9EC545;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-khtml-border-radius:5px;
	border-radius: 5px;
}
.recuadro_encabezado_critico {
	font-size: 16px; font-style: normal; color: #fff; font-family: "Oswald"; padding: 10px;
	background-color:#900;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-khtml-border-radius:5px;
	border-radius: 5px;
}

/* TABLAS */
.table-border { border: 1px solid #ccc; background-color:#FFF; border-radius: 10px;}
.table-border td{ border:hidden;}
.table-td-border {  border: 1px solid #ccc !important; border-radius: 10px; }
.table-td-hover:hover { background-color:#EAEAEA; }
.table-header-gris {  border-top: 1px solid #ccc !important; border-bottom: 1px solid #ccc !important; background-color:#EAEAEA; font-size: 16px; font-style: normal; color: #000; font-family: "Oswald"; padding-left: 10px;}

.cards-td {
	border: 1px solid #CCC !important;
	margin:5px; 
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-khtml-border-radius:5px;
	border-radius: 5px; background-color: #FFF;

}
.cards-td-personal:hover { border: 1px solid #000; background-color:#EAEAEA;}
.cards-td-nombres {font-size: 16px; color: #000; font-family: "Oswald";}
.cards-td-valor {font-size: 16px; color: #000; font-family: "Oswald";}
.cards-td-icons {font-size: 14px; color: #333; border-bottom: 1px dotted #999 !important;}
.cards-td-items {font-size: 12px; color: #333; border-bottom: 1px dotted #999 !important;}

.data-table-th {font-size: 14px !important; color: #000; font-family: "Oswald"; font-weight:normal !important;}
.data-table-th i{font-size: 20px !important; color: #000; font-weight:normal !important;}
.data-table-tit {font-size: 12px !important; font-family: "Oswald"; color: #000; font-weight:normal !important;}
.data-table-textos {font-size: 12px !important; color: #000; font-weight:normal !important;}
.data-table-textos-min {font-size: 10px !important; color: #000; font-weight:normal !important;}



/* IMAGENES */
img { vertical-align: middle; }
.img-full { width: 100%; height:auto; }
.img-circle { border-radius:50%; overflow:hidden; }
.img-grayscale { filter: grayscale(1); opacity: 0.5; }
.img-div-resize {  margin:0px auto; text-align:center; overflow: hidden; width: 100%;}
.img-div-resize img { max-width:100%; vertical-align:middle;}

/* TEXTOS */
.main-titulos {font-size: 38px; color: #333; font-family: "Oswald"; }
.main-subtitulos {font-size: 28px; color: #333;font-family: "Oswald";}
.main-subtitulos-med {font-size: 22px; color: #333;font-family: "Oswald";}
.main-subtitulos-min {font-size: 16px; color: #333;font-family: "Oswald";}
.main-subtitulos-shadow {font-size: 24px; color: #FFF;font-family: "Oswald"; text-shadow: 2px 2px #000;}

.main-textos {font-size: 14px; color: #000; font-weight: normal;}
.main-textos-min {font-size: 11px; color: #000; font-weight: normal;}
.main-textos-help {font-size: 12px; color: #000; font-weight: normal;}
.main-slogan {font-size: 22px; color: #333;font-family: "Raleway"; }
.main-slogan-med {font-size: 18px; color: #333;font-family: "Raleway"; }
.main-slogan-min {font-size: 12px; color: #333;font-family: "Raleway"; }

.main-results-b {font-size: 16px; color: #FFF;font-family: "Raleway"; }
.main-results-b-min {font-size: 12px; color: #FFF;font-family: "Raleway"; }

.main-result-ok {font-size: 10px; color: #060;}
.main-result-error {font-size: 10px; color: #F00; }

.main-valor-big {font-size: 28px; color:#093;font-family: "Oswald";}
.main-valor-med {font-size: 22px; color:#093;font-family: "Oswald";}
.main-valor-min {font-size: 16px; color:#093;font-family: "Oswald";}

.main-textos-3cols {
	-webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}


/* TEXTURAS FONDOS */
.textura_trans {background: url(./images/css_trans.png); background-repeat:repeat;}
.textura_maintrans0 {background: url(./images/css_trans_0.png); background-repeat:repeat;}
.textura_maintrans1 {background: url(./images/css_trans_1.png); background-repeat:repeat;}
.textura_maintrans2 {background: url(./images/css_trans_2.png); background-repeat:repeat;}
.textura_maintrans3 {background: url(./images/css_trans_3.png); background-repeat:repeat;}

/* FORMULARIOS */

.custom-form input, select, textarea { 
	outline:none !important;
	border:1px solid #CCC;
    background-color: transparent !important;
    padding:10px;
    color: #000;
    font-size:14px !important;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-khtml-border-radius:5px;
	border-radius: 5px;
	resize: none; width:90% !important;
}

.custom-form select{ 
    font-size:12px !important;
}

.custom-form input:focus { color:#000; }
.custom-form button {
    outline:0;
	color:#fff;
    border:0px solid #666;
    background-color: #9EC545;
    padding:8px; font-family: "Oswald"; font-size: 14px; cursor: pointer;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-khtml-border-radius:5px;
	border-radius: 5px;

}
.custom-form button:hover { color:#000;}
::placeholder { color: #CCC; opacity: 1; }
:-ms-input-placeholder { color: #CCC; }
::-ms-input-placeholder { color: #CCC; }
.custom-form-item {font-size: 14px; color: #333;font-family: "Raleway";}


/* The Overlay PARA COLOCAR NOTIFICACION DE OPERACIONES(background) */
.overlay-notif {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */    
    height: 100%;
    width: 100%;
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(0,0,0); /* Black fallback color */
    background-color: rgba(0,0,0, 0.8); /* Black w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-notif-content {
    position: relative;
    top: 45%; /* 25% from the top */
    width: 100%; /* 100% width */
    text-align: center; /* Centered text/links */
    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
	font-size: 16px; color: #FFF;font-family: "Raleway";
}

/* The navigation links inside the overlay */
.overlay-notif a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #818181;
    display: block; /* Display block instead of inline */
    transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay-notif a:hover, .overlay-notif a:focus {
    color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlay-notif .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
    .overlay-notif a {font-size: 20px}
    .overlay-notif .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
    }
}

/*ANIMACIONES*/
.anim-popout {
    animation: popout 1s ease;
    -webkit-animation: popout 1s ease;
}
@keyframes popout {
    from{transform:scale(0)}
    to{transform:scale(1)}
}
@-webkit-keyframes popout {
    from{-webkit-transform:scale(0)}
    to{-webkit-transform:scale(1)}
}

.anim-pulse-button {

  position: relative;
  border: none;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  cursor: pointer;
  -webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
}
.anim-pulse-button:hover 
{
  -webkit-animation: none;-moz-animation: none;-ms-animation: none;animation: none;
}

@-webkit-keyframes pulse {to {box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);}}
@-moz-keyframes pulse {to {box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);}}
@-ms-keyframes pulse {to {box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);}}
@keyframes pulse {to {box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);}}

.anim-fadein {
   -webkit-animation-name: fadeIn;
   animation-name: fadeIn;
   -webkit-animation-duration: 5s;
   animation-duration: 5s;

}
@keyframes fadeIn {
   0% {opacity: 0;}
   100% {opacity: 1;}
}