/* Home.css */

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

body { }

header { background-color:rgba(0, 0, 0, 0.5); padding:110px 100px; }
header h2 { font-size:18px; font-weight:normal; color:rgba(255, 255, 255, 0.5); margin-bottom:6px; }
header h1 { font-size:36px; margin-top:6px; text-shadow:0 0 1px rgba(255, 255, 255, 0.8); }

aside { position:absolute; width:160px; bottom:40px; right:40px; background-color:rgba(0, 0, 0, 0.5); border-radius:20px; padding:20px; font-size:13px; }
aside h5 { margin:0 0 10px 0; font-size:15px; }
aside ul { padding:0 0 0 20px; }
aside ul li { padding:0; }

#teasers { max-width:1100px; margin:0 auto; }
#teasers div { float:left; border:dashed 2px rgba(0, 0, 0, 0.5); width:300px; height:200px; background-color:rgba(0, 0, 0, 0.1); color:rgba(255, 255, 255, 0.5); text-align:center; margin:50px 50px 0 0; border-radius:40px; cursor:pointer; font-size:18px; line-height:200px; transition: color,background-color,font-size 0.1s linear; }
#teasers div:hover { background-color:rgba(0, 0, 0, 0.2); color:rgba(255, 255, 255, 1); font-size:28px; }

#dropable-area { border:dashed 2px rgba(0, 0, 0, 0.5); width:600px; height:300px; background-color:rgba(0, 0, 0, 0.1); text-align:center; margin:50px auto 0 auto; border-radius:40px; }
#dropable-area:hover { background-color:rgba(0, 0, 0, 0.2); }
#dropable-area p { line-height:240px; }

#browse-users-trips { border:dashed 2px rgba(0, 0, 0, 0.5); width:600px; padding:40px; background-color:rgba(0, 0, 0, 0.1); margin:50px auto 0 auto; border-radius:40px; }
#browse-users-trips h3 { margin-bottom:30px; }
#browse-users-trips ul { list-style:none; padding:0px; }
#browse-users-trips ul li { margin:20px 0; }
#browse-users-trips ul li a { text-decoration:none; font-size:20px; line-height:30px; }
#browse-users-trips ul li img { float:left; border:solid 2px rgba(0, 0, 0, 0.2); border-radius:16px; vertical-align:top; margin-right:15px; }

.popup-form { display:none; }

#login-form { width:222px; }
#login-form input[type=submit] { float:right; margin-top:20px; }
#login-form .forgotton-password-link { display:inline-block; font-size:12px; margin-top:30px; color:rgba(255, 255, 255, 0.6); }
#login-form .forgotton-password-link:hover { color:#fff; }
#login-form .social-media-logins { position:absolute; top:0; right:0; padding:10px; }
#login-form .social-media-logins input { width:32px; height:32px; border:none; vertical-align:middle; opacity:0.8; }
#login-form .social-media-logins input:hover { box-shadow:0 0 5px rgba(0, 0, 0, 0.4); opacity:1.0; }

#register-form { width:222px; }
#register-form input[type=button] { float:right; margin-top:20px; }

/* Scenic photo area */
#scenic-photos-area { display:none; width:100%; height:100%; }
#scenic-photos-area #move-left, 
#scenic-photos-area #move-right { position:absolute; width:40%; height:100%; background-repeat:no-repeat; opacity:0.0; cursor:pointer; transition:opacity 0.2s linear; }
#scenic-photos-area #move-left { left:0px; background-image:url(/Content/Images/back.png); background-position:20% 50%; }
#scenic-photos-area #move-right { right:0px; background-image:url(/Content/Images/forward.png); background-position:80% 50%; }
#scenic-photos-area #move-left:hover,
#scenic-photos-area #move-right:hover { opacity:0.3; }

/* Gallery styles (demo section) */
#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; }
#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 .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-3degrees { 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 */ }
#trip-container .rotate-1degrees { transform:rotate(-1deg); -ms-transform:rotate(-1deg); /* IE 9 */ -webkit-transform:rotate(-1deg); /* Opera, Chrome, and Safari */ }

header .popup-form { position:absolute; margin:0; background-color:rgba(0, 0, 0, 0.2); }
header h1 small { font-size:14px; font-weight:normal; margin-left:3px; color:#ccc; }

/* Mobile friendly */
@media (max-width: 1200px) {
	html { background-image: url(/Content/Images/background-mobile.jpg); }

	header {padding:5em; }
	header h1 { font-size:32px; }
	header h2 { font-size:16px; }

	#teasers div { float:none; margin:40px auto; }
}

@media (max-width: 768px) {
	html { background-image: url(/Content/Images/background-mobile.jpg); }

	header {padding:4em;}
	header h1 { font-size: 26px; }
	header h2 { font-size: 14px; }

	#teasers { padding:2em; }
	#teasers div { float: none; margin:40px 0; width: 100%; }
}