/* Tramping styles */

html { 
	background: url(/Users/Ashley/background.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

body { text-shadow:0 0 2px #000; }

/* Profile */
.profile-img { position:absolute; top:20px; left:20px; border-radius:150px; border:10px solid rgba(0, 0, 0, 0.2); box-shadow:0px 0px 15px rgba(0, 0, 0, 0.2); opacity:0.8; transition: opacity 1s linear; }
.profile-img:hover { opacity:1.0; transition: opacity 1s linear; cursor:pointer; }

#profile-desc { position:absolute; left:50px; top:280px; width:300px; }

/* Photos */
#trip-container { padding:50px 50px 0 400px; }

#trip-container .photo-album { position:relative; cursor:pointer; margin-right:30px; width:150px; height:160px; float:left; }
#trip-container .photo-album  span { display:none; font-size:11px; padding:0 5px; }
#trip-container .photo-album:hover  span { display:block; }
#trip-container .photo-frame { box-shadow:0 0 10px rgba(0, 0, 0, 0.5); border:solid 4px #FFF; margin-right:20px; cursor:pointer; width:150px; height:113px; margin-bottom:4px; overflow:hidden; background-color:rgba(200, 200, 200, 0.9); }
#trip-container .photo-frame span{ display:block; position:absolute; top:100px; right:0px; color:rgba(150, 255, 150, 0.6); text-shadow:0 0 1px rgba(0, 0, 0, 0.6); }
#trip-container .photo-frame:hover span { display:none; }
#trip-container .add-album { text-align:center; font-size:48px; line-height:110px; }

#trip-container .photo-album  img { 
	position:relative;
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
	
	opacity:0.8;
	
	transition: -webkit-transform 0.2s linear;  transition: transform 0.2s linear;
	
    -webkit-transform: scale(1.0, 1.0);   transform: scale(1.0, 1.0);
}

#trip-container .photo-album img:hover {
    filter:none;
	-webkit-filter:none;
	opacity:1.0;
	
	transition: -webkit-transform 5s linear;  transition: transform 5s linear;
	
	-webkit-transform: scale(1.5, 1.5);  transform: scale(1.5, 1.5);
}

#trip-container .photo-album img.zoom {
	position:absolute;
	left:0px;
	top:0px;
	
	transform: scale(10, 10);
	-webkit-transform: scale(10, 10);
	
	transform:rotate(0deg); -ms-transform:rotate(0deg); /* IE 9 */ -webkit-transform:rotate(0deg); /* Opera, Chrome, and Safari */
}

#trip-container .rotate-1degrees { transform:rotate(-1deg); -ms-transform:rotate(-1deg); /* IE 9 */ -webkit-transform:rotate(-1deg); /* Opera, Chrome, and Safari */ }
#trip-container .rotate-2degrees { transform:rotate(-2deg); -ms-transform:rotate(-2deg); /* IE 9 */ -webkit-transform:rotate(-2deg); /* Opera, Chrome, and Safari */ }
#trip-container .rotate-3degrees { transform:rotate(-3deg); -ms-transform:rotate(-3deg); /* IE 9 */ -webkit-transform:rotate(-3deg); /* Opera, Chrome, and Safari */ }
#trip-container .rotate-4degrees { transform:rotate(-4deg); -ms-transform:rotate(-4deg); /* IE 9 */ -webkit-transform:rotate(-4deg); /* Opera, Chrome, and Safari */ }
#trip-container .rotate1degrees { transform:rotate(1deg); -ms-transform:rotate(1deg); /* IE 9 */ -webkit-transform:rotate(1deg); /* Opera, Chrome, and Safari */ }
#trip-container .rotate2degrees { transform:rotate(2deg); -ms-transform:rotate(2deg); /* IE 9 */ -webkit-transform:rotate(2deg); /* Opera, Chrome, and Safari */ }
#trip-container .rotate3degrees { transform:rotate(3deg); -ms-transform:rotate(3deg); /* IE 9 */ -webkit-transform:rotate(3deg); /* Opera, Chrome, and Safari */ }
#trip-container .rotate4degrees { transform:rotate(4deg); -ms-transform:rotate(4deg); /* IE 9 */ -webkit-transform:rotate(4deg); /* Opera, Chrome, and Safari */ }

/* Mobile friendly */
@media (max-width: 1200px) {
	.profile-img { position:static; float:left; margin:40px; }

	#profile-desc { position:static; float:left; margin:80px 40px; }

	#trip-container { clear:both; padding:50px; }
}

@media (max-width: 768px) {
	.profile-img { margin: 20px; }

	#profile-desc { margin: 40px 20px; }
}