body {
	font-family: 'Seymour One', sans-serif;
	margin: 0;
	top: 0;
	left: 0;
	background-color: red;

	overflow: hidden;


	cursor: url('img/cursor-porrillo.png'), auto;
	cursor: -webkit-image-set(
 	url('img/cursor-porrillo.png') 1x,
  	url('img/cursor-porrillo@2x.png') 2x
	), auto;

}

.porrillos {
	height: 100vh;
	width: 100%;
	background-image: url('img/background.jpg');
	background-size: 250px;
	background-attachment: fixed;
}

.title {
	max-width: 1240px;
	position: absolute;
	margin: 0 40px;
	top: 50%;
	transform: translateY(-50%) skewY(-10deg);
	transition: 0.5s ease all;
}

.title:hover {
	transform: translateY(-50%) skewY(-15deg);
	cursor: pointer;
	cursor: url('img/cursor-porrillo.png'), auto;
	cursor: -webkit-image-set(
 	url('img/cursor-porrillo.png') 1x,
  	url('img/cursor-porrillo@2x.png') 2x
	), auto;
}

.jesus {
	position: absolute;
	top: -5%;
	left: 30%;
	z-index: 2;
}

.jesus img {
		width: 180px;
}

.jesus2 {
	position: absolute;
	right: 3%;
	bottom: 16%;
	z-index: 2;
}

.jesus2 img {
	width: 132px;
}

.campana {
	position: absolute;
	top: 2%;
	left: 9%;
	z-index: 2;
}

.tostadora1 {
	position: absolute;
	z-index: 2;
	left: 10%;
	bottom: 5%;
}

.tostadora2 {
	position: absolute;
	z-index: 2;
	right: 30%;
	top: 5%;
}

.tostadora2 img {
	width: 80px;
}

.tostadora3 {
	position: absolute;
	z-index: 2;
	left: 2%;
	top: 25%;
}

.tostadora1 img {
	width: 100px;
}

.boca1 {
	position: absolute;
	z-index: 2;
	right: 4%;
	top: 18%;
}

.boca1 img {
	width: 90px;
}

.tiago1 {
	position: absolute;
	z-index: 2;
	right: 24%;
	top: 70%;
}

.tiago1 img {
	width: 90px;
}

h1 {
	text-align: left;
	color: rgba(0,0,0,0);
	-webkit-text-stroke: 2px yellow;
	font-size: 100px;
	color: black;
	letter-spacing: -3px;
}

h1:hover {
	-webkit-text-stroke: 2px red;
	color: yellow;
	transition: 0.5s ease all;
}

@media (max-width: 1024px) {

	h1 {
		font-size: 72px;
	}

.porrillos {
	background-size: 180px;
	}

}

@media (max-width: 599px) {


h1 {
	font-size: 40px;
}

.title {
	margin: 0 16px;
	}

.porrillos {
	background-size: 124px;
	}

.title:hover {
	transform: translateY(-50%) skewY(-10deg);
}

.jesus {
	left: 25%;

}

.jesus img {
	width: 132px;
}

.tiago1 {
	right: 35%; 
}

.tiago1 img {
	width: 65px;
}

.jesus2 {
	bottom: -8%;
}

h1:hover {
	color: black;
	-webkit-text-stroke: 2px yellow;
}

}