:root {
	--colorFondoSistema: white;
}

html {
  overflow-y: scroll;
  overflow-x: hidden;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  font-family: "Arial";
}

body {
  position: relative;
  background: var(--colorFondoSistema);
  overflow-x: hidden;
  margin: 0px;
  min-height: 100%;                       /* Esta linea es para pegar el footer hasta abajo y que no se encime con el contenido*/
}

#menu
{
	position: fixed;
	text-align: center;
	font-size: 20px;
	padding-top: 10px;
	height: 40px;
	width: 100%;
	background-color: #0f85c8;
	color: white;
}

#menu a, #menu a:hover, #menu a:active, #menu a:visited
{
	color: white;
	text-decoration: none;
	margin-left: 5px;
	margin-right: 5px;
	line-height: 30px;
}

#home
{
	margin-top: 50px;
	background: url("../../images/Home.jpg?2.0") top center no-repeat;
	background-size: cover;
	background-position-x: center;
	width: 100%;
	padding-top: 77.29%; /*1920x1484 -> 1484/1920 = 0.7729*/
}

#primera
{
	background: url("../../images/1Husky.jpg") top center no-repeat;
	background-size: cover;
	background-position-x: center;
	width: 100%;
	padding-top: 81.25%; /*1920x1560 -> 1560/1920 = 0.8125*/
}

#segunda
{
	background: url("../../images/2Servovalvulas.jpg") top center no-repeat;
	background-size: cover;
	background-position-x: center;
	width: 100%;
	padding-top: 81.25%; /*1920x1560 -> 1560/1920 = 0.8125*/
}

#tercera
{
	background: url("../../images/3Bombas.jpg") top center no-repeat;
	background-size: cover;
	background-position-x: center;
	width: 100%;
	padding-top: 81.25%; /*1920x1560 -> 1560/1920 = 0.8125*/
}

#cuarta
{
	background: url("../../images/4Hidraulica.jpg") top center no-repeat;
	background-size: cover;
	background-position-x: center;
	width: 100%;
	padding-top: 81.25%; /*1920x1560 -> 1560/1920 = 0.8125*/
}

#quinta
{
	background: url("../../images/5Automatizacion.jpg") top center no-repeat;
	background-size: cover;
	background-position-x: center;
	width: 100%;
	padding-top: 81.25%; /*1920x1560 -> 1560/1920 = 0.8125*/
}

#sexta
{
	background: url("../../images/6Servomotores.jpg") top center no-repeat;
	background-size: cover;
	background-position-x: center;
	width: 100%;
	padding-top: 81.25%; /*1920x1560 -> 1560/1920 = 0.8125*/
}

#septima
{
	background: url("../../images/7Moldes.jpg") top center no-repeat;
	background-size: cover;
	background-position-x: center;
	width: 100%;
	padding-top: 60.17%; /*1366×822 -> 822/1366 = 0.6017*/
}

#octava
{
	background: url("../../images/8Filtros.jpg") top center no-repeat;
	background-size: cover;
	background-position-x: center;
	width: 100%;
	padding-top: 60.17%; /*1366×822 -> 822/1366 = 0.6017*/
}

#novena
{
	background: url("../../images/9Marina.jpg") top center no-repeat;
	background-size: cover;
	background-position-x: center;
	width: 100%;
	padding-top: 81.25%; /*1920x1560 -> 1560/1920 = 0.8125*/
}

@media only screen and (max-width : 1447px) /*Especial para el footer*/
{

#menu
{
	height: 70px;
}

#home
{
	margin-top: 90px;
}

}

@media only screen and (max-width : 752px) /*Especial para el footer*/
{

#menu
{
	height: 55px;
	font-size: 18px;
}

#menu a, #menu a:hover, #menu a:active, #menu a:visited
{
	line-height: 25px;
}

#home
{
	margin-top: 75px;
}

}

@media only screen and (max-width : 682px) /*Especial para el footer*/
{

#menu
{
	height: 55px;
	font-size: 16px;
}

#menu a, #menu a:hover, #menu a:active, #menu a:visited
{
	line-height: 25px;
}

#home
{
	margin-top: 75px;
}

}

@media only screen and (max-width : 610px) /*Especial para el footer*/
{

#menu
{
	height: 45px;
	font-size: 14px;
}

#menu a, #menu a:hover, #menu a:active, #menu a:visited
{
	line-height: 19px;
}

#home
{
	margin-top: 65px;
}

}

@media only screen and (max-width : 540px) /*Especial para el footer*/
{

#menu
{
	height: 40px;
	font-size: 12px;
}

#menu a, #menu a:hover, #menu a:active, #menu a:visited
{
	line-height: 17px;
}

#home
{
	margin-top: 60px;
}

}

@media only screen and (max-width : 470px) /*Especial para el footer*/
{

#menu
{
	height: 60px;
	font-size: 12px;
}

#menu a, #menu a:hover, #menu a:active, #menu a:visited
{
	line-height: 17px;
}

#home
{
	margin-top: 80px;
}

}

@media only screen and (max-width : 338px) /*Especial para el footer*/
{

#menu
{
	height: 73px;
	font-size: 12px;
}

#menu a, #menu a:hover, #menu a:active, #menu a:visited
{
	line-height: 17px;
}

#home
{
	margin-top: 93px;
}

}