.j-color, .col-1 {
	color: #cc0033;
}
.s-color, .col-2 {
	color: #ffcc00;
}
.p-color, .col-3 {
	color: #0099ff;
}

.bg-1 {
	background-color: #cc0033;
}
.bg-2 {
	background-color: #ffcc00;
}
.bg-3 {
	background-color: #0099ff;
}
.bg-black, .bg-4 {
	background-color: #000;
}

.jsp-zone {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
    -webkit-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    transition: all 1.5s ease;
}

.jsp-zone.up {
	-ms-transform: scale(3, 3); /* IE 9 */
    -webkit-transform: scale(3, 3); /* Safari */
    transform: scale(3, 3);
	-webkit-filter: grayscale(1);
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	opacity: 0.18;
}

.jsp-zone.grey {
	-webkit-filter: grayscale(1);
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	opacity: 0.18;
}

.jsp-j {
	top: 0;
	left: 0;
	opacity: 0.8;
	height: 100%;
	width: 40%;
	overflow: hidden;
}
.jsp-s {
	top: 0;
	left: 30%;
	opacity: 0.8;
	height: 100%;
	width: 40%;
	overflow: hidden;
}
.jsp-p {
	top: 0;
	left: 60%;
	opacity: 0.8;
	height: 100%;
	width: 40%;
	overflow: hidden;
}

.j, .s, .p {
	position: relative;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.j {
	background-color: #cc0033;
}

.s {
	background-color: #ffcc00;
}

.p {
	background-color: #0099ff;
}

.j-text, .s-text, .p-text {
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

@media only screen and (max-width: 133vh) {
  /* Horizontal JSP */
	.jsp-j {
		top: 0;
		left: 0;
		width: 50%;
		height: 90%;
	}
	.jsp-s {
		top: 5%;
		left: 25%;
		width: 50%;
		height: 90%;
	}
	.jsp-p {
		top: 10%;
		left: 50%;
		width: 50%;
		height: 90%;
	}

}

@media only screen and (max-width: 120vh) {
  /* Horizontal JSP */
	.jsp-j {
		top: 0;
		left: 0;
		width: 50%;
		height: 80%;
	}
	.jsp-s {
		top: 10%;
		left: 25%;
		width: 50%;
		height: 80%;
	}
	.jsp-p {
		top: 20%;
		left: 50%;
		width: 50%;
		height: 80%;
	}

}

@media only screen and (max-width: 110vh) {
  /* Horizonal JSP */
	.jsp-j {
		top: 0;
		left: 0;
		width: 50%;
		height: 60%;
	}
	.jsp-s {
		top: 20%;
		left: 25%;
		width: 50%;
		height: 60%;
	}
	.jsp-p {
		top: 40%;
		left: 50%;
		width: 50%;
		height: 60%;
	}

}

@media only screen and (max-width: 90vh) {
  /* Vertical JSP */
	.jsp-j {
		top: 0;
		left: 0;
		width: 80%;
		height: 40%;
	}
	.jsp-s {
		top: 30%;
		left: 10%;
		width: 80%;
		height: 40%;
	}
	.jsp-p {
		top: 60%;
		left: 20%;
		width: 80%;
		height: 40%;
	}

}

@media only screen and (max-width: 75vh) {
  /* Vertical JSP */
	.jsp-j {
		top: 0;
		left: 0;
		width: 90%;
		height: 38%;
	}
	.jsp-s {
		top: 31%;
		left: 5%;
		width: 90%;
		height: 38%;
	}
	.jsp-p {
		top: 62%;
		left: 10%;
		width: 90%;
		height: 38%;
	}

}

@media only screen and (max-width: 60vh) {
  /* Vertical JSP */
	.jsp-j {
		top: 0;
		left: 0;
		width: 100%;
		height: 36%;
	}
	.jsp-s {
		top: 32%;
		left: 0;
		width: 100%;
		height: 36%;
	}
	.jsp-p {
		top: 64%;
		left: 0;
		width: 100%;
		height: 36%;
	}

}