*{ margin: 0; padding: 0}

body{
	background: url(../img/fondo1.jpg);
}

/*  DIV para espaciar diferentes secciones  */
.espaciador{
	height:100px;
}


/*CONTENEDOR EXTERIOR*/
#contenedor{

	margin-right: 20%;
	margin-left: 20%;
	border-style: outset;
	border-color: white;
	border-width: thick;
	border-top: none;
	padding: 2%;
	min-height: 1000px;

	margin-top: 100px;

	background: linear-gradient(to bottom, rgba(233,233,233,1) 0%,rgba(233,233,233,1) 62%,rgba(233,233,233,0.7) 68%,rgba(233,233,233,0) 100%);
	/*background-color: #E9E9E9;*/

}

/* CABECERA: INCLUYE LA CABECERA Y EL MENU HORIZONTAL*/
.header-content{
	position: fixed;
	width: 100%;
	top: 0px;
	clear: both;
}

header{
	font-family: 'Nothing You Could Do', cursive;
	text-align: center;
	color: #E9E9E9;
	font-weight: 700;

	height: 100px;
	margin: 0px auto;
	padding-top: 2%;
	background: linear-gradient(135deg, rgba(36,35,45,0) 0%,rgba(36,35,45,0.8) 15%,rgba(36,35,45,1) 19%,rgba(36,35,45,1) 20%,rgba(49,49,65,1) 50%,rgba(36,35,45,1) 80%,rgba(36,35,45,1) 81%,rgba(36,35,45,0.8) 85%,rgba(36,35,45,0) 100%);
}

h1{
	font-weight: 900;
	font-size: 3em;
}

nav{
	height: auto; /*Junto a overflow: hidden; aplicará a nuestro elemento nav el mismo alto que el más alto de sus elementos hijos */ 
            margin: 0 auto; /* Centro el contenedor */
            overflow: hidden;
            text-align: left;
            width: 100%;
}

#menu {
	list-style-type: none;
	margin: 0px;
	padding: 0px;

	float: left;
	position: relative; 
    left: 50%;
}

.elemento {
	display: inline;

	float: left;
    position: relative; 
    right: 50%;
}

a {
	
	color: white;
	text-decoration: none;
	font-size: 1em;
	display: block;
	padding: 6px;
	float: left;

	text-align: center;
	padding-right: 20px;
	padding-left: 20px;
}


a:hover {	/* Cuando el raton esta sobre el elemento */

	text-decoration: underline;
	text-transform: uppercase;
}

/*  CONTENEDOR INTERIOR  */
.contenedor2{
	border-style: inset;
	border-color: black;
	border-width: medium;
	margin: 2%;
	padding: 2%;

	background-color: #F3F3F3;
}

#foto{
	max-width: 200px;
	max-height: 380px;
	margin-right: 10px;
	float: left;
}

article{
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
}

span{
	font-weight: 700;
}

.cabecera2{
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	font-size: 1.5em;
	font-style: italic;
	text-decoration: underline;
}

#trabajos{
	list-style-type: square;
	padding: 3%;
}

.grid{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;  
	  
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	justify-content: center;
	align-content: stretch;
}

.vertical{
	margin-top: 5px;
	margin-bottom: 5px;
	width: 350px;
	height: 450px;
	align-self: auto;
}

.horizontal{
	width: 600px;
	height: 315px;
	flex: 1 100%;
	margin-top: 5px;
	margin-bottom: 5px;
	border: 1px solid;
	border-color: black;
	text-align: center;
}

footer{
	font-family: 'Roboto', sans-serif;
	width:100%;
	font-size: small;
	background: #333333;
	color: white;
	text-align: center;
}

.clear{
	clear: both;
}