/*FUENTES*/
	@font-face {
	   font-family: myriadCB;
	   font-style: normal;
	   font-weight: normal;
	   src: url(fonts/MyriadPro-BoldCond.otf);
	}

	@font-face {
	   font-family: myriadC;
	   font-style: normal;
	   font-weight: normal;
	   src: url(fonts/MyriadPro-Cond.otf);
	}


	@font-face {
	   font-family: myriad;
	   font-style: normal;
	   font-weight: normal;
	   src: url(fonts/MyriadPro-Semibold.otf);
	}

	@font-face {
	   font-family: myriadR;
	   font-style: normal;
	   font-weight: normal;
	   src: url(fonts/MyriadPro-Regular.otf);
	}

	@font-face {
	   font-family: myriadBO;
	   font-style: normal;
	   font-weight: normal;
	   src: url(fonts/MyriadPro-Bold.otf);
	}


	@font-face {
	   font-family: myriadSBO;
	   font-style: normal;
	   font-weight: normal;
	   src: url(fonts/MyriadPro-Semibold.otf);
	}

/*FIN FUENTES*/

*{
	margin:0;
	padding:0;
}

body{
	background: #0099cc;
	font-family: verdana;
}

	
	.contenedor{
		width:100%;
		margin: 0 auto;
		overflow:hidden;
	}

/*TITULO Y MENU*/	
		header{
			background-color: white;
			width:100%;
			height: auto;
			float:left;
		}
		
			#direc-tel{
				width: 60%;
				height: 40px;
				float: left;			
			}
					
		
			#logo-slogan{
				width: 30%;
				height: auto;
				float: left;
				padding-top:2%;
				padding-bottom:2%;
				padding-left:2%;
			}
			.logo{
				width: 100%;
				max-width:300px;
				max-height: auto;
				height: auto;
				float: left;
			}
			
			#frase {
				width: 40%;
				height: auto;
				float: right;
				padding-left:5%;
			}
			
					
				.frase-sol{
					font: 36px/38px myriadSBO;
					color: #cccccc;
					display: block;
					text-decoration: none;
					float:right;
					padding-right:5%;	
					line-height: 30px;
					padding-top: 8%;
				}
				
				.frase-chico{
					font: 24px/26px myriadSBO;
					color: #cccccc;
					display: block;
					text-decoration: none;
					float:right;
					padding-right:5%;	
					line-height: 20px;
				}
				
				.frase-ind{
					font: 36px/38px myriadSBO;
					color: #cccccc;
					display: block;
					text-decoration: none;
					float:right;
					padding-right:5%;	
					line-height: 30px;
				}
			
		
			
			
			#direc-tel nav{
				width:65%;
				z-index: 1000;
				float: left;
				padding-left:45%;
				display: inline-block;
				padding-top: 5%;
				
			}
			
				#direc-tel nav ul {
				list-style:none;
				float: center;
				text-align: center;
				}

					#direc-tel nav ul li {
						display:inline-block;
						position: relative;
						text-align: center;
					}
					
						#direc-tel nav ul li a{
							font: 18px/20px myriadSBO;
							color: black;
							display: block;
							text-decoration: none;
							padding: 5px;
							text-align: center;
						}
						
							#direc-tel nav ul li a:hover{
							text-decoration: underline;
							
							}
			
			#azul{
				width: 100%;
				height: 10px;
				float: left;
				background:black;			
			}
			
			.banner{
				width: 100%;
				height:auto;
				max-height: 200px;
			}
			
			header nav{
				display: none;
			}
		
	@media screen and (max-width: 800px) {


		#direc-tel nav{
					display: none;
					
				}
				
			header nav {
				width: 100%;
				height: auto;
				float:left;
				background: #333333;
				display: block;
				
			}
			
				header nav ul  {
					width: 100%;
				}

					header nav ul li {
						display: block;
						border-bottom:1px solid rgba(255,255,255,.5);
						width: 100%;
						text-align: center;
						float: left;
						color:black;
					}

						header nav ul li a{
							font: 22px/24px myriadC;
							color: black;
							display: block;
							text-decoration: none;
							padding: 10px;
							margin-top:1%;
						}
			
			
		
			
			#frase {
					width: 30%;
					height: auto;
					float: left;
					padding-left:5%;
					padding-bottom:2%;
				}
				
					.frase-sol{
						font: 36px/38px myriadSBO;
						color: #cccccc;
						display: block;
						text-decoration: none;
						float:right;
						padding-right:5%;	
						line-height: 30px;
						padding-top: 8%;
					}
					
					.frase-chico{
						font: 24px/26px myriadSBO;
						color: #cccccc;
						display: block;
						text-decoration: none;
						float:right;
						padding-right:5%;	
						line-height: 20px;
					}
					
					.frase-ind{
						font: 36px/38px myriadSBO;
						color: #cccccc;
						display: block;
						text-decoration: none;
						float:right;
						padding-right:5%;	
						line-height: 30px;
					}
	}

	
		
		#slider-imagenes{
			float:left;
			width: 100%;
			height:auto;

		}
		
			
		
		@media screen and (max-width: 768px) {
			#imagenes-div{
				float: left;
				width: 100%;
				height:100%;
			}
			
			.contenedor-imagenes{
				width: 100%;
				height:auto;
			}
			
			#slider img{
				width: 100%;
				height:auto;
			}
			
			#slider div{
				width: 100%;
				height:auto;
			}
			
			#slider {
				width: 100%;
				height:auto;
			}
					
		}

/*FIN DE TITULO Y MENU*/

/*TITULOS SECCIONES Y TEXTO*/

	.titulo-seccion{
		font: 28px/30px myriad;
		color: black;
		text-align: left;
		padding-top: 5;
		padding-bottom: 1%;
		
	}

	p{
		font-family: verdana;
		font-size: 16px;
		line-height: 32px;
	}

/*FIN DE TITULOS SECCIONES*/

/*EMPRESA*/
		
		.empresa{
			width: 100%;
			height: auto;
			background: white;
			float: left;
			box-sizing: border-box;
		}
		
		
			.empresa h2{
				color: black;
				width:100%;
				height: auto;
				background-color: white;
				padding-top: 20px;
				text-align: center;
				letter-spacing: 10px;
			}
			
			
			.parrafo-empresa{
				width: 100%;
				float:left;
				padding: 1% 5%;
				box-sizing: border-box;
				background: white;
			}
			
			.parrafo-empresa p {
				color: black;
				letter-spacing: 2px;
				text-align: center;
				
			}
		
/*FIN DE EMPRESA*/	

/*PRODUCTOS*/	
		.productos{
			width: 100%;
			height: auto;
			background: white;
			float: left;
			box-sizing: border-box;
			
		}
		
			.productos h2{
				color: black;
				width:100%;
				height: auto;
				background-color: white;
				padding-top: 20px;
				text-align: center;
				letter-spacing: 10px;			
				
			}
			
			.rojo{
				float:left;
				width:100%;
				height: 30%;
				max-height: 400px;
				padding:2% 2%;
				margin-bottom: 1%;
				display: inline-block;	
			
			}
			
			.verde{
				float:left;
				width:100%;
				height: 30%;
				max-height: 400px;
				padding:2% 2%;
				display: inline-block;		
			}
			
			.produc-repre{
				width: 100%;
				text-align: center;
				font: 20px/22px myriadBO;
				display: inline-block;
				letter-spacing: 2pt;
				text-shadow: 1px 1px 1px #333;
			}
			
			#Productos ul{
				width: 100%;
				height: auto;
				float:left;
				display: inline-block;
				
			}
			
					#Productos ul li {
						display: inline-block;
						width: 20%;
						text-align: center;
						float: left;
						color:white;
						padding:1% 2%;
						
					}

						#Productos ul li a{
							font: 22px/24px myriadC;
							color: white;
							text-decoration: none;
						}
						
			#img-maquinas2 img{
				width:100%;
				max-width:500px;
				min-width:50px;					
			}			
			
			.img-logo-repre{
				width:100%;
				max-width:250px;
				min-width:50px;
				
			}
			
			.img-maquinas{
				width:100%;
				max-width:220px;
				min-width:50px;					
			}
			
			
			
			@media screen and (max-width: 1000px) {
				.produc-repre{
				width: 100%;
				text-align: center;
				font: 20px/22px myriadBO;
				display: inline-block;
				letter-spacing: 1pt;
			}
			
			#Productos ul{
				width: 100%;
				height: auto;
				float:left;
				display: inline-block;
				
			}
			
					#Productos ul li {
						display: inline-block;
						width: 20%;
						text-align: center;
						float: left;
						color:white;
						padding:1% 2%;
						
					}

						#Productos ul li a{
							font: 22px/24px myriadC;
							color: white;
							text-decoration: none;
						}
						
			#img-maquinas2 img{
				width:100%;
				max-width:500px;
				min-width:50px;					
			}			
			
			.img-logo-repre{
				width:100%;
				max-width:250px;
				min-width:50px;
				
			}
			
			.img-maquinas{
				width:100%;
				max-width:180px;
				min-width:50px;					
			}
			
			}
			
			@media screen and (max-width: 850px) {
				.produc-repre{
				width: 100%;
				text-align: center;
				font: 18px/20px myriadBO;
				display: inline-block;
				letter-spacing: 1pt;
				text-shadow: 1px 1px 1px #333;
			}
			
			#Productos ul{
				width: 100%;
				height: auto;
				float:left;
				display: inline-block;
				
			}
			
					#Productos ul li {
						display: inline-block;
						width: 20%;
						text-align: center;
						float: left;
						color:white;
						padding:1% 2%;
						
					}

						#Productos ul li a{
							font: 22px/24px myriadC;
							color: white;
							text-decoration: none;
						}
						
			#img-maquinas2 img{
				width:100%;
				max-width:500px;
				min-width:50px;					
			}			
			
			.img-logo-repre{
				width:100%;
				max-width:250px;
				min-width:50px;
				
			}
			
			.img-maquinas{
				width:100%;
				max-width:180px;
				min-width:50px;					
			}
			
			}
			
			@media screen and (max-width: 700px) {
				.produc-repre{
				width: 100%;
				text-align: center;
				font: 14px/16px myriadBO;
				display: inline-block;

			}
			
			#Productos ul{
				width: 100%;
				height: auto;
				float:left;
				display: inline-block;
				
			}
			
					#Productos ul li {
						display: inline-block;
						width: 20%;
						text-align: center;
						float: left;
						color:white;
						padding:1% 2%;
						
					}

						#Productos ul li a{
							font: 22px/24px myriadC;
							color: white;
							text-decoration: none;
						}
						
			#img-maquinas2 img{
				width:100%;
				max-width:500px;
				min-width:50px;					
			}			
			
			.img-logo-repre{
				width:100%;
				max-width:250px;
				min-width:50px;
				
			}
			
			.img-maquinas{
				width:100%;
				max-width:180px;
				min-width:50px;					
			}
			
			}
			
			@media screen and (max-width: 500px) {
				
				.rojo{
				float:left;
				width:100%;
				height: 100%;
				max-height: 1000px;
				padding:1% 1%;
				margin-bottom: 1%;
				display: inline-block;	
				background: #5b5b5b; /* Old browsers */
				background: -moz-linear-gradient(top, #5b5b5b 0%, #ffffff 10%, #ffffff 90%, #5b5b5b 100%); /* FF3.6-15 */
				background: -webkit-linear-gradient(top, #5b5b5b 0%,#ffffff 10%,#ffffff 90%,#5b5b5b 100%); /* Chrome10-25,Safari5.1-6 */
				background: linear-gradient(to bottom, #5b5b5b 0%,#ffffff 10%,#ffffff 90%,#5b5b5b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5b5b5b', endColorstr='#5b5b5b',GradientType=0 ); /* IE6-9 */				
			}
				
				#Productos ul{
				width: 100%;
				height: auto;
				float:left;
				display: inline-block;
				
			}
			
			
			#logo ul li {
						display: inline-block;
						width: 100%;
						text-align: center;
						float: left;
						color:white;
						padding:0% 0%;
						
					}
					
			#Productos ul li {
						display: inline-block;
						width: 100%;
						text-align: center;
						float: left;
						color:white;
						padding:0% 0%;
						
					}	
					
			.img-logo-repre{
				width:100%;
				max-width:250px;
				min-width:50px;
				margin-top: -10%;
				margin-bottom: -5%;
			}
			
			.img-maquinas{
				width:100%;
				max-width:180px;
				min-width:50px;					
			}
			
			.produc-repre{
				width: 80%;
				text-align: center;
				font: 14px/16px myriadBO;
				display: inline-block;
				margin-bottom: 20%;
				margin-left:10%;
				margin-right:10%;
			}
			
			}
			
		
/*FIN DE PRODUCTOS*/

/*SERVICIOS*/
		
		.servicios{
			width: 100%;
			height: auto;
			background: white;
			float: left;
			box-sizing: border-box;
		}
		
			.servicios img{
				width: 100%;
				height: auto;
			}
			
			.servicios p{
				width: 90%;
				margin-left: 5%;
			}
			
			.servicios h2{
				color: black;
				width:100%;
				height: auto;
				background-color: white;
				padding-top: 20px;
				text-align: center;
				letter-spacing: 10px;	
			}
			
			.lista-servicios{
				width:100%;
				height: auto;
				padding-top:3%;
				padding-bottom:3%;
				padding-left:5%;
				padding-right:5%;
				list-style-image: url("../img/cuadrado-azul.png"); 
			}
			
			
				.lista-servicios li{
					width:90%;
					height: auto;
					padding-top:1%;
					font: 20px/24px myriad;
					color: black;
				}
		

/*FIN DE SERVICIOS*/


/*NOVEDADES*/
		
		.novedades{
			width: 100%;
			background: #333333;
			float: left;
			box-sizing: border-box;
		}
		
			.lista-novedades{
				width:90%;
				z-index: 1000;
				float: left;
				padding: 20px;
				margin-left:5%;
				margin-top:3%;
				margin-bottom:3%;			
				list-style:none;
				background-color: #444444;	
				box-sizing: border-box;
				border-radius: 5px;
			}
			

				.lista-novedades ul li {
					display:block;
					position: relative;
				}
				
					.lista-novedades ul li a{
						font: 20px/22px myriadC;
						color: #333333;
						display: block;
						text-decoration: none;
						padding: 10px;
					}
			
			.img-novedades{
				padding-left:3%;
				padding-top:1%;
			}
			
			.novedades h2{
				color: #0099cc;
				width:100%;
				height: auto;
				background-color: black;
				padding: 10px;
				
			}
			
			.novedades h3{
				color: white;
				margin-left: 3%;
				margin-top: 2%;
				font: 20px/22px myriad;
			}
			
			.novedades p{
				color: white;
				width: 100%;
				margin-left: 3%;
				font: 22px/24px myriadR;
			}
			
			.novedades  a{
				color: #0099cc;
				width: 100%;
				font: 18px/20px myriadR;
				text-decoration:none;
			}
			
			.link-novedad{
				padding-top:2%;
			}

/*FIN DE NOVEDADES*/

/*CONTACTO*/
		
		.contacto{
			width: 100%;
			background: #0099cc;
			float: left;
			box-sizing: border-box;
		}
		
			.contacto h2{
				color: black;
				width:100%;
				height: auto;
				background-color: white;
				padding-top: 20px;
				text-align: center;
				letter-spacing: 10px;	
				
			}
			
			.h3-contacto{
				font: 24px/26px myriad;
				color:white;
				text-align:center;
			}
			
			.otros-contactos{
				width:30%;
				height:auto;
				padding-left:2%;
				list-style:none;
				padding-top:3%;
				float:left;
			}
			
				.otros-contactos li{
					width:100%;
					height:auto;
					padding-top:2%;
					text-align:center;
					font: 18px/20px myriadR;
					color:white;
				}
			
					.otros-contactos li p{
						width:100%;
						height:auto;
						padding-top:2%;
						text-align:center;
					}
					
					.otros-contactos li a{
						width:100%;
						height:auto;
						padding-top:2%;
						text-align:center;
						text-decoration:none;
						font: 18px/20px myriadR;
						color:white;
					}
			
			.contacto img{
				width:100%;
				height:auto;
				max-width:100px;
			}

			
			.ubicacion{
				float: left;
				width: 100%;
				margin-top:3%;
			}
			
				.ubicacion p{
					margin-top:3%;
					
				}
			
			
			
			.mapa{
				float: left;
				width: 96%;
				height:auto;
				max-height:400px;
				margin-left:2%;
				margin-right:2%;
				margin-top:3%;
				margin-bottom:2%;
			}
			
			label {
				display:block;
				margin-top:20px;
				letter-spacing:1px;
				color: #333333;
				}
				
				.formulario {
				margin:0 auto;
				float: left;
				margin-left:5%;
				margin-right:5%;
				margin-bottom:2%;
				margin-top:1%;
				width: 100%;
				color: #666666;
				font: 14px/16px myriad;
				}
				
					form {
					margin:0 auto;
					width:100%;
					}
					
					#nombre-email{
						width:20%;
						height:auto;
						float:left;
					}
					
					#nombre{
						width:100%;
						float:left;
						
						
					}
					
					#email{
						width:100%;
						margin-top:10%;
						
						
					}
					
					#mensaje-contacto{
						width:60%;
						height:auto;
						float:left;
						margin-left:5%;
					}
					
					#mensaje{
						width:100%;
						float:left;
						height:100%;
						min-height:150px;
						max-height:200px;
						
					}

					input, textarea {
					width:100%;
					height:5%;
					background:white;
					padding:10px;
					margin-top:5px;
					font: 14px/16px myriad;
					color:#333333;
					border-radius: 5px;
					}

					textarea {
					height:15%;
					}

					#submit {
					width:85px;
					height:35px;
					border:none;
					margin-top:20px;
					cursor:pointer;
					color:#0099cc;
					}
					
					#submit:hover {
					
					background-color:#333333;
					color:#0099cc;
					}

/*FIN DE CONTACTO*/

/*FOOTER*/
		
		footer{
			clear:both;
			float: left;
			box-sizing: border-box;
			width: 100%;
			background: black;
			padding: 20px;
			color: white;
		}
		
			footer img{
				width: 50%;
				height: auto;
			}
			
			footer nav{
				width:100%;
				z-index: 1000;
				
			}
			
			footer nav ul {
			list-style:none;
			width:100%;
			position:relative;
			text-align:center;
			}

				footer nav ul li {
					display:inline-block;
					position: relative;
				}
				
					footer nav ul li a{
						font: 20px/22px myriadC;
						color: #333333;
						display: block;
						text-decoration: none;
						padding: 10px;
					}
		
/*FIN DE FOOTER*/

/*VOLVER AL TOP*/

	.cd-container {
	  width: 90%;
	  max-width: 768px;
	  margin: 2em auto;
	}
	.cd-container::after {
	  /* clearfix */
	  content: '';
	  display: table;
	  clear: both;
	}


	.cd-top {
	  display: inline-block;
	  height: 40px;
	  width: 40px;
	  position: fixed;
	  bottom: 40px;
	  right: 10px;
	  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
	  /* image replacement properties */
	  overflow: hidden;
	  text-indent: 100%;
	  white-space: nowrap;
	  background: rgba(204, 255, 255, 0.8) url(../img/flecha.png) no-repeat center 50%;
	  visibility: hidden;
	  border-radius: 10px;
	  opacity: 0;
	  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
	  -moz-transition: opacity .3s 0s, visibility 0s .3s;
	  transition: opacity .3s 0s, visibility 0s .3s;
	}
	.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
	  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
	  -moz-transition: opacity .3s 0s, visibility 0s 0s;
	  transition: opacity .3s 0s, visibility 0s 0s;
	}
	.cd-top.cd-is-visible {
	  /* the button becomes visible */
	  visibility: visible;
	  opacity: 1;
	}
	.cd-top.cd-fade-out {
	  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
	  opacity: .5;
	}
	.no-touch .cd-top:hover {
	  background-color: #666666;
	  opacity: 1;
	}
	@media only screen and (min-width: 768px) {
	  .cd-top {
		right: 20px;
		bottom: 20px;
	  }
	}
	@media only screen and (min-width: 1024px) {
	  .cd-top {
		height: 60px;
		width: 60px;
		right: 30px;
		bottom: 30px;
	  }
	}
	
/*FIN VOLVER AL TOP*/	


/*RESPONSIVE*/	

@media only screen and (min-width: 1856px) {
  
  
		
			#frase {
			width: 40%;
			height: auto;
			float: right;
			padding-left:5%;
		}
		
			.frase-sol{
				font: 44px/46px myriadSBO;
				color: #cccccc;
				display: block;
				text-decoration: none;
				float:right;
				padding-right:5%;	
				line-height: 40px;
				padding-top: 8%;
			}
			
			.frase-chico{
				font: 30px/32px myriadSBO;
				color: #cccccc;
				display: block;
				text-decoration: none;
				float:right;
				padding-right:5%;	
				line-height: 30px;
			}
			
			.frase-ind{
				font: 44px/46px myriadSBO;
				color: #cccccc;
				display: block;
				text-decoration: none;
				float:right;
				padding-right:5%;	
				line-height: 40px;
			}
		

		
		#direc-tel nav ul li a{
			font: 26px/28px myriadSBO;
			color: black;
			display: block;
			text-decoration: none;
			padding: 10px
		}
		
		
  
}

@media only screen and (min-width: 1500px) {

		#frase {
		width: 25%;
		height: auto;
		float: right;
		padding-left:5%;
	}
	
		.frase-sol{
			font: 42px/44px myriadSBO;
			color: #cccccc;
			display: block;
			text-decoration: none;
			float:right;
			padding-right:5%;	
			line-height: 38px;
			padding-top: 10%;
		}
		
		.frase-chico{
			font: 30px/32px myriadSBO;
			color: #cccccc;
			display: block;
			text-decoration: none;
			float:right;
			padding-right:5%;	
			line-height: 28px;
		}
		
		.frase-ind{
			font: 42px/44px myriadSBO;
			color: #cccccc;
			display: block;
			text-decoration: none;
			float:right;
			padding-right:5%;	
			line-height: 38px;
		}
		

		
  
}

@media only screen and (min-width: 1190px) {
  
  
		
			#frase {
			width: 30%;
			height: auto;
			float: right;
			padding-left:5%;
		}
		
			.frase-sol{
				font: 38px/40px myriadSBO;
				color: #cccccc;
				display: block;
				text-decoration: none;
				float:right;
				padding-right:5%;	
				line-height: 34px;
				padding-top: 8%;
			}
			
			.frase-chico{
				font: 26px/28px myriadSBO;
				color: #cccccc;
				display: block;
				text-decoration: none;
				float:right;
				padding-right:5%;	
				line-height: 24px;
			}
			
			.frase-ind{
				font: 38px/40px myriadSBO;
				color: #cccccc;
				display: block;
				text-decoration: none;
				float:right;
				padding-right:5%;	
				line-height: 34px;
			}
		

		
		#direc-tel nav ul li a{
			font: 22px/24px myriadSBO;
			color: black;
			display: block;
			text-decoration: none;
			padding: 10px
		}
  
}

@media only screen and (min-width: 1024px) {

	main p {
	  font-size: 16px;
	  font-size: 1rem;
	  line-height: 1.6;
	  margin: 2em 0;
	}

	  main p {
		font-size: 20px;
		font-size: 1.25rem;
	  }
	  
	  
  
}


@media screen and (max-width: 900px){
		#frase {
		width: 40%;
		height: auto;
		float: right;
		padding-left:5%;
	}
	
		.frase-sol{
			font: 30px/32px myriadSBO;
			color: #cccccc;
			display: block;
			text-decoration: none;
			float:right;
			padding-right:5%;	
			line-height: 30px;
			padding-top: 5%;
		}
		
		.frase-chico{
			font: 18px/20px myriadSBO;
			color: #cccccc;
			display: block;
			text-decoration: none;
			float:right;
			padding-right:5%;	
			line-height: 20px;
		}
		
		.frase-ind{
			font: 30px/32px myriadSBO;
			color: #cccccc;
			display: block;
			text-decoration: none;
			float:right;
			padding-right:5%;	
			line-height: 30px;
		}
}
		
@media screen and (max-width: 800px){
	header { 
		width:100%;
		}
			
		#direc-tel{
			width: 100%;
			height: auto;
			float: left;
			background:#0099cc;			
		}
		
		#direc-tel p{
			font: 12px/14px myriadSBO;
			color: black;
			display: block;
			text-decoration: none;
			float:right;
			padding-right:2%;
			padding-bottom:4px;
			padding-top:8px;
		}
		
		#logo-slogan{
			width: 50%;
			height: auto;
			float: left;
			padding-top:1%;
			padding-bottom:2%;
		}
		
			#frase {
			width: 40%;
			height: auto;
			float: left;
			text-align:center;
			
		}
		
			.frase-sol{
				font: 32px/34px myriadSBO;
				color: #cccccc;
				display: block;
				text-decoration: none;
				float:right;
				padding-right:1%;	
				line-height: 30px;
				padding-top: 7%;
			}
			
			.frase-chico{
				font: 20px/22px myriadSBO;
				color: #cccccc;
				display: block;
				text-decoration: none;
				float:right;
				padding-right:1%;	
				line-height: 20px;
			}
			
			.frase-ind{
				font: 32px/34px myriadSBO;
				color: #cccccc;
				display: block;
				text-decoration: none;
				float:right;
				padding-right:1%;	
				line-height: 30px;
			}
		
		.logo{
			width: 100%;
			max-width:451px;
			max-height: 215px;
			height: auto;
			float: left;
		}
		
		.empresa { 
			width:100%;
			}
			
			.parrafo-empresa{ 
				width:100%;
				}	
				
		
		
	.servicios {
		width:100%;
	}
	.novedades {
		width:100%;
	}
		
		#novedades-imagen{
		display:inline-block;
		float:left;
		background:white;
		padding: 20px;
		border-radius: 5px;
		width:20%;
		max-width:124px;
		}
	
		#novedades-texto{
			display:inline-block;
			float:left;
			padding: 20px;
			width:60%;
			height:auto;
		}
		
	.contacto {
		width:100%;
	}
		
		.mapa{
			float: left;
			width: 96%;
			height:auto;
			max-height:400px;
			margin-left:2%;
			margin-right:2%;
			margin-top:3%;
			margin-bottom:2%;
		}
		
		.ubicacion {
			width:100%;
			margin:0 auto;
			margin-left:3%;
		}
		
		.formulario {
			width:100%;
			margin:0 auto;
			margin-left:3%;
			padding-bottom:5%;
		}
		
}
		
	
			
@media screen and (max-width: 650px) {
			
	#logo-slogan{
		width: 50%;
		height: auto;
		float: left;
		padding-top:1%;
		padding-bottom:2%;
	}
	
		#frase {
			width: 45%;
			height: auto;
			float: left;
			text-align:center;	
		}
	
		.frase-sol{
			font: 28px/30px myriadSBO;
			color: #cccccc;
			display: block;
			text-decoration: none;
			float:right;
			padding-right:1%;	
			line-height: 30px;
			padding-top: 7%;
		}
		
		.frase-chico{
			font: 18px/20px myriadSBO;
			color: #cccccc;
			display: block;
			text-decoration: none;
			float:right;
			padding-right:1%;	
			line-height: 20px;
		}
		
		.frase-ind{
			font: 28px/30px myriadSBO;
			color: #cccccc;
			display: block;
			text-decoration: none;
			float:right;
			padding-right:1%;	
			line-height: 30px;
		}
	
	.lista-novedades{
		width:95%;
		z-index: 1000;
		float: left;
		padding: 20px;
		margin-left:2%;
		margin-right:2%;
		margin-top:3%;
		margin-bottom:3%;			
		list-style:none;
		background-color: #444444;	
		box-sizing: border-box;
		border-radius: 5px;
	}
	

		.lista-novedades ul li {
			display:block;
			position: relative;
		}
		
		.lista-novedades ul li a{
			font: 16px/18px myriadC;
			color: #333333;
			display: block;
			text-decoration: none;
			padding: 5px;
		}
	
	.img-novedades{
		padding-left:3%;
		padding-top:1%;
	}
	
		
	#novedades-imagen{
		display:block;
		float:left;
		background:white;
		padding: 20px;
		margin-left:20%;
		border-radius: 5px;
		width:80%;
		max-width:124px;
		text-align:center;
	}
		
		
	
	#novedades-texto{
		display:block;
		float:left;
		padding-right:2%;
		width:90%;
		height:auto;
		text-align:left;
	}
	
	#nombre-email{
			width:100%;
			height:auto;
			float:left;
		}
		
		#nombre{
			width:30%;
			float:left;
			
			
		}
		
		#email{
			width:30%;
			float:left;
			margin-top:1%;
			margin-left:2%;
			
			
		}
		
		#submit {
		width:30%;
		max-width:85px;
		height:35px;
		border:none;
		margin-top:2%;
		cursor:pointer;
		color:#0099cc;
		float:left;
		margin-left:2%;
		}
		
		#mensaje-contacto{
			width:90%;
			height:auto;
			float:left;
			margin-left:0%;
		}
		
		#mensaje{
			width:100%;
			float:left;
			height:100%;
			min-height:150px;
			max-height:200px;
			
		}
		
	.h3-contacto{
		font: 20px/22px myriad;
		color:white;
		text-align:center;
	}
		
	.otros-contactos{
		width:90%;
		height:auto;
		padding-left:2%;
		list-style:none;
		padding-top:5%;
		float:left;
	}
	
		.otros-contactos li{
			width:100%;
			height:auto;
			padding-top:2%;
			text-align:center;
			font: 14px/16px myriadR;
			color:white;
		}
		
		.otros-contactos li p{
			width:100%;
			height:auto;
			padding-top:2%;
			text-align:center;
		}
		
		.otros-contactos li a{
			width:100%;
			height:auto;
			padding-top:2%;
			text-align:center;
			text-decoration:none;
			font: 14px/16px myriadR;
			color:white;
		}
}
			
@media screen and (max-width: 510px) {
				
	#logo-slogan{
		width: 45%;
		height: auto;
		float: left;
		padding-top:1%;
		padding-bottom:2%;
	}
		
	#frase {
		width: 45%;
		height: auto;
		float: left;
		text-align:center;
			
	}
		
		.frase-sol{
			font: 22px/24px myriadSBO;
			color: #cccccc;
			display: block;
			text-decoration: none;
			float:right;
			padding-right:1%;	
			line-height: 20px;
			padding-top: 10%;
		}
		
		.frase-chico{
			font: 12px/14px myriadSBO;
			color: #cccccc;
			display: block;
			text-decoration: none;
			float:right;
			padding-right:1%;	
			line-height: 10px;
		}
		
		.frase-ind{
			font: 22px/24px myriadSBO;
			color: #cccccc;
			display: block;
			text-decoration: none;
			float:right;
			padding-right:1%;	
			line-height: 20px;
		}
			
				
				
	.lista-novedades{
		width:95%;
		z-index: 1000;
		float: left;
		padding: 20px;
		margin-left:2%;
		margin-right:2%;
		margin-top:3%;
		margin-bottom:3%;			
		list-style:none;
		background-color: #444444;	
		box-sizing: border-box;
		border-radius: 5px;
	}
		

		.lista-novedades ul li {
			display:block;
			position: relative;
		}
		
			.lista-novedades ul li a{
				font: 16px/18px myriadC;
				color: #333333;
				display: block;
				text-decoration: none;
				padding: 5px;
			}
			
		.img-novedades{
			padding-left:3%;
			padding-top:1%;
		}
		
		#Novedades img{
			width:90%;
			padding-right:5%;
			max-width: 300px;
		}
		
			
			#novedades-imagen{
			display:block;
			float:left;
			background:white;
			padding: 20px;
			margin-left:20%;
			border-radius: 5px;
			width:80%;
			max-width:124px;
			text-align:center;
			}
			
			
		
		#novedades-texto{
			display:block;
			float:left;
			padding-right:2%;
			width:90%;
			height:auto;
			text-align:left;
		}
		
		
}
			
@media screen and (max-width: 450px){
			
	#logo-slogan{
		width: 50%;
		height: auto;
		float: left;
		padding-top:1%;
		padding-bottom:2%;
		margin-right:2%;
	}
			
			#frase {
			width: 40%;
			height: auto;
			float: left;
			text-align:center;
			
		}
			
			.frase-sol{
				font: 18px/20px myriadSBO;
				color: #cccccc;
				display: block;
				text-decoration: none;
				float:right;	
				line-height: 20px;
				padding-top: 10%;
			}
			
			.frase-chico{
				font: 10px/12px myriadSBO;
				color: #cccccc;
				display: block;
				text-decoration: none;
				float:right;	
				line-height: 10px;
			}
			
			.frase-ind{
				font: 18px/20px myriadSBO;
				color: #cccccc;
				display: block;
				text-decoration: none;
				float:right;
				line-height: 20px;
			}
			
			#nombre-email{
				width:100%;
				height:auto;
				float:left;
			}
			
			#nombre{
				width:20%;
				float:left;
				
				
			}
			
			#email{
				width:20%;
				float:left;
				margin-top:5px;
				margin-left:2%;
				
				
			}
			
			#submit {
			width:20%;
			max-width:85px;
			height:35px;
			border:none;
			margin-top:7px;
			cursor:pointer;
			color:#0099cc;
			float:left;
			margin-left:2%;
			}
			
			#mensaje-contacto{
				width:90%;
				height:auto;
				float:left;
				margin-left:0%;
			}
			
			#mensaje{
				width:100%;
				float:left;
				height:100%;
				min-height:150px;
				max-height:200px;
				
			}
}
			
@media screen and (max-width: 400px){
	.contenedor { 
		width:100%;
	}
			
		#direc-tel{
			width: 100%;
			height: auto;
			float: left;
			background:black;			
		}
		
			#direc-tel p{
				font: 10px/12px myriadSBO;
				color: black;
				display: block;
				text-decoration: none;
				float:right;
				padding-right:2%;
				padding-bottom:4px;
				padding-top:8px;
			}
		
			header nav ul li a{
			font: 18px/20px myriadC;
			color: white;
			display: block;
			text-decoration: none;
			padding: 10px;
		}
		
		.parrafo-empresa{
			width: 100%;
			float:left;
			padding-left:2%;
			padding-right:2%;
			box-sizing: border-box;
			background: #333333;
		}
		
			.parrafo-empresa p {
				color: white;
				letter-spacing: 0px;
				
		}
		
		
			
		.lista-servicios{
			width:100%;
			height: auto;
			padding-top:3%;
			padding-bottom:3%;
			padding-left:8%;
			padding-right:8%;
			list-style-image: url("../img/cuadrado-azul.png"); 
		}
		
			.lista-servicios li{
				width:90%;
				height: auto;
				padding-top:1%;
				font: 16px/18px myriad;
				color: black;
			}
		
}
@media screen and (max-width: 375px){
			
	#logo-slogan{
		width: 50%;
		height: auto;
		float: left;
		padding-top:1%;
		padding-bottom:2%;
		margin-right:2%;
	}
			
			#frase {
			width: 35%;
			height: auto;
			float: left;
			text-align:center;
			
		}
			
			.frase-sol{
				font: 14px/16px myriadSBO;
				color: #cccccc;
				display: block;
				text-decoration: none;
				float:right;	
				line-height: 16px;
				padding-top: 10%;
			}
			
			.frase-chico{
				font: 8px/10px myriadSBO;
				color: #cccccc;
				display: block;
				text-decoration: none;
				float:right;	
				line-height: 8px;
			}
			
			.frase-ind{
				font: 14px/16px myriadSBO;
				color: #cccccc;
				display: block;
				text-decoration: none;
				float:right;
				line-height: 16px;
			}
}
		

		
@media screen and (max-width: 330px){
		
	#frase {
		width: 100%;
		height: auto;
		float: left;
		text-align:center;
	}
			
		.frase-sol{
			font: 36px/38px myriadSBO;
			color: #cccccc;
			display: block;
			text-decoration: none;
			float:right;
			padding-right:5%;	
			line-height: 30px;
			padding-top: 8%;
		}
		
		.frase-chico{
			font: 24px/26px myriadSBO;
			color: #cccccc;
			display: block;
			text-decoration: none;
			float:right;
			padding-right:5%;	
			line-height: 20px;
		}
		
		.frase-ind{
			font: 36px/38px myriadSBO;
			color: #cccccc;
			display: block;
			text-decoration: none;
			float:right;
			padding-right:5%;	
			line-height: 30px;
		}
		
}
			
/*FIN RESPONSIVE*/
			
/*SCROLL*/


::-webkit-scrollbar {
	width: 12px;
}
 

::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 

}
 

::-webkit-scrollbar-thumb {

	background: rgba(255,255,255,0.8); 
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(102,102,204,0.4); 
}

/*FIN SCROLL*/

/*FIN DEL FIN DE TODO*/