body {
	margin: 0;
	padding: 0;
	font-family: avenir next;
	font-size: larger;
	color: white;
	background: rgba(35, 35, 35, 1);
	overflow: hidden;
	overflow-x: hidden;
}

/* Menú */

.menu {
	top: 0;
	padding: 0;
}

.div{
	background-color: #ffffff;
	height: 2px;
	width: 100%;
	margin-top: -1%;
}

a {
	text-decoration: none;
	color: #ffffff;
}

a:hover {
	cursor: pointer;
	color: grey;
	}

.menu ul {
	top: 0;
	list-style: none;
	width: 90%;
	display: flex;
	overflow: hidden;
}

.menu li {
	width: 10%;
	margin-top: 3%;
	margin-bottom: -3%;
	padding: 2%;
	text-align: center;
}

.logo {
	width: 60%;
	margin-top: -17%;
}

.mobile {
	right: -200px;
	top: 0;
	margin: 0;
}
	
.active {
	right: 0;
}

/*Descripción*/

.descripcion {
	width: 100%;
}

h3 {
	text-align: center;
	padding: 0;
	margin: 0;
	font-size: medium;
	font-variant: small-caps;
	font-weight: normal;
}

.titulo, .escrito {
	border: solid #ffffff 2px;
	
}

/*Contacto*/

.contacto ul {
	list-style: none;
}



@media screen and (min-width: 950px) {
	
	/*Menú*/
	
	.menu{
		width: 85%;
		height: 16%;
		position: relative;
		margin: auto;
		margin-top: -3%;
		margin-left: 7%;
		margin-bottom: 3%;
	}
	
	.menu ul {
		margin-left: 15%;
	}

	
	.burger {
		display: none;
	}
	
	.mobile li {
		display: none;
	} 
	
	/*Descripción*/
	
	.img.principal {
		width: 25%;
		float: left;
		margin-left: 18%;
	}
	
	.descripcion {
		height: 70%;
		margin-top: -1%;
	}
	
	.titulo{	
		float: left;
		margin-top: 1%;
		padding-bottom: 27%;
		padding-right: 2%;
		width: 30%;
		height: 90%;
		text-align: right;
		border-left: none;
	}
	
	.escrito {
		background: rgba(35, 35, 35, 1);
		z-index: 1;
		float: left;
		width: 30%;
		height: 27%;
		margin-left: -25%;
		margin-top: 8.5%;	
		padding: 1%;
		font-size: 80%;
	}
	
	
	/*Contacto*/
	
	.contacto {
		float: left;
		width: 100%;
		margin-top: 1%;
		margin-left: 14%;
	}
	
	.contacto li {
		float:left;
	}
	
	.link {
		font-size: small;
		width: 20%;
		margin-top: .7%;
		padding-right: 2%;
	}
	
	.iconomail, .iconoig, .iconofb {
		width: 4%;
	}
	
	.icono {
		width: 60%;
	}
}

@media screen and (min-width: 300px) and (max-width:949px){
	body {
		overflow: auto;
	}
	/*Menú*/
	
	.menu {
		margin-bottom: 5%;
		
	}
	
	.desktop li{
		display: flex;
		visibility: hidden;
		padding: 0;
		margin: 0;
		margin-top: 1%;
	}
	
	.logo{
		margin-left: 260%;
		float: left;
		display: flex;
		visibility: visible;
		width: 100%;
	}
	
	.burger {
		position: absolute;
		top: 3vh;
		left: -60px;
		width: 50px;
		height: 50px;
		box-sizing: border-box;
		cursor: pointer;
		background: rgba(35, 35, 35, 1);
		border: none;
		outline: none;
	}
	
	.burger span {
		display: block;
		width: 35px;
		height: 3px;
		background: #ffffff;
		position: absolute;
		top: 24px;
		transition: .3s;
	}
	
	.burger span:before {
		content: '';
		position: absolute;
		top: -10px;
		right: 0;
		width: 100%;
		height: 3px;
		background: #ffffff;
		transition: .3s;
	}
	
	.burger span:after {
		content: '';
		position: absolute;
		top: 10px;
		right: 0;
		width: 100%;
		height: 3px;
		background: #ffffff;
		transition: .3s;
	}
	
	.burger.toggle span {
		background: transparent;
	}
	
	.burger.toggle span:before {
		top: 0;
		transform: rotate(45deg);
	}
	
	.burger.toggle span:after {
		top: 0;
		transform: rotate(-45deg);
	}
	
	.mobile {
		position: fixed;
		width: 200px;
		height: 100%;
		background: rgba(35, 35, 35, 1);
		transition: .3s;
	}
	
	.mobile ul {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 0;
		padding: 50% 0;
	}
	
	.mobile li {
		width: 30%;
		margin-bottom: 10%;
	}
	
	,mobile a {
		padding: 10px 20px;
		display: block;
	}
	
	.div{
		width: 80%;
		margin-left: 10%;
	} 
	
	/*Descripción*/
	
	.img.principal {
		width: 50%;
		margin-left: 25%;
		float: none;
	}
	
	.titulo {
		border: none;
		text-align: center;
	}
	
	.escrito {
		float: left;
		font-size: small;
		width: 50%;
		border: none;
		margin-left: 25%;	
	}
	
	/*Contacto*/
	
	.contacto {
		float: left;
		left: 0;
		width: 100%;
		font-size: small;
		text-align: left;
	}
	
	.contacto li{
		margin-bottom: 4%;
	}
	
	.icono {
		width: 6%;
		padding-right: 1%;
		float: left;
	}
	
}