body {
	margin: 0;
	padding: 0;
	color: white;
	font-family: 'roboto', sans-serif;
}

a {
	color: white;
}

/* Smartphone */
@media screen and (orientation: portrait) {
  #left-side,	#right-side {
		width: 100%;
		height: calc(50% - 2px);
	}
	#left-side {
		border-bottom: 2px solid white;
	}
	#right-side {
		border-top: 2px solid white;
	}
}

/* Desktop */
@media screen and (orientation: landscape) {
  #left-side,	#right-side {
		width: calc(50% - 2px);
		height: 100%;
	}
	#left-side {
		border-right: 2px solid white;
	}
	#right-side {
		border-left: 2px solid white;
	}
}

#left-side, #right-side {
	float: left;
	position: relative;
	overflow: hidden;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: 0.35s;
    -moz-transition: 0.35s;
    -o-transition: 0.35s;
    -ms-transition: 0.35s;
    transition: 0.35s;
}

#left-side:hover, #right-side:hover {
	-webkit-filter: grayscale(0%);
	filter: grayscale(0%);
}

#left-side p, #right-side p {
	height: 50%;
	width: 100%;
	font-size: 4em;
	position: absolute;
	top: 50%;
	margin-top: -0.5em;
	text-align: center;
	text-decoration: none;
}

#left-side:hover p, #right-side:hover p {
	text-decoration: none;
}

#left-image-container {
	background: black url("../img/new-1.jpg") no-repeat center;
	background-size: cover;
}

#right-image-container {
	background: black url("../img/new-2.jpg") no-repeat center;
	background-size: cover;
}

#left-image-container, 
#right-image-container {
	width: 100%;
	height: 100%;
	 -moz-transition: all 0.7s;
	 -webkit-transition: all 0.7s;
	 transition: all 0.7s;
}

#left-side:hover #left-image-container,
#right-side:hover #right-image-container {
	 -moz-transform: scale(1.1);
	 -webkit-transform: scale(1.1);
	 transform: scale(1.1);
}