@charset "utf-8";

@font-face{
	font-family:titulo;
	src:url(../fonts/righteous-regular.ttf);
}

@font-face{
	font-family:apartados;
	src:url(../fonts/lobster-regular.ttf);
}

@font-face{
	font-family:sub;
	src:url(../fonts/opensans-condbold.ttf);
}


@font-face{
	font-family:parrafo;
	src:url(../fonts/opensans-condlight.ttf);
}

#main{
	display:flex;
	display: -webkit-flex;
}

body{
	 background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%,800, from(#cde6f9), to(#6191bf));
}

h1{ 
	font-family:titulo;
	text-align:center;
	letter-spacing:2px;
	padding-bottom:3%;
	
}


h2{
	font-family:titulo;
	margin-top:20px;
	margin-left:40%;
}

p{
	font-family:parrafo;
	text-align:justify;
	margin-left:40%;
	margin-right:10%;
}


ul{
	
        list-style:none;
}		

ul li{
	clear:both;
	border:2px lightblue solid;
	box-shadow:4px 4px grey;
	-webkit-border-radius: 25% 25%;	
	margin-bottom:3%;
	margin-left:2%;
	margin-right:3%;		
}


img{
	float:left;
	width: 200px;
	height:200px;
	margin-top:2%;
	margin-left:10%;	
	border:2px lightblue solid;
	box-shadow:4px 4px grey;
	-webkit-border-radius: 25% 25%;

}

a{
	font-family:sub;
	color:grey;
	padding:2px;
	background-color:white;
	border:2px lightblue solid;
	box-shadow:2px 2px grey;
	-webkit-border-radius: 25% 25%;
	text-decoration:none;
}

.box{
	margin-left:48%;
	padding:5px;
	transition-property:all;
	transition-duration:2s;
	transition-timing-function:linear;
}

.box:hover{
	transition-property:all;
	transition-duration:2s;
	transition-timing-function:linear;
	transform:skew(-40deg);
}

input[type="submit"]{
	clear:both;
	margin-left:40%;
	margin-bottom:5%;
	font-family:sub;
	color:grey;
	padding:4px;
	background-color:white;
	border:2px lightblue solid;
	box-shadow:2px 2px grey;
	-webkit-border-radius: 25% 25%;
	text-decoration:none;
	
}




@media all and (max-width: 860px){
	p{	
		margin-left:15%;
	}
	img{	
		clear:both;
		margin-left:35%;
		margin-top:5%;
		margin-bottom:2%;	
	}
	h2{
		clear:both;
		margin-left:15%;
		margin-bottom:2%;
		font-size:150%;
	}
	input[type="submit"]{
		clear:both;
		margin-left:15%;
}

@media all and (max-width: 640px){
	p{
		display:none;
		height:0px;
		width:0px;
	}
	img{	
		clear:both;
		margin-left:20%;
		margin-top:5%;
		margin-bottom:2%;	
	}
	h2{
		clear:both;
		margin-left:20%;
		margin-bottom:2%;
		font-size:150%;
	}
	input[type="submit"]{
		clear:both;
		margin-left:20%;
	}
}

@media all and (max-width: 450px){
	p{
		display:none;
		height:0px;
		width:0px;
	}
	img{	
		clear:both;
		margin-left:15%;
		margin-right:30%;
		margin-top:5%;
		margin-bottom:2%;	
	}
	h2{
		clear:both;
		margin-left:15%;
		margin-bottom:2%;
		font-size:150%;
	}
	input[type="submit"]{
		clear:both;
		margin-left:15%;
}
}