@charset "UTF-8";
/* CSS Document */

* {padding: 0; margin: 0;}

/* TOP */ 
#top {width: 100%; background: #80c41c; height: 620px; -webkit-box-shadow: inset 0 0px 40px rgba(0,0,0,.2); box-shadow: inset 0 0px 40px rgba(0,0,0,.2);}
.container_top {width: 67.5%; margin: 0 auto;}
.izq_top {width: 58%; padding: 120px 0; float: left; margin-right: 3%;}
.izq_top img {width: 100%;}
.izq_top p {font-family: 'Open Sans', sans-serif; font-weight: 200; font-size: 1.6em; color: #FFF; text-align: justify; margin: 10px 0 20px 5px;}
.izq_top a {text-decoration: none; border: solid 2px #FFF; border-radius: 10px; height: 75px; width: 215px; background: url(texto-boton.png); background-size: 215px 75px; display: block; -webkit-background-size: 215px 75px; -moz-background-size: 215px 75px;}
.nexus5-top { position: absolute; top: 70px;}
.der_top {width: 39%; float: left;}

.bloque_funcion {width: 790px; margin: 0 auto; padding: 0 15px 0 15px;}

/* TITULO */ 
.titulo {height:350px; width: 100%; display:block; text-align:center;}
.titulo h1 {padding-top: 150px;font-family: 'Open Sans', sans-serif; font-weight: 700; font-size: 3em; color: #444;}
.titulo p {font-family: 'Open Sans', sans-serif; font-weight: 200; font-size: 1.5em; color: #666;}

/* MAPA */ 
.gris {width: 100%; background: #f4f4f4; height: 500px; padding: 50px 0 0 0;}
.nexus5-mapa {float: left; background:url(mapa.png); height: 500px; width: 300px; background-size: 100%;}
.texto {width: 410px; display: block; float: left; margin: 120px 0 0 70px; text-align: center;}
.texto h3 {font-family: 'Open Sans', sans-serif; font-weight: 200; font-size: 2em; color: #444; text-align: left; line-height: 1em; margin: 20px 0 20px 0;}
.texto p {font-family: 'Open Sans', sans-serif; font-weight: 200; font-size: 1em; color: #666; text-align: justify;}

/* FAVORITOS */ 
.blanco {width: 100%; background: #fff; height: 500px; padding: 50px 0 0 0;}
.nexus5-favoritos {float: left; background:url(favoritos.png); height: 500px; width: 300px; background-size: 100%;}
.texto2 {width: 380px; display: block; float: left; margin: 120px 100px 0 0; text-align: center;}
.texto2 h3 {font-family: 'Open Sans', sans-serif; font-weight: 200; font-size: 2em; color: #444; text-align: left; line-height: 1em; margin: 20px 0 20px 0;}
.texto2 p {font-family: 'Open Sans', sans-serif; font-weight: 200; font-size: 1em; color: #666; text-align: justify;}

/* RECORRIDOS */ 
.gris-bottom {width: 100%; background: #f4f4f4; height: 500px; padding: 50px 0 0 0; position: relative;}
.nexus5-recorridos {float: left; background:url(recorridos.png); height: 500px; width: 300px; background-size: 100%;}
.nexus5-bottom { margin-left: -165px;}
.texto3 {width: 350px; display: block; float: right; margin: 120px 0 0 90px; text-align: center;}
.texto3 h3 {font-family: 'Open Sans', sans-serif; font-weight: 200; font-size: 2em; color: #444; text-align: left; line-height: 1em; margin: 20px 0 20px 0;}
.texto3 p {font-family: 'Open Sans', sans-serif; font-weight: 200; font-size: 1em; color: #666; text-align: justify;}

/* FAVORITOS */ 
.blanco {width: 100%; background: #fff; height: 500px; padding: 50px 0 0 0;}
.nexus5-denunciar {float: left; background:url(denunciar.png); height: 500px; width: 300px; background-size: 100%;}
.texto2 {width: 380px; display: block; float: left; margin: 120px 100px 0 0; text-align: center;}
.texto2 h3 {font-family: 'Open Sans', sans-serif; font-weight: 200; font-size: 2em; color: #444; text-align: left; line-height: 1em; margin: 20px 0 20px 0;}
.texto2 p {font-family: 'Open Sans', sans-serif; font-weight: 200; font-size: 1em; color: #666; text-align: justify;}



/* FOOTER */ 
.footer {width: 100%; background: #80c41c; height: 100px;}
.alinearfooter {display: block; width: 75%; margin: auto; height: 100px;}
.alinearizquierda {display: block; float: left;}
.alinearizquierda img {vertical-align: -55px;}
.alinearderecha {display: block; float: right; margin-top: 35px;}
.alinearderecha p {font-family: 'Open Sans', sans-serif; font-weight: 200; font-size: 1em; color: #FFF; height: 20px; display: block; text-align: right;}
.alinearderecha a {font-family: 'Open Sans', sans-serif; font-weight: 200; font-size: 1em; color: #FFF; height: 20px; text-decoration: underline; display: block; text-align: right;}

/* ANIMACION */ 
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -moz-animation-duration: 1s;
  -o-animation-duration: 1s;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
}


@-webkit-keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px);
	-moz-transform: translateY(-2000px);
    -o-transform: translateY(-2000px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
	-moz-transform: translateY(0);
    -o-transform: translateY(0);
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
  -moz-animation-name: slideInDown;
  -o-animation-name: slideInDown;
}

@-webkit-keyframes slide-animation {
0% {opacity:1;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-800px; opacity:1;}
45% {left:-800px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-1600px; opacity:1;}
70% {left:-1600px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-2400px; opacity:1;}
95% {opacity:1;}
98% {left:-2400px; opacity:1;}
100% {opacity:1;}
}
@-moz-keyframes slide-animation {
0% {opacity:1;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-800px; opacity:1;}
45% {left:-800px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-1600px; opacity:1;}
70% {left:-1600px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-2100px; opacity:1;}
95% {opacity:1;}
98% {left:-2100px; opacity:1;}
100% {opacity:1;}
}

@media only screen and (max-width: 320px)
{
#top {height: 400px;}
.container_top {width: 90%;}
.izq_top {width: 100%; padding: 50px 0; float: left; margin-right: 0;}
.izq_top p {font-size: 1em; color: #FFF;}
.der_top {display: none;}

.titulo {height: 145px; background: #FFF;}
.titulo h1 {padding-top: 20px; font-size: 1.3em; width: 90%; margin: 0 auto;}
.titulo p {font-size: 1em; width: 90%; margin: 0 auto;}

.bloque_funcion {width: 90%; border: solid 1px #ccc; background: #FFF; padding: 0;}

.gris {height: auto; padding: 0; background: #FFF;}

/* MAPA */ 
.nexus5-mapa {float: none; height: 250px; width: 150px; margin: 0 auto;}
.nexus5-recorridos {float: none; height: 250px; width: 150px; margin: 0 auto;}
.nexus5-favoritos {float: none; height: 250px; width: 150px; margin: 0 auto;}
.texto {width: 100%; float: none; margin: 0; background: #f4f4f4; padding-top: 15px; border-top: solid 1px #ccc;}
.texto h3 {font-size: 1.5em; text-align: center; line-height: 1em; margin: 10px 0 10px 0; padding:0 15px;}
.texto p {font-size: 1em; padding: 15px;}

.blanco {height: auto; padding: 20px 0;}

/* FAVORITOS */ 
.texto2 {width: 100%; float: none; margin: 0; background: #f4f4f4; padding-top: 15px; border-bottom: solid 1px #ccc;}
.texto2 h3 {font-size: 1.5em; text-align: center; line-height: 1em; margin: 10px 0 10px 0; padding:0 15px;}
.texto2 p {font-size: 1em; padding: 15px;}

.gris-bottom {height: auto; padding: 20px 0; background: #FFF;}

/* RECORRIDOS */ 
.nexus5-bottom { margin-left: -165px;}
.texto3 {width: 100%; float: none; margin: 0; background: #f4f4f4; padding-top: 15px; border-top: solid 1px #ccc;}
.texto3 h3 {font-size: 1.5em; text-align: center; line-height: 1em; margin: 10px 0 10px 0; padding:0 15px;}
.texto3 p {font-size: 1em; padding: 15px;}

/* FOOTER */ 
.alinearizquierda img { display: none;}
.alinearderecha {display: block; float: none; padding-top: 35px; margin-top: 0;}
.alinearfooter {width: 90%;}
.alinearderecha p {font-size: 0.8em;}
}


@media only screen and (min-width: 320px) and (max-width: 480px)
{
#top {height: 400px;}
.container_top {width: 90%;}
.izq_top {width: 100%; padding: 50px 0; float: left; margin-right: 0;}
.izq_top p {font-size: 1em; color: #FFF;}
.der_top {display: none;}

.titulo {height: 145px; background: #FFF;}
.titulo h1 {padding-top: 20px; font-size: 1.8em; width: 90%; margin: 0 auto;}
.titulo p {font-size: 1em; width: 90%; margin: 0 auto;}

.bloque_funcion {width: 90%; border: solid 1px #ccc; background: #FFF; padding: 0;}

.gris {height: 600px; padding: 0; background: #FFF;}

/* MAPA */ 
.nexus5-mapa {float: none; height: 250px; width: 150px; margin: 0 auto;}
.nexus5-recorridos {float: none; height: 250px; width: 150px; margin: 0 auto;}
.nexus5-favoritos {float: none; height: 250px; width: 150px; margin: 0 auto;}
.nexus5-denunciar {float: none; height: 250px; width: 150px; margin: 0 auto;}
.texto {width: 100%; float: none; margin: 0; background: #f4f4f4; padding-top: 15px; border-top: solid 1px #ccc;}
.texto h3 {font-size: 1.5em; text-align: center; line-height: 1em; margin: 10px 0 10px 0; padding:0 15px;}
.texto p {font-size: 1em; padding: 15px;}

.blanco {height: 600px; padding: 20px 0;}

/* FAVORITOS */ 
.texto2 {width: 100%; float: none; margin: 0; background: #f4f4f4; padding-top: 15px; border-bottom: solid 1px #ccc;}
.texto2 h3 {font-size: 1.5em; text-align: center; line-height: 1em; margin: 10px 0 10px 0; padding:0 15px;}
.texto2 p {font-size: 1em; padding: 15px;}

.gris-bottom {height: 600px; padding: 20px 0; background: #FFF;}

/* RECORRIDOS */ 
.nexus5-bottom { margin-left: -165px;}
.texto3 {width: 100%; float: none; margin: 0; background: #f4f4f4; padding-top: 15px; border-top: solid 1px #ccc;}
.texto3 h3 {font-size: 1.5em; text-align: center; line-height: 1em; margin: 10px 0 10px 0; padding:0 15px;}
.texto3 p {font-size: 1em; padding: 15px;}

/* FOOTER */ 
.alinearizquierda img { display: none;}
.alinearderecha {display: block; float: none; padding-top: 35px; margin-top: 0;}
.footer { height: 130px;}
}

@media only screen and (min-width: 480px) and (max-width: 640px)
{
#top {height: 400px;}
.container_top {width: 90%;}
.izq_top {width: 100%; padding: 50px 0; float: left; margin-right: 0;}
.izq_top p {font-size: 1em; color: #FFF;}
.der_top {display: none;}

.titulo {height: 145px; background: #FFF;}
.titulo h1 {padding-top: 20px; font-size: 1.8em; width: 90%; margin: 0 auto;}
.titulo p {font-size: 1em; width: 90%; margin: 0 auto;}

.bloque_funcion {width: 90%; border: solid 1px #ccc; background: #FFF; padding: 0;}

.gris {height: 580px; padding: 0; background: #FFF;}

/* MAPA */ 
.nexus5-mapa {float: none; height: 250px; width: 150px; margin: 0 auto;}
.nexus5-recorridos {float: none; height: 250px; width: 150px; margin: 0 auto;}
.nexus5-favoritos {float: none; height: 250px; width: 150px; margin: 0 auto;}
.nexus5-denunciar {float: none; height: 250px; width: 150px; margin: 0 auto;}
.texto {width: 100%; float: none; margin: 0; background: #f4f4f4; padding-top: 15px; border-top: solid 1px #ccc;}
.texto h3 {font-size: 1.5em; text-align: center; line-height: 1em; margin: 10px 0 10px 0; padding:0 60px;}
.texto p {font-size: 1em; padding: 15px;}

.blanco {height: 580px; padding: 20px 0;}

/* FAVORITOS */ 
.texto2 {width: 100%; float: none; margin: 0; background: #f4f4f4; padding-top: 15px; border-bottom: solid 1px #ccc;}
.texto2 h3 {font-size: 1.5em; text-align: center; line-height: 1em; margin: 10px 0 10px 0; padding:0 60px;}
.texto2 p {font-size: 1em; padding: 15px;}

.gris-bottom {height: 580px; padding: 20px 0; background: #FFF;}

/* RECORRIDOS */ 
.nexus5-bottom { margin-left: -165px;}
.texto3 {width: 100%; float: none; margin: 0; background: #f4f4f4; padding-top: 15px; border-top: solid 1px #ccc;}
.texto3 h3 {font-size: 1.5em; text-align: center; line-height: 1em; margin: 10px 0 10px 0; padding:0 60px;}
.texto3 p {font-size: 1em; padding: 15px;}

/* FOOTER */ 
.alinearizquierda img { display: none;}
.alinearderecha {display: block; float: none; padding-top: 35px; margin-top: 0;}
}

@media only screen and (min-width: 640px) and (max-width: 860px)
{
#top {height: 400px;}
.container_top {width: 90%;}
.izq_top {width: 100%; padding: 50px 0; float: left; margin-right: 0;}
.izq_top p {font-size: 1em; color: #FFF;}
.der_top {display: none;}


.titulo {height: 145px; background: #FFF;}
.titulo h1 {padding-top: 20px; font-size: 1.8em; width: 90%; margin: 0 auto;}
.titulo p {font-size: 1em; width: 90%; margin: 0 auto;}

.bloque_funcion {width: 90%; border: solid 1px #ccc; background: #FFF; padding: 0;}

.gris {height: 530px; padding: 0; background: #FFF;}

/* MAPA */ 
.nexus5-mapa {float: none; height: 250px; width: 150px; margin: 0 auto;}
.nexus5-recorridos {float: none; height: 250px; width: 150px; margin: 0 auto;}
.nexus5-favoritos {float: none; height: 250px; width: 150px; margin: 0 auto;}
.nexus5-denunciar {float: none; height: 250px; width: 150px; margin: 0 auto;}
.texto {width: 100%; float: none; margin: 0; background: #f4f4f4; padding-top: 15px; border-top: solid 1px #ccc;}
.texto h3 {font-size: 1.5em; text-align: center; line-height: 1em; margin: 10px 0 10px 0; padding:0 15px;}
.texto p {font-size: 1em; padding: 15px;}

.blanco {height: 530px; padding: 20px 0;}

/* FAVORITOS */ 
.texto2 {width: 100%; float: none; margin: 0; background: #f4f4f4; padding-top: 15px; border-bottom: solid 1px #ccc;}
.texto2 h3 {font-size: 1.5em; text-align: center; line-height: 1em; margin: 10px 0 10px 0; padding:0 15px;}
.texto2 p {font-size: 1em; padding: 15px;}

.gris-bottom {height: 550px; padding: 20px 0; background: #FFF;}

/* RECORRIDOS */ 
.nexus5-bottom { margin-left: -165px;}
.texto3 {width: 100%; float: none; margin: 0; background: #f4f4f4; padding-top: 15px; border-top: solid 1px #ccc;}
.texto3 h3 {font-size: 1.5em; text-align: center; line-height: 1em; margin: 10px 0 10px 0; padding:0 15px;}
.texto3 p {font-size: 1em; padding: 15px;}

/* FOOTER */ 
.alinearizquierda img { display: none;}
.alinearderecha {display: block; float: none; padding-top: 35px; margin-top: 0;}
}

@media only screen and (max-width: 860px)
{
.bloque_funcion {-moz-box-shadow: 0px 1px 3px #ccc; -webkit-box-shadow: 0px 1px 3px #ccc; box-shadow: 0px 1px 3px #ccc;}
.izq_top a {margin: 0 auto;}
}

@media only screen and (min-width: 860px)
{
.izq_top a:hover {-webkit-box-shadow: 5px 5px 30px rgba(0,0,0,.3); box-shadow: 5px 5px 30px rgba(0,0,0,.3); -webkit-transition: .2s ease all;-moz-transition: .2s ease all; -o-transition: .2s ease all; -ms-transition: .2s ease all; transition: .2s ease all; background-color: #000;}
}