@charset "iso-8859-1";

/* Incluir Fuentes en los Estilos 
/* Esto es Necesacio para garantizar que todos vean con las fuentes apropiadas así no las tengan instaladas

************************************************************************************************************/

@font-face {  font-family: 'mregular'; src: url('/Css/fuentes/myriadpro-regular/myriadpro-regular-webfont.eot');src: url('/Css/fuentes/myriadpro-regular/myriadpro-regular-webfont.eot?#iefixe') format('embedded-opentype'),url('/Css/fuentes/myriadpro-regular/myriadpro-regular-webfont.woff') format('woff'),url('/Css/fuentes/myriadpro-regular/myriadpro-regular-webfont.ttf') format('truetype'),url('/Css/fuentes/myriadpro-regular/myriadpro-regular-webfont.svg#myriadpro-regular') format('svg');  }
@font-face {  font-family: 'mcondensed';src: url('/Css/fuentes/myriadpro-condensed/myriadpro-cond-webfont.eot');src: url('/Css/fuentes/myriadpro-condensed/myriadpro-cond-webfont.eot?#iefix') format('embedded-opentype'),url('/Css/fuentes/myriadpro-condensed/myriadpro-cond-webfont.woff') format('woff'),url('/Css/fuentes/myriadpro-condensed/myriadpro-cond-webfont.ttf') format('truetype'),url('/Css/fuentes/myriadpro-condensed/myriadpro-cond-webfont.svg#MyriadProCondensed') format('svg'); font-style:normal; font-weight:lighter;  }
@font-face {  font-family: 'mboldcondensed'; src: url('/Css/fuentes/myriadpro-boldcond/myriadpro-boldcond-webfont.eot');src: url('/Css/fuentes/myriadpro-boldcond/myriadpro-boldcond-webfont.eot?#iefixe') format('embedded-opentype'),url('/Css/fuentes/myriadpro-boldcond/myriadpro-boldcond-webfont.woff') format('woff'),url('/Css/fuentes/myriadpro-boldcond/myriadpro-boldcond-webfont.ttf') format('truetype'),url('/Css/fuentes/myriadpro-boldcond/myriadpro-boldcond-webfont.svg#myriadpro-boldcond') format('svg'); font-style:normal;  }

/* Limpiar márgenes
**********************************************************************************************************/
h1,h2,h3,h4,h5,p,span,div,fieldset,body,input,textarea,select{ margin:0; padding:0; }
input, select{ background:transparent; border:none;}

body {font-size: 1em; background-image: url(/Imagenes/Principales/login-fondo.jpg), url(/Imagenes/Principales/login-fondo.jpg);  background-size: 100% 100%; background-repeat: no-repeat; background-position: center center; background-color: #bd1b0e; }
.clear{ clear:both;}

.usos {padding-top:3%; color:white; background-color: #A2180D; font-family: 'mcondensed';}
.usos a{text-decoration: none; color:white; }

.cont-mapa {width: 89%; height: 84%; margin: 2% 0% 5% 5%; border: solid 3px #541D1F; border-radius: 5px;}
.cont-mapa img{ max-width: 100%; max-height: 100%;}
.cont-viaje{background-color: #E2E3E4; text-align: center; width: 40%; height: auto; margin: 2% 30% 20% 30%; border: solid 3px #541D1F; border-radius: 6px;}
 .cont-viaje .titulo-viaje{background-color: #3f3d39; color: #FFF; font-size: 130%; font-family: 'mboldcondensed'; font-weight: normal;}
 .cont-viaje .titulo-viaje img{width: 50px; height: 15px; margin: 0% 1%;}
 .cont-viaje .titulo-opcion{ font-size: 110%; float: left;  border-top: solid 3px #541D1F; border-right: solid 3px #541D1F; border-bottom: solid 3px #541D1F; border-radius: 4px;  width: 15%; height: 5%; margin: 1% 15% 0% 0%; font-family: 'mboldcondensed'; font-weight: normal;}
 .cont-viaje .tiempo-opcion{float: left; width: 50%; height: 5%; margin: 1% 0% 0% 0%; text-align: left; font-size: 110%; font-family: 'mboldcondensed'; font-weight: normal;}
 .cont-viaje .trayecto{  border-top: solid 3px #541D1F; border-bottom: solid 3px #541D1F; clear: left; width: 100%; height: auto; background-color: #FFF; margin: 1% 10% 2% 0%; text-align: left; font-size: 110%; font-family: 'mregular'; font-weight: normal;}
 .cont-viaje .trayecto p{font-family: 'mregular'; }
 .cont-viaje .trayecto p .ruta1{margin:0%; color:#009900; font-family: 'mboldcondensed';}
 .cont-viaje .trayecto p .ruta2{margin:0%; color:#FB070B; font-family: 'mboldcondensed';}
 .cont-viaje .trayecto p .ruta3{margin:0%; color:#016BC1; font-family: 'mboldcondensed';}
 .cont-viaje .trayecto .estacion-nombre{float: left; font-size: 1em; width: 35%; font-family: 'mboldcondensed';}
 .cont-viaje .trayecto .estacion-imagen {float: left; width: 10%; text-align: left; margin-right: 5%;}
 .cont-viaje .trayecto .estacion-imagen img{ width: 100%;}
 .cont-viaje .trayecto .adicional{float: left; width: 40%; text-align: left; margin-right: 10%; }
 .cont-viaje .trayecto .adicional span{margin-right: 2%; font-family: "mboldcondensed"; float: left; text-align: left; }
 .cont-viaje .info-ruta1{background-color: #009900; color: #FFF; width: 100%; font-size: 110%; border-top: solid 3px #541D1F; border-bottom: solid 3px #541D1F; margin: 0% 10% 0% 0%; font-family: 'mcondensed';}
 .cont-viaje .info-ruta2{background-color: #FB070B; color: #FFF; width: 100%; font-size: 110%; border-top: solid 3px #541D1F; border-bottom: solid 3px #541D1F; margin: 0% 10% 0% 0%; font-family: 'mcondensed';}
 .cont-viaje .info-ruta3{background-color: #016BC1; color: #FFF; width: 100%; font-size: 110%; border-top: solid 3px #541D1F; border-bottom: solid 3px #541D1F; margin: 0% 10% 0% 0%; font-family: 'mcondensed';}
 .cont-viaje #titulo-info{font-family: "mboldcondensed";}


/*CELULARES DE 4 pulgadas HASTA tablets*/
@media screen and (min-width:500px) and (max-width:800px) {
 .cont-viaje{background-color: #E2E3E4; text-align: center; width: 60%; height: auto; margin: 2% 20% 20% 20%; border: solid 3px #541D1F; border-radius: 6px;}
 .cont-viaje .titulo-viaje{background-color: #3f3d39; color: #FFF; font-size: 110%; font-family: 'mboldcondensed'; font-weight: normal;}
 .cont-viaje .titulo-viaje img{width: 25px; height: 12px; margin: 0% 1%;}
 .cont-viaje .titulo-opcion{font-size: 100%; float: left;  border-top: solid 3px #541D1F; border-right: solid 3px #541D1F; border-bottom: solid 3px #541D1F; border-radius: 4px;  width: auto; height: 5%; margin: 1% 10% 0% 0%; font-family: 'mboldcondensed'; font-weight: normal;}
 .cont-viaje .tiempo-opcion{font-size: 100%; float: left; width: 70%; height: 5%; margin: 1% 0% 0% 0%; text-align: left; font-family: 'mboldcondensed'; font-weight: normal;}
 .cont-viaje .trayecto{font-size: 100%; border-top: solid 3px #541D1F; border-bottom: solid 3px #541D1F; clear: left; width: 100%; height: auto; background-color: #FFF; margin: 1% 10% 2% 0%; text-align: left; font-family: 'mregular'; font-weight: normal;}
 .cont-viaje .trayecto p{font-family: 'mregular'; }
 .cont-viaje .trayecto p .ruta1{margin:0%; color:#009900; font-family: 'mboldcondensed';}
 .cont-viaje .trayecto p .ruta2{margin:0%; color:#FB070B; font-family: 'mboldcondensed';}
 .cont-viaje .trayecto p .ruta3{margin:0%; color:#016BC1; font-family: 'mboldcondensed';}
 .cont-viaje .trayecto .estacion-nombre{font-size: 100%; float: left; width: 30%; font-family: 'mboldcondensed';}
 .cont-viaje .trayecto .estacion-imagen {float: left; width: 10%; text-align: left; margin-right: 6%;}
 .cont-viaje .trayecto .estacion-imagen img{width: 100%;}
 .cont-viaje .trayecto .adicional{float: left; width: 30%; text-align: left; margin-right: 20%;}
 .cont-viaje .info-ruta1{background-color: #009900; color: #FFF; font-size: 95%; border-top: solid 3px #541D1F; border-bottom: solid 3px #541D1F; margin: 0% 10% 0% 0%; font-family: 'mcondensed'; }
 .cont-viaje .info-ruta2{background-color: #FB070B; color: #FFF;  font-size: 95%; border-top: solid 3px #541D1F; border-bottom: solid 3px #541D1F; margin: 0% 10% 0% 0%; font-family: 'mcondensed'; }
 .cont-viaje .info-ruta3{background-color: #016BC1; color: #FFF;  font-size: 95%;    border-top: solid 3px #541D1F; border-bottom: solid 3px #541D1F; margin: 0% 10% 0% 0%; font-family: 'mcondensed'; }
}


/*CELULARES DE 2.5 HASTA 3.5 PULGADAS*/
@media screen and (min-width:240px) and (max-width:500px){
.cont-viaje{background-color: #E2E3E4; text-align: center; width: 80%; height: auto; margin: 2% 30% 35% 10%; border: solid 3px #541D1F; border-radius: 6px;}
.cont-viaje .titulo-viaje{background-color: #3f3d39; color: #FFF; font-size: 90%; font-family: 'mboldcondensed'; font-weight: normal;}	
.cont-viaje .titulo-opcion{font-size: 90%; float: left;  border-top: solid 3px #541D1F; border-right: solid 3px #541D1F; border-bottom: solid 3px #541D1F; border-radius: 4px;  width: auto; height: 5%; margin: 1% 10% 0% 0%; font-family: 'mboldcondensed'; font-weight: normal;}
.cont-viaje .tiempo-opcion{font-size: 90%; float: left; width: 70%; height: 5%; margin: 1% 0% 0% 0%; text-align: left; font-family: 'mboldcondensed'; font-weight: normal;}
.cont-viaje .trayecto{font-size: 90%; border-top: solid 3px #541D1F; border-bottom: solid 3px #541D1F; clear: left; width: 100%; height: auto; background-color: #FFF; margin: 1% 10% 2% 0%; text-align: left; font-family: 'mregular'; font-weight: normal;}
.cont-viaje .trayecto p{font-family: 'mregular';}
.cont-viaje .trayecto p .ruta1{margin:0%; color:#009900; font-family: 'mboldcondensed';}
.cont-viaje .trayecto p .ruta2{margin:0%; color:#FB070B; font-family: 'mboldcondensed';}
.cont-viaje .trayecto p .ruta3{margin:0%; color:#016BC1; font-family: 'mboldcondensed';}	
.cont-viaje .trayecto .estacion-nombre{font-size: 100%; float: left; width: 30%; font-family: 'mboldcondensed';}
.cont-viaje .trayecto .estacion-imagen {float: left; width: 10%; text-align: left; margin-right: 6%;}
.cont-viaje .trayecto .adicional{float: left; width: 30%; text-align: left; margin-right: 20%;}
.cont-viaje .info-ruta1{background-color: #009900; color: #FFF; font-size: 95%; border-top: solid 3px #541D1F; border-bottom: solid 3px #541D1F; margin: 0% 10% 0% 0%; font-family: 'mcondensed';}
.cont-viaje .info-ruta2{background-color: #FB070B; color: #FFF; font-size: 95%; border-top: solid 3px #541D1F; border-bottom: solid 3px #541D1F; margin: 0% 10% 0% 0%; font-family: 'mcondensed';}
.cont-viaje .info-ruta3{background-color: #016BC1; color: #FFF; font-size: 95%; border-top: solid 3px #541D1F; border-bottom: solid 3px #541D1F; margin: 0% 10% 0% 0%; font-family: 'mcondensed';}

}

/* Condiciones de Usos */
.pie {max-width:100%; text-align: center; position: fixed; bottom: 0%; background-color: #541d1f; width: 100%;}
.pie .cotenedor { max-width:100%;margin: auto; width: 80%; }
.pie .cotenedor span { max-width:100%;color: #FFF; font-size: 80%; font-family: 'mcondensed'; }