@charset "UTF-8";

/*------------------------------------*\
    $PLACEHOLDERS
\*------------------------------------*/

/**
* Escondemos pero mantenemos layout.
*/
/**
* Visualmente escondido, pero se puede detectar con teclado (focus).
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  position: static;
  clip: auto;
  height: auto;
  width: auto;
  margin: 0;
  overflow: visible; }


/*------------------------------------*\
    fonts
\*------------------------------------*/ 
 
/*@font-face {
	font-family: 'icomoon';
	src: url('../fonts/icomoon.eot');
	src: url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
	     url('../fonts/icomoon.woff') format('woff'),
	     url('../fonts/icomoon.ttf') format('truetype'),
	     url('../fonts/icomoon.svg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}*/

@font-face {
    font-family: 'stag';
    src: url('../fonts/stag/Stag-Sans-Medium.otf') format("opentype");
}

@font-face {
    font-family: 'Din';
    src: url('../fonts/Din/DINPro-Medium.otf') format("opentype");
  font-weight: normal;
  font-style: normal;
}


/*------------------------------------*\
    $RESET
\*------------------------------------*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, main, menu, nav, section, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 1rem;
  vertical-align: baseline;
  background: transparent; }

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  display: block; }

*, *::before, *::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box; }

/**
* Selectores de elemento: un super "normalize":
**/
/*------------------------------------*\
    $ELEMENTOS-FIGURE
\*------------------------------------*/
figure {
  /*margin-bottom: 0.1em;*/ }
  figure img {
    /*margin-bottom: 0.1em;*/ }
  figure figcaption {
    display: block;
    font-weight: normal;
    font-size: 0.8rem;
    font-style: italic;
    color: gray; }

   figure#cambiado {
position: absolute;
top: 0;
left:0;
width: 100vw;
height: 100vh;  
background-image: url(../imagenes/bg0.jpg); /*default*/
background-size: cover;
background-position: center center; 
 z-index:-1;
} 

/*------------------------------------*\
    $FORMULARIOS
\*------------------------------------*/
form {
  margin: 0; 
  background: #f9f9f9;}
  form fieldset {
    margin-bottom: 1.5em;
    padding: 0;
    border-width: 0; }
  form legend {
    display: inblock;
    width: 100%;
    margin-bottom: 3em;
    padding: 0;
    color: #222;
    border: 0;
    border-bottom: 1px solid #bfbfbf;
    white-space: normal; }
    form legend small {
      font-size: 0.8rem;
      color: #bfbfbf; }
  form p {
    margin-bottom: 0.75em; }
  form ul {
    list-style-type: none;
    margin: 0 0 1.5em 0;
    padding: 0; }
  form br {
    /*display: none; */}

label,
input,
button,
select,
textarea {
  font-size: 0.8rem;
  border-radius: 2px;
  vertical-align: middle;
  *vertical-align: middle; }

input,
button,
select,
textarea {
  font-family:Arial, Helvetica, "Helvetica Neue", sans-serif;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box; }

label {
  display: inline-block;
  margin-bottom: 0.1875em;
  font-weight: bold;
  color: #222;
  cursor: pointer; }
  label input,
  label textarea,
  label select {
    display: block; }

input,
textarea,
select {
  display: inline-block;
  /*width: 180px;*/
  width: 100%;
  padding: 4px;
  margin-bottom: 0.375em;
  background-color: #fff;
  border: 2px solid #a7a9ac; 
  color: #222; 
    border-radius:4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px; 
  }
  input:hover,
  textarea:hover,
  select:hover {
    border-color: #007cd5; 
    background-color: #eee;}

.input-mini {
  width: 60px; }

.input-small {
  width: 90px; }

input[type="image"],
input[type="checkbox"],
input[type="radio"] {
  width: auto;
  height: auto;
  padding: 0;
  margin: 2px 1px;
  *margin-top: 0;
  line-height: normal;
  cursor: pointer;
  border: 0 \9; }

input[type="checkbox"],
input[type="radio"] {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  *width: 13px;
  *height: 13px; }

input[type="image"] {
  border: 0;
  -webkit-box-shadow: none;
  box-shadow: none; }

input[type="file"] {  
  padding: initial;
  line-height: initial;
  border: initial;
  background-color: transparent;
  background-color: initial;
  -webkit-box-shadow: none;
  box-shadow: none; }

  .file-input {
  visibility: hidden;
   width: 50%
  position: relative;
}
.file-input::before {
  content: 'Suba una foto';
  display: inline-block;
  background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
  border: 1px solid #999;
  border-radius: 4px;
  padding: 0px 10px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  text-shadow: 1px 1px #fff; 
  font-size: 0.8rem;
  visibility: visible;
  position: absolute;
}
.file-input:hover::before {
  border-color: black;
}
.file-input:active::before {
  background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}

/*input[type="button"],
input[type="reset"],
input[type="submit"] {
  width: auto;
  height: auto;
  cursor: pointer;
  *overflow: visible; 
  -webkit-appearance: none;
  padding:0.1em 1em; }*/

select,
input[type="file"] {
  height: 28px;
  *margin-top: 2px;
  line-height: 28px;
  }

select {
  background-color: white;
  font-size: 0.9rem; }

select[multiple],
select[size] {
  height: auto; }

textarea {
  resize: vertical;
  overflow: auto;
  height: auto;
  overflow: auto;
  vertical-align: top; }

input[type="hidden"] {
  display: none; }

.radio,
.checkbox {
  padding-left: 18px;
  font-weight: normal; }

.radio input[type="radio"],
.checkbox input[type="checkbox"] {
  float: left;
  margin-left: -18px; }

.radio.inline,
.checkbox.inline {
  display: inline-block;
  padding-top: 5px;
  margin-bottom: 0;
  vertical-align: middle; }

.radio.inline + .radio.inline,
.checkbox.inline + .checkbox.inline {
  margin-left: 10px; }

input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
  -webkit-opacity: 0.5;
  -moz-opacity: 0.5;
  opacity: 0.5;
  cursor: not-allowed; }

input:focus,
textarea:focus {
  border-color: #ff944d, 40%;
  outline: 0;
  outline: thin dotted \9; }

input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus,
select:focus {
  -webkit-box-shadow: none;
  box-shadow: none; }

::-webkit-input-placeholder {
  font-size: 0.8rem; }

input:-moz-placeholder {
  font-size: 0.8rem; }

.help-block,
.help-inline {
  color: gray; }

.help-block {
  display: block;
  margin-bottom: 0.75em; }

.help-inline {
  display: inline-block;
  vertical-align: middle;
  padding-left: 5px; }

.form-inline input,
.form-inline textarea,
.form-inline select {
  display: inline-block;
  margin-bottom: 0; }

.form-inline label {
  display: inline-block; }

.form-inline .radio,
.form-inline .checkbox,
.form-inline .radio {
  padding-left: 0;
  margin-bottom: 0;
  vertical-align: middle; }

.form-inline .radio input[type="radio"],
.form-inline .checkbox input[type="checkbox"] {
  float: left;
  margin-left: 0;
  margin-right: 3px; }

.form-search input,
.form-search textarea,
.form-search select {
  display: inline-block;
  margin-bottom: 0; }

.form-search .search-query {
  padding-left: 14px;
  padding-right: 14px;
  margin-bottom: 0; }

.form-search label {
  display: inline-block; }

.form-search .radio,
.form-search .checkbox,
.form-inline .radio {
  padding-left: 0;
  margin-bottom: 0;
  vertical-align: middle; }

.form-search .radio input[type="radio"],
.form-search .checkbox input[type="checkbox"] {
  float: left;
  margin-left: 0;
  margin-right: 3px; }

[type="radio"]:checked,
[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label
{
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    color: #666;
}
[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border: 1px solid #ddd;
    border-radius: 100%;
    background: #fff;
}
[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after {
    content: '';
    width: 10px;
    height: 10px;
    background: #d10422;
    position: absolute;
    top: 4px;
    left: 4px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
[type="radio"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}
[type="radio"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}  

/**
* Validamos los formularios que son "required":
* http://coolvillage.es/ayuda-al-usuario-a-rellenar-formularios-con-css/
*/
input:required:focus:invalid {
  background-color: #fce4cf;
  border: 1px solid #ff7700; }

input:required:focus:valid {
  background-color: #e9f5e9;
  border: 1px solid #5bb75b; }

/*------------------------------------*\
    $IMÁGENES
\*------------------------------------*/

img {
  max-width: 100%;
  height: auto;
  border-width: 0;
  vertical-align: middle;
  -ms-interpolation-mode: bicubic; }

  .loginlogo{
  margin:10px 10px 0px 10px;
  } 
 

/*------------------------------------*\
    $LINKS
\*------------------------------------*/
a {
  text-decoration: none;
  color: #fff; }
  a:visited {
    color: #fff; }
  a:hover {
    text-decoration: none;
    color: #fff; }
  a:focus {
    outline: thin dotted;
    color: #ccc; }
  a:hover, a:active {
    outline: 0; }

/*------------------------------------*\
    $TIPOGRAFÍA
\*------------------------------------*/
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: inherit;
  font-weight: bold;
  color: inherit;
  text-rendering: optimizelegibility; }
  h1.altheader,
  h2.altheader,
  h3.altheader,
  h4.altheader,
  h5.altheader,
  h6.altheader {
    color: gray;
    text-transform: uppercase; }

h1 small,
h2 small,
h3 small {
  font-weight: normal;
  display: block;
  color: gray; }

h1, .h1 {
  margin-bottom: 0.75em;
  font-size: 2rem;
}

h2, .h2 {
  margin-bottom: 0.5em;
  font-size: 1.5rem;
  line-height: 1.2; }

h3, .h3 {
  margin-bottom: 0.375em;
  font-size: 1.2rem;
  line-height: 1.3; }

h4, .h4 {
  margin-bottom: 0.25em;
  font-size: 1rem;
  line-height: 1.25; }

h5, .h5 {
  margin-bottom: 0.25em;
  font-size: .9rem;
  line-height: 1; }

h6, .h6 {
  margin-bottom: 0.25em;
  font-size: .8rem;
  line-height: 1; }


.font-x-small {
  font-size: 0.7rem;
}

.font-small {
  font-size: 0.8rem;
}

.font-normal {
  font-size: 1rem;
}

.font-big {
  font-size: 1.3rem;
  margin-bottom: .5rem
}

.font-huge {
  font-size: 2rem;
}

.pregunta {
  font-size: 1.2rem;
  font-style: Arial, Helvetica, "Stag";
  font-weight: bold;
  color: #d10422;
}

p,
ol,
ul,
dl,
address {
  margin-bottom: 1.3em;
  line-height: 1.3em; }

.intro {
  font-weight: bold; }

small {
  font-size: 0.8rem;
  color: gray; }

ul,
ol {
  margin: 0 0 1.5em 0;
  padding: 0 0 0 1px;
  list-style:none;  }

li ul,
li ol {
  margin: 0; }

blockquote {
  margin: 0 0 1.5em 0;
  padding-left: 24px;
  border-left: 2px solid white;
  font-family: Georgia, Times, "Times New Roman";
  font-style: normal; }
  blockquote p {
    font-size: 1.5rem;
    color: gray;
    font-style: italic; }

q {
  quotes: none;
  font-style: italic; }

blockquote p::before,
blockquote p::after,
q:before,
q:after {
  content: ""; }

cite {
  font-style: normal; }

dl,
dd {
  margin-bottom: 1.5em; }

dt {
  font-weight: bold; }

.dl-horizontal dt {
  float: left;
  clear: left;
  width: 20.25%;
  text-align: right; }
.dl-horizontal dd {
  margin-left: 22.78%; }

abbr[title] {
  border-bottom: 1px dotted white;
  cursor: help; }

b, strong {
  font-weight: bold; }

dfn {
  font-style: italic; }

ins {
  background-color: white;
  color: #262626;
  text-decoration: none; }

mark {
  background-color: yellow;
  color: #262626; }

pre,
code,
kbd,
samp {
  font-family: "Courier New", monospace;
  font-size: 0.9rem;
  line-height: 1.3em; }

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word; }

sub,
sup {
  position: relative;
  font-size: 0.8rem;
  line-height: 0;
  vertical-align: 1.5em; }

sup {
  top: -.5em; }

sub {
  bottom: -.25em; }

hr {
  clear: both;
  display: block;
  margin: 1m 0;
  padding: 0;
  height: 1.5px;
  border: 0;
  border-top: 1px solid Gainsboro; }

/**
* Layout del sitio
**/
/*------------------------------------*\
    $SITIO
\*------------------------------------*/
@-webkit-viewport {
  width: device-width; }
@-moz-viewport {
  width: device-width; }
@-ms-viewport {
  width: device-width; }
@-o-viewport {
  width: device-width; }
@viewport {
  width: device-width; }
html {
  background: white;
  font-size: 100%;
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: transparent;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  line-height: 1.2em;
  color: #222; }

/**
* A partir de aquí es donde debes escribir los estilos de posicionamiento
* y detalles que forman tu web. Disfruta!
*/
/*------------------------------------*\
    $NAVEGACIÓN
\*------------------------------------*/
/**
*
* La semántica va como sigue:

    <input type="checkbox" class="checkbox__hack" id="checkbox__hack">
    <label for="checkbox__hack" class="checkbox-hack__label"></label>
    <!-- OMG NO SEMANTIC HTML, well, it help us to avoid JS in the menu slide in mobile -->

    <nav class="nav--top">
        <ul class="nav--top__list">
            <li><a href="">item</a></li>
            <li><a href="">item</a></li>
            <li><a href="">item</a></li>
            <li><a href="">item</a></li>
            <li><a href="">item</a></li>
        </ul>
    </nav>

* Y no te olvides de modificar las variables en el archivo de variables ($nav-**)
*/

.navigation {
  list-style: none;
  margin: 1px 0px 0px 0px; 
  
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: row wrap;
  -webkit-justify-content: flex-end; 
  justify-content: flex-end; 

  flex-wrap: wrap;
}


 .navigation > li {
        float:left;
      }
      
      .navigation li a {
        /*background-color:#000;
        color:#fff;
        text-decoration:none;
        padding:10px 12px;
        display:block;*/        
      }
      
      .navigation li a:hover {
        /*background-color:#434343;*/
      }
      
      .navigation li ul {
        display:none;
        position: absolute;
        z-index: 1000;
      }
      
      .navigation li:hover > ul {
        display:block;
      }
      
      .navigation li ul li {
        position:relative;
      }
      
      .navigation li ul li ul {
        right:0px;
        top:0px;
        position: absolute;
      }
  /**
   * Place a hamburger (don’t hate the player, hate the game...) icon
   * over the top of our nav element.
   */ }
  .nav--top:after {
    content: "☰";
    font-size: 16px;
    width: 1em;
    line-height: 1;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -8px;
    margin-left: -8px; }

.nav--top__list {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-top: 52.8px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #dbd879;
  box-shadow: inset -100px -50px 100px 100px rgba(0, 0, 0, 0.2);
  /*
  * Usamos VW porque con % tomaría el tamaño del contenedor,
  * que es $nav-width (unos 48px) y no se ve na' e ná
  */
  width: 200px;
  z-index: -1; }

.checkbox__hack {
  display: none;
 /*
  * Quitamos el overflow:hidden para que se muestre el menú cuando
* el checkbox está :checked
  * Eso es todo, un overflow. Con eso mostramos u ocultamos el menú.
  * (Eso y el content del after para que sea una X y no la hamburguesa)
  */ }
  .checkbox__hack:checked ~ .nav--top {
    overflow: visible; }
    .checkbox__hack:checked ~ .nav--top::after {
      content: "x"; }

.checkbox-hack__label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 52.8px;
  color: white;
  overflow: hidden;
  cursor: pointer;
  margin: 0;
  z-index: 100; }

/**
* Abstracciones y objetos
**/
/*------------------------------------*\
    $BOTONES
\*------------------------------------*/
/*
 * Definimos los botones y sus variantes
 */
/**
* .btn es la clase principal para definir un botón
*/
.btn {
  display: inline-block;  
  color: #fff;
  text-align: center;
  vertical-align: middle;
  width: 100px;
  height: 36px; 
  font-family: Arial, Helvetica, "Stag"; 
  font-weight: bold;
  font-size:.9rem;
  white-space: nowrap;
  background-color: #ff7800;  
  cursor: pointer;  
  padding: 5px 8px;
  border:1px solid #0000cc;
  border-radius:4px; 
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  margin:0px 10px 10px 0px;  
  -webkit-appearance: none;  
 letter-spacing: 1px;
  	/**
   	* Nadie quiere un botón con texto subrayado cuando
   	* hacemos hover.
   	*/ 
   }

.btn:hover {
  text-decoration: none; 
	background-color: #007cd5;
    border:1px solid #007cd5;
	color:#fff; 
	 }

/*.btn:active, .btn:focus {
    text-decoration: none; 
  background-color: #ff8c00;
    border:1px solid #ff8c00;
  color:#fff; 
   }
.btn:visited {
    color: #f6891e;
     }*/

 .btn-apli {
  display: inline-block;  
  color: #fff;
  text-align: center;
  vertical-align: middle;
  width: auto;
  /*height: 32px;*/ 
  font-family: Arial;
  font-weight: bold;
  font-size: .9rem;
  white-space: nowrap;
  background-color: #d10422;  
  cursor: pointer;  
  padding: 5px 8px;
  border-radius:4px; 
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  margin:0px 8px 5px 0px;  
  -webkit-appearance: none;  
  border:1px solid #d10422;
    /**
    * Nadie quiere un botón con texto subrayado cuando
    * hacemos hover.
    */ }


.btn-apli:hover {
 text-decoration: none; 
	 background-color: #083e7a;
    border:1px solid #083e7a;
	color:#fff;
   }

.btn-sub {
  line-height: 1.8em;
  color: #fff;
  text-align: center;
  font-size: .75rem;
  background-color: #d10422;  
  font-weight: bold;
  cursor: pointer;
  padding: .3em .5em;
  border-radius:4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  margin:7px 0 0 .5em;
  border:1px solid #fff;
  -webkit-appearance: none;
}

.btn-sub:hover {
  text-decoration: none; 
  background-color: #fff;
  color:#d10422;
  border:1px solid #d10422;
   }
       

/* Botón no disponible */
.btn.disabled {
  opacity: 0.50; 
  cursor: not-allowed;
}

  
.btn-img{      
    width:36px;
    height: 32px;  
    background-color:#d10422;    
    background-position:center;
    display: inline-block;    
    color: #fff;
    text-align: center;
    vertical-align: middle;    
    cursor: pointer;    
    padding: 7px 0px 0px 0px;
  border-radius:4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;               
    margin:0px 10px 5px 0px;  
    
  }

.btn-img:hover{
    text-decoration: none; 
    background-color: #990000;    
	  color:#fff;
  }

 .btn-icn{      
    width:36px;
    height: 32px;  
    background-color:#33cc00;/*#489d01*/
    background-position:center;
    display: inline-block;    
    color: #fff;
    text-align: center;
    vertical-align: middle;    
    cursor: pointer;    
    padding: 0px;
    border-radius:4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;               
    margin:0px 15px 1px 0px;  
    border:1px solid #33cc00;
    padding-top: 5px;    
  }

.btn-icn:hover{
    text-decoration: none; 
    background-color: #999;
    border:1px solid #999;
    color:#000;
  } 

  .btn-icn span{
    line-height: 14px;
    font-size: .7rem;
    display: inline-block;
    margin: 5px 0px 0px -13px;
    width: 60px;
    text-align: center;
    color:#000;
  }



.btn-circulo{      
    width:28px;
    height: 28px;  
    background-color:#33cc00;    
    background-position:center;
    display: inline-block;    
    color: #fff;
    text-align: center;
    vertical-align: middle;    
    padding: 0px;
    border-radius:12px;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;               
    margin:0px 10px 5px 0px;  
    border:1px solid #33cc00;
    padding-top: 2px;
  }

  .btn-bars{      
    width:36px;
    height: 32px;     
    background-position:center;
    display: inline-block;    
    color: #000;
    text-align: center;
    vertical-align: middle;    
    cursor: pointer;        
    margin:3px 0px 0px 0px; 
    padding-top: 5px;         
  } 

.btn-pregunta{
    width: 50%;
    font-size: 1rem;
    text-rendering: optimizeLegibility;
    letter-spacing: .05rem;    
   }

.btn-nbusqueda{
    width: 130px;
    padding: 8px 6px;
   }

.btn-leyendas{
    width: auto;
    padding: 8px 6px;
    border:1px solid #33cc00;
   }

.btn-opcion{
    width: 100px;    
    border-radius:2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    padding: 6px 6px;
    margin: 5px 5px;
    font-size: .72rem;
    line-height: 1.4;    
    background: #ffffff;    
}      

.fa-centrarbtn{
  margin: 3px 0px;
}

/*------------------------------------*\
    $BOTONES-VARIANTES
\*------------------------------------*/

input[type="submit"].btn:hover {
  border-color: #4bacc6; 
   -webkit-appearance: none;}


/*------------------------------------*\
    $TEXTURAS
\*------------------------------------*/

.azul{color:#4790cd;}

.azul-login{color:#4790cd;}

.negro{color:#000;}

.negro3{color:#333;}

.negro6{color:#666;}

.blanco{color:#fff;}

.gris{color:#7f7f7f;}

.rojo{color:#d10422;}

.rojo-login{color:#990000;}

.verde{color:#33cc00;}/*#00b050*/

.bg-azul{background-color:#4790cd; border:1px solid #4790cd;}

.bg-gris{background-color:#7f7f7f; border:1px solid #7f7f7f;}

.bg-rojo{background-color:#d10422;}

.bg-verde{background-color:#00b050;}

.disabled{opacity: 0.50; cursor: not-allowed;}

.txt-disabled{opacity: 0.50;}

.txt-negrita{ font-weight: bold;}


@media screen and (max-width: 32em) {
  body { font-size: 75%; }
}

.cerrar-modal{
  float: right;
  margin: 0px;
  cursor: pointer;
  }

  .cerrar-modal a:hover {
    text-decoration:none; color: #000;
  }
  

/* termina modal */

.alert {
  margin-bottom: 1.5em;
  padding: 8px 35px 8px 14px;
  background-color: #fce4cf;
  border: 1px solid #f6ae6f;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 0.9rem;
  color: #904809;
  border-radius: 4px; }
  .alert .alert--heading {
    color: inherit; }
  .alert .close {
    position: relative;
    top: -2px;
    right: -21px;
    float: right;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 18px;
    color: inherit; }

.alert--success {
  background-color: #c5e6c5;
  border-color: #a2d6a2;
  color: #347834; }

.alert--warning {
  background-color: #f4cac8;
  border-color: #eba19e;
  color: #9d2520; }

.alert--error {
  background-color: #f4cac8;
  border-color: #eba19e;
  color: #da4f49; }

.alert--info {
  background-color: #cbebec;
  border-color: #7fcfd2;
  color: #236062; }

.alert--inverse {
  background-color: #242786;
  border-color: black;
  color: white; }

.alert--block {
  padding-top: 14px;
  padding-bottom: 14px; }
  .alert--block .alert--heading {
    margin-bottom: 0.1875em;
    font-size: inherit;
    font-weight: bold; }
  .alert--block > p,
  .alert--block > ul {
    margin-bottom: 0; }
  .alert--block p + p {
    margin-top: 5px; }


/*------------------------------------*\
   Tabs 
\*------------------------------------*/

  
/* Default tab style */

/*@font-face {
   font-weight: normal;
  font-style: normal;
  font-family: 'FontAwesome';
  src: url('../fonts/font-awesome/fonts/fontawesome-webfont.eot');
  src: url('../fonts/font-awesome/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/font-awesome/fonts/fontawesome-webfont.ttf') format('truetype'),
       url('../fonts/font-awesome/fonts/fontawesome-webfont.woof') format('woff'),
       url('../fonts/font-awesome/fonts/fontawesome-webfont.svg#FontAwesome') format('svg');
}*/

.tabs {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  width: 100%;
  font-weight: 300;
  font-size: 1em;
}

/* Nav */
.tabs nav {
  text-align: center;
}

.tabs nav ul {
  position: relative;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  margin: 0 auto;
  padding: 0px 0px 0px 0px;
  max-width: 1080px;
  list-style: none;
  -ms-box-orient: horizontal;
  -ms-box-pack: center;
  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
}

.tabs nav ul li {
  position: relative;
  z-index: 1;
  display: block;
  margin: 0;
  text-align: center;
  -webkit-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;  
}

.tabs nav a {
  position: relative;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 2.5;
}

.tabs nav a span {
  vertical-align: middle;
  font-size: 0.75em;
}

.tabs nav li.tab-current a {
  color: #74777b;
}

.tabs nav a:focus {
  outline: none;
}

.tabs nav a:hover {
  outline: none;
  color:#ccc;
}


/* Icons */
.icon::before {
  z-index: 10;
  display: inline-block;
  margin: 0 0.4em 0 0;
  vertical-align: middle;
  text-transform: none;
  font-weight: normal;
  font-variant: normal;
  font-size: 1.3em;
  font-family: 'FontAwesome';
  line-height: 1;
  speak: none;
  -webkit-backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-upload::before {
  content: "\e68a";
}
.icon-home::before {
  content: "\e648";
}
.icon-principal::before {
  content: "\f01c";
}
.icon-regresos::before {
  content: "\f079";
}
.icon-autorizaciones::before {
  content: "\f164";
}
.icon-cerradas::before {
  content: "\f023";
}


/* Content */
.content-wrap {
  position: relative;
}

.content-wrap section {
  display: none;
  margin: 0px auto;
  padding: 1em;
  max-width: 1200px;
  text-align: center;
  background: #fff;
  border:2px solid #89d1f4;
}

.content-wrap section.content-current {
  display: block;
}

.content-wrap section p {
  margin: 0;
  padding: 0.75em 0;
  color: rgba(40,44,42,0.05);
  font-weight: 900;
  font-size: 4em;
  line-height: 1;
}

/* Fallback */
.no-js .content-wrap section { 
  padding-bottom: 2em;
/*display: block;
  border-bottom: 1px solid rgba(255,255,255,0.6);*/
}

.no-flexbox nav ul {
  display: block;
}

.no-flexbox nav ul li {
  min-width: 15%;
  display: inline-block;
}

@media screen and (max-width: 58em) {
  .tabs nav a.icon span {
    display: none;
  }
  .tabs nav a:before {
    margin-right: 15px;
  }
}

/* Individual tab styles */

.container > section {
  padding: 10px 0;  
  min-height: 100%;
}


@media screen and (max-width: 1280px) {
  
}

@media screen and (max-width: 30em) {
  .container > section {
    padding: 3em 0;
  }
  
}

@media screen and (max-width: 25em) {
  .codrops-icon {
    font-size: 1.5em;
  }
  .codrops-icon span {
    display: none;
  }
}


/*****************************/
/* Trapezoid, based on http://lea.verou.me/2013/10/slanted-tabs-with-css-3d-transforms/ */
/*****************************/ 

.tabs-style-tzoid {
  max-width: 1080px;
}

.tabs-style-tzoid nav {
  padding: 0 0em;
  margin-bottom: -8px;
}

.tabs-style-tzoid nav ul li {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.tabs-style-tzoid nav ul li a {
  padding: 0 3em 0 0.3em;  
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
  margin-bottom: 1px;
}

@media screen and (max-width: 54em) {
  .tabs-style-tzoid nav ul li a {
    padding: 0 0.5em 0 0.3em;
  }
}

.tabs-style-tzoid nav ul li a:hover,
.tabs-style-tzoid nav ul li a:focus {
  color: #d10422;
}

.tabs-style-tzoid nav ul li.tab-current a {
  color: #d10422;
  font-weight:bold;
    /*background-color: #002060;*/
}


.tabs-style-tzoid nav ul li.tab-current a:hover {
  color: #fff;
  font-weight:bold;
}

.tabs-style-tzoid nav ul li a span {
  font-weight: bold;
  font-size: 1em;
}

.tabs-style-tzoid nav ul li a::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  outline: 1px solid transparent;
  border-radius: 10px 10px 0 0;
  background: #d2d8e2;
  box-shadow: inset 0 -3px 3px rgba(0,0,0,0.05);
  content: '';
  -webkit-transform: perspective(5px) rotateX(0.93deg) translateZ(-1px);
  transform: perspective(5px) rotateX(0.93deg) translateZ(-1px);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.tabs-style-tzoid nav ul li.tab-current a::after,
.tabs-style-tzoid .content-wrap {
  background: #89d1f4;
  box-shadow: none;  
}


/*------------------------------------*\
   Tabla 
\*------------------------------------*/

/* solo para login */

    .width200-login th,.rwd_auto-login th {background:#990000;color:#fff;padding:3px;text-align:center;}
    .width200-login td,.rwd_auto-login td {border-bottom:1px solid #none;padding:3px;text-align:left;}
    .width200-formulario td,.rwd_auto-formulario td {border-bottom:1px solid #none;padding:4px;text-align:left;font-weight: bold;}
    table.rwd-formulario-bancomer {width: 100%}
    .rwd-formulario-bancomer td {padding:4px;text-align:left;font-weight: bold; width: 25%}


  table.width200,table.rwd_auto {border:1px solid #aaa;width:100%;margin:0 0 4px 0; cellpadding:3; }
    .width200 th,.rwd_auto th {background:#858585;color:#fff;padding:3px;text-align:center;font-size: 0.75rem;border:1px solid #858585; height:30px; vertical-align: middle;}
    .width200 td,.rwd_auto td {border-bottom:1px solid #858585;padding:3px;text-align:center; font-size: 0.7rem; background-color:#f9f9f9; height:30px; vertical-align: middle;}
    .width200 tr:last-child td, .rwd_auto tr:last-child td{border:0}
    .paginador{background: #a7a9ac; color: #fff; text-align: center;}

  table.rwd_autoc {width:100%; cellpadding:3;}
  .rwd_autoc th {background:#990000;color:#fff;padding:3px;text-align:center;font-size: 0.75rem;}
  .rwd_autoc td {border-bottom:1px solid #990000;padding:3px;text-align:center; font-size: 0.7rem;}
    
  .rwd {width:100%;overflow:auto; background-color: #fff; padding: 2px; text-align: center; text-align: -webkit-center;}
    .rwd table.rwd_auto {width:auto;min-width:100%}
      .rwd_auto th,.rwd_auto td {white-space: nowrap;}

  table.rwd_auto-formulario {width:100%; cellpadding:2;}   
    
  .rwd {width:100%;overflow:auto; background-color: #f9f9f9; padding: 2px; text-align: center; text-align: -webkit-center;}
    .rwd table.rwd_auto {width:auto;min-width:100%}
      .rwd_auto th,.rwd_auto td {white-space: nowrap;}

  table.rwd_auto-formulario {width:100%; cellpadding:2;}    

  .rwd_marco {width:96%;/*overflow:auto;*/ background-color: #f9f9f9; padding: 4px;  
  border: 2px solid #d2d8e2;
  border-radius:3x;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  text-align: left; text-align: -webkit-left; 
  }

  .titulo_marco{
    width: 96%;   
    font-weight: bold;
    font-size: .8rem;
    float: left;
    text-align: left;
    margin: 10px 0px 0px 25px;
  }

.rwd_auto th a:link {text-decoration:none; color:#fff;}
.rwd_auto th a:visited {text-decoration: none; color:#fff;}
.rwd_auto th a:active {text-decoration: none; color:#fff;}
.rwd_auto th a:hover {text-decoration:none; color: #007dc5;}     

.rwd_auto a:link {text-decoration:none; color:990000;}
.rwd_auto a:visited {text-decoration: none; color:990000;}
.rwd_auto a:active {text-decoration: none; color:990000;}
.rwd_auto a:hover {text-decoration:none; color: #007dc5;}

.descarto-celda {display:none;}

   
      
  @media only screen and (max-width: 760px), (min-width: 768px) and (max-width: 1024px)   {
  
    table.width200, .width200 thead, .width200 tbody, .width200 th, .width200 td, .width200 tr { display: block; }
    
    .width200 thead tr { position: absolute;top: -a7a9ac9px;left: -a7a9ac9px; }
    
    .width200 tr { border: 1px solid #ccc; margin: 0px; padding: 0px }
    
    .width200 td { border: none;border-bottom: 1px solid #ccc; position: relative;padding-left: 50%;text-align:left }
    
    .width200 td:before {  position: absolute; top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap;}
    
    /*.width200 td:nth-of-type(1):before { content: "Nombre"; }
    .width200 td:nth-of-type(2):before { content: "Apellidos"; }
    .width200 td:nth-of-type(3):before { content: "Cargo"; }
    .width200 td:nth-of-type(4):before { content: "Twitter"; }
    .width200 td:nth-of-type(5):before { content: "ID"; }*/
    
    .descarto {display:none;}
  }


/*------------------------------------*\
   Sombras
\*------------------------------------*/

  /* Sombra general */

  .drop-shadow {
    position:relative;
    float:left;
    width:40%;
    padding:1em;
    margin:2em 10px 4em;
    background:#fff;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  }

  .drop-shadow:before,
  .drop-shadow:after {
    content:"";
    position:absolute;
    z-index:-2;
  }

  .drop-shadow p {
    font-size:16px;
    font-weight:bold;
  }

.sombra-icn {
  -webkit-box-shadow: 1px 1px 6px 2px #666;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    1px 1px 6px 2px #666;  /* Firefox 3.5 - 3.6 */
  box-shadow:         1px 1px 6px 2px #666;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

.sombra-icn-map {
  -webkit-box-shadow: 1px 1px 8px 5px #ccffff;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    1px 1px 8px 5px #ccffff;  /* Firefox 3.5 - 3.6 */
  box-shadow:         1px 1px 8px 5px #ccffff;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}


/*------------------------------------*\
    Validaciones  Form validator
\*------------------------------------*/

.help-block {
    display: inline;
    padding-left: 6px;
    font-size: 85%;
    font-weight: normal;
}

span.form-error.help-block {
    display: block;
    color: red;
    margin: 0px;
    padding-left: 0;
}

div.form-error {
    padding: 6px 12px;
    line-height: 180%;
    background: #ffe5ed;
    border-radius: 4px;
    margin-bottom: 22px;
    color: darkred;
}

input.valid {
    /*background: url(images/icon-ok.png) no-repeat right center #e3ffe5;*/
    background-color: #e3ffe5;
    color: #002f00;
    border-color: #96b796 !important;   
    width: 180px;    
}

input.error {
    /*background: url(images/icon-fail.png) no-repeat right center #ffebef;*/
    background-color: #ffebef;
    color: #480000;
    width: 180px;     
}

select.valid {
    /*background: url(images/icon-ok.png) no-repeat right 14px center #e3ffe5;*/
    background-color: #e3ffe5;
    color: #002f00;
    border-color: #96b796 !important;   
    width: 180px;     
  }

select.error {
    /*background: url(images/icon-fail.png) no-repeat right 14px center #ffebef;*/
    background-color: #ffebef;
    color: #480000;
    width: 180px; 
}

.form-suggest-element {
    padding: 4px;
}

form.validating-server-side .server-validation {
    background: url(../img/ajax-loader.gif?v=2) no-repeat center right #FFF;
    opacity: 0.5;
}

.max-chars {
    background: #EEE;
    color: #a7a9ac;
}

.form-help {
    padding-left: 6px;
    font-size: 90%;
    color: #888;
}

.select-panel{
  font-size: 0.8rem; 
  /*background: #eaffff;*/
  color: #aaa;
}

  
/*------------------------------------*\
    My css MDC
\*------------------------------------*/

.wrapper {
  /*display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center;*/
}

.wrapper > * {
  padding: 2px;
  flex: 1 100%;
}

.main {
  text-align: left;
  background:f3f3f3;
}

.flex-container-login {
  padding: 0;
  margin: 0;  
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;  
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.div-flex-login {
  text-align: center;
  background:#fefefe;
  width: 100%;
  height: 100%;
  max-width: 400px;
  max-height:300px;
  border: 6px solid #159aea;
  border-radius:8px;
  -moz-border-radius:8px;
  -webkit-border-radius:8px;  
  padding: 8px;
  margin: 4% 3rem 0px 0px;
}

.login-usuariopass  { margin-left: 0px; }

.login-texto  { margin-top: 20px; font-weight:bold }

.flex-container-elementos {
  padding: 0;
  margin: 0;  
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;  
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

.flex-container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  
}

.div-flex-elementos {
  /*margin: 2px;
  padding: 2px;*/
  text-align: center;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;  
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;  
  flex-direction: column;
  justify-content: center;
}

.div-flex-elementos-leyendas {
 display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    flex-direction: row;    
    justify-content: space-around;
  }

.flex-panel {
   display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    
    flex-direction: row;    
    justify-content: space-around;

}



.div-leyendas-mostrar{
    width:80%;
    height:auto;      
    margin-bottom: 2px;
    z-index:21;
    /*border:2px solid #2471f3;*/
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px; 
    display:none;
    padding: 1px 2px 1px 1px;  
    background: rgb(255, 255, 255); 
    -webkit-transition: all 500ms;
    -moz-transition: all 500ms;
    transition: all 500ms;  
    opacity:1;
    -ms-opacity:1;
    -moz-opacity:1;
    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 -1px 0px rgba(0,0,0,0.02);
    -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 -1px 0px rgba(0,0,0,0.02);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 -1px 0px rgba(0,0,0,0.02);    
  }


.flex-start { 
  -webkit-justify-content: flex-start; 
  justify-content: flex-start; 
}

.flex-end { 
  -webkit-justify-content: flex-end; 
  justify-content: flex-end; 
}  

.flex-center { 
  -webkit-justify-content: center; 
  justify-content: center; 
} 

.space-between { 
  -webkit-justify-content: space-between; 
  justify-content: space-between; 
}  

.space-around { 
  -webkit-justify-content: space-around; 
  justify-content: space-around; 
} 

.centrado-porcentual {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);    
    width: auto;
    height: auto;
}

.grid {
  display: grid;  
  padding: 2rem;  
  /*grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;*/
  grid-template-columns:110px 110px 50px 110px 110px 50px 110px 110px;
  grid-template-rows:110px 110px 110px;
  grid-column-gap:2rem;
  grid-row-gap:2rem;
}

.grid-item {
  color:#fff;
  font-size: .7rem;
  padding-top: 1.8rem;
  text-align: center;
}

.grid-item2 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 3;
  grid-row-end: 3;
  color: #fff;
  font-size: .7rem;
  padding-top: 1.8rem;
  text-align: center;
}

/*.grid-item:nth-child(2n) {
  background-color: #2471f3;
}

.grid-item:nth-child(2n+1) {  
  background-color: #33cc00;
}*/

.izuquierda{
  text-align: left;
  }
.centrado{
  text-align: center;
  }
.derecha{
  text-align: right;
  }

.main--menu {
  text-align: center;
  background:#fff;
  padding:0px;
  margin:0px;
}

.contenedor1100{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  }

.header {
  /*background:#a7a9ac;*/
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  z-index:-1;
}


.footer {
  /*background:#000;*/
  width: 90%; 
  height: auto;
  position: absolute;
  bottom: 0;
  margin:0 0 0 5%;
}

.cienxcien {
  width: 100%;
}

.ochoxcien {
  width: 88%;
}

.cinxcien {
  width: 50%;
}


.scroll-tabs{
  color: #222;
  background: #fefefe;
  position: relative;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;  
  overflow: auto;
  height: 370px;
}

.contenido {
  width:1000px;
  height:auto;
  min-height:230px; 
  padding:10px;
  margin-top: .9rem;
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 5px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
     -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  }

.titulo-seccion{  
  margin:.3em 0 .3em 1em;
  font-family:Helvetica LT STD, Arial, sans-serif;
  font-size:1.3rem;
  font-weight:bold;
  font-variant:small-caps;
  color:#083e7a;  
  letter-spacing:1px;
  background:#fff;
  width:fit-content;
}

.contenido_texto{ 
  width:999px;
  height:auto;  

  font-family:Helvetica LT STD, Arial, sans-serif;
  font-size:13px;
  color:#222;
  text-align:justify;
  letter-spacing:1px;
  line-height:1.4em;
}

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}


video {
  max-width: 100%;
  height: auto;
}

/*--- buscador ---*/

.buscador {
    position: relative;
    margin: 5px 0px 0px 5px;
    background: #fff;
    border-radius: 2px;
    box-sizing: border-box;
    width: 350px;
    height: 38px;
    border-bottom: 1px solid transparent;
    padding: 12px 104px 11px 64px;
    transition-property: background,box-shadow;
    transition-duration: 0.3s;    
    -webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2),0 -1px 0px rgba(0,0,0,0.02);
       -moz-box-shadow:0 2px 4px rgba(0,0,0,0.2),0 -1px 0px rgba(0,0,0,0.02);
            box-shadow:0 2px 4px rgba(0,0,0,0.2),0 -1px 0px rgba(0,0,0,0.02);
      
    padding: 0px;
}


.buscador-input {  
  border: none;
  outline: none;
  background: #fff;
  width: 100%;
  height: 30px;
  margin: 4px 0px 0px 4px;  
  padding: 4px 4px 4px 4px;  
  font-size: 1rem;
  color: #333;
}

input[type=text]:focus {
  /*box-shadow: 0 0 5px rgba(0,255,64, 0.9);  
  border: 1px solid rgba(0,255,64, 0.9);*/
  background: #eaffff; /* #eaffea */     
}

input[type=password]:focus {
  /*box-shadow: 0 0 5px rgba(0,255,64, 0.9);  
  border: 1px solid rgba(0,255,64, 0.9);*/
  background: #eaffff; /* #eaffea */     
}

.buscador-input::-webkit-input-placeholder {
  color: #aaa;
}

.buscador-input:-moz-placeholder {
  color: #aaa;
}

.buscador-input::-moz-placeholder {
  color: #aaa;
}

.buscador-input:-ms-input-placeholder {
  color: #aaa;
}

.contenedor-nbusqueda{
  position: relative;
  margin:5px 0px 0px 5px;  
}


/*----- contenido rutas -----*/

.contenedor-btn-icn{
margin: 10px 0px;
}

.contenedor-ubicacion{
margin: 10px 0px;
}

.contenedor-indicaciones{
margin-top: -20px;
width: 100%;
}

.contenedor-direccion{
margin: 6px 0px;
background: #fefefe;
color:#333;
font-size: .9rem;
padding: 10px;
width: 100%;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px; 
}

.direccion-icn{
float:left;
list-style: none;
margin-right: 6px;
}


/*ul {
  list-style-type: square;
  list-style-position: inside;  
  padding: 0;
}*/

ul li:before {
    color: #fff;/*#094fa4;*/
    /*content: "\2022";/*♦*/
    font-size: 1.3em;
    padding-right: .25em;
    position: relative;
    top: .1em;}

ul li {
    color: #000;
    list-style-type: none;
    list-style:none; 
}


/* ----------- Android ----------- */
/* Portrait and Landscape */
@media only screen and (min-width : 320px) and (max-width : 640px) {

  html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, main, menu, nav, section, time, mark, audio, video {
    font-size: 98%;
  }

  input,
textarea,
select {
  display: inline-block;  
  width: 98%;  
  }

  .div-flex-login {
  margin: 10% .3rem 0px 0px;
  }

  .css-treeview {
    width: 328px;
    }

  
  input.valid { width: 98%; }

  input.error { width: 98%; }

  select.valid { width: 98%; }

  select.error { width: 98%; }

  .buscador {    
    width: 346px;}

.footer {
    width: 96%;    
    margin: 0 0 0 2%;
    }  

        .contenido {
  width:100%;
  height: fit-content;
  padding: 5px;
  margin-top: 2rem;
  }  

  .font-big {
  font-size: 1rem;
   margin-bottom: .5rem;
}

.contenedor-nbusqueda{
 margin:8px 0px 0px 8px;  
}

   .btn-apli {
  font-size:.8rem;
  padding: 5px 4px;
  }

  .titulo-seccion {
    font-size: 1.1rem
  }

}

/* Landscape */
@media only screen and (min-width : 320px) and (max-width : 640px) and (orientation: landscape)  {

  html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, main, menu, nav, section, time, mark, audio, video {
    font-size: 98%;
  }

  input,
textarea,
select {
  display: inline-block;  
  width: 60%;  
  }

  .div-flex-login {
  margin: 4% 10px 0px 0px;
  }

  .btn {
    margin:0px 7px 4px 0px;  
  }

  img{
  max-width: 90%;
  height: 90%;
  } 

  .md-content-scroll{
    height: 232px;
  }  

  .scroll-tabs{ 
       height: 232px;
  }

  .btn-opcion{
    width: 100px;    
    font-size: .7rem;    
  }

  .btn-actividad{
    width: 106px;    
    font-size: .7rem;    
  }

  .btn-img{      
    padding: 8px 0px 0px 0px;
    font-size: 1rem;    
  }

  .md-modal-menu {
   width: 75%;
  }

  .css-treeview {
    width: 592px;
    height: 130px;
    margin-bottom: 4px;  
  }

  input.valid { width: 60%; }

  input.error { width: 60%; }

  select.valid { width: 60%; }

  select.error { width: 60%; }

  .buscador {    
    width: 310px;}

.div-leyendas-mostrar, .div-leyendas-ocultar{  
    height: 70px;    
  }

.footer {     
    margin: 0 0 0 10%;
    }

}


/* ----------- iPhone 5 and 5S ----------- */

/* Portrait */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, main, menu, nav, section, time, mark, audio, video {
    font-size: 98%;
  }

input,
textarea,
select {
  display: inline-block;  
  width: 98%;  
  }

 .buscador {width: 310px;}
 .div-leyendas-mostrar, .div-leyendas-ocultar{ width: 95%;}  

 .btn-img{      
    padding: 8px 0px 0px 0px;
    font-size: 1rem;    
  }

}


/* ----------- iPhone 6 ----------- */
/* Portrait and Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) { 

  html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, main, menu, nav, section, time, mark, audio, video {
    font-size: 98%;
  }

  input,
textarea,
select {
  display: inline-block;  
  width: 70%;  
  }

  .css-treeview {
    width: 342px;
     }

  input.valid { width: 70%; }

  input.error { width: 70%; }

  select.valid { width: 70%; }

  select.error { width: 70%; }

  .buscador {    
    width: 346px;
  }

  .btn-img{      
    padding: 8px 0px 0px 0px;
    font-size: 1rem;    
  }


}


/* Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { 

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, main, menu, nav, section, time, mark, audio, video {
    font-size: 98%;
  }

  input,
textarea,
select {
  display: inline-block;  
  width: 95%;  
  }
  
.div-flex-login {
    margin: 6% 18% 0px 0px;
  }

.btn {
    margin:0px 8px 5px 0px;  
  }

img{
  max-width: 90%;
  height: auto;
  }

  .loginlogo{
  max-width: 35%;
  height: 35%;
  margin:4px 0px 0px 4px;
  }

  .md-content-scroll{
    height: 265px;
  }

  .scroll-tabs{ 
    height: 232px;
  }

  .btn-opcion{
    width: 100px;    
    font-size: .7rem;    
  }

  .btn-actividad{
    width: 108px;    
    font-size: .7rem;    
  }

   .btn-apli {
  padding: 5px 4px;
  margin:3px 3px 3px 0px;  
  }

.btn-img{      
    padding: 8px 0px 0px 0px;
    font-size: 1rem;    
  }

  .md-modal-menu {
    width: 75%;
  }

  .css-treeview {
    width: 592px;
    height: 218px;
    margin-bottom: 4px;  
  }

  input.valid { width: 60%; }

  input.error { width: 60%; }

  select.valid { width: 60%; }

  select.error { width: 60%; }

  .buscador { width: 280px;}

  .div-leyendas-mostrar, .div-leyendas-ocultar{  
    width:85%; height: 45px;      
  }

.footer {
    width: 96%;    
    margin: 0 0 0 3%;
    }

  .contenido {
  width:90%;
  height: fit-content;
  padding: 2px;
  margin-top: .3rem;
  }  

  .font-big {
  font-size: 1rem;
  margin-bottom: .2rem;
}

.contenedor-nbusqueda{
 margin:5px 0px 0px 5px;  
}

.titulo-seccion {
    font-size: 1.2rem;
}

}


/* Solo naevegador mozilla firefox */

@-moz-document url-prefix() { 
  .div-flex-login { margin: 150px 20px 0px 0px;
  }

  .width200-login td,.rwd_auto-login td {padding:2px;text-align:left;
  }

   img { height: auto; }
}


/* Solo naevegador ie y edge */
_:-ms-lang(x), .div-flex-login  { margin: 150px 20px 0px 0px; }

_:-ms-lang(x), .login-usuariopass { margin-left: 15px; }

_:-ms-lang(x), img {  height: auto; }