#page-container{
	width: 39%;
	margin: auto;
}

html, body{
	margin: 0;padding: 0;
}

#main-nav{
	height: 4em;
	padding-left: 0.99em;
}

#main-nav dl{
	margin: 0;
	padding: 0;
}

#main-nav dt{
	float: left;
}

#main-nav dt a{
	display: block;
	height: 0;
	padding-top: 4em;
	overflow: hidden;
	background-repeat: no-repeat;
}

#main-nav dt a:hover{
	background-position: 0 -50px;
	/*Hay veces que no funcuona y hay que añadirlo*/
}

#main-nav dt#about, #main-nav dt#about a{
	width: 5.9em;
	background-image: url('./../images/nav/about.gif');
}

#main-nav dt#services, #main-nav dt#services a{
	width: 7em;
	background-image: url('./../images/nav/services.gif');
}

#main-nav dt#portfolio, #main-nav dt#portfolio a{
	width: 7.9em;
	background-image: url('./../images/nav/portfolio.gif');
}

#main-nav dt#contact, #main-nav dt#contact a{
	width: 8.8em;
	background-image: url('./../images/nav/	contact2.gif');
}

#header{
	height: 150px;
	margin: 0;
	padding: 0;
	background: #db6d16 url('./../images/headers/about.jpg');
}

#footer{
	height: 66px;
	clear: both;
	font-family: Tahoma, Arial, Helvetica, Sans-serif;
	font-size: 0.8em;
	color: #c9c9c9;
	border-top: 1px solid #efefef;
	padding: 1em 2em;
	line-height: 1.5em;
}

#footer a{
	color: #c9c9c9;
	text-decoration: none;
}

#footer a:hover{
	color: #db6d16;
}

#footer #altnav{
	width: 37Em;
	float: right;
	text-align: right;
}

#sidebar-a{
	float: right;
	width: 23em;
	line-height: 1.5em;
}

#saidbar-a .padding{
	padding: 250px;
}

#content{
	margin-right: 23.5em;
	line-height: 18px;
}

#content .padding{
	padding: 2em;
}

.hidden{
	display: none;
}

h1{
	margin: 0;
	padding: 0;
	float: right;
	margin-top: 2.38em;
	padding-right: 1.4em;
}

#content h2{
	margin: 0;
	padding: 0;
	padding-bottom: 1em;
}

#content p{
	margin: 0;
	padding: 0;
	padding-bottom: 1em;
}

body {
	font-family: Arial, Helvetica, Verdana, Sans-serif;
	font-size: 0.75em;
	color: #666666;
	background-color: #ffffff;	
}

body.index dt#index,
body.index dt#index a,
body.about dt#about,
body.about dt#about a, /*Se añaden estas filas para que funcione en todos los navegadores*/
body.services dt#services,
body.services dt#servces a,
body.portfolio dt#portfolio,
body.portfolio dt#portfolio a,
body.contact dt#contact,
body.contact dt#contact a{
	background-position: 0 -100px;
}

body.index #header{
	height: 12em;
	background: #db6d16 url('../images/headers/about2.jpg')
}

body.about #header{
	height: 12em;
	background: #db6d16 url('../images/headers/about.jpg')
}

body.services #header{
	height: 12em;
	background: #db6d16 url('../images/headers/hservices.jpg')
}

body.portfolio #header{
	height: 12em;
	background: #db6d16 url('../images/headers/hportfolio.jpg')
}

body.contact #header{
	height: 12em;
	background: #db6d16 url('../images/headers/hcontact.jpg')
}



#hamburgesa{
	float: right;
	padding-left: 80%;
}
.ham {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 400ms;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.hamRotate.active {
	 transform: rotate(45deg);
}
.hamRotate180.active {
  transform: rotate(180deg);
}
.line {
  fill:none;
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
  stroke:#000;
  stroke-width:5.5;
  stroke-linecap:round;
}

.ham4 .top {
  stroke-dasharray: 40 121;
}
.ham4 .bottom {
  stroke-dasharray: 40 121;
}
.ham4.active .top {
  stroke-dashoffset: -68px;
}
.ham4.active .bottom {
  stroke-dashoffset: -68px;
}



#menu{
	display: none;
	float: right;
}

#menu ul{
	float: left;
	position: absolute;
	width: 10%;
	padding: 0;
	margin: 0;
	list-style: none;
	margin-top: 2%;
}
#menu a{
	float: left;
	margin-left: 180%;
	position: relative;
	width: 6em;
	text-decoration: none;
	color: white;
	background-color: grey;
	padding: 0.2em 0.6em;
	border-right: 1px solid white;
	text-align: center;
}

@media (min-width: 800px){
	.ham{
		display: none;
	}
}

@media (max-width: 800px){
	#sidebar-a{
		display: none;
	}
	#main-nav{
		display: none;
	}
	#content{
		width: 100%;
	}
	#hamburgesa{
		display: block;
	}
	#menu{
		document.getElementById('menu').style.display!="none";
	}
}