html, body { height:100%; width:100%; margin:0; padding: 0; background:#ffffff; 
font-family: sans-serif,Helvetica,Arial ; font-size:16px; color:#000000; 
transition: background 0.75s linear;
-moz-transition: background 0.75s linear; /* Firefox 4 */
-webkit-transition: background 0.75s linear; /* Safari and Chrome */
-o-transition: background 0.75s linear; /* Opera */

}
body{ height: 100%; width:100%; margin:0; padding:0;   }
.logo_{ font-size:0.7em; visibility:hidden; }


#preloader {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100vh;
  background: #de474e;
  z-index: 9999999999;
  transition: all 0.4s ease;
}

.loader {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  transition: 0.4s;
}

.loader .loader_text {
  font-size: 50px;
  font-weight: 600;
  font-family: sans-serif;
  color: #ffffff;
  margin: 20px auto;
  text-align: center;
}

.loader .loader_bar  {
  position: relative;
  width: 500px;
  height: 12px;
  background: #ffffff;
  border-radius: 50px;
}

.loader .loader_bar:before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: #EDEEF7;
  border-radius: 50px;
  animation: fill 0.3s ease;
}

@keyframes fill {
  0% { width: 0% }
  100% { width: 100% }
}




.sidemenu{ position:fixed; width:100%; height:75px; margin:0; top:0; left:0;   z-index:999999999; overflow-y:auto;
   bordser-bottom: solid 1px #e7e7e7; }
.btnmenu{ padding:7px 20px; color:#ffffff; text-transform: uppercase; }
.btnmenu:hover{ cursor: pointer;  color:#de474e; }
.btnmenu_active{  color:#de474e; }


.logo{ 
  display: flex;  align-items: center; justify-content: center; width: 100px; height: 70px; margin: auto;
  font-size:2em; font-weight:normal;  background:#bf0411 ; color:#fff; border:none; padding: 7px 10px;
}

.subslogo { font-size:0.6em; display:block; padding:0; margin-top:2px; margin-bottom:4px; line-height:1em; color:#ffffff; }
  
.slogan{ display:inline-block; vertical-align:middle; font-size:5em; line-height:1em; 
  padding:50px 15px;  text-align:center; font-weight:normal; 
  background:#bf0411 ; color:#fff; border:none; 
}

.subslogan { font-size:1.1em; display:block; padding:0; margin-top:10px; line-height:1em; }

.frase{	
  text-align:center; display:inline- block; color: #ffffff; margin: auto; font-size: 3.4em;
  max-width:500px; width:500px; clear: both;
}

.footer{ color: #7c7c7c; font-size:11px; }

.btncirculo{ padding:7px; width: 30px; height: 30px; color:#ffffff; border:solid 0.75px #ffffff; border-radius: 100%;
  display: flex;  align-items: center; justify-content: center;
}

.slider{
  background: url('slider/slide-1.jpg');
  background-repeat: no-repeat; background-size: 100% 100%;  
  transition: background 0.75s linear;
  -moz-transition: background 0.75s linear; 
  -webkit-transition: background 0.75s linear;
  -o-transition: background 0.75s linear;

/*
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;*/


}



.cuadro{ width:50px; height:60px; color:#212529; text-align: center;  }
.tarjeta{ width:100%; margin: auto; }
.tarjeta td{ padding: 30px; text-align: center; }

.numero{ font-size:3em; }

.numero > span{  text-align: center; position:relative;
  display:block; font-size: 0.7rem; line-height: 0.7rem; color:#888;
}

.numero > i{  text-align: center; position:relative;  margin-top: -50px; 
   font-size: 1.8rem; display: inline-block; }

.numero2{ font-size:3em; display: block; line-height:0.75em; padding-left:5px; }

.numero2 > span{  text-align: center; bottom:10px; left:30px; position:relative;
  display:block; font-size: 0.7rem; line-height: 0.7rem; color:#888;
}

.titulo{padding: 5px; font-size: 1.75em; font-weight: 400; height: 150px;}
.subtitulo{ padding:5px; height: 30px; }

.rotar90{   width:15px;
  position:relative;  bottom:10px;
  -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); 
  -ms-transform: rotate(90deg); -o-transform: rotate(90deg); 
  transform: rotate(90deg);
}

.rotar_izq{  color:#ececec; font-size: 7em; width:15px;
  position:relative;  left:40px; top:-35px;
  -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); 
  -ms-transform: rotate(90deg); -o-transform: rotate(90deg); 
  transform: rotate(90deg); z-index: -9999; z-index: -10;
}

.rotar_der{ color:#ececec; font-size: 7em; position: relative; 
  right:30px; width: 15px; text-align: right; bottom:-80px;
  -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); 
  -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); 
  transform: rotate(-90deg); z-index: -9999; z-index: 0;
}

.rotar_der2{ font-size: 0.95em; position: relative; 
    right:30px; width: 15px; text-align: right; bottom:-80px;
    -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); 
    transform: rotate(-90deg); z-index: -9999;
  }

.modal{ position:fixed; width:100%; height:100%; margin:0; top:0; left:0;
  background:#ffffff;  z-index:999999999; overflow-y:auto; 
}
.btn_modal{ height:20px;  border:none; padding: 5px; }
.btn_modal:hover{ color:#333333; }

.itemproyecto{ border: solid 1px #cccccc; padding: 15px; width:200px; height: 200px; }
.itemproyecto svg { margin-left: 80px; margin-top:-75px;}
.itemproyecto p{ font-size: 0.85em; }
.itemproyecto span{ display: block; margin-bottom: 500px;  bottom: 0; background:#ffffff; color: #a7a7a7; position: relative; }

.globo { 
  background-color:#f1f1f1; border:0px solid #f1f1f1; font-size:0.8em; line-height:1.4em; margin:10px auto; padding:10px; 
  position:relative;  text-align: left; width:80%; text-align:justify; -moz-border-radius:10px; 
  -webkit-border-radius:10px; border-radius:10px; 
}

.globo-arrow-border { border-color:#f1f1f1 transparent transparent transparent; border-style: solid;  
  border-width: 10px; height:0; width:0; position:absolute; bottom:-20px; left:30px; 
}

.numerolista { background: #f1f1f1; padding:15px 20px; font-weight:bold; 
  font-size:1.5em; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }
.l_tit{ display:block; font-weight: bold; font-size:0.9em; }
.l_desc { font-size:0.8em; text-align:left; margin-bottom:15px; }

.organigrama { padding:10px; }
.organigrama td{ width:50px; height:20px; text-align:center; padding:5px;}
.organigrama .cuadro{ width:100px; border:solid 1px #ccc; }
.organigrama .linea { border-bottom:solid 1px #ccc;}
.organigrama .linea2 { border-right:solid 1px #ccc;}
.organigrama .escuadra { border-right:solid 1px #ccc; border-bottom:solid 1px #ccc;}

/*grafica circular*/
.grafica{ width: 375px; height:355px; }
.circulo1{  display:block; background:#ff0099; border:solid 1px #333;
width:250px; height:250px; border-radius: 100%; z-index:1; position: absolute;
margin-top:45px; margin-left:45px;
}
.circulo2{  display:block; background:#ff0000;z-index:2; border:solid 1px #333;
margin-top:20px; margin-left: 20px; width:210px; height:210px; border-radius: 100%; 
}
.circulo3{  display:block; background:#9933cc; z-index:3; border:solid 1px #333;
margin-top:20px; margin-left:20px; width:170px; height:170px; border-radius: 100%; 
}
.circulo4{  display:block; background:#ffff00;z-index: 4; border:solid 1px #333;
margin-top:20px; margin-left: 20px; width:130px; height:130px; border-radius: 100%;
}
.circulo5{  display:block; background:#00ff00;z-index: 5;  border:solid 1px #333;
margin-top:20px; margin-left: 20px; width:90px; height:90px; border-radius: 100%;
}

.cartesiano{ display: block; width:375px; height:350px; z-index:1000; position: absolute; }
.cartesiano .borde-aba{ border-color: #000000; border-width: 2px; }
.cartesiano .borde-der{ border-color: #000000; border-width: 2px; }

/* piramide */
.trapezio1 { width: 200px; height: 0;display:block;border-left: 25px solid transparent;border-right: 25px solid transparent;
  border-bottom: 50px solid #FFD700; /*#F0E68C;*/
}

.trapezio2 {display:block; margin-left:25px;width: 150px;height: 0;border-left: 25px solid transparent;
  border-right: 25px solid transparent; border-bottom: 50px solid 	#00FFFF ;/* #7FFFD4;*/
}

.trapezio3 {display:block; margin-left:50px; width: 100px;height: 0;border-left: 25px solid transparent;
  border-right: 25px solid transparent;border-bottom: 50px solid #20B2AA;
}

.trapezio4 {display:block; margin-left:75px; width: 50px; height: 0; border-left: 25px solid transparent;
  border-right: 25px solid transparent;border-bottom: 50px solid #FF8C00;
}

.triangulo { margin-left:100px;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid	#DC143C;
text-align: left;
}

.multidoc{
  background-image: url('multidoc.png'); background-size: 100% 100%; padding-left:3px; padding-right:15px;
}
.doc{
  background-image: url('doc.png'); background-size: 100% 100%; padding:15px 5px !important ; 
}
.condicional{
  background-image: url('condicional.png'); background-size: 100% 100%; padding:1px; 
}

.salida{
  background-image: url('salida.png'); background-size: 100% 100%;
fosnt-size: 0.75em; padding:5px; 
}
.row{   float:left; margin: 5px; } 
.td{  padding: 10px; width: 250px; height: 180px; border:solid 1px #cccccc;  text-align: center;  color:#ffffff;
    display: flex;justify-content: center; align-items: center; }
    .td span{ font-size: 1.2em; text-align: left;  white-space:nowrap; }
    .td b { display: block; }
    .td i{ margin-top: -50px;  position: fixed; top: 0;}
.td:hover{ color:#ffffff; background:#bf0411;
  -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);  }
.td b{ display: block; }

.tag{   float:left; margin: 10px; width: 170px; height: 180px; border-left:solid 1px#cccccc; border-bottom:solid 1px#cccccc; 
 border-right:solid 1px transparent;  border-top:solid 1px transparent; text-align: center; padding:25px;  transform: scale(0.85); } 
.tag span{ text-align: center; margin-top: 60px; margin-left: 36px; display: block; position: relative; background: #ffffff; width: 160px;}

.tag:hover{ color:#000000; border:1px solid #bf0411;  transform: scale(1); }
.tag:hover span{ color:#bf0411; }


.card{ border: solid 2px #ffffff; background: rgba(255, 255, 255, 0.95); color:#000000; 
  /*-moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; */}

.btn_link{  padding:15px; border:none;  letter-spacing: 1px; background: none;  }
.btn_link:hover, .btn_link:focus { cursor: pointer; text-decoration: line-through;  }

.btn_gral{ background:#000000; color:#fff; border-radius:3px; border:none; padding:15px 30px; }
.btn_gral:hover,.btn_gral:focus{ background: #de474e; outline:none;  border:none;}

.btn_red{ background:#de474e; color:#ffffff; border-radius:3px; border:none; padding:15px 30px; }
.btn_red:hover,.btn_red:focus{ background: #ffffff; outline:none;  border:none;}

button:active,.btn_gral:active {
  outline: none;
  border: none;
}

.tab{ width: 100%;height:100%; }
.tab .tab-btn{ height:35px; text-align: center; padding: 5px; 
color:#c2c2c2; text-decoration: line-through; }
.tab .tab-btn:hover{ color: #333333; text-decoration: line-through;  }
.tab-btn.activo{ color: #333; text-decoration: none; font-weight: bold;  }
.tab-cont { display:none;}
.tab-cont.activo{ display: table;}

.notificacion{ position: fixed; bottom:0; left:0; right:0;
width:100%; background: #333333; color: #ffffff; z-index: 9999999999;
}


/*********************************************************************************/
/* TEXTBOX   */
/*********************************************************************************/

.matter-textfield-standard {position: relative; display: inline-block; 
line-height: 1.5; width: 100%; }

/* Input, Textarea */
.matter-textfield-standard > input,
.matter-textfield-standard > textarea {
display: block; box-sizing: border-box; margin: 0;border: none;
border-top: solid 24px transparent; border-bottom: solid 1px #888;
padding: 0 0 7px; width: 100%; height: inherit; color: #333;
-webkit-text-fill-color: currentColor; background-color: transparent;
box-shadow: none; font-family: inherit; font-size: inherit;line-height: inherit;
caret-color:#888; transition: border-bottom 0.2s, background-color 0.2s;
}

/* Span */
.matter-textfield-standard > input + span,
.matter-textfield-standard > textarea + span {
position: absolute;top: 0; left:0; right:0; bottom: 0; display: block;
box-sizing: border-box; padding: 7px 0 0; color:#888; font-size: 75%;
line-height: 18px; pointer-events: none; 
transition: color 0.2s, font-size 0.2s, line-height 0.2s;
}

/* Underline */
.matter-textfield-standard > input + span::after,
.matter-textfield-standard > textarea + span::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
display: block;
width: 100%;
height: 2px;
background-color: #333;
transform-origin: bottom center;
transform: scaleX(0);
transition: transform 0.2s;
}

/* Hover */
.matter-textfield-standard:hover > input,
.matter-textfield-standard:hover > textarea {
border-bottom-color:#333;
}

/* Placeholder-shown */
.matter-textfield-standard > input:not(:focus):placeholder-shown + span,
.matter-textfield-standard > textarea:not(:focus):placeholder-shown + span {
font-size: inherit;
line-height: 56px;
}

/* Focus */
.matter-textfield-standard > input:focus,
.matter-textfield-standard > textarea:focus { outline: none; }

.matter-textfield-standard > input:focus + span,
.matter-textfield-standard > textarea:focus + span { 
color: rgb(var(--matter-helper-theme));
}

.matter-textfield-standard > input:focus + span::after,
.matter-textfield-standard > textarea:focus + span::after {
transform: scale(1);
}

/* Disabled */
.matter-textfield-standard > input:disabled,
.matter-textfield-standard > textarea:disabled {
border-bottom-color: rgba(var(--matter-onsurface-rgb, 0, 0, 0), 0.38);
color: rgba(var(--matter-onsurface-rgb, 0, 0, 0), 0.38);
}

.matter-textfield-standard > input:disabled + span,
.matter-textfield-standard > textarea:disabled + span {
color: rgba(var(--matter-onsurface-rgb, 0, 0, 0), 0.38);
}

/* Faster transition in Safari for less noticable fractional font-size issue */
@media not all and (min-resolution:.001dpcm) {
@supports (-webkit-appearance:none) {
.matter-textfield-standard > input,
.matter-textfield-standard > input + span,
.matter-textfield-standard > input + span::after,
.matter-textfield-standard > textarea,
.matter-textfield-standard > textarea + span,
.matter-textfield-standard > textarea + span::after {
transition-duration: 0.1s;
}
}
}

.tabla {  font-family: Sans-Serif; width:100%; border-collapse: collapse; font-size:1em; border:thin 1px #ccc; }
.tabla th { font-size:0.95em; padding:10px  0px; border: 1px  solid #ebeff2; border: thin solid #ccc; text-align: center;  } 
.tabla td {  padding: 4px; border: thin solid #ccc;  } 
.tabla tbody tr:hover td {  background:#F0F0F0;  }
.tabla tr:nth-child(odd) { background:  #ffffff; background: rgba(255, 255, 255, 0.8); }
.tabla tr:nth-child(even){ background: #F8F8F8; background: rgba(248, 248, 248, 0.75); }
.tabla .opc { width: 75px; }
.tabla .opcred:hover { background: #ff1744; color:#ffffff; }
.tabla tfoot{ font-weight: bold; }
.tabla tfoot tr:nth-child(odd),.tabla tfoot tr:nth-child(even) { background: none;  }

/************************************/
/*   GENERALES  */
/************************************/

table {  border-spacing:0; border-collapse: collapse;  }
td { padding:0; }
ol, ul, h1, h2, h3, h4, h5, h6 { list-style: none; margin:0; padding:0; }
a{ color:#333;  text-decoration: none; }
a:hover{ cursor: pointer;}
hr { background:#ccc;  border: 0; height:1px; }
p{ line-height: 1.75em; }
.block{ display: block; }
.inlineblock{ display: inline-block; }
.padding0{ padding:0px; }
.padding5{ padding:5px; }
.padding10{ padding: 10px; }
.padding15{ padding: 15px; }
.padding20{ padding: 20px; }
.width100{ width: 100%; }
.width98{ width: 98%; }
.width90{ width: 90%; }
.width80{ width: 80%; }
.width75{ width: 74%; }
.width60{ width: 59%; }
.width50{ width: 49%; }
.width40{ width: 39%; }
.width30{ width: 30%; }
.width25{ width: 25%; }
.width500{ width: 500px;}
.width1024{ width: 1024px;}
.mw1024{ max-width: 1024px;}
.w25{ width: 25px;}
.h25{ height: 25px;}
.h50{ height: 50px;}
.h75{ height: 75px;}
.h100{ height: 100px;}
.h125{ height: 125px;}
.td-arriba { vertical-align: top; }
.td-abajo  { vertical-align: bottom; }
.td-medio  { vertical-align: middle; }
.td-derecha{ vertical-align: right; }
.td-izquierda { vertical-align: left; }
.itemtag{ font-size: 0.95em;}


.txt-arriba { text-align: top; }
.txt-abajo  { text-align: bottom; }
.txt-centro { text-align: center; }
.txt-derecha   { text-align: right; }
.txt-izquierda{ text-align: left; }
.txt-justificado{ text-align: justify; }
.txt-esp{letter-spacing: 1.5px;}
.blanco{ color:#ffffff; }
.gris{ color:#888; }
.gris2{ color:#ececec }
.rojo   { color:#de474e; }
.verde  { color:#199f76; }
.azul   { color:#1D51A7; }
.indigo { color:#131e4a; }
.naranja{ color:#f99614; }
.negro{ color: #000000;}
.negrita{ font-weight: bold; }
.negrita2{ font-weight:bolds; color:#8c8c8c; }
.normal{ font-weight: normal;}
.hide { display: none; }

/*paleta2*/
.color1{ color:#35BBCA;}
.bg1{ background:#35BBCA ;}
.color2{ color:#0191B4;}
.bg2{ background:#0191B4; }
.color3{ color:#F8D90F;}
.bg3{ background: #F8D90F;}
.color4{ color:#D3DD18;}
.bg4{ background: #D3DD18;}
.color5{ color:#FE7A15;}
.bg5{ background: #FE7A15;}
/*paleta1
.color1{ color:#C73866;}
.color2{ color:#FE676E;}
.color3{ color:#FD8F52;}
.color4{ color:#FFBD71;}
.color5{ color:#FFDCA2;}*/


.bggris   { background-color:#ccc; }
.bgrojo   { background-color:#de474e; }
.bgrojo95 { background-color: rgba(222, 71, 78, 0.95);}
.bgrojo2  { background: #ff5f58; }
.bgverde  { background-color:#199f76; }
.bgazul   { background-color:#1D51A7; }
.bgindigo { background-color:#131e4a; }
.bgnaranja{ background-color:#f99614; }
.bgnegro  { background: #000000; }
.bgnegro2 { background: #404040; }
.bgblanco{ background: #ffffff;}

.bordegris   { border:solid 1px #333333; }
.borderojo   { border:solid 1px #de474e; }
.bordeverde  { border:solid 1px #199f76; }
.bordeazul   { border:solid 1px #1D51A7; }
.bordeindigo { border:solid 1px #131e4a; }
.bordenaranja{ border:solid 1px #f99614; }

.borde-izq{ border-left:solid 1px #ccc;}
.borde-der{ border-right:solid 1px #ccc;}
.borde-arr{ border-top:solid 1px #ccc;}
.borde-aba{ border-bottom: solid 1px #ccc;}
.borde-aba-dot{ border-bottom: dotted 2px #ccc;}
.borde-arr-dot{ border-top: dotted 2px #ccc;}
.borde-izq-dot{ border-left: dotted 2px #ccc;}
.borde-der-dot{ border-right: dotted 2px #ccc;}
.borde-redondo{-moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px;}
.height100{ height:100%; }
.height95{ height:95%; }
.height90{ height:90%; }
.height25{ height: 25%;}
.alto15{ height: 15px;}
.margen0{ margin:0; }
.margen15{ margin-top: 15px; margin-bottom: 15px; }
.marginauto{ margin:0 auto; }
.tablaespacio{ border-collapse: separate; border-spacing: 10px;  }
.espacioabajo{ margin-bottom: 15px; }
.espacioabajo2{ margin-bottom:7px; }
.espacioabajo3{ margin-bottom:3px; }
.espacioabajo4{ margin-bottom: 50px; }
.espacio{ height: 15px;}
.txtsombra{text-shadow: 1px 1px 1px rgba( 0, 0, 0, 0.25); }
.sombraicon{filter:drop-shadow(2px 2px 2px rgba( 0, 0, 0, 0.25)); }
.lineatxt{ border-bottom:solid 1px #131e4a; }
.lineatxt .text{ display: block; font-weight: bold; fosnt-size: 0.85em; color:#666; }
.float-izq{ float:left; }
.float-der{ float:right; }
.flex-center{ display: flex; justify-content: center; align-items: center;}
.sombra{ -moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); }

.sombra2{ -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); }

.txt-sombra{text-shadow: 2px 1px 1px #000000;}
.txt-sombra2{text-shadow: 1px 0px 0px #ffffff; }
.txt-bordenegro { -webkit-text-stroke: 0.1em #000000; } 
.txt-bordeblanco { -webkit-text-stroke: 0.04em #ffffff; }  

.full{ width:99%; height:100%; margin:0 auto; max-width: 1024px;  } 
.full100{ width:100%; height:100%; margin:0 auto;  }  
.blur { -webkit-filter: blur(3px); -moz-filter: blur(3px); -o-filter: blur(3px); -ms-filter: blur(3px); filter: blur(3px); }
.separada{ border-collapse: separate; border-spacing: 15px;}
.separada .item{ border:solid 1px #f1f1f1}
.separada .item:hover{ cursor: pointer; 
-moz-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
}

.btncv{ position: fixed; bottom: 10px; right: 10px; background: rgba( 0, 0, 0, 0.85);  
  padding: 20px; color: #ffffff; border-radius: 10px; font-size: 0.75em;
}
.banermedia{  width: 100%; max-width: 500px; background: rgba( 0, 0, 0, 0.75); color:#ffffff; margin:0 auto; margin-top:40px;
    float: right;
    position: absolute;
    top: 90px;
    left: 10px;
    
    
  }

.banermedia-txt{ width: 80%; text-align: center; padding:30px 5px 50px 0px ; font-size: 0.65em; /*background: #000000; color:#ffffff; */}

.banermedia-logo{ width:20%; /*min-width: 220px;/*height: 200px; /* background: #000000; color:#ffffff; 
  background-image: url('NMS-01.png');
background-repeat: no-repeat;
background-position: center center; 
background-size: contain; */
}


/*----------------------------------------------------------------------------*/
/*resposive   */
/*----------------------------------------------------------------------------*/

@media only screen and (max-width: 800px) {
.responsiva td{ display: block; width: auto; }
.responsiva .item{ display: inline-block; }
.blockresponsivo{ display: block; width: 99%; }
.noresponsiva td { display: table-cell;}
.rotar_izq{  position: absolute;  left:60px; }
.rotar_der{  position: absolute;  right: 60px; }
.full{ width:95%;}
.grafica{ transform: scale(0.75); width:280px; height: 300px;}
.tab-btn{ display: inline-block;}

}

/*----------------------------------------------------------------------------*/
/* ERROR TEXTBOX  */
/*----------------------------------------------------------------------------*/
.error { -webkit-animation: shake 0.5s; -moz-animation: shake 0.5s; animation: shake 0.5s;  }

@-webkit-keyframes shake 
{ 0%, 100% {-webkit-transform: translateX(0);}
  10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
  20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
}
@-moz-keyframes shake 
{ 0%, 100% {-moz-transform: translateX(0);}
  10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px); }
  20%, 40%, 60%, 80% {-moz-transform: translateX(10px); }
}
@keyframes shake 
{ 0%, 100% {transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% {transform: translateX(-10px); }
  20%, 40%, 60%, 80% {transform: translateX(10px); }
}
/*menu responsive*/

.menu-icon {
  display: none;
  font-size: 26px;
  padding: 14px 20px;
  background-color: #000000;
  color: white;
  cursor: pointer;
}

#menu-toggle {
  display: none;
}

.topnav {
  display: flex;
  flex-wrap: wrap;
  background-color: #000000;
  justify-content: center;
}

.topnav a {
  color: white;
  padding: 14px 20px;
  text-decoration: none;
  text-align: center;
  display: block;
}

.topnav a:hover {
  vfbackground-color: #575757;
}

/* Responsive */
@media screen and (max-width: 768px) {
  .topnav {
    display: none;
    flex-direction: column; position: fixed; right: 0; width: 100%;
  }

  #menu-toggle:checked + .menu-icon + .topnav {
    display: flex;
  }

  .menu-icon {
    display: block;
  }
}
/*===== animated angle-down=====*/
.rotar{ transform: rotate(180deg);}
    .rotar.scroll-prompt-arrow > div{  border-right: 2px solid #000000;
		border-bottom: 2px solid #000000;}

.scroll-prompt {
	position: absolute;
	z-index: 998;
	left: 50%;
	margin-left: -60px;
	width: 50px;
	height: 50px;

	.scroll-prompt-arrow-container {
		position: absolute;
		
	}
	.scroll-prompt-arrow {
		animation-name: opacity;
		animation-duration: 1.5s;
		animation-iteration-count: infinite;
	}
	.scroll-prompt-arrow:last-child {
		animation-direction: reverse;
	}
	.scroll-prompt-arrow > div {
		width: 10px;
		height: 10px;
		border-right: 2px solid #bebebe;
		border-bottom: 2px solid #bebebe;
		transform: rotate(45deg);
	}
}

@keyframes opacity {
	0% {
		opacity: 0;
	}

	10% {
		opacity: 0.1;
	}

	20% {
		opacity: 0.2;
	}

	30% {
		opacity: 0.3;
	}

	40% {
		opacity: 0.4;
	}

	50% {
		opacity: 0.5;
	}

	60% {
		opacity: 0.6;
	}

	70% {
		opacity: 0.7;
	}

	80% {
		opacity: 0.8;
	}

	90% {
		opacity: 0.9;
	}

	100% {
		opacity: 1;
	}
}

@keyframes bounce {
	0% {
		transform: translateY(0);
	}

	10% {
		transform: translateY(3px);
	}

	20% {
		transform: translateY(6px);
	}

	30% {
		transform: translateY(9px);
	}

	40% {
		transform: translateY(12px);
	}

	50% {
		transform: translateY(15px);
	}

	60% {
		transform: translateY(18px);
	}

	70% {
		transform: translateY(21px);
	}

	80% {
		transform: translateY(24px);
	}

	90% {
		transform: translateY(27px);
	}

	100% {
		transform: translateY(30px);
	}
}

/*===== Vertical Timeline =====*/
#conference-timeline { 
  position: relative;
  max-width: 920px;
  width: 100%;
  margin: 0 auto;
  margin-top: 100px;
}
#conference-timeline .timeline-start {
  display: table;
  font-size: 1.85em;
  font-weight: 900;
  background: #ffffff;
  paddisng: 15px 23px;
  colfor: #fff; 
  
  width: 100%;
  text-align: center;
  margin: 0 auto;
}


#conference-timeline .timeline-end {
  display: table;
  
  font-size: 16px;
  font-weight: 900;
  padding: 15px 23px; background: #ffffff;
  width: 100%;
  text-align: center;
  margin: 0 auto;
}

#conference-timeline .conference-center-line {
  position: absolute;
  width: 3px;
  height: 100%;
  top: 0;
  left: 50%;
  margin-left: -2px;
  background: #000000;
  z-index: -1;
}
#conference-timeline .conference-timeline-content {
  padding-top: 37px;
 /* padding-bottom: 67px; */
}
.timeline-article {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  margin: 20px 0;
}
.timeline-article .content-left-container,
.timeline-article .content-right-container {
  max-width: 44%;
  width: 100%;
}
.timeline-article .timeline-author {
  display: block;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  color: #242424;
  text-align: right;
}
.timeline-article .content-left,
.timeline-article .content-right {
  position: relative;
  width: auto;
  border: 1px solid #ddd;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.03);
  padding: 27px 25px;
}
.timeline-article p {
  margin: 0 0 0 60px;
  padding: 0;
  font-weight: 400;
  color: #242424;
  font-size: 14px;
  line-height: 24px;
  position: relative;
}
.timeline-article p span.article-number {
  position: absolute;
  font-weight: 300;
  font-size: 44px;
  top: 10px;
  left: -60px;
  color: #000000;
}
.timeline-article .content-left-container {
  float: left;
}
.timeline-article .content-right-container {
  float: right;
}
.timeline-article .content-left:before,
.timeline-article .content-right:before{
  position: absolute;
  top: 20px;
  font-size: 23px;
  font-family: "FontAwesome";
  color: #fff;
}
.timeline-article .content-left:before {
  content: "\f0da";
  right: -8px;
}
.timeline-article .content-right:before {
  content: "\f0d9";
  left: -8px;
}
.timeline-article .meta-date {
  position: absolute;
  top: 0;
  left: 50%;
  width: 62px;
  height: 62px;
  margin-left: -31px;
  color: #fff;
  border-radius: 100%;
  background: #000000;
}
.timeline-article .meta-date .date,
.timeline-article .meta-date .month {
  display: block;
  text-align: center;
  font-weight: 600;
}
.timeline-article .meta-date .date {
  font-size: 20px;
  line-height: 30px;
}
.timeline-article .meta-date .month {
  font-size: 18px;
  line-height: 10px;
}
/*===== // Vertical Timeline =====*/

/*===== Resonsive Vertical Timeline =====*/
@media only screen and (max-width: 830px) {
  .banermedia-txt{ text-align: left; padding: 10px; /*background: #000000; color:#ffffff; */}

  #conference-timeline .timeline-start,
  #conference-timeline .timeline-end {
    margin: 0; text-align: left; padding-left: 10px; display: inline-block;
  }
  #conference-timeline .conference-center-line {
    margin-left: 0;
    left: 50px;
  }
  .timeline-article .meta-date {
    margin-left: 0;
    left: 20px;
  }
  .timeline-article .content-left-container,
  .timeline-article .content-right-container {
    max-width: 100%;
    width: auto;
    float: none;
    margin-left: 110px;
    min-height: 53px;
  }
  .timeline-article .content-left-container {
    margin-bottom: 20px;
  }
  .timeline-article .content-left,
  .timeline-article .content-right {
    padding: 10px 25px;
    min-height: 65px;
  }
  .timeline-article .content-left:before {
    content: "\f0d9";
    right: auto;
    left: -8px;
  }
  .timeline-article .content-right:before {
    display: none;
  }
}
@media only screen and (max-width: 400px) {
  .timeline-article p {
    margin: 0;
  }
  .timeline-article p span.article-number {
    display: none;
  }
  
}
/*===== // Resonsive Vertical Timeline =====*/