@font-face {
    font-family: 'Lucida Sans';
    src: url('../fonts/lucida_sans.ttf') format('truetype');
    font-weight: normal;
    font-style: normal; 
}

a {
	cursor: pointer;
}

#left-side {
	float:left; 
	width: 50%; 
	height: 100%; 
	background: #181c24; 
	display: block;
}

#left-side ul{
	width: 350px; 
	float: right; 
	margin-right: 60px;
	margin-top: 55px;
}

#left-side ul h1{
	font-family: 'Lucida Sans', Helvetica, Arial, sans-serif;
	font-size: 12px;
	text-align: right;
	text-transform: uppercase;
	margin-top: 5px;
	color: #f4f4f4;
	font-weight: 100;
	text-shadow: 1px 1px #000;
	margin: 35px 0 35px 0
}

#left-side ul li{
	margin-bottom: 38px;
}

#left-side ul li:last-child{
	margin-bottom: 0px;
}

#left-side ul li a img{
	background: #f4f4f4;
	width: 350px;
	height: 231px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	border-radius: 3px;
	-webkit-transition: -webkit-transform 0.3s ease-in-out;
	-moz-transition: -moz-transform 0.3s ease-in-out;
	-o-transition: -o-transform 0.3s ease-in-out;
	transition: transform 0.3s ease-in-out;
	opacity: .95;
}

#left-side ul li a:hover img{
	-webkit-transform: translateY(-14px);
	-moz-transform: translateY(-14px);
	-o-transform: translateY(-14px);
	transform: translateY(-14px);
	opacity: 1;
}

#left-side ul li h1{
	font-family: 'Lucida Sans', Helvetica, Arial, sans-serif;
	font-size: 11px;
	text-align: center;
	text-transform: uppercase;
	margin-top: 8px;
	color: #f4f4f4;
	font-weight: 200;
	text-shadow: 1px 1px #111;
}



#right-side {
	float:right; 
	width: 50%; 
	height: 100%; 
	background: #f3f3f3; 
	display: block;
}

#right-side ul{
	width: 350px; 
	float: left; 
	margin-left: 60px;
	margin-top: 55px;
}

#right-side ul h1{
	font-family: 'Futura', Helvetica, Arial, sans-serif;
	font-size: 25px;
	text-align: left;
	text-transform: uppercase;
	margin-top: 5px;
	color: #3f4657;
	font-weight: 100;
	text-shadow: 1px 1px #fff;
	margin: 35px 0 35px 0
}

#right-side ul li{
	margin-bottom: 38px;
}

#right-side ul li:last-child{
	margin-bottom: 0px;
}

#right-side ul li a img{
	background: #181c24;
	width: 350px;
	height: 231px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	border-radius: 3px;
	-webkit-transition: -webkit-transform 0.3s ease-in-out;
	-moz-transition: -moz-transform 0.3s ease-in-out;
	-o-transition: -o-transform 0.3s ease-in-out;
	transition: transform 0.3s ease-in-out;
	opacity: .97;
}

#right-side ul li a:hover img{
	-webkit-transform: translateY(-14px);
	-moz-transform: translateY(-14px);
	-o-transform: translateY(-14px);
	transform: translateY(-14px);
	opacity: 1;
}

#right-side ul li h1{
	font-family: 'Lucida Sans', Helvetica, Arial, sans-serif;
	font-size: 11px;
	text-align: center;
	text-transform: uppercase;
	margin-top: 8px;
	color: #3f4657;
	font-weight: 200;
	text-shadow: 1px 1px #fff;
}


/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {

	#right-side ul{
		width: 300px;
		margin-left: 40px;
		margin-top: 35px; 
	}
	
	#right-side ul li{
		margin-bottom: -7px;
	}

	#right-side ul li a img{
		width: 300px;
		height: 201px;
	}
	
	
	
	
	#left-side ul{
		width: 300px; 
		margin-right: 40px;
		margin-top: 35px;
	}
	
	#left-side ul li{
		margin-bottom: -7px;
	}

	#left-side ul li a img{
		width: 300px;
		height: 201px;
	}

}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
	
	#right-side {
		width: 100%;
		height: 720px;
	}
	
	#right-side ul {
		width: 100%;
		margin-left: 0px;
	}
	
	#right-side ul li{
		width: 350px;
		margin: 23px auto 65px auto;
	}
	
	#right-side ul li a img{
		width: 350px;
		margin: 0 auto;
	}
	
	#right-side ul li a:hover img{
		-webkit-transform: none;
		-moz-transform: none;
		-o-transform: none;
		transform: none;
	}
	
	
	
	#left-side {
		width: 100%;
		height: 720px;
	}
	
	#left-side ul {
		width: 100%;
		margin-right: 0px;
	}
	
	#left-side ul li{
		width: 350px;
		margin: 23px auto 65px auto;
	}
	
	#left-side ul li a img{
		width: 350px;
		margin: 0 auto;
	}
	
	#left-side ul li a:hover img{
		-webkit-transform: none;
		-moz-transform: none;
		-o-transform: none;
		transform: none;
	}
	
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
	
	#right-side {
		height: 565px;
	}
	
	#right-side ul {
		margin-top: 45px;
	}
	
	#right-side ul li{
		width: 300px;
		margin: 0px auto 0px auto;
	}
	
	#right-side ul li a img{
		width: 300px;
		height: 201px;
		margin: 0 auto;
	}
	
	
	#left-side {
		height: 565px;
	}
	
	#left-side ul {
		margin-top: 45px;
	}
	
	#left-side ul li{
		width: 300px;
		margin: 0px auto 0px auto;
	}
	
	#left-side ul li a img{
		width: 300px;
		height: 201px;
		margin: 0 auto;
	}
}