html – How do I change the color of the links on mobile devices?

Question:

Hello, I have problems with my website on mobile devices, the thing that the links button on one page appears on the left and on another it appears on the right. But the text that is displayed when clicking the links button is barely recognizable, I have the following code and I can't get the black link words to show. What should I change to make the links in the text black and be able to distinguish them on mobile phones? Thank you.

*{
	padding:0;
	margin:0;
}

.container{
      overflow: hidden;
}

html nav.navbar.navbar-custom{
  padding: 0;
  margin:0;
}

html {
  
    width: 100%;
    height: 100%;
}

a {
    color: #666;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

a:hover,
a:focus {
    text-decoration: none;
}

.light {
    font-weight: 400;
}

/* ------- Navigation ------------ */
#navigation {
	background: #fff;
	z-index: 9999;
	width:100%;
    box-sizing:border-box;
	border-bottom: 1px solid #eee;
	box-shadow:0px 0px 20px rgba(0, 0, 0, 0.1);
	
}

/* codigo de Alvaro Montoro  */
div#navigation-sticky-wrapper {
    position: relative;
    z-index: 121;
}

.navbar {
	margin-bottom: 0;
	padding-right: 0% !important;
}

.navbar-brand {
    font-weight: 700;
}


.navbar-brand:focus {
    outline: 0;
}

.nav.navbar-nav {
    background-color: rgba(255,255,255,.6);
}

.navbar-custom.top-nav-collapse .nav.navbar-nav {
    background-color: rgba(0,0,0,0);
}


.navbar-custom ul.nav li a {
	font-size: 16px;
	letter-spacing: 1px;
    color: #444;
	text-transform: uppercase;
	font-weight: 700;
}

.navbar-custom.top-nav-collapse ul.nav li a {
	    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
	color: #fff;
}

.navbar-custom ul.nav ul.dropdown-menu {
	  border-radius: 0;	
	margin-top: 21px;
	border-top: none;
}

.navbar-custom ul.nav li a:hover ul.dropdown-menu {
	    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}


.navbar-custom ul.nav ul.dropdown-menu li {
	border-bottom: 1px solid #f5f5f5;

}

.navbar-custom ul.nav ul.dropdown-menu li:last-child{
	border-bottom: none;
}

.navbar-custom ul.nav ul.dropdown-menu li a {
	padding: 10px 20px;
}

.navbar-custom ul.nav ul.dropdown-menu li a:hover {
	background: #fefefe;
}

.navbar-custom.top-nav-collapse ul.nav ul.dropdown-menu li a {
	color: #666;
}

.navbar-custom .nav li a {
    -webkit-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
}

.navbar-custom .nav li a:hover,
.navbar-custom .nav li a:focus,
.navbar-custom .nav li.active {
    outline: 0;
    background-color: rgba(255,255,255,.2);
}
.navbar-custom .nav li a:hover,
.navbar-custom .nav li a:focus,
.navbar-custom .nav li.active {
    outline: 0;
    background-color: rgba(255,255,255,.2);
}

.navbar-toggle {
    padding: 4px 6px;
    font-size: 14px;
    color: #fff;
}

.navbar-toggle:focus,
.navbar-toggle:active {
    outline: 0;
}


.home-section.nopadd-bot {
    padding-bottom: 0;
}


.color-light blockquote,.color-light p {
	color: #fefefe;
}

.bg-white {
	background: #fff;
}

.bg-gray {
	background: #f9f9f9;
}


.bg-dark {
	background: #404040;
}

.text-light {
	color: #fff;
}

.brand-heading {
    font-size: 40px;
}

.intro-text {
    font-size: 18px;
}

.header-text {
    position: absolute;
    top: 20%;
    left: 1.8%;
    right: auto;
    width: 96.66666666666666%;
    color: #fff;
}

.btn-min-block {
    min-width: 170px;
    line-height: 26px;
}

.btn-theme {
    color: #fff;
    background-color: transparent;
    border: 2px solid #fff;
    margin-right: 15px;
}

.btn-theme:hover {
    color: #000;
    background-color: #fff;
    border-color: #fff;
}

.btn-lg,
.btn-group-lg > .btn {
  border-radius: 2px;
}

.input-group-addon {
  background-color: #fefefe;
  border: 1px solid #eee;
}

/* --- button --- */
.btn {
	border-radius: 2px;
	position: relative;
	display: inline-block;
	outline: none;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;	
	text-shadow: 0 0 1px rgba(255,255,255,0.3);
	font-size: 14px;
}

.btn.btn-noradius {
	border-radius: 0;
}

a.btn:focus{
	outline: 0;
}

.btn-red {
  color: #fff;
  background-color: #c83539;
  border-color: #c83539;
}
.btn-red:hover,
.btn-red:focus,
.btn-red:active,
.btn-red.active {
  color: #fff;
  background-color: #666;
  border-color: #666;
}
.btn-red:active {
  background-image: none;
}


.btn-skin:hover,
.btn-skin:focus,
.btn-skin:active,
.btn-skin.active {
  color: #fff;
  background-color: #666;
  border-color: #666;
}


.btn-default:hover,
.btn-default:focus {
    border: 1px solid #28c3ab;
    outline: 0;
    color: #000;
    background-color: #28c3ab;
}

.btn-huge {
    padding: 25px;
    font-size: 26px;
}

.banner-social-buttons {
    margin-top: 0;
}

/* Media queries */

@media(min-width:767px) {

    .navbar {
        padding: 20px 0;
        border-bottom: 0;
        letter-spacing: 1px;
        background: 0 0;
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
    }

    .top-nav-collapse {
        padding: 0;
        background-color: #000;
    }

    .navbar-custom.top-nav-collapse {
        border-bottom: 1px solid rgba(255,255,255,.3);
    }
	
    .intro {
        height: 100%;
        padding: 0;
    }

    .brand-heading {
        font-size: 100px;
    }
	

    .intro-text {
        font-size: 25px;
    }


}
@media (max-width:768px) {
	#navigation {
		padding: 20px 0;
	}
	.site-logo{
		margin: 0 0 0 30px;
		float:none;
	}
	.navbar-custom ul.nav li a {
		color: #eee;
	}
	.navbar-custom ul.nav ul.dropdown-menu li {
		border-bottom: 1px solid #aaa;

	}
	.navbar-header {
		margin-top:-40px;
		padding:0;
	}
	.navbar-header button {
		background: #111;
	}
	
	.navbar-header button.navbar-toggle {
		padding: 4px 15px;
		font-size: 14px;
		color: #fff;
		
	}
	
	.navbar-custom .nav {
		background: #444;
	}
	
	.service-box {
		margin-bottom: 50px;
	}
	
	.team-wrap {
		margin-bottom: 30px;
	}

	.xs-marginbot-20 {
		margin-bottom: 20px;
	}

}

@media (max-width:480px) {
	.nav a{
		color: black;
	}

	.navbar-custom .nav.navbar-nav {
    background-color: rgba(255,255,255,.4);
	}
	
	.navbar.navbar-custom.navbar-fixed-top {
		margin-bottom: 30px;
	}
}

.navbar .navbar-custom {
	padding: 0;
}

/*  OTROS ESTILOS  */

/* Añadido por Checho parrado  */
* {
    -webkit-text-size-adjust: none;
    -webkit-box-sizing:border-box; box-sizing: border-box; 
}

a{
    text-decoration: none;
    color: inherit;
    outline: none;
    transition: 0.5s ease;
    -o-transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
}
.btn  {
    margin-top: 73px;
    color: #fff;
    display: inline-block;
    padding: 22px 62px 24px;
    background-color: #25952a /*#3da9b6*/;
    font: bold 30px/40px 'Dosis', sans-serif;
}

.btn:hover {
    background-color: #1d1d1d;
}

<!DOCTYPE html>
<html lang="es">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<link type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>
  <body id="page-top" data-spy="scroll" data-target=".navbar-custom">
	<div class="loader">

	</div>
	<img src="http://i42.tinypic.com/212ct3s.jpg"
	 width="100%" height="650" frameborder="0" style="border:0" allowfullscreen>
	<div id="navigation">
		<nav class="navbar navbar-custom" role="navigation">
			<div class="container">
				<div class="row">
					<div class="col-md-2">
						<div class="site-logo">
							<img id="logo" src="../img/logo.png" alt="Imagen de agrochema" />
						</div>
					</div>
					<div class="col-md-10">
						<div class="navbar-header">
							<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
								<i class="fa fa-bars"></i>
							</button>
						</div>
						<div class="collapse navbar-collapse" id="menu">
							<ul class="nav navbar-nav navbar-right">
								<li class="active">
									<a href="../index.html">Casa</a>
								</li>
								<li>
									<a href="../galerias.html#about">Sobre mi</a>
								</li>
								<li>
									<a href="../galerias.html">Servicios</a>
								</li>
								<li>
									<a href="../galerias.html">Trabajos</a>
								</li>

								<li>
									<a href="#works">Contacto</a>
								</li>
						</ul>
						</div>
					</div>
				</div>
			</div>
		</nav>
	</div>
	<section id="about" class="home-section color-dark bg-white">
		<div class="container marginbot-50">
			<div class="row">
				<div class="col-lg-8 col-lg-offset-2">
					<div class="animatedParent">
						<div class="section-heading text-center animated bounceInDown">
							<h2 class="h-bold">Nuestros precios...</h2>
							<div class="divider-header"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="container">
			<div class="container_12">
				<div class="row">
					<div class="col-md-4 col-sm-12 col-xs-12">
						<p class="color1">Ponemos a su servicio nuestra larga experiencia y los materiales de primeras marcas. ...</p>
						<ul class="list2">
							<li>
								<div class="prod">
									<a>Mantenimiento mensual</a>
								</div>
								<div class="price">Desde 50€</div>
							</li>

						</ul>
					</div>
          </div>
          </div>
          </div>
          </div>
          </section>
          <footer>       
          <p>JAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
          </footer>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
  </html>

Answer:

Your problem is in the media query, since you are telling it to have the color #eee . Simply put the color black or whatever you want to the rule that applies to the links in the media query and that's it.

@media (max-width:768px) {

    .navbar-custom ul.nav li a {
        color: black;
    }
}

Your modified example:

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,700,900);
@import url('https://fonts.googleapis.com/css?family=Ek+Mukta:400,600,700');
*{
	padding:0;
	margin:0;
}

.container{
      overflow: hidden;
}

html nav.navbar.navbar-custom{
  padding: 0;
  margin:0;
}

body {
    width: 100%;
    height: 100%;
    font-family: 'Ek Mukta', sans-serif;
	font-weight: 300;
    color: #666;
    background-color: #fff;
	font-size: 16px;
    line-height: 1.6em;
	font-weight: 400;
	overflow-x: hidden;
}

html {
  
    width: 100%;
    height: 100%;
}

.big-heading {
	font-size: 48px;
	font-weight: 700;
}

p {
    margin: 0 0 10px;

}

.text-center{
	font-size: 20px;
	
}

.service-desc p{
	font-size: 16px;
}

p.lead {
	font-weight: 600;
}

.highlight-light {
	background-color: rgba(255,255,255,.5);
	padding: 20px;
	display: inline-block;
	color: #111;
}

.highlight-dark {
	background-color: rgba(0,0,0,.5);
	padding: 20px;
	display: inline-block;
	color: #fff;
}

.highlight-color {
	padding: 20px;
	display: inline-block;
}

a {
    color: #666;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

a:hover,
a:focus {
    text-decoration: none;
}

blockquote {
  padding: 10px 20px;
  margin: 0 0 20px;
  font-size: 24px;
	line-height: 1.5em;
  font-weight: 300;
  color: #999;
}

blockquote.bg-light {
	background-color: rgba(255,255,255,.8);
	padding: 20px;
	color: #222;
}

blockquote.bg-dark {
	background-color: rgba(0,0,0,.8);
	padding: 20px;
}

blockquote strong {
  font-weight: 700;
}
.light {
    font-weight: 400;
}

.site-logo {
	display: flex;
}
.site-logo a.brand {
	color: #111;
	text-transform: uppercase;
	font-size: 32px;
	font-family: 'Roboto', sans-serif;
	font-weight: 900;
	margin-top: 20px;
}


/* ------- Navigation ------------ */
#navigation {
	background: #fff;
	z-index: 9999;
	width:100%;
    box-sizing:border-box;
	border-bottom: 1px solid #eee;
	box-shadow:0px 0px 20px rgba(0, 0, 0, 0.1);
	
}

/* codigo de Alvaro Montoro  */
div#navigation-sticky-wrapper {
    position: relative;
    z-index: 121;
}

.navbar {
	margin-bottom: 0;
	padding-right: 0% !important;
}

.navbar-brand {
    font-weight: 700;
}


.navbar-brand:focus {
    outline: 0;
}

.nav.navbar-nav {
    background-color: rgba(255,255,255,.6);
}

.navbar-custom.top-nav-collapse .nav.navbar-nav {
    background-color: rgba(0,0,0,0);
}


.navbar-custom ul.nav li a {
	font-size: 16px;
	letter-spacing: 1px;
    color: #444;
	text-transform: uppercase;
	font-weight: 700;
}

.navbar-custom.top-nav-collapse ul.nav li a {
	    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
	color: #fff;
}

.navbar-custom ul.nav ul.dropdown-menu {
	  border-radius: 0;	
	margin-top: 21px;
	border-top: none;
}

.navbar-custom ul.nav li a:hover ul.dropdown-menu {
	    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}


.navbar-custom ul.nav ul.dropdown-menu li {
	border-bottom: 1px solid #f5f5f5;

}

.navbar-custom ul.nav ul.dropdown-menu li:last-child{
	border-bottom: none;
}

.navbar-custom ul.nav ul.dropdown-menu li a {
	padding: 10px 20px;
}

.navbar-custom ul.nav ul.dropdown-menu li a:hover {
	background: #fefefe;
}

.navbar-custom.top-nav-collapse ul.nav ul.dropdown-menu li a {
	color: #666;
}

.navbar-custom .nav li a {
    -webkit-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
}

.navbar-custom .nav li a:hover,
.navbar-custom .nav li a:focus,
.navbar-custom .nav li.active {
    outline: 0;
    background-color: rgba(255,255,255,.2);
}
.navbar-custom .nav li a:hover,
.navbar-custom .nav li a:focus,
.navbar-custom .nav li.active {
    outline: 0;
    background-color: rgba(255,255,255,.2);
}

.navbar-toggle {
    padding: 4px 6px;
    font-size: 14px;
    color: #fff;
}

.navbar-toggle:focus,
.navbar-toggle:active {
    outline: 0;
}

hr {
  margin-top: 10px;
}

hr.bold {
  border-top: 3px solid #eee;
}

.divider-header {
	display: block;
	width: 40px;
	height: 2px;
	margin: 0 auto;
	margin-bottom: 10px;
}

.divider-short {
	display: block;
	width: 60px;
	height: 5px;
	margin: 0 auto;
	margin-bottom: 10px;
}
.marginbot-0{margin-bottom:0 !important;}
.marginbot-10{margin-bottom:10px !important;}
.marginbot-20{margin-bottom:20px !important;}
.marginbot-30{margin-bottom:30px !important;}
.marginbot-40{margin-bottom:40px !important;}
.marginbot-50{margin-bottom:50px !important;}
.marginbot-60{margin-bottom:60px !important;}
.marginbot-70{margin-bottom:70px !important;}
.marginbot-80{margin-bottom:80px !important;}
.marginbot-90{margin-bottom:90px !important;}
.marginbot-100{margin-bottom:100px !important;}

.margintop-0{margin-top:0 !important;}
.margintop-10{margin-top:10px !important;}
.margintop-20{margin-top:20px !important;}
.margintop-30{margin-top:30px !important;}
.margintop-40{margin-top:40px !important;}
.margintop-45{margin-top:45px !important;}
.margintop-50{margin-top:50px !important;}

#container-2{
	background-color: #EBB250;
}
.home-section {
    padding-top: 20px;
    padding-bottom: 20px;
	display:block;
    position:relative;
	z-index:120;
	
}
.home-section2 {
    padding-top: 0px;
    padding-bottom: 20px;
	display:block;
    position:relative;
    z-index:120;
}

.inner-section {
    padding-top: 110px;
    padding-bottom: 110px;
}


.home-section.nopadd-bot {
    padding-bottom: 0;
}


.color-light blockquote,.color-light p {
	color: #fefefe;
}

.bg-white {
	background: #fff;
}

.bg-gray {
	background: #f9f9f9;
}


.bg-dark {
	background: #404040;
}

.text-light {
	color: #fff;
}

.intro {
	width:100%;
	position:relative;
	padding:0;
}
.intro-inner {
	width:100%;
	position:relative;
	padding:120px 0 20px;
}

.brand-heading {
    font-size: 40px;
}

.intro-text {
    font-size: 18px;
}

.header-text {
    position: absolute;
    top: 20%;
    left: 1.8%;
    right: auto;
    width: 96.66666666666666%;
    color: #fff;
}

.header-text h2 {
    font-size: 40px;
}

.header-text h2 span {
	padding: 10px;
	color: #fff;
	text-transform: uppercase;
}

.header-text h3 span {
	color: #fff;
}

.btn-min-block {
    min-width: 170px;
    line-height: 26px;
}

.btn-theme {
    color: #fff;
    background-color: transparent;
    border: 2px solid #fff;
    margin-right: 15px;
}

.btn-theme:hover {
    color: #000;
    background-color: #fff;
    border-color: #fff;
}

.item {
    margin: 10px;
}

.item img {
    display: block;
    width: 100%;
    height: auto;
}	

.btn-lg,
.btn-group-lg > .btn {
  border-radius: 2px;
}

.input-group-addon {
  background-color: #fefefe;
  border: 1px solid #eee;
}

.widget-contact {
	text-align: left;
}

.boxcol-25 {
	width: 100%;
}

.box-social {
	list-style: none;
}
.sidebar .widget h5 {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 20px;
	text-transform: uppercase;
}
.sidebar .widget {
	margin-bottom: 50px;
}

.widget ul {
	list-style: none;
	margin-left:0;
	padding-left:0;
}
.sidebar .widget ul li {
	margin-left:0;
	padding-left:0;
	margin-bottom: 10px;
}
.sidebar .widget ul li a {
	color: #666;
}


.widget.widget_categories ul li:before {
	display: inline-block;
	font-family: 'Pe-icon-7-stroke';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content: "\e684";
	margin-right: 10px;
}


.widget.widget_recent_post ul li figure {
	float: left;
	margin: 0 20px 0 0;
}

.widget.widget_recent_post ul li {
	margin-bottom: 25px;
}

.widget.widget_recent_post ul li:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.widget.widget_recent_post ul li h6 {
	margin-bottom: 10px;
}
.widget.widget_recent_post ul li span {
	font-size: 14px;
}

.widget .tagcloud a {
	padding: 4px 10px;
	color: #fff;
	display:inline-block;
	margin: 0 10px 10px 0;
	font-size: 14px;
	border-radius: 2px;
}

.widget .tagcloud a:hover {
	color: #fff;
	background: #333;
}
/* --- button --- */
.btn {
	border-radius: 2px;
	position: relative;
	display: inline-block;
	outline: none;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;	
	text-shadow: 0 0 1px rgba(255,255,255,0.3);
	font-size: 14px;
}

.btn.btn-noradius {
	border-radius: 0;
}

a.btn:focus{
	outline: 0;
}

.btn-red {
  color: #fff;
  background-color: #c83539;
  border-color: #c83539;
}
.btn-red:hover,
.btn-red:focus,
.btn-red:active,
.btn-red.active {
  color: #fff;
  background-color: #666;
  border-color: #666;
}
.btn-red:active {
  background-image: none;
}


.btn-skin:hover,
.btn-skin:focus,
.btn-skin:active,
.btn-skin.active {
  color: #fff;
  background-color: #666;
  border-color: #666;
}


.btn-default:hover,
.btn-default:focus {
    border: 1px solid #28c3ab;
    outline: 0;
    color: #000;
    background-color: #28c3ab;
}

.btn-huge {
    padding: 25px;
    font-size: 26px;
}

.banner-social-buttons {
    margin-top: 0;
}

/* --- progress --- */
.progress {
  height: 40px;

}
.progress-bar {
  font-size: 14px;
  line-height: 40px;
}

/* Media queries */

@media(min-width:767px) {

    .navbar {
        padding: 20px 0;
        border-bottom: 0;
        letter-spacing: 1px;
        background: 0 0;
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
    }

    .top-nav-collapse {
        padding: 0;
        background-color: #000;
    }

    .navbar-custom.top-nav-collapse {
        border-bottom: 1px solid rgba(255,255,255,.3);
    }
	
    .intro {
        height: 100%;
        padding: 0;
    }

    .brand-heading {
        font-size: 100px;
    }
	

    .intro-text {
        font-size: 25px;
    }


}
@media (max-width:768px) {
	#navigation {
		padding: 20px 0;
	}
	.site-logo{
		margin: 0 0 0 30px;
		float:none;
	}
	.navbar-custom ul.nav li a {
		color: black;
	}
	.navbar-custom ul.nav ul.dropdown-menu li {
		border-bottom: 1px solid #aaa;

	}
	.navbar-header {
		margin-top:-40px;
		padding:0;
	}
	.navbar-header button {
		background: #111;
	}
	
	.navbar-header button.navbar-toggle {
		padding: 4px 15px;
		font-size: 14px;
		color: #fff;
		
	}
	
	.navbar-custom .nav {
		background: #444;
	}
	
	.service-box {
		margin-bottom: 50px;
	}
	
	.team-wrap {
		margin-bottom: 30px;
	}
	
	form#contact-form {
		margin-bottom: 50px;
	}
	
	.xs-marginbot-20 {
		margin-bottom: 20px;
	}

}

@media (max-width:480px) {
	.nav a{
		color: black;
	}

	.navbar-custom .nav.navbar-nav {
    background-color: rgba(255,255,255,.4);
	}
	
	.navbar.navbar-custom.navbar-fixed-top {
		margin-bottom: 30px;
	}
}

.navbar .navbar-custom {
	padding: 0;
}

/*  OTROS ESTILOS  */

/* Añadido por Checho parrado  */
* {
    -webkit-text-size-adjust: none;
    -webkit-box-sizing:border-box; box-sizing: border-box; 
}

a{
    text-decoration: none;
    color: inherit;
    outline: none;
    transition: 0.5s ease;
    -o-transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
}
.btn  {
    margin-top: 73px;
    color: #fff;
    display: inline-block;
    padding: 22px 62px 24px;
    background-color: #25952a /*#3da9b6*/;
    font: bold 30px/40px 'Dosis', sans-serif;
}

.btn:hover {
    background-color: #1d1d1d;
}

<!DOCTYPE html>
<html lang="es">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<link type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body>
  <body id="page-top" data-spy="scroll" data-target=".navbar-custom">
	<div class="loader">

	</div>
	<img src="http://i42.tinypic.com/212ct3s.jpg"
	 width="100%" height="650" frameborder="0" style="border:0" allowfullscreen>
	<div id="navigation">
		<nav class="navbar navbar-custom" role="navigation">
			<div class="container">
				<div class="row">
					<div class="col-md-2">
						<div class="site-logo">
							<img id="logo" src="../img/logo.png" alt="Imagen de agrochema" />
						</div>
					</div>
					<div class="col-md-10">
						<div class="navbar-header">
							<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
								<i class="fa fa-bars"></i>
							</button>
						</div>
						<div class="collapse navbar-collapse" id="menu">
							<ul class="nav navbar-nav navbar-right">
								<li class="active">
									<a href="../index.html">Casa</a>
								</li>
								<li>
									<a href="../galerias.html#about">Sobre mi</a>
								</li>
								<li>
									<a href="../galerias.html">Servicios</a>
								</li>
								<li>
									<a href="../galerias.html">Trabajos</a>
								</li>

								<li>
									<a href="#works">Contacto</a>
								</li>
								<!--buscador de google-->
								<li>
									<form class="pull-right" method=GET action="https://www.google.com/search">
										<a href="https://www.google.com/">
											<img src="https://www.google.com/logos/Logo_40wht.gif" border="0" alt="Google" align="absmiddle">
										</a>
										<input type=text name=q maxlength=255 placeholder="Busqueda Google">
										<input Type=hidden name=hl value="es">
										<input type=submit name=btnG VALUE="Buscar...">
									</form>
								</li>
						</ul>
						</div>
					</div>
				</div>
			</div>
		</nav>
	</div>
	<section id="about" class="home-section color-dark bg-white">
		<div class="container marginbot-50">
			<div class="row">
				<div class="col-lg-8 col-lg-offset-2">
					<div class="animatedParent">
						<div class="section-heading text-center animated bounceInDown">
							<h2 class="h-bold">Nuestros precios...</h2>
							<div class="divider-header"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="container">
			<div class="container_12">
				<div class="row">
					<div class="col-md-4 col-sm-12 col-xs-12">
						<p class="color1">Ponemos a su servicio nuestra larga experiencia y los materiales de primeras marcas. ...</p>
						<ul class="list2">
							<li>
								<div class="prod">
									<a>Mantenimiento mensual</a>
								</div>
								<div class="price">Desde 50€</div>
							</li>
							<li>
								<div class="prod">
									<a>Mantenimiento de comunidades</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Plantacion de cesped *</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Cuidado de rosales</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Plantas ornamentales </a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Diseño de jardines</a>
								</div>
								<div class="price">Variable...</div>
							</li>
							<li>
								<div class="prod">
									<a>(*)En la plantación de césped natural, le ofrecemos un mes de mantenimiento gratuito,.</a>
								</div>	
							</li>
						</ul>
					</div>
          </div>
          </div>
          </div>
          </div>
          </section>
          <footer>       
          <p>JAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
          </footer>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
  </html>

Post Views: 0