*{margin: 0 auto; padding: 0; border:none;}
/* CSS Document */
*{margin: 0 auto; padding: 0; border:none;}
body{
  width: 100%;
  height: 100%;min-height:100%;
  margin: 0 auto;
  padding: 0;
  background:white;
  font-family: Tahoma, Arial, sans-serif;
  font-size: 10px;

}
html{
    min-height:100%;height:100%;
}
 #content2{
   position:relative;
   width: 950px;padding-left:5px;padding-right:5px;
   height:auto;
   text-align: justify;
   font-size:12px;
   margin-bottom: 10px;
   padding-bottom: 5px;
   color:black;
 }
 #content2 h1{
     color: grey;
 }

 .sep{
   padding:0; margin:0 auto;
   float:left;
   width: 980px;
   height:1px;
   background: black;
 }


.coin-slider {
    padding:0;
    overflow:hidden;
    zoom:1;
    float:   left;
}

.coin-slider a {
	text-decoration:none;
	outline:none;
	border:none;
}
/* buttons for switching */
.cs-buttons {
	margin:12px 0 0;
	padding:0;
	font-size:0;
	float:left;
}
.cs-buttons a {
	margin:0 2px;
	width:20px;
	height:20px;
	float:left;
	color:#fff;
	text-indent:-10000px;
	background:url(../images/slide_a.png) no-repeat center center;

}
.cs-buttons a.cs-active {
	color:#fff;
	background-image:url(../images/slide_p.png);
}
/* text in slider */
.cs-title {
	padding:16px 60px 16px 24px;
	width:876px;
	color:white;
	font-size:12px;
	line-height:1.5em;text-shadow: #486cd8 1px 1px 1px;
	background:url(../images/overlay.png) repeat left top;
}
.cs-title big {
	display:block;
	font-size:20px;
	padding-bottom:0;
}
/* buttons Next and Prew */
.cs-prev, .cs-next {
	background:url(../images/boton.jpg) repeat left top;
	color:#fff;
	padding:0 10px;
}
.slider {

    float: left;
  padding: 0;
  margin:0 auto;
  margin-top:5px;
}

#global2{
  float: left;
  width: 980px;
  height: auto;
  padding: 0;
  margin:0 auto;
  margin-top:50px;
}
.clr {
	clear:both;
	padding:0;
	margin:0;
	width:100%;
	font-size:0;
	line-height:0;
}

#contiene{
  position:relative;
  width: 980px;
  height: 400px;
  z-index:1;
  margin-top: 50px;
}
#fabricantes p{
   font-size:12px;
   padding:10px;
   padding-left: 30px;
   color:grey;
   font-weight: bold;
}
#clientes p{
   font-size:12px;
   padding:10px;
   padding-left: 30px;
   padding-top:50px;
   padding-bottom:30px;
   color:#00384A;
   font-weight: bold;
}
#contacto p{
   font-size:12px;
   padding:10px;
   padding-left: 100px;
   color:#00384A;
   font-weight: bold;
   padding-top:70px;
}
#contacto{
    position:relative;
  padding-top: 20px;
  margin-top: 50px;
  width:980px;
  height: 450px;
  background:white;
}

#contacto ul{
  list-style: none;
  float:left;
  margin-left: 50px;
}
#contacto li{
  float:none;
  margin:10px;
  margin-left:0;
  margin-top:30px;
  font-size: 13px;
  padding-left: 12px;
}
#contacto h1{
     color:grey;
     padding:0;margin:0 auto;
    margin-left:20px;
     margin-top:40px;
}
#contacto p{
     color:#ff7f00;
     padding:0;margin:0 auto;
     float:left;
}

#contacto img{
    float:left;
  box-shadow: black 3px 3px 2px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=135, Strength=8);
  width: 32px;
  height:32px;
}
#revestimientos{
    position:relative;
  padding-top: 0px;
 margin-top: 50px;
  width:980px;
  height: 550px;
 background:white;
}
#revestimientos h3{
     color:grey;
   font-weight: bold;
     padding:0;margin:0 auto;
     padding:10px;
     padding-left:20px;
     padding-top:50px;
}
#revestimientos p{
   font-size:15px;
   padding:10px;
   color:black;
   padding-left:20px;
}
#pavimentos{
    position:relative;
 padding-top: 30px;
 margin-top: 50px;
  width:980px;
  height: 500px;
 background:white;
}
#pavimentos h3{
     color:grey;
   font-weight: bold;
     padding:0;margin:0 auto;
     padding:10px;
     padding-left:20px;
}
#pavimentos p{
   font-size:15px;
   padding:10px;
   color:black;
   padding-left:20px;
   padding-bottom:0;
}
#fabricantes{
    position:relative;
  padding-top: 100px;
  margin-top:50px;
  width:980px;
  height: 450px;
  background:white;
  color:black;
}
#galeria{
    position:relative;
 padding-top: 50px;
 margin-top: 50px;
  width:980px;
  height:550px;
  background:white;
  margin-bottom: 50px;
}
div.galimg, div.imgprin, .galimg a, .galimg img, .galimg ul, .galimg li {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
    color:white;
}

/* fin del reset */
.galimg {
    width: 980px;
    height: 480px;
	float: left;
    background: white no-repeat 50% 50%;
}

.imgprin {
	/* es necesario para evitar un parpadero al quitar la imagen */
	width: 980px;
	height: 385px;
}

.imgprin img {
    margin-left: 300px;
	background-color: white;
    box-shadow: black 3px 3px 2px;
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=135, Strength=8);
	padding: 5px;
}

.galimg ul {
    float: left;
	width: 980px;
	list-style: none;
	text-align: center;
}

.galimg ul li {
	display: inline;
	padding-left: 3px;
}

.galimg ul li a img {
  box-shadow: black 3px 3px 2px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=135, Strength=8);
	padding: 3px;
}

.jsgalpre {
    float: left;
	background:#F7F7F7;
	color: #fff;
	padding: 3px;
}
#clientes{
    position:relative;
  padding-top: 30px;
  margin-top: 50px;
  width:980px;
  height: auto;
  background:white;
  padding-top: 100px;

}

#fabricantes ul{
  list-style: none;
   margin-top:50px;
}
#fabricantes li{
  float:left;
  margin:15px;
  margin-left:30px;

}
#fabricantes img{
  box-shadow: black 3px 3px 2px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=135, Strength=8);
  width: 110px;
  height:110px;
}

.grupo {
  float:left;
  margin-left: 40px;
  width: 200px;
  height:200px;
  margin-bottom: 120px;
  margin-top: -70px;
}
.grupo  li{
  width: 150px;
  float:none;
  list-style: none;
  border: 1px solid black;
  padding:5px;
  background: #D7D7FF;
  font-size: 12px;
  text-align:center;
  padding-left:5px;
}
#clientes  ul{
  list-style: none;
  margin-top:50px;
}
#clientes  li{
  float:left;
  margin:5px;

}
#clientes  img{
  box-shadow: black 1px 1px 1px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=135, Strength=8);
  width: 110px;
  height:110px;
}


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

/****************************************************************************/
#menu{
  position:relative;
  width: 980px;
  height: auto;
  z-index:2;
}


#menu1{
  float:left;
  width: 300px;
  height:30px;
  margin-left: 3%;
  margin-top: 20px;margin-bottom:20px;
}
#menu2{
  width: 300px;
  height:30px;
  margin-top: -10px;
  float:left;
  margin-bottom:20px;
}

#separator{
  width:255px;
  height:30px;
   margin-top: 5px;
  float:left;
}


#menudrop1, #menudrop1 ul, #menudrop1 ul li,
#menudrop1 ul li ul, #menudrop1 ul li ul li {
margin:0;
padding:0;
}
#menudrop1{

list-style:none;
font-weight:bold;
width:400px;
float: left;

/* Forzar superposición del menú
position:relative;
z-index:5;
Quitar el comentario si se necesita
*/
}
#menudrop1 li{
float:left;
width:150px;
margin-right:50px;
position:relative;

background:url(../images/boton.jpg) repeat left top;
}
#menudrop1 a{
display:block;
padding:5px;
color:white;
font-size:12px;
text-decoration:none;
text-align: center;
}
#menudrop1 a:hover{
background:url(../images/desactivado.jpg) repeat left top;
text-decoration:none;
}
#menudrop1 ul{
/* Color de fondo de la web -para IE- */
background:white;
/* Idem transparente para navegadores que lo soporten */
list-style:none;
position:absolute;
left:-9999px; /* Escondemos inicialmente los submenús */
text-decoration:none;
text-shadow: white 0.1em 0.1em 0.2em;
}
#menudrop1 ul li{
padding-top:1px; /* Separación vertical entre elementos */
float:none;
text-decoration:none;
}
#menudrop1 ul a{
white-space:nowrap; /* Separa los elementos en diferentes líneas */
text-decoration:none;
}
#menudrop1 li:hover ul{
left:0; /* Submenús visibles */
text-decoration:none;
}
/* Para que cuando se mueva el cursor por los elementos del submenú los elementos permanecen visibles */
#menudrop1 li:hover a{
border-left: 3px solid orange;
background:url(../images/boton.jpg) repeat left top; /* Aprovechamos para cambiar de color los señalados */
text-decoration:none;
color:white;
text-shadow: black 1px 2px 1px;
}
#menudrop1 li:hover ul a{
text-decoration:none;
}
#menudrop1 li:hover ul li a:hover{
background:url(../images/fondo3.jpg) repeat left top;
text-decoration:none;
}
#menudrop1 ul{
/* Color de fondo de la web -para IE- */
background:white;
/* Idem transparente para navegadores que lo soporten */
list-style:none;
position:absolute;
left:0; /* NO Escondemos inicialmente los submenús */
opacity:0; /* Lo hacemos con opacity */
}
#menudrop1 li:hover ul{
left:0; /* Submenús visibles */
opacity:1;
-webkit-transition:all .6s ease;
-o-transition:all .6s ease;
-moz-transition:all .6s ease;
-ms-transition:all .6s ease;
transition:all .6s ease;
text-decoration:none;
}

#menudrop2, #menudrop2 ul, #menudrop2 ul li,
#menudrop2 ul li ul, #menudrop2 ul li ul li {
margin:0;
padding:0;
}
#menudrop2{

list-style:none;
font-weight:bold;
width:400px;
float: left;

/* Forzar superposición del menú
position:relative;
z-index:5;
Quitar el comentario si se necesita
*/
}
#menudrop2 li{
float:left;
width:150px;
margin-right:50px;
position:relative;

background:url(../images/boton.jpg) repeat left top;
}
#menudrop2 a{
display:block;
padding:5px;
color:white;
font-size:12px;
text-decoration:none;
text-align: center;
}
#menudrop2 a:hover{
background:url(../images/desactivado.jpg) repeat left top;
text-decoration:none;
}
#menudrop2 ul{
/* Color de fondo de la web -para IE- */
background:white;
/* Idem transparente para navegadores que lo soporten */
list-style:none;
position:absolute;
left:-9999px; /* Escondemos inicialmente los submenús */
text-decoration:none;
text-shadow: white 0.1em 0.1em 0.2em;
}
#menudrop2 ul li{
padding-top:1px; /* Separación vertical entre elementos */
float:none;
text-decoration:none;
}
#menudrop2 ul a{
white-space:nowrap; /* Separa los elementos en diferentes líneas */
text-decoration:none;
}
#menudrop2 li:hover ul{
left:0; /* Submenús visibles */
text-decoration:none;
}
/* Para que cuando se mueva el cursor por los elementos del submenú los elementos permanecen visibles */
#menudrop2 li:hover a{
border-left: 3px solid orange;
background:url(../images/boton.jpg) repeat left top; /* Aprovechamos para cambiar de color los señalados */
text-decoration:none;
color:white;
text-shadow: black 1px 2px 1px;
}
#menudrop2 li:hover ul a{
text-decoration:none;
}
#menudrop2 li:hover ul li a:hover{
background:url(../images/fondo3.jpg) repeat left top;
text-decoration:none;
}
#menudrop2 ul{
/* Color de fondo de la web -para IE- */
background:white;
/* Idem transparente para navegadores que lo soporten */
list-style:none;
position:absolute;
left:0; /* NO Escondemos inicialmente los submenús */
opacity:0; /* Lo hacemos con opacity */
}
#menudrop2 li:hover ul{
left:0; /* Submenús visibles */
opacity:1;
-webkit-transition:all .6s ease;
-o-transition:all .6s ease;
-moz-transition:all .6s ease;
-ms-transition:all .6s ease;
transition:all .6s ease;
text-decoration:none;
}

#footer img{
  width:150px; height: 150px;
  margin-left:100px;float:left;
  padding-right:150px;
}
#footer1 h3{
  padding-left: 0px;text-shadow: black 1px 1px 1px;
}

#footer a{
  padding-top:15px;
  color:white;
  text-align: justify;
  text-shadow: none;
  font-size:11px;
  font-weight: normal;text-shadow: black 1px 1px 1px;
}


#footer1{
  float:right;
  width: 320px;
  height: auto;
  margin-top: 50px;
}


#footer ul{
  list-style: square;
  padding-left: 130px;
  padding-top:10px;
}


#footer li{
  color:white;
  font-size:11px;
  text-decoration: none;
}


#footer p {
  padding-top:5px;
  color:white;
  text-align: justify;
  text-shadow: none;
  font-size:11px;text-shadow: black 1px 1px 1px;
}
#footer h3{
  color:white;
  text-align: justify;
  text-shadow: black 1px 1px 1px;
  padding-top:10px;
}
#footer > div {
  position:relative;
  width: 980px;
  height: auto;
  z-index:2;
}

.lineas{
  background: white;
  width: 100%;
  height: 20px;
}



#sitemap a{
  color:#00384A;
  text-shadow: none;
  font-size:12px;
  font-weight: bold;
  margin-left: 50px;
}
#sitemap li{
  color:black;
  font-size:15px;
  font-weight: bold;
  margin-left: 150px;
}
#sitemap ul{
  margin-left: 50px;
  list-style: none;
}
#sitemap{
  position: relative;
  margin-top: 100px;
  width:980px;
  height: auto;
  background:white;
  margin-bottom:50px;
}
#redes{
  margin:0 auto;
  padding:0;
  width:250px;
  height:50px;
  float:left; margin-top:10px;
}
#redes > img{
  margin:0 auto;
  padding:0;
  float:left;
  margin-left:0px;
  margin-top:10px;
  box-shadow: black 3px 3px 2px;
  filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=135, Strength=8);
}
#cabcontact1{
  width:200px;
  height:80px;
  float:right;
  margin-top:-50px;
}
#cabcontact1 p{
  color: #b1b1b1;
  text-align: left;
  font-weight: bold;
  }

#cabcontact{
  width:300px;
  height:90px;
  float:left;
  margin-top:-90px;
}
#cabcontact p,a{
  color: grey;
  text-align: left;
  font-weight: bold;
  }
  
#cabcontact  h1{
  float:none;
  color: #b1b1b1;

  font-size: 15px;
}
#cabcontact  h3{
  float:none;
  color: #b1b1b1;
  font-size: 13px;
  padding-bottom: 10px;

}
#cabcontact1  h3{
  float:none;
  color: #b1b1b1;
  font-size: 13px;
  text-shadow: black 1px 2px 1px;
  padding-bottom: 10px;

}
#cabecera a{
    text-decoration: none;
}
#cabecera img{
  width:313px; height: 108px;
  margin-left:300px;
  float:none;
}
#cabecera > div{
  width: 980px;
  height: 150px;
  position:relative;
  z-index: 4;
}

#footer{
  width: auto;
  height: 150px;
  background:url(../images/fondo5.jpg) repeat left top;
  position:relative;
  margin-top:100px;
}
.fb-like{
    margin-top:20px;
    float:left;margin-left:20px;
}
.twitter-follow-button{
    margin-top:20px;
    float:left;
    margin-left: 30px;
}
#botong{
    margin-top:20px;
    float:left;
    margin-left: 30px;
}
#cabecera{

 
  filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=135, Strength=8);
  width: auto;
  height: 250px;
  background:url(../images/fondo5.jpg) repeat left top;
}

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



@media only screen and (max-width : 800px) {
   
   
    .cs-title {
	padding:16px 60px 16px 24px;
	width:575px;
	color:#fff;
	font-size:12px;
	line-height:1.5em;
	background:url(../images/overlay.png) repeat left top;
}

     .slider {
        width:575px;
        float: left;
        padding: 0;
        margin:0 auto;
        margin-top:5px;
        margin-bottom:15px;
    }
    #separator{
        display:none;
    }
    #menudrop2 li{
        margin-left:50px;
    }
    #menudrop1 li{
        margin-left:50px;
        margin-right:-20px;
    }
    #cabcontact1{
        display:none;
    }
    #cabecera img{
        margin-left:22%;
    }
    #cabcontact{
        display: none;
    }
    #footer2 ,#footer3{
        display:none;
    }
    #footer1{
        margin-left: 100px;
    }
    #revestimientos,#pavimentos,#clientes,#galeria,#fabricantes{
        width:575px;height:950px;margin-left:10px;
    }
    #contiene{
        width:600px;
        height:900px;
        margin-top: 20px;
        margin-left:0px;
    }
    #clientes{
        width:500px;border-bottom:none;height:1000px;
    }
.galimg {
    width: 600px;
    height: 500px;
}

.imgprin {
	/* es necesario para evitar un parpadero al quitar la imagen */
	width: 600px;
	height: 385px;
}

.imgprin img {
    margin-left:50px;
}

.galimg ul {
    float: left;
    width: 600px;
}
#content2{
   width: 575px;height: 600px;
 }
 #clientes  img{
  display:none;
}
.grupo ul{
   margin-bottom: 100px; 
}
}